/**
 * Theme Color Overrides for Dynamic Theming
 * 
 * This file overrides hardcoded blue colors with theme variables
 * to ensure consistent theming across the reservation system.
 * 
 * Link underline (default/hover) is controlled by theme CSS from Store Theme Settings.
 * Uses CSS variables defined in ThemeService::generateCssVariables()
 * 
 * Header styles moved to public/frontend-assets/css/header.css
 */

/* ============================================
   RESERVATION PAGE COLOR OVERRIDES
   ============================================ */

/* Info/Alert Backgrounds - Use theme badge colors */
.bg-blue-50 {
    background-color: var(--theme-badge-info-bg) !important;
}

.bg-blue-100 {
    background-color: var(--theme-badge-info-bg) !important;
}

/* Info/Alert Text Colors */
.text-blue-600,
.text-blue-700,
.text-blue-800 {
    color: var(--theme-badge-info-text) !important;
}

/* Info/Alert Icons */
.text-blue-400,
.text-blue-500 {
    color: var(--theme-primary) !important;
}

/* Info/Alert Borders */
.border-blue-200,
.border-blue-300 {
    border-color: var(--theme-border) !important;
}

.border-blue-400,
.border-blue-500 {
    border-color: var(--theme-primary) !important;
}

/* Primary Buttons - Use theme button colors */
.bg-blue-600 {
    background-color: var(--theme-button-primary, var(--theme-primary)) !important;
}

.hover\:bg-blue-700:hover {
    background-color: var(--theme-button-primary-hover, var(--theme-primary-hover)) !important;
}

/* Hover States for Interactive Elements */
.hover\:bg-blue-50:hover {
    background-color: var(--theme-badge-info-bg) !important;
}

.hover\:border-blue-300:hover {
    border-color: var(--theme-border-hover) !important;
}

.hover\:text-blue-700:hover {
    color: var(--theme-badge-info-text) !important;
}

.hover\:text-blue-600:hover {
    color: var(--theme-primary-hover) !important;
}

/* Focus States */
.focus\:ring-blue-200:focus {
    --tw-ring-color: var(--theme-input-focus-shadow) !important;
}

.focus\:ring-blue-500:focus {
    --tw-ring-color: var(--theme-input-focus-border, var(--theme-primary)) !important;
}

/* Selected/Active States */
.bg-blue-100.border-blue-400.text-blue-800 {
    background-color: var(--theme-badge-info-bg) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-badge-info-text) !important;
}

/* Links and Interactive Text */
.text-blue-600.hover\:text-blue-700:hover {
    color: var(--theme-link-hover, var(--theme-primary-hover)) !important;
}

/* Badge Overrides - Match theme badges */
.inline-flex.items-center.px-2.py-1.bg-blue-100.text-blue-800.rounded-full,
.inline-flex.items-center.bg-blue-600.text-white.rounded-md {
    background-color: var(--theme-badge-info-bg) !important;
    color: var(--theme-badge-info-text) !important;
}

/* Icon Containers */
.bg-blue-100.rounded-lg,
.bg-blue-100.rounded-full,
.bg-blue-50.rounded-xl {
    background-color: var(--theme-badge-info-bg) !important;
}

/* Info Messages/Alerts */
.bg-blue-50.border-l-4.border-blue-500,
.bg-blue-50.border.border-blue-200 {
    background-color: var(--theme-badge-info-bg) !important;
    border-color: var(--theme-primary) !important;
}

