/* ==========================================================================
   TBH INDIA — GLOBAL COMMON DESIGN SYSTEM
   Version: 1.0
   Scope:
   - Customer
   - Seller
   - Admin
   - Authentication
   - Checkout
   - Orders
   - Finance
   - All common UI

   IMPORTANT:
   This file contains GLOBAL UI only.
   Page-specific design should stay in:
   - customer-theme.css
   - home-theme.css
   - seller-theme.css
   - admin-theme.css
========================================================================== */


/* ==========================================================================
   01. DESIGN TOKENS
========================================================================== */

:root {

    /* ----------------------------------------------------------------------
       COLORS
    ---------------------------------------------------------------------- */

    --tbh-black: #111111;
    --tbh-black-soft: #1b1b1b;
    --tbh-charcoal: #252525;

    --tbh-gold: #d4af37;
    --tbh-gold-dark: #a67c00;
    --tbh-gold-light: #ead48a;

    --tbh-white: #ffffff;
    --tbh-paper: #fffdf8;
    --tbh-cream: #f7f4ec;
    --tbh-soft: #f4f1ea;
    --tbh-gray-50: #fafafa;
    --tbh-gray-100: #f5f5f5;
    --tbh-gray-200: #eeeeee;
    --tbh-gray-300: #dddddd;
    --tbh-gray-400: #bdbdbd;
    --tbh-gray-500: #8a8a8a;
    --tbh-gray-600: #666666;
    --tbh-gray-700: #444444;
    --tbh-gray-800: #2a2a2a;
    --tbh-gray-900: #181818;

    --tbh-success: #176a3a;
    --tbh-success-bg: #edf8f1;

    --tbh-warning: #9a6700;
    --tbh-warning-bg: #fff8df;

    --tbh-danger: #a52a2a;
    --tbh-danger-bg: #fff0f0;

    --tbh-info: #245b9b;
    --tbh-info-bg: #eef5ff;


    /* ----------------------------------------------------------------------
       TYPOGRAPHY
    ---------------------------------------------------------------------- */

    --tbh-font-body:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --tbh-font-heading:
        Inter,
        ui-sans-serif,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    --tbh-font-mono:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        Menlo,
        monospace;


    /* ----------------------------------------------------------------------
       FONT SIZES
    ---------------------------------------------------------------------- */

    --tbh-text-xs: 11px;
    --tbh-text-sm: 13px;
    --tbh-text-base: 15px;
    --tbh-text-md: 16px;
    --tbh-text-lg: 18px;
    --tbh-text-xl: 20px;
    --tbh-text-2xl: 24px;
    --tbh-text-3xl: 30px;
    --tbh-text-4xl: 38px;
    --tbh-text-5xl: 48px;


    /* ----------------------------------------------------------------------
       FONT WEIGHTS
    ---------------------------------------------------------------------- */

    --tbh-weight-regular: 400;
    --tbh-weight-medium: 500;
    --tbh-weight-semibold: 600;
    --tbh-weight-bold: 700;
    --tbh-weight-extrabold: 800;


    /* ----------------------------------------------------------------------
       LINE HEIGHTS
    ---------------------------------------------------------------------- */

    --tbh-leading-tight: 1.15;
    --tbh-leading-snug: 1.3;
    --tbh-leading-normal: 1.55;
    --tbh-leading-relaxed: 1.7;


    /* ----------------------------------------------------------------------
       SPACING
    ---------------------------------------------------------------------- */

    --tbh-space-1: 4px;
    --tbh-space-2: 8px;
    --tbh-space-3: 12px;
    --tbh-space-4: 16px;
    --tbh-space-5: 20px;
    --tbh-space-6: 24px;
    --tbh-space-7: 28px;
    --tbh-space-8: 32px;
    --tbh-space-10: 40px;
    --tbh-space-12: 48px;
    --tbh-space-16: 64px;
    --tbh-space-20: 80px;


    /* ----------------------------------------------------------------------
       CONTAINER WIDTHS
    ---------------------------------------------------------------------- */

    --tbh-container-sm: 720px;
    --tbh-container-md: 960px;
    --tbh-container-lg: 1180px;
    --tbh-container-xl: 1240px;
    --tbh-container-2xl: 1400px;


    /* ----------------------------------------------------------------------
       BORDER RADIUS
    ---------------------------------------------------------------------- */

    --tbh-radius-xs: 6px;
    --tbh-radius-sm: 10px;
    --tbh-radius-md: 14px;
    --tbh-radius-lg: 18px;
    --tbh-radius-xl: 24px;
    --tbh-radius-2xl: 30px;
    --tbh-radius-full: 999px;


    /* ----------------------------------------------------------------------
       BORDERS
    ---------------------------------------------------------------------- */

    --tbh-border: 1px solid var(--tbh-gray-200);
    --tbh-border-dark: 1px solid var(--tbh-gray-300);
    --tbh-border-gold: 1px solid rgba(212, 175, 55, 0.35);


    /* ----------------------------------------------------------------------
       SHADOWS
    ---------------------------------------------------------------------- */

    --tbh-shadow-xs:
        0 2px 8px rgba(17, 17, 17, 0.04);

    --tbh-shadow-sm:
        0 6px 20px rgba(17, 17, 17, 0.06);

    --tbh-shadow-md:
        0 12px 32px rgba(17, 17, 17, 0.09);

    --tbh-shadow-lg:
        0 20px 50px rgba(17, 17, 17, 0.12);


    /* ----------------------------------------------------------------------
       TRANSITIONS
    ---------------------------------------------------------------------- */

    --tbh-transition-fast:
        160ms ease;

    --tbh-transition:
        220ms ease;

    --tbh-transition-slow:
        320ms ease;


    /* ----------------------------------------------------------------------
       Z-INDEX SYSTEM
    ---------------------------------------------------------------------- */

    --tbh-z-base: 1;
    --tbh-z-dropdown: 100;
    --tbh-z-sticky: 500;
    --tbh-z-header: 1000;
    --tbh-z-overlay: 2000;
    --tbh-z-modal: 3000;
    --tbh-z-toast: 4000;


    /* ----------------------------------------------------------------------
       FORMS
    ---------------------------------------------------------------------- */

    --tbh-input-height: 46px;
    --tbh-input-radius: 12px;
    --tbh-input-padding-x: 14px;


    /* ----------------------------------------------------------------------
       LAYOUT
    ---------------------------------------------------------------------- */

    --tbh-page-padding-x: 20px;
    --tbh-section-space: 64px;
}


