/* ==========================================================================
   HB Store — theme.css
   Shared by the storefront, customer account and admin panel.
   1. Palette + design tokens
   2. Bootstrap 5.3 re-skin (CSS variables + component overrides)
   Load AFTER bootstrap.min.css and BEFORE style.css / user.css / admin.css.
   ========================================================================== */

/* ---------- 1. Palette + tokens ---------------------------------------- */
:root,
[data-bs-theme="light"] {
    /* Brand palette (from the supplied swatch) */
    --hb-sky:        #73C7E3;
    --hb-linen:      #FFF9F0;
    --hb-turquoise:  #24B0BA;
    --hb-light:      #F0F2F2;
    --hb-navy:       #2E4A70;
    --hb-gold:       #CF8A40;

    /* Derived shades — used where the raw palette colour is too light for text
       or where a hover / pressed state is needed. */
    --hb-navy-dark:       #213754;  /* hover, footer, admin sidebar */
    --hb-navy-ink:        #1B2E48;  /* pressed state, text on gold */
    --hb-turquoise-dark:  #17767E;  /* links + turquoise text (5:1 on linen) */
    --hb-turquoise-tint:  #E4F4F5;
    --hb-sky-tint:        #E8F5FA;
    --hb-gold-dark:       #9A5B14;  /* gold text on light backgrounds */
    --hb-gold-tint:       #F7EBDC;

    /* Status colours that sit next to the palette. Errors need a red. */
    --hb-brick:       #B3402F;
    --hb-brick-tint:  #F8E4E0;

    /* Semantic roles */
    --hb-bg:            var(--hb-linen);
    --hb-surface:       #FFFFFF;
    --hb-ink:           var(--hb-navy);
    --hb-muted:         #5A6E8A;
    --hb-border:        #DCE2E6;
    --hb-border-strong: #B9C4CE;
    --hb-primary:       var(--hb-navy);
    --hb-primary-dark:  var(--hb-navy-dark);
    --hb-accent:        var(--hb-gold);
    --hb-link:          var(--hb-turquoise-dark);

    /* Shape + depth */
    --hb-radius-sm: 8px;
    --hb-radius:    14px;   /* cards, panels */
    --hb-radius-lg: 20px;   /* hero */
    --hb-radius-control: 10px;
    --hb-shadow:    0 1px 2px rgba(33, 55, 84, .06), 0 8px 22px rgba(33, 55, 84, .07);
    --hb-shadow-sm: 0 1px 2px rgba(33, 55, 84, .06), 0 2px 8px rgba(33, 55, 84, .05);

    /* Type */
    --hb-font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --hb-font-display: "Fraunces", Georgia, "Times New Roman", serif;

    /* ---- Bootstrap variable overrides ---- */
    --bs-font-sans-serif: var(--hb-font-body);
    --bs-body-font-family: var(--hb-font-body);
    --bs-body-line-height: 1.6;
    --bs-body-color: var(--hb-navy);
    --bs-body-color-rgb: 46, 74, 112;
    --bs-body-bg: var(--hb-linen);
    --bs-body-bg-rgb: 255, 249, 240;
    --bs-emphasis-color: var(--hb-navy-ink);
    --bs-emphasis-color-rgb: 27, 46, 72;
    --bs-secondary-color: var(--hb-muted);
    --bs-secondary-color-rgb: 90, 110, 138;
    --bs-secondary-bg: var(--hb-light);
    --bs-tertiary-color: var(--hb-muted);
    --bs-tertiary-bg: var(--hb-light);
    --bs-tertiary-bg-rgb: 240, 242, 242;
    --bs-border-color: var(--hb-border);
    --bs-border-color-translucent: rgba(46, 74, 112, .14);
    --bs-border-radius: var(--hb-radius-control);
    --bs-border-radius-sm: var(--hb-radius-sm);
    --bs-border-radius-lg: var(--hb-radius);
    --bs-border-radius-xl: var(--hb-radius-lg);
    --bs-link-color: var(--hb-turquoise-dark);
    --bs-link-color-rgb: 23, 118, 126;
    --bs-link-hover-color: var(--hb-navy);
    --bs-link-hover-color-rgb: 46, 74, 112;
    --bs-focus-ring-color: rgba(36, 176, 186, .3);
    --bs-highlight-bg: var(--hb-gold-tint);

    --bs-primary:   var(--hb-navy);       --bs-primary-rgb:   46, 74, 112;
    --bs-secondary: var(--hb-muted);      --bs-secondary-rgb: 90, 110, 138;
    --bs-success:   var(--hb-turquoise-dark); --bs-success-rgb: 23, 118, 126;
    --bs-info:      var(--hb-sky);        --bs-info-rgb:      115, 199, 227;
    --bs-warning:   var(--hb-gold);       --bs-warning-rgb:   207, 138, 64;
    --bs-danger:    var(--hb-brick);      --bs-danger-rgb:    179, 64, 47;
    --bs-light:     var(--hb-light);      --bs-light-rgb:     240, 242, 242;
    --bs-dark:      var(--hb-navy);       --bs-dark-rgb:      46, 74, 112;

    --bs-primary-bg-subtle:   var(--hb-sky-tint);      --bs-primary-border-subtle:   #B5D0EA; --bs-primary-text-emphasis:   var(--hb-navy-dark);
    --bs-secondary-bg-subtle: var(--hb-light);         --bs-secondary-border-subtle: var(--hb-border-strong); --bs-secondary-text-emphasis: var(--hb-navy-dark);
    --bs-success-bg-subtle:   var(--hb-turquoise-tint);--bs-success-border-subtle:   #A5DADF; --bs-success-text-emphasis:   #0E4D53;
    --bs-info-bg-subtle:      var(--hb-sky-tint);      --bs-info-border-subtle:      #B3E0F0; --bs-info-text-emphasis:      #1D5873;
    --bs-warning-bg-subtle:   var(--hb-gold-tint);     --bs-warning-border-subtle:   #EBC79C; --bs-warning-text-emphasis:   #6B3F0E;
    --bs-danger-bg-subtle:    var(--hb-brick-tint);    --bs-danger-border-subtle:    #EBB9B0; --bs-danger-text-emphasis:    #7A2A1D;
    --bs-light-bg-subtle:     #F8F9F9;                 --bs-light-border-subtle:     var(--hb-border);
    --bs-dark-bg-subtle:      #D5DCE6;                 --bs-dark-border-subtle:      #A9B7CB;
}

