/* =====================================================================
   Vision Plus — Design Enhancement Layer
   Additive only. Loaded AFTER base styles in public, dashboard, admin
   and partner contexts. Brand = deep navy blue + signature red + white.
   Adds: scroll animations, hover micro-interactions, red brand accents,
   responsive polish. Does NOT change markup or break functionality.
   ===================================================================== */

:root {
    /* Base text/surface tokens — redefined here so they exist in the partner
       portal too (that layout does NOT load style.css, which left these
       undefined and made dark-text rules fail -> invisible white labels). */
    --text-white: #0f1729;
    --text-bright: #1a2744;
    --text-body: #3d4f6f;
    --text-muted: #6b7a94;
    --border-color: rgba(30,58,95,0.12);
    --bg-card: #ffffff;
    --bg-dark-2: #f1f3f8;
    --accent: #2563eb;

    --brand-navy: #0d2f53;
    --brand-navy-dark: #052659;
    --brand-red: #e4232b;
    --brand-red-dark: #c41822;
    --gradient-red: linear-gradient(135deg, #e4232b 0%, #ff5d52 100%);
    --shadow-red: 0 10px 28px rgba(228,35,43,.28);
    --shadow-soft: 0 16px 40px rgba(13,47,83,.12);
}

/* ---------------- Scroll reveal ---------------- */
html.anim-ready .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
    transition-delay: var(--rd, 0s);
    will-change: opacity, transform;
}
html.anim-ready .reveal.in { opacity: 1; transform: none; will-change: auto; }

@media (prefers-reduced-motion: reduce) {
    html.anim-ready .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    .hero-card { animation: none !important; }
    * { scroll-behavior: auto !important; }
}

/* ---------------- Keyframes ---------------- */
@keyframes vpShine { 0% { left: -60%; } 100% { left: 140%; } }
@keyframes vpPulse {
    0%   { box-shadow: 0 0 0 0 rgba(228,35,43,.45); }
    70%  { box-shadow: 0 0 0 12px rgba(228,35,43,0); }
    100% { box-shadow: 0 0 0 0 rgba(228,35,43,0); }
}

/* ---------------- Global smoothing ---------------- */
html { scroll-behavior: smooth; }
a, .btn, button,
.program-card, .step-card, .dashboard-card, .stat-card, .partner-benefit,
.admin-stat, .pp-stat, .pp-card, .feature-card {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease, color .2s ease;
}

/* ---------------- Card hover lift + red top accent ---------------- */
.program-card, .step-card, .dashboard-card, .stat-card,
.partner-benefit, .admin-stat, .pp-stat, .pp-card { position: relative; }

.program-card::before, .step-card::before, .admin-stat::before, .pp-stat::before, .stat-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--gradient-red);
    border-top-left-radius: inherit; border-top-right-radius: inherit;
    transform: scaleX(0); transform-origin: left;
    transition: transform .35s ease; opacity: .95;
}
.program-card:hover::before, .step-card:hover::before,
.admin-stat:hover::before, .pp-stat:hover::before, .stat-card:hover::before { transform: scaleX(1); }

.program-card:hover, .stat-card:hover, .dashboard-card:hover,
.admin-stat:hover, .pp-stat:hover, .pp-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-soft); }