/* ==========================================================================
   02. RESET
========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}

body {
    margin: 0;
    padding: 0;

    font-family: var(--tbh-font-body);
    font-size: var(--tbh-text-base);
    font-weight: var(--tbh-weight-regular);
    line-height: var(--tbh-leading-normal);

    color: var(--tbh-black);
    background: var(--tbh-paper);

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: var(--tbh-space-4);

    font-family: var(--tbh-font-heading);
    color: var(--tbh-black);

    line-height: var(--tbh-leading-tight);
    font-weight: var(--tbh-weight-bold);
}

p {
    margin-top: 0;
    margin-bottom: var(--tbh-space-4);
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    border: 0;
    cursor: pointer;
}

img,
svg,
video {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

ul,
ol {
    margin-top: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

::selection {
    color: var(--tbh-white);
    background: var(--tbh-gold-dark);
}


/* ==========================================================================
   03. CONTAINERS
========================================================================== */

.tbh-container {
    width: min(
        var(--tbh-container-xl),
        calc(100% - (var(--tbh-page-padding-x) * 2))
    );

    margin-inline: auto;
}

.tbh-container-sm {
    width: min(
        var(--tbh-container-sm),
        calc(100% - (var(--tbh-page-padding-x) * 2))
    );

    margin-inline: auto;
}

.tbh-container-md {
    width: min(
        var(--tbh-container-md),
        calc(100% - (var(--tbh-page-padding-x) * 2))
    );

    margin-inline: auto;
}

