/* ==========================================================================
   GLOBAL SCHOLARS AGENCY — PREMIUM VISUAL LAYER
   Purely presentational enhancement. No structural / behavioral selectors
   are introduced or renamed — every rule below targets class names that
   already exist in the live markup, so no JavaScript logic is affected.
   Loaded AFTER all existing stylesheets on every page so it can refine
   colors, depth, motion and typography while leaning on the site's own
   blue / gold palette.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Poppins:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- Refined brand palette (extends, never replaces, existing vars) ---- */
  --gsa-navy-900:#071B33;
  --gsa-navy-800:#0B2A4A;
  --gsa-blue-700:#0A4C8A;
  --gsa-blue-600:#0B63B4;
  --gsa-blue-500:#1673C4;
  --gsa-blue-400:#3B8FDA;
  --gsa-gold-600:#D69A00;
  --gsa-gold-500:#F5B300;
  --gsa-gold-400:#FFCB3D;
  --gsa-teal-500:#0EA5A8;
  --gsa-success:#16A34A;
  --gsa-danger:#E11D48;
  --gsa-warning:#F59E0B;
  --gsa-ink:#101826;
  --gsa-slate-600:#4B5768;
  --gsa-slate-400:#8593A6;
  --gsa-surface:#FFFFFF;
  --gsa-surface-alt:#F5F8FC;
  --gsa-border:#E4EAF2;

  --gsa-grad-primary:linear-gradient(135deg,var(--gsa-blue-700) 0%,var(--gsa-navy-800) 100%);
  --gsa-grad-primary-hover:linear-gradient(135deg,var(--gsa-blue-600) 0%,var(--gsa-blue-700) 100%);
  --gsa-grad-gold:linear-gradient(135deg,var(--gsa-gold-400) 0%,var(--gsa-gold-600) 100%);
  --gsa-grad-mesh:radial-gradient(circle at 15% 20%,rgba(59,143,218,.35),transparent 45%),
                  radial-gradient(circle at 85% 15%,rgba(245,179,0,.18),transparent 40%),
                  radial-gradient(circle at 50% 100%,rgba(14,165,168,.20),transparent 50%);

  --gsa-shadow-xs:0 1px 2px rgba(9,20,39,.06);
  --gsa-shadow-sm:0 2px 8px rgba(9,20,39,.06),0 1px 2px rgba(9,20,39,.04);
  --gsa-shadow-md:0 8px 24px rgba(9,20,39,.10),0 2px 6px rgba(9,20,39,.05);
  --gsa-shadow-lg:0 20px 48px rgba(9,20,39,.14),0 6px 16px rgba(9,20,39,.08);
  --gsa-shadow-glow:0 0 0 4px rgba(11,99,180,.12);
  --gsa-shadow-gold-glow:0 10px 30px rgba(245,179,0,.35);

  --gsa-radius-sm:8px;
  --gsa-radius-md:14px;
  --gsa-radius-lg:20px;

  --gsa-ease:cubic-bezier(.4,0,.2,1);
  --gsa-ease-spring:cubic-bezier(.34,1.56,.64,1);
  --gsa-dur:.28s;
}

/* ---------------------------------------------------------------------- */
/* BASE / TYPOGRAPHY POLISH                                                */
/* ---------------------------------------------------------------------- */
html{scroll-behavior:smooth;}
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body:not([class*="dashboard"]) h1, body:not([class*="dashboard"]) h2, body:not([class*="dashboard"]) h3{
  letter-spacing:-0.01em;
}

::selection{ background:var(--gsa-gold-500); color:var(--gsa-navy-900); }

/* Custom scrollbar (Webkit + Firefox) */
*{ scrollbar-width:thin; scrollbar-color:var(--gsa-blue-500) transparent; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--gsa-blue-500),var(--gsa-blue-700));
  border-radius:20px; border:2px solid rgba(255,255,255,.6);
}
::-webkit-scrollbar-thumb:hover{ background:var(--gsa-gold-500); }

/* Accessible, elegant focus ring everywhere — replaces harsh default outline */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--gsa-gold-500) !important;
  outline-offset:2px;
  border-radius:4px;
}

/* Smooth, consistent motion on every interactive element site-wide */
a, button, input, select, textarea,
[class*="btn"],[class*="card"],[class*="badge"],[class*="tab"],[class*="nav-link"]{
  transition:
    background-color var(--gsa-dur) var(--gsa-ease),
    background var(--gsa-dur) var(--gsa-ease),
    color var(--gsa-dur) var(--gsa-ease),
    border-color var(--gsa-dur) var(--gsa-ease),
    box-shadow var(--gsa-dur) var(--gsa-ease),
    transform var(--gsa-dur) var(--gsa-ease),
    opacity var(--gsa-dur) var(--gsa-ease),
    filter var(--gsa-dur) var(--gsa-ease);
}

