/*
 * Stylesheet for the online booking page.
 *
 * Deliberately does NOT reuse sub.css: that file styles `body *` and bare `p` / `h1`
 * elements globally, which would override the typography the booking widget ships for
 * its own inputs, buttons and date picker. Header and footer rules are duplicated here
 * so the page still matches the rest of the site.
 *
 * The booking widget (React) brings its own component CSS, but expects the host page to
 * provide design tokens and a handful of global helper classes - both are defined below.
 */

@font-face {
    font-family: 'MessinaSans-Regular';
    src: url('../fonts/MessinaSans-Regular.eot');
    src: url('../fonts/MessinaSans-Regular.eot#iefix') format('embedded-opentype'),
    url('../fonts/MessinaSans-Regular.ttf') format('truetype'),
    url('../fonts/MessinaSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Barlow Condensed SemiBold (SIL OFL) stands in for the CI face DIN Condensed Bold, whose
   web licence the customer did not buy (07/10/2026). Only one cut ships, so the family is
   declared at weight normal - the browser must not synthesise a second bold on top. */
@font-face {
    font-family: 'BarlowCondensed-SemiBold';
    src: url('../fonts/BarlowCondensed-SemiBold.woff2') format('woff2'),
    url('../fonts/BarlowCondensed-SemiBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ---------------------------------------------------------------- brand tokens
 * Wirtshaus am Giggijoch corporate design: a light page - cream fading into orange -
 * carrying dark red copy. Red is the action colour, cream the colour on top of it.
 * Change the colours here only - every rule below reads them.
 */
:root {
    --gj-cream: #FDECD8;
    --gj-orange: #F7A941;
    --gj-red: #BC181B;
    --gj-dark: #881815;

    --gj-page: linear-gradient(180deg, #FDECD8 0%, #F7A941 100%);
    --gj-text: var(--gj-dark);
    --gj-heading: var(--gj-dark);
    --gj-accent: var(--gj-red);
    --gj-accent-hover: var(--gj-dark);
    --gj-on-accent: #FDECD8;      /* text on a red surface */
    --gj-surface: rgba(255, 255, 255, .55);   /* cards/fields on the gradient */
    --gj-surface-strong: #FFFFFF;
    --gj-border: rgba(136, 24, 21, .25);

    --gj-font-head: 'BarlowCondensed-SemiBold', 'Arial Narrow', sans-serif;
    --gj-font-body: 'MessinaSans-Regular', Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------- bridge to the widget variables
 * The widget bundle addresses its colours and fonts through the names below; this block
 * is the only place where they are bound to the Giggijoch palette.
 *
 * The names come from the light central-soelden page the widget was built for, so they
 * carry that page's meaning and map cleanly now that Giggijoch is light as well:
 * --black / --colorGrey / --white are text on the page, --grey / --beige are surfaces
 * under it, --orange is the action colour and --on-accent the label on top of it.
 * --white is the label on the --grey surface of an unavailable slot, so the two have to
 * stay a dark-on-light pair.
 *
 * There is no Garnett/Mondia on this site: the "medium" and display faces become Barlow
 * Condensed SemiBold, the light one MessinaSans - which also puts every bold run inside the
 * widget into the CI display face.
 */
:root {
    --orange: var(--gj-accent);
    --light-orange: var(--gj-accent-hover);
    /* text on the accent surface (slot buttons, submit buttons) */
    --on-accent: var(--gj-on-accent);
    --error-red: #B3261E;

    /* text */
    --black: var(--gj-text);
    --colorGrey: var(--gj-text);
    --white: var(--gj-text);
    --colorWhite: var(--gj-surface-strong);
    --greyLight: var(--gj-text);

    /* surfaces on the light gradient */
    --grey: rgba(136, 24, 21, .12);
    --beige: var(--gj-surface);
    --light-beige: var(--gj-surface-strong);
    --colorBeige: var(--gj-surface);
    --offWhite: var(--gj-surface-strong);

    --transition3s: ease-in-out .3s;
    --transition8s: ease-in-out .8s;

    --garnettLight: var(--gj-font-body);
    --garnettMedium: var(--gj-font-head);
    --mondiaBold: var(--gj-font-head);
    --mondiaThin: var(--gj-font-head);
    --rollerscript-smooth: var(--gj-font-head);
}

/* The select and date field inherit the page background (transparent) and would be
   invisible without an explicit surface.
   Everything the Hobex/OPPWA payment widget renders is excluded: its form is a descendant
   of this panel, but it ships its own light styling, so a colour set here landed on its
   fields as well. :where() keeps the specificity at (1,0,1), so the rule still wins where
   it should. */
#onlineBookingPanel select:not(:where([class*="wpwl-"])),
#onlineBookingPanel input:not(:where([class*="wpwl-"])) {
    background-color: var(--gj-surface-strong);
    color: var(--gj-text);
    border-color: var(--gj-border);
}

#onlineBookingPanel select:not(:where([class*="wpwl-"])) option {
    background-color: var(--gj-surface-strong);
    color: var(--gj-text);
}

/* Links inside the widget (phone, mail, terms, privacy) would otherwise render in the
   browser's default blue. Further down the page the gradient has turned orange, where the
   red accent no longer carries enough contrast for running text - so they take the dark
   red and an underline instead. */
#onlineBookingPanel a {
    color: var(--gj-text);
    text-decoration: underline;
}

/* Hover keeps the dark red: the accent red reaches only 3.26:1 against the orange end
   of the page gradient. The underline carries the state instead. */
#onlineBookingPanel a:hover,
#onlineBookingPanel a:focus {
    color: var(--gj-text);
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* The slot buttons are anchors too. The widget colours their labels itself - cream on a
   bookable slot, dark red on an unavailable one - so only the underline has to go, plus
   the display face for the times. */
#onlineBookingPanel a[role="button"],
#onlineBookingPanel a[role="button"]:hover,
#onlineBookingPanel a[role="button"]:focus {
    font-family: var(--gj-font-head);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .02em;
    text-decoration: none;
}

/* The accent surface sits on the wrapper div (a generated CSS-modules class, so it cannot
   be targeted by name) - drive the hover from there via :has().
   Bookable slots only: a slot that is greyed out must not look clickable. */
#onlineBookingPanel div:has(> a[role="button"]) {
    transition: background-color .25s ease;
}

#onlineBookingPanel div:has(> a[role="button"]:not([aria-disabled="true"])):hover {
    background-color: var(--light-orange);
    cursor: pointer;
}