.tbh-container-lg {
    width: min(
        var(--tbh-container-lg),
        calc(100% - (var(--tbh-page-padding-x) * 2))
    );

    margin-inline: auto;
}

.tbh-container-xl {
    width: min(
        var(--tbh-container-xl),
        calc(100% - (var(--tbh-page-padding-x) * 2))
    );

    margin-inline: auto;
}


/* ==========================================================================
   04. COMMON SPACING
========================================================================== */

.tbh-section {
    padding-block: var(--tbh-section-space);
}

.tbh-section-sm {
    padding-block: var(--tbh-space-10);
}

.tbh-section-lg {
    padding-block: var(--tbh-space-16);
}

.tbh-stack-1 > * + * {
    margin-top: var(--tbh-space-1);
}

.tbh-stack-2 > * + * {
    margin-top: var(--tbh-space-2);
}

.tbh-stack-3 > * + * {
    margin-top: var(--tbh-space-3);
}

.tbh-stack-4 > * + * {
    margin-top: var(--tbh-space-4);
}

.tbh-stack-6 > * + * {
    margin-top: var(--tbh-space-6);
}

.tbh-stack-8 > * + * {
    margin-top: var(--tbh-space-8);
}


/* ==========================================================================
   05. TYPOGRAPHY HELPERS
========================================================================== */

.tbh-text-xs {
    font-size: var(--tbh-text-xs);
}

.tbh-text-sm {
    font-size: var(--tbh-text-sm);
}

.tbh-text-base {
    font-size: var(--tbh-text-base);
}

.tbh-text-lg {
    font-size: var(--tbh-text-lg);
}

.tbh-text-xl {
    font-size: var(--tbh-text-xl);
}

.tbh-text-2xl {
    font-size: var(--tbh-text-2xl);
}

.tbh-text-muted {
    color: var(--tbh-gray-600);
}

.tbh-text-gold {
    color: var(--tbh-gold-dark);
}

.tbh-text-success {
    color: var(--tbh-success);
}

.tbh-text-danger {
    color: var(--tbh-danger);
}

.tbh-text-center {
    text-align: center;
}


/* ==========================================================================
   06. BUTTON SYSTEM
========================================================================== */

.tbh-btn {
    min-height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 0 18px;

    border: 1px solid transparent;
    border-radius: var(--tbh-radius-sm);

    font-size: 14px;
    font-weight: var(--tbh-weight-semibold);

    line-height: 1;
    white-space: nowrap;

    transition:
        transform var(--tbh-transition),
        box-shadow var(--tbh-transition),
        background var(--tbh-transition),
        border-color var(--tbh-transition),
        color var(--tbh-transition);
}

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

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

.tbh-btn-primary {
    color: var(--tbh-white);
    background: var(--tbh-black);
    border-color: var(--tbh-black);
}

.tbh-btn-primary:hover {
    background: var(--tbh-charcoal);
    box-shadow: var(--tbh-shadow-sm);
}

.tbh-btn-gold {
    color: var(--tbh-black);
    background: var(--tbh-gold);
    border-color: var(--tbh-gold);
}

.tbh-btn-gold:hover {
    background: var(--tbh-gold-light);
}

.tbh-btn-outline {
    color: var(--tbh-black);
    background: var(--tbh-white);
    border-color: var(--tbh-gray-300);
}

.tbh-btn-outline:hover {
    border-color: var(--tbh-gold);
}

.tbh-btn-danger {
    color: var(--tbh-white);
    background: var(--tbh-danger);
    border-color: var(--tbh-danger);
}

.tbh-btn-success {
    color: var(--tbh-white);
    background: var(--tbh-success);
    border-color: var(--tbh-success);
}

.tbh-btn-ghost {
    color: var(--tbh-black);
    background: transparent;
    border-color: transparent;
}

.tbh-btn-sm {
    min-height: 36px;
    padding-inline: 13px;
    font-size: 13px;
}

.tbh-btn-lg {
    min-height: 52px;
    padding-inline: 22px;
    font-size: 15px;
}