/* ---------- 2. Base ---------------------------------------------------- */
body {
    font-family: var(--hb-font-body);
    background: var(--hb-bg);
    color: var(--hb-ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--hb-font-display);
    font-weight: 600;
    color: var(--hb-navy);
    letter-spacing: -.01em;
    line-height: 1.25;
}
h5, h6, .h5, .h6 { letter-spacing: 0; }

a { text-underline-offset: .18em; }
a:hover { color: var(--bs-link-hover-color); }

::selection { background: var(--hb-sky); color: var(--hb-navy-ink); }

hr { border-color: var(--hb-border); opacity: 1; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--hb-turquoise);
    outline-offset: 2px;
}

/* ---------- 3. Buttons ------------------------------------------------- */
.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--hb-radius-control);
    --bs-btn-focus-box-shadow: 0 0 0 .22rem rgba(36, 176, 186, .35);
    letter-spacing: .005em;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:focus-visible { outline: none; }

.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--hb-navy);
    --bs-btn-border-color: var(--hb-navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--hb-navy-dark);
    --bs-btn-hover-border-color: var(--hb-navy-dark);
    --bs-btn-focus-shadow-rgb: 36, 176, 186;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--hb-navy-ink);
    --bs-btn-active-border-color: var(--hb-navy-ink);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--hb-navy);
    --bs-btn-disabled-border-color: var(--hb-navy);
}
.btn-primary {
    --bs-btn-color: var(--hb-navy-ink);
    --bs-btn-bg: var(--hb-turquoise);
    --bs-btn-border-color: var(--hb-turquoise);
    --bs-btn-hover-color: var(--hb-navy-ink);
    --bs-btn-hover-bg: #1E9BA4;
    --bs-btn-hover-border-color: #1E9BA4;
    --bs-btn-focus-shadow-rgb: 36, 176, 186;
    --bs-btn-active-color: var(--hb-navy-ink);
    --bs-btn-active-bg: #1A8F98;
    --bs-btn-active-border-color: #1A8F98;
    --bs-btn-disabled-color: var(--hb-navy-ink);
    --bs-btn-disabled-bg: var(--hb-turquoise);
    --bs-btn-disabled-border-color: var(--hb-turquoise);
}
.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--hb-turquoise-dark);
    --bs-btn-border-color: var(--hb-turquoise-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #12626A;
    --bs-btn-hover-border-color: #12626A;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0E4D53;
    --bs-btn-active-border-color: #0E4D53;
    --bs-btn-disabled-bg: var(--hb-turquoise-dark);
    --bs-btn-disabled-border-color: var(--hb-turquoise-dark);
}
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--hb-brick);
    --bs-btn-border-color: var(--hb-brick);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #9A3526;
    --bs-btn-hover-border-color: #9A3526;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #822B1F;
    --bs-btn-active-border-color: #822B1F;
    --bs-btn-disabled-bg: var(--hb-brick);
    --bs-btn-disabled-border-color: var(--hb-brick);
}
.btn-warning {
    --bs-btn-color: var(--hb-navy-ink);
    --bs-btn-bg: var(--hb-gold);
    --bs-btn-border-color: var(--hb-gold);
    --bs-btn-hover-color: var(--hb-navy-ink);
    --bs-btn-hover-bg: #C07B31;
    --bs-btn-hover-border-color: #C07B31;
    --bs-btn-active-color: var(--hb-navy-ink);
    --bs-btn-active-bg: #B26F27;
    --bs-btn-active-border-color: #B26F27;
    --bs-btn-disabled-bg: var(--hb-gold);
    --bs-btn-disabled-border-color: var(--hb-gold);
}

