body {
    background-color: rgb(var(--ix-surface-raised));
    color: rgb(var(--ix-content-primary));
    font-family: 'Montserrat', system-ui, sans-serif;
}

/* Solar icon set (mirrors iSportEx.Web / the portal) — solar-icon.js injects an inline
   SVG into each <i class="solar-icon">. Scale that SVG to font-size so the existing
   Tailwind text-size utilities (text-lg, text-2xl, text-5xl, ...) size icons directly,
   the same way they already size Bootstrap Icons glyphs. */
.solar-icon {
    display: inline-block;
    line-height: 1;
    vertical-align: -0.125em;
}

.solar-icon svg {
    display: block;
    width: 1em;
    height: 1em;
}

/* Header styles */
.header-card {
    background: linear-gradient(180deg, rgb(var(--ix-surface-base)) 0%, rgb(var(--ix-surface-raised)) 100%);
    border: 1px solid rgb(var(--ix-primary) / 0.2);
}

.header-blur {
    backdrop-filter: blur(10px);
    background: rgb(var(--ix-surface-base) / 0.95) !important;
}

/* Section cards */
.section-card {
    background: rgb(var(--ix-surface-base));
    border: 1px solid rgb(var(--ix-primary) / 0.15);
}

.info-tag {
    background: rgb(var(--ix-primary) / 0.1);
    border: 1px solid rgb(var(--ix-primary) / 0.3);
}

/* Hero section */
.hero-bg {
    background: linear-gradient(180deg, rgb(var(--ix-surface-raised)) 0%, rgb(var(--ix-surface-base)) 50%, rgb(var(--ix-surface-raised)) 100%);
    position: relative;
    overflow: hidden;
}

.hero-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

    .hero-slider::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: radial-gradient(80% 60% at 70% 30%, rgb(var(--ix-primary) / 0.15) 0%, transparent 60%), linear-gradient(180deg, rgb(var(--ix-surface-base) / 0.7) 0%, rgb(var(--ix-surface-base) / 0.85) 100%);
    }

.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 2.5s ease-in-out;
    filter: brightness(0.5) contrast(1.1) saturate(0.9);
}

    .hero-slide.active {
        opacity: 1;
    }

.hero-content {
    position: relative;
    z-index: 2;
}

/* Card hover effects */
.card-hover {
    background: rgb(var(--ix-surface-base));
    border: 1px solid rgb(var(--ix-primary) / 0.15);
    transition: all 0.3s ease;
}

    .card-hover:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 24px rgb(var(--ix-primary) / 0.15);
        border-color: rgb(var(--ix-primary) / 0.4);
    }

/* Action buttons */
.action-btn {
    background: rgb(var(--ix-surface-base) / 0.8);
    border: 1px solid rgb(var(--ix-primary) / 0.2);
    transition: all 0.2s ease;
}

    .action-btn:hover {
        background: rgb(var(--ix-primary) / 0.2);
        border-color: rgb(var(--ix-primary));
    }

/* Filter buttons */
.filter-btn {
    background: rgb(var(--ix-surface-raised));
    border: 1px solid rgb(var(--ix-primary) / 0.2);
    transition: all 0.2s ease;
}

    .filter-btn:hover {
        background: rgb(var(--ix-primary) / 0.1);
    }

    .filter-btn.active {
        background: rgb(var(--ix-primary));
        border-color: rgb(var(--ix-primary));
    }

/* Partner logos */
.partner-logo {
    background: rgb(var(--ix-surface-raised));
    border: 1px solid rgb(var(--ix-primary) / 0.15);
    transition: all 0.3s ease;
}

    .partner-logo:hover {
        border-color: rgb(var(--ix-primary) / 0.4);
        transform: scale(1.05);
    }

    .partner-logo img {
        filter: grayscale(100%) brightness(0.8);
        transition: all 0.3s ease;
    }

    .partner-logo:hover img {
        filter: grayscale(0%) brightness(1);
    }

/* Glow effect */
.glow-effect {
    box-shadow: 0 0 30px rgb(var(--ix-primary) / 0.3);
}

/* Step number */
.step-number {
    background: linear-gradient(135deg, rgb(var(--ix-primary)) 0%, rgb(var(--ix-primary-dark)) 100%);
    box-shadow: 0 4px 15px rgb(var(--ix-primary) / 0.4);
}

/* Sport card icon */
.sport-icon-bg {
    background: linear-gradient(135deg, rgb(var(--ix-primary)) 0%, rgb(var(--ix-primary-dark)) 100%);
}

/* Admin-uploaded sport icon: fitted inside the circle, never cropped */
.sport-icon-bg {
    overflow: hidden;
}

