/*
 * uat-intl-theme.css — Yabancı Yarış Renk Şablonu
 * Yerli yarışlardan (yeşil/altın/mavi) görsel olarak ayrışan
 * "uluslararası" (siyan/cyan/okyanus) tema.
 *
 * Kullanım:
 *   <link rel="stylesheet" href="/css/uat-intl-theme.css">
 *   body veya section'a class="intl-mode" ekle
 *
 * Bağımsız kupon kartı:  class="intl-coupon-card"
 * Bağımsız sekme:        class="intl-tab"
 * Bağımsız at satırı:    class="intl-horse-row"
 */

/* ── CSS Değişkenleri ─────────────────────────────────────── */
:root {
  --intl-bg:        #07111d;
  --intl-surface:   #091824;
  --intl-surface2:  #0d2038;
  --intl-surface3:  #112844;
  --intl-border:    #0e3a5c;
  --intl-border2:   #155075;
  --intl-text:      #cce8f4;
  --intl-text2:     #bae6fd;
  --intl-muted:     #5aabcc;
  --intl-muted2:    #3d7fa0;

  /* Vurgu renkleri */
  --intl-cyan:      #06b6d4;   /* birincil vurgu — başlık, koşu no, aktif tab */
  --intl-sky:       #0ea5e9;   /* ikincil vurgu — linkler, seçim */
  --intl-skylight:  #38bdf8;   /* üçüncü — stat değerler */
  --intl-cyan-dim:  rgba(6,182,212,.15);
  --intl-cyan-dim2: rgba(6,182,212,.08);

  /* Durum renkleri — yerliyle aynı semantik, farklı ton */
  --intl-green:   #10b981;   /* kazanma, pozitif */
  --intl-amber:   #f59e0b;   /* ödül, prize */
  --intl-red:     #ef4444;   /* hata, kayıp */
}

/* ── Body/section seviyesinde tema ──────────────────────────── */
.intl-mode {
  background: var(--intl-bg) !important;
  color: var(--intl-text) !important;
}

/* ── Genel kart ──────────────────────────────────────────────── */
.intl-card {
  background:    var(--intl-surface);
  border:        1px solid var(--intl-border);
  border-radius: 10px;
}
.intl-card:hover {
  border-color:  var(--intl-border2);
  background:    var(--intl-surface2);
}

/* ── Section başlık ───────────────────────────────────────────── */
.intl-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--intl-muted);
  border-bottom: 1px solid var(--intl-border);
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.intl-section-head .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--intl-cyan);
}

/* ── Kupon kartı ─────────────────────────────────────────────── */
.intl-coupon-card {
  background:   var(--intl-surface);
  border:       1px solid var(--intl-border);
  border-left:  3px solid var(--intl-cyan);
  border-radius: 10px;
  padding:      12px 14px;
  margin-bottom: 8px;
  transition:   border-color .15s, background .15s;
}
.intl-coupon-card:hover {
  background:   var(--intl-surface2);
  border-color: var(--intl-cyan);
  border-left-color: #38bdf8;
}

/* ── Kupon tag (rozet) ───────────────────────────────────────── */
.intl-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: .7rem;
  font-weight: 700;
  background:  var(--intl-cyan-dim);
  border:      1px solid rgba(6,182,212,.3);
  color:       var(--intl-cyan);
}
.intl-tag.mine {
  background:  rgba(16,185,129,.1);
  border-color: rgba(16,185,129,.3);
  color:       var(--intl-green);
}

/* ── At satırı ───────────────────────────────────────────────── */
.intl-horse-row {
  display:      flex;
  align-items:  center;
  gap:          10px;
  background:   var(--intl-surface);
  border:       1px solid var(--intl-border);
  border-radius: 8px;
  padding:      10px 14px;
}
.intl-horse-row:hover {
  background:   var(--intl-surface2);
}

/* Program no butonu */
.intl-pno-btn {
  display:      inline-flex;
  align-items:  center;
  justify-content: center;
  width:  28px; height: 28px;
  border-radius: 6px;
  border:       2px solid rgba(6,182,212,.3);
  background:   rgba(6,182,212,.1);
  font-weight:  800;
  color:        var(--intl-cyan);
  cursor:       pointer;
  font-size:    .82rem;
  transition:   all .15s;
}
.intl-pno-btn:hover {
  border-color: var(--intl-cyan);
  background:   rgba(6,182,212,.2);
}
.intl-pno-btn.selected {
  background:   var(--intl-cyan);
  color:        #07111d;
  border-color: var(--intl-cyan);
}
.intl-pno-btn.locked {
  background:   transparent;
  color:        var(--intl-muted2);
  border-color: var(--intl-border);
  cursor:       default;
}

