@tailwind base;
@tailwind components;
@tailwind utilities;

html {
    scroll-behavior: smooth;
}

.loader-btn {
    color: #fff;
    width: 4px;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0;
    transform: translateX(-38px);
    animation: l21 .5s infinite alternate linear;
}

@keyframes l21 {
    50% {
        box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px
    }

    100% {
        box-shadow: 19px 0 0 0, 38px 0 0 3px, 57px 0 0 7px
    }
}
/* LIGHT MODE */
:root {
    --button-outline: rgba(0,0,0, .10);
    --badge-outline: rgba(0,0,0, .05);
    /* Automatic computation of border around primary / danger buttons */
    --opaque-button-border-intensity: -8; /* In terms of percentages */
    /* Backgrounds applied on top of other backgrounds when hovered/active */
    --elevate-1: rgba(0,0,0, .03);
    --elevate-2: rgba(0,0,0, .08);
    --background: 0 0% 98%;
    --foreground: 220 15% 15%;
    --border: 220 10% 88%;
    --card: 0 0% 100%;
    --card-foreground: 220 15% 15%;
    --card-border: 220 8% 92%;
    --sidebar: 220 6% 96%;
    --sidebar-foreground: 220 15% 15%;
    --sidebar-border: 220 10% 90%;
    --sidebar-primary: 210 85% 45%;
    --sidebar-primary-foreground: 210 85% 98%;
    --sidebar-accent: 220 12% 92%;
    --sidebar-accent-foreground: 220 15% 20%;
    --sidebar-ring: 210 85% 45%;
    --popover: 220 8% 94%;
    --popover-foreground: 220 15% 15%;
    --popover-border: 220 12% 86%;
    --primary: 210 85% 45%;
    --primary-foreground: 210 85% 98%;
    --secondary: 355 75% 55%;
    --secondary-foreground: 355 75% 98%;
    --muted: 220 12% 92%;
    --muted-foreground: 220 12% 35%;
    --accent: 45 95% 60%;
    --accent-foreground: 45 95% 15%;
    --destructive: 355 75% 55%;
    --destructive-foreground: 355 75% 98%;
    --input: 220 12% 75%;
    --ring: 210 85% 45%;
    --chart-1: 210 85% 45%;
    --chart-2: 355 75% 55%;
    --chart-3: 45 95% 60%;
    --chart-4: 280 60% 50%;
    --chart-5: 160 55% 45%;
    --font-sans: "Inter", "Open Sans", sans-serif;
    --font-serif: "Bebas Neue", Georgia, serif;
    --font-mono: "JetBrains Mono", "Roboto Mono", monospace;
    --radius: .5rem; /* 8px */
    --shadow-2xs: 0px 2px 0px 0px hsl(220 10% 20% / 0.02);
    --shadow-xs: 0px 2px 0px 0px hsl(220 10% 20% / 0.03);
    --shadow-sm: 0px 2px 0px 0px hsl(220 10% 20% / 0.04), 0px 1px 2px -1px hsl(220 10% 20% / 0.05);
    --shadow: 0px 2px 0px 0px hsl(220 10% 20% / 0.04), 0px 1px 2px -1px hsl(220 10% 20% / 0.06);
    --shadow-md: 0px 2px 0px 0px hsl(220 10% 20% / 0.05), 0px 2px 4px -1px hsl(220 10% 20% / 0.07);
    --shadow-lg: 0px 2px 0px 0px hsl(220 10% 20% / 0.06), 0px 4px 6px -1px hsl(220 10% 20% / 0.08);
    --shadow-xl: 0px 2px 0px 0px hsl(220 10% 20% / 0.07), 0px 8px 10px -1px hsl(220 10% 20% / 0.10);
    --shadow-2xl: 0px 2px 0px 0px hsl(220 10% 20% / 0.12);
    --tracking-normal: 0em;
    --spacing: 0.25rem;
    /* Automatically computed borders - intensity can be controlled by the user by the --opaque-button-border-intensity setting */
    /* Fallback for older browsers */
    --sidebar-primary-border: hsl(var(--sidebar-primary));
    --sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
    /* Fallback for older browsers */
    --sidebar-accent-border: hsl(var(--sidebar-accent));
    --sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
    /* Fallback for older browsers */
    --primary-border: hsl(var(--primary));
    --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
    /* Fallback for older browsers */
    --secondary-border: hsl(var(--secondary));
    --secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
    /* Fallback for older browsers */
    --muted-border: hsl(var(--muted));
    --muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
    /* Fallback for older browsers */
    --accent-border: hsl(var(--accent));
    --accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
    /* Fallback for older browsers */
    --destructive-border: hsl(var(--destructive));
    --destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
}