.tbh-btn-block {
    width: 100%;
}


/* ==========================================================================
   07. CARD SYSTEM
========================================================================== */

.tbh-card {
    background: var(--tbh-white);
    border: var(--tbh-border);
    border-radius: var(--tbh-radius-md);

    box-shadow: var(--tbh-shadow-xs);

    transition:
        transform var(--tbh-transition),
        box-shadow var(--tbh-transition),
        border-color var(--tbh-transition);
}

.tbh-card:hover {
    box-shadow: var(--tbh-shadow-sm);
}

.tbh-card-body {
    padding: var(--tbh-space-6);
}

.tbh-card-header {
    padding:
        var(--tbh-space-5)
        var(--tbh-space-6);

    border-bottom: var(--tbh-border);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tbh-space-4);
}

.tbh-card-footer {
    padding:
        var(--tbh-space-5)
        var(--tbh-space-6);

    border-top: var(--tbh-border);
}

.tbh-card-gold {
    border-color: rgba(212, 175, 55, 0.35);
}


/* ==========================================================================
   08. FORM SYSTEM
========================================================================== */

.tbh-form-group {
    margin-bottom: var(--tbh-space-5);
}

.tbh-label {
    display: block;

    margin-bottom: var(--tbh-space-2);

    color: var(--tbh-gray-800);

    font-size: 14px;
    font-weight: var(--tbh-weight-semibold);
}

.tbh-required {
    color: var(--tbh-danger);
}

.tbh-input,
.tbh-select,
.tbh-textarea {
    width: 100%;

    min-height: var(--tbh-input-height);

    padding:
        10px
        var(--tbh-input-padding-x);

    color: var(--tbh-black);
    background: var(--tbh-white);

    border: 1px solid var(--tbh-gray-300);
    border-radius: var(--tbh-input-radius);

    outline: none;

    transition:
        border-color var(--tbh-transition),
        box-shadow var(--tbh-transition),
        background var(--tbh-transition);
}

.tbh-input::placeholder,
.tbh-textarea::placeholder {
    color: var(--tbh-gray-500);
}

.tbh-input:hover,
.tbh-select:hover,
.tbh-textarea:hover {
    border-color: var(--tbh-gray-400);
}

.tbh-input:focus,
.tbh-select:focus,
.tbh-textarea:focus {
    border-color: var(--tbh-gold-dark);

    box-shadow:
        0 0 0 3px rgba(212, 175, 55, 0.15);
}

.tbh-textarea {
    min-height: 120px;
    resize: vertical;
}

.tbh-input:disabled,
.tbh-select:disabled,
.tbh-textarea:disabled {
    background: var(--tbh-gray-100);
    color: var(--tbh-gray-500);
    cursor: not-allowed;
}

.tbh-form-help {
    margin-top: var(--tbh-space-2);

    color: var(--tbh-gray-600);
    font-size: 12px;
}

.tbh-form-error {
    margin-top: var(--tbh-space-2);

    color: var(--tbh-danger);
    font-size: 12px;
}


/* ==========================================================================
   09. BADGES
========================================================================== */

.tbh-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    min-height: 26px;

    padding:
        0
        9px;

    border-radius: var(--tbh-radius-full);

    font-size: 12px;
    font-weight: var(--tbh-weight-semibold);

    white-space: nowrap;
}

.tbh-badge-success {
    color: var(--tbh-success);
    background: var(--tbh-success-bg);
}

.tbh-badge-warning {
    color: var(--tbh-warning);
    background: var(--tbh-warning-bg);
}

.tbh-badge-danger {
    color: var(--tbh-danger);
    background: var(--tbh-danger-bg);
}

.tbh-badge-info {
    color: var(--tbh-info);
    background: var(--tbh-info-bg);
}

.tbh-badge-gold {
    color: var(--tbh-gold-dark);
    background: rgba(212, 175, 55, 0.14);
}

.tbh-badge-dark {
    color: var(--tbh-white);
    background: var(--tbh-black);
}

