/* ==========================================================================
   KBSA Modern Design System — PUBLIC WEBSITE THEME
   --------------------------------------------------------------------------
   Visual-only override layer loaded AFTER the BizLand template CSS.
   It restyles existing markup — no HTML, JS, or workflow changes required.
   Brand palette preserved: KBSA Red #d9231a, Accent Blue #3b8af2.
   Documentation: /DESIGN-SYSTEM.md
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Brand (unchanged) */
    --kbsa-red: #d9231a;
    --kbsa-red-dark: #b51d15;
    --kbsa-red-soft: rgba(217, 35, 26, .08);
    --kbsa-blue: #3b8af2;
    --kbsa-blue-dark: #2670d6;
    --kbsa-blue-soft: rgba(59, 138, 242, .10);

    /* Neutrals */
    --kbsa-ink: #1f2d3d;
    --kbsa-text: #45556a;
    --kbsa-muted: #8a97a8;
    --kbsa-line: #e6ebf1;
    --kbsa-bg: #f7f9fc;
    --kbsa-surface: #ffffff;

    /* Depth */
    --kbsa-shadow-xs: 0 1px 3px rgba(31, 45, 61, .07);
    --kbsa-shadow-sm: 0 2px 8px rgba(31, 45, 61, .08);
    --kbsa-shadow-md: 0 8px 24px rgba(31, 45, 61, .10);
    --kbsa-shadow-lg: 0 16px 48px rgba(31, 45, 61, .14);
    --kbsa-ring-red: 0 0 0 4px rgba(217, 35, 26, .12);
    --kbsa-ring-blue: 0 0 0 4px rgba(59, 138, 242, .15);

    /* Shape */
    --kbsa-radius-sm: 8px;
    --kbsa-radius: 12px;
    --kbsa-radius-lg: 16px;
    --kbsa-radius-pill: 50rem;

    /* Motion */
    --kbsa-ease: cubic-bezier(.4, 0, .2, 1);
    --kbsa-fast: .18s;
    --kbsa-base: .25s;
}

/* --------------------------------------------------------------------------
   2. GLOBAL TYPOGRAPHY & BASE
   -------------------------------------------------------------------------- */
body {
    color: var(--kbsa-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--kbsa-ink);
    letter-spacing: -.01em;
}

::selection {
    background: var(--kbsa-red);
    color: #fff;
}

/* Slim, modern scrollbar (WebKit) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #c8d2dd;
    border-radius: 10px;
    border: 2px solid transparent;
    background-clip: content-box;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #a9b6c5;
        border: 2px solid transparent;
        background-clip: content-box;
    }

/* Visible keyboard focus everywhere (accessibility) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--kbsa-blue);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Respect users who prefer less motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   3. TOP BAR & HEADER / NAVIGATION
   -------------------------------------------------------------------------- */
/* Topbar keeps its original brand red background (#d9231a from the template). */
#topbar {
    letter-spacing: .2px;
}

    #topbar .contact-info a {
        transition: opacity var(--kbsa-fast) var(--kbsa-ease), transform var(--kbsa-fast) var(--kbsa-ease);
        display: inline-block;
    }

        #topbar .contact-info a:hover {
            opacity: .85;
            transform: translateY(-1px);
        }

/* NOTE: no backdrop-filter here — it creates a stacking context on the
   (statically positioned) header, which traps the nav dropdowns underneath
   the page sections. position:relative activates the template's z-index:997
   so dropdowns always paint above the content. */
#header {
    position: relative;
    z-index: 997;
    background: #fff;
    box-shadow: var(--kbsa-shadow-xs);
    transition: box-shadow var(--kbsa-base) var(--kbsa-ease), background var(--kbsa-base) var(--kbsa-ease);
}

    #header.header-scrolled,
    #header.fixed-top {
        box-shadow: var(--kbsa-shadow-sm);
    }

    #header .logo img {
        transition: transform var(--kbsa-base) var(--kbsa-ease);
    }

    #header .logo:hover img {
        transform: scale(1.04);
    }

/* Nav links — animated underline */
.navbar a,
.navbar a:focus {
    font-weight: 600;
    letter-spacing: .2px;
    transition: color var(--kbsa-fast) var(--kbsa-ease);
}

/* Icon + pill navigation (KBSA signature: soft red pill, red icon).
   The template's animated underline (a:before) is replaced by the pill —
   keep it hidden so we never show two indicators at once. */
.navbar > ul > li {
    padding: 10px 0 10px 14px;
}

.navbar > ul > li > a {
    padding: 9px 14px;
    border-radius: 10px;
    transition: background var(--kbsa-fast) var(--kbsa-ease), color var(--kbsa-fast) var(--kbsa-ease);
}

    .navbar > ul > li > a:before {
        display: none;
    }

    .navbar > ul > li > a:hover,
    .navbar > ul > li:hover > a,
    .navbar > ul > li > a.active {
        background: var(--kbsa-red-soft);
        color: var(--kbsa-red);
    }

.navbar .nav-ico {
    font-size: 15px;
    line-height: 0;
    margin-right: 7px;
    margin-left: 0;
    color: inherit;
}

/* Dropdown menus — soft rounded card.
   NOTE: open/close is driven entirely by the template (top/opacity/visibility
   transition on .dropdown:hover > ul). Do NOT add margins or overflow here —
   a margin creates a hover gap that closes the menu, and overflow:hidden on
   the li clips the nested year submenus. */
