/* =====================================================================
   THEME MODERN  —  Whole-site modern redesign overlay
   Loaded LAST (after style.css) so it overrides the legacy BizLand theme.
   Global rules theme every public page (shared _TopBar / _FooterBar).
   Homepage-only rules are scoped under `body.home-modern`.
   Author: redesign 2026 — keep existing markup IDs/JS data-binding intact.
   ===================================================================== */

/* ----------------------------------------------------------------
   1. Design tokens
   ---------------------------------------------------------------- */
:root {
    --c-navy: #161a3c;          /* primary dark */
    --c-navy-2: #1e2350;        /* dark surface */
    --c-navy-3: #2a2f63;        /* hover dark */
    --c-ink: #1d2233;           /* body headings */
    --c-accent: #e63950;        /* crimson accent (mockup red) */
    --c-accent-2: #ff5d73;      /* lighter accent */
    --c-accent-dk: #c5132c;
    --c-teal: #2bb6a3;          /* secondary highlight */
    --c-muted: #6b7280;
    --c-line: #e7e9f2;
    --c-bg: #f4f6fb;            /* page background */
    --c-card: #ffffff;
    --c-text: #3a3f51;
    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 22px;
    --shadow-sm: 0 2px 10px rgba(22, 26, 60, .06);
    --shadow: 0 10px 30px rgba(22, 26, 60, .10);
    --shadow-lg: 0 18px 50px rgba(22, 26, 60, .16);
    --maxw: 1200px;
    --font-head: "Poppins", "Roboto", sans-serif;
    --font-body: "Poppins", "Segoe UI", system-ui, sans-serif;
    --t: .28s cubic-bezier(.4, 0, .2, 1);
}

/* ----------------------------------------------------------------
   2. Global base
   ---------------------------------------------------------------- */
html, body {
    /* Defensive: AOS scroll animations (fade-right/zoom-out etc.) translate
       elements off their final position before they animate in; transforms
       count toward the scrollable-overflow area even though they don't move
       the box's static layout position, which shows up as a spurious
       horizontal scrollbar on some Chromium builds (reported on Edge). */
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    color: var(--c-text);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-head);
    color: var(--c-ink);
}

a {
    color: var(--c-accent);
    transition: color var(--t);
}

a:hover {
    color: var(--c-accent-dk);
}

img {
    max-width: 100%;
}

::selection {
    background: var(--c-accent);
    color: #fff;
}

/* keep legacy helper */
.hidden {
    display: none !important;
}

/* nicer scrollbar */
* {
    scrollbar-color: var(--c-navy-3) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background: #c7cbe0;
    border-radius: 8px;
}

/* ----------------------------------------------------------------
   3. Top utility bar (login / email)
   ---------------------------------------------------------------- */
#topbar {
    background: var(--c-navy);
    color: #fff;
    height: 42px;
    font-size: 13.5px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

#topbar .contact-info i {
    color: #fff;
    font-style: normal;
}

#topbar .contact-info i a,
#topbar .contact-info i span {
    color: #fff !important;
    font-style: normal;
    font-weight: 600;
    letter-spacing: .2px;
    transition: color var(--t);
}

#topbar .contact-info i a:hover,
#topbar .contact-info i span:hover {
    color: var(--c-accent-2) !important;
}

#topbar .social-links a {
    color: rgba(255, 255, 255, .8);
}

#topbar .social-links a:hover {
    color: #fff;
}

#topbar .bi-envelope a {
    color: rgba(255, 255, 255, .9);
}

/* ----------------------------------------------------------------
   4. Header / primary navigation
   ---------------------------------------------------------------- */
#header {
    background: #ffffff;          /* solid: backdrop-filter clips absolute dropdowns in some browsers */
    height: 78px;
    box-shadow: 0 4px 24px rgba(22, 26, 60, .08);
    border-bottom: 1px solid var(--c-line);
    overflow: visible;            /* never clip dropdowns */
    z-index: 1053;                /* above select2 (1051) / chosen (1010), below modal (1060) */
}

#header.fixed-top {
    height: 66px;
}

#header .logo {
    display: flex;
    align-items: center;
    margin: 0;
}

#header .logo img {
    max-height: 50px;
    transition: max-height var(--t);
}

#header.fixed-top .logo img {
    max-height: 42px;
}

#header .logo a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--c-ink);
}

#header .logo a span {
    color: var(--c-ink);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.15;
    letter-spacing: .2px;
    max-width: 320px;
}

/* desktop nav links */
.navbar > ul > li {
    padding: 10px 0 10px 22px;
}

.navbar a,
.navbar a:focus {
    font-family: var(--font-head);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--c-ink);
}

.navbar > ul > li > a:before {
    height: 3px;
    bottom: -4px;
    border-radius: 3px;
    background: var(--c-accent);
}

.navbar a:hover,
.navbar .active,
.navbar li:hover > a {
    color: var(--c-accent);
}

/* dropdowns — desktop (re-assert reveal so nothing clips/hides them) */
.navbar .dropdown ul {
    background: #fff;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-line);
    box-shadow: var(--shadow);
    padding: 8px 0;
    margin: 0;
    /* align the panel so its items line up under the parent menu label
       (legacy style.css offset it 28px to the right -> looked misaligned).
       Nested fly-outs keep their own left (higher-specificity rule). */
    left: 8px;
    z-index: 1200;
    /* do NOT set overflow:hidden — it clips nested fly-out submenus */
}