.tbh-badge-gray {
    color: var(--tbh-gray-700);
    background: var(--tbh-gray-100);
}


/* ==========================================================================
   10. ALERT SYSTEM
========================================================================== */

.tbh-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 14px 16px;

    border-radius: var(--tbh-radius-sm);

    border: 1px solid transparent;

    font-size: 14px;
}

.tbh-alert strong {
    font-weight: var(--tbh-weight-bold);
}

.tbh-alert-success {
    color: var(--tbh-success);
    background: var(--tbh-success-bg);
    border-color: rgba(23, 106, 58, 0.18);
}

.tbh-alert-warning {
    color: var(--tbh-warning);
    background: var(--tbh-warning-bg);
    border-color: rgba(154, 103, 0, 0.18);
}

.tbh-alert-danger {
    color: var(--tbh-danger);
    background: var(--tbh-danger-bg);
    border-color: rgba(165, 42, 42, 0.18);
}

.tbh-alert-info {
    color: var(--tbh-info);
    background: var(--tbh-info-bg);
    border-color: rgba(36, 91, 155, 0.18);
}


/* ==========================================================================
   11. TABLE SYSTEM
========================================================================== */

.tbh-table-wrap {
    width: 100%;
    overflow-x: auto;

    border: var(--tbh-border);
    border-radius: var(--tbh-radius-md);

    background: var(--tbh-white);
}

.tbh-table {
    width: 100%;
    min-width: 700px;

    border-collapse: collapse;
}

.tbh-table th,
.tbh-table td {
    padding: 14px 16px;

    text-align: left;
    vertical-align: middle;

    border-bottom: 1px solid var(--tbh-gray-200);

    font-size: 14px;
}

.tbh-table th {
    background: var(--tbh-gray-50);

    color: var(--tbh-gray-700);

    font-size: 12px;
    font-weight: var(--tbh-weight-bold);

    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tbh-table tbody tr:hover {
    background: rgba(212, 175, 55, 0.035);
}

.tbh-table tbody tr:last-child td {
    border-bottom: 0;
}


/* ==========================================================================
   12. MODAL SYSTEM
========================================================================== */

.tbh-modal {
    position: fixed;
    inset: 0;

    z-index: var(--tbh-z-modal);

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;

    background: rgba(17, 17, 17, 0.62);

    backdrop-filter: blur(5px);
}

.tbh-modal.is-open {
    display: flex;
}

.tbh-modal-dialog {
    width: min(100%, 560px);
    max-height: min(90vh, 760px);

    overflow: auto;

    background: var(--tbh-white);

    border-radius: var(--tbh-radius-xl);

    box-shadow: var(--tbh-shadow-lg);

    animation: tbhModalIn 180ms ease-out;
}

.tbh-modal-header {
    padding:
        20px
        24px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    border-bottom: var(--tbh-border);
}

.tbh-modal-title {
    margin: 0;
    font-size: 20px;
}

.tbh-modal-body {
    padding: 24px;
}

.tbh-modal-footer {
    padding:
        18px
        24px;

    border-top: var(--tbh-border);

    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.tbh-modal-close {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: var(--tbh-gray-100);
    color: var(--tbh-gray-700);

    font-size: 20px;
}

.tbh-modal-close:hover {
    background: var(--tbh-gray-200);
}


/* ==========================================================================
   13. LOADING SYSTEM
========================================================================== */

.tbh-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}

.tbh-spinner {
    width: 20px;
    height: 20px;

    border: 3px solid rgba(17, 17, 17, 0.12);
    border-top-color: var(--tbh-gold-dark);

    border-radius: 50%;

    animation: tbhSpin 700ms linear infinite;
}

.tbh-spinner-sm {
    width: 16px;
    height: 16px;

    border-width: 2px;
}

.tbh-spinner-lg {
    width: 32px;
    height: 32px;

    border-width: 3px;
}

.tbh-loading-overlay {
    position: fixed;
    inset: 0;

    z-index: var(--tbh-z-overlay);

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(255, 253, 248, 0.82);

    backdrop-filter: blur(4px);
}


/* ==========================================================================
   14. SKELETON LOADING
========================================================================== */

.tbh-skeleton {
    position: relative;

    overflow: hidden;

    background: var(--tbh-gray-200);

    border-radius: var(--tbh-radius-sm);
}

.tbh-skeleton::after {
    content: "";

    position: absolute;
    inset: 0;

    transform: translateX(-100%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.55),
            transparent
        );

    animation: tbhSkeleton 1.4s infinite;
}