.dark {
    --button-outline: #ffffff1a;
    --badge-outline: #ffffff0d;
    --opaque-button-border-intensity: 9; /* In terms of percentages */
    /* Backgrounds applied on top of other backgrounds when hovered/active */
    --elevate-1: rgba(255,255,255, .04);
    --elevate-2: rgba(255,255,255, .09);
    --background: 220 20% 8%;
    --foreground: 0 0% 98%;
    --border: 220 15% 18%;
    --card: 220 18% 12%;
    --card-foreground: 0 0% 98%;
    --card-border: 220 15% 20%;
    --sidebar: 220 10% 18%;
    --sidebar-foreground: 220 8% 92%;
    --sidebar-border: 220 12% 25%;
    --sidebar-primary: 210 85% 45%;
    --sidebar-primary-foreground: 210 85% 98%;
    --sidebar-accent: 220 15% 24%;
    --sidebar-accent-foreground: 220 10% 92%;
    --sidebar-ring: 210 85% 45%;
    --popover: 220 12% 20%;
    --popover-foreground: 220 10% 92%;
    --popover-border: 220 12% 28%;
    --primary: 210 90% 48%;
    --primary-foreground: 0 0% 100%;
    --secondary: 355 80% 58%;
    --secondary-foreground: 0 0% 100%;
    --muted: 220 15% 18%;
    --muted-foreground: 220 10% 65%;
    --accent: 45 100% 65%;
    --accent-foreground: 220 20% 10%;
    --destructive: 355 75% 55%;
    --destructive-foreground: 355 75% 98%;
    --input: 220 12% 35%;
    --ring: 210 85% 45%;
    --chart-1: 210 85% 55%;
    --chart-2: 355 75% 55%;
    --chart-3: 45 95% 60%;
    --chart-4: 280 70% 65%;
    --chart-5: 160 65% 60%;
    --shadow-2xs: 0px 2px 0px 0px hsl(220 15% 5% / 0.15);
    --shadow-xs: 0px 2px 0px 0px hsl(220 15% 5% / 0.20);
    --shadow-sm: 0px 2px 0px 0px hsl(220 15% 5% / 0.25), 0px 1px 2px -1px hsl(220 15% 5% / 0.30);
    --shadow: 0px 2px 0px 0px hsl(220 15% 5% / 0.25), 0px 1px 2px -1px hsl(220 15% 5% / 0.35);
    --shadow-md: 0px 2px 0px 0px hsl(220 15% 5% / 0.30), 0px 2px 4px -1px hsl(220 15% 5% / 0.40);
    --shadow-lg: 0px 2px 0px 0px hsl(220 15% 5% / 0.35), 0px 4px 6px -1px hsl(220 15% 5% / 0.45);
    --shadow-xl: 0px 2px 0px 0px hsl(220 15% 5% / 0.40), 0px 8px 10px -1px hsl(220 15% 5% / 0.50);
    --shadow-2xl: 0px 2px 0px 0px hsl(220 15% 5% / 0.55);
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply font-sans antialiased bg-background text-foreground;
    }

    select {
        @apply w-full h-9 rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
    }
}