.btn-outline-dark {
    --bs-btn-color: var(--hb-navy);
    --bs-btn-border-color: var(--hb-navy);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--hb-navy);
    --bs-btn-hover-border-color: var(--hb-navy);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--hb-navy-dark);
    --bs-btn-active-border-color: var(--hb-navy-dark);
    --bs-btn-disabled-color: var(--hb-navy);
    --bs-btn-disabled-border-color: var(--hb-navy);
}
.btn-outline-secondary {
    --bs-btn-color: var(--hb-navy);
    --bs-btn-border-color: var(--hb-border-strong);
    --bs-btn-hover-color: var(--hb-navy);
    --bs-btn-hover-bg: var(--hb-sky-tint);
    --bs-btn-hover-border-color: var(--hb-navy);
    --bs-btn-active-color: var(--hb-navy);
    --bs-btn-active-bg: #D6ECF6;
    --bs-btn-active-border-color: var(--hb-navy);
    --bs-btn-disabled-color: var(--hb-muted);
    --bs-btn-disabled-border-color: var(--hb-border);
}
.btn-outline-danger {
    --bs-btn-color: var(--hb-brick);
    --bs-btn-border-color: var(--hb-brick);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--hb-brick);
    --bs-btn-hover-border-color: var(--hb-brick);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #9A3526;
    --bs-btn-active-border-color: #9A3526;
    --bs-btn-disabled-color: var(--hb-brick);
    --bs-btn-disabled-border-color: var(--hb-brick);
}
.btn-outline-success {
    --bs-btn-color: var(--hb-turquoise-dark);
    --bs-btn-border-color: var(--hb-turquoise-dark);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--hb-turquoise-dark);
    --bs-btn-hover-border-color: var(--hb-turquoise-dark);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #12626A;
    --bs-btn-active-border-color: #12626A;
    --bs-btn-disabled-color: var(--hb-turquoise-dark);
    --bs-btn-disabled-border-color: var(--hb-turquoise-dark);
}
.btn-outline-warning {
    --bs-btn-color: var(--hb-gold-dark);
    --bs-btn-border-color: var(--hb-gold);
    --bs-btn-hover-color: var(--hb-navy-ink);
    --bs-btn-hover-bg: var(--hb-gold);
    --bs-btn-hover-border-color: var(--hb-gold);
    --bs-btn-active-color: var(--hb-navy-ink);
    --bs-btn-active-bg: #C07B31;
    --bs-btn-active-border-color: #C07B31;
    --bs-btn-disabled-color: var(--hb-gold-dark);
    --bs-btn-disabled-border-color: var(--hb-gold);
}
.btn-outline-primary {
    --bs-btn-color: var(--hb-turquoise-dark);
    --bs-btn-border-color: var(--hb-turquoise);
    --bs-btn-hover-color: var(--hb-navy-ink);
    --bs-btn-hover-bg: var(--hb-turquoise);
    --bs-btn-hover-border-color: var(--hb-turquoise);
    --bs-btn-active-color: var(--hb-navy-ink);
    --bs-btn-active-bg: #1E9BA4;
    --bs-btn-active-border-color: #1E9BA4;
}
.btn-link {
    --bs-btn-color: var(--hb-turquoise-dark);
    --bs-btn-hover-color: var(--hb-navy);
    --bs-btn-active-color: var(--hb-navy);
    --bs-btn-focus-shadow-rgb: 36, 176, 186;
    font-weight: 600;
}