.navbar .dropdown ul {
    border-radius: var(--kbsa-radius);
    border: 1px solid var(--kbsa-line);
    box-shadow: var(--kbsa-shadow-md);
    padding: 8px;
}

    .navbar .dropdown ul a {
        border-radius: var(--kbsa-radius-sm);
        padding: 9px 14px;
        font-weight: 500;
        transition: background var(--kbsa-fast) var(--kbsa-ease), color var(--kbsa-fast) var(--kbsa-ease), padding-left var(--kbsa-fast) var(--kbsa-ease);
    }

        .navbar .dropdown ul a:hover,
        .navbar .dropdown ul .active:hover,
        .navbar .dropdown ul li:hover > a {
            background: var(--kbsa-red-soft);
            color: var(--kbsa-red);
            padding-left: 18px;
        }

/* Mobile nav */
.navbar-mobile {
    background: rgba(20, 28, 38, .92);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

    .navbar-mobile > ul {
        border-radius: var(--kbsa-radius-lg);
        box-shadow: var(--kbsa-shadow-lg);
        padding: 14px;
    }

    .navbar-mobile a {
        border-radius: var(--kbsa-radius-sm);
    }

        .navbar-mobile a:hover {
            background: var(--kbsa-red-soft);
        }

/* --------------------------------------------------------------------------
   4. BREADCRUMBS / PAGE HEADERS
   -------------------------------------------------------------------------- */
/* Brand-red hero band (matches the #d9231a topbar) with a unique layered
   treatment: outlined circle pattern + diagonal light sweep + soft glow,
   and a short white underline bar under the page title. Slim profile. */
.breadcrumbs {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, #a8140d 0%, #c91e15 45%, #d9231a 75%, #e8392f 100%);
    background-color: #d9231a;
    border-bottom: none;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .14);
    padding: 26px 0;
}

    /* Badminton signature: faint court-line grid + a stylized shuttlecock
       watermark on the right (inline SVG, no extra requests). */
    .breadcrumbs::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.18' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='28' cy='92' r='11'/%3E%3Cpath d='M37 83 L45 75'/%3E%3Cpath d='M45 75 L80 18 M45 75 L95 32 M45 75 L107 55'/%3E%3Cpath d='M80 18 Q108 32 107 55'/%3E%3C/g%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.10' stroke-width='3' stroke-linecap='round'%3E%3Ccircle cx='28' cy='92' r='11'/%3E%3Cpath d='M37 83 L45 75'/%3E%3Cpath d='M45 75 L80 18 M45 75 L95 32 M45 75 L107 55'/%3E%3Cpath d='M80 18 Q108 32 107 55'/%3E%3C/g%3E%3C/svg%3E"),
            linear-gradient(rgba(255, 255, 255, .05) 1.5px, transparent 1.5px),
            linear-gradient(90deg, rgba(255, 255, 255, .05) 1.5px, transparent 1.5px);
        background-size: 130px 130px, 80px 80px, 100% 34px, 200px 100%;
        background-position: right 6% bottom -18px, right 22% top -8px, 0 0, 0 0;
        background-repeat: no-repeat, no-repeat, repeat, repeat;
    }

    .breadcrumbs::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .07) 42%, rgba(255, 255, 255, .07) 58%, transparent 58%),
            radial-gradient(620px 220px at 88% 0%, rgba(255, 255, 255, .14) 0%, transparent 60%);
    }

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

    .breadcrumbs h2 {
        position: relative;
        font-weight: 700;
        font-size: 26px;
        letter-spacing: .4px;
        color: #fff;
        margin: 0;
        padding-bottom: 10px;
        text-shadow: 0 1px 4px rgba(0, 0, 0, .18);
    }

        /* short rounded underline bar — the section's signature accent */
        .breadcrumbs h2::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 46px;
            height: 3.5px;
            border-radius: 4px;
            background: #fff;
            opacity: .9;
        }

    .breadcrumbs ol {
        font-size: 13.5px;
        margin: 0;
    }

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

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

        .breadcrumbs ol a {
            color: rgba(255, 255, 255, .65);
            transition: color var(--kbsa-fast) var(--kbsa-ease);
        }

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

.inner-page {
    background: var(--kbsa-bg);
    min-height: 50vh;
}

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--kbsa-radius-sm);
    font-weight: 600;
    letter-spacing: .2px;
    transition: transform var(--kbsa-fast) var(--kbsa-ease), box-shadow var(--kbsa-fast) var(--kbsa-ease), background var(--kbsa-fast) var(--kbsa-ease), border-color var(--kbsa-fast) var(--kbsa-ease), color var(--kbsa-fast) var(--kbsa-ease);
}

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

    .btn:active {
        transform: translateY(0);
    }

