/* ============================================================================
   iSportex platform theme - the website's two themes brought into the app.
   Loaded right after variables.css, which is left as it was; this file only
   re-points its tokens, so every component that reads them follows along.

   Dark (default)      = website "Navy Arena":   navy ground, lime actions, blue accents.
   Light (data-theme)  = website "Electric Blue": pale-blue ground, white cards, blue actions,
                         lime kept as an accent fill (never as text on white).
   The website's "colorful" cookie value already maps to data-theme="light" here.
   ============================================================================ */

:root {
    /* Brand */
    --primary: #3B6CF0;
    --primary-light: #6E9BFF;
    --primary-dark: #2353D0;
    --primary-hover: rgba(59, 108, 240, 0.12);
    --primary-active: rgba(59, 108, 240, 0.22);
    --primary-rgb: 59, 108, 240;

    --secondary: #D4E706;
    --secondary-light: #E2F04A;
    --secondary-dark: #B8CA00;
    --secondary-hover: rgba(212, 231, 6, 0.12);
    --secondary-active: rgba(212, 231, 6, 0.22);
    --secondary-rgb: 212, 231, 6;
    --secondary-light-rgb: 226, 240, 74;
    --secondary-alt-rgb: 212, 231, 6;

    --accent: #D4E706;
    --accent-blue: #3B6CF0;
    --accent-green: #D4E706;

    /* Text on a filled lime control */
    --on-secondary: #0A172D;
    --on-secondary-ink: #0A172D;

    /* Surfaces - Navy Arena */
    --bg-primary: #0A172D;
    --bg-secondary: #0A172D;
    --bg-tertiary: #14233F;
    --bg-surface: #14233F;
    --bg-surface-light: #172A4C;
    --bg-surface-dark: #0F2140;
    --bg-hover: #172A4C;
    --bg-input: rgba(20, 35, 63, 0.7);
    --bg-input-focus: rgba(23, 42, 76, 0.95);

    /* Text */
    --text-primary: #FFFFFF;
    --text-secondary: #C9D3E6;
    --text-tertiary: #9AA8C4;
    --text-muted: #8391AE;
    --text-disabled: #55648A;
    --text-inverse: #0A172D;

    /* Borders */
    --border-primary: #24365C;
    --border-secondary: #172A4C;
    --border-light: #2E4570;
    --border-dark: #071022;
    --border-focus: #3B6CF0;

    --info: #3B6CF0;
    --info-light: #6E9BFF;
    --info-dark: #2353D0;
    --info-bg: #13285A;
    --info-border: #3B6CF0;

    /* Buttons: lime main action, blue secondary - as on the website */
    --gradient-btn-primary: linear-gradient(90deg, #D4E706 0%, #E2F04A 100%);
    --gradient-btn-primary-hover: linear-gradient(90deg, #B8CA00 0%, #D4E706 100%);
    --gradient-btn-secondary: linear-gradient(90deg, #3B6CF0 0%, #6E9BFF 100%);
    --gradient-btn-secondary-hover: linear-gradient(90deg, #2353D0 0%, #3B6CF0 100%);

    --shadow-primary: 0 4px 14px 0 rgba(59, 108, 240, 0.3);
    --shadow-primary-lg: 0 6px 20px 0 rgba(59, 108, 240, 0.4);
    --shadow-secondary: 0 4px 14px 0 rgba(212, 231, 6, 0.28);
    --shadow-secondary-lg: 0 6px 20px 0 rgba(212, 231, 6, 0.38);
}

[data-theme="light"] {
    color-scheme: light;

    /* Blue carries headings, links and actions; navy is the ink */
    --primary: #1740B8;
    --primary-light: #2060F0;
    --primary-dark: #0F2E8C;
    --primary-hover: rgba(32, 96, 240, 0.08);
    --primary-active: rgba(32, 96, 240, 0.16);
    --primary-rgb: 23, 64, 184;

    --secondary: #2060F0;
    --secondary-light: #4A80F5;
    --secondary-dark: #1740B8;
    --secondary-hover: rgba(32, 96, 240, 0.1);
    --secondary-active: rgba(32, 96, 240, 0.2);
    --secondary-rgb: 32, 96, 240;
    --secondary-light-rgb: 74, 128, 245;
    --secondary-alt-rgb: 32, 96, 240;

    /* Lime stays as a fill accent (chips, highlights) */
    --accent: #D4E706;
    --accent-blue: #2060F0;
    --accent-green: #B8CA00;

    --on-secondary: #FFFFFF;
    --on-secondary-ink: #FFFFFF;

    /* Surfaces - Electric Blue */
    --bg-primary: #EEF3FF;
    --bg-secondary: #EEF3FF;
    --bg-tertiary: #E4ECFF;
    --bg-surface: #FFFFFF;
    --bg-surface-light: #F7F9FF;
    --bg-surface-dark: #DCE5FA;
    --bg-hover: #E4ECFF;
    --bg-input: #FFFFFF;
    --bg-input-focus: #FFFFFF;

    /* Text (muted #5A6782 on #EEF3FF is 5.2:1) */
    --text-primary: #0A172D;
    --text-secondary: #1E2C4A;
    --text-tertiary: #45526A;
    --text-muted: #5A6782;
    --text-disabled: #AEB8CC;
    --text-inverse: #FFFFFF;

    --border-primary: #D5DEF0;
    --border-secondary: #C3CFEA;
    --border-light: #D5DEF0;
    --border-dark: #AEB8CC;
    --border-focus: #2060F0;

    --info: #2060F0;
    --info-light: #4A80F5;
    --info-dark: #1740B8;

    --gradient-btn-primary: linear-gradient(135deg, #2060F0 0%, #3B6CF0 100%);
    --gradient-btn-primary-hover: linear-gradient(135deg, #1740B8 0%, #2060F0 100%);
    --gradient-btn-secondary: linear-gradient(135deg, #0A172D 0%, #172A4C 100%);
    --gradient-btn-secondary-hover: linear-gradient(135deg, #06101F 0%, #0A172D 100%);

    --shadow-xs: 0 1px 2px 0 rgba(23, 64, 184, 0.05);
    --shadow-sm: 0 2px 8px -2px rgba(23, 64, 184, 0.08);
    --shadow-md: 0 8px 24px -8px rgba(23, 64, 184, 0.14);
    --shadow-lg: 0 16px 48px -12px rgba(23, 64, 184, 0.18);
    --shadow-xl: 0 20px 40px -12px rgba(23, 64, 184, 0.2);
    --shadow-2xl: 0 25px 50px -12px rgba(23, 64, 184, 0.25);
    --shadow-primary: 0 4px 14px 0 rgba(32, 96, 240, 0.22);
    --shadow-primary-lg: 0 6px 20px 0 rgba(32, 96, 240, 0.3);
    --shadow-secondary: 0 4px 14px 0 rgba(32, 96, 240, 0.22);
    --shadow-secondary-lg: 0 6px 20px 0 rgba(32, 96, 240, 0.3);
}

/* ============================================================================
   Theme switch - the website's sliding two-way pill (moon = Navy Arena,
   palette = Electric Blue). theme-switcher.js keeps data-theme-state in sync.
   ============================================================================ */
.theme-switch {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.theme-switch__track {
    position: relative;
    display: inline-block;
    width: 62px;
    height: 32px;
    border-radius: 999px;
    background: linear-gradient(135deg, #0B1220 0%, #1C2A4A 100%);
    border: 1px solid rgba(59, 108, 240, 0.35);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: background 0.35s ease, border-color 0.35s ease;
    direction: ltr; /* icons sit by position, same order in Arabic */
}

.theme-switch__knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3B6CF0 0%, #6E9BFF 100%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.35s cubic-bezier(.65, 0, .35, 1), background 0.35s ease;
}

.theme-switch__icon {
    position: absolute;
    top: 50%;
    z-index: 1;
    margin-top: -7px;
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.35s ease;
    pointer-events: none;
}

.theme-switch__icon--moon  { left: 8px; }
.theme-switch__icon--color { left: 38px; }

.theme-switch[data-theme-state="default"] .theme-switch__icon--moon { color: #FFFFFF; }

.theme-switch[data-theme-state="colorful"] .theme-switch__track {
    background: linear-gradient(135deg, #3157B8 0%, #9DB6F5 55%, #DCE77A 100%);
    border-color: rgba(255, 255, 255, 0.4);
}

.theme-switch[data-theme-state="colorful"] .theme-switch__knob {
    transform: translateX(30px);
    background: #13203A;
}

.theme-switch[data-theme-state="colorful"] .theme-switch__icon--color { color: #DCE77A; }

.theme-switch:hover .theme-switch__track,
.theme-switch:focus-visible .theme-switch__track { border-color: rgba(59, 108, 240, 0.7); }

.theme-switch:focus-visible { outline: none; }
.theme-switch:focus-visible .theme-switch__track { outline: 2px solid var(--border-focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .theme-switch__knob,
    .theme-switch__track,
    .theme-switch__icon { transition: none; }
}

/* ============================================================================
   Language control - translate icon + flag + language code, as on the website.
   Flags are the website's set (flag-icons, MIT) under /img/flags.
   ============================================================================ */
.lang-flag {
    display: inline-block;
    flex-shrink: 0;
    width: 22px;
    height: 16px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15);
}

[data-theme="light"] .lang-flag { box-shadow: 0 0 0 1px rgba(10, 23, 45, 0.15); }

.lang-trigger-icon { flex-shrink: 0; color: var(--secondary); }

.lang-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--text-primary);
    background: rgba(var(--primary-rgb), 0.14);
    border: 1px solid rgba(var(--primary-rgb), 0.35);
}

.btn-language,
.btn-language-header {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.lang-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.lang-item.active .lang-flag { box-shadow: 0 0 0 2px var(--secondary); }

/* ============================================================================
   Sign-in, sign-up and profile-setup card in the dark theme: the lighter navy of
   the website's "Follow Us" cards (#1B2A4A on #13213E), not the page navy.
   Text stays white; the inputs and buttons keep the dark-theme tokens.
   ============================================================================ */
:root:not([data-theme="light"]) .auth-card {
    --gradient-surface: linear-gradient(160deg, #1F2F52 0%, #1B2A4A 100%);
    --bg-surface: #1B2A4A;
    --bg-tertiary: #13213E;
    background: var(--gradient-surface);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}

/* ============================================================================
   Light theme: list-card action buttons and the share trigger carried a fixed
   near-black fill (rgba(15,20,25,.8)) from the page stylesheets, so they showed
   as dark discs on white cards. Give the plain ones a light fill; coloured
   variants (featured, web-featured, block, delete) keep their own tints.
   ============================================================================ */
[data-theme="light"] .btn-action:not([class*="btn-action--"]):not(.block):not(.delete):not(.btn-delete):not(.danger),
[data-theme="light"] .share-dropdown__trigger {
    background-color: #FFFFFF;
    border-color: var(--border-primary);
    color: var(--text-secondary);
}

[data-theme="light"] .btn-action:not([class*="btn-action--"]):not(.block):not(.delete):not(.btn-delete):not(.danger):hover,
[data-theme="light"] .share-dropdown__trigger:hover {
    background-color: #E4ECFF;
    border-color: var(--primary-light);
    color: var(--primary);
}

/* Light theme: delete action button was a near-black disc */
[data-theme="light"] .btn-action.delete {
    background-color: #FFF1F1;
    border-color: rgba(239, 68, 68, 0.35);
    color: #DC2626;
}
[data-theme="light"] .btn-action.delete:hover {
    background-color: #FEE2E2;
    border-color: #EF4444;
    color: #B91C1C;
}

/* Light theme: profile pages (athlete/coach) - sticky "show interest" bar and coach experience
   cards were still on the dark palette (dark bar under navy text, grey card under navy text). */
[data-theme="light"] .player-sticky-footer {
    background: linear-gradient(180deg, rgba(238, 243, 255, 0) 0%, rgba(238, 243, 255, 0.96) 45%, #EEF3FF 100%);
    border-top-color: var(--border-primary);
    box-shadow: 0 -10px 30px rgba(23, 64, 184, 0.10);
}
[data-theme="light"] .coach-experience-item {
    background: #FFFFFF;
    border-color: var(--border-primary);
    box-shadow: 0 8px 18px rgba(23, 64, 184, 0.08);
}