/* ==========================================================================
   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%);
    }

}