/* ==========================================================================
   Progress eLearning — Modern UI layer
   Hand-authored design system that sits on top of UIkit + Tailwind utilities.
   Loaded after uikit.css/style.css/custom.css so it can safely refine the
   existing, working header/nav/dropdown markup without touching its HTML
   or its uk-* JS wiring, and provides shared components (buttons, cards,
   badges, inputs) used by the redesigned pages.
   ========================================================================== */

:root{
  --brand-50:#eef2ff;
  --brand-100:#e0e7ff;
  --brand-200:#c7d2fe;
  --brand-300:#a5b4fc;
  --brand-400:#818cf8;
  --brand-500:#6366f1;
  --brand-600:#4f46e5;
  --brand-700:#4338ca; /* site primary */
  --brand-800:#3730a3;
  --brand-900:#312e81;
  --accent-300:#fde047;
  --accent-400:#fbbf24;
  --accent-500:#f59e0b;
  --accent-600:#d97706;
  --accent-orange:#fb923c;
  --mint-500:#10b981;
  --mint-600:#059669;
  --ink-900:#0f172a;
  --shadow-soft: 0 10px 30px -10px rgba(67,56,202,.22);
  --shadow-card: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-card-hover: 0 12px 24px -8px rgba(16,24,40,.14), 0 4px 8px -4px rgba(16,24,40,.08);
}