/**
 * Using the elevate system.
 * Automatic contrast adjustment.
 *
 * <element className="hover-elevate" />
 * <element className="active-elevate-2" />
 *
 * // Using the tailwind utility when a data attribute is "on"
 * <element className="toggle-elevate data-[state=on]:toggle-elevated" />
 * // Or manually controlling the toggle state
 * <element className="toggle-elevate toggle-elevated" />
 *
 * Elevation systems have to handle many states.
 * - not-hovered, vs. hovered vs. active  (three mutually exclusive states)
 * - toggled or not
 * - focused or not (this is not handled with these utilities)
 *
 * Even without handling focused or not, this is six possible combinations that
 * need to be distinguished from eachother visually.
 */
@layer utilities {

    /* Hide ugly search cancel button in Chrome until we can style it properly */
    input[type="search"]::-webkit-search-cancel-button {
        @apply hidden;
    }

    /* Placeholder styling for contentEditable div */
    [contenteditable][data-placeholder]:empty::before {
        content: attr(data-placeholder);
        color: hsl(var(--muted-foreground));
        pointer-events: none;
    }

    /* .no-default-hover-elevate/no-default-active-elevate is an escape hatch so consumers of
   * buttons/badges can remove the automatic brightness adjustment on interactions
   * and program their own. */
    .no-default-hover-elevate {
    }

    .no-default-active-elevate {
    }


    /**
   * Toggleable backgrounds go behind the content. Hoverable/active goes on top.
   * This way they can stack/compound. Both will overlap the parent's borders!
   * So borders will be automatically adjusted both on toggle, and hover/active,
   * and they will be compounded.
   */
    .toggle-elevate::before,
    .toggle-elevate-2::before {
        content: "";
        pointer-events: none;
        position: absolute;
        inset: 0px;
        /*border-radius: inherit;   match rounded corners */
        border-radius: inherit;
        z-index: -1;
        /* sits behind content but above backdrop */
    }

    .toggle-elevate.toggle-elevated::before {
        background-color: var(--elevate-2);
    }

    /* If there's a 1px border, adjust the inset so that it covers that parent's border */
    .border.toggle-elevate::before {
        inset: -1px;
    }

    /* Does not work on elements with overflow:hidden! */
    .hover-elevate:not(.no-default-hover-elevate),
    .active-elevate:not(.no-default-active-elevate),
    .hover-elevate-2:not(.no-default-hover-elevate),
    .active-elevate-2:not(.no-default-active-elevate) {
        position: relative;
        z-index: 0;
    }

        .hover-elevate:not(.no-default-hover-elevate)::after,
        .active-elevate:not(.no-default-active-elevate)::after,
        .hover-elevate-2:not(.no-default-hover-elevate)::after,
        .active-elevate-2:not(.no-default-active-elevate)::after {
            content: "";
            pointer-events: none;
            position: absolute;
            inset: 0px;
            /*border-radius: inherit;   match rounded corners */
            border-radius: inherit;
            z-index: 999;
            /* sits in front of content */
        }

    .hover-elevate:hover:not(.no-default-hover-elevate)::after,
    .active-elevate:active:not(.no-default-active-elevate)::after {
        background-color: var(--elevate-1);
    }

    .hover-elevate-2:hover:not(.no-default-hover-elevate)::after,
    .active-elevate-2:active:not(.no-default-active-elevate)::after {
        background-color: var(--elevate-2);
    }

    /* If there's a 1px border, adjust the inset so that it covers that parent's border */
    .border.hover-elevate:not(.no-hover-interaction-elevate)::after,
    .border.active-elevate:not(.no-active-interaction-elevate)::after,
    .border.hover-elevate-2:not(.no-hover-interaction-elevate)::after,
    .border.active-elevate-2:not(.no-active-interaction-elevate)::after,
    .border.hover-elevate:not(.no-hover-interaction-elevate)::after {
        inset: -1px;
    }
}

* {
    --tw-border-opacity: 1;
    border-color: hsl(var(--border) / var(--tw-border-opacity, 1));
}