.navbar .dropdown:hover > ul,
.navbar .dropdown .dropdown:hover > ul {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.navbar .dropdown ul a {
    font-size: 13.5px;
    font-weight: 500;
    color: var(--c-text);
    padding: 9px 14px;          /* even spacing; items align under parent label */
    transition: background var(--t), color var(--t);
}

.navbar .dropdown ul li {
    margin: 0;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a {
    color: var(--c-accent);
    background: #faf2f3;
}

.mobile-nav-toggle {
    color: var(--c-ink);
}

/* dropdowns — mobile (BizLand toggles .dropdown-active via main.js) */
.navbar-mobile .dropdown ul {
    background: #fff;
    border-radius: var(--radius-sm);
}

.navbar-mobile .dropdown > .dropdown-active {
    display: block;
}

/* mobile nav panel */
.navbar-mobile {
    background: rgba(16, 19, 45, .55);
    z-index: 1053;                /* match header — above select2 (1051), below modal (1060) */
}

.navbar-mobile ul {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

/* The base template positions .mobile-nav-toggle at top:15px (right under the QR/header
   bar) while the menu panel itself (.navbar-mobile ul) starts lower, at top:55px - so the
   close (X) icon floated above the panel, in the dark header strip, looking detached from
   the menu it closes ("close button is displayed outside the menu bar"). Move it inside the
   panel's own top-right corner instead, once the panel is open. */
.navbar-mobile .mobile-nav-toggle {
    top: 68px;
    right: 24px;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
    color: var(--c-accent);
}

/* ----------------------------------------------------------------
   5. Buttons (shared)
   ---------------------------------------------------------------- */
.btn-modern,
#hero .btn-get-started {
    font-family: var(--font-head);
    text-transform: none;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: .2px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    border-radius: 50px;
    border: 0;
    color: #fff;
    background: var(--c-accent);
    box-shadow: 0 10px 24px rgba(230, 57, 80, .32);
    transition: transform var(--t), box-shadow var(--t), background var(--t);
}

.btn-modern:hover,
#hero .btn-get-started:hover {
    background: var(--c-accent-dk);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(230, 57, 80, .42);
}

.btn-ghost {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255, 255, 255, .55);
    box-shadow: none;
}

.btn-ghost:hover {
    background: #fff;
    color: var(--c-navy);
    border-color: #fff;
}

/* back-to-top */
.back-to-top {
    background: var(--c-accent) !important;
    border-radius: 50% !important;
}

.back-to-top:hover {
    background: var(--c-accent-dk) !important;
}

/* preloader / form spinners — recolor the legacy green ring to the blue theme */
#preloader:before {
    border-color: var(--c-navy);
    border-top-color: #e2eefd;   /* light-blue spinning highlight */
}

.contact .php-email-form .loading:before {
    border-color: var(--c-navy);
    border-top-color: #e2eefd;
}

/* ----------------------------------------------------------------
   6. Sections general
   ---------------------------------------------------------------- */
section {
    padding: 72px 0;
}

.section-bg {
    background: #eef1f8;
}

.section-title {
    padding-bottom: 34px;
}

.section-title h2 {
    background: rgba(230, 57, 80, .10);
    color: var(--c-accent);
    border-radius: 50px;
    font-weight: 700;
    letter-spacing: 1.4px;
}

.section-title h3 span,
.section-title h2 span {
    color: var(--c-accent);
}

/* eyebrow + heading helper used by new sections */
.eyebrow {
    display: inline-block;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: 10px;
}

.h-title {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(26px, 3.4vw, 40px);
    line-height: 1.15;
    color: var(--c-ink);
    margin: 0;
}

.h-title .hl {
    color: var(--c-accent);
}

.lead-muted {
    color: var(--c-muted);
    font-size: 16px;
    line-height: 1.7;
}

/* =====================================================================
   7. HOMEPAGE  (scoped to body.home-modern)
   ===================================================================== */

/* ---- 7.1 Hero ------------------------------------------------- */
body.home-modern #hero {
    height: auto;
    min-height: 78vh;
    background: radial-gradient(1200px 600px at 85% -10%, rgba(230, 57, 80, .22), transparent 60%),
                radial-gradient(900px 500px at 0% 110%, rgba(43, 182, 163, .16), transparent 55%),
                linear-gradient(135deg, #0f1230 0%, var(--c-navy) 55%, #20255a 100%);
    display: flex;
    align-items: center;
    padding: 120px 0 90px;
    overflow: hidden;
}

body.home-modern #hero:before {
    display: none;
}

body.home-modern #hero .container {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 48px;
    align-items: center;
    max-width: var(--maxw);
}

body.home-modern #hero h1 {
    color: #fff;
    font-size: clamp(34px, 4.6vw, 58px);
    font-weight: 800;
    line-height: 1.07;
    letter-spacing: -.5px;
}

body.home-modern #hero h1 span {
    color: var(--c-accent-2);
}

body.home-modern #hero .hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
    padding: 7px 16px;
    border-radius: 50px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .6px;
    margin-bottom: 22px;
}

body.home-modern #hero .hero-kicker .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 0 4px rgba(230, 57, 80, .3);
}

body.home-modern #hero h2 {
    color: rgba(255, 255, 255, .82);
    font-size: clamp(15px, 1.4vw, 18px);
    font-weight: 400;
    line-height: 1.7;
    margin: 18px 0 30px;
    max-width: 540px;
}

body.home-modern #hero .d-flex {
    flex-wrap: wrap;
    gap: 14px;
}

body.home-modern #hero .btn-watch-video {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .22);
    padding: 11px 22px 11px 16px;
    border-radius: 50px;
    margin-left: 0;
    transition: background var(--t), transform var(--t);
}

body.home-modern #hero .btn-watch-video:hover {
    background: rgba(255, 255, 255, .16);
    transform: translateY(-2px);
}

body.home-modern #hero .btn-watch-video i {
    color: var(--c-accent-2);
    font-size: 26px;
}

/* hero stats strip */
.hero-stats {
    display: flex;
    gap: 30px;
    margin-top: 38px;
    flex-wrap: wrap;
}

.hero-stats .stat b {
    display: block;
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 30px;
    color: #fff;
    line-height: 1;
}

.hero-stats .stat span {
    color: rgba(255, 255, 255, .6);
    font-size: 13px;
    letter-spacing: .4px;
}

/* hero right: media panel */
.hero-media {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: #0c0f28;
    aspect-ratio: 16 / 11;
    border: 1px solid rgba(255, 255, 255, .10);
}

.hero-media img,
.hero-media iframe,
.hero-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border: 0;
}

.hero-media .play-badge {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(230, 57, 80, .92);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    box-shadow: 0 10px 30px rgba(230, 57, 80, .5);
    animation: pulseRing 2.2s infinite;
}

@keyframes pulseRing {
    0% { box-shadow: 0 0 0 0 rgba(230, 57, 80, .5); }
    70% { box-shadow: 0 0 0 22px rgba(230, 57, 80, 0); }
    100% { box-shadow: 0 0 0 0 rgba(230, 57, 80, 0); }
}

/* tournaments floating widget (existing #divTournamentsGBA + .addGBATour).
   Solid background — it used to be translucent with a blur, so the hero's
   own badminton photo (.hero-media img) bled through/blurred behind it. */