img{ -webkit-user-drag:none; }

/* Gentle whole-page entrance so navigation between pages feels premium.
   IMPORTANT: opacity-only — a transform here (even ending at translateY(0))
   would create a new containing block on <body> and break every
   position:fixed element on the page (modals, sticky bars, etc.), since
   they would then center against the full page height instead of the
   viewport. Keep this animation transform-free. */
body{ animation:gsaPageIn .5s var(--gsa-ease) both; }
@keyframes gsaPageIn{ from{opacity:0;} to{opacity:1;} }

/* ---------------------------------------------------------------------- */
/* BUTTONS — every variant used across marketing site, booking, both
   dashboards: .btn, .btn-primary/secondary/outline/danger/success/warning,
   .btn-outline-primary/secondary, .btn-ghost, .btn-link, .btn-icon, .btn-sm  */
/* ---------------------------------------------------------------------- */
.btn,[class*="btn-"],button.btn,a.btn,
input[type="submit"],input[type="button"]{
  position:relative;
  overflow:hidden;
  border-radius:var(--gsa-radius-sm);
  font-weight:600;
  letter-spacing:.01em;
  will-change:transform;
}
.btn:not(.btn-icon):not(.btn-sm):not(.btn-small)::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform .6s var(--gsa-ease);
  pointer-events:none;
}
.btn:not(.btn-icon):not(.btn-sm):not(.btn-small):hover::before{ transform:translateX(120%); }

.btn:hover,[class*="btn-"]:hover{
  transform:translateY(-2px);
}
.btn:active,[class*="btn-"]:active{
  transform:translateY(0) scale(.98);
}

.btn-primary{
  background:var(--gsa-grad-primary) !important;
  border-color:transparent !important;
  box-shadow:var(--gsa-shadow-sm);
}
.btn-primary:hover{
  background:var(--gsa-grad-primary-hover) !important;
  box-shadow:0 14px 28px rgba(10,76,138,.30);
}

.btn-secondary:hover,.btn-outline:hover,.btn-outline-primary:hover,.btn-outline-secondary:hover{
  box-shadow:var(--gsa-shadow-md);
}