.btn-danger {
    background: linear-gradient(135deg, #e8392f 0%, var(--kbsa-red) 60%, var(--kbsa-red-dark) 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(217, 35, 26, .30);
}

    .btn-danger:hover,
    .btn-danger:focus {
        background: linear-gradient(135deg, #ee493f 0%, #e02d23 60%, var(--kbsa-red) 100%);
        border-color: transparent;
        box-shadow: 0 7px 20px rgba(217, 35, 26, .38);
    }

.btn-success {
    box-shadow: 0 4px 14px rgba(24, 210, 110, .25);
    border-color: transparent;
}

.btn-primary {
    background: linear-gradient(135deg, #4d97f5 0%, var(--kbsa-blue) 60%, var(--kbsa-blue-dark) 100%);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(59, 138, 242, .30);
}

    .btn-primary:hover,
    .btn-primary:focus {
        border-color: transparent;
        box-shadow: 0 7px 20px rgba(59, 138, 242, .38);
    }

.btn-lg,
.btn-large {
    border-radius: var(--kbsa-radius);
    padding: 12px 32px;
}

/* --------------------------------------------------------------------------
   6. FORMS
   -------------------------------------------------------------------------- */
.form-label,
label.form-label {
    font-weight: 600;
    font-size: 13.5px;
    color: var(--kbsa-ink);
    margin-bottom: 6px;
}

.form-control,
.form-select {
    border: 1.5px solid #d6dee8;
    border-radius: var(--kbsa-radius-sm);
    color: var(--kbsa-ink);
    background-color: #fff;
    padding: 10px 14px;
    transition: border-color var(--kbsa-fast) var(--kbsa-ease), box-shadow var(--kbsa-fast) var(--kbsa-ease);
}

    .form-control::placeholder {
        color: #a8b3c2;
    }

    .form-control:hover,
    .form-select:hover {
        border-color: #b9c6d4;
    }

    .form-control:focus,
    .form-select:focus {
        border-color: var(--kbsa-blue);
        box-shadow: var(--kbsa-ring-blue);
        outline: none;
    }

/* Input groups (e.g. date of birth picker) */
.input-group .input-group-addon,
.input-group-text {
    background: var(--kbsa-bg);
    border: 1.5px solid #d6dee8;
    border-right: none;
    border-radius: var(--kbsa-radius-sm) 0 0 var(--kbsa-radius-sm);
    color: var(--kbsa-muted);
}

.input-group .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Checkboxes / radios */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--kbsa-red);
    width: 16px;
    height: 16px;
}

/* --------------------------------------------------------------------------
   7. TABLES & DATA PRESENTATION
   -------------------------------------------------------------------------- */
.table {
    --bs-table-hover-bg: #f3f8fe;
    background: var(--kbsa-surface);
    border-color: var(--kbsa-line);
    box-shadow: var(--kbsa-shadow-sm);
    border-radius: var(--kbsa-radius);
    overflow: hidden;
}

    .table thead th,
    .table > thead > tr > th {
        background: #f3f6fa;
        color: #5b6b7b;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .6px;
        border-bottom: 1px solid var(--kbsa-line);
        padding: 12px 14px;
        white-space: nowrap;
    }

    .table tbody td,
    .table > tbody > tr > td {
        padding: 12px 14px;
        border-color: #eef2f7;
        vertical-align: middle;
    }

    .table tbody tr {
        transition: background var(--kbsa-fast) var(--kbsa-ease);
    }

        .table tbody tr:hover {
            background: #f3f8fe;
        }

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

/* Rounded corners for bordered tables */
.table thead tr:first-child th:first-child {
    border-top-left-radius: var(--kbsa-radius);
}

.table thead tr:first-child th:last-child {
    border-top-right-radius: var(--kbsa-radius);
}

/* --------------------------------------------------------------------------
   7b. DATATABLES (player lists, rankings, results, downloads ...)
   --------------------------------------------------------------------------
   Restyles the stock jquery.dataTables 1.10 chrome into a clean card:
   "Show N entries" selector, rounded search box with magnifier icon,
   uppercase sortable headers, hover rows, modern pagination.
   Pure CSS — sorting/searching/paging behaviour is untouched.
   -------------------------------------------------------------------------- */
.dataTables_wrapper {
    background: var(--kbsa-surface);
    border: 1px solid var(--kbsa-line);
    border-radius: var(--kbsa-radius-lg);
    box-shadow: var(--kbsa-shadow-sm);
    padding: 18px 18px 14px;
    margin: 10px 0 26px;
    width: 100%;
}

    /* "Show N entries" */
    .dataTables_wrapper .dataTables_length {
        color: var(--kbsa-muted);
        font-size: 13.5px;
        padding-bottom: 12px;
    }

        .dataTables_wrapper .dataTables_length select {
            border: 1.5px solid #d6dee8;
            border-radius: var(--kbsa-radius-sm);
            padding: 6px 26px 6px 10px;
            margin: 0 6px;
            color: var(--kbsa-ink);
            background-color: #fff;
            transition: border-color var(--kbsa-fast) var(--kbsa-ease), box-shadow var(--kbsa-fast) var(--kbsa-ease);
        }

            .dataTables_wrapper .dataTables_length select:focus {
                border-color: var(--kbsa-blue);
                box-shadow: var(--kbsa-ring-blue);
                outline: none;
            }

    /* Search box — rounded pill with magnifier icon */
    .dataTables_wrapper .dataTables_filter {
        color: transparent; /* hides the literal "Search:" text, input stays */
        font-size: 0;
        padding-bottom: 12px;
    }

        .dataTables_wrapper .dataTables_filter input {
            font-size: 14px;
            color: var(--kbsa-ink);
            border: 1.5px solid #d6dee8;
            border-radius: 30px;
            padding: 9px 18px 9px 38px;
            margin-left: 0;
            min-width: 260px;
            background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238a97a8'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 14px center/15px;
            transition: border-color var(--kbsa-fast) var(--kbsa-ease), box-shadow var(--kbsa-fast) var(--kbsa-ease);
        }

            .dataTables_wrapper .dataTables_filter input:focus {
                border-color: var(--kbsa-blue);
                box-shadow: var(--kbsa-ring-blue);
                outline: none;
            }

/* Table core */
table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
    border: none !important;
    margin: 0 !important;
}

    /* Headers — uppercase slate with custom sort arrows */
    table.dataTable thead th,
    table.dataTable thead td {
        background: #f3f6fa;
        color: #5b6b7b;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .6px;
        padding: 13px 26px 13px 14px;
        border-bottom: 1px solid var(--kbsa-line) !important;
        border-top: none;
    }

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

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

    /* Replace stock sort GIF arrows with subtle CSS glyphs */
    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;
        position: relative;
        cursor: pointer;
    }

        table.dataTable thead .sorting::after,
        table.dataTable thead .sorting_asc::after,
        table.dataTable thead .sorting_desc::after {
            content: "▲▼";
            font-size: 8px;
            letter-spacing: 1px;
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            color: #b6c2d0;
        }

        table.dataTable thead .sorting_asc::after {
            content: "▲";
            color: var(--kbsa-blue);
            font-size: 9px;
        }

        table.dataTable thead .sorting_desc::after {
            content: "▼";
            color: var(--kbsa-blue);
            font-size: 9px;
        }

    /* Rows */
    table.dataTable tbody td {
        padding: 12px 14px;
        color: var(--kbsa-text);
        border-bottom: 1px solid #eef2f7;
        vertical-align: middle;
    }

    table.dataTable tbody tr {
        background: #fff;
        transition: background var(--kbsa-fast) var(--kbsa-ease);
    }

    table.dataTable.stripe tbody tr.odd,
    table.dataTable.display tbody tr.odd {
        background: #fafcfe;
    }

    table.dataTable.display tbody tr:hover,
    table.dataTable.hover tbody tr:hover,
    table.dataTable tbody tr:hover {
        background: #f3f8fe !important;
    }

    table.dataTable.display tbody tr:hover > .sorting_1,
    table.dataTable.display tbody tr.odd > .sorting_1,
    table.dataTable.display tbody tr.even > .sorting_1 {
        background: transparent;
    }

    /* Responsive plugin's +/- control: brand colored */
    table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child::before,
    table.dataTable.dtr-inline.collapsed > tbody > tr > th:first-child::before {
        background-color: var(--kbsa-blue) !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: 50% !important;
        top: 50% !important;
        transform: translateY(-50%);
    }

    table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child::before,
    table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child::before {
        background-color: var(--kbsa-red) !important;
    }