/* react-tooltip ships a white label for every type except "light", and the widget paints
   the info tooltip in --grey - which is a pale surface on this page, so the text would
   disappear. The tooltip gets a dark plate of its own instead. The `html` prefix only
   raises the specificity past the widget's own !important rule; it also keeps working if
   the tooltip is ever rendered outside the panel. */
html .__react_component_tooltip.type-info {
    background-color: var(--gj-dark) !important;
    color: var(--gj-on-accent) !important;
}

html .__react_component_tooltip.type-info.place-top:after {
    border-top-color: var(--gj-dark) !important;
}

body {
    background: var(--gj-page);
    /* `fixed` pins the gradient to the viewport. The booking flow grows well past one
       screen in the guest-data and payment steps; without it the cream-to-orange ramp
       would repeat per screen height and show a hard seam at every wrap. */
    background-attachment: fixed;
    background-repeat: no-repeat;
    font-family: var(--gj-font-body);
    color: var(--gj-text);
}

/* ---------------------------------------------------------------- header / footer */
/* The logo is absolutely positioned, so the header has to reserve its full height
   (top offset + 191px wide at the SVG's 230:270 ratio = 224px + 24px air). At 230px the
   logo hung 40px into the page and covered the step 2 heading, which has no top margin. */
header {
    height: 293px;
}

header .logo {
    width: 191px;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: 45px;
}

/* Language switch, top right next to the centred logo. It sits on the cream end of the
   gradient, so a translucent white plate keeps the two labels legible. Only the booking
   page carries it: on the follow-up pages a language change would drop the guest back
   into an empty flow. */
