/* ================================================================
   LinguaPlatform — Public CSS  (YANGI DIZAYN: ko'k–oq + dark mode)
   Barcha ranglar theme.css ning --lp-* tokenlariga BOG'LANGAN,
   shuning uchun light/dark avtomatik ishlaydi.
   ⚠️ theme.css shu fayldan OLDIN yuklanishi shart.
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&display=swap');

:root {
  /* Eski o'zgaruvchi nomlari saqlangan, lekin endi token'larga bog'langan */
  --primary:      var(--lp-primary);
  --primary-dark: var(--lp-primary-hover);
  --primary-soft: var(--lp-primary-soft);
  --navy:         var(--lp-text);
  --navy-mid:     var(--lp-muted);
  --navy-light:   var(--lp-muted);
  --slate:        var(--lp-muted);
  --slate-light:  var(--lp-faint);
  --border:       var(--lp-border);
  --bg:           var(--lp-bg);
  --white:        var(--lp-surface);
}

/* ── Base ─────────────────────────────────────────────────────── */
body { font-family: 'Inter', sans-serif !important; background: var(--lp-bg); color: var(--lp-text); }

/* Bootstrap primary override */
.text-primary           { color: var(--lp-primary) !important; }
.bg-primary             { background-color: var(--lp-primary) !important; }
.btn-primary            { background-color: var(--lp-primary); border-color: var(--lp-primary); color:#fff; font-weight: 600; border-radius: 8px; }
.btn-primary:hover      { background-color: var(--lp-primary-hover); border-color: var(--lp-primary-hover); color:#fff; }
.btn-outline-primary    { color: var(--lp-primary); border-color: var(--lp-primary); font-weight: 600; border-radius: 8px; }
.btn-outline-primary:hover { background-color: var(--lp-primary); border-color: var(--lp-primary); color:#fff; }
.bg-primary-soft        { background: var(--lp-primary-soft) !important; }
.btn:focus, input:focus, select:focus, textarea:focus {
  box-shadow: var(--lp-ring) !important;
  border-color: var(--lp-primary) !important; outline: none;
}
.btn-sm  { font-size: .82rem !important; font-weight: 600 !important; }
.btn-lg  { padding: .8rem 2rem !important; font-size: 1rem !important; font-weight: 700 !important; }

/* ── NAVBAR ───────────────────────────────────────────────────── */
.navbar {
  background: var(--lp-surface) !important;
  border-bottom: 1px solid var(--lp-border) !important;
  box-shadow: var(--lp-shadow-sm) !important;
  padding: 0 !important;
}
.navbar-brand {
  font-weight: 800 !important; font-size: 1.1rem !important;
  color: var(--lp-text) !important; display: flex; align-items: center; gap: .4rem;
}
.navbar-brand i { color: var(--lp-primary); font-size: 1.2rem; }
.navbar-brand:hover { color: var(--lp-text) !important; }
.nav-link {
  font-size: .875rem !important; font-weight: 500 !important;
  color: var(--lp-muted) !important; padding: .45rem .85rem !important;
  border-radius: 8px !important; transition: all .15s !important;
}
.nav-link:hover { color: var(--lp-primary) !important; background: var(--lp-primary-soft) !important; }

/* ── PAGE HEADER BANNERS — yumshoq, ikkala rejimga mos ──
   .apply-header / .about-header (class) va inline [style*="#1E40AF"]
   bannerlarni ushlaydi. Light: nafis o'rta ko'k; Dark: sahifaga singadi. */
.apply-header, .about-header, [style*="#1E40AF"] {
  background: linear-gradient(135deg, #3360BE 0%, #2A50A6 55%, #1C7F69 140%) !important;
}
[data-bs-theme="dark"] .apply-header,
[data-bs-theme="dark"] .about-header,
[data-bs-theme="dark"] [style*="#1E40AF"] {
  background: linear-gradient(135deg, #16243E 0%, #16314C 55%, #133B35 140%) !important;
}

/* ── HERO (Variant A — Editorial: yengil havorang fon, qora serif sarlavha) ── */
.hero-section {
  background: transparent !important;
  padding: 70px 0 60px !important; position: relative; overflow: hidden;
}
.hero-section::before {
  content: ''; position: absolute; inset: -25% -10% auto -10%; height: 150%; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 46% at 12% 16%, rgba(var(--lp-primary-rgb),.24), transparent 70%),
    radial-gradient(34% 42% at 88% 10%, rgba(54,103,214,.18), transparent 70%),
    radial-gradient(40% 44% at 70% 74%, rgba(14,124,102,.15), transparent 72%);
  animation: heroAurora 20s ease-in-out infinite alternate;
}
@keyframes heroAurora { from { transform: translate3d(0,0,0) scale(1);} to { transform: translate3d(0,-3%,0) scale(1.07);} }
@media (prefers-reduced-motion: reduce) { .hero-section::before { animation: none; } }
.hero-section .container { position: relative; z-index: 1; }
.hero-section h1 {
  font-family: 'Source Serif 4', Georgia, serif !important;
  color: var(--lp-text) !important; font-weight: 700 !important;
  letter-spacing: -.02em !important; line-height: 1.08 !important;
}
.hero-section h1 .text-primary { color: var(--lp-primary) !important; }
.hero-section .lead { color: var(--lp-muted) !important; }
.hero-section .text-muted { color: var(--lp-faint) !important; }
.hero-section .fs-2.fw-bold { color: var(--lp-primary) !important; }
.hero-section .badge.bg-primary-soft {
  background: var(--lp-accent-soft) !important; color: var(--lp-accent-on-soft) !important;
  border: 1px solid var(--lp-border); font-size: .8rem; font-weight: 700;
}
.hero-section .btn-primary {
  background: var(--lp-primary) !important; border-color: var(--lp-primary) !important; color: #fff !important;
  box-shadow: var(--lp-shadow-md) !important;
}
.hero-section .btn-outline-secondary {
  border-color: var(--lp-border-strong) !important; color: var(--lp-text) !important;
}
.hero-section .btn-outline-secondary:hover {
  background: var(--lp-primary-soft) !important; border-color: var(--lp-primary) !important; color: var(--lp-primary) !important;
}
.hero-photo {
  border-radius: 24px !important;
  box-shadow: var(--lp-shadow-lg) !important;
  border: 1px solid var(--lp-border) !important;
}
.hero-placeholder {
  background:
    radial-gradient(120% 90% at 70% 10%, rgba(var(--lp-primary-rgb),.14), transparent 60%),
    var(--lp-surface-2) !important;
  border: 1px solid var(--lp-border) !important; border-radius: 24px !important;
}
.min-vh-80 { min-height: 80vh; }

/* ── SECTIONS ─────────────────────────────────────────────────── */
section.py-5 { background: transparent; }
section.py-5.bg-light, .bg-light { background: var(--lp-bg-tint) !important; }

/* ── CARDS ────────────────────────────────────────────────────── */
.card {
  border-radius: 14px !important; border: 1px solid var(--lp-border) !important;
  box-shadow: var(--lp-shadow-sm) !important; background: var(--lp-surface) !important;
  color: var(--lp-text);
  transition: all .2s;
}
.shadow-sm { box-shadow: var(--lp-shadow-sm) !important; }

/* Course card */
.course-card {
  border-top: 3px solid transparent !important; transition: all .2s !important;
  position: relative;
}
.course-card:hover {
  transform: translateY(-5px) !important;
  box-shadow: var(--lp-shadow-lg) !important;
  border-color: var(--lp-border-strong) !important;
  border-top-color: var(--lp-primary) !important;
}

/* Icon circle */
.icon-circle {
  border-radius: 10px !important;
  display: flex; align-items: center; justify-content: center;
}
.icon-circle.bg-primary { background: var(--lp-primary-soft) !important; color: var(--lp-primary-on-soft) !important; }
.icon-circle.bg-success  { background: var(--lp-success-soft) !important; color: var(--lp-success) !important; }

/* ── SECTION HEADER ───────────────────────────────────────────── */
.section-header h1, .section-header h2 {
  font-weight: 800 !important; color: var(--lp-text) !important; letter-spacing: -.02em;
}
.section-header p { color: var(--lp-muted) !important; }

/* ── BADGES ───────────────────────────────────────────────────── */
.badge { font-weight: 600 !important; letter-spacing: .03em; border-radius: 6px !important; }
.badge.bg-primary      { background: var(--lp-primary) !important; }
.badge.bg-primary-soft { background: var(--lp-primary-soft) !important; color: var(--lp-primary-on-soft) !important; }
.badge.bg-success      { background: var(--lp-success-soft) !important; color: var(--lp-success) !important; }
.badge.bg-warning.text-dark { background: var(--lp-warning-soft) !important; color: var(--lp-warning) !important; }
.badge.bg-secondary    { background: var(--lp-surface-2) !important; color: var(--lp-muted) !important; }
.badge.bg-danger       { background: var(--lp-danger-soft) !important; color: var(--lp-danger) !important; }

/* ── FORMS ────────────────────────────────────────────────────── */
.form-control, .form-select {
  border: 1.5px solid var(--lp-border) !important; border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important; color: var(--lp-text) !important;
  background: var(--lp-surface-2) !important; transition: border-color .2s, box-shadow .2s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--lp-primary) !important;
  box-shadow: var(--lp-ring) !important;
  background: var(--lp-surface) !important;
}
.form-control::placeholder { color: var(--lp-faint) !important; }
.form-label { font-weight: 600 !important; font-size: .86rem !important; color: var(--lp-text) !important; }

/* ── ACCORDION (FAQ) ──────────────────────────────────────────── */
.accordion-item {
  border-radius: 12px !important; border: 1px solid var(--lp-border) !important;
  background: var(--lp-surface) !important; overflow: hidden; margin-bottom: .5rem;
}
.accordion-button {
  font-weight: 600 !important; font-size: .95rem !important;
  color: var(--lp-text) !important; background: var(--lp-surface) !important;
}
.accordion-button:not(.collapsed) {
  color: var(--lp-primary) !important;
  background: var(--lp-primary-soft) !important; box-shadow: none !important;
}
.accordion-button::after { filter: var(--lp-accordion-arrow, none); }
.accordion-button:focus { box-shadow: none !important; }
.accordion-body { color: var(--lp-muted) !important; font-size: .9rem !important; line-height: 1.75; }

/* ── BLOG ─────────────────────────────────────────────────────── */
.blog-content { font-size: 1.02rem; line-height: 1.85; color: var(--lp-text); }
.blog-content h2, .blog-content h3 { font-weight: 700; margin-top: 2rem; color: var(--lp-text); }
.blog-content p { margin-bottom: 1.4rem; }

/* ── QUIZ form check ──────────────────────────────────────────── */
.form-check-input:checked {
  background-color: var(--lp-primary) !important; border-color: var(--lp-primary) !important;
}
.form-check-label { font-size: .92rem; color: var(--lp-text); cursor: pointer; }

/* ── PAGINATION ───────────────────────────────────────────────── */
.pagination .page-link {
  border-color: var(--lp-border) !important; color: var(--lp-muted) !important;
  background: var(--lp-surface) !important;
  border-radius: 8px !important; margin: 0 2px; font-weight: 500;
}
.pagination .page-item.active .page-link {
  background-color: var(--lp-primary) !important; border-color: var(--lp-primary) !important; color: #fff !important;
}

/* ── ALERTS ───────────────────────────────────────────────────── */
.alert { border-radius: 10px !important; font-size: .9rem; border-width: 1px; }
.alert-info    { background: var(--lp-info-soft) !important;    border-color: transparent !important; color: var(--lp-info) !important; }
.alert-success { background: var(--lp-success-soft) !important; border-color: transparent !important; color: var(--lp-success) !important; }
.alert-warning { background: var(--lp-warning-soft) !important; border-color: transparent !important; color: var(--lp-warning) !important; }
.alert-danger  { background: var(--lp-danger-soft) !important;  border-color: transparent !important; color: var(--lp-danger) !important; }

/* ── CTA SECTION (yengil ko'k karta) ──────────────────────────── */
section.bg-primary.text-white {
  background: linear-gradient(135deg, #2E6BE6 0%, #1E40AF 100%) !important;
  padding: 5rem 0 !important;
}
section.bg-primary.text-white .btn-light {
  background: #fff !important; color: var(--lp-primary) !important; font-weight: 700; border: none;
}
section.bg-primary.text-white .btn-outline-light {
  border-color: rgba(255,255,255,.45) !important; color: #fff !important;
}
section.bg-primary .card.bg-primary { background: rgba(255,255,255,.12) !important; border: 1px solid rgba(255,255,255,.15) !important; }

/* ── FOOTER ───────────────────────────────────────────────────── */
footer.bg-dark { background: var(--lp-surface) !important; border-top: 1px solid var(--lp-border); }
footer.bg-dark h5, footer.bg-dark h6 { font-weight: 700; color: var(--lp-text); }
footer .text-white-50 { color: var(--lp-muted) !important; }
footer a.text-white-50:hover { color: var(--lp-primary) !important; }
footer hr.border-secondary { border-color: var(--lp-border) !important; opacity: 1; }

/* ── TABLE ────────────────────────────────────────────────────── */
.table { font-size: .9rem; color: var(--lp-text); }
.table thead th {
  font-size: .75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--lp-muted) !important;
  border-bottom: 1px solid var(--lp-border) !important; background: var(--lp-surface-2);
}
.table tbody td { color: var(--lp-text); vertical-align: middle; border-color: var(--lp-border); }
.table-hover tbody tr:hover { background: var(--lp-primary-soft); }

/* ── SCROLL REVEAL ────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ── TOAST ────────────────────────────────────────────────────── */
.toast-fixed { position: fixed; top: 1.25rem; right: 1.25rem; z-index: 1100; display: flex; flex-direction: column; gap: .6rem; }
.pub-toast {
  background: var(--lp-surface); border: 1px solid var(--lp-border); border-left: 4px solid var(--lp-success);
  border-radius: 10px; padding: .9rem 1.25rem;
  box-shadow: var(--lp-shadow-lg);
  font-size: .9rem; font-weight: 500; color: var(--lp-text);
  display: flex; align-items: center; gap: .6rem;
  animation: toastIn .35s ease; min-width: 280px;
}
.pub-toast-err { border-left-color: var(--lp-danger); }
@keyframes toastIn { from{transform:translateX(110%);opacity:0;} to{transform:translateX(0);opacity:1;} }

/* Dark rejimda accordion strelkasini oqartirish */
[data-bs-theme="dark"] { --lp-accordion-arrow: invert(1) grayscale(1) brightness(1.6); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET  ≤ 991.98px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
  /* Modals — to'liq kenglikda */
  .modal-lg, .modal-xl { max-width: calc(100% - 2rem) !important; }
  .modal-dialog        { margin: 1rem auto !important; }
  .modal-body          { max-height: 70vh; overflow-y: auto; }

  /* Hero padding kamaytirildi */
  .sl-hero { padding-top: 2.5rem !important; padding-bottom: 2rem !important; }

  /* Grid spacing */
  .gy-5 { --bs-gutter-y: 2rem !important; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE  ≤ 767.98px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  /* ── HERO SECTION ── */
  .hero-section { padding: 55px 0 45px !important; }
  .hero-section h1 { font-size: 2rem !important; }

  /* Hero padding inline styles orqali yozilganlari */
  div[style*="padding:3.5rem 0"],   div[style*="padding: 3.5rem 0"],
  div[style*="padding:4rem 0"],     div[style*="padding: 4rem 0"],
  div[style*="padding:3rem 0 2rem"],div[style*="padding: 3rem 0 2rem"] {
    padding-top: 2rem !important; padding-bottom: 1.5rem !important;
  }

  /* ── INLINE TIPOGRAFIYA ── */
  h1[style*="font-size:3rem"],   h1[style*="font-size: 3rem"],
  h1[style*="font-size:2.5rem"], h1[style*="font-size: 2.5rem"] {
    font-size: 1.75rem !important; line-height: 1.2 !important;
  }
  h2[style*="font-size:2.5rem"], h2[style*="font-size: 2.5rem"],
  h2[style*="font-size: 2rem"],  h2[style*="font-size:2rem"] {
    font-size: 1.45rem !important;
  }
  p[style*="font-size:1.2rem"],  p[style*="font-size: 1.2rem"],
  p[style*="font-size:1.05rem"], p[style*="font-size: 1.05rem"] {
    font-size: .95rem !important;
  }
  a.btn[style*="font-size: 1.3rem"],
  .btn[style*="font-size: 1.3rem"] {
    font-size: 1rem !important; padding: .75rem 1.25rem !important;
  }

  /* ── BOOTSTRAP SPACING ── */
  .p-5  { padding: 1.5rem !important; }
  .py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .g-5  { --bs-gutter-x: 1rem !important; --bs-gutter-y: 1.5rem !important; }

  /* ── TOAST ── */
  .toast-fixed { right: .75rem; left: .75rem; top: .75rem; }
  .pub-toast   { min-width: unset; width: 100%; }

  /* Hover effektlari touch ekranda ishlamaydi — o'chirish */
  .lp-soft-card:hover  { transform: none; box-shadow: var(--lp-shadow-sm) !important; }
  .course-card:hover   { transform: none !important; box-shadow: var(--lp-shadow-sm) !important; }
  .pf-stat:hover       { transform: none; }

  /* ── RESULT / SCORE PAGE ── */
  .rp-hero    { padding: 1.25rem 1rem !important; flex-direction: column; }
  .rp-title   { font-size: 1.3rem !important; }
  .rp-actions { flex-direction: column; width: 100%; }
  .rp-btn     { justify-content: center; }
  .rp-scores  { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)) !important; gap: .6rem !important; }
  .rp-score   { padding: 1rem .75rem !important; }
  .rp-score-value { font-size: 1.75rem !important; }
  .rp-score.overall .rp-score-value { font-size: 1.6rem !important; }
  .rp-tabs    { flex-wrap: wrap; gap: .35rem; padding-bottom: .5rem; }
  .rp-tab     { font-size: .82rem !important; padding: .4rem .85rem !important; }
  .rp-table   { min-width: 480px !important; font-size: .82rem !important; }
  .rp-table th, .rp-table td { padding: .65rem .5rem !important; }
  .rp-section-title { font-size: 1.1rem !important; margin: 1.4rem 0 .9rem !important; }

  /* ── MOCK EXAM PROFILE PAGE ── */
  .pf-hero      { padding: 1.25rem 1rem !important; }
  .pf-hero-name { font-size: 1.25rem !important; }
  .pf-avatar    { width: 68px !important; height: 68px !important; font-size: 1.7rem !important; border-radius: 16px !important; }
  .pf-stat      { padding: 1rem !important; }
  .pf-stat-band { font-size: 1.75rem !important; }
  .pf-card      { padding: 0 !important; }

  /* ── BLOG DETAIL ── */
  .article-hero    { height: 220px !important; }
  .main-container  { margin-top: -80px !important; }
  .content-box     { padding: 1.5rem !important; }
  .tab-item        { padding: 10px 8px !important; font-size: .82rem !important; }
  .progress-box    { padding: .75rem 1rem !important; }

  /* ── SECTION LIST PAGE ── */
  .sl-hero        { padding-top: 2rem !important; padding-bottom: 1.5rem !important; }
  .mode-btn       { padding: 1rem !important; }
  .exam-card:hover { transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — PHONE  ≤ 575.98px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
  /* Global bazis */
  .container { padding-left: 1rem !important; padding-right: 1rem !important; }
  section.py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }

  /* iOS auto-zoom oldini olish (< 16px input'da Safari zoom qiladi) */
  .form-control, .form-select, textarea { font-size: 16px !important; }

  /* Navbar brand */
  .lp-brand .nm  { font-size: 1.05rem; }
  .lp-brand .sub { display: none; }

  /* Tugmalar — minimum 44px balandlik (WCAG touch target) */
  .btn    { min-height: 44px; }
  .btn-sm { min-height: 36px !important; }
  .btn-lg { font-size: 1rem !important; }

  /* ── EXAM DETAIL ── */
  /* Full mock card: ustma-ust */
  .col-md-7.p-5, .col-md-5.p-5 { padding: 1.25rem 1rem !important; }

  /* ── LEADERBOARD ── */
  .lb-podium          { gap: .4rem !important; }
  .lb-podium-item     { flex: 0 0 calc(33% - .3rem) !important; min-width: 0 !important; }
  .lb-podium-avatar   { width: 46px !important; height: 46px !important;
                        font-size: .95rem !important; }
  .lb-podium-score    { font-size: 1.3rem !important; padding: .5rem .4rem !important; }
  .lb-podium-name     { font-size: .78rem !important; }
  .lb-table-wrap      { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── BLOG DETAIL (telefon) ── */
  .article-hero   { height: 180px !important; }
  .main-container { margin-top: -60px !important; padding: 0 .75rem !important; }
  .content-box    { padding: 1.25rem 1rem !important; }
  .tab-item       { font-size: .78rem !important; padding: 9px 5px !important; }

  /* ── RESULT TABLE telefonda ── */
  .rp-scores { grid-template-columns: repeat(2, 1fr) !important; }
  .rp-score-ic { width: 36px !important; height: 36px !important; font-size: 1rem !important; }
  .rp-score-value { font-size: 1.6rem !important; }

  /* Section list h1 */
  .sl-hero h1 { font-size: 1.5rem !important; }
}