/* ==========================================================================
   One button look for the whole website.

   Every button and button-shaped link on the public site is gold, and it stays
   gold when hovered: the gold deepens, the button lifts a touch, and a soft
   sheen sweeps across it once, the way light crosses polished brass.
   Pages used to each paint their own buttons, so the site read as several
   sites; this one file is the single place that decides.

   It works by shape, not by a list of names: any <button>, any submit input and
   any link already carrying a button class is painted, so a button added on a
   new page is covered with nothing to remember. What must keep its own look is
   named in the one exclusion list below.

   Loaded last in the head (after each page's own styles) so it wins without
   needing !important on every line.

   Left alone on purpose:
     - the branch choosers: picking where you are is a choice between places,
       not an action;
     - small controls: quantity steppers, filter chips, category pills, slider
       arrows, photo thumbs, the menu opener, cookie choices, and the arrows in
       the side drawer;
     - every close cross, found by its Close label or its __x name: these are
       pinned over a photo by their own page, and the skin's own position and
       stacking would tear them out of place;
     - the floor cards on the booking page and the round badge under the home
       banner, which are pictures, not buttons;
     - choosers rather than actions: the tip amounts, the coupon chips a guest
       picks from, the way-to-pay options, the small Remove beside an applied
       coupon, and the day, time and number pickers on the booking pages;
     - anything marked .site-ctl: a control rather than an action. Removing a
       line from a basket, stepping to the next picture, opening a list or
       closing a panel are not the same kind of thing as Pay or Book, and must
       not wear the same gold. Mark those .site-ctl and they keep their own
       quiet look, set once at the foot of this file;
     - anything marked .btn-plain, for a one-off that must keep its own look.
   ========================================================================== */

:root {
    --site-btn-gold: var(--main-color, #e6b15f);
    --site-btn-gold-deep: #d99f4e;
    --site-btn-ink: #12241d;
    --site-btn-fill-a: #1f4e42;
    --site-btn-fill-b: var(--color-two, #152c29);
}

/* The one exclusion list, used by every rule below. */
.web-scope button:not(.btn-plain):not(.site-ctl):not(.qty-btn):not(.filter-btn):not(.category-btn):not(.type-btn):not(.arrow-btn):not(.menu-btn):not(.hamburger-btn):not(.bkt-arrow):not(.bkt-floor):not(.bkt-modal__x):not(.bg-thumb):not(.rc-thumb):not(.btn-expander):not(.bwn-day):not(.bwn-time):not(.bwn-step__b):not(.cookie-consent__btn):not(.mobile-menu-toggle):not(.ckt-tip__b):not(.ckt-coupon__x):not(.cpx-c):not(.of-pay__opt):not(.pay-opt):not(.scroll-top):not(.bpick-card):not(.bbp__card):not([data-bkt-modal-close]):not([aria-label="Close"]):not([class*="__x"]):not([class*="close"]):not([class*="toggle"]):not([class*="thumb"]):not([class*="dot"]):not([class*="tab"]),
.web-scope input[type="submit"],
.web-scope a.theme-btn,
.web-scope a[class*="btn"]:not(.btn-plain):not(.site-ctl):not(.filter-btn):not(.category-btn):not(.type-btn):not(.arrow-btn):not(.menu-btn):not(.branch-btn):not(.explore-menu-btn),
.web-scope .site-btn {
    position: relative;
    z-index: 0;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--site-btn-gold);
    background-image: linear-gradient(165deg, #f2cd84 0%, var(--site-btn-gold) 48%, var(--site-btn-gold-deep) 100%);
    border-color: var(--site-btn-gold);
    color: var(--site-btn-ink);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42), 0 6px 16px -10px rgba(9, 24, 19, .55);
    transition: color .4s ease, border-color .4s ease, transform .3s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease;
}

/* The fill that rises from the foot of the button. */
.web-scope button:not(.btn-plain):not(.site-ctl):not(.qty-btn):not(.filter-btn):not(.category-btn):not(.type-btn):not(.arrow-btn):not(.menu-btn):not(.hamburger-btn):not(.bkt-arrow):not(.bkt-floor):not(.bkt-modal__x):not(.bg-thumb):not(.rc-thumb):not(.btn-expander):not(.bwn-day):not(.bwn-time):not(.bwn-step__b):not(.cookie-consent__btn):not(.mobile-menu-toggle):not(.ckt-tip__b):not(.ckt-coupon__x):not(.cpx-c):not(.of-pay__opt):not(.pay-opt):not(.scroll-top):not(.bpick-card):not(.bbp__card):not([data-bkt-modal-close]):not([aria-label="Close"]):not([class*="__x"]):not([class*="close"]):not([class*="toggle"]):not([class*="thumb"]):not([class*="dot"]):not([class*="tab"])::after,
.web-scope a.theme-btn::after,
.web-scope a[class*="btn"]:not(.btn-plain):not(.site-ctl):not(.filter-btn):not(.category-btn):not(.type-btn):not(.arrow-btn):not(.menu-btn):not(.branch-btn):not(.explore-menu-btn)::after,
.web-scope .site-btn::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -12%;
    right: -12%;
    /* A band of light, tilted and soft edged, parked off the left side. On
       hover it crosses to the right and leaves the gold where it found it. */
    top: 0;
    height: 100%;
    background: linear-gradient(104deg, transparent 28%, rgba(255, 255, 255, .5) 50%, transparent 72%);
    transform: translateX(-130%);
    transition: transform .62s cubic-bezier(.3, .7, .3, 1);
    pointer-events: none;
}