/* Tab Active States */
.bg-blue-600.text-white {
    background-color: var(--theme-button-primary, var(--theme-primary)) !important;
    color: var(--theme-button-text, #FFFFFF) !important;
}

/* Payment/Order Type Indicators */
[class*="payment_type"][class*="reservation"].bg-blue-50 {
    background-color: var(--theme-badge-info-bg) !important;
}

[class*="payment_type"][class*="reservation"].bg-blue-100.text-blue-600 {
    background-color: var(--theme-badge-info-bg) !important;
    color: var(--theme-badge-info-text) !important;
}

/* Category/Tag Badges in Articles */
.bg-blue-50.text-blue-700.border-blue-200 {
    background-color: var(--theme-badge-info-bg) !important;
    color: var(--theme-badge-info-text) !important;
    border-color: var(--theme-border) !important;
}

/* Menu/Course Selection Buttons */
.order-menus.course-menu-btn.bg-blue-600,
.reservation-form button.bg-blue-600 {
    background-color: var(--theme-button-primary, var(--theme-primary)) !important;
}

.order-menus.course-menu-btn:hover,
.reservation-form button.bg-blue-600:hover {
    background-color: var(--theme-button-primary-hover, var(--theme-primary-hover)) !important;
}

/* Selected menu button: use theme success (green) for clear selected state */
.order-menus.course-menu-btn.selected,
.order-menus.selected {
    background-color: var(--theme-success) !important;
    border-color: var(--theme-success) !important;
    color: var(--theme-button-text) !important;
}

.order-menus.course-menu-btn.selected:hover,
.order-menus.selected:hover {
    background-color: var(--theme-success) !important;
    border-color: var(--theme-success) !important;
    color: var(--theme-button-text) !important;
}

/* Time Slot Selection */
.time-slot-btn.hover\:bg-blue-50:hover {
    background-color: var(--theme-badge-info-bg) !important;
}

.time-slot-btn.hover\:border-blue-300:hover {
    border-color: var(--theme-primary) !important;
}

.time-slot-btn.hover\:text-blue-700:hover {
    color: var(--theme-badge-info-text) !important;
}

/* Guest Number Selection */
.guest-number-btn.hover\:bg-blue-50:hover {
    background-color: var(--theme-badge-info-bg) !important;
}

.guest-number-btn.hover\:border-blue-300:hover {
    border-color: var(--theme-primary) !important;
}

.guest-number-btn.hover\:text-blue-700:hover {
    color: var(--theme-badge-info-text) !important;
}

/* Active Selection State */
.guest-number-btn.bg-blue-100.border-blue-400.text-blue-800 {
    background-color: var(--theme-badge-info-bg) !important;
    border-color: var(--theme-primary) !important;
    color: var(--theme-badge-info-text) !important;
}

/* Responsive: Mobile Menu Buttons */
@media (max-width: 640px) {

    .bg-blue-600,
    .bg-blue-500 {
        background-color: var(--theme-button-primary, var(--theme-primary)) !important;
    }

    .hover\:bg-blue-700:hover,
    .hover\:bg-blue-600:hover {
        background-color: var(--theme-button-primary-hover, var(--theme-primary-hover)) !important;
    }
}

/* Dashboard Card Stats */
.bg-blue-100.text-blue-800.px-2.py-1.rounded-full {
    background-color: var(--theme-badge-info-bg) !important;
    color: var(--theme-badge-info-text) !important;
}

/* Links in Text */
a.text-blue-600,
a.text-blue-500 {
    color: var(--theme-link, var(--theme-primary)) !important;
}

a.text-blue-600:hover,
a.text-blue-500:hover {
    color: var(--theme-link-hover, var(--theme-primary-hover)) !important;
}

/* Utility: Ensure Theme Gradients Work */
.bg-gradient-to-r.from-blue-500.to-blue-600,
.bg-gradient-to-r.from-blue-600.to-blue-700 {
    background: linear-gradient(to right, var(--theme-primary), var(--theme-secondary)) !important;
}

/* Section Header Gradients - Reservation Info (予約情報), Summary (予約概要), Shop Info (店舗情報) */
.bg-gradient-to-r.from-blue-200.to-blue-100 {
    background: linear-gradient(to right, var(--theme-badge-info-bg), var(--theme-overlay-light)) !important;
}

/* Stronger gradient for total amount sections */
.bg-gradient-to-r.from-blue-600.to-indigo-600 {
    background: linear-gradient(to right, var(--theme-primary), var(--theme-secondary)) !important;
}

/* Hover states for gradient buttons */
.hover\:from-blue-700:hover {
    background: linear-gradient(to right, var(--theme-primary-hover), var(--theme-secondary-hover)) !important;
}

.hover\:to-indigo-700:hover {
    background: linear-gradient(to right, var(--theme-primary-hover), var(--theme-secondary-hover)) !important;
}

/* Info note sections with gradient */
.bg-gradient-to-r.from-blue-50.to-indigo-50 {
    background: linear-gradient(to right, var(--theme-badge-info-bg), var(--theme-overlay-light-95)) !important;
}

.border-l-4.border-blue-500 {
    border-left-color: var(--theme-primary) !important;
}

/* Text colors in gradient sections */
.text-blue-900 {
    color: var(--theme-text, #2D2926) !important;
}

.text-blue-100 {
    color: var(--theme-overlay-light) !important;
}

/* Icons in section headers with gradients */
.text-blue-600,
.text-blue-500 {
    color: var(--theme-primary) !important;
}

/* ============================================
   RESERVATION DATEPICKER
   bootstrap-datepicker expects Bootstrap's .dropdown-menu
   base styles (position: absolute; display: none).
   Since this project uses Tailwind instead of Bootstrap,
   we provide these essential rules here.
   Enhanced styling scoped to .reservation-datepicker
   (class added by JS at init time) so admin pickers
   are unaffected.
   ============================================ */

/* --- Bootstrap .dropdown-menu polyfill for datepicker --- */
body>.datepicker.dropdown-menu {
    position: absolute;
    display: none;
}

/* --- z-index override (beats library's inline z-index: 10) --- */
body>.datepicker {
    z-index: 1060 !important;
}

body>.datepicker-dropdown {
    z-index: 1060 !important;
}

/* --- Enhanced container (reservation only) --- */
.reservation-datepicker {
    background-color: var(--theme-background, #ffffff);
    border-radius: 0.625rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
    border: 1px solid var(--theme-border, #e5e3df);
    font-family: 'Noto Sans JP', 'Inter', sans-serif;
    padding: 0.375rem;
    user-select: none;
    z-index: 1060 !important;
    opacity: 1 !important;
}

.reservation-datepicker.datepicker-dropdown {
    z-index: 1060 !important;
}

.reservation-datepicker.dropdown-menu {
    z-index: 1060 !important;
    background-color: var(--theme-background, #ffffff);
    opacity: 1 !important;
}

/* --- Table grid --- */
.reservation-datepicker table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
}

/* --- Month header (calmer) --- */
.reservation-datepicker .datepicker-switch {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--theme-text, #2c2825);
    padding: 0.25rem 0;
    cursor: default;
}

/* --- Prev / next arrows (smaller) --- */
.reservation-datepicker .prev,
.reservation-datepicker .next {
    color: var(--theme-text, #2c2825);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: pointer;
    transition: color 0.15s ease;
    opacity: 0.6;
}

.reservation-datepicker .prev:hover,
.reservation-datepicker .next:hover {
    color: var(--theme-primary);
    opacity: 1;
}

/* --- Weekday headers (dow) --- */
.reservation-datepicker .datepicker-days th.dow {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--theme-text, #2c2825);
    padding-bottom: 0.25rem;
    text-align: center;
}

.reservation-datepicker .datepicker-days th.dow:first-child {
    color: var(--theme-error, #dc2626);
}

.reservation-datepicker .datepicker-days th.dow:last-child {
    color: var(--theme-info);
}

/* --- Day cells – uniform squares with two-line space --- */
.reservation-datepicker table tr td {
    transition: background-color 0.12s ease, color 0.12s ease;
}

.reservation-datepicker table tr td.day {
    text-align: center;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.8125rem;
    position: relative;
    width: 2.5rem;
    height: 2.5rem;
    vertical-align: top;
    line-height: 2.35;
    padding: 0.2rem 0 0;
    border-radius: 0.375rem;
}

/* --- Hover (restrained, no scale transform) --- */
.reservation-datepicker table tr td.day:not(.disabled):not(.active):hover {
    background-color: rgba(var(--theme-primary-rgb, 139, 44, 44), 0.08);
}

/* --- Active / selected day (muted, not dominant) --- */
.reservation-datepicker table tr td.active {
    font-weight: 600 !important;
    background-color: var(--theme-primary) !important;
    color: var(--theme-background, #fff) !important;
    border-radius: 0.375rem;
}

/* --- Today outline --- */
.reservation-datepicker table tr td.today:not(.active) {
    box-shadow: inset 0 0 0 1.5px var(--theme-primary);
}

/* --- Disabled (unavailable/holiday) --- */
.reservation-datepicker table tr td.disabled {
    color: var(--theme-text, #2c2825);
    opacity: 0.3;
    cursor: not-allowed;
    background: transparent;
}

/* --- Sunday (red) --- */
.reservation-datepicker table tr td:first-child:not(.old):not(.new):not(.active):not(.disabled) {
    color: var(--theme-error, #dc2626);
}

/* --- Saturday (info/accent) --- */
.reservation-datepicker table tr td:last-child:not(.old):not(.new):not(.active):not(.disabled) {
    color: var(--theme-info);
}

/* --- Old/new month overflow cells --- */
.reservation-datepicker table tr td.old,
.reservation-datepicker table tr td.new {
    opacity: 0.25;
}

/* --- Mobile adjustments --- */
@media (max-width: 480px) {
    .reservation-datepicker {
        padding: 0.25rem;
    }

    .reservation-datepicker table {
        border-spacing: 1px;
    }

    .reservation-datepicker table tr td.day {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 0.75rem;
    }
}

/* ============================================
   RESERVATION PAGE - SELECT DROPDOWN
   ============================================ */

.select_people {
    max-height: 200px;
    overflow-y: auto;
    background: var(--theme-background);
    font-size: 0.95rem;
    border-radius: 0.5rem;
    border: 1px solid var(--theme-border);
    transition: all 0.2s ease;
    scrollbar-width: thin;
    scrollbar-color: var(--theme-secondary) var(--theme-border);
}

.select_people::-webkit-scrollbar {
    width: 6px;
}

.select_people::-webkit-scrollbar-track {
    background: var(--theme-border);
    border-radius: 3px;
}

.select_people::-webkit-scrollbar-thumb {
    background: var(--theme-secondary);
    border-radius: 3px;
}

.select_people::-webkit-scrollbar-thumb:hover {
    background: var(--theme-secondary-hover);
}

.select_people option {
    padding: 8px 12px;
    font-size: 0.95rem;
    color: var(--theme-text);
    background: var(--theme-background);
    border-bottom: 1px solid var(--theme-border);
}

.select_people option:hover {
    background: var(--theme-border);
}

.select_people option:checked {
    background: var(--theme-primary);
    color: var(--theme-background);
}

.select_people:focus {
    outline: none;
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 59, 130, 246), 0.1);
}

.select_people:disabled {
    background: var(--theme-border);
    color: var(--theme-text);
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 640px) {
    .select_people {
        max-height: 150px;
        font-size: 0.85rem;
    }

    .select_people option {
        padding: 6px 10px;
        font-size: 0.85rem;
    }
}

/* ============================================
   RESERVATION PAGE - MENU BUTTONS
   ============================================ */

.order-menus {
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    border: 2px solid transparent;
    font-weight: 600;
    transition: all 0.3s ease;
    background-color: var(--theme-button-primary, var(--theme-primary));
    color: var(--theme-button-text, #fff);
    border-color: var(--theme-button-primary, var(--theme-primary));
}

.order-menus::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--theme-overlay-light-30), transparent);
    transition: left 0.5s;
}

.order-menus:hover::before {
    left: 100%;
}

.order-menus:hover {
    background-color: var(--theme-button-primary-hover, var(--theme-primary-hover)) !important;
    border-color: var(--theme-button-primary-hover, var(--theme-primary-hover)) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--theme-primary-rgb, 92, 45, 45), 0.2);
}

.order-menus:active {
    background-color: var(--theme-button-primary-active, var(--theme-button-primary-hover)) !important;
    border-color: var(--theme-button-primary-active, var(--theme-button-primary-hover)) !important;
    transform: scale(0.98);
}

.order-menus:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 92, 45, 45), 0.25);
}