/* ==========================================================================
   15. EMPTY STATES
========================================================================== */

.tbh-empty {
    padding: 48px 24px;

    text-align: center;

    background: var(--tbh-white);

    border:
        1px dashed
        var(--tbh-gray-300);

    border-radius: var(--tbh-radius-lg);
}

.tbh-empty-icon {
    margin-bottom: 14px;

    font-size: 42px;
}

.tbh-empty-title {
    margin-bottom: 8px;

    font-size: 20px;
    font-weight: var(--tbh-weight-bold);
}

.tbh-empty-text {
    max-width: 520px;
    margin-inline: auto;

    color: var(--tbh-gray-600);

    font-size: 14px;
}


/* ==========================================================================
   16. DIVIDERS
========================================================================== */

.tbh-divider {
    width: 100%;
    height: 1px;

    background: var(--tbh-gray-200);
}

.tbh-divider-gold {
    background: rgba(212, 175, 55, 0.35);
}


/* ==========================================================================
   17. VISIBILITY HELPERS
========================================================================== */

.tbh-hidden {
    display: none !important;
}

.tbh-visible {
    display: block !important;
}

.tbh-flex {
    display: flex;
}

.tbh-grid {
    display: grid;
}

.tbh-items-center {
    align-items: center;
}

.tbh-justify-between {
    justify-content: space-between;
}

.tbh-gap-2 {
    gap: var(--tbh-space-2);
}

.tbh-gap-3 {
    gap: var(--tbh-space-3);
}

.tbh-gap-4 {
    gap: var(--tbh-space-4);
}

.tbh-gap-6 {
    gap: var(--tbh-space-6);
}


/* ==========================================================================
   18. IMAGE / MEDIA HELPERS
========================================================================== */

.tbh-media {
    overflow: hidden;

    border-radius: var(--tbh-radius-md);

    background: var(--tbh-gray-100);
}

.tbh-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.tbh-media-contain img {
    object-fit: contain;
}


/* ==========================================================================
   19. FOCUS STATES
========================================================================== */

:focus-visible {
    outline: 3px solid rgba(212, 175, 55, 0.45);
    outline-offset: 3px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(212, 175, 55, 0.45);
    outline-offset: 2px;
}


/* ==========================================================================
   20. SCROLLBAR
========================================================================== */

* {
    scrollbar-width: thin;
    scrollbar-color:
        var(--tbh-gold-dark)
        var(--tbh-gray-100);
}

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

::-webkit-scrollbar-track {
    background: var(--tbh-gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--tbh-gold-dark);

    border: 2px solid var(--tbh-gray-100);

    border-radius: var(--tbh-radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--tbh-gold);
}


/* ==========================================================================
   21. RESPONSIVE BREAKPOINTS
========================================================================== */

/* Large desktop */
@media (max-width: 1400px) {

    :root {
        --tbh-container-xl: 1180px;
    }

}


/* Desktop / laptop */
@media (max-width: 1200px) {

    :root {
        --tbh-page-padding-x: 18px;
        --tbh-section-space: 56px;
    }

}


/* Tablet */
@media (max-width: 992px) {

    :root {
        --tbh-page-padding-x: 16px;
        --tbh-section-space: 48px;

        --tbh-text-5xl: 42px;
        --tbh-text-4xl: 34px;
    }

    .tbh-table th,
    .tbh-table td {
        padding: 12px 13px;
    }

}