.web-scope button:not(.btn-plain):not(.site-ctl):not(.qty-btn):not(.filter-btn):not(.category-btn):not(.type-btn):not(.arrow-btn):not(.menu-btn):not(.hamburger-btn):not(.bkt-arrow):not(.bkt-floor):not(.bkt-modal__x):not(.bg-thumb):not(.rc-thumb):not(.btn-expander):not(.bwn-day):not(.bwn-time):not(.bwn-step__b):not(.cookie-consent__btn):not(.mobile-menu-toggle):not(.ckt-tip__b):not(.ckt-coupon__x):not(.cpx-c):not(.of-pay__opt):not(.pay-opt):not(.scroll-top):not(.bpick-card):not(.bbp__card):not([data-bkt-modal-close]):not([aria-label="Close"]):not([class*="__x"]):not([class*="close"]):not([class*="toggle"]):not([class*="thumb"]):not([class*="dot"]):not([class*="tab"]):not(:disabled):hover,
.web-scope input[type="submit"]:hover,
.web-scope a.theme-btn:hover,
.web-scope a[class*="btn"]:not(.btn-plain):not(.site-ctl):not(.filter-btn):not(.category-btn):not(.type-btn):not(.arrow-btn):not(.menu-btn):not(.branch-btn):not(.explore-menu-btn):hover,
.web-scope .site-btn:hover {
    /* The words stay dark on gold, because the gold stays. */
    color: var(--site-btn-ink);
    background-image: linear-gradient(165deg, #f7d99a 0%, #eabc69 48%, var(--site-btn-gold-deep) 100%);
    border-color: var(--site-btn-gold-deep);
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 14px 26px -14px rgba(146, 100, 24, .68);
}

.web-scope button:not(.btn-plain):not(.site-ctl):not(.qty-btn):not(.filter-btn):not(.category-btn):not(.type-btn):not(.arrow-btn):not(.menu-btn):not(.hamburger-btn):not(.bkt-arrow):not(.bkt-floor):not(.bkt-modal__x):not(.bg-thumb):not(.rc-thumb):not(.btn-expander):not(.bwn-day):not(.bwn-time):not(.bwn-step__b):not(.cookie-consent__btn):not(.mobile-menu-toggle):not(.ckt-tip__b):not(.ckt-coupon__x):not(.cpx-c):not(.of-pay__opt):not(.pay-opt):not(.scroll-top):not(.bpick-card):not(.bbp__card):not([data-bkt-modal-close]):not([aria-label="Close"]):not([class*="__x"]):not([class*="close"]):not([class*="toggle"]):not([class*="thumb"]):not([class*="dot"]):not([class*="tab"]):not(:disabled):hover::after,
.web-scope a.theme-btn:hover::after,
.web-scope a[class*="btn"]:not(.btn-plain):not(.site-ctl):not(.filter-btn):not(.category-btn):not(.type-btn):not(.arrow-btn):not(.menu-btn):not(.branch-btn):not(.explore-menu-btn):hover::after,
.web-scope .site-btn:hover::after {
    transform: translateX(130%);
}

/* Everything inside a button rides along with the word colour. */
.web-scope button:hover *,
.web-scope a.theme-btn:hover *,
.web-scope a[class*="btn"]:hover *,
.web-scope .site-btn:hover * { color: inherit; }

/* The quieter twin: the same gold, drawn as an outline until it is hovered.
   The rule above carries a long exclusion chain, which outranks a plain class,
   so these say so plainly rather than being restated with the same chain.

   The gradient must be cleared as well as the colour. Clearing only
   background-color left the gold gradient painting underneath gold words, so
   these buttons read as a blank gold block until they were hovered. */
.web-scope .ap-btn--quiet,
.web-scope .ac-btn--quiet,
.web-scope .qc-btn--quiet,
.web-scope .inv-btn--ghost,
.web-scope .offer-btn--alt,
.web-scope .of-go--alt,
.web-scope .bshut__btn--quiet,
.web-scope .sc-ask__btn--ghost,
.web-scope .bpick-hours,
.web-scope .site-btn--quiet {
    background-color: transparent !important;
    background-image: none !important;
    border: 1px solid var(--site-btn-gold) !important;
    color: var(--site-btn-gold) !important;
    box-shadow: none !important;
}
.web-scope .ap-btn--quiet:hover,
.web-scope .ac-btn--quiet:hover,
.web-scope .qc-btn--quiet:hover,
.web-scope .inv-btn--ghost:hover,
.web-scope .offer-btn--alt:hover,
.web-scope .of-go--alt:hover,
.web-scope .bshut__btn--quiet:hover,
.web-scope .sc-ask__btn--ghost:hover,
.web-scope .bpick-hours:hover,
.web-scope .site-btn--quiet:hover {
    background-color: var(--site-btn-gold) !important;
    background-image: linear-gradient(165deg, #f2cd84 0%, var(--site-btn-gold) 48%, var(--site-btn-gold-deep) 100%) !important;
    color: var(--site-btn-ink) !important;
    border-color: var(--site-btn-gold) !important;
}

/* A last line of defence. Any page that paints its own gold words on a button
   the skin has already made gold would leave the words unreadable until they
   were hovered, so the ink colour is restated at the highest weight the skin
   uses. Pages that want quiet words use the outline twin above instead. */
.web-scope button:not(.btn-plain):not(.site-ctl):not([class*="quiet"]):not([class*="ghost"]):not([class*="alt"]):not(.bwn-day):not(.bwn-time):not(.bwn-step__b):not(.btn-expander):not(.bpick-hours):not([class*="close"]):not([class*="toggle"]):not([class*="thumb"]):not([class*="dot"]):not([class*="tab"]):not(.filter-btn):not(.category-btn):not(.type-btn):not(.qty-btn):not(.arrow-btn):not(.menu-btn):not(.hamburger-btn):not(.bkt-arrow):not(.bkt-floor):not(.bpick-card):not(.bbp__card):not(.cpx-c):not(.ckt-tip__b):not(.of-pay__opt):not(.pay-opt):not(.scroll-top),
.web-scope a.theme-btn,
.web-scope .site-btn:not([class*="quiet"]) {
    color: var(--site-btn-ink);
}
.web-scope button:not(.btn-plain):not(.site-ctl):not([class*="quiet"]):not([class*="ghost"]):not([class*="alt"]):hover,
.web-scope a.theme-btn:hover,
.web-scope .site-btn:not([class*="quiet"]):hover { color: var(--site-btn-ink); }

/* A button that cannot be pressed says so and stays still. */
.web-scope button:disabled { transform: none; box-shadow: none; opacity: .55; }
.web-scope button:disabled::after { content: none; }

/* ==========================================================================
   Controls, not actions.

   One quiet look for every small control on the site: a mark you can see on
   any background, brightening on hover, with no fill and no lift. An action
   asks for the eye; a control should not compete with the thing it sits beside.
   ========================================================================== */
/* Written with :where() so it carries no weight of its own: a page that wants
   its control to look a particular way simply says so and wins, without having
   to shout it down with !important. */
.web-scope :where(.site-ctl) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--site-btn-gold);
    font: inherit;
    line-height: 1;
    cursor: pointer;
    transition: color .18s ease, opacity .18s ease, transform .18s ease;
}
.web-scope :where(.site-ctl:hover) { color: #f2cd84; }
.web-scope :where(.site-ctl:disabled) { opacity: .4; cursor: not-allowed; }
.web-scope .site-ctl:focus-visible { outline: 2px solid var(--site-btn-gold); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
    .web-scope button, .web-scope button::after,
    .web-scope a[class*="btn"], .web-scope a[class*="btn"]::after,
    .web-scope .site-btn, .web-scope .site-btn::after { transition: none; }
}