/* Selected state — theme success (green) for clear selected indication */
.order-menus.selected {
    background-color: var(--theme-success, #16a34a) !important;
    border-color: var(--theme-success, #16a34a) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(var(--theme-success-rgb, 22, 163, 74), 0.35) !important;
    transform: translateY(-1px) !important;
}

.order-menus.selected:hover {
    opacity: 1 !important;
    background-color: var(--theme-success, #15803d) !important;
    border-color: var(--theme-success, #15803d) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(var(--theme-success-rgb, 22, 163, 74), 0.4) !important;
}

.order-menus.selected:active {
    background-color: var(--theme-success, #15803d) !important;
    border-color: var(--theme-success, #15803d) !important;
    transform: translateY(0) scale(0.98) !important;
}

.order-menus.selected:focus {
    box-shadow: 0 0 0 3px rgba(var(--theme-success-rgb, 22, 163, 74), 0.35) !important;
}

/* Selected badge animation */
.selected-badge {
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }
}

/* Text line clamp utility */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   BUTTON SIZE: btn-lg (frontend CTA)
   ============================================ */
.btn-lg {
    min-height: 44px;
    padding: 0.5rem 1.25rem;
    font-size: 0.9375rem;
}

/* ============================================
   THEME PRIMARY BUTTON (shared CTA)
   Used by: 購入ページへ, reservation actions, header WEB予約.
   Both default and restaurant themes.
   ============================================ */
.theme-btn-primary {
    background-color: var(--theme-button-primary, var(--theme-primary, #2563eb)) !important;
    color: var(--theme-button-text, #fff) !important;
    border: none;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.theme-btn-primary:hover {
    background-color: var(--theme-button-primary-hover, var(--theme-primary-hover)) !important;
    color: var(--theme-button-primary-text-hover, var(--theme-button-text, #fff)) !important;
    opacity: 1;
}

.theme-btn-primary:active {
    background-color: var(--theme-button-primary-active, var(--theme-button-primary-hover)) !important;
}

.theme-btn-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--theme-card-background, #fff), 0 0 0 4px var(--theme-button-primary, #2563eb);
}

/* ============================================
   HEADER PHONE BUTTON (both themes)
   Ensures tel icon visible on smartphone
   ============================================ */
@media (max-width: 1023px) {
    .site-header__phone-btn {
        color: var(--theme-primary, #475569);
    }
    .site-header__phone-btn:hover {
        color: var(--theme-primary);
    }
}

/* ============================================
   EC RECOMMENDED PRODUCTS SECTION
   Shared by reservation + confirmation + complete (default & restaurant themes)
   Responsive: 1 col mobile, 2 col sm/lg, 3 col xl (never 4).
   ============================================ */
.ec-products-section__grid {
    gap: 1.25rem;
}

.ec-product-card__image-wrap {
    aspect-ratio: 4 / 3;
    min-height: 0;
}

.ec-product-card__image {
    object-fit: contain;
}

.ec-product-card__title {
    min-height: 2.8em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ec-product-card__cta:hover {
    opacity: 0.95;
}

.ec-product-card__cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--theme-card-background, #fff), 0 0 0 4px var(--theme-button-primary, #2563eb);
}

/* EC Products: List view (1 per row, image left, details right) */
.ec-products-section__grid.ec-products-section__grid--list {
    grid-template-columns: 1fr;
    gap: 1rem;
}

.ec-products-section__grid.ec-products-section__grid--list .ec-product-card {
    flex-direction: row;
    max-width: 100%;
}

.ec-products-section__grid.ec-products-section__grid--list .ec-product-card__image-wrap {
    width: 140px;
    min-width: 140px;
    aspect-ratio: 1;
}

.ec-products-section__grid.ec-products-section__grid--list .ec-product-card__body {
    flex: 1;
    min-width: 0;
    justify-content: center;
}

.ec-products-section__grid.ec-products-section__grid--list .ec-product-card__title {
    min-height: auto;
}

.ec-products-section__grid.ec-products-section__grid--list .ec-product-card__cta {
    width: fit-content;
    align-self: flex-start;
}

@media (max-width: 639px) {
    .ec-products-section__grid.ec-products-section__grid--list .ec-product-card__image-wrap {
        width: 100px;
        min-width: 100px;
    }
}

/* Load-more: animate newly appended cards */
@keyframes ec-product-card-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ec-product-card--load-more-new {
    animation: ec-product-card-in 0.35s ease-out forwards;
}

/* View toggle active state */
.ec-products-view-btn[aria-pressed="true"] {
    background-color: var(--theme-primary, #2563eb) !important;
    color: var(--theme-button-text, #fff) !important;
    border-color: var(--theme-primary, #2563eb) !important;
}

/* ============================================
   RESERVATION CONFIRMATION - CTA PULSE
   Subtle breathing animation for the primary
   submit button to draw attention.
   ============================================ */
@keyframes pulse-subtle {

    0%,
    100% {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
        filter: brightness(1.1);
    }

    50% {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
        filter: brightness(1.18);
    }
}

.animate-pulse-subtle {
    animation: pulse-subtle 2.5s ease-in-out infinite;
}

/* ============================================
   FLOATING ACTION BAR
   ============================================ */
#floatingActionBar {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    background: var(--theme-card-background) !important;
    background-color: var(--theme-card-background) !important;
}

/* ============================================
   READ-MORE BUTTON HOVER
   Replaces inline onmouseover/onmouseout
   ============================================ */
.read-more-btn:hover {
    opacity: 0.8;
}

/* ============================================
   SPINNER ICON COLORS
   ============================================ */
.fa-spinner.text-blue-500,
i.fa-spinner.fa-spin.text-blue-500 {
    color: var(--theme-primary) !important;
}

/* Large spinner (time slot loading state) */
.fa-spinner.text-blue-500.text-2xl {
    color: var(--theme-primary) !important;
}


/* Reservation validation alert: use theme-error for consistency */
.validation-alert .bg-red-50,
.validation-alert .border-red-200 {
    background-color: var(--theme-badge-error-bg, #F5E8E8) !important;
    border-color: var(--theme-error, #B91C1C) !important;
}

.validation-alert .text-red-400,
.validation-alert .text-red-600,
.validation-alert .text-red-700,
.validation-alert .text-red-800 {
    color: var(--theme-error, #B91C1C) !important;
}

.validation-alert .border-red-500 {
    border-color: var(--theme-error, #B91C1C) !important;
}

.error-message.text-red-500 {
    color: var(--theme-error, #B91C1C) !important;
}

/* Non-reservable (greyed) menu prices keep red/muted look via theme-error */
.grayscale .text-red-600 {
    color: var(--theme-error, #dc2626) !important;
}

/* ============================================
   ENTERPRISE UI REFINEMENTS
   Calm hierarchy, breathing space, consistent
   radius/shadow without visual heaviness.
   ============================================ */

/* --- Reservation first view: page background so cards lift --- */
.reservation-content-outer {
    --hero-to-content-gap: 2rem;
}

@media (min-width: 768px) {
    .reservation-content-outer {
        --hero-to-content-gap: 2.5rem;
    }
}

@media (min-width: 1024px) {
    .reservation-content-outer {
        --hero-to-content-gap: 3rem;
    }
}

@media (max-width: 1023px) {
    .content-detail-outer.reservation-content-outer {
        padding-left: 5px;
        padding-right: 5px;
    }
}

.reservation-content-outer .reservation-page-section {
    background-color: var(--theme-background, #f8fafc) !important;
}

.reservation-page-container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

@media (min-width: 640px) {
    .reservation-page-container {
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

@media (min-width: 1024px) {
    .reservation-page-container {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* --- Card container: premium elevation + 14px radius --- */
.res-card {
    background-color: var(--theme-card-background, #ffffff);
    border-radius: 14px !important;
    border: 1px solid var(--theme-border, rgba(0, 0, 0, 0.06)) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04), 0 8px 24px -4px rgba(0, 0, 0, 0.08) !important;
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.res-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05), 0 12px 32px -4px rgba(0, 0, 0, 0.1) !important;
}

/* --- Card section header: clean enterprise style (no thick accent bar) --- */
.res-card-header {
    padding: 16px 24px;
    background: var(--theme-background-alt, #f8fafc);
    border-bottom: 1px solid var(--theme-border, rgba(0, 0, 0, 0.06));
    border-radius: 14px 14px 0 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.res-card-header-title {
    display: flex;
    align-items: center;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--theme-text, var(--theme-heading, #0f172a)) !important;
    margin: 0;
}

/* Step indicator: compact progress bar above reservation content */
.res-step-indicator .res-step-num {
    min-width: 2rem;
    min-height: 2rem;
}

.res-card-header-title i {
    color: var(--theme-primary) !important;
    opacity: 0.9;
    margin-right: 0.5rem;
}

/* --- "Change service" link in confirmation card header --- */
.res-change-link {
    color: var(--theme-primary);
    opacity: 0.75;
}

.res-change-link:hover {
    opacity: 1;
    color: var(--theme-primary);
    text-decoration: underline;
}

.reservation-note-box {
    background-color: var(--theme-background-alt, #f9fafb);
    border: 1px solid var(--theme-border, #e2e8f0);
}

/* ============================================
   ENTERPRISE SECTION LAYOUT
   More breathing room between stacked sections.
   ============================================ */

/* Sticky right column sections get more gap */
.sticky.space-y-4,
.sticky.space-y-6 {
    gap: 20px !important;
}

/* Main two-column flex gap (premium spacing) */
.reservation-page-container .flex.flex-col.lg\\:flex-row.justify-center {
    gap: 1.5rem !important;
}

@media (min-width: 1024px) {
    .reservation-page-container .flex.flex-col.lg\\:flex-row.justify-center {
        gap: 2rem !important;
    }
}

/* Info/warning alerts inside reservation cards: enterprise look */
.res-card .theme-alert-info,
.res-card .theme-alert-warning {
    border-radius: 10px;
    border: 1px solid var(--theme-border, #e2e8f0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ============================================
   POLICY & IMPORTANT NOTES CARD
   Unified card for cancellation policy, precautions, late-cancel notice.
   Best practice: color-coded sections, readable body text, theme-aware.
   ============================================ */
.res-policy-card {
    background-color: var(--theme-card-background, #fff);
    border: 1px solid var(--theme-border, #E5E0DB);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.res-policy-card__header {
    padding: 1rem 1.25rem;
    background: var(--theme-background-alt, #f9fafb);
    border-bottom: 1px solid var(--theme-border, #E5E0DB);
}
.res-policy-card__header h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--theme-text, #2D2926);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.res-policy-card__header .res-policy-card__icon {
    color: var(--theme-error, #dc2626);
    flex-shrink: 0;
}
.res-policy-card__body {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.res-policy-section {
    padding: 1rem 1.25rem;
    border-radius: 8px;
}
.res-policy-section__title {
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0 0 0.5rem 0;
}
.res-policy-section__content {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--theme-text, #2D2926);
    margin: 0;
}
.res-policy-section--cancellation {
    background: rgba(var(--theme-error-rgb, 220, 38, 38), 0.05);
}
.res-policy-section--cancellation .res-policy-section__title {
    color: var(--theme-error, #dc2626);
}
.res-policy-section--precautions {
    background: rgba(var(--theme-warning-rgb, 192, 139, 48), 0.06);
}
.res-policy-section--precautions .res-policy-section__title {
    color: var(--theme-warning, #C08B30);
}
.res-policy-section--late-notice {
    background: rgba(var(--theme-info-rgb, 2, 132, 199), 0.05);
}
.res-policy-section--late-notice .res-policy-section__title {
    color: var(--theme-info, #0284c7);
}
@media (min-width: 640px) {
    .res-policy-card__header,
    .res-policy-card__body {
        padding: 1.25rem 1.5rem;
    }
    .res-policy-card__header h2 {
        font-size: 1.125rem;
    }
    .res-policy-section {
        padding: 1.25rem 1.5rem;
    }
}

/* Inner card content padding: a touch more generous */
.res-card .p-4 {
    padding: 20px !important;
}

.res-card .p-4.sm\\:p-6 {
    padding: 20px 24px !important;
}

@media (max-width: 1023px) {
    .res-card .p-4,
    .res-card .p-4.sm\\:p-6 {
        padding: 12px !important;
    }
}

/* ============================================
   TYPOGRAPHY SCALE
   Consistent hierarchy across the reservation flow.
   ============================================ */

/* Page-level H1 (hero title) — 26–28px */
.reservation-hero-title,
.reservation-page-title {
    font-size: clamp(26px, 4vw, 28px);
    font-weight: 700;
    line-height: 1.3;
}

/* ============================================
   RESERVATION HERO BLOCK (containerized title + gallery)
   Centered container; title/description above gallery; consistent padding.
   ============================================ */
.reservation-hero-block {
    padding-top: 0.75rem;
    padding-bottom: 0.5rem;
}

@media (min-width: 768px) {
    .reservation-hero-block {
        padding-top: 1rem;
        padding-bottom: 0.75rem;
    }
}

/* When collage is below PageHero, keep compact spacing */
.page-hero+.reservation-hero-block {
    padding-top: 0.5rem;
}

/* Full-width hero on reservation/confirmation (images): edge-to-edge, premium look */
.reservation-hero-block--full {
    padding-top: 0;
    padding-bottom: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.reservation-hero-block--full .shop-header-collage-wrap {
    width: 100%;
}

.reservation-hero-block--full .shop-header-collage {
    border-radius: 0;
}

.reservation-hero-block--full .shop-header-collage-frame {
    border-radius: 0;
    min-height: 530px;
    height: clamp(260px, 40vh, 360px);
    box-shadow: 0 4px 24px -4px rgba(0, 0, 0, 0.08);
}

@media (min-width: 768px) {
    .reservation-hero-block--full .shop-header-collage-frame {
        height: clamp(360px, 46vh, 480px);
        min-height: 530px;
    }
}

/* ============================================
   NEWS TICKER BAR (below hero, enterprise style)
   ============================================ */
.news-ticker {
    width: 100%;
    background: var(--theme-card-background, #fff);
    border-top: 1px solid var(--theme-header-border, rgba(0, 0, 0, 0.06));
    border-bottom: 1px solid var(--theme-border, #e2e8f0);
    box-shadow: 0 2px 16px -4px rgba(0, 0, 0, 0.08);
}

.news-ticker__container {
    max-width: var(--site-container-max, 1280px);
    margin: 0 auto;
    padding: 0 var(--site-gutter-x, 24px);
    display: flex;
    align-items: center;
    min-height: 52px;
    gap: 20px;
}
@media (max-width: 639px) {
    .news-ticker__container {
        padding: 0;
    }
}
@media (min-width: 640px) {
    .news-ticker__container {
        padding-left: var(--site-gutter-x-sm, 32px);
        padding-right: var(--site-gutter-x-sm, 32px);
    }
}
@media (min-width: 1024px) {
    .news-ticker__container {
        padding-left: var(--site-gutter-x-lg, 40px);
        padding-right: var(--site-gutter-x-lg, 40px);
    }
}

.news-ticker__label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--theme-primary);
    background: rgba(var(--theme-primary-rgb, 30, 64, 175), 0.08);
    border: 1px solid rgba(var(--theme-primary-rgb, 30, 64, 175), 0.2);
}

.news-ticker__label i {
    font-size: 12px;
}

.news-ticker__track {
    flex: 1;
    min-width: 0;
    min-height: 2.5rem;
    position: relative;
    height: 100%;
    overflow: hidden;
}

.news-ticker__empty {
    display: inline-block;
    font-size: 13px;
    font-weight: 500;
    color: var(--theme-text-light, #64748b);
    letter-spacing: 0.02em;
}

.news-ticker__item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 8px;
    margin: 0 -8px;
    border-radius: 8px;
    text-decoration: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s ease, transform 0.35s ease, background-color 0.2s ease;
    pointer-events: none;
}

.news-ticker__item.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


.news-ticker__date {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 500;
    color: var(--theme-text-light, #64748b);
    letter-spacing: 0.03em;
}

.news-ticker__tag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--theme-primary);
    background: var(--theme-badge-info-bg, #dbeafe);
    border: 1px solid var(--theme-badge-info-text, rgba(30, 64, 175, 0.3));
    border-radius: 6px;
}

.news-ticker__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--theme-text, #334155);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
}

.news-ticker__item:hover .news-ticker__title {
    color: var(--theme-primary);
}

.news-ticker__more {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    font-size: 12px;
    color: var(--theme-text-light, #94a3b8);
    background: var(--theme-background-alt, #f8fafc);
    border: 1px solid var(--theme-border, #e2e8f0);
    text-decoration: none;
    transition: all 0.2s ease;
}

.news-ticker__more:hover {
    color: var(--theme-primary);
    border-color: var(--theme-primary);
    background: var(--theme-card-background, #fff);
}

/* Smartphone: stacked layout so all details are visible */
@media (max-width: 639px) {
    .news-ticker {
        padding: 12px 14px;
    }
    .news-ticker__container {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        min-height: auto;
    }
    .news-ticker__label {
        align-self: flex-start;
        padding: 6px 12px;
        font-size: 11px;
    }
    .news-ticker__track {
        min-height: 56px;
    }
    .news-ticker__item {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        padding: 10px 12px;
        border-radius: 8px;
    }
    .news-ticker__date {
        font-size: 11px;
    }
    .news-ticker__title {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        font-size: 13px;
        line-height: 1.45;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        line-clamp: 3;
    }
    .news-ticker__more {
        align-self: flex-end;
    }
}

.reservation-hero-container {
    width: 100%;
}

.reservation-hero-header {
    margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
    .reservation-hero-header {
        margin-bottom: 1rem;
    }
}

.reservation-hero-heading {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
}

@media (min-width: 768px) {
    .reservation-hero-heading {
        font-size: 1.75rem;
        margin-bottom: 0.375rem;
    }
}

.reservation-hero-description {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

@media (min-width: 768px) {
    .reservation-hero-description {
        font-size: 0.9375rem;
    }
}

/* ============================================
   GALLERY GRID (Airbnb-style, N=0..5+)
   ONE fixed visual height; all tiles fill; cover crop; uniform gap; rounded.
   ============================================ */
.gallery-grid {
    --gallery-height-mobile: clamp(240px, 45vh, 320px);
    --gallery-height-desktop: clamp(360px, 42vh, 480px);
    position: relative;
    width: 100%;
    overflow: hidden;
}

.gallery-grid-inner {
    display: grid;
    gap: 8px;
    border-radius: 12px;
    overflow: hidden;
    padding: 0;
    height: var(--gallery-height-mobile);
    min-height: 240px;
}

@media (min-width: 768px) {
    .gallery-grid-inner {
        gap: 10px;
        border-radius: 12px;
        height: var(--gallery-height-desktop);
        min-height: 360px;
        max-height: 480px;
    }
}

.gallery-cell {
    position: relative;
    overflow: hidden;
    background: var(--theme-background-alt);
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    min-height: 0;
}

/* All cells fill grid area; image always cover */
.gallery-cell img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.gallery-cell--btn:focus {
    outline: 2px solid var(--theme-overlay-light-80);
    outline-offset: 2px;
}

/* Overlay: gradient + bottom-aligned text container (Airbnb-style) */
.gallery-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0;
    background: var(--theme-overlay-gradient-dark);
    pointer-events: none;
}

.gallery-overlay .gallery-text-wrap {
    pointer-events: auto;
}

.gallery-text-wrap {
    width: 100%;
    max-width: 36rem;
    margin: 0;
    padding: 1rem 1.25rem;
    border-radius: 0;
    background-color: var(--theme-overlay-dark);
    box-shadow: 0 -2px 8px var(--theme-overlay-dark-20);
}

@media (min-width: 768px) {
    .gallery-overlay {
        justify-content: flex-end;
        padding: 0;
    }

    .gallery-text-wrap {
        padding: 1.25rem 1.5rem;
    }
}

.gallery-title {
    color: var(--theme-text-on-primary);
    margin: 0 0 0.375rem;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

@media (min-width: 768px) {
    .gallery-title {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
}

.gallery-subtitle {
    color: var(--theme-overlay-light-95);
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .gallery-subtitle {
        font-size: 1rem;
    }
}

/* N=0: placeholder */
.gallery-grid--n0 .gallery-grid-inner {
    display: block;
    height: auto;
    min-height: 160px;
    max-height: none;
}

.gallery-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    max-height: 200px;
    background: var(--theme-background-alt);
    border-radius: 12px;
    color: var(--theme-text-light);
}

.gallery-placeholder-icon {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.6;
}

.gallery-placeholder-text {
    font-size: 0.875rem;
    margin: 0;
}

/* N=1: single hero, full width, fixed height */
.gallery-grid--n1 .gallery-grid-inner {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.gallery-cell--full {
    min-height: 0;
    height: 100%;
}

/* N=2: 2 columns equal, same height */
.gallery-grid--n2 .gallery-grid-inner {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.gallery-cell--half {
    min-height: 0;
    height: 100%;
}

/* N=3: left hero 2/3 + right 2 stacked */
.gallery-grid--n3 .gallery-grid-inner {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 1fr;
}

@media (max-width: 767px) {
    .gallery-grid--n3 .gallery-grid-inner {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        height: var(--gallery-height-mobile);
    }

    .gallery-grid--n3 .gallery-cell--twothirds {
        grid-row: span 1;
        min-height: 0;
        height: 100%;
    }

    .gallery-grid--n3 .gallery-stack {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        gap: 8px;
        min-height: 0;
        height: 100%;
    }

    .gallery-grid--n3 .gallery-stack .gallery-cell {
        min-height: 0;
        height: 100%;
    }
}

.gallery-cell--twothirds {
    min-height: 0;
    height: 100%;
}

@media (min-width: 768px) {
    .gallery-cell--twothirds {
        grid-row: span 2;
    }

    .gallery-stack {
        display: flex;
        flex-direction: column;
        gap: inherit;
        min-height: 0;
        height: 100%;
    }

    .gallery-stack .gallery-cell {
        flex: 1;
        min-height: 0;
    }
}

/* N=4: 2x2 uniform */
.gallery-grid--n4 .gallery-grid-inner {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.gallery-cell--quad {
    min-height: 0;
    height: 100%;
}

/* N>=5: left hero + right 2x2; first 5 images; "Show all / +X" */
.gallery-grid--n5 .gallery-grid-inner {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
}

@media (min-width: 768px) {
    .gallery-grid--n5 .gallery-grid-inner {
        grid-template-columns: 7fr 5fr;
        grid-template-rows: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .gallery-grid--n5 .gallery-grid-inner {
        grid-template-rows: 1fr 1fr;
    }

    .gallery-cell--seven {
        grid-row: span 1;
        min-height: 0;
        height: 100%;
    }

    .gallery-thumbs-five {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 1fr;
        gap: inherit;
        min-height: 0;
        height: 100%;
    }

    .gallery-thumbs-five .gallery-cell {
        min-height: 0;
        height: 100%;
    }
}

@media (min-width: 768px) {
    .gallery-grid--n5 .gallery-cell--seven {
        grid-column: 1;
        grid-row: 1 / -1;
        min-height: 0;
        height: 100%;
    }

    .gallery-grid--n5 .gallery-thumbs-five {
        grid-column: 2;
        grid-row: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: inherit;
        min-height: 0;
        height: 100%;
    }

    .gallery-cell--thumb {
        min-height: 0;
        height: 100%;
    }
}

.gallery-cta {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background-color: var(--theme-overlay-dark-60);
    color: var(--theme-text-on-primary);
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: 0 4px 12px var(--theme-overlay-dark-20);
}

.gallery-cta-icon {
    width: 1rem;
    height: 1rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
}

.gallery-cta-icon span {
    display: block;
    min-width: 2px;
    min-height: 2px;
    background: var(--theme-text-on-primary);
    border-radius: 1px;
}

.gallery-cta-extra {
    font-size: 0.75rem;
    opacity: 0.9;
    margin-left: 0.25rem;
}

/* ============================================
   SHOP HEADER COLLAGE (Airbnb-style, above-fold height)
   Single component for reservation + confirmation. Fixed frame, cover crop, no gaps.
   ============================================ */
.shop-header-collage-wrap {
    width: 100%;
}

.shop-header-compact {
    background: linear-gradient(to right, var(--theme-primary), var(--theme-secondary, var(--theme-primary)));
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-header-compact-inner {
    padding: 1.5rem 1.25rem;
    text-align: center;
}

.shop-header-compact-title {
    color: var(--theme-text-on-primary);
    margin: 0 0 0.25rem;
    font-size: clamp(1rem, 4vw, 1.25rem);
    font-weight: 700;
    line-height: 1.35;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.shop-header-compact-subtitle {
    color: var(--theme-overlay-light);
    margin: 0;
    font-size: clamp(0.75rem, 2.5vw, 0.875rem);
    line-height: 1.5;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (min-width: 640px) {
    .shop-header-compact-title {
        font-size: clamp(1.125rem, 3vw, 1.375rem);
    }

    .shop-header-compact-subtitle {
        font-size: clamp(0.8125rem, 2vw, 0.875rem);
    }
}

@media (min-width: 768px) {
    .shop-header-compact {
        min-height: 140px;
    }

    .shop-header-compact-title {
        font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    }

    .shop-header-compact-subtitle {
        font-size: 0.875rem;
    }
}

.shop-header-collage {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.shop-header-collage-frame {
    display: grid;
    gap: 6px;
    border-radius: 12px;
    overflow: hidden;
    min-height: 220px;
    height: clamp(220px, 38vh, 320px);
}

@media (min-width: 768px) {
    .shop-header-collage-frame {
        gap: 8px;
        height: clamp(320px, 42vh, 400px);
        min-height: 320px;
    }
}

.shop-header-cell {
    position: relative;
    overflow: hidden;
    background: var(--theme-background-alt);
    cursor: pointer;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    min-height: 0;
    height: 100%;
}

.shop-header-cell-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.shop-header-cell--btn:focus {
    outline: 2px solid var(--theme-overlay-light-80);
    outline-offset: 2px;
}

.shop-header-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: var(--theme-overlay-gradient-dark-compact);
    pointer-events: none;
}

.shop-header-text {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
}

@media (min-width: 768px) {
    .shop-header-text {
        padding: 2rem 2.5rem;
    }
}

@media (min-width: 1024px) {
    .shop-header-text {
        padding: 2.5rem 3rem;
    }
}

/* Premium: title/subtitle in a clean overlay card with soft backdrop blur */
.shop-header-text {
    position: relative;
    align-self: flex-end;
    max-width: min(24rem, calc(100% - 2rem));
    margin-left: var(--site-gutter-x, 16px);
    margin-right: auto;
    padding: 0.875rem 1rem;
    background: var(--theme-overlay-card-96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-radius: 0 12px 0 0;
    box-shadow: 0 -6px 28px var(--theme-overlay-dark-14), 0 0 0 1px var(--theme-overlay-dark-05);
}

@media (min-width: 640px) {
    .shop-header-text {
        padding: 1rem 1.25rem;
        max-width: 22rem;
        margin-left: var(--site-gutter-x, 24px);
    }
}

@media (min-width: 768px) {
    .shop-header-text {
        padding: 1.25rem 1.5rem;
        max-width: 24rem;
        border-radius: 0 16px 0 0;
    }
}

@media (min-width: 1024px) {
    .shop-header-text {
        padding: 1.5rem 1.75rem;
        max-width: 26rem;
        border-radius: 0 18px 0 0;
    }
}

.shop-header-overlay-title {
    color: var(--theme-heading, #0f172a);
    margin: 0 0 0.375rem;
    font-family: var(--theme-font-primary, 'Noto Sans JP', sans-serif);
    font-size: clamp(1rem, 4vw, 1.25rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-shadow: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.shop-header-overlay-subtitle {
    color: var(--theme-text, #334155);
    margin: 0;
    font-size: clamp(0.75rem, 2.5vw, 0.8125rem);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 0.02em;
    opacity: 1;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (min-width: 640px) {
    .shop-header-overlay-title {
        font-size: clamp(1.125rem, 3vw, 1.375rem);
    }

    .shop-header-overlay-subtitle {
        font-size: clamp(0.8125rem, 2vw, 0.875rem);
    }
}

@media (min-width: 1024px) {
    .shop-header-overlay-title {
        font-size: clamp(1.25rem, 2vw, 1.5rem);
    }

    .shop-header-overlay-subtitle {
        font-size: 0.875rem;
    }
}

.shop-header-cta {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    background-color: var(--theme-overlay-dark-72);
    color: var(--theme-text-on-primary);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    border: 1px solid var(--theme-overlay-light-15);
    box-shadow: 0 2px 12px var(--theme-overlay-dark-20);
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.shop-header-cell:hover .shop-header-cta {
    background-color: var(--theme-overlay-dark-82);
}

.shop-header-cta-icon {
    width: 0.875rem;
    height: 0.875rem;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
}

.shop-header-cta-icon span {
    display: block;
    min-width: 2px;
    min-height: 2px;
    background: var(--theme-text-on-primary);
    border-radius: 1px;
}

.shop-header-cta-extra {
    font-size: 0.7rem;
    opacity: 0.9;
    margin-left: 0.125rem;
}

/* N=1 */
.shop-header-collage--n1 .shop-header-collage-frame {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
}

.shop-header-cell--full {
    min-height: 0;
    height: 100%;
}

/* N=2 */
.shop-header-collage--n2 .shop-header-collage-frame {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.shop-header-cell--half {
    min-height: 0;
    height: 100%;
}

/* N=3: left hero (65–70%) + right column 2 stacked tiles only (1 col, 2 rows). No 3 columns. */
.shop-header-collage--n3 .shop-header-collage-frame {
    grid-template-columns: 1.85fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.shop-header-collage--n3 .shop-header-cell--twothirds {
    grid-column: 1;
    grid-row: 1 / -1;
    min-height: 0;
    height: 100%;
}

.shop-header-collage--n3 .shop-header-stack {
    grid-column: 2;
    grid-row: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: inherit;
    min-height: 0;
    height: 100%;
}

.shop-header-stack .shop-header-cell {
    flex: 1;
    min-height: 0;
    height: 100%;
}

@media (max-width: 767px) {
    .shop-header-collage--n3 .shop-header-collage-frame {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
    }

    .shop-header-collage--n3 .shop-header-cell--twothirds {
        grid-row: span 1;
    }

    .shop-header-collage--n3 .shop-header-stack {
        grid-column: 1;
        grid-row: span 1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
    }
}

/* N=4: left hero + right 2 cols only (2 top, 4th spans full width bottom). */
.shop-header-collage--n4 .shop-header-collage-frame {
    grid-template-columns: 1.2fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.shop-header-collage--n4 .shop-header-cell--four-left {
    grid-column: 1;
    grid-row: 1 / -1;
    min-height: 0;
    height: 100%;
}

.shop-header-collage--n4 .shop-header-four-right {
    grid-column: 2;
    grid-row: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: inherit;
    min-height: 0;
    height: 100%;
}

.shop-header-four-right .shop-header-cell--wide {
    grid-column: 1 / -1;
}

.shop-header-four-right .shop-header-cell {
    min-height: 0;
    height: 100%;
}

@media (max-width: 767px) {
    .shop-header-collage--n4 .shop-header-collage-frame {
        grid-template-columns: 1fr;
        grid-template-rows: 1.2fr 1fr 1fr;
    }

    .shop-header-collage--n4 .shop-header-cell--four-left {
        grid-row: span 1;
    }

    .shop-header-collage--n4 .shop-header-four-right {
        grid-column: 1;
        grid-row: span 2;
    }

    .shop-header-four-right .shop-header-cell--wide {
        grid-column: span 1;
    }
}

/* N>=5: left hero + right 2x2 only (exactly 4 tiles, 2 cols 2 rows). */
.shop-header-collage--n5 .shop-header-collage-frame {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
}

@media (min-width: 768px) {
    .shop-header-collage--n5 .shop-header-collage-frame {
        grid-template-columns: 7fr 5fr;
        grid-template-rows: 1fr 1fr;
    }

    .shop-header-collage--n5 .shop-header-cell--five-hero {
        grid-column: 1;
        grid-row: 1 / -1;
        min-height: 0;
        height: 100%;
    }

    .shop-header-collage--n5 .shop-header-five-thumbs {
        grid-column: 2;
        grid-row: 1 / -1;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: inherit;
        min-height: 0;
        height: 100%;
    }

    .shop-header-five-thumbs .shop-header-cell {
        min-height: 0;
        height: 100%;
    }
}

@media (max-width: 767px) {
    .shop-header-collage--n5 .shop-header-cell--five-hero {
        grid-row: span 1;
    }

    .shop-header-collage--n5 .shop-header-five-thumbs {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        gap: inherit;
        min-height: 0;
        height: 100%;
    }

    .shop-header-five-thumbs .shop-header-cell {
        min-height: 0;
        height: 100%;
    }
}

/* Gallery modal (reuse reservation-hero-gallery pattern) */
.shop-header-gallery {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shop-header-gallery-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.9);
}

.shop-header-gallery-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem 4rem;
}

.shop-header-gallery-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

.shop-header-gallery-counter {
    color: #fff;
    font-size: 0.875rem;
}

.shop-header-gallery-close {
    padding: 0.5rem;
    color: #fff;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 0.5rem;
}

.shop-header-gallery-close:hover {
    background: var(--theme-overlay-light-15);
}

.shop-header-gallery-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 90vw;
}

.shop-header-gallery-image {
    max-width: 100%;
    max-height: 85vh;
    width: auto;
    height: auto;
    object-fit: contain;
}

.shop-header-gallery-nav {
    position: absolute;
    bottom: 1.5rem;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.shop-header-gallery-prev,
.shop-header-gallery-next {
    padding: 0.75rem;
    color: var(--theme-text-on-primary);
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    background: var(--theme-overlay-dark-40);
}

.shop-header-gallery-prev:hover,
.shop-header-gallery-next:hover {
    background: rgba(0, 0, 0, 0.6);
}

/* Menu cards: dynamic height so tags/description don't get cut off (both default & modern themes) */
.menu-selection-card {
    min-height: fit-content;
    height: auto;
}

/* aspect-ratio fallback for older browsers */
@supports not (aspect-ratio: 1) {
    .menu-selection-card [class*="aspect-"] {
        padding-bottom: 75%;
        height: 0;
    }
    .menu-selection-card [class*="aspect-"] img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* Menu details modal: image carousel/gallery (shared for default & modern themes) */
.menu-modal-gallery {
    background: rgba(0, 0, 0, 0.05);
}

.menu-modal-gallery-zoom-hint {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.menu-modal-gallery-lightbox-trigger:hover .menu-modal-gallery-zoom-hint {
    opacity: 1;
}

.menu-modal-gallery-nav {
    position: absolute;
    bottom: 0.75rem;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    z-index: 30;
    pointer-events: auto;
}

.menu-modal-gallery-btn {
    padding: 0.5rem 0.75rem;
    color: #fff;
    border-radius: 9999px;
    border: none;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.5);
    transition: background 0.2s;
}

.menu-modal-gallery-btn:hover {
    background: rgba(0, 0, 0, 0.7);
}

.menu-modal-gallery-counter {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Alpine.js: hide until initialized */
[x-cloak] {
    display: none !important;
}

/* Summary row typography: label smaller, value slightly stronger */
.res-summary-row span:first-child {
    font-size: 0.8125rem;
    /* 13px */
    letter-spacing: 0.01em;
}

.res-summary-row span:last-child {
    font-size: 0.875rem;
    /* 14px */
}

/* Service card title size */
.reservation-service-card h3 {
    font-size: 1rem;
    font-weight: 600;
}

/* ============================================
   PRICING — ALWAYS RED BOLD (all pages)
   course_price, total_price, restaurant-theme-price, etc.
   ============================================ */
.course_price,
.total_price,
.restaurant-theme-price,
.restaurant-theme-total,
.restaurant-menu-price,
.menu-card-price,
.seat-only-price,
.course-menu-price-value,
#billingAmountDisplay {
    color: #dc2626 !important;
    font-weight: 700 !important;
}
.total_price,
#billingAmountDisplay {
    font-size: 1.5rem !important;
    letter-spacing: -0.02em;
}

/* When total is on gradient/dark background: use white for contrast, not red */
.reservation-total-on-gradient .total_price,
.reservation-total-on-gradient .restaurant-theme-total,
.reservation-total-on-gradient #billingAmountDisplay {
    color: #fff !important;
}

/* Total row: more vertical breathing */
.-mx-6.px-6.py-4 {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

/* ============================================
   SUMMARY ROWS — CLEANER DIVIDERS
   .res-summary-row already has border-bottom
   from the rule above; here we refine density.
   ============================================ */
.res-summary-row {
    border-bottom: 1px solid rgba(var(--theme-primary-rgb, 139, 44, 44), 0.08) !important;
}

.res-summary-row:last-child {
    border-bottom: none !important;
}

/* ============================================
   FLOATING SUMMARY BAR
   Feels like "quick action bar", not
   a heavy independent component.
   ============================================ */
#floatingSummaryBar {
    backdrop-filter: blur(12px) saturate(1.4);
    background-color: var(--theme-overlay-light-96) !important;
    border-top: 1px solid rgba(var(--theme-primary-rgb, 139, 44, 44), 0.12) !important;
    box-shadow: 0 -2px 16px var(--theme-overlay-dark-08);
}

/* Bar items: consistent icon color through theme var */
#floatingSummaryBar .fa-calendar-alt,
#floatingSummaryBar i.fa-calendar-alt {
    color: var(--theme-primary) !important;
}

/* Bar total: primary color, not error-red */
#floatingSummaryBar #floatingTotal {
    font-size: 1.125rem;
    font-weight: 700;
}

/* Bar button: secondary size (40px), theme primary */
#floatingSummaryBar #floatingReserveBtn {
    min-height: 40px;
    padding: 8px 18px !important;
    font-size: 0.875rem !important;
    font-weight: 600;
    border-radius: 10px !important;
    background-color: var(--theme-button-primary) !important;
    color: var(--theme-button-text, #fff) !important;
    border: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

#floatingSummaryBar #floatingReserveBtn:hover:not(:disabled) {
    background-color: var(--theme-button-primary-hover, var(--theme-button-primary)) !important;
}

#floatingSummaryBar #floatingReserveBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#floatingSummaryBar #floatingReserveBtn .floating-reserve-btn-label--desktop {
    display: none;
}
#floatingSummaryBar #floatingReserveBtn .floating-reserve-btn-label--mobile {
    display: inline;
}
@media (min-width: 640px) {
    #floatingSummaryBar #floatingReserveBtn .floating-reserve-btn-label--desktop {
        display: inline;
    }
    #floatingSummaryBar #floatingReserveBtn .floating-reserve-btn-label--mobile {
        display: none;
    }
}

/* Sticky bar responsive: safe area, wrap, no overflow */
#floatingSummaryBar {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

#floatingSummaryBar>div {
    min-height: 52px;
}

@media (max-width: 639px) {
    #floatingSummaryBar .flex.items-center.space-x-2 {
        flex-wrap: wrap;
        gap: 4px 8px;
    }

    #floatingSummaryBar #floatingTotal {
        font-size: 1rem;
    }
}

#floatingActionBar {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Confirmation floating bar total: theme-primary (not red) */
#floatingActionBar .floating-confirm-total-item .text-lg {
    color: var(--theme-primary) !important;
}

@media (max-width: 639px) {
    #floatingActionBar .flex-1 {
        min-width: 0;
    }
}

/* ============================================
   SERVICE CARD SELECTION STATE
   Uses theme success (green) for clear selected indication.
   ============================================ */
.order-menus.selected {
    background-color: var(--theme-success, #16a34a) !important;
    border-color: var(--theme-success, #16a34a) !important;
    color: #fff !important;
}

/* Parent card selected highlight — primary, not green */
.menu-card-selected {
    outline: 2px solid var(--theme-primary);
    outline-offset: 2px;
}

/* Menu card selected state — card border/bg when selected (green tint) */
.menu-selection-card:has(.order-menus.selected) {
    border-color: var(--theme-success, #16a34a) !important;
    border-width: 2px !important;
    background-color: rgba(var(--theme-success-rgb, 22, 163, 74), 0.08) !important;
    box-shadow: 0 0 0 1px var(--theme-success, #16a34a) !important;
}

/* Seat-only button selected state — green for clear selected indication */
.order-menus.seat-only-btn.selected,
.order-menus.seat-only-btn.course-menu-btn.selected {
    background-color: var(--theme-success, #16a34a) !important;
    border-color: var(--theme-success, #16a34a) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(var(--theme-success-rgb, 22, 163, 74), 0.35) !important;
}

/* ============================================
   ACTION BUTTONS SECTION BACKGROUND
   Slightly warm neutral instead of stark grey.
   ============================================ */
.p-4.sm\\:p-6.border-t-2.border-gray-200[style*="theme-background-alt"] {
    background-color: rgba(var(--theme-primary-rgb, 139, 44, 44), 0.03) !important;
    border-top-color: rgba(var(--theme-primary-rgb, 139, 44, 44), 0.10) !important;
}

/* ============================================
   NOTES TEXTAREA
   Calmer, less heavy border.
   ============================================ */
textarea.theme-input,
.theme-input {
    border-color: rgba(var(--theme-primary-rgb, 139, 44, 44), 0.18) !important;
    border-radius: 8px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea.theme-input:focus,
.theme-input:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 139, 44, 44), 0.12) !important;
    outline: none;
}

/* ============================================
   GUEST CHOICE MODAL
   Enterprise-grade: consistent radius/shadow,
   themed colors, no hardcoded grays.
   ============================================ */

/* Modal card box */
.res-modal-box {
    border-radius: 14px;
    padding: 32px 28px 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(var(--theme-primary-rgb, 139, 44, 44), 0.08);
}

/* Modal icon circle: primary tint (matches card header system) */
.res-modal-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: rgba(var(--theme-primary-rgb, 139, 44, 44), 0.08);
    border: 1.5px solid rgba(var(--theme-primary-rgb, 139, 44, 44), 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Secondary (guest) button: subtle bordered, themed */
.res-modal-secondary-btn {
    background-color: var(--theme-background, #fff);
    color: var(--theme-text, #1f2937);
    border: 1.5px solid rgba(var(--theme-primary-rgb, 139, 44, 44), 0.20);
}

.res-modal-secondary-btn:hover {
    background-color: rgba(var(--theme-primary-rgb, 139, 44, 44), 0.04);
    border-color: rgba(var(--theme-primary-rgb, 139, 44, 44), 0.35);
    color: var(--theme-primary);
}

/* Cancel tertiary: muted text, no border */
.res-modal-cancel-btn {
    color: var(--theme-text-muted, #9ca3af);
    background: transparent;
    border: none;
}

.res-modal-cancel-btn:hover {
    color: var(--theme-text, #374151);
}

/* ============================================
   BUTTON SIZE & TYPOGRAPHY SCALE (single source of truth)
   Primary CTA: 48px height, 15px font
   Secondary: 40px height, 14px font
   Small / tertiary: 36px height, 13px font
   ============================================ */

/* Primary CTA — 48px min-height, 15px font, 12px radius */
.res-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px;
    font-size: 0.9375rem;
    /* 15px */
    font-weight: 600;
    line-height: 1.35;
    border-radius: 12px;
    transition: background-color 0.18s ease, transform 0.15s ease, box-shadow 0.18s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
    border: none;
    cursor: pointer;
}

.res-submit-btn:hover {
    background-color: var(--theme-button-primary-hover, var(--theme-primary-hover)) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.20);
}

.res-submit-btn:active {
    background-color: var(--theme-button-primary-active, var(--theme-primary)) !important;
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.res-submit-btn:disabled,
.res-submit-btn[disabled] {
    background-color: var(--theme-button-disabled, #d1d5db) !important;
    color: var(--theme-text-disabled, #9ca3af) !important;
    transform: none;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.75;
}

/* Secondary button — 40px min-height, 14px font */
.res-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 16px;
    font-size: 0.875rem;
    /* 14px */
    font-weight: 500;
    line-height: 1.4;
    border-radius: 10px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    background-color: var(--theme-background-alt, #f3f4f6);
    color: var(--theme-text, #1f2937);
    border: 1px solid var(--theme-border, #e5e7eb);
}

.res-btn-secondary:hover {
    background-color: var(--theme-border, #e5e7eb);
    border-color: var(--theme-border-hover, #d1d5db);
    color: var(--theme-text, #111827);
}

/* Small / tertiary (e.g. 上に戻る, 閉じる) — 36px min-height, 13px font */
.res-btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 6px 14px;
    font-size: 0.8125rem;
    /* 13px */
    font-weight: 500;
    line-height: 1.4;
    border-radius: 8px;
    transition: background-color 0.15s ease, color 0.15s ease;
    background-color: var(--theme-background-alt, #f3f4f6);
    color: var(--theme-text-muted, #6b7280);
    border: 1px solid transparent;
}

.res-btn-small:hover {
    background-color: var(--theme-border, #e5e7eb);
    color: var(--theme-text, #374151);
}

/* ============================================
   SHOP INFO PHONE LINK HOVER
   ============================================ */
.res-phone-link:hover {
    background-color: var(--theme-border, #e5e7eb) !important;
}

/* ============================================
   PICKER INPUTS (date / guest / time fields)
   Themed border and focus ring; replaces
   hardcoded focus:ring-blue-500 utility.
   ============================================ */
.res-picker-input {
    background-color: var(--theme-background-alt, #f9fafb);
    border-color: var(--theme-border, #e5e7eb);
    color: var(--theme-text, #1f2937);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.res-picker-input:focus {
    outline: none;
    border-color: var(--theme-input-focus-border, var(--theme-primary));
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 59, 130, 246), 0.15);
}

/* Guest form inputs: same look and touch target across 姓・名・メール・電話 */
.res-guest-input {
    min-height: 44px;
    font-size: 0.875rem;
    padding: 10px 14px;
    border-radius: 10px;
    width: 100%;
    border: 1px solid var(--theme-border, #e5e7eb);
    background-color: var(--theme-background, #fff);
    color: var(--theme-text, #1f2937);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.res-guest-input::placeholder {
    color: var(--theme-text-muted, #6b7280);
}

.store_reservable_time::placeholder,
.guest_picker_input::placeholder,
#resrvCalendar::placeholder {
    color: var(--theme-text-muted, #6b7280);
}

.res-guest-input:focus {
    outline: none;
    border-color: var(--theme-input-focus-border, var(--theme-primary));
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 59, 130, 246), 0.15);
}

.res-guest-input:hover:not(:focus) {
    border-color: var(--theme-border-hover, #d1d5db);
}

/* ============================================
   SITE FOOTER — Theme-driven; no inline styles
   ============================================ */
.site-footer {
    background-color: var(--theme-footer-background, #0f172a);
    color: var(--theme-footer-text, #f8fafc);
}
.site-footer__title {
    color: var(--theme-footer-link, var(--theme-footer-text));
}
.site-footer__title--text {
    color: var(--theme-footer-text);
}
.site-footer__icon {
    color: var(--theme-footer-link, var(--theme-footer-text));
}
.site-footer__link {
    color: var(--theme-footer-link, var(--theme-footer-text));
    transition: color 0.2s ease;
}
.site-footer__link:hover {
    color: var(--theme-footer-link-hover, #ffffff);
}
.site-footer__divider {
    border-top: 1px solid var(--theme-border, rgba(255, 255, 255, 0.1));
}
.site-footer__copyright {
    color: var(--theme-footer-text);
    opacity: 0.7;
}

/* ============================================
   RESERVATION COMPLETE — Theme-driven; no inline styles
   ============================================ */
.res-complete-hero {
    background: linear-gradient(135deg, var(--theme-primary, #2563eb) 0%, var(--theme-secondary, var(--theme-primary)) 100%);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.res-complete-hero-icon {
    background-color: var(--theme-background);
}
.res-complete-hero-icon--success { color: var(--theme-success); }
.res-complete-hero-icon--warning { color: var(--theme-warning, #d97706); }
.res-complete-hero-badge {
    background: rgba(255, 255, 255, 0.2);
}
.res-complete-main {
    background-color: var(--theme-background, #f9fafb);
}
.res-complete-card {
    background-color: var(--theme-card-background, #fff);
    border-color: var(--theme-border);
    box-shadow: var(--theme-shadow-base, 0 1px 3px 0 rgba(0, 0, 0, 0.1));
}
.res-complete-card__header--gradient {
    background: linear-gradient(to right, var(--theme-primary), var(--theme-secondary, var(--theme-primary)));
}
.res-complete-card__section {
    background: var(--theme-background-alt, #f3f4f6);
    border-bottom-color: var(--theme-border);
}
.res-complete-text { color: var(--theme-text); }
.res-complete-text--muted { color: var(--theme-text-muted, #6b7280); }
.res-complete-link { color: var(--theme-primary); }
.res-complete-link:hover { color: var(--theme-primary-hover, var(--theme-primary)); }
.res-complete-icon { color: var(--theme-primary); }
.res-complete-badge-info {
    background: var(--theme-badge-info-bg, #fef2f2);
}
.res-complete-badge-info--border { border-color: var(--theme-primary); }
.res-complete-payment-badge--paid {
    background-color: rgba(var(--theme-success-rgb, 46, 125, 50), 0.15);
    color: var(--theme-success);
}
.res-complete-payment-badge--unpaid {
    background-color: rgba(var(--theme-warning-rgb, 230, 81, 0), 0.15);
    color: var(--theme-warning);
}
.res-complete-btn-primary {
    background-color: var(--theme-button-primary, var(--theme-primary));
}
.res-complete-btn-primary:hover {
    filter: brightness(1.05);
}
.res-complete-btn-secondary {
    background-color: var(--theme-button-secondary, var(--theme-secondary));
    color: var(--theme-button-text, #fff);
    border-color: var(--theme-button-secondary);
}
.res-complete-btn-secondary:hover {
    background-color: var(--theme-button-secondary-hover, var(--theme-secondary-hover));
    border-color: var(--theme-button-secondary-hover, var(--theme-secondary-hover));
    color: var(--theme-button-secondary-text-hover, var(--theme-button-text, #fff));
}
.res-complete-contact-card {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-secondary, var(--theme-primary)));
    border-color: var(--theme-border);
}
.res-complete-info-box {
    background: var(--theme-background-alt, #f9fafb);
    border-color: var(--theme-border);
}
.res-complete-policy-card {
    background: var(--theme-card-background, #fff);
    border-color: var(--theme-border);
}
.res-complete-alert-warning-title { color: var(--theme-warning); }
.res-complete-alert-warning-text { color: var(--theme-text); }

/* ============================================
   COURSE MENU CARDS — Theme-driven; no inline styles
   ============================================ */
.course-menu-fav-active {
    background-color: var(--theme-badge-error-bg, #fef2f2);
    color: var(--theme-error, #dc2626);
}
.course-menu-fav-inactive {
    background-color: rgba(0, 0, 0, 0.1);
    color: var(--theme-text);
}
.course-menu-badge-primary {
    background-color: var(--theme-primary);
}
.course-menu-badge-secondary {
    background-color: var(--theme-secondary);
}
.course-menu-title {
    color: var(--theme-text, #1f2937);
}
.course-menu-duration-badge {
    background-color: rgba(var(--theme-primary-rgb, 59, 130, 246), 0.1);
    color: var(--theme-primary);
}
.course-menu-tag {
    background: rgba(0, 0, 0, 0.06);
    color: var(--theme-text, #4b5563);
}
.course-menu-read-more {
    color: var(--theme-primary);
}
.course-menu-read-more:hover {
    opacity: 0.8;
}
.course-menu-price-type-primary {
    color: var(--theme-primary);
}
.course-menu-price-type-secondary {
    color: var(--theme-secondary);
}
.course-menu-price-value {
    color: var(--theme-primary);
}

/* Restaurant (modern) theme course menu — theme-driven; no inline styles */
.restaurant-menu-card {
    background: var(--theme-card-background, #FFFFFF);
    border: 1px solid var(--theme-border, #E8DCC8);
    border-radius: 0.75rem;
    box-shadow: 0 2px 12px rgba(44, 24, 16, 0.06);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.restaurant-menu-card:hover {
    box-shadow: 0 4px 16px rgba(44, 24, 16, 0.1);
    transform: translateY(-2px);
}
.restaurant-menu-card__accent {
    background: var(--theme-border, #E8DCC8);
}
.restaurant-menu-title {
    color: var(--theme-heading, var(--theme-text, #2C1810));
}
.restaurant-menu-desc {
    color: var(--theme-text-light, var(--theme-text-muted, #8B7355));
}
.restaurant-menu-duration-badge,
.restaurant-menu-type-badge {
    background: rgba(var(--theme-primary-rgb, 92, 45, 45), 0.08);
    color: var(--theme-text-light, var(--theme-text-muted, #8B7355));
    border: 1px solid rgba(var(--theme-primary-rgb, 92, 45, 45), 0.15);
}
.restaurant-menu-tag {
    background: rgba(0, 0, 0, 0.06);
    color: var(--theme-text-light, var(--theme-text-muted, #8B7355));
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.restaurant-menu-price {
    color: #dc2626 !important;
    font-weight: 700 !important;
}
.restaurant-menu-btn {
    background: var(--theme-primary);
    color: var(--theme-button-text);
    box-shadow: 0 1px 4px rgba(var(--theme-primary-rgb), 0.2);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.restaurant-menu-btn:hover {
    box-shadow: 0 2px 8px rgba(var(--theme-primary-rgb), 0.25);
    transform: translateY(-1px);
}