/* ---------- 4. Forms --------------------------------------------------- */
.form-label { font-weight: 600; color: var(--hb-navy); margin-bottom: .35rem; }
.form-text  { color: var(--hb-muted); }

.form-control,
.form-select {
    background-color: #fff;
    border-color: var(--hb-border-strong);
    border-radius: var(--hb-radius-control);
    color: var(--hb-navy-ink);
}
.form-control::placeholder { color: #8797AC; }
.form-control:focus,
.form-select:focus {
    background-color: #fff;
    border-color: var(--hb-turquoise);
    box-shadow: 0 0 0 .22rem rgba(36, 176, 186, .25);
    color: var(--hb-navy-ink);
}
.form-control:disabled,
.form-control[readonly],
.form-select:disabled { background-color: var(--hb-light); }
.form-control-color { padding: .25rem; }

.form-check-input { border-color: var(--hb-border-strong); }
.form-check-input:checked,
.form-check-input[type="checkbox"]:indeterminate {
    background-color: var(--hb-navy);
    border-color: var(--hb-navy);
}
.form-check-input:focus {
    border-color: var(--hb-turquoise);
    box-shadow: 0 0 0 .22rem rgba(36, 176, 186, .25);
}
.form-switch .form-check-input:checked { background-color: var(--hb-turquoise-dark); border-color: var(--hb-turquoise-dark); }

.input-group-text {
    background: var(--hb-light);
    border-color: var(--hb-border-strong);
    color: var(--hb-muted);
}

.was-validated .form-control:invalid,
.form-control.is-invalid { border-color: var(--hb-brick); }
.invalid-feedback { color: var(--hb-brick); }

/* ---------- 5. Cards, alerts, badges ----------------------------------- */
.card {
    --bs-card-border-color: var(--hb-border);
    --bs-card-border-radius: var(--hb-radius);
    --bs-card-inner-border-radius: calc(var(--hb-radius) - 1px);
    --bs-card-cap-bg: var(--hb-light);
    --bs-card-bg: var(--hb-surface);
    --bs-card-color: var(--hb-navy);
    box-shadow: var(--hb-shadow-sm);
}
.card.border-0 { border: 1px solid var(--hb-border) !important; }
.card.shadow-sm { box-shadow: var(--hb-shadow-sm) !important; }
.card.shadow    { box-shadow: var(--hb-shadow) !important; }
.card-header { font-family: var(--hb-font-display); font-weight: 600; }

.alert {
    --bs-alert-border-radius: var(--hb-radius-control);
    border-left-width: 4px;
}
.alert-success { border-left-color: var(--hb-turquoise-dark); }
.alert-danger  { border-left-color: var(--hb-brick); }
.alert-warning { border-left-color: var(--hb-gold); }
.alert-info    { border-left-color: var(--hb-sky); }
.alert-light   { background: #fff; border-color: var(--hb-border); color: var(--hb-navy); }
.alert-link    { color: inherit; }

.badge { font-weight: 600; letter-spacing: .01em; }
.badge.bg-warning.text-dark,
.badge.text-bg-warning,
.bg-warning.text-dark { color: var(--hb-navy-ink) !important; }
.text-warning { color: var(--hb-gold-dark) !important; }
i.fa-star.text-warning,
i.fa-star-half-stroke.text-warning { color: var(--hb-gold) !important; }   /* rating stars keep the true gold */

/* ---------- 6. Tables -------------------------------------------------- */
.table {
    --bs-table-color: var(--hb-navy);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--hb-border);
    --bs-table-striped-bg: rgba(46, 74, 112, .035);
    --bs-table-hover-bg: var(--hb-sky-tint);
    --bs-table-hover-color: var(--hb-navy-ink);
    vertical-align: middle;
}
.table > thead > tr > th,
.table thead th {
    color: var(--hb-muted);
    font-size: .82rem;
    font-weight: 600;
    background: var(--hb-light);
    border-bottom: 1px solid var(--hb-border-strong);
    white-space: nowrap;
}
.table-light {
    --bs-table-bg: var(--hb-light);
    --bs-table-color: var(--hb-muted);
    --bs-table-border-color: var(--hb-border-strong);
}
.table-responsive { border-radius: var(--hb-radius-sm); }

/* ---------- 7. Navigation pieces -------------------------------------- */
.dropdown-menu {
    --bs-dropdown-border-color: var(--hb-border);
    --bs-dropdown-border-radius: 12px;
    --bs-dropdown-link-color: var(--hb-navy);
    --bs-dropdown-link-hover-bg: var(--hb-sky-tint);
    --bs-dropdown-link-hover-color: var(--hb-navy-ink);
    --bs-dropdown-link-active-bg: var(--hb-navy);
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-divider-bg: var(--hb-border);
    --bs-dropdown-box-shadow: var(--hb-shadow);
    padding: .4rem;
}
.dropdown-item { border-radius: var(--hb-radius-sm); }

.list-group {
    --bs-list-group-border-color: var(--hb-border);
    --bs-list-group-border-radius: 12px;
    --bs-list-group-action-hover-bg: var(--hb-sky-tint);
    --bs-list-group-action-hover-color: var(--hb-navy-ink);
    --bs-list-group-action-active-bg: var(--hb-sky-tint);
    --bs-list-group-action-active-color: var(--hb-navy-ink);
    --bs-list-group-active-bg: var(--hb-navy);
    --bs-list-group-active-border-color: var(--hb-navy);
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--hb-border);
    --bs-nav-tabs-link-active-color: var(--hb-navy);
    --bs-nav-tabs-link-active-bg: var(--hb-surface);
    --bs-nav-tabs-link-active-border-color: var(--hb-border) var(--hb-border) var(--hb-surface);
    --bs-nav-link-color: var(--hb-muted);
    --bs-nav-link-hover-color: var(--hb-navy);
}
.nav-pills {
    --bs-nav-pills-link-active-bg: var(--hb-navy);
    --bs-nav-link-color: var(--hb-navy);
    --bs-nav-link-hover-color: var(--hb-turquoise-dark);
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--hb-border-strong);
    --bs-breadcrumb-item-active-color: var(--hb-muted);
    font-size: .9rem;
}