body.home-modern .tournaments_sec.desk {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    width: 300px;
    background: #0c0f28;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius);
    padding: 16px;
    z-index: 40;
}

body.home-modern .tournaments_sec h4 {
    border-left: 3px solid var(--c-accent);
    color: #fff !important;
    font-family: var(--font-head);
}

body.home-modern .view_shedule a {
    background: var(--c-accent);
    border-radius: 50px;
    font-weight: 600;
    text-transform: none;
    transition: background var(--t);
}

body.home-modern .view_shedule a:hover {
    background: var(--c-accent-dk);
}

.tournaments_l, .tournaments_r, .tournaments_r span {
    color: #fff;
}

/* ---- 7.2 About ------------------------------------------------ */
body.home-modern #about {
    background: var(--c-bg);
    padding-top: 84px;
}

body.home-modern #about .carousel,
body.home-modern #about #carouselExampleCaptions {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
}

body.home-modern #about .carousel-item img {
    border-radius: var(--radius-lg);
    height: 380px;
    object-fit: cover;
}

body.home-modern #about #hAssocHeading {
    background: rgba(230, 57, 80, .10);
    color: var(--c-accent);
    display: inline-block;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: none;
}

body.home-modern #about .content #pAssoDesc {
    color: var(--c-text);
    font-size: 16px;
    line-height: 1.8;
}

body.home-modern #about .content p.fst::first-letter {
    font-size: 1em;
}

/* about feature chips */
.about-chips {
    display: flex;
    /*flex-wrap: wrap;*/
    gap: 12px;
    margin-top: 22px;
}

.about-chips .chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: 50px;
    padding: 9px 18px;
    font-weight: 600;
    font-size: 14px;
    color: var(--c-ink);
    box-shadow: var(--shadow-sm);
}

.about-chips .chip i {
    color: var(--c-accent);
    font-size: 18px;
}

/* ---- 7.3 Happenings: news + tournaments cards ----------------- */
body.home-modern #services {
    background: #eef1f8;
}

body.home-modern #services .icon-box {
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 26px 26px 14px;
    transition: transform var(--t), box-shadow var(--t);
    overflow: hidden;
}

body.home-modern #services .icon-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

body.home-modern #services .icon-box .icon {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--c-accent), var(--c-accent-2));
    margin-bottom: 14px;
}

body.home-modern #services .icon-box .icon i {
    color: #fff;
    font-size: 24px;
}

body.home-modern #services .icon-box h4 {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 20px;
    margin: 0 0 6px;
}

body.home-modern #services .icon-box h4 a {
    color: var(--c-ink);
}

/* news ticker list (#latestnews / #alltournaments populated by Index.js) */
body.home-modern .nt-example1-container {
    margin-top: 14px;
    border-top: 1px dashed var(--c-line);
    padding-top: 6px;
}

body.home-modern .nt-example1 li {
    border-bottom: 1px solid var(--c-line);
    padding: 10px 0;
    display: flex;            /* avatar + text as columns so wrapped text stays indented */
    align-items: flex-start;
    gap: 8px;
}
/* text column fills the row and wraps within its own column (not under the avatar) */
body.home-modern .nt-example1 li .news_r {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}

/* empty-state ("No Latest News" / "No Registered Tournaments") — centered */
body.home-modern .nt-example1 li.news-empty,
body.home-modern li.news-empty {
    list-style: none;
    text-align: center;
    padding: 16px 0;
    display: block;          /* override the flex row so the empty message stays centered */
}

body.home-modern li.news-empty font {
    color: var(--c-accent) !important;
    font-weight: 700;
    padding: 0 !important;
}

body.home-modern .news_l {
    width: 46px;
    flex: 0 0 46px;
    display: flex;
    align-items: center;
}

body.home-modern .news_l img {
    width: 100% !important;
}

body.home-modern .news_r {
    width: calc(100% - 56px);
    line-height: 1.5;
    font-size: 14.5px;
}

body.home-modern .news_r a {
    color: var(--c-text) !important;
}

body.home-modern .news_r a:hover {
    color: var(--c-accent) !important;
}

body.home-modern .news_r font[style*="blue"] {
    color: var(--c-accent) !important;
    font-weight: 700;
}

/* Truncate long news/tournament text to 2 lines with an ellipsis; the full text
   is shown on hover via a title tooltip (set in Index.js). Applied to the text
   container so line-clamp works reliably (not on the inline <a>). */
body.home-modern .nt-example1 .news_r {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}
body.home-modern .nt-example1 .news_r a {
    display: inline;
}

/* ---- 7.4 Achievers / Watch now -------------------------------- */
body.home-modern #featured-services {
    background: var(--c-navy);
    position: relative;
}

body.home-modern #featured-services:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(700px 360px at 90% 0%, rgba(230, 57, 80, .18), transparent 60%);
    pointer-events: none;
}

body.home-modern #featured-services .container {
    position: relative;
    z-index: 1;
}

body.home-modern #featured-services .section-title h2 {
    background: rgba(255, 255, 255, .10);
    color: #fff;
}

body.home-modern #featured-services .section-title h3 {
    color: #fff;
}

body.home-modern .products_s {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    margin: 6px;
    transition: transform var(--t);
}

body.home-modern .products_s:hover {
    transform: translateY(-5px);
}

body.home-modern .player_image img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}

body.home-modern .player_con_sec {
    padding: 16px 18px 20px;
}

body.home-modern .player_name a {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--c-ink);
    font-size: 18px;
}

body.home-modern .player_team.heading {
    color: var(--c-accent) !important;
    font-weight: 600;
    font-size: 13.5px;
}

/* owl nav buttons */
body.home-modern .owl-theme .owl-controls .owl-buttons div {
    background: var(--c-accent);
    opacity: 1;
    border-radius: 50px;
    padding: 4px 12px;
}

/* ---- 7.5 Watch-now video row (new, UI) ------------------------ */
.watch-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.watch-card {
    background: #fff;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--c-line);
    transition: transform var(--t), box-shadow var(--t);
}

.watch-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
}

.watch-thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #0c0f28;
    overflow: hidden;
}

.watch-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.watch-thumb .play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(230, 57, 80, .92);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.watch-card .meta {
    padding: 16px 18px;
}

.watch-card .meta h5 {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
}

