/* ---- COOK Reservation Form v2.9 — Royal Dark Green ---- */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --cr-bg-primary:     #15291e;
    --cr-bg-card:        #15291e;
    --cr-bg-input:       #1f3628;
    --cr-bg-elevated:    #243d2c;
    --cr-accent:         #D6B178;
    --cr-accent-bright:  #e8c79a;
    --cr-accent-deep:    #b89559;
    --cr-accent-glow:    rgba(214, 177, 120, 0.18);
    --cr-accent-dim:     rgba(214, 177, 120, 0.12);
    --cr-text-primary:   #f5f0e8;
    --cr-text-secondary: #b8c9bd;
    --cr-text-muted:     #7a9587;
    --cr-border:         rgba(214, 177, 120, 0.18);
    --cr-border-soft:    rgba(214, 177, 120, 0.10);
    --cr-border-focus:   #D6B178;
    --cr-error:          #e89595;
    --cr-success:        #9ed4a8;
    --cr-transition:     0.3s ease;
    --cr-font-serif:     'Cormorant Garamond', 'Playfair Display', 'Didot', Georgia, serif;
    --cr-font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* =====================================================================
   Wrapper & Container
   ===================================================================== */

.cook-res-wrapper {
    width: 100%;
    padding: 32px 16px;
    box-sizing: border-box;
    background: transparent;
    font-family: var(--cr-font-sans);
}

.cook-res-container {
    max-width: 620px;
    margin: 0 auto;
    padding: 36px 44px 36px;
    box-sizing: border-box;
    background: var(--cr-bg-card);
    border: 1px solid var(--cr-border-soft);
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
    position: relative;
}

/* =====================================================================
   Decorative HEADER injected via pseudo-elements
   (Top ornament + title with divider — subtitle removed)
   ===================================================================== */

/* Top ornament: diamond with thin horizontal lines */
.cook-res-container > form.cook-res-form {
    position: relative;
}

/* Title "RESERVIERUNG" — large GOLD serif with top ornament + bottom divider */
.cook-res-form::before {
    content: "RESERVIERUNG";
    display: block;
    text-align: center;
    font-family: var(--cr-font-serif);
    font-weight: 500;
    color: var(--cr-accent);
    font-size: 44px;
    letter-spacing: 9px;
    line-height: 1;
    padding-top: 36px;
    padding-bottom: 26px;
    margin-bottom: 26px;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 14' preserveAspectRatio='xMidYMid meet'><line x1='8' y1='7' x2='95' y2='7' stroke='%23D6B178' stroke-width='0.6' opacity='0.55'/><path d='M110 2 L116 7 L110 12 L104 7 Z' fill='none' stroke='%23D6B178' stroke-width='0.8'/><circle cx='110' cy='7' r='1' fill='%23D6B178'/><line x1='125' y1='7' x2='212' y2='7' stroke='%23D6B178' stroke-width='0.6' opacity='0.55'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 10' preserveAspectRatio='xMidYMid meet'><line x1='10' y1='5' x2='100' y2='5' stroke='%23D6B178' stroke-width='0.6' opacity='0.5'/><circle cx='110' cy='5' r='1.6' fill='%23D6B178'/><line x1='120' y1='5' x2='210' y2='5' stroke='%23D6B178' stroke-width='0.6' opacity='0.5'/></svg>");
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center bottom;
    background-size: 220px 14px, 220px 10px;
}

/* =====================================================================
   Form Layout — clean grid with subtle gaps
   ===================================================================== */

.cook-res-form {
    width: 100%;
}

.cook-res-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    border: 0;
}

.cook-res-row:last-of-type {
    border-bottom: 0;
}

.cook-res-row--single .cook-res-field {
    width: 100%;
    -webkit-box-flex: none;
    -ms-flex: none;
    flex: none;
}

.cook-res-field {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    padding: 0;
    border: 0;
}