.langSwitch {
    position: absolute;
    top: 50px;
    right: 40px;
    z-index: 10;
    display: flex;
    align-items: center;
    background: var(--gj-surface);
    border: 1px solid var(--gj-border);
    border-radius: 8px;
    overflow: hidden;
    font-family: var(--gj-font-head);
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.langSwitch a {
    color: var(--gj-text);
    font-family: var(--gj-font-head);
    text-decoration: none;
    padding: 7px 15px;
    line-height: 1;
    transition: background-color .25s ease, color .25s ease;
}

.langSwitch a:hover,
.langSwitch a:focus {
    background: var(--gj-surface-strong);
    color: var(--gj-text);
    text-decoration: none;
}

.langSwitch a.active,
.langSwitch a.active:hover,
.langSwitch a.active:focus {
    background: var(--gj-accent);
    color: var(--gj-on-accent);
    text-decoration: none;
}

footer {
    position: relative;
    margin: 60px 0;
}

footer .footerContent {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

footer p {
    color: var(--gj-text);
    font-size: 20px;
    margin-bottom: 0;
    line-height: unset;
}

/* Contrast on the orange end of the gradient (#F7A941, the worst case for the footer):
   --gj-text #881815 gives 4.89:1 and clears AA, so the resting colour stays. The former
   hover on --gj-accent #BC181B only reached 3.26:1 - the hover now keeps the dark red and
   marks itself with an underline instead. The base rule no longer needs !important:
   `footer a` is (0,0,2) and already outweighs Bootstrap's reboot `a` at (0,0,1). */
footer a {
    font-size: 20px;
    color: var(--gj-text);
    margin-left: 0;
    text-decoration: none;
}

footer a:hover {
    color: var(--gj-text);
    text-decoration: underline;
}

.bottomArea {
    display: flex;
    align-items: center;
}

/* The partner marks are white artwork drawn for the dark FALCON page; on the cream
   gradient they would disappear. They keep their own colours and get a red plate to sit
   on, which also gives the ice Q wordmark the light ground it needs. */
.bottomLeft {
    margin-top: 60px;
    background: var(--gj-red);
    border-radius: 8px;
    padding: 16px 28px;
}

.bottomLeft img {
    margin-right: 60px;
    height: 47px;
}

.bottomLeft a:last-of-type img {
    margin-right: 0;
}

.bottomLeft a {
    text-decoration: none;
    font-size: 0;
}

.bottomRight {
    margin-top: 60px;
    margin-left: 120px;
}

/* instagram.png, facebook.png and arrowtop.png are pure white artwork. The chain maps
   white onto --gj-dark (#881815); it replaces the colour wholesale, so nothing inside
   these two rules may rely on a border or background colour of its own. */
.bottomRight .socialMedia img,
#goToTop img {
    filter: invert(37%) sepia(98%) saturate(372%) hue-rotate(308deg) brightness(52%) contrast(197%);
}

.bottomRight .socialMedia a {
    transition: opacity .25s ease;
}

.bottomRight .socialMedia a:hover {
    opacity: .7;
}

.bottomRight .socialMedia img {
    width: 20px;
}

.bottomRight .socialMedia img:first-of-type {
    margin-right: 15px;
}

.bottomRight .privacy a {
    color: var(--gj-text);
    font-size: 10px;
    line-height: 23px;
}

.bottomRight .privacy a:not(:last-child) {
    margin-right: 20px;
}

#goToTop {
    display: none;
}

.mobileBorder {
    display: none;
}

/* ------------------------------------------------- helper classes for the widget
 * The widget renders <h2 class="variantScriptFont"> and <h1 class="default"> in its
 * header, plus Bootstrap-style spacing utilities. Scoped to the booking section so
 * they cannot leak into header/footer.
 */
#onlineBookingPanel h1,
#onlineBookingPanel .h1 {
    font-family: var(--mondiaBold), serif;
    font-size: 48px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--gj-heading);
    margin: 0 0 8px;
}

#onlineBookingPanel h2,
#onlineBookingPanel .h2 {
    font-family: var(--garnettMedium), sans-serif;
    font-size: 26px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--gj-heading);
    margin: 0 0 12px;
}

#onlineBookingPanel h3,
#onlineBookingPanel .h3 {
    font-family: var(--garnettMedium), sans-serif;
    font-size: 22px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--gj-heading);
}

#onlineBookingPanel .variantScriptFont {
    font-family: var(--rollerscript-smooth), serif;
    color: var(--gj-accent);
    font-size: 32px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .02em;
    font-weight: normal;
}

#onlineBookingPanel .default {
    font-family: var(--mondiaBold), serif;
}

#onlineBookingPanel .thin {
    font-weight: 300;
}

#onlineBookingPanel .overrideMobileFont {
    font-size: inherit;
}

#onlineBookingPanel .singleColumnText {
    column-count: 1;
}