/* Footer chrome: info text + pagination */
.dataTables_wrapper .dataTables_info {
    color: var(--kbsa-muted);
    font-size: 13px;
    padding-top: 14px;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: 10px;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        border: 1px solid var(--kbsa-line) !important;
        border-radius: var(--kbsa-radius-sm) !important;
        background: #fff !important;
        color: var(--kbsa-text) !important;
        margin: 0 3px;
        padding: 6px 12px;
        transition: all var(--kbsa-fast) var(--kbsa-ease);
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background: var(--kbsa-red-soft) !important;
            border-color: rgba(217, 35, 26, .30) !important;
            color: var(--kbsa-red) !important;
        }

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

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
            background: #fff !important;
            border-color: var(--kbsa-line) !important;
            color: #c2ccd8 !important;
        }

.dataTables_wrapper .dataTables_processing {
    border-radius: var(--kbsa-radius);
    box-shadow: var(--kbsa-shadow-md);
    border: 1px solid var(--kbsa-line);
}

@media (max-width: 767px) {
    .dataTables_wrapper {
        padding: 12px 10px 10px;
    }

        .dataTables_wrapper .dataTables_filter input {
            min-width: 0;
            width: 100%;
        }

        .dataTables_wrapper .dataTables_length,
        .dataTables_wrapper .dataTables_filter {
            float: none;
            text-align: left;
        }
}

/* Player-ranking page.
   The .tbl-header/.tbl-content wrappers must stay INVISIBLE — the
   .dataTables_wrapper inside already provides the card, so giving these
   a border creates a double box. */
.tbl-header,
.tbl-content {
    border: none !important;
    background: transparent !important;
    border-radius: 0;
    box-shadow: none !important;
}

    .tbl-header th,
    .tableranklist th {
        color: #5b6b7b;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .5px;
        padding: 10px 8px;
    }

/* Ranking header bars ("FINAL RANKING: <year>" / event name) */
.ranking-year {
    background: linear-gradient(120deg, #a8140d 0%, #d9231a 60%, #e8392f 100%) !important;
    border-radius: var(--kbsa-radius-sm) var(--kbsa-radius-sm) 0 0;
    height: auto !important;
    padding: 10px 14px !important;
    letter-spacing: .5px;
    text-transform: uppercase;
    box-shadow: var(--kbsa-shadow-xs);
}

.Event-name {
    background: #fdecea !important;
    color: var(--kbsa-red-dark) !important;
    font-weight: 700 !important;
    padding: 9px 14px !important;
    letter-spacing: .3px;
    border-bottom: 1px solid #f5d4d1;
}

/* The year / event selector dropdowns beside those bars */
.ranking-year select,
.Event-name select,
.tbl-header select {
    border: 1.5px solid #e3b7b3;
    border-radius: var(--kbsa-radius-sm);
    padding: 5px 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--kbsa-ink);
    background: #fff;
    outline: none;
    transition: border-color var(--kbsa-fast) var(--kbsa-ease), box-shadow var(--kbsa-fast) var(--kbsa-ease);
}

    .ranking-year select:focus,
    .Event-name select:focus,
    .tbl-header select:focus {
        border-color: var(--kbsa-red);
        box-shadow: var(--kbsa-ring-red);
    }