/* Mobile */
@media (max-width: 768px) {

    :root {
        --tbh-page-padding-x: 14px;
        --tbh-section-space: 40px;

        --tbh-text-5xl: 36px;
        --tbh-text-4xl: 30px;
        --tbh-text-3xl: 26px;
        --tbh-text-2xl: 22px;
    }

    .tbh-card-body {
        padding: 18px;
    }

    .tbh-card-header {
        padding: 16px 18px;
    }

    .tbh-card-footer {
        padding: 16px 18px;
    }

    .tbh-modal {
        padding: 12px;
    }

    .tbh-modal-dialog {
        border-radius: var(--tbh-radius-lg);
    }

    .tbh-modal-body {
        padding: 18px;
    }

    .tbh-modal-footer {
        padding: 16px 18px;
    }

}


/* Small mobile */
@media (max-width: 480px) {

    :root {
        --tbh-page-padding-x: 12px;
        --tbh-section-space: 32px;

        --tbh-text-4xl: 28px;
        --tbh-text-3xl: 24px;
        --tbh-text-2xl: 21px;
        --tbh-text-xl: 18px;
    }

    .tbh-btn {
        min-height: 44px;
    }

    .tbh-btn-lg {
        min-height: 48px;
    }

    .tbh-empty {
        padding: 36px 18px;
    }

}


/* ==========================================================================
   22. REDUCED MOTION
========================================================================== */

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

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

}


/* ==========================================================================
   23. ANIMATIONS
========================================================================== */

@keyframes tbhSpin {

    to {
        transform: rotate(360deg);
    }

}

@keyframes tbhModalIn {

    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}

@keyframes tbhSkeleton {

    100% {
        transform: translateX(100%);
    }

}
/* ========================================================================
   LEGACY SHARED SHELL — COMPATIBILITY LAYER
   Styles the existing includes/header.php and includes/footer.php markup.
   Scoped to the legacy shell to avoid overriding the newer customer header.
======================================================================== */

.topbar {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 20px;
    background: var(--tbh-black);
    color: var(--tbh-paper);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .035em;
    line-height: 1.4;
    text-align: center;
}

.topbar + .header {
    position: relative;
    z-index: var(--tbh-z-header);
    display: grid;
    grid-template-columns: max-content minmax(220px, 1fr) max-content;
    align-items: center;
    gap: clamp(14px, 2.2vw, 30px);
    width: 100%;
    padding: 16px clamp(18px, 3.5vw, 52px);
    background: linear-gradient(180deg, #ffffff 0%, var(--tbh-paper) 100%);
    border-bottom: 1px solid #e9e2d5;
    box-shadow: 0 7px 24px rgba(17, 17, 17, .045);
}

.topbar + .header .logo {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    color: var(--tbh-black);
    font-size: clamp(23px, 2vw, 28px);
    font-weight: 900;
    letter-spacing: -.055em;
    line-height: 1;
    white-space: nowrap;
}

.topbar + .header .logo span {
    color: var(--tbh-gold-dark);
    font-size: .55em;
    font-weight: 900;
    letter-spacing: .17em;
}

.topbar + .header .search {
    display: flex;
    align-items: stretch;
    min-width: 0;
    width: 100%;
    max-width: 660px;
    justify-self: center;
    margin: 0;
    overflow: hidden;
    background: var(--tbh-white);
    border: 1px solid #ded7ca;
    border-radius: var(--tbh-radius-full);
    box-shadow: 0 3px 12px rgba(17, 17, 17, .035);
}

.topbar + .header .search input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    min-height: 46px;
    padding: 10px 16px;
    color: var(--tbh-black);
    background: transparent;
    border: 0;
    border-radius: 0;
    outline: none;
    font-size: 14px;
}

.topbar + .header .search input::placeholder {
    color: var(--tbh-gray-500);
    opacity: 1;
}

.topbar + .header .search input:focus-visible {
    box-shadow: inset 0 0 0 2px rgba(166, 124, 0, .28);
}