/* ===== Custom Select ===== */

.custom-select-trigger {
    position: relative;
    width: 100%;
    min-height: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5rem 0 0.75rem; /* space for arrow */
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--input));
    border-radius: 0.375rem;
    font-size: 0.875rem;
    cursor: pointer;
}

    /* Divider */
    .custom-select-trigger::before {
        content: "";
        position: absolute;
        right: 2rem;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 60%;
        background-color: hsl(var(--border));
    }

    /* ▼ Arrow (PURE CSS) */
    .custom-select-trigger::after {
        content: "";
        position: absolute;
        right: 0.75rem;
        top: 50%;
        width: 0.4rem;
        height: 0.4rem;
        border-right: 2px solid hsl(var(--muted-foreground));
        border-bottom: 2px solid hsl(var(--muted-foreground));
        transform: translateY(-65%) rotate(45deg);
        transition: transform 0.2s ease, border-color 0.2s ease;
    }

    /* Open state */
    .custom-select-trigger[aria-expanded="true"]::after {
        transform: translateY(-35%) rotate(-135deg);
        border-color: hsl(var(--foreground));
    }

    /* Hover / focus */
    .custom-select-trigger:hover {
        background-color: hsl(var(--accent) / 0.12);
    }

    .custom-select-trigger:focus-visible {
        outline: none;
        box-shadow: 0 0 0 2px hsl(var(--ring));
    }

/* ===== Dropdown ===== */