.mb-16 {
    margin-bottom: 16px;
}

/* ------------------------------------------------- Hobex/OPPWA payment mask
 * The widget renders its own form into .paymentWidgets, inside the white modal the
 * booking widget puts around it. Card number and CVV are hosted in iframes on oppwa.com:
 * their frame can be styled from here, the text inside them only through wpwlOptions.
 * The mask therefore stays deliberately light - dark text on white fields - and only the
 * frame is pulled towards the palette. Nothing in here may set a light text colour or a
 * dark field background, or the card number turns invisible. In particular --gj-on-accent
 * is cream and belongs on the red pay button only, never on a label inside the modal.
 */
.paymentWidgets {
    max-width: 100%;
}

#onlineBookingPanel .wpwl-form-card {
    background: transparent;
    box-shadow: none;
    padding-bottom: 0;
}

#onlineBookingPanel .wpwl-label {
    color: var(--gj-text);
}

/* 16px on the merchant-side fields keeps iOS Safari from zooming in on focus. The two
   iframe fields keep OPPWA's own size - a font-size set here cannot reach into them. */
#onlineBookingPanel .wpwl-wrapper {
    font-size: 16px;
}

/* .wpwl-control covers every real input plus the brand select, .wpwl-control-iframe is the
   iframe element of card number and CVV. :not(.wpwl-has-error) is load bearing: OPPWA's
   error state is only (0,2,0) and would otherwise lose to the id here, and an invalid card
   would stop turning red. */
#onlineBookingPanel .wpwl-control:not(.wpwl-has-error),
#onlineBookingPanel .wpwl-control-iframe:not(.wpwl-has-error) {
    background-color: #FFFFFF;
    color: var(--gj-text);
    font-size: 16px;
    border: 1px solid #B9C4D1 !important;
    border-radius: 4px;
    box-shadow: none !important;
}

#onlineBookingPanel .wpwl-control:not(.wpwl-has-error):focus,
#onlineBookingPanel .wpwl-control-iframe:not(.wpwl-has-error):focus,
#onlineBookingPanel .wpwl-control-iframe:not(.wpwl-has-error):focus-within {
    border-color: var(--orange) !important;
    outline: none;
}

#onlineBookingPanel .wpwl-button-pay {
    background: var(--orange) !important;
    border: 0 !important;
    border-radius: 4px;
    color: var(--gj-on-accent) !important;
    font-family: var(--gj-font-head);
    text-transform: uppercase;
    letter-spacing: .02em;
    outline: none !important;
}

@media screen and (max-width: 1025px) {
    /* 30px + 236px logo + 24px air */
    header {
        height: 290px;
    }

    header .logo {
        width: 201px;
        top: 30px;
    }

    .langSwitch {
        top: 30px;
        right: 20px;
        font-size: 15px;
    }

    .langSwitch a {
        padding: 6px 13px;
    }

    .mobileBorder {
        width: 100%;
        margin: 60px auto 0;
        height: .8px;
        background: var(--gj-border);
        display: block;
    }

    /* The ring lives on the link, the arrow on the image: the recolouring filter above
       would otherwise drag the border along into an unpredictable tint. */
    #goToTop {
        display: inline-block;
        margin: 0 0 40px;
        border: 1px solid var(--gj-border);
        border-radius: 50%;
        line-height: 0;
    }

    #goToTop img {
        display: block;
        border: 0;
        padding: 15px;
        width: 54px;
        height: 54px;
    }

    #onlineBookingPanel h1,
    #onlineBookingPanel .h1 {
        font-size: 30px;
    }

    #onlineBookingPanel .variantScriptFont {
        font-size: 24px;
    }

    footer .footerContent {
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .bottomArea,
    .bottomLeft {
        flex-direction: column;
        text-align: center;
    }

    /* .bottomLeft is a plain block on desktop, so the flex-direction above had nothing
       to act on and the three partner logos stayed on one line and overlapped. Same
       rule main.css already applies on the start page. */
    .bottomLeft {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 28px;
    }

    .bottomLeft img {
        margin-right: 0;
        margin-bottom: 50px;
    }

    /* Stacked on the red plate the last logo would push its 50px against the padding. */
    .bottomLeft a:last-of-type img {
        margin-bottom: 0;
    }

    .bottomRight {
        margin-top: 0;
        margin-left: 0;
    }
}