.watch-card .meta span {
    color: var(--c-muted);
    font-size: 13px;
}

/* ---- 7.6 Partners --------------------------------------------- */
.partners-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.partners-strip .p-logo {
    height: 60px;
    width: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: .65;
    transition: filter var(--t), opacity var(--t), transform var(--t);
}

.partners-strip .p-logo:hover {
    filter: grayscale(0);
    opacity: 1;
    transform: scale(1.05);
}

/* ---- 7.7 Today's Birthday ------------------------------------- */
body.home-modern #birthdays {
    background: #eef1f8;
}

.bday-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.bday-card {
    position: relative;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--c-line);
    overflow: hidden;
    display: flex;
    gap: 16px;
    padding: 18px;
    align-items: center;
    transition: transform var(--t), box-shadow var(--t);
}

.bday-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}

.bday-card:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 6px;
    height: 100%;
    background: linear-gradient(var(--c-accent), var(--c-accent-2));
}

.bday-card .avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 4px 14px rgba(22, 26, 60, .15);
    flex: 0 0 auto;
}

.bday-card .b-info h5 {
    margin: 0 0 3px;
    font-size: 17px;
    font-weight: 700;
}

.bday-card .b-info span {
    color: var(--c-muted);
    font-size: 13px;
}

.bday-card .cake {
    margin-left: auto;
    color: var(--c-accent);
    font-size: 22px;
}

/* ---- 7.8 Newsletter / Stay updated ---------------------------- */
.newsletter-band {
    background: radial-gradient(800px 360px at 100% 0%, rgba(230, 57, 80, .25), transparent 60%),
                linear-gradient(135deg, var(--c-navy) 0%, #232a64 100%);
    border-radius: var(--radius-lg);
    padding: 48px;
    color: #fff;
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 30px;
    align-items: center;
}

.newsletter-band h3 {
    color: #fff;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    margin: 0 0 10px;
}

.newsletter-band p {
    color: rgba(255, 255, 255, .75);
    margin: 0;
}

.newsletter-form {
    display: flex;
    gap: 10px;
    background: #fff;
    border-radius: 50px;
    padding: 7px 7px 7px 20px;
    box-shadow: var(--shadow);
}

.newsletter-form input {
    flex: 1;
    border: 0;
    outline: 0;
    font-size: 15px;
    color: var(--c-ink);
    background: transparent;
}

.newsletter-form button {
    border: 0;
    border-radius: 50px;
    background: var(--c-accent);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 600;
    padding: 12px 26px;
    cursor: pointer;
    transition: background var(--t);
}

.newsletter-form button:hover {
    background: var(--c-accent-dk);
}

/* ---- 7.9 District chips (existing) ---------------------------- */
body.home-modern .disrict_boxes {
    width: auto;
    float: none;
}

body.home-modern #divDistricts,
body.home-modern .row .disrict_boxes {
    margin: 6px;
}

body.home-modern .disrict_boxes .icon-box {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    padding: 16px;
    transition: transform var(--t), border-color var(--t);
}

body.home-modern .disrict_boxes .icon-box:hover {
    transform: translateY(-3px);
    border-color: var(--c-accent);
}

body.home-modern .disrict_boxes .title {
    color: var(--c-ink);
    font-size: 15px;
    font-weight: 600;
}

/* ----------------------------------------------------------------
   8. Footer (shared)
   ---------------------------------------------------------------- */
#footer {
    background: var(--c-navy);
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
}

#footer .footer-top {
    background: transparent;
    padding: 56px 0 30px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

#footer .footer-top .footer-contact h3,
#footer .footer-top h4 {
    color: #fff;
    font-family: var(--font-head);
}

#footer .footer-top h4:after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: var(--c-accent);
    border-radius: 3px;
    margin-top: 8px;
}

#footer .footer-top .footer-links ul a {
    color: rgba(255, 255, 255, .72);
    transition: color var(--t), padding-left var(--t);
}

#footer .footer-top .footer-links ul a:hover {
    color: #fff;
    padding-left: 4px;
}

#footer .footer-top .footer-links ul i {
    color: var(--c-accent);
}

#footer .copyright {
    color: rgba(255, 255, 255, .6);
    font-size: 12.5px;
    line-height: 1.7;
}

#footer .copyright span {
    color: #fff;
}

#footer .credits,
#footer .credits a {
    color: rgba(255, 255, 255, .7);
}

#footer a {
    color: var(--c-accent-2);
}

/* =====================================================================
   9. INNER PAGES  —  whole-site modern theme for every public form page
   All inner pages share:  <section.breadcrumbs><h2>Title</h2>  +
                           <section.inner-page><div.container>…forms…
   Theming these shared classes redesigns all 40+ pages at once.
   ===================================================================== */

/* ---- 9.1 Page header banner (.breadcrumbs) -------------------- */
.breadcrumbs {
    background: radial-gradient(900px 400px at 90% -40%, rgba(230, 57, 80, .28), transparent 60%),
                linear-gradient(120deg, #0f1230 0%, var(--c-navy) 55%, #232a64 100%);
    min-height: 150px;
    padding: 92px 0 32px;          /* clears the fixed header */
    color: #fff;
    position: relative;
    overflow: hidden;
}

.breadcrumbs:after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -80px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(255, 255, 255, .06), transparent 70%);
    border-radius: 50%;
}

.breadcrumbs .container {
    position: relative;
    z-index: 1;
}

.breadcrumbs h2 {
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -.2px;
}

.breadcrumbs h2:before {
    content: "";
    display: inline-block;
    width: 34px;
    height: 4px;
    border-radius: 4px;
    background: var(--c-accent);
    vertical-align: middle;
    margin-right: 14px;
}

.breadcrumbs ol,
.breadcrumbs ol li + li::before,
.breadcrumbs a {
    color: rgba(255, 255, 255, .85);
}

.breadcrumbs a:hover {
    color: #fff;
}

/* keep any action buttons in the header readable on dark bg */
.breadcrumbs .btn,
.breadcrumbs .btn-primary,
.breadcrumbs .btn-success {
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
}

/* ---- 9.2 Content area + form card ----------------------------- */
.inner-page {
    background: var(--c-bg);
    padding: 46px 16px 60px;
}

/* wrap the page content in a clean, centered white card
   (covers pages whose direct child is .container OR a bare <form>) */