.custom-select-menu {
    position: absolute;
    z-index: 50;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.25rem;
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 0.375rem;
    max-height: 16rem;
    overflow-y: auto;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

    .custom-select-menu li {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
        cursor: pointer;
        border-radius: 0.375rem;
    }

        .custom-select-menu li:hover,
        .custom-select-menu li[aria-selected="true"] {
            background-color: hsl(var(--accent));
            color: hsl(var(--accent-foreground));
        }



        .custom-select-menu li.active {
            background-color: hsl(var(--accent));
            color: hsl(var(--accent-foreground));
        }


/* ===============================
   VALIDATION STYLES
================================ */

/* Hide messages normally */
.invalid-feedback {
    display: none;
    color: #ef4444;
    font-size: .875rem;
    margin-top: 4px;
}

/* Native inputs */
.was-validated input:invalid,
.was-validated textarea:invalid {
    border-color: #ef4444 !important;
}

    .was-validated input:invalid:focus,
    .was-validated textarea:invalid:focus {
        box-shadow: 0 0 0 2px rgba(239,68,68,.4);
    }

.was-validated input:valid,
.was-validated textarea:valid {
    border-color: #22c55e;
}

/* Show message for native inputs */
.was-validated input:invalid ~ .invalid-feedback,
.was-validated textarea:invalid ~ .invalid-feedback {
    display: block;
}

/* Custom select red border */
.was-validated [data-select].invalid .custom-select-trigger {
    border: 2px solid #ef4444 !important;
}

/* Show message for custom select */
.was-validated [data-select].invalid .invalid-feedback {
    display: block;
}

/* Regular select validation */
.was-validated select:invalid {
    border-color: #ef4444 !important;
    border-width: 2px !important;
}

    .was-validated select:invalid:focus {
        box-shadow: 0 0 0 2px rgba(239,68,68,.4);
    }

.was-validated select:valid {
    border-color: #22c55e;
}

/* Show message for select */
.was-validated select:invalid ~ .invalid-feedback {
    display: block;
}

/* Checkbox validation */
.was-validated input[type="checkbox"]:invalid {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}

    .was-validated input[type="checkbox"]:invalid ~ span {
        color: #ef4444;
    }

/* Radio button validation */
.was-validated input[type="radio"]:invalid {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}


.rotate-180 {
    transform: rotate(180deg);
}




/* ================= TEAM GRID ================= */

.team-grids {
    margin: 4em 0;
}

.ch-grid {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

    .ch-grid li {
        width: 240px;
        height: 240px;
        display: inline-block;
        margin: 25px;
        perspective: 1200px; /* Needed for 3D */
    }

/* ================= CARD WRAPPER ================= */

.ch-item {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(.4,2,.3,1);
    cursor: pointer;
}

/* 3D Flip */
.ch-grid li:hover .ch-item {
    transform: rotateY(180deg);
}

/* ================= FRONT SIDE ================= */

.ch-thumb {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-size: cover !important;
    background-position: center !important;
    backface-visibility: hidden;
    transition: all 0.4s ease;
}

/* Glow effect */
.ch-grid li:hover .ch-thumb {
    box-shadow: 0 0 35px rgba(255,0,90,0.7), 0 0 60px rgba(255,0,150,0.5);
}

/* ================= BACK SIDE ================= */

.ch-info {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /*background: linear-gradient(135deg, #ff005a, #ff7b00);*/
    background: linear-gradient(135deg, #000, #000);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    transform: rotateY(180deg);
    backface-visibility: hidden;
}

    /* ================= TEXT ================= */

    .ch-info h3 {
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 16px;
        margin-bottom: 10px;
    }

    .ch-info p {
        font-size: 13px;
        margin-bottom: 15px;
    }

        /* ================= BUTTON ================= */

        .ch-info p a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 75px;
            height: 75px;
            border-radius: 50%;
            background: rgba(255,255,255,0.2);
            color: #fff;
            text-decoration: none;
            font-size: 10px;
            font-weight: bold;
            text-transform: uppercase;
            transition: all 0.3s ease;
        }

            .ch-info p a:hover {
                background: rgba(255,255,255,0.4);
                transform: scale(1.1);
            }

/* ================= GRADIENT RING ================= */

.ch-grid li::before {
    content: '';
    position: absolute;
    width: 260px;
    height: 260px;
    margin-left: -130px;
    margin-top: -10px;
    border-radius: 50%;
    /*background: conic-gradient(#ff005a, #ff7b00, #ff005a );*/
    /*background: conic-gradient(#ff005a, #ff7b00, #ff005a );*/
    background: conic-gradient(#101010, #817e7c, #FFF);
    animation: spinRing 4s linear infinite;
    z-index: -1;
}

/* Ring Animation */
@keyframes spinRing {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}



.album-container {
    width: 100%;
    padding: 50px 0;
    background: #000; /* BLACK BACKGROUND */
    color: white;
}

.album-title {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 30px;
}

.album-wrapper {
    position: relative;
    max-width: 1200px;
    margin: auto;
}

.album-viewport {
    overflow: hidden;
}

.album-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.album-item {
    min-width: 20%; /* EXACT 5 IMAGES */
    padding: 8px;
    box-sizing: border-box;
}

    .album-item img {
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-radius: 10px;
        transition: transform 0.3s ease;
        cursor: pointer;
    }

        .album-item img:hover {
            transform: scale(1.05);
        }

.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    color: black;
    border: none;
    padding: 10px 14px;
    font-size: 20px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
}

    .nav-btn.prev {
        left: -20px;
    }

    .nav-btn.next {
        right: -20px;
    }

    .nav-btn:hover {
        background: #ddd;
    }





.step-item {
    position: relative;
}

.step-circle {
    width: 40px;
    height: 40px;
    margin: auto;
    border-radius: 50%;
    background: #e5e7eb;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: all 0.3s ease;
}

.step-label {
    margin-top: 8px;
    font-size: 13px;
    color: #6b7280;
}

.step-item.active .step-circle {
    background: #2563eb;
    color: white;
    transform: scale(1.1);
}

.step-item.completed .step-circle {
    background: #16a34a;
    color: white;
}

    .step-item.completed .step-circle::after {
        content: "✓";
    }



.datepicker-picker {
    background-color: #000;
}


.track-home-hero-default {
    margin-top: 0%;
    margin-bottom: -7%;
    position: relative;
    z-index: 9999;
    left: 50%;
    transform: translateX(-15%);
}