/* At adı */
.intl-horse-name {
  color:       var(--intl-text2);
  font-weight: 600;
  flex:        1;
}

/* ── Stat kartı ─────────────────────────────────────────────── */
.intl-stat-card {
  background:    var(--intl-surface);
  border:        1px solid var(--intl-border);
  border-radius: 8px;
  padding:       11px 13px;
  text-align:    center;
}
.intl-stat-card .stat-val {
  font-size:  1.4rem;
  font-weight: 800;
  color:      var(--intl-skylight);
}
.intl-stat-card .stat-label {
  font-size: .68rem;
  color:     var(--intl-muted);
  margin-top: 3px;
}

/* ── Sekme (tab) ─────────────────────────────────────────────── */
.intl-tab {
  padding:      8px 14px;
  border-radius: 8px;
  font-size:    .82rem;
  font-weight:  600;
  background:   var(--intl-surface);
  border:       1px solid var(--intl-border);
  color:        var(--intl-muted);
  cursor:       pointer;
  transition:   all .15s;
}
.intl-tab:hover {
  color:        var(--intl-text);
  border-color: var(--intl-border2);
}
.intl-tab.active {
  background:   rgba(6,182,212,.08);
  border-color: var(--intl-sky);
  color:        var(--intl-cyan);
}

/* ── Date slider ─────────────────────────────────────────────── */
.intl-date-display {
  min-width:    180px;
  text-align:   center;
  background:   var(--intl-surface);
  border:       1px solid var(--intl-border);
  border-radius: 22px;
  padding:      7px 16px;
  font-weight:  600;
  color:        var(--intl-cyan);
  font-size:    .88rem;
}
.intl-date-btn {
  width:   34px; height: 34px;
  border-radius: 50%;
  background:   var(--intl-surface);
  border:       1px solid var(--intl-border);
  color:        var(--intl-text);
  font-size:    1.2rem;
  cursor:       pointer;
  display:      inline-flex;
  align-items:  center;
  justify-content: center;
  transition:   all .15s;
}
.intl-date-btn:hover {
  border-color: var(--intl-cyan);
  color:        var(--intl-cyan);
}

/* ── Kupon builder ───────────────────────────────────────────── */
.intl-builder {
  background:    var(--intl-surface);
  border:        1px solid var(--intl-border);
  border-radius: 12px;
  overflow:      hidden;
  margin-bottom: 14px;
}
.intl-builder-head {
  padding:    12px 16px;
  background: rgba(0,0,0,.25);
  border-bottom: 1px solid var(--intl-border);
}
.intl-builder-title {
  font-weight: 700;
  font-size:   .95rem;
  color:       var(--intl-text);
}
.intl-builder-sub {
  font-size: .75rem;
  color:     var(--intl-muted);
}

/* ── Altılı rozet ────────────────────────────────────────────── */
.intl-altili-badge {
  display:      inline-block;
  padding:      2px 7px;
  border-radius: 4px;
  font-size:    11px;
  font-weight:  700;
  margin-left:  6px;
  background:   rgba(6,182,212,.12);
  border:       1px solid rgba(6,182,212,.3);
  color:        var(--intl-cyan);
}
.intl-altili-badge.a2 {
  background:   rgba(14,165,233,.12);
  border-color: rgba(14,165,233,.3);
  color:        var(--intl-sky);
}

/* ── UAT Predictor satırı ───────────────────────────────────── */
.intl-predictor-row {
  padding:       7px 14px;
  font-size:     12px;
  border-bottom: 1px solid var(--intl-border);
  display:       flex;
  align-items:   center;
  gap:           6px;
  flex-wrap:     wrap;
  background:    rgba(6,182,212,.04);
}
.intl-pred-badge {
  display:      inline-flex;
  align-items:  center;
  gap:          3px;
  padding:      2px 7px;
  border-radius: 4px;
  font-size:    .7rem;
  font-weight:  700;
  background:   rgba(6,182,212,.1);
  border:       1px solid rgba(6,182,212,.25);
  color:        var(--intl-cyan);
}