.inner-page > .container,
.inner-page > form {
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 34px clamp(18px, 3vw, 40px);
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

/* a second .container in the same section (e.g. hidden step 2) also gets a card */
.inner-page > .container + .container {
    margin-top: 26px;
}

/* containers nested inside the card must stay transparent (no double card) */
.inner-page > .container .container,
.inner-page > form .container {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}

.inner-page {
    position: relative;
    z-index: 2;
}

/* pull the card up to overlap the header banner — only when a banner precedes it */
.breadcrumbs + .inner-page {
    margin-top: -26px;
}

/* ---- 9.2b Legacy "kode" pages (About, Players, profiles, policies) ---- */
.kode-subheader {
    background: radial-gradient(900px 400px at 90% -40%, rgba(230, 57, 80, .28), transparent 60%),
                linear-gradient(120deg, #0f1230 0%, var(--c-navy) 55%, #232a64 100%);
    padding: 92px 0 34px !important;
    min-height: 150px;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.kode-subheader h1 {
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(24px, 3vw, 34px);
    margin: 0;
}

.kode-subheader h1:before {
    content: "";
    display: inline-block;
    width: 34px;
    height: 4px;
    border-radius: 4px;
    background: var(--c-accent);
    vertical-align: middle;
    margin-right: 14px;
}

.kode-breadcrumb {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}

.kode-breadcrumb li,
.kode-breadcrumb a {
    color: rgba(255, 255, 255, .85);
    font-size: 14px;
}

.kode-breadcrumb li + li:before {
    content: "/";
    margin-right: 8px;
    color: rgba(255, 255, 255, .55);
}

.kode-content {
    background: var(--c-bg);
    padding: 40px 0 56px;
}

.kode-editor {
    background: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 30px clamp(18px, 3vw, 38px);
}

.kode-editor h2 {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--c-ink);
    font-size: 22px;
    margin-top: 8px;
}

.kode-editor p {
    color: var(--c-text);
    line-height: 1.8;
}

/* NOTE: .member-div is intentionally NOT themed globally — some pages use it
   as a transparent wrapper for pill-shaped inputs (e.g. Tournament Entry). */

/* .divheader is used by several pages as a SOLID coloured header band with
   its own (white) text — so don't force a dark colour here or the band text
   becomes invisible. Let the page's own colour win. */
.divheader {
    font-family: var(--font-head);
    font-weight: 700;
}

/* District Members (Officials) — recolor legacy green band/border to blue */
.members_main {
    border-color: var(--c-navy) !important;
    border-left-color: var(--c-navy) !important;
}

.members_state_heading {
    background: var(--c-navy) !important;
    color: #fff !important;
}

/* centered page title used inside several pages (e.g. Enrollment List) */
.inner-page #divtournament label,
.inner-page #lblTournament {
    display: block;
    text-align: center;
    color: var(--c-ink) !important;
    font-family: var(--font-head);
    font-weight: 700 !important;
    font-size: 22px !important;
    margin-bottom: 26px !important;
}

/* neutralise dated inline "groove" boxes where possible */
[style*="groove"] {
    border-style: solid !important;
    border-color: var(--c-line) !important;
    border-radius: var(--radius) !important;
}

/* ---- 9.3 Form controls ---------------------------------------- */
.form-label {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 14px;
    color: var(--c-ink);
    margin-bottom: 5px;
}

.form-control,
.form-select,
.input-bai {
    border: 1.5px solid var(--c-line);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    font-size: 14.5px;
    color: var(--c-ink);
    background-color: #fff;
    transition: border-color var(--t), box-shadow var(--t);
    box-shadow: none;
}

.form-control:focus,
.form-select:focus,
.input-bai:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 4px rgba(230, 57, 80, .12);
    outline: 0;
}

.form-control::placeholder {
    color: #9aa1b4;
}

textarea.form-control {
    min-height: 110px;
}

/* ---- 9.4 Buttons ---------------------------------------------- */
.btn {
    border-radius: 50px;
    font-family: var(--font-head);
    font-weight: 600;
    padding: 9px 22px;
    transition: transform var(--t), box-shadow var(--t), background var(--t), filter var(--t);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn-primary,
.button-div {
    background: var(--c-navy) !important;
    border-color: var(--c-navy) !important;
    color: #fff !important;
}

.btn-primary:hover,
.button-div:hover {
    background: var(--c-navy-3) !important;
    border-color: var(--c-navy-3) !important;
}

/* success/submit actions use the blue theme so every button matches the
   navy palette (was green-teal — clashed with the new UI). */
.btn-success {
    background: var(--c-navy) !important;
    border-color: var(--c-navy) !important;
    color: #fff !important;
}

.btn-success:hover {
    background: var(--c-navy-3) !important;
    border-color: var(--c-navy-3) !important;
    color: #fff !important;
}

.btn-danger {
    background: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
}

.btn-warning {
    color: #fff !important;
}

.button-div {
    border-radius: 50px;
    padding: 9px 22px;
    border: 0;
}

/* token / next style button row (TO registration etc.) */
.input-div {
    margin-bottom: 16px;
}

/* ---- 9.5 Tables ----------------------------------------------- */
.table {
    border-radius: var(--radius);
    overflow: hidden;
}

.table thead th,
.table th {
    background: var(--c-navy);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 600;
    border-color: var(--c-navy-3);
    white-space: nowrap;
}

.table td {
    vertical-align: middle;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background: #f7f8fc;
}

/* jqGrid / generic data grids keep their own look but get rounding */
.ui-jqgrid,
.ui-jqgrid-view {
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* ---- 9.6 Modals (shared login + page dialogs) ----------------- */
.modal-content {
    border: 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.modal-header {
    background: var(--c-navy);
    color: #fff;
}

.modal-header .modal-title {
    color: #fff;
}

.modal-header .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}

/* section headings used inside pages */
.inner-page h3,
.inner-page h4,
.inner-page .section-heading {
    font-family: var(--font-head);
    color: var(--c-ink);
}

/* ---- 9.7 Plugins: native selects, select2 & DataTables -------- */

/* native <select> arrow + spacing (pages that don't use select2) */
select.form-control,
select.form-select,
.custom-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

/* normalise dropdowns that carry inline width (55% / 66%) so columns align */
.inner-page select[style*="width"],
.inner-page .select2,
.inner-page .custom-select {
    width: 100% !important;
}

/* select2 4.x — match the form-control look */
.select2-container {
    width: 100% !important;
}

.select2-container .select2-selection--single {
    height: 44px;
    border: 1.5px solid var(--c-line);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    padding: 0 6px;
    transition: border-color var(--t), box-shadow var(--t);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    flex: 1 1 auto;             /* fill the box so the clear "x" sits at the right */
    line-height: 42px;
    color: var(--c-ink);
    padding-left: 8px;
    padding-right: 26px;        /* keep text/clear clear of the dropdown arrow */
}

/* allowClear "x" — give it room so it isn't crammed against the value */
.select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 8px;
    margin-left: 6px;
    color: var(--c-muted);
    font-weight: 700;
    cursor: pointer;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px;
}

.select2-container--open .select2-selection--single,
.select2-container--focus .select2-selection--single {
    border-color: var(--c-accent) !important;
    box-shadow: 0 0 0 4px rgba(230, 57, 80, .12);
}

.select2-dropdown {
    border: 1px solid var(--c-line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--c-accent);
}

.select2-search--dropdown .select2-search__field {
    border: 1.5px solid var(--c-line);
    border-radius: 8px;
    padding: 8px 10px;
}

/* DataTables 1.10 — modern look matching the theme */
.dataTables_wrapper {
    padding-top: 6px;
    color: var(--c-text);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1.5px solid var(--c-line);
    border-radius: 8px;
    padding: 6px 10px;
    margin: 0 6px;
    outline: 0;
}

/* breathing room between the Show/Search controls and the grid */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: 16px;
}

