/* Apple.com field structure with the site's Flutter GlassTokens palette.
   Reference: design-handoff/catering-form-research.md. Keep content opaque;
   use the glass material for raised controls and the floating confirmation. */
.catering-page {
    --catering-ink: #0c0a09;
    --catering-muted: #68645b;
    --catering-paper: #f5f5f7;
    --catering-line: #e5e5e7;
    --catering-border: #d2d2d7;
    --catering-control-border: #86868b;
    --catering-accent: #b94316;
    --catering-focus: #0071e3;
    --catering-error: #b42318;
    margin: 0;
    background: var(--catering-paper);
    color: var(--catering-ink);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
}
.catering-page *, .catering-page *::before, .catering-page *::after { box-sizing: border-box; }
.catering-page :is(.catering-main, .catering-success) [hidden] { display: none !important; }
.catering-page :is(.catering-main, .catering-success, .catering-skip-link) :focus-visible,
.catering-page .catering-skip-link:focus-visible { outline: 3px solid var(--catering-focus); outline-offset: 4px; }
.catering-page :is(#footer-placeholder, #auth-modal, #cart-sidebar, #order-type-modal) { font-family: "Inter", sans-serif; }
/* Match the menu page: a closed drawer must not cast a shadow over the form. */
.catering-page #cart-sidebar { transition-property: transform, visibility; transition-duration: 300ms, 0s; transition-delay: 0s, 0s; }
.catering-page #cart-sidebar.translate-x-full { visibility: hidden; transition-delay: 0s, 300ms; }
.catering-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.catering-skip-link { position: fixed; z-index: 110; top: 12px; left: 12px; transform: translateY(-180%); padding: 12px 20px; border-radius: 12px; background: var(--catering-ink); color: #fff; }
.catering-skip-link:focus { transform: none; }
.catering-main { width: min(100%, 816px); margin: 0 auto; padding: 140px 24px 88px; }
.catering-intro { margin: 0 auto 40px; text-align: center; }
.catering-eyebrow { margin: 0 0 12px; color: var(--catering-accent); font-size: 14px; font-weight: 600; line-height: 1.5; }
.catering-intro h1 { margin: 0; font-size: clamp(38px, 5vw, 56px); line-height: 1.08; font-weight: 600; letter-spacing: -.045em; }
.catering-intro > p:last-child { margin: 20px auto 0; color: var(--catering-muted); font-size: 19px; line-height: 1.5; letter-spacing: -.025em; }
.catering-panel { padding: 40px 48px; border: 1px solid var(--catering-line); border-radius: 28px; background: #fff; box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(12, 10, 9, .02), 0 18px 48px rgba(12, 10, 9, .04); }
.catering-required-note { margin: 0 0 32px; color: var(--catering-muted); font-size: 13px; line-height: 1.5; }
.catering-section { scroll-margin-top: 104px; }
.catering-section + .catering-section { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--catering-line); }
.catering-section-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.catering-step { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border: 1px solid rgba(0, 0, 0, .08); border-radius: 50%; background: rgba(12, 10, 9, .04); color: var(--catering-muted); font-size: 13px; font-weight: 500; }
.catering-section-heading h2 { margin: 0; font-size: 23px; font-weight: 600; line-height: 1.2; letter-spacing: -.035em; }
.catering-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.catering-field { min-width: 0; }
.catering-field--wide { grid-column: 1 / -1; }
.catering-field-control { position: relative; }
.catering-field-control :is(input, select, textarea) { display: block; width: 100%; min-width: 0; height: 56px; margin: 0; padding: 23px 16px 7px; border: 1px solid var(--catering-control-border); border-radius: 12px; background: #fff; box-shadow: none; color: var(--catering-ink); font: inherit; font-size: 17px; line-height: 1.35; letter-spacing: -.02em; transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease; }
.catering-field-control label { position: absolute; top: 17px; left: 17px; right: 12px; color: var(--catering-muted); font-size: 17px; line-height: 22px; letter-spacing: -.02em; pointer-events: none; transform-origin: left top; transition: top 160ms ease, font-size 160ms ease; }
.catering-field-control input:focus + label,
.catering-field-control input:not(:placeholder-shown) + label,
.catering-field-control input:-webkit-autofill + label,
.catering-field--fixed .catering-field-control label { top: 7px; font-size: 12px; line-height: 16px; }
.catering-field-control :is(input, select, textarea):focus { border-color: var(--catering-focus); outline: none; box-shadow: 0 0 0 4px rgba(0, 113, 227, .2); }
.catering-field-control :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--catering-error); background: #fff5f3; }
.catering-field-control :is(input, select, textarea)[aria-invalid="true"] + label { color: var(--catering-error); }
.catering-field-control select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; }
.catering-select-chevron { position: absolute; top: 21px; right: 16px; width: 16px; height: 16px; color: var(--catering-muted); pointer-events: none; }
.catering-field-control input[type="date"] { -webkit-appearance: none; appearance: none; text-align: left; }
.catering-field-control input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.catering-field-control textarea { min-height: 132px; height: auto; padding-top: 16px; resize: vertical; }
#comments::placeholder { font-size: 14px; }
.catering-field-help, .catering-field-error { margin: 8px 0 0; font-size: 13px; line-height: 1.45; }
.catering-field-help { color: var(--catering-muted); }
.catering-field-error { color: var(--catering-error); }
.catering-service { min-width: 0; margin: 24px 0 0; padding: 0; border: 0; }
.catering-service legend { margin-bottom: 12px; padding: 0; font-size: 15px; font-weight: 500; line-height: 1.4; }
.catering-service-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 6px; border: 1px solid rgba(0, 0, 0, .06); border-radius: 24px; background: var(--catering-paper); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .04), inset 0 -1px 0 #fff; }
.catering-service-option { position: relative; min-width: 0; cursor: pointer; }
.catering-service-option input { position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.catering-service-content { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 12px 16px; border: 1px solid transparent; border-radius: 18px; color: #6e6e73; font-size: 15px; font-weight: 500; transition: background-color 160ms ease, box-shadow 160ms ease; }
.catering-service-content > svg { width: 21px; height: 21px; flex: none; stroke-width: 1.6; }
.catering-service-option input:checked + .catering-service-content { border-color: #fff; background: #fff; color: var(--catering-ink); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(12, 10, 9, .04), 0 2px 6px rgba(12, 10, 9, .09); }
.catering-service-option input:focus-visible + .catering-service-content { outline: 3px solid var(--catering-focus); outline-offset: 2px; }
.catering-service-option:hover .catering-service-content { background: rgba(255,255,255,.5); }
.catering-service-check { display: grid; place-items: center; flex: none; width: 18px; height: 18px; margin-left: auto; border: 1px solid var(--catering-control-border); border-radius: 50%; }
.catering-service-option input:checked + .catering-service-content .catering-service-check { border-color: var(--catering-accent); background: var(--catering-accent); }
.catering-service-option input:checked + .catering-service-content .catering-service-check::after { content: ""; width: 8px; height: 5px; margin-top: -2px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: rotate(-45deg); }
.catering-address-heading { margin: 24px 0 14px; }
.catering-address-heading h3 { margin: 0; font-size: 15px; font-weight: 500; }
.catering-address-heading p { margin: 4px 0 0; color: var(--catering-muted); font-size: 13px; line-height: 1.5; }
.catering-optional { margin-left: auto; color: var(--catering-muted); font-size: 12px; font-weight: 400; }
.catering-order-help { margin: -6px 0 24px; color: var(--catering-muted); font-size: 14px; line-height: 1.5; }
.catering-order, .catering-product-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.catering-product-group + .catering-product-group { margin-top: 24px; }
.catering-product-group > legend { margin-bottom: 12px; padding: 0; font-size: 15px; font-weight: 500; }
.catering-product-group-description { margin: -6px 0 12px; color: var(--catering-muted); font-size: 13px; line-height: 1.5; }
.catering-product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.catering-product { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 68px; column-gap: 10px; align-items: center; min-width: 0; padding: 10px 40px 10px 10px; border: 1px solid var(--catering-border); border-radius: 16px; background: #fff; box-shadow: inset 0 1px 0 #fff; transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
.catering-product[data-quantity-required="false"] { grid-template-columns: minmax(0, 1fr); }
.catering-product:hover { border-color: var(--catering-control-border); }
.catering-product[data-selected="true"] { border-color: var(--catering-accent); background: #fff; box-shadow: inset 0 0 0 1px var(--catering-accent), inset 0 1px 0 #fff; }
.catering-product-select { position: absolute; top: 50%; right: 10px; width: 1px; height: 1px; margin: 0; opacity: 0; }
.catering-product-label { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 48px; cursor: pointer; }
.catering-product-select:focus-visible + .catering-product-label { outline: 3px solid var(--catering-focus); outline-offset: 4px; border-radius: 10px; }
.catering-product-label img { display: block; width: 40px; height: 40px; border-radius: 10px; background: var(--catering-paper); object-fit: cover; }
.catering-product[data-product-id="chicken-curry-meal"] img,
.catering-product[data-product-id="chickpea-masala"] img { object-fit: contain; }
.catering-product-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.catering-product-name { font-size: 14px; font-weight: 600; line-height: 1.3; letter-spacing: -.02em; }
.catering-product-unit { color: var(--catering-muted); font-size: 12px; line-height: 1.4; }
.catering-product-ingredients { margin-top: 3px; color: var(--catering-muted); font-size: 12px; line-height: 1.45; }
.catering-product-check { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid var(--catering-control-border); border-radius: 50%; background: #fff; }
.catering-product-select:checked + .catering-product-label .catering-product-check { border-color: var(--catering-accent); background: var(--catering-accent); }
.catering-product-select:checked + .catering-product-label .catering-product-check::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
.catering-product-quantity { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.catering-product-quantity label { color: #6e6e73; font-size: 12px; text-align: center; cursor: pointer; }
.catering-product-quantity input { display: block; width: 100%; min-height: 44px; padding: 8px 4px; border: 1px solid var(--catering-control-border); border-radius: 10px; background: #fff; color: var(--catering-ink); font: inherit; font-size: 16px; line-height: 1.35; text-align: center; }
.catering-product > .catering-field-error { grid-column: 1 / -1; }
.catering-product-quantity input:focus { border-color: var(--catering-focus); outline: none; box-shadow: 0 0 0 4px rgba(0,113,227,.2); }
.catering-product-quantity input:disabled { border-color: var(--catering-border); background: var(--catering-paper); color: #86868b; opacity: 1; cursor: not-allowed; }
.catering-product-quantity input[aria-invalid="true"] { border-color: var(--catering-error); background: #fff5f3; }
.catering-order:disabled .catering-product-label { opacity: .65; cursor: wait; }
.catering-order-count { margin: 16px 0 0; color: var(--catering-muted); font-size: 13px; line-height: 1.5; }
.catering-submit-area { margin-top: 32px; }
.catering-submit { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 15px 24px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: var(--catering-ink) linear-gradient(180deg, rgba(255,255,255,.14), transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 6px 18px rgba(12,10,9,.1); color: #fff; font: inherit; font-size: 17px; font-weight: 500; line-height: 1.4; text-decoration: none; cursor: pointer; transition: transform 160ms ease, background-color 160ms ease; }
.catering-submit:hover { background-color: #292624; }
.catering-submit:active { transform: scale(.985); }
.catering-submit:disabled { cursor: wait; opacity: .7; }
.catering-submit svg { width: 18px; height: 18px; }
.catering-submit-error { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--catering-error); border-radius: 12px; background: #fff5f3; color: var(--catering-error); font-size: 14px; line-height: 1.5; }
.catering-spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: catering-spin 800ms linear infinite; }
@keyframes catering-spin { to { transform: rotate(360deg); } }
.catering-success { position: fixed; width: min(460px, calc(100% - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 48px 32px 32px; overflow: auto; border: 1px solid #fff; border-radius: 28px; background: #fffefa; box-shadow: inset 0 1px 0 #fff, 0 24px 80px rgba(12,10,9,.2); color: var(--catering-ink); text-align: center; }
.catering-success::backdrop { background: rgba(12,10,9,.3); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.catering-success-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,.7); border-radius: 50%; background: rgba(12,10,9,.05); color: var(--catering-ink); cursor: pointer; }
.catering-success-close svg { width: 20px; height: 20px; }
.catering-success-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 20px; border: 1px solid #fff; border-radius: 22px; background: rgba(255,255,255,.7); box-shadow: inset 0 1px 0 #fff, 0 4px 16px rgba(12,10,9,.06); color: var(--catering-accent); }
.catering-success-icon svg { width: 28px; height: 28px; }
.catering-success h2 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 600; letter-spacing: -.04em; overflow-wrap: anywhere; }
.catering-success #success-description { margin: 18px 0 24px; color: var(--catering-muted); font-size: 16px; line-height: 1.5; }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .catering-service-option input:checked + .catering-service-content { background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.72)); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); }
    /* Keep text legible when an engine cannot blur behind a top-layer dialog. */
    .catering-success { background: linear-gradient(180deg, rgba(255,255,255,.99), rgba(255,255,255,.97)); -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); }
}
@media (max-width: 600px) {
    .catering-main { padding: 112px 16px 56px; }
    .catering-intro { margin-bottom: 28px; }
    .catering-intro > p:last-child { margin-top: 16px; font-size: 17px; }
    .catering-panel { padding: 28px 20px; border-radius: 24px; }
    .catering-required-note { margin-bottom: 28px; }
    .catering-section-heading { gap: 10px; }
    .catering-section-heading h2 { font-size: 21px; }
    .catering-field-grid { grid-template-columns: minmax(0, 1fr); }
    .catering-product-grid { grid-template-columns: minmax(0, 1fr); }
    .catering-service-content { gap: 8px; padding: 12px 10px; }
    .catering-service-check { width: 16px; height: 16px; }
}
@media (max-width: 359px) {
    .catering-main { padding-inline: 12px; }
    .catering-panel { padding-inline: 16px; }
    .catering-product { grid-template-columns: minmax(0, 1fr) 64px; column-gap: 8px; padding: 8px 32px 8px 8px; }
    .catering-product-label { grid-template-columns: 28px minmax(0, 1fr); gap: 6px; }
    .catering-product-label img { width: 28px; height: 28px; border-radius: 7px; }
    .catering-product-check { right: 8px; width: 16px; height: 16px; }
    .catering-product-quantity input { padding-inline: 2px; }
    .catering-service-content { gap: 6px; padding-inline: 8px; font-size: 14px; }
    .catering-service-content > svg { width: 18px; height: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .catering-main *, .catering-success * { animation: none !important; transition: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
    .catering-service-option input:checked + .catering-service-content, .catering-success { background: #fffefa; -webkit-backdrop-filter: none; backdrop-filter: none; }
    .catering-service-option input:checked + .catering-service-content { background: #fff; }
}
@media (forced-colors: active) {
    .catering-product[data-selected="true"] { outline: 2px solid Highlight; }
    .catering-product-select:checked + .catering-product-label .catering-product-check::after { border-color: CanvasText; }
    .catering-service-option input:checked + .catering-service-content { outline: 2px solid Highlight; }
    .catering-service-option input:checked + .catering-service-content .catering-service-check::after { border-color: CanvasText; }
}