.cook-res-row:not(.cook-res-row--single) .cook-res-field:first-child,
.cook-res-row:not(.cook-res-row--single) .cook-res-field:last-child {
    padding: 0;
    border: 0;
}

/* =====================================================================
   Labels
   ===================================================================== */

.cook-res-field label {
    display: block;
    color: var(--cr-text-secondary);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 12px;
    font-weight: 500;
    font-family: var(--cr-font-sans);
}

.cook-res-optional {
    color: var(--cr-text-muted);
    font-size: 10px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    opacity: 0.7;
    margin-left: 6px;
}

/* =====================================================================
   Inputs, Selects, Textarea — slightly elevated dark green
   ===================================================================== */

.cook-res-field input[type="text"],
.cook-res-field input[type="email"],
.cook-res-field select,
.cook-res-field textarea {
    background: var(--cr-bg-input);
    border: 1px solid var(--cr-border-soft);
    color: var(--cr-text-primary);
    padding: 14px 18px;
    font-size: 14px;
    font-family: var(--cr-font-sans);
    font-weight: 400;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    -webkit-transition: border-color var(--cr-transition), box-shadow var(--cr-transition), background var(--cr-transition);
    transition: border-color var(--cr-transition), box-shadow var(--cr-transition), background var(--cr-transition);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 3px;
    line-height: 1.4;
}

.cook-res-field input[type="text"]:hover,
.cook-res-field input[type="email"]:hover,
.cook-res-field select:hover,
.cook-res-field textarea:hover {
    border-color: var(--cr-border);
    background: var(--cr-bg-elevated);
}

.cook-res-field input[type="text"]:focus,
.cook-res-field input[type="email"]:focus,
.cook-res-field select:focus,
.cook-res-field textarea:focus {
    border-color: var(--cr-border-focus);
    background: var(--cr-bg-elevated);
    box-shadow: 0 0 0 3px var(--cr-accent-glow);
}

.cook-res-field input::placeholder,
.cook-res-field textarea::placeholder {
    color: var(--cr-text-muted);
    opacity: 0.75;
    font-weight: 300;
}

/* Prevent Chrome/Safari from painting autofilled inputs in their default
   yellow/white. Force the green theme to persist on autofill. */
.cook-res-field input:-webkit-autofill,
.cook-res-field input:-webkit-autofill:hover,
.cook-res-field input:-webkit-autofill:focus,
.cook-res-field input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--cr-bg-input) inset !important;
    box-shadow: 0 0 0 1000px var(--cr-bg-input) inset !important;
    -webkit-text-fill-color: var(--cr-text-primary) !important;
    caret-color: var(--cr-text-primary);
    transition: background-color 5000s ease-in-out 0s;
}

.cook-res-field select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 6 5-6' fill='none' stroke='%23D6B178' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 44px;
}

.cook-res-field select option {
    background: var(--cr-bg-card);
    color: var(--cr-text-primary);
}

.cook-res-field textarea {
    resize: vertical;
    min-height: 110px;
    font-family: var(--cr-font-sans);
}

/* Date field: add subtle calendar icon on the right */
#cook-res-date {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23D6B178' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 48px;
    cursor: pointer;
}

/* =====================================================================
   Date Hero — shown after a date is picked
   ===================================================================== */

.cook-date-hero {
    max-width: 380px;
    margin: 0 auto;
    background: var(--cr-bg-elevated);
    border: 1px solid var(--cr-border);
    border-radius: 4px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    /* hidden state — collapsed + invisible */
    max-height: 0;
    padding: 0 28px;
    margin-top: 0;
    margin-bottom: 0;
    opacity: 0;
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
    overflow: hidden;
    border-color: transparent;
    box-shadow: none;
    -webkit-transition: max-height 0.45s ease, padding 0.45s ease, margin 0.45s ease, opacity 0.5s ease 0.05s, -webkit-transform 0.5s ease 0.05s, border-color 0.4s ease 0.1s, box-shadow 0.4s ease 0.1s;
    transition: max-height 0.45s ease, padding 0.45s ease, margin 0.45s ease, opacity 0.5s ease 0.05s, transform 0.5s ease 0.05s, border-color 0.4s ease 0.1s, box-shadow 0.4s ease 0.1s;
}