/* --------------------------------------------------------------------------
   8. CARDS & CONTENT BLOCKS
   -------------------------------------------------------------------------- */
.card {
    border: 1px solid var(--kbsa-line);
    border-radius: var(--kbsa-radius);
    box-shadow: var(--kbsa-shadow-sm);
    transition: box-shadow var(--kbsa-base) var(--kbsa-ease), transform var(--kbsa-base) var(--kbsa-ease);
}

    .card:hover {
        box-shadow: var(--kbsa-shadow-md);
        transform: translateY(-2px);
    }

.card-header {
    background: var(--kbsa-surface);
    border-bottom: 1px solid var(--kbsa-line);
    font-weight: 700;
}

/* Template content blocks frequently used on inner pages */
.icon-box,
.member,
.testimonial-item {
    border-radius: var(--kbsa-radius) !important;
    box-shadow: var(--kbsa-shadow-sm) !important;
    border: 1px solid var(--kbsa-line);
    transition: transform var(--kbsa-base) var(--kbsa-ease), box-shadow var(--kbsa-base) var(--kbsa-ease) !important;
}

    .icon-box:hover,
    .member:hover {
        transform: translateY(-4px);
        box-shadow: var(--kbsa-shadow-md) !important;
    }

/* --------------------------------------------------------------------------
   8b. FORM SECTION CARDS (KTTA-style grouped forms)
   --------------------------------------------------------------------------
   Usage:
     <div class="kb-form-wrap">
       <div class="kb-section">
         <div class="kb-section-head">
           <span class="kb-section-icon"><i class="fa fa-user"></i></span>
           <span class="kb-section-title">
             <span class="kb-section-name">Personal Information</span>
             <span class="kb-section-sub">Basic details about the player</span>
           </span>
         </div>
         <div class="kb-section-body"> ...fields... </div>
       </div>
     </div>
   Icon tints: add .is-blue (default) / .is-green / .is-red / .is-orange.
   Labels: <label class="kb-label">First Name<font color="red">*</font></label>
   -------------------------------------------------------------------------- */
.kb-form-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 0 24px;
}

.kb-section {
    background: var(--kbsa-surface);
    border: 1px solid var(--kbsa-line);
    border-radius: var(--kbsa-radius-lg);
    box-shadow: var(--kbsa-shadow-sm);
    margin-bottom: 26px;
    overflow: hidden;
    transition: box-shadow var(--kbsa-base) var(--kbsa-ease);
}

    .kb-section:hover {
        box-shadow: var(--kbsa-shadow-md);
    }

.kb-section-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 26px;
    background: #f7fafc;
    border-bottom: 1px solid var(--kbsa-line);
}

.kb-section-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--kbsa-surface);
    border: 1px solid var(--kbsa-line);
    box-shadow: var(--kbsa-shadow-xs);
    font-size: 17px;
    color: var(--kbsa-blue);
}

    .kb-section-icon.is-green {
        color: #18d26e;
    }

    .kb-section-icon.is-red {
        color: var(--kbsa-red);
    }

    .kb-section-icon.is-orange {
        color: #f8ac59;
    }

    .kb-section-icon .fa,
    .kb-section-icon .bi {
        color: inherit;
        font-size: inherit;
    }

.kb-section-title {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.35;
}

.kb-section-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--kbsa-ink);
}

.kb-section-sub {
    font-size: 12.5px;
    color: var(--kbsa-muted);
}

.kb-section-body {
    padding: 26px;
}

/* Uppercase micro-labels (as in the reference design) */
.kb-label,
label.kb-label {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
    color: #3c4a5d;
    margin-bottom: 7px;
}

    .kb-label font[color="red"],
    .kb-label .req {
        color: var(--kbsa-red);
        margin-left: 2px;
    }

@media (max-width: 767px) {
    .kb-section-body {
        padding: 18px;
    }

    .kb-section-head {
        padding: 14px 18px;
    }
}

/* --------------------------------------------------------------------------
   8c. OFFICIALS PAGES (Technical Officials / Executive Committee /
       District Secretary & President) — member cards rendered by JS
       into .members_sec blocks; visual restyle only.
   -------------------------------------------------------------------------- */
