/* ==========================================================================
   Creative Education Foundation — Design Tokens
   Central brand colors, typography, layout metrics, and radii.
   ========================================================================== */
:root {
    /* Brand Colors — Rich, Institutional & Cohesive */
    --cc-navy: #082343;
    --cc-navy-light: #0d3461;
    --cc-navy-dark: #05162b;
    --cc-red: #e11d2e;
    --cc-red-hover: #c81525;
    --cc-red-dark: #991b1b;
    --cc-gold: #e11d2e;
    --cc-gold-hover: #c81525;
    --cc-gold-light: #fee2e2;
    --cc-green: #10b981;
    --cc-green-dark: #059669;
    --cc-deep: #032e3f;
    --cc-deep-light: #074760;
    --cc-panel: var(--cc-deep);
    --cc-white: #ffffff;
    --cc-cream: #faf9f6;
    --cc-surface: #f8fafc;
    --cc-surface-alt: #f1f5f9;

    /* Text & Content Neutrals */
    --cc-text-main: #0f172a;
    --cc-text-body: #334155;
    --cc-text-muted: #64748b;
    --cc-text-light: #94a3b8;

    /* Subtle Border System */
    --cc-border-subtle: rgba(8, 35, 67, 0.08);
    --cc-border-light: rgba(8, 35, 67, 0.14);
    --cc-border-medium: rgba(8, 35, 67, 0.22);

    /* Glassmorphism Tokens */
    --cc-glass-bg: rgba(255, 255, 255, 0.85);
    --cc-glass-border: rgba(255, 255, 255, 0.3);
    --cc-glass-blur: blur(14px);

    /* Typography */
    --cc-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --cc-font-display: "Bitter", Georgia, serif;

    /* Modern Multi-Tier Elevation Shadows */
    --cc-shadow-xs: 0 1px 3px rgba(8, 35, 67, 0.05);
    --cc-shadow-sm: 0 4px 12px rgba(8, 35, 67, 0.06);
    --cc-shadow-md: 0 10px 28px -4px rgba(8, 35, 67, 0.08), 0 4px 12px -2px rgba(8, 35, 67, 0.04);
    --cc-shadow-lg: 0 18px 40px -6px rgba(8, 35, 67, 0.12), 0 8px 16px -4px rgba(8, 35, 67, 0.06);
    --cc-shadow-xl: 0 24px 52px -8px rgba(8, 35, 67, 0.16), 0 12px 24px -4px rgba(8, 35, 67, 0.08);
    --cc-shadow-hover: 0 20px 42px -4px rgba(8, 35, 67, 0.16), 0 8px 16px -2px rgba(8, 35, 67, 0.08);
    --cc-shadow-glow: 0 0 28px rgba(225, 29, 46, 0.25);
    --cc-shadow: var(--cc-shadow-md);

    /* Radii System */
    --cc-radius-xs: 6px;
    --cc-radius-sm: 10px;
    --cc-radius-md: 14px;
    --cc-radius: 16px;
    --cc-radius-lg: 20px;
    --cc-radius-xl: 28px;
    --cc-radius-pill: 9999px;

    /* Shared Layout & Spacing */
    --cc-header-h: 68px;
    --cc-container: 1160px;
    --cc-section-pad: clamp(2.5rem, 5vw, 4.25rem) 1.25rem;
    --cc-section-gap: 1.5rem;
    --cc-transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

body {
    font-family: var(--cc-font);
    color: var(--cc-text-body);
    background-color: var(--cc-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Global Text Selection Styling */
::selection {
    background-color: var(--cc-navy);
    color: #ffffff;
}
::-moz-selection {
    background-color: var(--cc-navy);
    color: #ffffff;
}

/* Contrast Text Selection for Dark/Navy/Red backgrounds */
.hero ::selection,
.cc-site-footer ::selection,
.cs-card-hero ::selection,
.cs-hero-card ::selection,
[data-theme="dark"] ::selection,
.bg-navy ::selection,
.bg-dark ::selection,
.bg-red ::selection {
    background-color: var(--cc-red, #e11d2e);
    color: #ffffff;
}

/* Global Focus Ring for Accessibility */
:focus-visible {
    outline: 2px solid var(--cc-navy);
    outline-offset: 3px;
}

/* ==========================================================================
   Universal Custom <select> & <option> System
   Works gracefully across light, neutral, dark, glass, or colored backgrounds.
   ========================================================================== */
:root {
    --cc-select-bg: #ffffff;
    --cc-select-color: #1f2937;
    --cc-select-border: #d7dbe3;
    --cc-select-radius: 10px;
    --cc-select-focus-border: var(--cc-navy, #082343);
    --cc-select-focus-ring: rgba(8, 35, 67, 0.12);
    --cc-select-arrow-color: #4b5563;
    --cc-select-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%234b5563'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    --cc-select-arrow-svg-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
    --cc-select-arrow-svg-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23e11d2e'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

/* Universal Select Base */
select,
.cc-custom-select,
.adm-field select,
.visitor-form select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    background-color: var(--cc-select-bg);
    background-image: var(--cc-select-arrow-svg);
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 1.15rem 1.15rem;
    padding-right: 2.5rem !important;
    color: var(--cc-select-color);
    border: 1px solid var(--cc-select-border);
    border-radius: var(--cc-select-radius);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    cursor: pointer;
    -webkit-transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease, background-color 0.2s ease;
    transition: border-color 0.2s ease, -webkit-box-shadow 0.2s ease, background-color 0.2s ease;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, -webkit-box-shadow 0.2s ease;
}

select:focus,
.cc-custom-select:focus,
.adm-field select:focus,
.visitor-form select:focus {
    outline: none;
    border-color: var(--cc-select-focus-border);
    -webkit-box-shadow: 0 0 0 3px var(--cc-select-focus-ring);
            box-shadow: 0 0 0 3px var(--cc-select-focus-ring);
}

select:disabled,
.cc-custom-select:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    background-color: #f1f5f9;
}

/* Consistent Option Elements on Any Device/OS */
select option,
.cc-custom-select option {
    background-color: #ffffff;
    color: #1f2937;
    padding: 10px 14px;
    font-size: 0.95rem;
}
select option:checked,
.cc-custom-select option:checked {
    background-color: #e2e8f0;
    color: var(--cc-navy, #082343);
    font-weight: 600;
}
select option:disabled,
.cc-custom-select option:disabled {
    color: #94a3b8;
}

/* --- Theme Adaptations for any Background Color --- */

/* 1. On Dark/Navy Backgrounds (Hero, Modals, Footer, Dark Cards) */
.hero select,
.cs-card-hero select,
.cs-hero-card select,
.cc-site-footer select,
.cc-custom-select--dark,
[data-theme="dark"] select,
.bg-navy select,
.bg-dark select {
    background-color: rgba(255, 255, 255, 0.1) !important;
    background-image: var(--cc-select-arrow-svg-light) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
}
.hero select:focus,
.cs-card-hero select:focus,
.cs-hero-card select:focus,
.cc-site-footer select:focus,
.cc-custom-select--dark:focus,
[data-theme="dark"] select:focus,
.bg-navy select:focus,
.bg-dark select:focus {
    border-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2) !important;
            box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2) !important;
}
.hero select option,
.cs-card-hero select option,
.cs-hero-card select option,
.cc-site-footer select option,
.cc-custom-select--dark option,
[data-theme="dark"] select option,
.bg-navy select option,
.bg-dark select option {
    background-color: #082343;
    color: #ffffff;
}

/* 2. On Red/Accent Backgrounds */
.bg-red select,
.cc-custom-select--red {
    background-color: #ffffff !important;
    background-image: var(--cc-select-arrow-svg-red) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: var(--cc-navy, #082343) !important;
}

/* 3. On Light Gray/Surface Backgrounds */
.cc-custom-select--surface,
.bg-surface select {
    background-color: #ffffff !important;
    border-color: #cbd5e1 !important;
}

/* 4. Glassmorphism Variant */
.cc-custom-select--glass {
    background-color: rgba(255, 255, 255, 0.75) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    -webkit-box-shadow: 0 4px 16px rgba(8, 35, 67, 0.06);
            box-shadow: 0 4px 16px rgba(8, 35, 67, 0.06);
}

/* ==========================================================================
   Global Motion & Animation Tokens
   ========================================================================== */
@keyframes ccPulseGlow {
    0%, 100% {
        box-shadow: 0 8px 24px rgba(225, 29, 46, 0.38);
        transform: translateY(0);
    }
    50% {
        box-shadow: 0 14px 34px rgba(225, 29, 46, 0.65);
        transform: translateY(-3px);
    }
}

.cc-floating-apply {
    animation: ccPulseGlow 3.2s ease-in-out infinite;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cc-floating-apply:hover {
    animation-play-state: paused;
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 16px 36px rgba(225, 29, 46, 0.72);
}

/* Smooth Interactive Lift on Cards & Buttons */
@media (hover: hover) and (pointer: fine) {
    .program-card,
    .course-split,
    .video-card,
    .news-image-card,
    .student-story-card,
    .blog-card,
    .faculty-member-card,
    .founder-card,
    .contact-card,
    .adm-download-btn,
    .cd-stat,
    .results-sheet {
        transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .program-card:hover,
    .blog-card:hover,
    .founder-card:hover,
    .contact-card:hover,
    .cd-stat:hover {
        transform: translateY(-6px);
    }

    .video-card:hover,
    .course-split:hover,
    .results-sheet:hover {
        transform: translateY(-4px) scale(1.015);
    }

    .adm-download-btn:hover {
        transform: translateY(-3px) scale(1.02);
    }

    .video-card__media img,
    .course-split img,
    .news-image-card img,
    .student-video-poster,
    .blog-card-media img,
    .blog-card__media img,
    .founder-card__photo img,
    .faculty-member-card__media img {
        transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .video-card:hover .video-card__media img,
    .course-split:hover img,
    .news-image-card:hover img,
    .student-story-card:hover .student-video-poster,
    .blog-card:hover .blog-card-media img,
    .blog-card:hover .blog-card__media img,
    .founder-card:hover .founder-card__photo img,
    .faculty-member-card:hover .faculty-member-card__media img {
        transform: scale(1.045);
    }
}

/* Reduced Motion Safety Override */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .cc-floating-apply {
        animation: none !important;
    }
}

/* ==========================================================================
   SweetAlert2 — Creative Education Foundation Brand Design System
   ========================================================================== */
.swal2-container {
    z-index: 100000 !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    background: rgba(8, 35, 67, 0.48) !important;
}

.swal2-container.swal2-backdrop-show {
    animation: ccSwalBackdropIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes ccSwalBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.swal2-popup.cc-swal-popup,
.swal2-popup {
    font-family: var(--cc-font, Inter, sans-serif) !important;
    border-radius: 20px !important;
    padding: 2.25rem 2rem 2rem !important;
    background: #ffffff !important;
    box-shadow: 0 25px 60px -15px rgba(8, 35, 67, 0.28), 0 0 0 1px rgba(8, 35, 67, 0.08) !important;
    border: 1px solid rgba(8, 35, 67, 0.08) !important;
    max-width: 500px !important;
    color: var(--cc-text-main, #0f172a) !important;
}

.swal2-title.cc-swal-title,
.swal2-title {
    font-family: var(--cc-font-display, Bitter, serif) !important;
    font-weight: 700 !important;
    font-size: 1.45rem !important;
    color: var(--cc-navy, #082343) !important;
    line-height: 1.3 !important;
    padding: 0.5rem 0 0.25rem !important;
    letter-spacing: -0.01em !important;
}

.swal2-html-container.cc-swal-html,
.swal2-html-container {
    font-family: var(--cc-font, Inter, sans-serif) !important;
    font-size: 0.95rem !important;
    color: var(--cc-text-body, #334155) !important;
    line-height: 1.65 !important;
    margin: 0.75rem 0 1.25rem !important;
}

.swal2-actions {
    gap: 0.75rem !important;
    margin-top: 1.5rem !important;
    width: 100% !important;
}

.swal2-styled.swal2-confirm,
.cc-swal-btn--primary {
    background: linear-gradient(135deg, var(--cc-navy, #082343) 0%, #0d3866 100%) !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    padding: 0.75rem 2rem !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 4px 14px rgba(8, 35, 67, 0.25) !important;
    border: none !important;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease !important;
    cursor: pointer !important;
}

.swal2-styled.swal2-confirm:hover,
.cc-swal-btn--primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 22px rgba(8, 35, 67, 0.35) !important;
}

.swal2-styled.swal2-cancel,
.cc-swal-btn--secondary {
    background: #f1f5f9 !important;
    color: var(--cc-text-body, #334155) !important;
    border-radius: 9999px !important;
    padding: 0.75rem 1.75rem !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    border: 1px solid rgba(8, 35, 67, 0.1) !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
    cursor: pointer !important;
}

.swal2-styled.swal2-cancel:hover,
.cc-swal-btn--secondary:hover {
    background: #e2e8f0 !important;
    transform: translateY(-2px) !important;
}

.swal2-close.cc-swal-close-btn,
.swal2-close {
    font-family: var(--cc-font, Inter, sans-serif) !important;
    color: #94a3b8 !important;
    transition: color 0.2s ease !important;
}

.swal2-close:hover {
    color: var(--cc-navy, #082343) !important;
}

.swal2-icon.swal2-success {
    border-color: #10b981 !important;
    color: #10b981 !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: #10b981 !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(16, 185, 129, 0.25) !important;
}

.swal2-icon.swal2-error {
    border-color: var(--cc-red, #dc2626) !important;
    color: var(--cc-red, #dc2626) !important;
}

.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: var(--cc-red, #dc2626) !important;
}

.swal2-icon.swal2-warning {
    border-color: var(--cc-gold, #f59e0b) !important;
    color: var(--cc-gold, #f59e0b) !important;
}

.swal2-icon.swal2-info {
    border-color: var(--cc-navy, #082343) !important;
    color: var(--cc-navy, #082343) !important;
}

/* Custom Admission Reference badge in SweetAlert2 modal */
.cc-swal-app-success {
    text-align: center;
}

.cc-swal-app-msg {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    color: var(--cc-text-body, #334155);
}

.cc-swal-ref-badge {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border: 1px solid rgba(8, 35, 67, 0.12);
    border-left: 4px solid var(--cc-red, #e11d2e);
    padding: 0.9rem 1.15rem;
    border-radius: 12px;
    margin: 1rem 0;
    text-align: left;
    box-shadow: 0 2px 8px rgba(8, 35, 67, 0.04);
}

.cc-swal-ref-title {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cc-text-muted, #64748b);
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.cc-swal-ref-code {
    display: block;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--cc-navy, #082343);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    letter-spacing: 0.05em;
}

.cc-swal-ticket-note {
    font-size: 0.85rem;
    color: var(--cc-text-muted, #64748b);
    line-height: 1.5;
    margin: 0.75rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-align: left;
}

.cc-swal-ticket-note i {
    color: var(--cc-red, #e11d2e);
    font-size: 1.15rem;
    flex-shrink: 0;
}

/* Toast Mode Styling */
.swal2-popup.swal2-toast.cc-swal-toast {
    border-radius: 14px !important;
    padding: 0.85rem 1.25rem !important;
    background: #ffffff !important;
    box-shadow: 0 14px 35px rgba(8, 35, 67, 0.18), 0 0 0 1px rgba(8, 35, 67, 0.08) !important;
    border: 1px solid rgba(8, 35, 67, 0.08) !important;
}

.swal2-popup.swal2-toast .swal2-title {
    font-family: var(--cc-font, Inter, sans-serif) !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
    color: var(--cc-navy, #082343) !important;
    padding: 0 !important;
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
    .swal2-popup.cc-swal-popup,
    .swal2-popup {
        width: calc(100% - 2rem) !important;
        padding: 1.85rem 1.25rem 1.5rem !important;
        margin: 1rem auto !important;
        border-radius: 18px !important;
    }
    .swal2-title.cc-swal-title,
    .swal2-title {
        font-size: 1.25rem !important;
    }
    .swal2-html-container.cc-swal-html,
    .swal2-html-container {
        font-size: 0.9rem !important;
    }
    .swal2-actions {
        flex-direction: column !important;
        width: 100% !important;
        gap: 0.6rem !important;
    }
    .swal2-styled.swal2-confirm,
    .swal2-styled.swal2-cancel,
    .cc-swal-btn--primary,
    .cc-swal-btn--secondary {
        width: 100% !important;
        padding: 0.85rem 1.25rem !important;
        text-align: center !important;
    }
}