.sport-icon-bg .sport-icon-img {
    width: 62%;
    height: 62%;
    object-fit: contain;
    display: block;
}

/* Testimonial card */
.testimonial-card {
    background: rgb(var(--ix-surface-base));
    border: 1px solid rgb(var(--ix-primary) / 0.15);
}

/* Club card */
.club-card {
    background: rgb(var(--ix-surface-base));
    border: 1px solid rgb(var(--ix-primary) / 0.15);
    transition: all 0.3s ease;
}

    .club-card:hover {
        border-color: rgb(var(--ix-primary) / 0.4);
        transform: translateY(-4px);
    }

/* Academy card */
.academy-card {
    background: rgb(var(--ix-surface-base));
    border: 1px solid rgb(var(--ix-primary) / 0.15);
    transition: all 0.3s ease;
}

    .academy-card:hover {
        border-color: rgb(var(--ix-primary) / 0.4);
        transform: translateY(-4px);
    }

/* Footer */
.footer-section {
    background: rgb(var(--ix-surface-base));
    border-top: 1px solid rgb(var(--ix-primary) / 0.15);
}

/* Particles */
.particles {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.particle {
    position: absolute;
    background: rgb(var(--ix-primary));
    border-radius: 50%;
    opacity: 0.4;
    animation: float 6s ease-in-out infinite;
}

.text-success {
    color: rgb(var(--ix-accent-explore));
}

.btn-explore {
    background-color: rgb(var(--ix-accent-explore) / 0.15);
    border: 1px solid rgb(var(--ix-accent-explore));
    color: rgb(var(--ix-accent-explore));
    transition: background-color 0.2s, color 0.2s;
}

.btn-explore:hover {
    background-color: rgb(var(--ix-accent-explore));
    color: rgb(var(--ix-on-primary));
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.4;
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.7;
    }
}

@media (prefers-reduced-motion: reduce) {

    .particle,
    .card-hover,
    .partner-logo {
        animation: none;
        transition: none;
    }
}

/* Custom Dropdown Styles */
.custom-dropdown .dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-dropdown .dropdown-trigger.open i:last-child {
    transform: rotate(180deg);
}

.custom-dropdown .dropdown-trigger:hover {
    border-color: rgb(var(--ix-primary) / 0.4);
}

.custom-dropdown .dropdown-item {
    border-bottom: 1px solid rgb(var(--ix-primary) / 0.1);
}

    .custom-dropdown .dropdown-item:last-child {
        border-bottom: none;
    }

    .custom-dropdown .dropdown-item:hover i {
        color: rgb(var(--ix-primary));
    }

    .custom-dropdown .dropdown-item.selected {
        background: rgb(var(--ix-primary) / 0.1);
    }

        .custom-dropdown .dropdown-item.selected span {
            color: rgb(var(--ix-primary));
        }

.lang-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgb(var(--ix-primary) / 0.12);
    color: rgb(var(--ix-content-badge));
    border: 1px solid rgb(var(--ix-primary) / 0.3);
}

/* Header Language Dropdown Specific Styles */
#header-language-dropdown .dropdown-trigger {
    background: rgb(var(--ix-surface-base) / 0.8);
    backdrop-filter: blur(10px);
}

    #header-language-dropdown .dropdown-trigger:hover {
        background: rgb(var(--ix-surface-base) / 0.95);
        border-color: rgb(var(--ix-primary) / 0.5);
    }

#header-language-dropdown .dropdown-menu {
    backdrop-filter: blur(10px);
}

#header-language-dropdown .lang-code {
    font-size: 0.875rem;
    padding: 6px 10px;
    min-width: 40px;
}

/* Mobile Language Dropdown Fix */
#mobile-language-dropdown .dropdown-menu {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: none;
    margin-top: 0.5rem;
    box-shadow: none !important;
}

    #mobile-language-dropdown .dropdown-menu.show {
        display: block;
        animation: fadeIn 0.2s ease;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ---------------------------------------------------------------------------
   Temporarily hidden sections - added 2026-09-17 at the team's request.

   Eight directory/showcase sections are off the landing page for now: Featured
   Talent, Coaches, Success Stories, Clubs, Academies, Scouts, Agents and
   Agencies. The markup and the data behind them are untouched, so bringing any
   one back is a matter of removing the class from its <section>, and bringing
   them all back is a matter of deleting this rule.

   The header nav links that point at four of them carry the class too. Without
   that, "Talent", "Success Stories", "Clubs" and "Academies" would still be in
   the menu pointing at elements that no longer render - which is how the News
   and Blog pages ended up with seven dead links earlier this month.
   --------------------------------------------------------------------------- */