.pagination {
    --bs-pagination-color: var(--hb-navy);
    --bs-pagination-bg: #fff;
    --bs-pagination-border-color: var(--hb-border);
    --bs-pagination-hover-color: var(--hb-navy-ink);
    --bs-pagination-hover-bg: var(--hb-sky-tint);
    --bs-pagination-hover-border-color: var(--hb-border-strong);
    --bs-pagination-focus-color: var(--hb-navy-ink);
    --bs-pagination-focus-bg: var(--hb-sky-tint);
    --bs-pagination-focus-box-shadow: 0 0 0 .22rem rgba(36, 176, 186, .3);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--hb-navy);
    --bs-pagination-active-border-color: var(--hb-navy);
    --bs-pagination-disabled-color: #97A5B8;
    --bs-pagination-disabled-bg: var(--hb-light);
    --bs-pagination-disabled-border-color: var(--hb-border);
    --bs-pagination-border-radius: var(--hb-radius-control);
}

.progress { --bs-progress-bg: var(--hb-light); --bs-progress-bar-bg: var(--hb-turquoise); --bs-progress-border-radius: 999px; }
.accordion {
    --bs-accordion-border-color: var(--hb-border);
    --bs-accordion-btn-color: var(--hb-navy);
    --bs-accordion-active-color: var(--hb-navy-ink);
    --bs-accordion-active-bg: var(--hb-sky-tint);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .22rem rgba(36, 176, 186, .3);
    --bs-accordion-border-radius: var(--hb-radius);
    --bs-accordion-inner-border-radius: calc(var(--hb-radius) - 1px);
}

/* ---------- 8. Print + motion ----------------------------------------- */
@media print {
    body { background: #fff !important; color: #000; }
    .card { box-shadow: none !important; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}