/**
 * Theme: Golden Noir — dark price-list cards with a warm metallic accent.
 * Scoped by the bookly-theme-golden-noir class on the form container.
 *
 * Rules target semantic marks. Role marks cover whole element families:
 *   bookly-card-mark        any card (service, package, gift card, event, cart)
 *   bookly-card-title-mark  any card title row
 *   bookly-card-price-mark  any card price row
 *   bookly-card-text-mark   any card field row
 *   bookly-panel-mark       secondary surface (calendar, chips, steppers, bars)
 *   bookly-divider-mark     standalone divider lines
 *   bookly-muted-mark       secondary text
 * Option values come as custom properties (--bookly-theme-*).
 * Static color fallbacks precede color-mix() for older browsers.
 */

/* The form is a self-contained dark block: it brings its own background,
   so the theme looks right on any page, light or dark. The background sits on
   the form root, covering the picker stages of services/staff/tags forms too;
   the white frame wrapper (bookly-form-frame-mark) goes transparent. */
.bookly-theme-golden-noir .bookly-css-root {
    background: linear-gradient(180deg, #26211d 0%, #1e1a17 60%, #181512 100%);
    background: linear-gradient(180deg, color-mix(in srgb, var(--bookly-theme-bg) 96%, white) 0%, var(--bookly-theme-bg) 60%, color-mix(in srgb, var(--bookly-theme-bg) 90%, black) 100%);
    color: var(--bookly-theme-text);
    /* Card shadows (mods/card-shadow.css) tinted for the dark surface. */
    --bookly-shadow-color: rgba(0, 0, 0, .5);
    --bookly-shadow-color-hover: rgba(0, 0, 0, .6);
}

.bookly-theme-golden-noir .bookly-css-root .bookly-form-frame-mark {
    background: transparent !important;
    border-color: rgba(216, 171, 108, .35) !important;
    border-color: color-mix(in srgb, var(--bookly-theme-accent) 35%, transparent) !important;
}

.bookly-theme-golden-noir .bookly-css-root .bookly-search-form {
    background: transparent !important;
    border: none !important;
    padding: 20px !important;
}

/* Card: graphite surface, accent frame, deep shadow; dark hover. */
.bookly-theme-golden-noir .bookly-css-root .bookly-card-mark {
    position: relative !important;
    background: #2e2823 !important;
    background: color-mix(in srgb, var(--bookly-theme-bg) 93%, white) !important;
    border: 2px solid rgba(216, 171, 108, .55) !important;
    border-color: color-mix(in srgb, var(--bookly-theme-accent) 55%, transparent) !important;
}

.bookly-theme-golden-noir .bookly-css-root .bookly-card-mark:hover,
.bookly-theme-golden-noir .bookly-css-root .bookly-card-mark:hover .bookly-card-body-mark {
    background: #3a322b !important;
    background: color-mix(in srgb, var(--bookly-theme-bg) 87%, white) !important;
}

.bookly-theme-golden-noir .bookly-css-root .bookly-card-mark:hover {
    border-color: var(--bookly-theme-accent) !important;
}

/* Accent rule between the image and the card body. */
.bookly-theme-golden-noir .bookly-css-root .bookly-card-mark .bookly-card-header-mark {
    border-bottom: 1px solid rgba(216, 171, 108, .55) !important;
    border-bottom-color: color-mix(in srgb, var(--bookly-theme-accent) 55%, transparent) !important;
}

.bookly-theme-golden-noir .bookly-css-root .bookly-card-body-mark {
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Price-list look: no field icons. */
.bookly-theme-golden-noir .bookly-css-root .bookly-card-mark i[class^="bi-"],
.bookly-theme-golden-noir .bookly-css-root .bookly-card-mark i[class*=" bi-"] {
    display: none !important;
}

/* Roles: titles, prices, field rows, muted texts, dividers, panels. */
.bookly-theme-golden-noir .bookly-css-root .bookly-card-text-mark {
    color: #9b8a70;
    color: color-mix(in srgb, var(--bookly-theme-text) 60%, var(--bookly-theme-bg));
}

.bookly-theme-golden-noir .bookly-css-root .bookly-card-title-mark {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--bookly-theme-accent);
    margin-bottom: 4px !important;
}

.bookly-theme-golden-noir.bookly-mod-price-badge .bookly-css-root .bookly-card-price-mark {
    position: absolute;
    top: calc(var(--bookly-header-height, 170px) - 22px);
    right: 14px;
    margin: 0 !important;
    padding: 4px 14px !important;
    background: var(--bookly-theme-accent);
    color: var(--bookly-theme-bg);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
}

.bookly-theme-golden-noir .bookly-css-root .bookly-muted-mark {
    color: #9b8a70 !important;
    color: color-mix(in srgb, var(--bookly-theme-text) 60%, var(--bookly-theme-bg)) !important;
}

.bookly-theme-golden-noir .bookly-css-root .bookly-divider-mark {
    border-color: rgba(216, 171, 108, .35) !important;
    border-color: color-mix(in srgb, var(--bookly-theme-accent) 35%, transparent) !important;
}

.bookly-theme-golden-noir .bookly-css-root .bookly-panel-mark {
    background: #241f1b !important;
    background: color-mix(in srgb, var(--bookly-theme-bg) 97%, white) !important;
    border-color: rgba(216, 171, 108, .45) !important;
    border-color: color-mix(in srgb, var(--bookly-theme-accent) 45%, transparent) !important;
    box-shadow: none !important;
    color: var(--bookly-theme-text);
}

/* Field-specific touches on top of the roles. */
.bookly-theme-golden-noir .bookly-css-root .bookly-service-duration-mark {
    font-size: 11px;
    letter-spacing: .16em;
    margin-bottom: 4px !important;
}

/* Staff as a caption under an accent divider. */
.bookly-theme-golden-noir .bookly-css-root .bookly-service-staff-mark {
    font-size: 11px;
    letter-spacing: .14em;
    border-top: 1px solid rgba(216, 171, 108, .25);
    border-top-color: color-mix(in srgb, var(--bookly-theme-accent) 25%, transparent);
    padding-top: 10px !important;
}

.bookly-theme-golden-noir .bookly-css-root .bookly-service-staff-mark::before {
    content: "with\00a0";
}

/* Chips over the photo (category / gift card / staff / event badges) follow
   the price badge look and seating: solid accent, dark text, no frame,
   riding the lower edge of the image. Badges sit left, prices sit right,
   so cards carrying both (events, gift cards) never collide. */
.bookly-theme-golden-noir .bookly-css-root .bookly-card-badge-mark {
    background: var(--bookly-theme-accent) !important;
    border: none !important;
    color: var(--bookly-theme-bg) !important;
    font-weight: 700;
    letter-spacing: .06em;
    font-size: 15px;
    right: 14px !important;
    left: auto !important;
    bottom: -6px !important;
    padding: 4px 14px !important;
}

/* Cards carrying both a badge and a price (events, gift cards with the chip
   enabled): the badge stacks above the price on the same right edge. */
.bookly-theme-golden-noir .bookly-css-root .bookly-card-mark:has(.bookly-card-price-mark) .bookly-card-badge-mark {
    bottom: 30px !important;
}

/* Breadcrumbs: separators muted, the current (disabled) crumb stays readable. */
.bookly-theme-golden-noir .bookly-css-root .bookly-breadcrumbs-mark [class*="text-gray-600"] {
    color: #9b8a70 !important;
    color: color-mix(in srgb, var(--bookly-theme-text) 60%, var(--bookly-theme-bg)) !important;
}

.bookly-theme-golden-noir .bookly-css-root .bookly-breadcrumbs-mark button:disabled,
.bookly-theme-golden-noir .bookly-css-root .bookly-breadcrumbs-mark button[disabled] {
    color: var(--bookly-theme-text) !important;
    opacity: 1 !important;
}

/* Card back side (chain/multiply flip). */
.bookly-theme-golden-noir .bookly-css-root .bookly-flip-back {
    color: var(--bookly-theme-text);
}

.bookly-theme-golden-noir .bookly-css-root .bookly-back-qty-mark input {
    color: var(--bookly-theme-text) !important;
}

.bookly-theme-golden-noir .bookly-css-root .bookly-back-price-mark {
    color: var(--bookly-theme-accent) !important;
}

/* Calendar internals: vendored markup, no marks available inside. */
.bookly-theme-golden-noir .bookly-css-root .bookly-search-form-calendar * {
    border-color: rgba(216, 171, 108, .25) !important;
    border-color: color-mix(in srgb, var(--bookly-theme-accent) 25%, transparent) !important;
}

.bookly-theme-golden-noir .bookly-css-root .bookly-search-form-calendar [class*="text-slate-600"] {
    color: var(--bookly-theme-text) !important;
}

.bookly-theme-golden-noir .bookly-css-root .bookly-search-form-calendar [class*="text-slate-400"],
.bookly-theme-golden-noir .bookly-css-root .bookly-search-form-calendar [class*="text-muted"],
.bookly-theme-golden-noir .bookly-css-root .bookly-search-form-calendar [class*="text-gray-400"] {
    color: #7d6f5c !important;
    color: color-mix(in srgb, var(--bookly-theme-text) 45%, var(--bookly-theme-bg)) !important;
}

.bookly-theme-golden-noir .bookly-css-root .bookly-search-form-calendar [class*="bg-slate-100"] {
    background: #241f1b !important;
    background: color-mix(in srgb, var(--bookly-theme-bg) 97%, white) !important;
    color: #6a5e4e !important;
    color: color-mix(in srgb, var(--bookly-theme-text) 38%, var(--bookly-theme-bg)) !important;
}

/* Calendar header controls (prev / month-year label / next): the product paints
   them as main-color pills; over the gold accent the theme's light text override
   loses contrast — keep the header flat on the dark panel instead. */
.bookly-theme-golden-noir .bookly-css-root .bookly-search-form-calendar .bookly-calendar-left-button-mark,
.bookly-theme-golden-noir .bookly-css-root .bookly-search-form-calendar .bookly-calendar-middle-button-mark,
.bookly-theme-golden-noir .bookly-css-root .bookly-search-form-calendar .bookly-calendar-right-button-mark {
    background: transparent !important;
    color: var(--bookly-theme-text) !important;
}

.bookly-theme-golden-noir .bookly-css-root .bookly-search-form-calendar .bookly-calendar-left-button-mark:hover,
.bookly-theme-golden-noir .bookly-css-root .bookly-search-form-calendar .bookly-calendar-middle-button-mark:hover,
.bookly-theme-golden-noir .bookly-css-root .bookly-search-form-calendar .bookly-calendar-right-button-mark:hover {
    background: rgba(216, 171, 108, .18) !important;
    background: color-mix(in srgb, var(--bookly-theme-accent) 18%, transparent) !important;
}

.bookly-theme-golden-noir .bookly-css-root .bookly-search-form-calendar .bookly-calendar-left-button-mark[disabled="true"],
.bookly-theme-golden-noir .bookly-css-root .bookly-search-form-calendar .bookly-calendar-right-button-mark[disabled="true"] {
    color: #6a5e4e !important;
    color: color-mix(in srgb, var(--bookly-theme-text) 38%, var(--bookly-theme-bg)) !important;
    background: transparent !important;
}

/* Selects: the styled element is the native select inside the marked container. */
.bookly-theme-golden-noir .bookly-css-root .bookly-select-container select {
    background: #2e2823 !important;
    background: color-mix(in srgb, var(--bookly-theme-bg) 93%, white) !important;
    border-color: rgba(216, 171, 108, .45) !important;
    border-color: color-mix(in srgb, var(--bookly-theme-accent) 45%, transparent) !important;
    color: var(--bookly-theme-text) !important;
}

.bookly-theme-golden-noir .bookly-css-root .bookly-select-container label,
.bookly-theme-golden-noir .bookly-css-root .bookly-select-container [class*="text-slate"] {
    color: #9b8a70 !important;
    color: color-mix(in srgb, var(--bookly-theme-text) 60%, var(--bookly-theme-bg)) !important;
}

/* Inputs and menu triggers (search field, date filter) on the dark surface. */
.bookly-theme-golden-noir .bookly-css-root .bookly-input-mark {
    background: #241f1b !important;
    background: color-mix(in srgb, var(--bookly-theme-bg) 97%, white) !important;
    border-color: rgba(216, 171, 108, .45) !important;
    border-color: color-mix(in srgb, var(--bookly-theme-accent) 45%, transparent) !important;
    color: var(--bookly-theme-text) !important;
}

.bookly-theme-golden-noir .bookly-css-root .bookly-input-mark::placeholder {
    color: #9b8a70;
    color: color-mix(in srgb, var(--bookly-theme-text) 60%, var(--bookly-theme-bg));
}

.bookly-theme-golden-noir .bookly-css-root .bookly-input-mark ~ label,
.bookly-theme-golden-noir .bookly-css-root .bookly-input-mark [class*="text-gray-600"],
.bookly-theme-golden-noir .bookly-css-root .bookly-input-mark [class*="text-slate"] {
    color: #9b8a70 !important;
    color: color-mix(in srgb, var(--bookly-theme-text) 60%, var(--bookly-theme-bg)) !important;
}

/* Dropdown panels (date filter options). */
.bookly-theme-golden-noir .bookly-css-root .bookly-dropdown-mark {
    background: #2e2823 !important;
    background: color-mix(in srgb, var(--bookly-theme-bg) 93%, white) !important;
    border-color: rgba(216, 171, 108, .45) !important;
    border-color: color-mix(in srgb, var(--bookly-theme-accent) 45%, transparent) !important;
    color: var(--bookly-theme-text) !important;
}

.bookly-theme-golden-noir .bookly-css-root .bookly-dropdown-mark [class*="hover:bg-gray-100"]:hover,
.bookly-theme-golden-noir .bookly-css-root .bookly-dropdown-mark [class*="focus:bg-gray-100"]:focus {
    background: #3a322b !important;
    background: color-mix(in srgb, var(--bookly-theme-bg) 87%, white) !important;
}

/* Active filter chips (events form): dark pills in the input palette. */
.bookly-theme-golden-noir .bookly-css-root .bookly-filter-chips-mark button {
    background: #241f1b !important;
    background: color-mix(in srgb, var(--bookly-theme-bg) 97%, white) !important;
    border-color: rgba(216, 171, 108, .45) !important;
    border-color: color-mix(in srgb, var(--bookly-theme-accent) 45%, transparent) !important;
    color: var(--bookly-theme-text) !important;
}

.bookly-theme-golden-noir .bookly-css-root .bookly-filter-chips-mark button:hover {
    background: rgba(216, 171, 108, .8) !important;
    background: color-mix(in srgb, var(--bookly-theme-accent) 80%, transparent) !important;
    border-color: rgba(216, 171, 108, .8) !important;
    border-color: color-mix(in srgb, var(--bookly-theme-accent) 80%, transparent) !important;
    color: var(--bookly-theme-bg) !important;
}

/* Warning notices ("No results found"): mute the ivory box into the dark
   palette. Success/error notices keep their semantic colors. */
.bookly-theme-golden-noir .bookly-css-root .bookly-notice-mark[class*="amber"] {
    background: #241f1b !important;
    background: color-mix(in srgb, var(--bookly-theme-bg) 97%, white) !important;
    border-color: rgba(216, 171, 108, .45) !important;
    border-color: color-mix(in srgb, var(--bookly-theme-accent) 45%, transparent) !important;
    color: var(--bookly-theme-text) !important;
}

/* The calendar panel (date strip / expanded month) matches the filter inputs:
   same border — the component itself renders the panel borderless. */
.bookly-theme-golden-noir .bookly-css-root .bookly-search-form-calendar .bookly-panel-mark {
    border: 1px solid rgba(216, 171, 108, .45) !important;
    border-color: color-mix(in srgb, var(--bookly-theme-accent) 45%, transparent) !important;
}

/* Mobile filters toggle button follows the input controls, not the stock
   white accent button. */
.bookly-theme-golden-noir .bookly-css-root .bookly-filters-toggle-mark button {
    background: #241f1b !important;
    background: color-mix(in srgb, var(--bookly-theme-bg) 97%, white) !important;
    border-color: rgba(216, 171, 108, .45) !important;
    border-color: color-mix(in srgb, var(--bookly-theme-accent) 45%, transparent) !important;
    color: var(--bookly-theme-accent) !important;
}

.bookly-theme-golden-noir .bookly-css-root .bookly-filters-toggle-mark button:hover {
    background: var(--bookly-theme-accent) !important;
    color: var(--bookly-theme-bg) !important;
}