/* ---------------- Brand red accents ---------------- */
.section-badge, .hero-badge {
    background: rgba(228,35,43,.10) !important;
    color: var(--brand-red) !important;
    border-color: rgba(228,35,43,.22) !important;
}
.section-header h2::after {
    content: ""; display: block; width: 54px; height: 3px;
    margin: 14px auto 0; background: var(--gradient-red); border-radius: 3px;
}
/* default: light gradient so it reads on the blue canvas */
.gradient-text {
    background: linear-gradient(120deg, #C1E8FF 0%, #7DA0CA 45%, #ff5d52 115%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* inside white panels, use the dark brand gradient */
.partner-form-card .gradient-text, .auth-card .gradient-text, .card .gradient-text,
.dashboard-card .gradient-text {
    background: linear-gradient(120deg, #0d2f53 0%, #2563eb 55%, #e4232b 118%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* Apply CTAs in brand red (matches "APPLY NOW" marketing) */
.btn-apply {
    background: var(--gradient-red) !important;
    color: #fff !important; border: none !important;
}
.btn-apply:hover { box-shadow: var(--shadow-red) !important; color: #fff !important; transform: translateY(-2px); }

/* generic red helper */
.btn-red { background: var(--gradient-red) !important; color: #fff !important; border: none !important; }
.btn-red:hover { box-shadow: var(--shadow-red); transform: translateY(-2px); color: #fff !important; }

/* ---------------- Nav underline ---------------- */
.nav-link { position: relative; }
.nav-link::after {
    content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px;
    background: var(--brand-red); border-radius: 2px;
    transform: scaleX(0); transform-origin: center; transition: transform .25s ease;
}
.nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); }

/* ---------------- Button hover lift (shine removed — it leaked outside
   buttons inside glass/backdrop-filtered tables) ---------------- */
.btn-primary-custom:hover, .btn-auth:hover, .pp-btn:hover, .btn-apply:hover { transform: translateY(-2px); }

/* ---------------- Images ---------------- */
.program-card img, .grid-img { transition: transform .4s ease; }
.program-card:hover img { transform: scale(1.03); }

/* ---------------- Tables: gentle row hover already exists; add header sheen ---------------- */
.pp-table tbody tr, .admin-table tbody tr { transition: background .2s ease; }

/* ---------------- Responsive typography & spacing ---------------- */
.hero-content h1 { font-size: clamp(2rem, 5.2vw, 3.5rem); }
.section-header h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.section-padding { padding: clamp(56px, 8vw, 100px) 0; }

@media (max-width: 575px) {
    .flash-alert { min-width: 0; width: calc(100% - 24px); left: 12px; transform: none; }
    .hero-stats { gap: 16px; flex-wrap: wrap; }
    .hero-section { padding: 80px 0 40px; }
    .hero-visual { height: auto; }
}

/* =====================================================================
   Branded blue backgrounds (Instagram-style): vibrant navy->royal blue
   gradient + subtle pattern + red glow. Heroes/auth/CTA go dark with
   white text; content/listing sections stay light for readability.
   ===================================================================== */

:root {
    /* Richer, more vibrant brand gradient — upgrades every already-dark area
       (page-hero, cta-box, auth-header, footer) at once */
    --gradient-dark: linear-gradient(135deg, #0a2747 0%, #0d2f53 55%, #143a72 100%);
    --gradient-brand: linear-gradient(160deg, #071f3b 0%, #0a2545 55%, #0b2a50 100%);
}

/* ---------- Homepage hero -> branded blue ---------- */
.hero-section {
    background: var(--gradient-brand);
    color: #fff;
}
/* dotted texture overlay (posts-like) */
.hero-section::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
    background-image: radial-gradient(rgba(255,255,255,.06) 1.4px, transparent 1.5px);
    background-size: 26px 26px; opacity: .6;
}
.hero-section::before {
    background-image:
        linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
}
.hero-section .hero-bg-pattern {
    background-image:
        radial-gradient(ellipse at 18% 30%, rgba(255,255,255,.10) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 15%, rgba(120,160,255,.20) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 100%, rgba(228,35,43,.12) 0%, transparent 55%);
}
.hero-content { position: relative; z-index: 2; }
.hero-visual { position: relative; z-index: 2; }
.hero-content h1, .hero-content h1 * { color: #fff; }
.hero-subtitle { color: rgba(255,255,255,.85); }
.hero-badge {
    background: rgba(255,255,255,.12) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.28) !important;
}
.hero-stats .stat-number { color: #fff; }
.hero-stats .stat-label { color: rgba(255,255,255,.72); }
.stat-divider { background: rgba(255,255,255,.22); }

/* hero highlighted words: light + red so they pop on the blue */
.hero-section .gradient-text,
.page-hero .gradient-text,
.cta-box .gradient-text {
    background: linear-gradient(120deg, #C1E8FF 0%, #7DA0CA 45%, #ff5d52 115%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ---------- Auth pages -> branded blue backdrop (card stays white) ---------- */
.auth-section {
    background: var(--gradient-brand);
    position: relative;
}
.auth-section::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.05) 1.4px, transparent 1.5px);
    background-size: 26px 26px; opacity: .6;
}
.auth-section .container { position: relative; z-index: 1; }

/* ---------- CTA block: red button to match marketing ---------- */
.btn-cta {
    background: var(--gradient-red) !important;
    color: #fff !important; border: none !important;
}
.btn-cta:hover { box-shadow: var(--shadow-red) !important; color: #fff !important; transform: translateY(-2px); }

/* page-hero (inner page banners) get the dotted texture too */
.page-hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,.06) 1.4px, transparent 1.5px);
    background-size: 26px 26px; opacity: .5;
}
.page-hero > .container { position: relative; z-index: 1; }

/* =====================================================================
   FULL BLUE CANVAS — whole site (public, dashboard, admin, partner).
   Strategy: brand-blue page background everywhere; every panel/card/
   sidebar/table stays WHITE so data is fully readable; only text that
   sits directly on the blue canvas is flipped to white.
   ===================================================================== */

/* ---- 1) Blue canvas behind everything ---- */
/* viewport-anchored (fixed) so tall pages never show a brighter stretched band */
body {
    background-color: #0a2545 !important;
    background-image: var(--gradient-brand) !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}
.admin-main { background: var(--gradient-brand) !important; }
.section-padding, .steps-section, .featured-section, .why-section,
.cta-section, .search-section, .dashboard-section { background: transparent !important; }

/* ---- 2) Text that sits ON the blue canvas -> light ---- */
.section-header h2, .section-header h3 { color: #fff; }
.section-header, .section-header p { color: rgba(255,255,255,.84); }
.section-padding > .container > p,
.search-section .text-muted { color: rgba(255,255,255,.80); }
.why-feature-item h5 { color: #fff; }
.why-feature-item p { color: rgba(255,255,255,.82); }
.why-feature-item:hover { background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.18) !important; }

/* dashboard / admin / partner page titles (on the canvas, direct children only) */
.dashboard-section .col-lg-9 > h4,
.dashboard-section .col-lg-9 > .d-flex > h4 { color: #fff !important; }
.admin-main > h4, .admin-main > .d-flex > h4 { color: #fff !important; }
.pp-main > h4, .pp-main > .d-flex > h4 { color: #fff !important; }
.pp-main > p { color: rgba(255,255,255,.85) !important; }

/* ---- 3) Keep WHITE panels readable: force dark text inside them ---- */
.card, .program-card, .step-card, .dashboard-card, .stat-card, .feature-card,
.partner-benefit, .partner-form-card, .search-filters,
.hero-search-box, .hero-card, .auth-card, .modal-content,
.admin-table, .admin-stat, .pp-card, .pp-stat, .pp-table { color: var(--text-body); }

.card h1,.card h2,.card h3,.card h4,.card h5,.card h6,
.program-card h1,.program-card h2,.program-card h3,.program-card h4,.program-card h5,.program-card h6,
.step-card h1,.step-card h2,.step-card h3,.step-card h4,.step-card h5,.step-card h6,
.dashboard-card h1,.dashboard-card h2,.dashboard-card h3,.dashboard-card h4,.dashboard-card h5,.dashboard-card h6,
.stat-card h1,.stat-card h2,.stat-card h3,.stat-card h4,
.feature-card h5,.feature-card h6,
.partner-benefit h5,.partner-benefit h6,
.partner-form-card h1,.partner-form-card h2,.partner-form-card h3,
.search-filters h5,.search-filters h6,
.auth-card h2,.auth-card h5,
.modal-content h1,.modal-content h2,.modal-content h3,.modal-content h4,.modal-content h5,.modal-content h6 {
    color: var(--text-white) !important;
}
.card p, .program-card p, .step-card p, .dashboard-card p,
.feature-card p, .partner-benefit p, .partner-form-card p { color: var(--text-muted) !important; }

/* muted text inside white panels stays muted-on-white (not the canvas flip) */
.program-card .text-muted, .search-filters .text-muted, .dashboard-card .text-muted,
.auth-card .text-muted { color: var(--text-muted) !important; }

/* keep the navy CTA box text white (it is not a white panel) */
.cta-box, .cta-box * { color: #fff; }
.cta-box .gradient-text { -webkit-text-fill-color: transparent; }

/* =====================================================================
   Public navbar -> dark navy (matches the footer) with a soft border
   ===================================================================== */
.navbar {
    background: rgba(6, 24, 52, .82) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,.18) !important;
}
.navbar.scrolled { background: rgba(4, 18, 42, .95) !important; }
.navbar .nav-link { color: rgba(255,255,255,.82) !important; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: #fff !important; background: rgba(255,255,255,.08) !important; }
.navbar .brand-name { color: #fff !important; }
.navbar .brand-sub { color: rgba(255,255,255,.6) !important; }
.navbar .brand-slogan { color: #7DA0CA !important; }
.navbar .brand-icon { filter: brightness(1.45) saturate(1.1); }
.navbar .btn-nav-outline { color: #fff !important; border-color: rgba(255,255,255,.32) !important; }
.navbar .btn-nav-outline:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }
.navbar-toggler { color: #fff !important; border-color: rgba(255,255,255,.3) !important; }

/* =====================================================================
   User dashboard sidebar -> glass panel that blends with the blue canvas
   ===================================================================== */
.dashboard-sidebar {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
}
.dashboard-sidebar .sidebar-user { border-bottom-color: rgba(255,255,255,.12) !important; }
.dashboard-sidebar .sidebar-user h6 { color: #fff !important; }
.dashboard-sidebar .sidebar-user small { color: rgba(255,255,255,.65) !important; }
.dashboard-sidebar .sidebar-nav a { color: rgba(255,255,255,.82) !important; }
.dashboard-sidebar .sidebar-nav a i { color: rgba(255,255,255,.6) !important; }
.dashboard-sidebar .sidebar-nav a:hover,
.dashboard-sidebar .sidebar-nav a.active { background: rgba(255,255,255,.12) !important; color: #fff !important; }
.dashboard-sidebar .sidebar-nav a:hover i,
.dashboard-sidebar .sidebar-nav a.active i { color: #fff !important; }
/* keep the logout link readable (it was red) */
.dashboard-sidebar .sidebar-nav a[href*="logout"] { color: #ff8b8b !important; }
.dashboard-sidebar .sidebar-nav a[href*="logout"] i { color: #ff8b8b !important; }

/* =====================================================================
   V3 — UNIFORM HERO CANVAS SITE-WIDE + CONTRAST SYSTEM + GLASS CHROME
   ===================================================================== */

/* ---- A) The hero's dotted/grid/glow texture, fixed behind every page ---- */
body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(rgba(255,255,255,.05) 1.4px, transparent 1.5px),
        linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
        radial-gradient(ellipse at 15% 20%, rgba(255,255,255,.05) 0%, transparent 55%),
        radial-gradient(ellipse at 88% 10%, rgba(110,150,235,.10) 0%, transparent 50%),
        radial-gradient(ellipse at 60% 95%, rgba(228,35,43,.06) 0%, transparent 55%);
    background-size: 26px 26px, 60px 60px, 60px 60px, auto, auto, auto;
}
/* every section sits on the canvas — kills all white/grey bands (incl. inline styles) */
section { background: transparent !important; }
.admin-main { background: transparent !important; }
.pp-main { background: transparent !important; }

/* ---- B) Text directly on the canvas is light by default ---- */
body { color: rgba(255,255,255,.88); }
h1, h2, h3, h4, h5, h6 { color: #fff; }
.text-muted { color: rgba(255,255,255,.68) !important; }
/* form labels are light on the dark canvas/glass (white surfaces override below) */
.form-label { color: rgba(255,255,255,.85); }

/* ---- C) WHITE focus surfaces only (auth body, modals, hero search) -> dark text.
   All other panels are frosted glass (handled in V4) with light text. ---- */
.auth-body, .modal-content, .hero-search-box, .hero-search-box * { color: var(--text-body); }
.auth-body :is(h1,h2,h3,h4,h5,h6), .modal-content :is(h1,h2,h3,h4,h5,h6) { color: var(--text-white) !important; }
.auth-body p, .modal-content p { color: var(--text-muted); }
.auth-body .text-muted, .modal-content .text-muted { color: var(--text-muted) !important; }
.modal-content .table { color: var(--text-body); }
.modal-content .table td, .modal-content .table th { color: var(--text-body) !important; border-color: var(--border-color) !important; }
.modal-content .form-label, .auth-body .form-label { color: var(--text-bright) !important; }
.modal-content .form-control, .modal-content .form-select { background:#fff !important; color:#1a2744 !important; }
/* dark accent surfaces (navy) keep WHITE text, high specificity */
.auth-card .auth-header, .auth-card .auth-header *, .auth-header h2, .auth-header p { color: #fff !important; }
.contact-info-card, .contact-info-card * { color: #fff !important; }
.contact-info-card p, .contact-info-card .text-muted { color: rgba(255,255,255,.82) !important; }
/* timeline boxes (How It Works) are white panels too */
.timeline-content { color: var(--text-body); }
.timeline-content :is(h1,h2,h3,h4,h5,h6) { color: var(--text-white) !important; }
.timeline-content p { color: var(--text-muted); }

/* dark sub-areas inside white panels stay white-on-navy */
.auth-header, .auth-header * { color: #fff !important; }
.cta-box, .cta-box * { color: #fff; }

/* ---- D) Glass stat tiles (user dashboard, admin, partner) ---- */
.dashboard-section .stat-card, .admin-stat, .pp-stat {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,.16) !important;
    color: rgba(255,255,255,.85);
}
.dashboard-section .stat-card :is(h2,h3,h4), .admin-stat h2, .pp-stat h2 { color: #fff !important; }
.dashboard-section .stat-card p, .admin-stat p, .pp-stat p { color: rgba(255,255,255,.72) !important; }

/* ---- E) Admin + partner sidebars -> glass; partner topbar -> dark ---- */
.admin-sidebar, .pp-sidebar {
    background: rgba(8,28,58,.55) !important;
    border-right: 1px solid rgba(255,255,255,.12) !important;
    backdrop-filter: blur(14px);
    box-shadow: none !important;
}
.admin-nav a, .pp-nav a { color: rgba(255,255,255,.82) !important; }
.admin-nav a i, .pp-nav a i { color: rgba(255,255,255,.55) !important; }
.admin-nav a:hover, .admin-nav a.active,
.pp-nav a:hover, .pp-nav a.active {
    background: rgba(255,255,255,.10) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--brand-red) !important;
}
.admin-nav a:hover i, .admin-nav a.active i,
.pp-nav a:hover i, .pp-nav a.active i { color: #fff !important; }
.pp-section-label { color: rgba(255,255,255,.45) !important; }
.pp-nav a[href*="logout"], .pp-nav a[href*="logout"] span,
.pp-nav a[href*="logout"] i { color: #ff8b8b !important; }

.pp-topbar {
    background: rgba(6,24,52,.90) !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    backdrop-filter: blur(16px);
}
.pp-brand b { color: #fff !important; }
.pp-brand div span { color: rgba(255,255,255,.6) !important; }
.pp-topbar div[style*="0f1729"] { color: #fff !important; }
.pp-topbar div[style*="6b7a94"] { color: rgba(255,255,255,.65) !important; }
.pp-topbar .pp-btn-out { background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.35) !important; }

/* =====================================================================
   V4 — FROSTED GLASS PANELS (white cards -> translucent, light text)
   Keeps focused white surfaces (modals, auth card, hero search) intact.
   ===================================================================== */

/* The panels that turn to glass */
.program-card, .step-card, .value-card, .feature-card, .partner-benefit,
.partner-form-card, .contact-form-card, .search-filters, .accordion-item,
.timeline-content, .dashboard-card, .admin-table, .pp-card, .pp-table, .uni-card {
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.15) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 12px 34px rgba(0,0,0,.16) !important;
    color: rgba(255,255,255,.84) !important;
}
.program-card:hover, .step-card:hover, .value-card:hover, .feature-card:hover,
.partner-benefit:hover, .dashboard-card:hover, .pp-card:hover {
    background: rgba(255,255,255,.10) !important;
    border-color: rgba(255,255,255,.26) !important;
}
/* text inside glass panels -> light */
.program-card :is(h1,h2,h3,h4,h5,h6), .step-card :is(h1,h2,h3,h4,h5,h6),
.value-card :is(h1,h2,h3,h4,h5,h6), .feature-card :is(h1,h2,h3,h4,h5,h6),
.partner-benefit :is(h1,h2,h3,h4,h5,h6), .partner-form-card :is(h1,h2,h3,h4,h5,h6),
.contact-form-card :is(h1,h2,h3,h4,h5,h6), .dashboard-card :is(h1,h2,h3,h4,h5,h6),
.timeline-content :is(h1,h2,h3,h4,h5,h6), .accordion-item :is(h1,h2,h3,h4,h5,h6) { color: #fff !important; }

.program-card p, .step-card p, .value-card p, .feature-card p, .partner-benefit p,
.partner-form-card p, .contact-form-card p, .dashboard-card p, .timeline-content p,
.program-card .program-detail, .program-card .program-uni-name,
.program-card small, .dashboard-card small, .step-card small {
    color: rgba(255,255,255,.74) !important;
}
.program-card .text-muted, .dashboard-card .text-muted, .value-card .text-muted,
.search-filters .text-muted, .partner-form-card .text-muted, .contact-form-card .text-muted {
    color: rgba(255,255,255,.66) !important;
}
.program-fee { color: #fff !important; }
.program-fee span { color: rgba(255,255,255,.6) !important; }
.step-number { color: rgba(255,255,255,.10) !important; }
.value-icon, .why-icon { background: rgba(255,255,255,.12) !important; }

/* form labels inside glass cards -> light (modals/auth stay dark) */
.contact-form-card .form-label, .search-filters .form-label,
.partner-form-card .form-label { color: rgba(255,255,255,.85) !important; }

/* accordion (How It Works) */
.accordion-button { background: transparent !important; color: #fff !important; box-shadow: none !important; }
.accordion-button:not(.collapsed) { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.accordion-button::after { filter: invert(1) brightness(2); }
.accordion-body { color: rgba(255,255,255,.78) !important; }

/* contact-info-card is a DARK card -> keep its text white (was wrongly darkened) */
.contact-info-card, .contact-info-card * { color: #fff !important; }
.contact-info-card .text-muted, .contact-info-card p { color: rgba(255,255,255,.8) !important; }

/* ---- Glass data tables ---- */
.admin-table thead th, .pp-table thead th {
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.62) !important;
    border-color: rgba(255,255,255,.12) !important;
}
.admin-table tbody td, .pp-table tbody td {
    color: rgba(255,255,255,.82) !important;
    border-color: rgba(255,255,255,.09) !important;
}
.admin-table tbody td strong, .pp-table tbody td strong,
.admin-table tbody td b, .pp-table tbody td b { color: #fff !important; }
.admin-table tbody tr:hover, .pp-table tbody tr:hover { background: rgba(255,255,255,.05) !important; }
/* Recent Applications table inside the white dashboard-card on user dashboard */
.dashboard-card .table thead th { color: rgba(255,255,255,.6) !important; border-color: rgba(255,255,255,.12) !important; }
.dashboard-card .table td { color: rgba(255,255,255,.82) !important; border-color: rgba(255,255,255,.09) !important; }
/* force any nested inline-coloured text inside table cells to light,
   while leaving badges and buttons with their own colours */
.admin-table tbody td > *:not([class*="badge"]):not([class*="btn"]),
.pp-table tbody td > *:not([class*="badge"]):not([class*="btn"]),
.dashboard-card .table td > *:not([class*="badge"]):not([class*="btn"]) {
    color: rgba(255,255,255,.85) !important;
}
.admin-table tbody td > strong, .pp-table tbody td > strong,
.dashboard-card .table td > strong { color: #fff !important; }
.admin-table tbody td a:not(.btn), .pp-table tbody td a:not(.btn),
.dashboard-card .table td a:not(.btn) { color: #7fb0ff !important; }
/* card/table header titles (e.g. "Recent Students", "Commission Breakdown",
   "Recent Applications") sit on glass -> force white */
.pp-table :is(h1,h2,h3,h4,h5,h6),
.admin-table :is(h1,h2,h3,h4,h5,h6),
.admin-table-header :is(h1,h2,h3,h4,h5,h6) { color: #fff !important; }

/* keep inputs readable (clean light fields on glass) */
.contact-form-card .form-control, .contact-form-card .form-select,
.search-filters .form-control, .search-filters .form-select,
.partner-form-card .form-control, .partner-form-card .form-select {
    background: rgba(255,255,255,.92) !important;
    color: #1a2744 !important;
    border-color: rgba(255,255,255,.25) !important;
}

/* partner glass cards: headings + text light */
.pp-card :is(h1,h2,h3,h4,h5,h6) { color: #fff !important; }
.pp-card p, .pp-card small { color: rgba(255,255,255,.74) !important; }
.pp-card .text-muted, .pp-table .text-muted, .admin-table .text-muted,
.pp-stat .text-muted, .admin-stat .text-muted { color: rgba(255,255,255,.66) !important; }
/* small profile/info boxes inside partner cards */
.pp-card div[style*="f8f9fc"], .pp-card div[style*="bg-card"] { background: rgba(255,255,255,.06) !important; }

/* Admin sidebar: more breathing room under the header */
.admin-sidebar { padding-top: 30px !important; }

/* clearly mark invalid fields after a blocked submit */
.was-validated .form-control:invalid, .was-validated .form-select:invalid {
    border-color: #ff6b6b !important;
    box-shadow: 0 0 0 3px rgba(255,107,107,.22) !important;
}
.was-validated .form-control:valid, .was-validated .form-select:valid {
    border-color: rgba(255,255,255,.3);
}

/* featured-university cards (homepage) -> light text on glass */
.uni-card .uni-name { color: #fff !important; }
.uni-card .uni-location { color: rgba(255,255,255,.70) !important; }
.uni-card .uni-fee { color: rgba(255,255,255,.74) !important; }
.uni-card .uni-fee strong { color: #fff !important; }
.uni-card .uni-icon { background: rgba(255,255,255,.12) !important; color: #fff !important; }
.uni-card .btn-uni-view { color: #fff !important; border-color: rgba(255,255,255,.30) !important; }
.uni-card .btn-uni-view:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }

/* =====================================================================
   V5 — MOBILE / RESPONSIVE POLISH (hero + general)
   ===================================================================== */
html, body { overflow-x: hidden; }

@media (max-width: 991px) {
    .min-vh-hero { min-height: auto !important; }
    .hero-section { padding: 96px 0 44px !important; }
    .hero-search-box { margin-bottom: 30px; }
    /* readable expanded mobile menu on the dark navbar */
    .navbar-collapse {
        background: rgba(6,24,52,.98);
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 14px; padding: 14px; margin-top: 10px;
        box-shadow: 0 16px 40px rgba(0,0,0,.35);
    }
    .navbar-collapse .nav-actions { margin-top: 10px; display: flex; gap: 10px; }
    .navbar-collapse .nav-actions .btn { flex: 1; text-align: center; }
}

@media (max-width: 576px) {
    .hero-content h1 { font-size: clamp(1.55rem, 8vw, 2rem) !important; }
    .hero-subtitle { font-size: .96rem; margin-bottom: 26px; }
    .hero-badge { font-size: .74rem; padding: 6px 14px; margin-bottom: 18px; }
    .hero-search-box { padding: 8px; }
    .search-row { gap: 10px; }
    .search-field .form-select { padding: 13px 14px 13px 40px; font-size: .92rem; }
    .btn-hero-search { width: 100%; justify-content: center; padding: 13px; }
    .hero-stats { justify-content: space-between; width: 100%; gap: 6px; }
    .stat-divider { display: none; }
    .hero-stats .stat-number { font-size: 1.35rem; }
    .hero-stats .stat-label { font-size: .68rem; }
    .section-padding { padding: 50px 0 !important; }
    .section-header h2 { font-size: 1.5rem; }
    /* tighten glass cards + tables on small screens */
    .program-card, .pp-card, .dashboard-card, .value-card, .step-card { padding: 18px !important; }
    .admin-main, .pp-main { padding: 18px 14px !important; }
    .cta-box { padding: 32px 20px !important; }
    .partner-form-card, .contact-form-card, .contact-info-card { padding: 26px 20px !important; }
}

/* ---- F) Loose on-canvas controls ---- */
.search-section > .container > .d-flex .btn-outline-custom,
.section-padding > .container > .d-flex .btn-outline-custom {
    color: #fff; border-color: rgba(255,255,255,.4);
}
.search-section > .container > .d-flex .btn-outline-custom:hover {
    background: rgba(255,255,255,.12); color: #fff; border-color: #fff;
}