* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    min-height: 100vh;
    padding: 0 0 20px 0;
    overflow-y: auto;
    font-size: 15px;
}

.page-wrapper {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.restaurant-logo {
    width: 100%;
    margin: 0 0 16px 0;
    display: block;
}

.restaurant-logo img {
    width: 100%;
    height: auto;
    display: block;
}

.restaurant-name {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: #333;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}

.container {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    padding: 40px 30px;
    width: 100%;
    max-width: 600px;
    margin-bottom: 20px;
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
    font-size: 29px;
}

.booking-summary-header {
    padding: 0 20px;
    margin-bottom: 24px;
    display: none;
    text-align: center;
    color: #666;
    font-weight: normal;
    font-size: 17px;
}

.booking-summary-header.show {
    display: block;
}

.progress-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    position: relative;
}

.progress-container::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: #e0e0e0;
    z-index: 0;
}

.progress-line {
    position: absolute;
    top: 20px;
    left: 0;
    height: 2px;
    background: #4caf50;
    z-index: 1;
    transition: width 0.3s ease;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    flex: 1;
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: 2px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #999;
    transition: all 0.3s ease;
    margin-bottom: 8px;
}

.step.active .step-circle {
    border-color: #FF1D76;
    background: #FF1D76;
    color: white;
}

.step.completed .step-circle {
    border-color: #4caf50;
    background: #4caf50;
    color: white;
}

.step-label {
    font-size: 13px;
    color: #666;
    text-align: center;
}

.step.active .step-label {
    color: #FF1D76;
    font-weight: 600;
}

.form-section {
    display: none;
}

.form-section.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.form-group {
    margin-bottom: 24px;
}

label {
    display: block;
    margin-bottom: 8px;
    color: #333;
    font-weight: 500;
}

/* Prevent auto-zoom on mobile devices */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
textarea,
select {
    font-size: 16px !important;
}

textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-family: inherit;
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.3s ease;
}

textarea:focus {
    outline: none;
    border-color: #FF1D76;
}

.allergies-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 16px;
}

.allergy-option {
    padding: 12px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    text-align: center;
    font-size: 15px;
}

.allergy-option:hover {
    border-color: #FF1D76;
}

.allergy-option:focus {
    outline: none;
}

.allergy-option:focus:not(:hover):not(.selected) {
    border-color: #e0e0e0;
}

.allergy-option:focus-visible:not(:hover):not(.selected) {
    border-color: #e0e0e0;
}

.allergy-option.selected {
    background: #FF1D76;
    border-color: #FF1D76;
    color: white;
}

select, input, textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 17px;
    transition: border-color 0.3s ease;
}

select:focus, input:focus, textarea:focus {
    outline: none;
    border-color: #FF1D76;
}

.guest-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 60px));
    gap: 10px;
    margin-top: 16px;
    justify-content: start;
}

.guest-option {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e0e0e0;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.guest-option:hover {
    border-color: #FF1D76;
    transform: scale(1.05);
}

/* Only show hover effects after mouse movement is detected */
body:not(.mouse-user) .guest-option:hover,
body:not(.mouse-user) .calendar-day:hover,
body:not(.mouse-user) .time-slot:hover,
body:not(.mouse-user) .allergy-option:hover {
    border-color: #e0e0e0;
    transform: none;
}

.guest-option:focus {
    outline: none;
}

.guest-option:focus:not(:hover):not(.selected) {
    border-color: #e0e0e0;
    transform: none;
}

.guest-option:focus-visible:not(:hover):not(.selected) {
    border-color: #e0e0e0;
    transform: none;
}

.guest-option.selected {
    background: #FF1D76;
    border-color: #FF1D76;
    color: white;
}

.calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-top: 16px;
    transition: opacity 0.2s ease;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.calendar-header h3 {
    font-size: 19px;
    color: #333;
}

.calendar-nav {
    display: flex;
    gap: 8px;
}

.calendar-nav button {
    padding: 8px 12px;
    background: #f5f5f5;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 19px;
    transition: background 0.3s ease;
}

.calendar-nav button:hover {
    background: #e0e0e0;
}

.calendar-day-name {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #666;
    padding: 8px 0;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    font-size: 15px;
}

.calendar-day:hover:not(.disabled):not(.other-month) {
    border-color: #FF1D76;
    transform: scale(1.05);
}

.calendar-day:focus {
    outline: none;
}

.calendar-day:focus:not(:hover):not(.selected) {
    border-color: #e0e0e0;
    transform: none;
}

.calendar-day:focus-visible:not(:hover):not(.selected) {
    border-color: #e0e0e0;
    transform: none;
}

.calendar-day.selected {
    background: #FF1D76;
    border-color: #FF1D76;
    color: white;
}

.calendar-day.disabled {
    background: #f5f5f5;
    color: #ccc;
    cursor: not-allowed;
    border-color: #f5f5f5;
}

.calendar-day.other-month {
    color: #ccc;
    border-color: #f5f5f5;
}

.calendar-day.today {
    border-color: #ffa726;
    font-weight: bold;
}

/* Prev/next day navigation shown above the time grid so the user can
   jump between dates without going back to the calendar. Prev is
   disabled when the selected date is today (can't book in the past);
   next has no upper bound. Rendered by renderTimeGridStep.
   The bottom border doubles as the separator between this strip and
   the "Select Time" label + time grid below — keeping the two regions
   visually distinct without needing a dedicated <hr>. */
.date-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding: 0 0 12px 0;
    border-bottom: 1px solid #e0e0e0;
}

