/* =========================================================================
   CHERIS Ambassador Portal — modern, colorful glassmorphism theme
   (built on top of Bootstrap 5)
   ========================================================================= */

:root {
    --cb-primary: #4f46e5;        /* indigo */
    --cb-primary-dark: #4338ca;
    --cb-accent: #06b6d4;         /* cyan */
    --cb-violet: #8b5cf6;
    --cb-ink: #0f172a;
}

html { scroll-behavior: smooth; }

body {
    color: var(--cb-ink);
    background-color: #f1f5f9;
    background-image: linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
    background-attachment: fixed;
    overflow-x: hidden;
}

/* Vivid, colorful background for the public landing page */
body.cb-landing {
    background-image:
        radial-gradient(1100px 520px at 8% -8%, rgba(99, 102, 241, .28), transparent 60%),
        radial-gradient(900px 520px at 108% 4%, rgba(6, 182, 212, .26), transparent 55%),
        radial-gradient(700px 700px at 50% 120%, rgba(139, 92, 246, .20), transparent 60%),
        linear-gradient(160deg, #eef2ff 0%, #f5f3ff 45%, #ecfeff 100%);
}
body.cb-landing::before,
body.cb-landing::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .55;
    z-index: 0;
    pointer-events: none;
}
body.cb-landing::before {
    width: 460px; height: 460px;
    top: -130px; left: -110px;
    background: radial-gradient(circle, #818cf8, transparent 70%);
    animation: cb-float 16s ease-in-out infinite;
}
body.cb-landing::after {
    width: 520px; height: 520px;
    bottom: -170px; right: -130px;
    background: radial-gradient(circle, #22d3ee, transparent 70%);
    animation: cb-float 20s ease-in-out infinite reverse;
}
/* Keep all real content above the decorative blobs */
.cb-navbar, main, .cb-footer { position: relative; z-index: 1; }

@keyframes cb-float {
    0%, 100% { transform: translate(0, 0); }
    50%      { transform: translate(24px, 30px); }
}

/* ---- Glass effect ------------------------------------------------------ */
.cb-glass {
    background: rgba(255, 255, 255, .72);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: 0 10px 40px rgba(79, 70, 229, .15);
}

/* ---- Navbar ------------------------------------------------------------ */
.cb-navbar {
    background-image: linear-gradient(90deg, #4338ca 0%, #6d28d9 50%, #0891b2 100%);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.cb-navbar .navbar-brand { letter-spacing: .4px; font-size: 1.35rem; }
.cb-navbar .cb-brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px;
    background: rgba(255, 255, 255, .18); font-size: 1.15rem;
}

/* ---- Footer ------------------------------------------------------------ */
.cb-footer {
    background-image: linear-gradient(90deg, #312e81, #1e1b4b);
}

/* ---- Cards ------------------------------------------------------------- */
.cb-card { border-radius: 1.25rem; }

/* ---- Buttons ----------------------------------------------------------- */
.cb-btn-primary,
.cb-btn-gradient {
    background-image: linear-gradient(135deg, #6366f1 0%, #8b5cf6 45%, #06b6d4 100%);
    border: none;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(99, 102, 241, .35);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.cb-btn-primary:hover, .cb-btn-primary:focus,
.cb-btn-gradient:hover, .cb-btn-gradient:focus {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(99, 102, 241, .45);
    filter: brightness(1.06);
}
.cb-btn-ghost {
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(99, 102, 241, .35);
    color: #4338ca;
    font-weight: 600;
    backdrop-filter: blur(6px);
    transition: transform .15s ease, background .15s ease;
}
.cb-btn-ghost:hover, .cb-btn-ghost:focus {
    background: #fff;
    color: #4338ca;
    transform: translateY(-2px);
}

/* ---- Chips, gradient text, headings ----------------------------------- */
.cb-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(255, 255, 255, .8);
    color: #4338ca; font-weight: 600;
    padding: .5rem 1rem; border-radius: 2rem;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(79, 70, 229, .12);
}
.cb-grad-text {
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.cb-section-title { font-weight: 800; }

/* ---- Hero -------------------------------------------------------------- */
.cb-hero-title {
    font-weight: 800;
    font-size: clamp(2rem, 4.2vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: -.5px;
}
.cb-hero-sub { color: #475569; }
#apply, #benefits { scroll-margin-top: 90px; }

/* ---- Hero pillars ------------------------------------------------------ */
.cb-pillar {
    display: flex; align-items: center; gap: .75rem;
    padding: .75rem .9rem; border-radius: 1rem; height: 100%;
}
.cb-pillar-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: .8rem;
    color: #fff; font-size: 1.25rem; flex: 0 0 auto;
}

/* ---- Application form -------------------------------------------------- */
.cb-form-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: .8rem;
    background: linear-gradient(135deg, #6366f1, #06b6d4);
    color: #fff; font-size: 1.1rem;
}
.cb-card .input-group-text {
    background: rgba(99, 102, 241, .08);
    border-color: #e2e8f0;
    color: #4f46e5;
}

/* ---- Benefit cards (interactive) -------------------------------------- */
.cb-benefit {
    border-radius: 1.25rem;
    padding: 1.75rem;
    transition: transform .2s ease, box-shadow .2s ease;
}
.cb-benefit:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(15, 23, 42, .16);
}
.cb-benefit-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 60px; height: 60px; border-radius: 1rem;
    color: #fff; font-size: 1.6rem; margin-bottom: 1rem;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .18);
    transition: transform .2s ease;
}
.cb-benefit:hover .cb-benefit-icon { transform: scale(1.08) rotate(-4deg); }

/* Themed accent gradients (higher studies / research / immigration / ...) */
.cb-acc-edu         { background: linear-gradient(135deg, #6366f1, #4338ca); }
.cb-acc-research    { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.cb-acc-immigration { background: linear-gradient(135deg, #06b6d4, #0ea5e9); }
.cb-acc-recognition { background: linear-gradient(135deg, #8b5cf6, #d946ef); }
.cb-acc-network     { background: linear-gradient(135deg, #ec4899, #f43f5e); }
.cb-acc-experience  { background: linear-gradient(135deg, #10b981, #059669); }

/* ---- Misc UI ----------------------------------------------------------- */
.cb-badge-soft {
    background-color: rgba(79, 70, 229, .1);
    color: var(--cb-primary);
    font-weight: 600;
    padding: .45rem .8rem;
    border-radius: 2rem;
}
.cb-icon-circle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, rgba(99, 102, 241, .16), rgba(6, 182, 212, .16));
    color: #4338ca; font-size: 1.8rem;
}

/* ---- Dashboard stat cards --------------------------------------------- */
.cb-stat-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: .75rem;
    font-size: 1.4rem; color: #fff; background: var(--cb-primary);
}
.cb-stat-pending  .cb-stat-icon { background: linear-gradient(135deg, #f59e0b, #f97316); }
.cb-stat-approved .cb-stat-icon { background: linear-gradient(135deg, #10b981, #059669); }
.cb-stat-rejected .cb-stat-icon { background: linear-gradient(135deg, #ef4444, #dc2626); }
.cb-stat-total    .cb-stat-icon { background: linear-gradient(135deg, #6366f1, #06b6d4); }

/* ---- Skills cell truncation ------------------------------------------- */
.cb-skills {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    cursor: help;
}

/* ---- Motion preferences ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body.cb-landing::before, body.cb-landing::after { animation: none; }
    .cb-benefit, .cb-benefit-icon,
    .cb-btn-gradient, .cb-btn-primary, .cb-btn-ghost { transition: none; }
}