.dataTables_wrapper .dataTable,
.dataTables_wrapper table.dataTable {
    margin-top: 8px !important;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(230, 57, 80, .12);
}

table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
    width: 100% !important;
}

/* keep wide data grids INSIDE the card: scroll horizontally instead of
   overflowing the page (e.g. Player Member ID list with many columns / "All"
   entries). The wrapper is a flex child of .row, so min-width:0 lets it shrink
   to the container and the overflow-x scrolls the table within it. */
.inner-page .dataTables_wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
}

.inner-page .row > .dataTables_wrapper {
    flex: 1 1 100%;
    min-width: 0;
}

table.dataTable thead th {
    background: var(--c-navy);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 600;
    border: 0 !important;
    padding: 14px 16px;
    white-space: nowrap;
}

table.dataTable thead th:first-child {
    border-top-left-radius: var(--radius-sm);
}

table.dataTable thead th:last-child {
    border-top-right-radius: var(--radius-sm);
}

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before {
    color: rgba(255, 255, 255, .6);
}

/* HEADER TEXT INVISIBLE: DataTables' own stylesheet puts a sort-arrow sprite on
   .sorting/.sorting_asc/.sorting_desc with a higher specificity than the rule
   above, so it repaints the cell over our navy background - the tile repeats
   across the cell and the white label disappears behind it. The :before/:after
   indicators styled above are all we need, so drop the bitmap entirely and pin
   the navy background and white text on every header cell. */
table.dataTable thead th,
table.dataTable thead td,
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_asc_disabled,
table.dataTable thead .sorting_desc_disabled {
    background-image: none !important;
    background-repeat: no-repeat;
    background-color: var(--c-navy);
    color: #fff;
}

table.dataTable tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-line);
    color: var(--c-text);
}

table.dataTable tbody tr:hover td {
    background: #f7f8fc;
}

.dataTables_wrapper .dataTables_info {
    color: var(--c-muted);
    padding-top: 14px;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    border: 1px solid var(--c-line) !important;
    margin: 0 3px;
    padding: 6px 12px !important;
    color: var(--c-ink) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
    color: #fff !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #faf2f3 !important;
    border-color: var(--c-accent) !important;
    color: var(--c-accent) !important;
}

/* jqGrid column headers — navy band with white label text.
   The label sits in a child div/span, so force white on descendants too,
   otherwise the column names are invisible on the navy header. */
.ui-jqgrid .ui-jqgrid-htable th {
    background: var(--c-navy) !important;
}

.ui-jqgrid .ui-jqgrid-htable th,
.ui-jqgrid .ui-jqgrid-htable th *,
.ui-jqgrid .ui-jqgrid-labels th,
.ui-jqgrid .ui-jqgrid-labels th .ui-th-div,
.ui-jqgrid .ui-jqgrid-sortable {
    color: #fff !important;
}

/* jqGrid caption bar: navy to match the column header. Drop the heavy default
   border and add a thin, subtle divider between the caption and the header row. */
.ui-jqgrid .ui-jqgrid-titlebar,
.ui-jqgrid .ui-jqgrid-caption {
    background: var(--c-navy) !important;
    color: #fff !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .22) !important;
}
/* drop the light default separators so no white line shows across the navy band */
.ui-jqgrid .ui-jqgrid-hdiv { border-bottom: 0 !important; }
.ui-jqgrid .ui-jqgrid-htable th {
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}

/* ----------------------------------------------------------------
   10. Responsive
   ---------------------------------------------------------------- */
@media (max-width: 991px) {
    body.home-modern #hero .container {
        grid-template-columns: 1fr;
        gap: 32px;
        text-align: center;
    }

    body.home-modern #hero h2 {
        margin-left: auto;
        margin-right: auto;
    }

    body.home-modern #hero .d-flex {
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
    }

    .newsletter-band {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 36px 24px;
    }

    .watch-grid,
    .bday-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #header .logo a span {
        font-size: 15px;
        max-width: 200px;
    }
}

@media (max-width: 767px) {
    section {
        padding: 52px 0;
    }

    body.home-modern #hero {
        min-height: auto;
        padding: 110px 0 60px;
    }

    body.home-modern .tournaments_sec.desk {
        display: none;
    }

    .watch-grid,
    .bday-grid,
    .partners-strip {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .partners-strip {
        display: flex;
        gap: 28px;
    }

    .hero-stats .stat b {
        font-size: 24px;
    }

    .newsletter-form {
        flex-direction: column;
        border-radius: var(--radius);
        padding: 12px;
    }

    .newsletter-form button {
        width: 100%;
    }
}

@media (max-width: 575px) {
    body.home-modern #hero h1 {
        font-size: 32px;
    }

    .hero-stats {
        gap: 20px;
    }
}