/* Chevron buttons. Width is intentionally very narrow (11px) per the
   2026-04-18 UX revisions — the row is for dense inline day stepping,
   not a primary call-to-action, and wider buttons were forcing the
   date label to wrap on narrow booking-widget containers. Height
   stays 44px so the tap target still meets mobile touch guidance
   even with the pared-down width; font-size is reduced to 18px so
   the chevron glyph still fits centred inside the box. */
.date-nav-btn {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    /* flex-basis of 20% is LOAD-BEARING — the generic `button { flex: 1 }`
       rule further down in this stylesheet would otherwise stretch each
       chevron to a third of the .date-nav row. The explicit
       no-grow/no-shrink declaration pins the two chevrons at 20% of the
       toolbar each (total 40%), leaving the date label roughly 60%
       minus gaps so it never wraps across lines. */
    flex: 0 0 20%;
    height: 44px;
    font-size: 22px;
    font-weight: normal;
    line-height: 1;
    color: #333;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.date-nav-btn:hover:not(:disabled) {
    background: #f0f0f0;
    border-color: #bbb;
}

.date-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.date-nav-label {
    flex: 1;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    color: #333;
}

.time-grid {
    display: grid;
    /* Self-sizing grid: each cell is at least 115px wide, and the grid
       packs as many cells-per-row as fit in the available space.
       Replaces the old media-/container-query breakpoint approach —
       which kept missing narrow-embed cases where the outer viewport
       stayed wide but the widget got squeezed into a side column.
       auto-fit + minmax produces the same outcome (4 columns on a
       standalone desktop page, 3 on a narrow embed, 2 on a phone)
       without needing to know the actual widget width in advance.
       115px is sized for the widest expected label ("10:00 PM" at
       15px body font + 2px border + 12px horizontal padding each
       side), so labels never have to wrap onto two lines. */
    grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
    gap: 12px;
    transition: opacity 0.15s ease;
}

/* Heading emitted above each .time-grid when the restaurant has >1
   online rooms. On single-room sites the heading is omitted and the
   grid falls back to the flat layout, so this rule only ever applies
   to multi-room flows. The first heading sits flush under the date-
   nav strip (no top margin); subsequent headings follow a .time-grid
   sibling, so the `.time-grid + .time-grid-room-heading` rule below
   gives them breathing room without needing a :first-of-type dance. */
.time-grid-room-heading {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 14px 0;
    letter-spacing: 0.2px;
    /* Horizontal divider below the label separates each room section
       visually — without it the heading reads as floating copy and
       the per-room groups blur together. Matches the 1px border tone
       used elsewhere in the widget so it doesn't fight for attention. */
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
}

.time-grid + .time-grid-room-heading {
    margin-top: 28px;
}

.time-slot {
    padding: 7px 10px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
    /* Belt-and-braces: even if the grid somehow squeezes a cell below
       the minmax floor (e.g. a custom embed that overrides grid
       tracks), the time label stays on one line. Overflow would be
       visibly wrong too, but "10:00 PM" wrapping to "10:00 / PM" is
       the specific regression we keep running into — nowrap is the
       guaranteed fix. */
    white-space: nowrap;
}