html{ scroll-behavior:smooth; }
body{ font-family: 'Inter', "Open Sans", sans-serif !important; color:#1f2430; -webkit-font-smoothing:antialiased; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:600; font-size:.9rem; line-height:1.2; border-radius:.75rem;
  padding:.75rem 1.5rem; transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  white-space:nowrap; cursor:pointer; border:none;
}
.btn:hover{ transform:translateY(-2px); }
.btn-primary{
  background-image:linear-gradient(135deg, var(--brand-600), var(--brand-800));
  color:#fff; box-shadow:var(--shadow-soft);
}
.btn-primary:hover{ box-shadow:0 16px 36px -10px rgba(67,56,202,.4); color:#fff; }
.btn-accent{
  background-image:linear-gradient(135deg, var(--accent-400), var(--accent-600));
  color:var(--brand-900); box-shadow:0 10px 24px -8px rgba(245,158,11,.45);
}
.btn-accent:hover{ color:var(--brand-900); }
.btn-outline{
  background:#fff; color:var(--brand-700); border:2px solid var(--brand-200);
}
.btn-outline:hover{ border-color:var(--brand-500); color:var(--brand-800); }
.btn-white{
  background:#fff; color:var(--brand-700); box-shadow:0 8px 20px -6px rgba(0,0,0,.18);
}
.btn-sm{ padding:.5rem 1.1rem; font-size:.8rem; border-radius:.6rem; }

/* ---------- Surfaces ---------- */
.card{
  background:#fff; border-radius:1.1rem; box-shadow:var(--shadow-card);
  border:1px solid #eef0f4; transition:box-shadow .25s ease, transform .25s ease;
}
/* Legacy "tube-card" surface (book detail / curriculum pages) upgraded to match .card */
.tube-card{
  border-radius:1.1rem !important; border-color:#eef0f4 !important;
  box-shadow:var(--shadow-card);
}
.card-hover:hover{ box-shadow:var(--shadow-card-hover); transform:translateY(-4px); }
.eyebrow{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--brand-700);
  background:var(--brand-50); padding:.35rem .85rem; border-radius:999px;
}
.section-title{ font-weight:800; letter-spacing:-.02em; color:var(--ink-900); }
.gradient-text{
  background-image:linear-gradient(135deg, var(--brand-600), var(--accent-500));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ---------- Forms ---------- */
.field-label{ display:block; font-size:.82rem; font-weight:600; color:#3a3f4b; margin-bottom:.4rem; }
.input-modern, input.with-border, textarea.with-border, select.with-border{
  width:100%; border:1.5px solid #e4e6ee !important; border-radius:.75rem !important;
  padding:.75rem 1rem !important; font-size:.9rem; background:#fbfbfe;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.input-modern:focus, input.with-border:focus, textarea.with-border:focus, select.with-border:focus{
  outline:none; border-color:var(--brand-500) !important; background:#fff;
  box-shadow:0 0 0 4px var(--brand-100);
}
.input-icon-wrap{ position:relative; }
.input-icon-wrap ion-icon{ position:absolute; left:1rem; top:50%; transform:translateY(-50%); color:#9aa0af; font-size:1.1rem; }
.input-icon-wrap input{ padding-left:2.75rem !important; }

/* ---------- Utility fallbacks (kept independent of Tailwind's build) ---------- */
.line-clamp-2{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3{ display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* ==========================================================================
   Header / navigation polish (structure & uk-* behaviour left untouched)
   ========================================================================== */
header{
  box-shadow:0 1px 0 rgba(16,24,40,.04);
  backdrop-filter:saturate(180%) blur(6px);
}
/* Home-page transparent hero header: this header sits at the very top of the
   page, so UIkit's sticky component reserves its height immediately (it never
   actually starts "unstuck") - with a fully transparent background that left
   a blank white gap above the hero image instead of blending into it. A soft
   dark frosted-glass tint keeps the white logo/nav legible at all times and
   reads as an intentional overlay instead of a rendering gap. */
header.is-transparent.is-dark{
  background-color:rgba(15,23,42,.55) !important;
  border-color:rgba(255,255,255,.18) !important;
}
header .header_inner .left-side #logo img{ transition:opacity .2s ease; }
header .header_menu ul > li > a{
  font-weight:600; letter-spacing:normal; color:#3a3f4b; position:relative;
}

/* Top-level nav links: rounded pill hover (replaces the old underline treatment) */
header .header_menu > ul > li > a{
  border-radius:.65rem; transition:background-color .18s ease, color .18s ease;
}
header .header_menu > ul > li > a:hover,
header .header_menu > ul > li > a.active{
  background:var(--brand-50); color:var(--brand-700);
}
/* Desktop-only spacing tweak - mobile keeps its own larger tap-target padding */
@media (min-width:1025px){
  header .header_menu > ul > li > a{ padding:.55rem .9rem !important; margin:0 2px; }
}
header .header_menu > ul > li > a::after{ content:none; }
header .header_menu .nav-caret{
  font-size:.85rem; margin-left:2px; opacity:.6; transition:transform .18s ease;
}
header .header_menu li:hover .nav-caret,
header .header_menu .nav-has-drop.uk-open .nav-caret{ transform:rotate(180deg); opacity:1; }

header .menu-dropdown, header .category-dropdown, header .header_dropdown{
  border-radius:1rem !important; box-shadow:var(--shadow-soft) !important; border:1px solid #f0eefa;
  overflow:hidden; padding:.5rem !important;
}
header .menu-dropdown ul li a{
  transition:background-color .15s ease, color .15s ease; border-radius:.6rem;
}
header .menu-dropdown ul li a:hover{ background:var(--brand-50); color:var(--brand-700); }

header .header_widgets{ color:#4a4f5c; }
header .header_widgets:hover{ background-color:var(--brand-50) !important; color:var(--brand-700); }
header .header_widgets_avatar{ box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--brand-200); }

header .right-side a.login{
  border:none !important; color:#fff !important;
  background-image:linear-gradient(135deg, var(--brand-600), var(--brand-800));
  box-shadow:var(--shadow-soft); border-radius:.7rem !important; font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease;
}
header .right-side a.login:hover{ transform:translateY(-1px); box-shadow:0 16px 32px -10px rgba(67,56,202,.45); color:#fff !important; }

header .profile_dropdown .user{ background:var(--brand-50); }
header .header_dropdown .see-all{ color:var(--brand-700); font-weight:600; }

/* ==========================================================================
   Footer polish
   ========================================================================== */
.site-footer{ background:var(--ink-900); color:#c7c9d9; }
.site-footer a{ color:#c7c9d9; transition:color .15s ease; }
.site-footer a:hover{ color:#fff; }
.site-footer .footer-heading{ color:#fff; font-weight:700; font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:1rem; }
.site-footer .social-btn{
  display:inline-flex; align-items:center; justify-content:center; width:2.35rem; height:2.35rem;
  border-radius:999px; background:rgba(255,255,255,.08); color:#fff; transition:background-color .18s ease, transform .18s ease;
}
.site-footer .social-btn:hover{ background:var(--brand-600); transform:translateY(-2px); color:#fff; }

/* ==========================================================================
   Auth pages
   ========================================================================== */
.auth-shell{ min-height:calc(100vh - 220px); display:flex; align-items:center; }
.auth-side{
  background-image:linear-gradient(160deg, var(--brand-700), var(--brand-900) 70%);
  color:#fff; position:relative; overflow:hidden;
}
.auth-side::before{
  content:''; position:absolute; inset:0;
  background-image:radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 40%),
                    radial-gradient(circle at 85% 80%, rgba(245,158,11,.25), transparent 45%);
}
.auth-card{ background:#fff; border-radius:1.25rem; box-shadow:var(--shadow-soft); }
.social-circle{
  display:inline-flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem;
  border-radius:999px; background:#f4f5f9; font-size:1.25rem; transition:transform .18s ease, box-shadow .18s ease;
}
.social-circle:hover{ transform:translateY(-2px); box-shadow:var(--shadow-card-hover); }

/* ==========================================================================
   Misc content polish
   ========================================================================== */
.breadcrumb-hero{
  background-image:linear-gradient(120deg, var(--brand-700), var(--brand-500));
}
.faq-item > a{ font-weight:600; color:var(--ink-900); }
.faq-item{ border-radius:1rem !important; }

@media (max-width: 1023px){
  .auth-side{ display:none; }
}

/* ==========================================================================
   Reference-inspired components (NobelLearn-style re-skin)
   ========================================================================== */

/* Hero on dark gradient backgrounds */
.hero-dark{
  background-image:linear-gradient(135deg, var(--brand-900), var(--brand-800) 55%, #4c1d95 120%);
  position:relative; overflow:hidden; color:#fff;
}
.hero-dark::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(circle at 15% 15%, rgba(255,255,255,.10), transparent 40%),
                    radial-gradient(circle at 90% 85%, rgba(251,146,60,.20), transparent 45%);
}
.hero-badge{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:600;
  color:#fff; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  padding:.5rem 1.1rem; border-radius:999px; backdrop-filter:blur(4px);
}
.hero-accent-text{
  background-image:linear-gradient(90deg, var(--accent-300), var(--accent-orange));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-search{
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  border-radius:1.25rem; padding:.5rem; backdrop-filter:blur(6px);
}
.hero-search input{
  background:transparent; border:none; color:#fff; width:100%; padding:.65rem 1rem; font-size:.95rem;
}
.hero-search input::placeholder{ color:rgba(255,255,255,.65); }
.hero-search input:focus{ outline:none; }

/* Stat band */
.stat-band{
  background-image:linear-gradient(135deg, var(--brand-600), var(--brand-700));
  color:#fff;
}
.stat-band .stat-num{ font-weight:800; font-size:2rem; line-height:1.1; }
.stat-band .stat-label{ color:rgba(255,255,255,.8); font-size:.85rem; }

/* Rating + course-card bits */
.rating-stars ion-icon{ color:var(--accent-400); }
.badge-pill{
  display:inline-flex; align-items:center; gap:.3rem; font-size:.7rem; font-weight:700;
  padding:.3rem .75rem; border-radius:999px;
}
.badge-free{ background:var(--brand-600); color:#fff; }

/* Book-detail page: segmented tab bar + accordion chevrons */
.chapter-tabs.cd-secondary-nav li a{
  display:inline-flex !important; align-items:center; gap:.35rem;
  font-weight:700; letter-spacing:.02em; border-radius:.5rem .5rem 0 0; padding:0 .9rem !important;
}
.chapter-tabs.cd-secondary-nav li.uk-active a,
.chapter-tabs.cd-secondary-nav li.active a{
  color:var(--brand-700) !important; border-bottom-color:var(--brand-700) !important;
  background:var(--brand-50);
}
.chapter-tabs.cd-secondary-nav li:hover a{ color:var(--brand-700) !important; }
.accordion-chevron{ transition:transform .2s ease; font-size:1.1rem; }
.uk-accordion li.uk-open > a .accordion-chevron{ transform:rotate(180deg); }

/* Centered auth card (replaces split-panel layout) */
.auth-center-shell{ min-height:calc(100vh - 220px); display:flex; align-items:center; justify-content:center; padding:2.5rem 1rem; }
.auth-center-card{
  background:#fff; border-radius:1.5rem; box-shadow:var(--shadow-card-hover);
  border:1px solid #eef0f4; width:100%;
}

/* Footer newsletter box */
.footer-newsletter input{
  width:100%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  border-radius:.75rem; padding:.75rem 1rem; color:#fff; font-size:.9rem;
}
.footer-newsletter input::placeholder{ color:rgba(255,255,255,.45); }
.footer-newsletter input:focus{ outline:none; border-color:var(--brand-500); }
.footer-newsletter .btn-primary{ width:100%; }