.members_sec,
.members_sec1 {
    border: 1px solid var(--kbsa-line) !important;
    border-radius: var(--kbsa-radius) !important;
    box-shadow: var(--kbsa-shadow-xs) !important;
    padding: 20px 12px 16px !important;
    text-align: center;
    transition: transform .25s var(--kbsa-ease), box-shadow .25s var(--kbsa-ease), border-color .25s var(--kbsa-ease);
}

    .members_sec:hover,
    .members_sec1:hover {
        transform: translateY(-4px);
        border-color: rgba(217, 35, 26, .30) !important;
        box-shadow: var(--kbsa-shadow-md) !important;
    }

    /* photo: centred circular avatar with a white ring */
    .members_sec .members_photo,
    .members_sec .members_photo1 {
        float: none;
        width: 100%;
        text-align: center;
    }

        .members_sec .members_photo img,
        .members_sec .members_photo1 img {
            display: inline-block;
            width: 96px;
            height: 96px;
            object-fit: cover;
            border-radius: 50% !important;
            border: 3px solid #fff;
            box-shadow: 0 4px 14px rgba(31, 45, 61, .18);
            transition: transform .25s var(--kbsa-ease);
        }

    .members_sec:hover .members_photo img {
        transform: scale(1.06);
    }

    .members_sec .members_deta,
    .members_sec .members_deta1 {
        float: none;
        width: 100%;
    }

.members_names {
    color: var(--kbsa-ink);
    padding-top: 12px;
}

.members_designation {
    color: var(--kbsa-text);
}

.members_place {
    color: var(--kbsa-blue);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   8c-i. DISTRICT SECRETARY / PRESIDENT page (Web/DistrictMembers)
   The legacy markup floats members and prints the district name as 270°-rotated
   text inside a 40px blue stripe. Reset all of that (CSS-only, no markup change)
   into a clean card grid matching the other officials pages: a centred district
   pill above two member cards (circular photo + centred name/place).
   -------------------------------------------------------------------------- */
/* President / Secretary column headers (declared in the view) */
.members_state_heading {
    text-align: center;
    font-weight: 700;
    font-size: 15px;
    color: var(--kbsa-ink);
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 10px;
    margin: 0 0 16px;
    background: var(--kbsa-red-soft);
    border: 1px solid var(--kbsa-line);
    border-bottom: 3px solid var(--kbsa-red);
    border-radius: var(--kbsa-radius-sm);
}

/* per-district block → plain full-width group (drop float / blue stripe / min-height) */
.members_main {
    width: 100% !important;
    float: none !important;
    display: block !important;
    min-height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
    color: inherit !important;
    font-size: inherit !important;
}

/* district name → un-rotate, show as a centred brand pill */
.members_state {
    width: 100% !important;
    float: none !important;
    text-align: center;
    margin: 0 0 14px !important;
    padding: 0 !important;
}
.members_state_con {
    position: static !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    display: inline-block;
    padding: 7px 20px;
    background: var(--kbsa-red-soft);
    color: var(--kbsa-red) !important;
    border: 1px solid rgba(217, 35, 26, .20);
    border-radius: var(--kbsa-radius-pill);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* members area → full width; cards stretch to equal height */
.members_details {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}
    .members_details .row { align-items: stretch; }
    .members_details .col-6 > a { display: block; height: 100%; text-decoration: none; }
.members_main .members_sec { height: 100%; }

/* each member tile uses the "*2" class variants → circular photo + centred text */
.members_photo2 {
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
    text-align: center;
}
    .members_photo2 img {
        display: inline-block;
        width: 96px !important;
        height: 96px !important;
        object-fit: cover;
        border-radius: 50% !important;
        border: 3px solid #fff;
        box-shadow: 0 4px 14px rgba(31, 45, 61, .18);
        transition: transform .25s var(--kbsa-ease);
    }
.members_sec:hover .members_photo2 img { transform: scale(1.06); }

.members_deta2 {
    width: 100% !important;
    float: none !important;
    text-align: center;
}
.members_names2 {
    text-align: center;
    color: var(--kbsa-ink);
    font-size: 15.5px;
    font-weight: 700;
    padding-top: 12px;
}
.members_designation2 {
    text-align: center;
    color: var(--kbsa-text);
    font-size: 13px;
}
.members_place2 {
    text-align: center;
    color: var(--kbsa-text);
    font-size: 13px;
    margin-top: 2px;
}

/* category headings between groups (e.g. "Umpire State") */
.maintitle {
    width: 100%;
    text-align: center;
    margin: 26px 0 14px;
}

.RefHeading {
    display: inline-block;
    padding: 8px 24px;
    background: var(--kbsa-red-soft);
    color: var(--kbsa-red);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 30px;
}

hr.footerstress {
    border: none;
    border-top: 1px solid var(--kbsa-line);
    margin: 18px 0 6px;
    width: 100%;
}

/* --------------------------------------------------------------------------
   9. MODALS
   -------------------------------------------------------------------------- */
.modal-content {
    border: none;
    border-radius: var(--kbsa-radius-lg);
    box-shadow: var(--kbsa-shadow-lg);
    overflow: hidden;
}

.modal-header {
    border-bottom: 1px solid var(--kbsa-line);
    padding: 16px 22px;
    background: linear-gradient(90deg, #fdf6f6 0%, #fff 40%);
}

.modal-title {
    font-weight: 700;
    color: var(--kbsa-ink);
    position: relative;
    padding-left: 12px;
}

    .modal-title::before {
        content: "";
        position: absolute;
        left: 0;
        top: 2px;
        bottom: 2px;
        width: 4px;
        border-radius: 4px;
        background: var(--kbsa-red);
    }

.modal-body {
    padding: 22px;
}

.modal-footer {
    border-top: 1px solid var(--kbsa-line);
    background: var(--kbsa-bg);
}

.modal.fade .modal-dialog {
    transition: transform .28s var(--kbsa-ease), opacity .28s var(--kbsa-ease);
    transform: translateY(14px) scale(.98);
}

.modal.show .modal-dialog {
    transform: translateY(0) scale(1);
}

.btn-close {
    transition: transform var(--kbsa-fast) var(--kbsa-ease), opacity var(--kbsa-fast) var(--kbsa-ease);
}

    .btn-close:hover {
        transform: rotate(90deg);
        opacity: 1;
    }

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */
#footer .footer-top {
    background-image: linear-gradient(180deg, rgba(13, 18, 25, 0) 0%, rgba(13, 18, 25, .06) 100%);
}

#footer .footer-links ul li {
    transition: transform var(--kbsa-fast) var(--kbsa-ease);
}

    #footer .footer-links ul li:hover {
        transform: translateX(4px);
    }