/* Narrower viewports trade a bit more internal padding for denser
   rows — small phones get more visible slots per screen without
   needing to scroll as far. The grid's minmax floor still prevents
   label wrap, so the only effect is a slightly tighter button. */
@media (max-width: 540px) {
    .time-slot {
        padding: 6px 6px;
    }
}

.time-slot:hover {
    border-color: #FF1D76;
}

.time-slot:focus {
    outline: none;
}

.time-slot:focus:not(:hover):not(.selected) {
    border-color: #e0e0e0;
}

.time-slot:focus-visible:not(:hover):not(.selected) {
    border-color: #e0e0e0;
}

.time-slot.selected {
    background: #FF1D76;
    border-color: #FF1D76;
    color: white;
}

/* Meal picker: shown inside step 3 when the chosen date has more than
   one bookable meal. Each card stacks the meal name and its time range
   vertically. Events get a distinct tint so they read as special. */
.meal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.meal-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: transform 0.1s ease, border-color 0.1s ease;
    text-align: center;
    min-height: 90px;
}

.meal-card:hover {
    border-color: #FF1D76;
    transform: translateY(-2px);
}

.meal-card.selected {
    background: #FF1D76;
    border-color: #FF1D76;
    color: white;
}

.meal-card-event {
    background: #fff3f8;
    border-color: #FF1D76;
}

.meal-card-name {
    font-size: 18px;
    font-weight: 600;
}

.meal-card-event-name {
    font-size: 12px;
    color: #FF1D76;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.meal-card-event.selected .meal-card-event-name {
    color: white;
}

.meal-card-times {
    font-size: 14px;
    color: #666;
}

.meal-card.selected .meal-card-times {
    color: rgba(255, 255, 255, 0.85);
}

/* Event slot: vertical stack of time + event name, distinctive tint. */
.time-slot-event {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 10px 12px;
    background: #fff3f8;
    border-color: #FF1D76;
}

.time-slot-event .time-slot-time {
    font-weight: 600;
}

.time-slot-event .time-slot-event-name {
    font-size: 12px;
    color: #FF1D76;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.1;
}

.time-slot-event.selected .time-slot-event-name {
    color: white;
}

.loading {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #FF1D76;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.btn-group {
    display: flex;
    gap: 12px;
    margin-top: 30px;
}

button {
    flex: 1;
    padding: 14px 24px;
    border: none;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background: #4caf50;
    color: white;
}

.btn-primary:hover {
    background: #45a049;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.btn-secondary {
    background: #e0e0e0;
    color: #333;
}

.btn-secondary:hover {
    background: #d0d0d0;
}

.summary {
    background: #f5f5f5;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e0e0e0;
}

.summary-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.summary-label {
    color: #666;
}

.summary-value {
    font-weight: 600;
    color: #333;
}

.success-message {
    text-align: center;
    padding: 40px 20px;
}

.success-icon {
    width: 80px;
    height: 80px;
    background: #4caf50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 40px;
    color: white;
}

.error-message {
    background: #fee;
    color: #c33;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 15px;
    display: none;
}

.error-message.show {
    display: block;
    animation: shake 0.3s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

.btn-add-children {
    background: transparent;
    border: 2px solid #ccc;
    color: #999;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 24px;
    display: inline-block;
}

.btn-add-children:hover {
    background: #f0f0f0;
    border-color: #bbb;
    color: #666;
    transform: none;
    box-shadow: none;
}

.btn-add-children.active {
    background: #f0f0f0;
    border-color: #bbb;
    color: #666;
}

@media (max-width: 480px) {
    .container {
        padding: 30px 20px;
    }

    h1 {
        font-size: 25px;
    }

    .restaurant-logo {
        margin-bottom: 12px;
    }

    .guest-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    /* .time-grid mobile override lives above in the 720px block —
       everything below 720 (including this 480 mobile range) picks
       up 3 columns from there, so no rule needed here. */

    .step-label {
        font-size: 12px;
    }

    .step-circle {
        width: 36px;
        height: 36px;
        font-size: 15px;
    }
}