/* ── Cost pill ───────────────────────────────────────────────── */
.intl-cost-pill {
  padding:      4px 10px;
  border-radius: 8px;
  font-size:    .78rem;
  font-weight:  700;
  background:   var(--intl-surface2);
  border:       1px solid var(--intl-border);
  color:        var(--intl-muted);
}
.intl-cost-pill.ready {
  border-color: rgba(16,185,129,.4);
  color:        var(--intl-green);
  background:   rgba(16,185,129,.06);
}
.intl-cost-pill.warn {
  border-color: rgba(239,68,68,.4);
  color:        var(--intl-red);
  background:   rgba(239,68,68,.06);
}

/* ── Kaydet butonu ───────────────────────────────────────────── */
.intl-save-btn {
  padding:      9px 22px;
  border-radius: 8px;
  border:       none;
  background:   linear-gradient(135deg, #0369a1, #0284c7);
  color:        #e0f2fe;
  font-weight:  700;
  font-size:    .85rem;
  cursor:       pointer;
  transition:   all .15s;
}
.intl-save-btn:hover {
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
}
.intl-save-btn:disabled {
  opacity:      .5;
  cursor:       not-allowed;
}

/* ── Banner (yabancı hipodrom bilgilendirme) ─────────────────── */
.intl-banner {
  background:   rgba(6,182,212,.06);
  border:       1px solid rgba(6,182,212,.2);
  border-radius: 12px;
  padding:      14px 18px;
  margin-bottom: 16px;
  display:      flex;
  align-items:  center;
  gap:          14px;
  flex-wrap:    wrap;
}
.intl-banner-title {
  font-weight: 700;
  font-size:   .92rem;
  color:       var(--intl-cyan);
}
.intl-banner-sub {
  font-size:  .78rem;
  color:      var(--intl-muted);
  margin-top: 3px;
}
.intl-banner-link {
  background:   linear-gradient(135deg, #0369a1, #0284c7);
  color:        #e0f2fe;
  padding:      9px 20px;
  border-radius: 8px;
  font-weight:  700;
  font-size:    .82rem;
  text-decoration: none;
  white-space:  nowrap;
}
.intl-banner-link:hover {
  background: linear-gradient(135deg, #0284c7, #0ea5e9);
  text-decoration: none;
}

/* ── Kupon panel (floating) ─────────────────────────────────── */
.intl-kupon-panel {
  background:    var(--intl-surface);
  border:        2px solid var(--intl-cyan);
  border-radius: 14px;
  box-shadow:    0 8px 32px rgba(0,0,0,.7);
}
.intl-kupon-head {
  padding:    10px 14px;
  background: rgba(6,182,212,.1);
  border-bottom: 1px solid var(--intl-border);
}
.intl-kupon-title {
  font-weight: 700;
  font-size:   .88rem;
  color:       var(--intl-cyan);
}

/* ── Leg block ───────────────────────────────────────────────── */
.intl-leg-block {
  background:    var(--intl-surface2);
  border:        1px solid var(--intl-border);
  border-radius: 10px;
  overflow:      hidden;
}
.intl-leg-head {
  padding:       9px 12px;
  border-bottom: 1px solid var(--intl-border);
  display:       flex;
  align-items:   center;
  gap:           8px;
  font-size:     .78rem;
}
.intl-leg-num {
  background:   rgba(6,182,212,.12);
  color:        var(--intl-cyan);
  border:       1px solid rgba(6,182,212,.25);
  border-radius: 5px;
  padding:      2px 8px;
  font-weight:  700;
  font-size:    .72rem;
}

/* ── İkon yardımcı — her yabancı içerikte 🌍 öneki ──────────── */
.intl-label::before { content: '🌍 '; }

/* ── Price badge ─────────────────────────────────────────────── */
.intl-price-badge {
  display:      inline-flex;
  align-items:  center;
  gap:          4px;
  padding:      3px 9px;
  border-radius: 20px;
  font-size:    .7rem;
  font-weight:  700;
  background:   var(--intl-cyan-dim);
  border:       1px solid rgba(6,182,212,.3);
  color:        var(--intl-cyan);
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 600px) {
  .intl-banner { flex-direction: column; align-items: stretch; text-align: center; }
  .intl-banner-link { text-align: center; }
}