/* ==========================================================================
   Kish — the app's own surfaces, in the template's language.

   main.css is the template as delivered and stays untouched, so it can be
   re-copied when the template is updated. This file covers the four things the
   static template has no equivalent for — the operational runtime notice, the
   cookie bar, the toast and the server cart's basket lines — plus the basket
   line markup the template's own JS emits but its CSS never styled.

   Every value here is a token from main.css. Nothing invents a new colour.
   ========================================================================== */

/* --------------------------------------------------------- basket lines */
/* main.js writes .bline / .basket__empty into the drawer, but main.css only
   styles .basket__mt. The server cart reuses the same class names, so these
   fill the gap for both. */

.basket__empty {
    text-align: center;
    padding: 70px 10px;
    color: var(--muted);
}

.basket__empty svg {
    width: 46px;
    height: 46px;
    color: var(--gold-deep);
    margin: 0 auto 20px;
    display: block;
}

.basket__empty p {
    margin: 0 0 6px;
}

.bline {
    display: grid;
    grid-template-columns: 62px 1fr auto;
    gap: 16px;
    align-items: start;
    padding: 20px 0;
    border-bottom: 1px solid var(--line-2);
}

.bline:last-child {
    border-bottom: 0;
}

.bline__img {
    width: 62px;
    height: 62px;
    background: var(--panel-2);
    border: 1px solid var(--line-2);
    position: relative;
    overflow: hidden;
}

/* The brass corner mark the template uses on every square thumbnail. */
.bline__img::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 14px;
    height: 14px;
    background: var(--brass);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.bline__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bline__name {
    margin: 0 0 4px;
    font-family: var(--serif);
    font-size: 1rem;
    color: var(--cream);
    line-height: 1.3;
}

.bline__sub {
    font-size: .78rem;
    color: var(--muted);
}

.bline__rm {
    margin-top: 9px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--faint);
    font-family: var(--sc);
    font-size: .68rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .25s;
}

.bline__rm:hover {
    color: var(--rose);
}

.bline__price {
    font-family: var(--serif);
    font-size: 1.05rem;
    color: var(--gold-hi);
    white-space: nowrap;
}

/* ------------------------------------------------- operational notice */
/* Shown above the whole site when the runtime is in safe mode or preview. */

.runtime-notice {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px var(--gut);
    position: relative;
    z-index: 1200;
    font-family: var(--sans);
    font-size: .88rem;
    border-bottom: 1px solid var(--line);
}

.runtime-notice--safe_mode {
    background: #2a1412;
    color: #f0c9c2;
    border-bottom-color: rgba(215, 169, 140, .3);
}

.runtime-notice--demo {
    background: var(--panel-2);
    color: var(--gold-hi);
}

.runtime-notice__icon {
    font-size: 19px;
    line-height: 1.3;
}

.runtime-notice__headline {
    margin: 0 0 3px;
    font-family: var(--sc);
    font-size: .76rem;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.runtime-notice__message {
    margin: 0;
    color: inherit;
    opacity: .85;
}

/* ------------------------------------------------------- cookie notice */

.cookie-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1300;
    padding: 0 var(--gut) calc(18px + env(safe-area-inset-bottom));
}

.cookie-consent[hidden] {
    display: none;
}

.cookie-consent__panel {
    max-width: var(--shell);
    margin: 0 auto;
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 22px 26px;
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    box-shadow: var(--lift);
}

.cookie-consent__title {
    margin: 0 0 5px;
    font-family: var(--serif);
    font-size: 1.1rem;
    color: var(--cream);
}

.cookie-consent__message {
    margin: 0;
    color: var(--body);
    font-size: .86rem;
    max-width: 720px;
    line-height: 1.6;
}

.cookie-consent__actions {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

@media (max-width: 720px) {
    .cookie-consent__panel {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-consent__actions {
        justify-content: stretch;
    }

    .cookie-consent__actions .btn {
        flex: 1;
    }
}

/* Above the mobile dock, which owns the bottom of the screen under 860px. */
@media (max-width: 860px) {
    .cookie-consent {
        bottom: 74px;
    }
}

/* -------------------------------------------------------------- toast */
/* One short confirmation at the foot of the page. Matches the template's own
   .toast, but is a single fixed element the whole site can call. */

.site-toast {
    position: fixed;
    inset-inline: var(--gut);
    bottom: 28px;
    z-index: 4000;
    margin-inline: auto;
    width: fit-content;
    max-width: min(430px, 92vw);
    padding: 15px 20px;
    background: var(--panel-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    color: var(--cream);
    font-family: var(--sans);
    font-size: .89rem;
    box-shadow: var(--lift);
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .3s var(--ease), transform .4s var(--ease);
}

.site-toast.is-on {
    opacity: 1;
    transform: translateY(0);
}

.site-toast.is-bad {
    border-left-color: var(--rose);
}

.site-toast[hidden] {
    display: none;
}

@media (max-width: 860px) {
    .site-toast {
        bottom: 84px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .site-toast {
        transition: none;
    }
}

/* ------------------------------------------------------ form feedback */
/* Laravel validation errors and flash messages, styled like the template's
   own inline notes so a failed booking reads as part of the page. */

.formnote {
    padding: 15px 20px;
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    background: var(--panel);
    color: var(--body);
    font-size: .88rem;
    margin-bottom: 24px;
}

.formnote--bad {
    border-left-color: var(--rose);
}

.formnote ul {
    margin: 8px 0 0;
    padding-inline-start: 18px;
}

.formnote li + li {
    margin-top: 4px;
}

/* -------------------------------------------- bridge for the working pages */
/* Five pages keep their original markup because their logic is the product,
   not the decoration: the event ticket flow, the branch page, the two booking
   flows and checkout. Each already carries its own dark-and-gold styling; the
   only thing they borrowed from the retired theme was its container. This maps
   it onto the template's shell so they line up with every other page. */

.auto-container {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gut);
}

/* The three order pages (cart, order status, order tracking) still open with the
   retired theme's banner markup. Rather than rewrite flows that work, the old
   class names are given the template's page-opener look, so they match the
   `.phead` every other page uses. */

.inner-banner {
    position: relative;
    overflow: hidden;
    background: var(--panel);
    border-bottom: 1px solid var(--line-2);
    padding: clamp(90px, 12vw, 150px) 0 clamp(48px, 7vw, 84px);
}

.inner-banner .image-layer {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .3;
}

.inner-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 9, 8, .5) 0%, rgba(10, 9, 8, .85) 100%);
}

.inner-banner .auto-container {
    position: relative;
    z-index: 2;
}

.inner-banner .subtitle {
    font-family: var(--sc);
    font-size: .76rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 14px;
}

.inner-banner h1 {
    font-family: var(--serif);
    font-size: clamp(2.4rem, 5.4vw, 4rem);
    line-height: 1.04;
    color: var(--cream);
    margin: 0;
}

/* ------------------------------------- the retired theme's colour variables */
/* Five pages keep their original markup, and that markup asks for the old
   theme's variables — a green ground and a warmer gold. The stylesheet that
   defined them is gone, so each usage was falling back to the green written
   beside it. Pointing the old names at the template's own tokens turns those
   pages the right colour without touching their markup. */

:root {
    --main-color: var(--gold);
    --main-color-hi: var(--gold-hi);
    --color-one: var(--panel-2);
    --color-two: var(--night);
    --color-three: var(--panel-3);
    --text-color: var(--body);
    --title-color: var(--cream);
}