/* ---- inner-page responsive ------------------------------------ */
@media (max-width: 991px) {
    .breadcrumbs {
        padding: 88px 0 28px;
        min-height: 130px;
    }

    .breadcrumbs .d-flex {
        align-items: flex-start !important;
    }
}

@media (max-width: 767px) {
    .breadcrumbs {
        padding: 84px 0 26px;
    }

    .breadcrumbs h2:before {
        width: 26px;
        margin-right: 10px;
    }

    .inner-page {
        margin-top: -18px;
        padding: 30px 0 44px;
    }

    .inner-page > .container {
        padding: 22px 16px;
        border-radius: var(--radius);
    }

    /* drop empty spacer columns so form rows stack cleanly on phones */
    .inner-page .col-md-1:empty {
        display: none;
    }
}

/* =====================================================================
   12. FORM NORMALISATION (public inner pages) — final layer with
   !important so inline styles & per-page <style> blocks can't break the
   consistent look. Scoped to .inner-page so the homepage is unaffected.
   ===================================================================== */
.inner-page input.form-control,
.inner-page select.form-control,
.inner-page .form-select,
.inner-page input[type="text"]:not(.ui-search-toolbar input),
.inner-page input[type="email"],
.inner-page input[type="number"],
.inner-page input[type="tel"],
.inner-page input[type="password"] {
    height: 46px !important;
    width: 100% !important;
    border: 1.5px solid var(--c-line) !important;
    border-radius: var(--radius-sm) !important;
    background-color: #fff !important;
    color: var(--c-ink) !important;
    font-size: 14.5px !important;
    padding: 10px 14px !important;
    box-shadow: none !important;
}

.inner-page textarea.form-control,
.inner-page textarea {
    width: 100% !important;
    min-height: 96px !important;
    border: 1.5px solid var(--c-line) !important;
    border-radius: var(--radius-sm) !important;
    background-color: #fff !important;
    font-size: 14.5px !important;
    padding: 10px 14px !important;
    box-shadow: none !important;
}

.inner-page input.form-control:focus,
.inner-page select.form-control:focus,
.inner-page .form-select:focus,
.inner-page textarea:focus {
    border-color: var(--c-accent) !important;
    box-shadow: 0 0 0 4px rgba(230, 57, 80, .12) !important;
    outline: 0 !important;
}

.inner-page .form-control::placeholder {
    color: #9aa1b4 !important;
    opacity: 1;
}

.inner-page .form-label,
.inner-page label.form-label,
.inner-page .control-label {
    font-family: var(--font-head) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--c-ink) !important;
    margin-bottom: 6px !important;
}

/* uniform spacing between fields */
.inner-page .form-group,
.inner-page .row.g-2 > [class*="col-"] {
    margin-bottom: 4px;
}

/* keep DataTables / grid inputs out of the 46px rule */
.inner-page .dataTables_wrapper input,
.inner-page .dataTables_wrapper select {
    height: auto !important;
    width: auto !important;
}

/* jqGrid filter-toolbar fields: fill (and centre under) their column instead
   of collapsing to the default auto width, which left them tiny and the clear
   "x" floating away from the input. Also restore readable dark-on-white text -
   the ".ui-jqgrid-htable th *" white-text rule above (meant for the column
   label row) was matching these inputs too, turning typed search text white
   on their white background and making it invisible while typing. */
.inner-page .ui-search-toolbar input,
.inner-page .ui-search-toolbar select {
    height: auto !important;
    width: 96% !important;
    box-sizing: border-box !important;
    color: var(--c-ink) !important;
    background-color: #fff !important;
}

/* Same fix for grids inside Bootstrap modals (e.g. Tournament Entry's "Select Partner"
   player list): the modal is rendered outside the page's ".inner-page" section, so the rule
   above never reached its filter toolbar and the typed search keyword stayed white-on-white
   (invisible). Colour only - the modal keeps its own field sizing. */
.modal .ui-search-toolbar input,
.modal .ui-search-toolbar select {
    color: var(--c-ink) !important;
    background-color: #fff !important;
}

/* jqGrid pager: the global *{margin:0;padding:0;box-sizing:border-box} reset on
   these standalone pages crushes the pager's table cells, so the nav buttons,
   page box, rows-per-page select and the "View x of y" text overlapped / were
   cut off. Restore jqGrid's native box model and spacing. */
.ui-jqgrid .ui-pg-table,
.ui-jqgrid .ui-pg-table td,
.ui-jqgrid .ui-pager-control,
.ui-jqgrid .ui-jqgrid-pager td {
    box-sizing: content-box;
}

.ui-jqgrid .ui-pg-table td {
    padding: 0 3px;
}

.ui-jqgrid .ui-pg-input {
    width: 30px !important;
    height: auto !important;
    box-sizing: border-box;
    margin: 0 4px;
}

.ui-jqgrid .ui-pg-selbox {
    width: auto !important;
    height: auto !important;
    box-sizing: border-box;
    padding: 2px;
    margin: 0 4px;
}

.ui-jqgrid .ui-separator {
    margin: 0 4px;
}

/* give the pager bar a little more height so the page box / rows-per-page
   select / nav buttons aren't vertically clipped */
.ui-jqgrid .ui-jqgrid-pager {
    height: auto !important;
    min-height: 40px;
}

.ui-jqgrid .ui-pg-table {
    padding: 5px 0;
}

.ui-jqgrid .ui-jqgrid-pager td,
.ui-jqgrid .ui-pg-table td {
    vertical-align: middle;
}
@media (width: 1280px) and (height: 720px) {
    .navbar .dropdown ul {
        background: #fff;
        border-radius: var(--radius-sm);
        border: 1px solid var(--c-line);
        box-shadow: var(--shadow);
        padding: 8px 0;
        margin: 0;
        /* align the panel so its items line up under the parent menu label
       (legacy style.css offset it 28px to the right -> looked misaligned).
       Nested fly-outs keep their own left (higher-specificity rule). */
        left:-54px;
        z-index: 1200;
        /* do NOT set overflow:hidden — it clips nested fly-out submenus */
    }
}

/* =====================================================================
   13. HOMEPAGE MOBILE FIXES (scoped to body.home-modern) — additive,
   UI-only. Corrects the hero clipping/overlap on phones, evens up the
   "Our Achievers" carousel cards, and removes dead whitespace between
   the hero and the section below it. Higher specificity + !important so
   the legacy IndexPage/style.css mobile rules can't override these.
   ===================================================================== */