.btn-success{ background:linear-gradient(135deg,#22C55E,#15803D) !important; border-color:transparent !important; }
.btn-danger{ background:linear-gradient(135deg,#F43F5E,#B91C1C) !important; border-color:transparent !important; }
.btn-warning{ background:linear-gradient(135deg,#FBBF24,#D97706) !important; border-color:transparent !important; color:#3a2600 !important; }
.btn-info{ background:linear-gradient(135deg,#22D3EE,#0E7490) !important; border-color:transparent !important; }
.btn-success:hover,.btn-danger:hover,.btn-warning:hover,.btn-info:hover{
  filter:brightness(1.06);
  box-shadow:var(--gsa-shadow-md);
}

.btn-large,.btn.btn-large{
  box-shadow:var(--gsa-shadow-md);
}
.btn-large:hover{ box-shadow:var(--gsa-shadow-lg); }

button:disabled,.btn:disabled,.btn[disabled]{
  opacity:.55; cursor:not-allowed; transform:none !important; filter:grayscale(.3);
}

/* ---------------------------------------------------------------------- */
/* CARDS — catches every *-card class across all four surfaces            */
/* ---------------------------------------------------------------------- */
[class$="-card"],[class*="-card "],[class*="-card:"],.card,
.service-card,.benefit-card,.counselor-card,.features-card,.support-card,
.testimonial-card,.confirmation-card,.step-card,.video-card,.small-card,
.resource-card,.dashboard-card,.recommendations-card,.summary-card,
.table-card,.filters-card,.settings-card,.autoCard{
  border-radius:var(--gsa-radius-md) !important;
  box-shadow:var(--gsa-shadow-sm) !important;
  border:1px solid var(--gsa-border);
}
[class$="-card"]:hover,.card:hover,.service-card:hover,.benefit-card:hover,
.resource-card:hover,.dashboard-card:hover,.testimonial-card:hover,
.counselor-card:hover,.video-card:hover,.step-card:hover{
  box-shadow:var(--gsa-shadow-lg) !important;
  transform:translateY(-4px);
  border-color:rgba(11,99,180,.25);
}

.card-header,.table-header,.sidebar-header{
  border-bottom:1px solid var(--gsa-border);
}

/* ---------------------------------------------------------------------- */
/* BADGES / STATUS PILLS                                                  */
/* ---------------------------------------------------------------------- */
.badge,[class*="badge"],.status-badge,.status-dot,.app-badge,.method-badge,
.paid-badge,.unread-badge,.required-badge,.resource-badge{
  border-radius:999px !important;
  font-weight:600;
  letter-spacing:.02em;
}
.badge-success,.status-badge.approved,.paid-badge{ box-shadow:0 0 0 3px rgba(22,163,74,.12); }
.badge-info{ box-shadow:0 0 0 3px rgba(11,99,180,.10); }
.badge-online{ box-shadow:0 0 0 3px rgba(22,163,74,.15); }
.badge-online::before{ animation:gsaPulseDot 1.6s infinite; }
@keyframes gsaPulseDot{
  0%{box-shadow:0 0 0 0 rgba(22,163,74,.5);}
  70%{box-shadow:0 0 0 8px rgba(22,163,74,0);}
  100%{box-shadow:0 0 0 0 rgba(22,163,74,0);}
}

/* ---------------------------------------------------------------------- */
/* SITE HEADER + NAVIGATION (header-style.css overrides)                  */
/* ---------------------------------------------------------------------- */
.header{
  background:var(--gsa-grad-primary) !important;
  box-shadow:0 4px 20px rgba(7,27,51,.18);
}
.navbar{
  background:linear-gradient(90deg,var(--gsa-navy-900),var(--gsa-blue-700)) !important;
  border-top:none !important;
  box-shadow:0 4px 16px rgba(7,27,51,.15);
  backdrop-filter:blur(6px);
  position:sticky; top:0; z-index:500;
}
.nav-links a{
  position:relative;
  border-radius:8px;
}
.nav-links a::after{
  content:"";
  position:absolute; left:16px; right:16px; bottom:6px;
  height:2px; background:var(--gsa-grad-gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--gsa-dur) var(--gsa-ease);
}
.nav-links a:hover{ background-color:rgba(255,255,255,.08) !important; }
.nav-links a:hover::after,.nav-links a.active::after{ transform:scaleX(1); }

.login-icon a{
  background:var(--gsa-grad-gold) !important;
  color:var(--gsa-navy-900) !important;
  box-shadow:0 4px 14px rgba(245,179,0,.35);
}
.login-icon a:hover{
  box-shadow:var(--gsa-shadow-gold-glow);
  transform:translateY(-2px);
}

.header-text h1{ text-shadow:0 2px 12px rgba(0,0,0,.25); }

/* ---------------------------------------------------------------------- */
/* HERO SECTION (home page)                                                */
/* ---------------------------------------------------------------------- */
.hero{
  background:
    var(--gsa-grad-mesh),
    linear-gradient(135deg,var(--gsa-navy-900) 0%,var(--gsa-blue-700) 55%,var(--gsa-navy-800) 100%) !important;
}
.trust-badge{
  box-shadow:0 4px 20px rgba(0,0,0,.15);
}
.trust-badge i{ color:var(--gsa-gold-500); }
.stat-number{
  background:var(--gsa-grad-gold);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 2px 10px rgba(245,179,0,.25));
}
.accreditation-badge{
  box-shadow:var(--gsa-shadow-lg);
}
.scroll-indicator{
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.3));
}

/* Section anchor headings — richer gold underline + subtle depth */
.section-header h2::after{
  background:var(--gsa-grad-gold) !important;
  width:70px !important;
  height:4px !important;
  box-shadow:0 2px 10px rgba(245,179,0,.4);
}
.section-tag{
  background:var(--gsa-surface-alt) !important;
  box-shadow:inset 0 0 0 1px var(--gsa-border);
}

/* Step / process markers */
.step-number{
  background:var(--gsa-grad-primary) !important;
  box-shadow:0 6px 18px rgba(10,76,138,.3);
}
.step-connector{ background:linear-gradient(180deg,var(--gsa-blue-500),transparent) !important; }

.final-cta{
  background:var(--gsa-grad-primary) !important;
  position:relative; overflow:hidden;
}
.final-cta::before{
  content:""; position:absolute; inset:0;
  background:var(--gsa-grad-mesh);
  pointer-events:none;
}

/* ---------------------------------------------------------------------- */
/* MODALS (login modal, dashboards)                                       */
/* ---------------------------------------------------------------------- */
.modal:not(.hidden),.modal.show,.modal-overlay{
  backdrop-filter:blur(6px);
}
.modal-content-wrapper,.modal-content,.modal-dialog,.modal-box{
  border-radius:var(--gsa-radius-lg) !important;
  box-shadow:var(--gsa-shadow-lg) !important;
  animation:gsaModalIn .32s var(--gsa-ease-spring) both;
}
@keyframes gsaModalIn{
  from{ opacity:0; transform:translateY(14px) scale(.97); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.modal-close-btn,.modal-close,.btn-close{
  border-radius:50%;
  transition:background var(--gsa-dur) var(--gsa-ease), transform var(--gsa-dur) var(--gsa-ease);
}
.modal-close-btn:hover,.modal-close:hover,.btn-close:hover{
  background:rgba(0,0,0,.06);
  transform:rotate(90deg);
}
.modal-header{
  background:var(--gsa-surface-alt);
  border-bottom:1px solid var(--gsa-border);
}

/* ---------------------------------------------------------------------- */
/* FORMS / INPUTS                                                          */
/* ---------------------------------------------------------------------- */
input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]),
select,textarea{
  border-radius:var(--gsa-radius-sm) !important;
}
input:not([type="submit"]):not([type="button"]):focus,
select:focus,textarea:focus{
  border-color:var(--gsa-blue-500) !important;
  box-shadow:var(--gsa-shadow-glow) !important;
}

/* ---------------------------------------------------------------------- */
/* SIDEBAR (admin + user dashboard)                                        */
/* ---------------------------------------------------------------------- */
.sidebar{
  background:linear-gradient(180deg,var(--gsa-navy-900) 0%,var(--gsa-blue-700) 100%) !important;
  box-shadow:4px 0 24px rgba(7,27,51,.15);
}
.sidebar h2,.sidebar-header{ letter-spacing:.02em; }
.nav-link{
  border-radius:10px !important;
  position:relative;
}
.nav-link:hover{ background:rgba(255,255,255,.10) !important; transform:translateX(2px); }
.nav-link.active{
  background:rgba(255,255,255,.14) !important;
  box-shadow:inset 3px 0 0 var(--gsa-gold-500);
}

/* ---------------------------------------------------------------------- */
/* TABS                                                                     */
/* ---------------------------------------------------------------------- */
.tab-btn,.action-tab{
  border-radius:var(--gsa-radius-sm) var(--gsa-radius-sm) 0 0 !important;
  position:relative;
}
.tab-btn.active,.action-tab.active{
  color:var(--gsa-blue-700) !important;
}
.tab-btn.active::after,.action-tab.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:3px;
  background:var(--gsa-grad-gold);
  border-radius:3px 3px 0 0;
}

/* ---------------------------------------------------------------------- */
/* TABLES (admin dashboard, data-heavy views)                              */
/* ---------------------------------------------------------------------- */
table,.data-table,.group-payments-table{
  border-radius:var(--gsa-radius-md);
  overflow:hidden;
}
table thead th,.data-table thead th{
  background:var(--gsa-surface-alt) !important;
  color:var(--gsa-navy-900) !important;
  font-weight:700 !important;
  text-transform:uppercase;
  font-size:.75rem;
  letter-spacing:.04em;
}
table tbody tr,.data-table tbody tr{
  transition:background var(--gsa-dur) var(--gsa-ease);
}
table tbody tr:hover,.data-table tbody tr:hover{
  background:rgba(11,99,180,.05) !important;
}

/* ---------------------------------------------------------------------- */
/* PAGINATION                                                               */
/* ---------------------------------------------------------------------- */
.pagination-btn{
  border-radius:8px !important;
}
.pagination-btn:hover{ background:var(--gsa-surface-alt) !important; }
.pagination-btn.active{
  background:var(--gsa-grad-primary) !important;
  color:#fff !important;
  box-shadow:var(--gsa-shadow-sm);
}

/* ---------------------------------------------------------------------- */
/* BOOKING PAGE — step progress                                            */
/* ---------------------------------------------------------------------- */
.booking-step .step-number,.process-steps .step-number{
  box-shadow:0 6px 16px rgba(10,76,138,.28);
}
.step-label{ font-weight:600; }

/* ---------------------------------------------------------------------- */
/* RESPONSIVE SAFETY — never let hover-lift affect touch/mobile layout     */
/* ---------------------------------------------------------------------- */
@media (hover:none){
  [class*="card"]:hover,.btn:hover,[class*="btn-"]:hover,.nav-link:hover{
    transform:none !important;
  }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