.cook-date-hero.is-visible {
    max-height: 240px;
    padding: 26px 28px;
    margin-top: 28px;
    margin-bottom: 4px;
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    border-color: var(--cr-border);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.cook-date-hero__day {
    display: block;
    font-family: var(--cr-font-serif);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 7px;
    text-transform: uppercase;
    color: var(--cr-accent);
    line-height: 1;
    margin-bottom: 10px;
}

.cook-date-hero__date {
    display: block;
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--cr-text-secondary);
    text-transform: uppercase;
    font-weight: 400;
}

.cook-date-hero__meta {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--cr-border-soft);
    width: 70%;
}

.cook-date-hero__time,
.cook-date-hero__persons {
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--cr-accent);
    text-transform: uppercase;
    font-weight: 500;
    text-align: center;
    display: block;
}

/* =====================================================================
   Validation Errors
   ===================================================================== */

.cook-res-error {
    display: block;
    color: var(--cr-error);
    font-size: 11px;
    margin-top: 7px;
    min-height: 16px;
    letter-spacing: 0.4px;
    font-weight: 400;
}

/* =====================================================================
   Submit Button — Royal full-width gold gradient
   ===================================================================== */

.cook-res-submit-wrap {
    margin-top: 26px;
    width: 100%;
}

.cook-res-btn {
    background: linear-gradient(135deg, var(--cr-accent-deep) 0%, var(--cr-accent-bright) 50%, var(--cr-accent) 100%);
    background-size: 200% 100%;
    background-position: 0% 50%;
    border: 0;
    color: var(--cr-bg-primary);
    padding: 16px 40px;
    font-size: 12px;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--cr-font-sans);
    -webkit-transition: background-position var(--cr-transition), box-shadow var(--cr-transition), -webkit-transform var(--cr-transition);
    transition: background-position var(--cr-transition), box-shadow var(--cr-transition), transform var(--cr-transition);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 12px;
    border-radius: 3px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0 4px 24px rgba(214, 177, 120, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.cook-res-btn:hover {
    background-position: 100% 50%;
    box-shadow: 0 6px 32px rgba(214, 177, 120, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    -webkit-transform: translateY(-1px);
    transform: translateY(-1px);
}

.cook-res-btn:active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

.cook-res-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    -webkit-transform: none;
    transform: none;
}

/* =====================================================================
   Decorative FOOTER injected via pseudo-elements
   ===================================================================== */

/* Bottom divider with center dot — placed after the form */
.cook-res-form::after {
    content: "";
    display: block;
    height: 10px;
    margin-top: 32px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 10' preserveAspectRatio='xMidYMid meet'><line x1='10' y1='5' x2='100' y2='5' stroke='%23D6B178' stroke-width='0.6' opacity='0.5'/><circle cx='110' cy='5' r='1.6' fill='%23D6B178'/><line x1='120' y1='5' x2='210' y2='5' stroke='%23D6B178' stroke-width='0.6' opacity='0.5'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 220px 10px;
}

/* Footer text: hours + email (two lines via \A) */
.cook-res-container::after {
    content: "Täglich von 10:00 bis 17:00 Uhr\A cook@anyact.at";
    white-space: pre;
    display: block;
    text-align: center;
    color: var(--cr-text-muted);
    font-size: 12px;
    line-height: 1.9;
    letter-spacing: 0.5px;
    margin-top: 16px;
    font-family: var(--cr-font-sans);
    font-weight: 300;
}

/* =====================================================================
   Loading Spinner
   ===================================================================== */

.cook-res-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(26, 46, 34, 0.3);
    border-top-color: var(--cr-bg-primary);
    border-radius: 50%;
    -webkit-animation: cook-spin 0.75s linear infinite;
    animation: cook-spin 0.75s linear infinite;
}