@media (max-width: 767px) {
    /* HERO: legacy style.css forces `#hero{height:30vh!important}` on phones,
       which crushes the (tall) kicker + heading + sub-heading + 3 buttons into
       a 30vh box so they overflow and overlap the next section. Let the hero
       grow to fit its content instead. The modern rule already centres &
       single-columns the layout; we only need to free the height. */
    body.home-modern #hero {
        height: auto !important;
        min-height: auto !important;
        padding: 96px 0 40px !important;
        display: block !important;          /* was flex+align-center -> caused vertical overflow */
    }

    body.home-modern #hero .container {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* HERO MEDIA: keep the image tidy & uncropped under the copy on phones */
    body.home-modern .hero-media {
        margin-top: 8px;
    }

    body.home-modern .hero-media img {
        max-height: 220px;
        object-fit: cover;
    }

    /* HOME -> PLAYERS spacing: the mobile tournaments widget sits right after
       the hero; trim its top gap and the following section's top padding so
       there's no large empty band between them. */
    body.home-modern .tournaments_sec.mob {
        margin: 0 !important;
    }

    body.home-modern #about,
    body.home-modern #featured-services {
        padding-top: 36px !important;
    }

    /* OUR ACHIEVERS: make every carousel card the same height and aligned,
       so short/long player names no longer stagger the row. min-width:0 — see
       the matching (all-widths) rule below for why this is load-bearing, not
       decorative: without it an unbreakable text run forces the card wider
       than its slot and it overlaps the next one. */
    body.home-modern #featured-services .owl-carousel .owl-item {
        display: flex !important;
        min-width: 0;
    }

    /* See the matching (all-widths) rule below for why ".item" — Owl's own
       wrapper div between .owl-item and .products_s — needs this. */
    body.home-modern #featured-services .owl-item .item {
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
    }

    body.home-modern #featured-services .owl-item .products_s {
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    body.home-modern #featured-services .player_con_sec {
        flex: 1 1 auto;
        min-width: 0;
        overflow-wrap: break-word;
        word-break: break-word;
        text-align: center;
    }
}

/* OUR ACHIEVERS (all widths): equal-height cards keep the carousel row aligned.
   Height only — the .owl-wrapper itself stays display:block (Owl Carousel v1's
   own sliding mechanism positions .owl-item children with inline left/width
   styles that assume block/float layout; turning the wrapper into a flex
   container fights that and made the cards overlap). Each card's actual height
   is instead equalised by JS (see EqualiseAchieverCardHeights in Index.js). */
body.home-modern #featured-services .owl-carousel .owl-item {
    display: flex;
    /* Flex items default to min-width:auto, which refuses to shrink below the
       intrinsic width of their content — for text, that's the width of the
       longest UNBREAKABLE run of characters, regardless of word-wrap on a
       descendant. A bio with no spaces (e.g. garbage/test data) was pushing
       this item — and with it Owl Carousel's own fixed-width item slots —
       wider than its assigned share, shoving the next card over so they
       visually overlapped. min-width:0 overrides that default so the item
       actually respects the width Owl gave it and clips/wraps instead. */
    min-width: 0;
}

/* Owl Carousel v1 wraps every card in its own ".item" div BETWEEN ".owl-item"
   (Owl's fixed-width slot) and ".products_s" (this card). ".item" has no width
   or flex-grow of its own, so as a flex child of .owl-item it shrinks to fit
   ITS OWN content by default (flex-grow:0) — a card with a long bio happened
   to shrink-fit close to the full slot width, but a short/empty card shrank
   to barely 200px, leaving the cards different widths with no visible gap
   between them. flex:1 1 auto makes it fill (and min-width:0 lets it actually
   shrink back down when needed) the width Owl already assigned the slot. */
body.home-modern #featured-services .owl-item .item {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

body.home-modern #featured-services .owl-item .products_s {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

body.home-modern #featured-services .owl-item .player_con_sec {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ---- 14. EMPTY NAV ITEM — the "Affiliated Districts" <li class="dropdown">
   in _TopBar has its contents commented out, so it renders as a blank menu
   item. It showed as a large empty gap between "Home" and "Players" (most
   obvious in the mobile slide-in menu). Hide any nav dropdown that has no
   link inside. Pure display fix — the real menu items are untouched. ---- */
#navbar ul > li.dropdown:not(:has(> a)),
.navbar-mobile ul > li.dropdown:not(:has(> a)) {
    display: none !important;
}

/* =====================================================================
   15. MODERN DATA TABLES (public inner pages) — give every DataTable a
   clean card look: rounded frame, navy gradient header, zebra rows and a
   soft hover. Scoped to .inner-page; .rk-page (ranking) keeps its own.
   ===================================================================== */
.inner-page table.dataTable {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--c-line);
    font-family: var(--font-body);
}
/* re-applied with !important so it survives the sprite reset above, which has to
   use !important to beat DataTables' own .sorting background-image */
.inner-page table.dataTable thead th,
.inner-page table.dataTable thead th.sorting,
.inner-page table.dataTable thead th.sorting_asc,
.inner-page table.dataTable thead th.sorting_desc {
    background-image: linear-gradient(180deg, #1e2350 0%, var(--c-navy) 100%) !important;
    color: #fff !important;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: .4px;
    text-transform: uppercase;
    padding: 14px 16px;
    border: 0;
}
.inner-page table.dataTable tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-line);
    font-size: 14px;
    color: var(--c-ink);
    vertical-align: middle;
}
.inner-page table.dataTable tbody tr:nth-child(even) td { background: #f7f8fc; }
.inner-page table.dataTable tbody tr:hover td { background: #eef2fb; }
.inner-page table.dataTable tbody tr:last-child td { border-bottom: 0; }

/* paging / length / filter controls */
.inner-page .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    border: 1px solid var(--c-line) !important;
    padding: 5px 12px !important;
    margin: 0 2px;
    color: var(--c-navy) !important;
    background: #fff !important;
}
.inner-page .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.inner-page .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--c-navy) !important;
    color: #fff !important;
    border-color: var(--c-navy) !important;
}
.inner-page .dataTables_wrapper .dataTables_filter input,
.inner-page .dataTables_wrapper .dataTables_length select {
    border: 1.5px solid var(--c-line) !important;
    border-radius: var(--radius-sm) !important;
    padding: 6px 12px !important;
}