.topbar + .header .search button {
    flex: 0 0 auto;
    min-height: 46px;
    padding: 0 20px;
    background: var(--tbh-gold);
    color: var(--tbh-black);
    border-radius: 0;
    font-size: 13px;
    font-weight: 800;
    transition: background var(--tbh-transition-fast);
}

.topbar + .header .search button:hover {
    background: var(--tbh-gold-light);
}

.topbar + .header nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px;
    min-width: 0;
}

.topbar + .header nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 9px 12px;
    color: var(--tbh-gray-800);
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.2;
    white-space: nowrap;
    transition: background var(--tbh-transition-fast), color var(--tbh-transition-fast), border-color var(--tbh-transition-fast);
}

.topbar + .header nav a:hover {
    color: var(--tbh-gold-dark);
    background: var(--tbh-cream);
    border-color: #eee4cc;
}

.topbar + .header nav a:focus-visible {
    outline: 3px solid rgba(166, 124, 0, .45);
    outline-offset: 2px;
}

/* The legacy footer is deliberately scoped away from .customer-footer. */
body > footer:not(.customer-footer) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 22px 36px;
    margin-top: 36px;
    padding: 36px clamp(20px, 4vw, 56px) 24px;
    color: #f8f5ed;
    background: linear-gradient(135deg, #171717 0%, #24231f 100%);
    border-top: 4px solid var(--tbh-gold);
    font-size: 14px;
    line-height: 1.6;
}

body > footer:not(.customer-footer) > div:first-child strong {
    display: inline-block;
    margin-bottom: 7px;
    color: var(--tbh-gold-light);
    font-size: 17px;
    font-weight: 900;
    letter-spacing: .09em;
}

body > footer:not(.customer-footer) > div:first-child p {
    margin: 0;
    color: #ded9ce;
}

body > footer:not(.customer-footer) > div:nth-child(2) {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 20px;
}

body > footer:not(.customer-footer) > div:nth-child(2) a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: #f8f5ed;
    font-size: 13px;
    font-weight: 650;
    transition: color var(--tbh-transition-fast);
}

body > footer:not(.customer-footer) > div:nth-child(2) a:hover {
    color: var(--tbh-gold-light);
    text-decoration: underline;
    text-underline-offset: 4px;
}

body > footer:not(.customer-footer) > p {
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 16px;
    color: #c9c3b8;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: 12px;
}

@media (max-width: 1050px) {
    .topbar + .header {
        grid-template-columns: max-content minmax(0, 1fr);
        gap: 13px 18px;
        padding: 15px 22px;
    }

    .topbar + .header .search {
        grid-column: 2;
        max-width: none;
        justify-self: stretch;
    }

    .topbar + .header nav {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-top: 2px;
    }

    .topbar + .header nav a {
        padding-inline: 13px;
    }
}

@media (max-width: 600px) {
    .topbar {
        min-height: 32px;
        padding: 7px 12px;
        font-size: 10.5px;
        letter-spacing: .015em;
    }

    .topbar + .header {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 14px 14px 12px;
    }

    .topbar + .header .logo,
    .topbar + .header .search,
    .topbar + .header nav {
        grid-column: 1;
    }

    .topbar + .header .logo {
        font-size: 25px;
    }

    .topbar + .header .search input {
        min-height: 46px;
        padding-inline: 13px;
        font-size: 14px;
    }

    .topbar + .header .search button {
        min-height: 46px;
        padding-inline: 15px;
    }

    .topbar + .header nav {
        justify-content: space-between;
        gap: 5px;
        padding-top: 0;
    }

    .topbar + .header nav a {
        flex: 1 1 auto;
        min-width: 0;
        min-height: 42px;
        padding: 9px 7px;
        font-size: 12.5px;
    }

    body > footer:not(.customer-footer) {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        margin-top: 24px;
        padding: 28px 18px 20px;
    }

    body > footer:not(.customer-footer) > div:nth-child(2) {
        justify-content: flex-start;
        gap: 4px 16px;
    }

    body > footer:not(.customer-footer) > p {
        grid-column: 1;
    }
}