.temporarily-hidden {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   Height of the fixed site header.

   #header is position:fixed, so it is out of flow and sits over whatever is
   underneath. Any page that starts with its own content - News, Blog, and the
   article pages - has to reserve this much room or its first heading renders
   behind the menu. That is what put "News" and "Blog" under the nav bar.

   Measured: 90px up to the lg breakpoint, 100px from 1024px where the desktop
   nav appears. Kept as a variable so the pages below ask for "the header" and
   not for a number that quietly goes wrong the next time the header changes.

   The landing page does not use this. Its hero deliberately runs underneath the
   header with its own pt-36 md:pt-40, so the background reaches the top.
   --------------------------------------------------------------------------- */
:root {
    --site-header-height: 90px;
}

@media (min-width: 1024px) {
    :root {
        --site-header-height: 100px;
    }
}

/* ---------------------------------------------------------------------------
   Sign In / Sign Up.

   The same two actions were wearing three different looks: two identical
   ghost-green buttons in the hero, a bare text link beside a filled blue
   button in the desktop header, and a third arrangement in the mobile menu.
   Identical twins give the reader no clue which is which; a text link next to
   a button does not read as a pair at all; and the hero green (--color-accent)
   is the browse/explore colour, not the brand's.

   One pair now, in brand blue: filled for the primary action, outlined for the
   secondary. Same shape, same weight, same family - so they read as a set,
   with the filled one obviously leading.

   Only colour, border and hover live here. Size, padding and radius stay as
   utilities at each call site, because the hero pair is deliberately larger
   than the header pair.
   --------------------------------------------------------------------------- */
:root {
    --color-primary: rgb(var(--ix-primary));
    --color-primary-hover: rgb(var(--ix-primary-hover));
}

.btn-auth-primary,
.btn-auth-secondary {
    border: 1px solid var(--color-primary);
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.btn-auth-primary {
    background-color: var(--color-primary);
    color: rgb(var(--ix-on-primary));
}

    .btn-auth-primary:hover {
        background-color: var(--color-primary-hover);
        border-color: var(--color-primary-hover);
        color: rgb(var(--ix-on-primary));
    }

.btn-auth-secondary {
    background-color: transparent;
    color: var(--color-primary);
}

    .btn-auth-secondary:hover {
        background-color: var(--color-primary);
        color: rgb(var(--ix-on-primary));
    }

/* ---------------------------------------------------------------------------
   Logo.

   The wordmark is a filled shape inside the SVG, not text, so it cannot inherit
   a colour from the page - an <img> renders in its own document and never sees
   our CSS. White lettering is therefore invisible on the colorful theme's light
   ground, with only the lime and blue of the mark left showing.

   Two files, one shown per theme. Swapped in CSS rather than by script so the
   right one is painted with the rest of the first frame, in step with the
   data-theme the server already stamped onto <html>.
   --------------------------------------------------------------------------- */
.logo-on-light {
    display: none;
}

[data-theme="colorful"] .logo-on-dark {
    display: none;
}

[data-theme="colorful"] .logo-on-light {
    display: block;
}

/* ---------------------------------------------------------------------------
   Device frames for the real portal screenshots in "Across Devices".

   Just enough chrome to say which device you are looking at - a window bar, a
   phone notch, a thicker bezel - without drawing a whole illustrated laptop
   around a screenshot, which dates badly and competes with the UI it frames.

   The screenshots are dark, so on the colorful theme they sit on a light panel.
   The bezel is drawn from --ix-content-primary rather than a fixed near-black,
   which keeps a visible edge between screenshot and panel in both themes.
   --------------------------------------------------------------------------- */
.device-frame {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: rgb(var(--ix-content-primary) / 0.08);
    border: 1px solid rgb(var(--ix-content-primary) / 0.14);
    box-shadow: 0 18px 40px rgb(var(--ix-shadow) / 0.35);
}

.device-frame img {
    display: block;
}

/* Desktop: a window title bar with three dots. */
.device-frame__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: rgb(var(--ix-content-primary) / 0.1);
    border-bottom: 1px solid rgb(var(--ix-content-primary) / 0.12);
}

    .device-frame__bar span {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: rgb(var(--ix-content-primary) / 0.3);
    }

/* Phone: rounder corners, a thicker bezel and a notch. */
.device-frame--phone {
    border-radius: 26px;
    border-width: 5px;
    padding-top: 16px;
    background: rgb(var(--ix-content-primary) / 0.12);
}

.device-frame__notch {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 78px;
    height: 7px;
    border-radius: 0 0 7px 7px;
    background: rgb(var(--ix-content-primary) / 0.32);
}

/* Tablet: the same idea as the phone, squarer and with a slimmer bezel. */
.device-frame--tablet {
    border-radius: 16px;
    border-width: 4px;
}