#footer .footer-links ul a {
    transition: color var(--kbsa-fast) var(--kbsa-ease);
}

#footer img {
    border-radius: var(--kbsa-radius-sm);
    transition: transform var(--kbsa-base) var(--kbsa-ease), box-shadow var(--kbsa-base) var(--kbsa-ease);
}

    #footer img:hover {
        transform: translateY(-3px) scale(1.04);
        box-shadow: var(--kbsa-shadow-md);
    }

/* Back-to-top */
.back-to-top {
    border-radius: var(--kbsa-radius);
    box-shadow: 0 6px 18px rgba(217, 35, 26, .35);
    transition: transform var(--kbsa-base) var(--kbsa-ease), box-shadow var(--kbsa-base) var(--kbsa-ease), background var(--kbsa-base) var(--kbsa-ease), opacity .4s, visibility .4s;
}

    .back-to-top:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 26px rgba(50, 132, 241, .45);
    }

/* --------------------------------------------------------------------------
   11. MISC POLISH
   -------------------------------------------------------------------------- */
/* Section titles get a brand underline */
.section-title h2::after,
.section-title h2::before {
    border-radius: 3px;
}

/* News ticker rows */
.nt-example1 li,
#nt-title li {
    transition: background var(--kbsa-fast) var(--kbsa-ease);
    border-radius: var(--kbsa-radius-sm);
}

    .nt-example1 li:hover {
        background: var(--kbsa-bg);
    }

/* Pagination */
.pagination .page-link {
    border-radius: var(--kbsa-radius-sm);
    margin: 0 3px;
    border: 1px solid var(--kbsa-line);
    color: var(--kbsa-text);
    transition: all var(--kbsa-fast) var(--kbsa-ease);
}

    .pagination .page-link:hover {
        background: var(--kbsa-red-soft);
        color: var(--kbsa-red);
        border-color: rgba(217, 35, 26, .25);
    }

.pagination .active .page-link {
    background: var(--kbsa-red);
    border-color: var(--kbsa-red);
}

/* Images inside content get gentle rounding */
.inner-page img:not(#playerimage):not(.no-round) {
    border-radius: var(--kbsa-radius-sm);
}

/* Links */
a {
    transition: color var(--kbsa-fast) var(--kbsa-ease);
}

/* --------------------------------------------------------------------------
   11b. HOMEPAGE
   -------------------------------------------------------------------------- */
/* Hero — diagonal depth overlay (replaces the flat white wash) and a
   brand accent bar along the bottom edge */
#hero:before {
    background: linear-gradient(100deg, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .72) 45%, rgba(255, 255, 255, .30) 100%);
}

#hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--kbsa-red) 0%, #ff7a45 55%, var(--kbsa-blue) 100%);
}

#hero h1 {
    letter-spacing: -.5px;
}

#hero .btn-get-started {
    border-radius: var(--kbsa-radius-pill);
    font-weight: 600;
    letter-spacing: .5px;
    box-shadow: 0 6px 18px rgba(217, 35, 26, .40);
    transition: all var(--kbsa-base) var(--kbsa-ease);
}

    #hero .btn-get-started:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 26px rgba(217, 35, 26, .50);
    }

#hero .btn-watch-video {
    transition: all var(--kbsa-base) var(--kbsa-ease);
}

    #hero .btn-watch-video:hover {
        transform: translateY(-2px);
    }

/* KBSA Tournaments widget — glass card (was a flat translucent box) */
.tournaments_sec {
    background: rgba(13, 20, 32, .78);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--kbsa-radius);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .35);
    padding: 12px 16px 16px;
}

    .tournaments_sec h4 {
        border-left: 3px solid var(--kbsa-red);
        letter-spacing: .6px;
    }

.view_shedule a {
    border-radius: var(--kbsa-radius-sm);
    font-weight: 600;
    letter-spacing: .6px;
    background: linear-gradient(135deg, #e8392f 0%, var(--kbsa-red) 70%, var(--kbsa-red-dark) 100%);
    box-shadow: 0 4px 12px rgba(217, 35, 26, .35);
    transition: all var(--kbsa-fast) var(--kbsa-ease);
}

    .view_shedule a:hover {
        background: linear-gradient(135deg, #ee493f 0%, #e02d23 70%, var(--kbsa-red) 100%);
        box-shadow: 0 7px 18px rgba(217, 35, 26, .45);
        transform: translateY(-1px);
    }

/* About carousel — rounded card */
#about .carousel {
    border-radius: var(--kbsa-radius-lg);
    overflow: hidden;
    box-shadow: var(--kbsa-shadow-md);
}

    #about .carousel img {
        border-radius: 0;
    }

