/* Shared styles for getbord.eu pages (index, restaurant-page). */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}
.editorial-shadow { box-shadow: 0px 12px 32px rgba(28, 28, 23, 0.06); }
.feature-shot { box-shadow: 0 28px 64px rgba(6, 27, 14, 0.12); }
.btn-gradient { background: linear-gradient(to bottom right, #061b0e, #1b3022); }
.no-line-rule { border: none !important; }
body { -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.9s ease, transform 0.9s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
.booking-card { background: #ffffff; }
.slot {
    border-radius: 12px; padding: 10px; text-align: left; background: #f6f3ea;
    box-shadow: inset 0 0 0 1.5px rgba(195, 200, 193, 0.4);
    transition: background-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease;
}
.slot.is-sig { background: var(--sig-cream); box-shadow: inset 0 0 0 1.5px var(--sig-gold-light); }
.slot.is-on { background: #1b3022; color: #fff; box-shadow: none; }
.slot.is-on .slot-caption, .slot.is-on .slot-mark { color: rgba(255, 255, 255, 0.8) !important; }
.date-chip .day-badge { background: var(--sig-grad); color: var(--sig-ink); }
.date-chip.is-date .day-badge { background: #fff; }
/* Signaturtid: the app's gold (ios Rewards.swift SignatureStyle, Theme.swift signature*)
   and the web booking flow (frontend BookingFlow.vue --wb-gold*). */
:root {
    --sig-gold: #9a7128;
    --sig-gold-light: #e6cd8e;
    --sig-cream: #f7eedb;
    --sig-ink: #3b2806;
    --sig-grad: linear-gradient(135deg, #b98a36 0%, #e6cd8e 50%, #b1822f 100%);
}
.sig-gold { color: var(--sig-gold); }
.sig-gold-text { background: var(--sig-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sig-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sig-gold); }
/* "✦ SIGNATURTID 17:30" hallmark (SignatureSeal). */
.sig-seal {
    position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px; border-radius: 999px; background: var(--sig-grad); color: var(--sig-ink);
    font-size: 10px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
    box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.55), 0 2px 6px rgba(0, 0, 0, 0.18);
}
.sig-seal::after, .sig-dark::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%);
    transform: translateX(-100%); animation: sigSheen 1.1s ease-in-out 0.4s 1 forwards;
}
.sig-dark::after { background: linear-gradient(105deg, transparent 35%, rgba(255, 240, 200, 0.16) 50%, transparent 65%); animation: sigSheenLoop 6s ease-in-out 0.6s infinite; }
@keyframes sigSheen { to { transform: translateX(100%); } }
@keyframes sigSheenLoop { 0% { transform: translateX(-100%); } 35%, 100% { transform: translateX(100%); } }
/* Gold-ringed icon (RewardCard). */
.sig-icon {
    width: 32px; height: 32px; flex-shrink: 0; border-radius: 999px; display: grid; place-items: center;
    background: var(--sig-grad); color: var(--sig-ink);
}
.sig-icon .material-symbols-outlined { font-size: 18px; font-variation-settings: 'FILL' 1, 'wght' 600; }
/* Light reward card (RewardCard): cream with a gold hairline. */
.sig-card { background: var(--sig-cream); border: 1px solid var(--sig-gold-light); border-radius: 14px; }
/* Cream with a gold gradient border (signature menu row). */
.sig-frame { border: 1px solid transparent; background: linear-gradient(var(--sig-cream), var(--sig-cream)) padding-box, var(--sig-grad) border-box; }
/* Dark signature card (web booking flow). */
.sig-dark {
    position: relative; overflow: hidden; color: #f4e6c4; border: 1px solid transparent;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(230, 205, 142, 0.22), transparent 55%) padding-box,
        linear-gradient(160deg, #2a221a, #120e0a) padding-box,
        var(--sig-grad) border-box;
    box-shadow: 0 10px 30px rgba(28, 20, 8, 0.22);
}
.sig-dark-icon {
    width: 44px; height: 44px; flex-shrink: 0; border-radius: 999px; display: grid; place-items: center; color: #f1dfb1;
    background: rgba(230, 205, 142, 0.12); box-shadow: inset 0 0 0 1px rgba(230, 205, 142, 0.45);
}
/* Gold time pill with a ✦ star (web booking flow). */
.sig-time {
    position: relative; display: inline-grid; place-items: center; height: 40px; min-width: 72px; padding: 0 14px;
    border-radius: 999px; font-weight: 600; font-variant-numeric: tabular-nums; color: #f1dfb1; border: 1.5px solid transparent;
    background: linear-gradient(160deg, #2a221a, #15110d) padding-box, var(--sig-grad) border-box;
    box-shadow: 0 4px 14px rgba(154, 113, 40, 0.28);
}
.sig-time-star {
    position: absolute; top: -7px; right: -2px; font-size: 10px; line-height: 1; padding: 2px 4px; border-radius: 999px;
    background: var(--sig-grad); color: #2b1d05; box-shadow: 0 0 0 2px #fff;
}
.plain-time {
    display: inline-grid; place-items: center; height: 40px; min-width: 72px; padding: 0 14px; border-radius: 999px;
    border: 1px solid #e8e2d9; background: #fff; font-weight: 500; font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
    .sig-seal::after, .sig-dark::after { animation: none; }
}
/* Restaurant search (live from GET /web-booking/showcase). */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }
.search-field { display: flex; flex-direction: column; gap: 2px; padding: 10px 16px; border-radius: 14px; min-width: 0; transition: background-color 0.2s ease; }
.search-field:hover, .search-field:focus-within { background: #f6f3ea; }
.search-field .field-label { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #434843; }
.search-field select, .search-field input {
    appearance: none; -webkit-appearance: none; border: 0; padding: 0; background: transparent; box-shadow: none !important;
    font-weight: 700; font-size: 15px; color: #1c1c17; width: 100%; outline: none; cursor: pointer;
}
.search-field input { cursor: text; }
.search-field input::placeholder { color: #737973; font-weight: 500; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: #f1eee5; }
.seg button { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #434843; transition: background-color 0.2s ease, color 0.2s ease; white-space: nowrap; }
.seg button.is-on { background: #1b3022; color: #fff; }
.chip { flex-shrink: 0; padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 600; background: #fff; box-shadow: inset 0 0 0 1px rgba(195, 200, 193, 0.7); transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; white-space: nowrap; }
.chip:hover { box-shadow: inset 0 0 0 1px #737973; }
.chip.is-on { background: #1b3022; color: #fff; box-shadow: none; }
.chip.sig-chip { color: var(--sig-gold); font-weight: 700; box-shadow: inset 0 0 0 1px var(--sig-gold-light); background: var(--sig-cream); }
.chip.sig-chip.is-on { background: var(--sig-grad); color: var(--sig-ink); box-shadow: none; }
.result { transition: box-shadow 0.3s ease; }
.result:hover { box-shadow: 0 20px 44px rgba(6, 27, 14, 0.1); }
.result .result-img { transition: transform 0.8s ease; }
.result:hover .result-img { transform: scale(1.04); }
/* Time buttons: plain, Anbefalet (quiet slot) and Signaturtid (gold). */
.t-btn {
    position: relative; display: inline-grid; place-items: center; height: 40px; min-width: 68px; padding: 0 12px; border-radius: 12px;
    font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; background: #ebe8df; color: #1c1c17;
    transition: transform 0.15s ease, background-color 0.2s ease;
}
.t-btn:hover { transform: translateY(-1px); background: #1b3022; color: #fff; }
.t-btn.is-rec { background: #fff; color: #1b3022; box-shadow: inset 0 0 0 1.5px #4d6453; }
.t-btn.is-rec:hover { background: #d0e9d4; color: #1b3022; }
.t-btn.is-sig { color: #f1dfb1; border: 1.5px solid transparent; background: linear-gradient(160deg, #2a221a, #15110d) padding-box, var(--sig-grad) border-box; box-shadow: 0 4px 12px rgba(154, 113, 40, 0.25); }
.t-btn.is-sig:hover { color: #fff6e0; background: linear-gradient(160deg, #3a2f22, #1d1712) padding-box, var(--sig-grad) border-box; }
.t-btn .t-star { position: absolute; top: -7px; right: -4px; font-size: 9px; line-height: 1; padding: 2px 4px; border-radius: 999px; background: var(--sig-grad); color: #2b1d05; box-shadow: 0 0 0 2px #fff; }
.t-btn .t-dot { position: absolute; top: -4px; right: -3px; width: 9px; height: 9px; border-radius: 999px; background: #4d6453; box-shadow: 0 0 0 2px #fff; }
.t-more { display: inline-grid; place-items: center; height: 40px; padding: 0 12px; border-radius: 12px; font-size: 13px; font-weight: 700; color: #1b3022; box-shadow: inset 0 0 0 1px rgba(195, 200, 193, 0.9); background: #fff; }
.t-more:hover { box-shadow: inset 0 0 0 1px #1b3022; }
.sugg { flex-shrink: 0; width: 15.5rem; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.sugg:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(6, 27, 14, 0.1); }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.skeleton { background: linear-gradient(90deg, #f1eee5 0%, #f8f6ef 50%, #f1eee5 100%); background-size: 200% 100%; animation: shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
    .result, .result .result-img, .t-btn, .sugg { transition: none; }
}
.price-swap { animation: priceIn 0.45s ease; }
.nudge-swap { animation: nudgeIn 0.5s ease; }
.date-chip { transition: background-color 0.3s ease, color 0.3s ease; }
@keyframes priceIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@keyframes nudgeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
@keyframes twinkle {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .spark, .price-swap, .nudge-swap { animation: none; }
}
    
/* Hero clip that fades in over the photo on hover (desktop only, see index.html). */
.hover-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
.hover-video.is-playing { opacity: 1; }