@-webkit-keyframes cook-spin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes cook-spin {
    to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

/* =====================================================================
   Toast Messages
   ===================================================================== */

.cook-res-toast {
    margin-top: 24px;
    padding: 16px 20px;
    font-size: 13px;
    line-height: 1.5;
    display: none;
    border-radius: 3px;
    border-left: 3px solid transparent;
    text-align: center;
    letter-spacing: 0.5px;
    font-family: var(--cr-font-sans);
}

.cook-res-toast.success {
    background: rgba(34, 197, 94, 0.07);
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-left: 3px solid var(--cr-success);
    color: var(--cr-success);
    display: block;
}

.cook-res-toast.error {
    background: rgba(239, 68, 68, 0.07);
    border: 1px solid rgba(239, 68, 68, 0.22);
    border-left: 3px solid #fca5a5;
    color: #fca5a5;
    display: block;
}

/* =====================================================================
   Flatpickr — Royal Dark Green Theme
   ===================================================================== */

.flatpickr-calendar {
    background: var(--cr-bg-elevated, #243d2c) !important;
    border: 1px solid rgba(214, 177, 120, 0.25) !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6) !important;
    border-radius: 4px !important;
    font-family: var(--cr-font-sans) !important;
}

.flatpickr-innerContainer {
    background: var(--cr-bg-elevated, #243d2c) !important;
}

.flatpickr-day {
    color: var(--cr-text-secondary, #b8c9bd) !important;
    border-radius: 2px !important;
    font-weight: 400 !important;
}

.flatpickr-day:hover {
    background: rgba(214, 177, 120, 0.12) !important;
    border-color: rgba(214, 177, 120, 0.12) !important;
    color: var(--cr-accent, #D6B178) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: var(--cr-accent, #D6B178) !important;
    border-color: var(--cr-accent, #D6B178) !important;
    color: var(--cr-bg-primary, #15291e) !important;
    font-weight: 600 !important;
}

.flatpickr-day.today {
    border-color: var(--cr-accent, #D6B178) !important;
    color: var(--cr-accent, #D6B178) !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
    color: var(--cr-text-muted, #7a9587) !important;
    opacity: 0.35;
}

.flatpickr-months .flatpickr-month {
    background: var(--cr-bg-elevated, #243d2c) !important;
    color: var(--cr-text-primary, #f5f0e8) !important;
    fill: var(--cr-text-primary, #f5f0e8) !important;
    border-radius: 4px 4px 0 0;
}

.flatpickr-weekdays {
    background: var(--cr-bg-elevated, #243d2c) !important;
}

span.flatpickr-weekday {
    background: var(--cr-bg-elevated, #243d2c) !important;
    color: var(--cr-accent, #D6B178) !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
}

.flatpickr-current-month input.cur-year {
    color: var(--cr-text-primary, #f5f0e8) !important;
    font-weight: 500 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--cr-bg-elevated, #243d2c) !important;
    color: var(--cr-text-primary, #f5f0e8) !important;
    font-weight: 500 !important;
}

.flatpickr-prev-month svg,
.flatpickr-next-month svg {
    fill: var(--cr-accent, #D6B178) !important;
}

.flatpickr-prev-month:hover svg,
.flatpickr-next-month:hover svg {
    fill: var(--cr-accent-bright, #e8c79a) !important;
}

/* =====================================================================
   Responsive — single column below 580px
   ===================================================================== */

/* =====================================================================
   MOBILE — full-width green background, edge-to-edge form, stacked fields
   ===================================================================== */

@media (max-width: 768px) {
    /* TRUE full-width breakout — escape any WordPress theme parent
       container (entry-content, container with max-width, etc.).
       100vw + calc(-50vw + 50%) shifts the wrapper exactly so its left
       edge aligns with the viewport's left edge, regardless of how much
       padding/margin the theme parents have applied. */
    .cook-res-wrapper {
        padding: 0;
        background: var(--cr-bg-primary);
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        position: relative;
        box-sizing: border-box;
    }

    .cook-res-container {
        max-width: 100%;
        width: 100%;
        padding: 26px 16px 28px;
        background: var(--cr-bg-primary);
        border: 0;
        border-radius: 0;
        box-shadow: none;
        box-sizing: border-box;
    }

    /* Per user spec: every input/textarea/select stretches edge-to-edge
       with width: 100% and box-sizing: border-box so padding doesn't
       cause overflow. */
    .cook-res-wrapper input,
    .cook-res-wrapper select,
    .cook-res-wrapper textarea,
    .cook-res-field input[type="text"],
    .cook-res-field input[type="email"],
    .cook-res-field select,
    .cook-res-field textarea {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        display: block;
    }

    .cook-res-form::before {
        font-size: 26px;
        letter-spacing: 4px;
        padding-top: 26px;
        padding-bottom: 22px;
        margin-bottom: 22px;
        background-size: 170px 14px, 170px 10px;
    }

    /* Stack form rows into a single column with tight, even spacing */
    .cook-res-row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 14px;
    }

    /* Force fields to natural content height — no flex-grow stretch */
    .cook-res-field {
        width: 100%;
        -webkit-box-flex: 0 !important;
        -ms-flex: 0 0 auto !important;
        flex: 0 0 auto !important;
        height: auto;
    }

    .cook-res-field label {
        font-size: 10px;
        letter-spacing: 2.5px;
        margin-bottom: 8px;
    }

    /* Full-width comfortable inputs for thumb tapping */
    .cook-res-field input[type="text"],
    .cook-res-field input[type="email"],
    .cook-res-field select,
    .cook-res-field textarea {
        padding: 14px 16px;
        font-size: 15px;
        width: 100%;
        box-sizing: border-box;
    }

    .cook-res-field textarea { min-height: 100px; }

    /* Empty error span was reserving 16px of vertical space per field
       even when there was no error message — kill that on mobile. */
    .cook-res-error {
        min-height: 0;
        margin-top: 4px;
    }
    .cook-res-error:empty { display: none; }

    .cook-date-hero {
        max-width: 100%;
    }

    .cook-date-hero.is-visible {
        padding: 24px 20px;
        margin-top: 24px;
    }

    .cook-date-hero__day {
        font-size: 26px;
        letter-spacing: 5px;
    }

    .cook-date-hero__date { font-size: 11px; letter-spacing: 2.5px; }
    .cook-date-hero__meta { width: 90%; }
    .cook-date-hero__time,
    .cook-date-hero__persons { font-size: 11px; letter-spacing: 2.5px; }

    .cook-res-submit-wrap { margin-top: 22px; }

    .cook-res-btn {
        padding: 16px 24px;
        font-size: 12px;
        letter-spacing: 3px;
    }

    .cook-res-form::after {
        margin-top: 28px;
        background-size: 180px 10px;
    }

    .cook-res-container::after {
        font-size: 11px;
        margin-top: 14px;
    }

    /* Center the Flatpickr calendar on mobile so it doesn't drift off
       the right edge or get clipped by the viewport. !important is
       required to override Flatpickr's inline left/width JS positioning. */
    .flatpickr-calendar.open {
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: calc(100vw - 24px) !important;
    }
    .flatpickr-rContainer,
    .flatpickr-days,
    .dayContainer {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    .flatpickr-day {
        max-width: calc(100% / 7) !important;
        -ms-flex-preferred-size: calc(100% / 7) !important;
        flex-basis: calc(100% / 7) !important;
    }
}

/* Very small phones — extra tightening */
@media (max-width: 380px) {
    .cook-res-container {
        padding: 22px 16px 26px;
    }

    .cook-res-form::before {
        font-size: 24px;
        letter-spacing: 4px;
        padding-top: 22px;
        padding-bottom: 18px;
        margin-bottom: 18px;
        background-size: 150px 12px, 150px 9px;
    }

    .cook-date-hero__meta { gap: 6px; }
}