/* News / Registered Tournaments tickers */
#services .icon-box .icon i {
    transition: transform var(--kbsa-base) var(--kbsa-ease);
}

#services .icon-box:hover .icon i {
    transform: translateY(-3px) scale(1.08);
}

#services .icon-box h4 {
    font-weight: 700;
}

/* Sport accent: red top edge on the news/tournament cards */
#services .icon-box {
    border-top: 3px solid var(--kbsa-red);
}

.nt-example1 li {
    border-bottom: 1px solid #eef2f7;
    padding-left: 8px;
    padding-right: 8px;
}

    .nt-example1 li:last-child {
        border-bottom: none;
    }

/* Section titles */
.section-title h2 {
    font-weight: 700;
    letter-spacing: -.3px;
}

/* Achievers carousel cards */
.prodict_list .owl-carousel .item img,
.prodict_list .owl-carousel .item {
    border-radius: var(--kbsa-radius);
}

.prodict_list .owl-carousel .item {
    overflow: hidden;
    box-shadow: var(--kbsa-shadow-sm);
    transition: transform var(--kbsa-base) var(--kbsa-ease), box-shadow var(--kbsa-base) var(--kbsa-ease);
}

    .prodict_list .owl-carousel .item:hover {
        transform: translateY(-4px);
        box-shadow: var(--kbsa-shadow-md);
    }

/* Affiliated District tiles.
   The template slides a solid-red ::before panel over .icon-box on hover and
   only recolors <a> titles — these titles are plain h4, so the name became
   red-on-red (invisible). Kill the slide panel; we use a white card with a
   red accent instead. */
.disrict_boxes .icon-box::before {
    display: none !important;
}

.disrict_boxes .icon-box {
    width: calc(100% - 12px);
    margin: 6px;
    padding: 18px 8px;
    position: relative;
    text-align: center;
    background: var(--kbsa-surface);
    border: 1px solid var(--kbsa-line);
    border-radius: var(--kbsa-radius) !important;
    box-shadow: var(--kbsa-shadow-xs) !important;
    cursor: pointer;
    transition: transform .25s var(--kbsa-ease), box-shadow .25s var(--kbsa-ease), border-color .25s var(--kbsa-ease), background .25s var(--kbsa-ease) !important;
}

    /* red underline that sweeps out from the centre on hover */
    .disrict_boxes .icon-box::after {
        content: "";
        position: absolute;
        left: 50%;
        right: 50%;
        bottom: 0;
        height: 3px;
        border-radius: 3px;
        background: linear-gradient(90deg, var(--kbsa-red), #ff7a45);
        opacity: 0;
        transition: left .28s var(--kbsa-ease), right .28s var(--kbsa-ease), opacity .2s var(--kbsa-ease);
    }

    .disrict_boxes .icon-box:hover::after {
        left: 14%;
        right: 14%;
        opacity: 1;
    }

    .disrict_boxes .icon-box .title {
        margin: 0;
        font-size: 14.5px;
        font-weight: 700;
        color: var(--kbsa-ink);
        transition: color var(--kbsa-fast) var(--kbsa-ease);
    }

        /* tiny shuttlecock bullet before each district name */
        .disrict_boxes .icon-box .title::before {
            content: "";
            display: inline-block;
            width: 13px;
            height: 13px;
            margin-right: 7px;
            vertical-align: -1px;
            opacity: .85;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23d9231a' stroke-opacity='.9' stroke-width='9' stroke-linecap='round'%3E%3Ccircle cx='28' cy='92' r='11'/%3E%3Cpath d='M37 83 L45 75'/%3E%3Cpath d='M45 75 L80 18 M45 75 L95 32 M45 75 L107 55'/%3E%3Cpath d='M80 18 Q108 32 107 55'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
        }

    .disrict_boxes .icon-box:hover {
        transform: translateY(-5px) scale(1.03);
        background: linear-gradient(180deg, #ffffff 0%, #fdf0ef 100%);
        border-color: rgba(217, 35, 26, .40);
        box-shadow: 0 12px 26px rgba(217, 35, 26, .16) !important;
    }

        .disrict_boxes .icon-box:hover .title {
            color: var(--kbsa-red);
            letter-spacing: .3px;
        }

    /* shuttle bullet swings up on hover */
    .disrict_boxes .icon-box .title::before {
        transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
    }

    .disrict_boxes .icon-box:hover .title::before {
        transform: rotate(-18deg) translateY(-2px) scale(1.2);
    }

@media (max-width: 991px) {
    .disrict_boxes {
        width: 25%;
    }
}

@media (max-width: 575px) {
    .disrict_boxes {
        width: 50%;
    }
}

/* --------------------------------------------------------------------------
   12. RESPONSIVE REFINEMENTS
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .breadcrumbs h2 {
        font-size: 23px;
    }
}

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

        .breadcrumbs h2 {
            font-size: 20px;
        }

        .breadcrumbs .d-flex {
            flex-direction: column;
            align-items: flex-start !important;
            gap: 6px;
        }

    .modal-body,
    .modal-header {
        padding: 16px;
    }

    .table thead th,
    .table tbody td {
        padding: 10px 10px;
        font-size: 13px;
    }

    .btn-lg,
    .btn-large {
        width: 100%;
    }
}