/* Page hero like other pages */ .booking-page .page-hero { display: grid; gap: 8px; justify-items: start; margin-block: clamp(24px, 6vw, 80px); } .booking-page .page-hero .hero__logo { height: 48px; width: auto; margin: 0 0 12px 0; } @media (max-width: 600px) { .booking-page .page-hero .hero__logo { height: 40px; } } /* Booking card styling */ .booking__card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(16px, 3vw, 32px); } /* Form layout */ .form .form__row { display: grid; gap: 6px; margin-bottom: 14px; } .form label { color: var(--text); font-weight: 600; } .form input, .form select, .form textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: #fffdf8; /* slightly warm field bg */ color: var(--text); } .form small.muted { display: block; margin-top: 4px; } .booking__schedule { line-height: 1.6; } /* Success/error text colors (inherit your theme) */ .form__status { margin-top: 1px; } .form__status.success { color: #1a7f58; } .form__status.error { color: #9b2c2c; } /* Booking section uses a 2-column grid; */ .booking.container { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 40px); align-items: start; margin-top: 1%; } .booking__card { grid-column: 2 / 2; /* left column only */ } /* Stack on mobile */ @media (max-width: 900px) { .booking.container { grid-template-columns: 1fr; } .booking__card { grid-column: 1; } } /* Scope to the booking page if you have */ .booking-page #startDate, .booking-page #partySize { width: auto; /* override any global width:100% */ max-width: 300px; /* date dropdown cap */ font-size: 16px; /* safe for iOS zoom */ padding: 10px 12px; } .booking-page #partySize { max-width: 60px; /* smaller selector for people */ } /* Keep labels and controls neat */ .booking-page .form .form__row label { margin-bottom: 4px; display: inline-block; } /* Two-column row: LEFT = hero, RIGHT = booking card */ .booking-row { display: grid; grid-template-columns: 1fr min(640px, 100%); gap: clamp(16px, 3vw, 40px); align-items: start; margin-top: clamp(12px, 5vw, 48px); /* space under header */ } /* Keep the card on the right column */ .booking__card { grid-column: 2 / 3; } /* Compact hero like on other pages */ .booking-row .page-hero { margin: 0; display: grid; gap: 8px; justify-items: start; } .booking-row .page-hero .hero__logo { height: 48px; width: auto; margin: 0 0 12px 0; } @media (max-width: 600px) { .booking-row .page-hero .hero__logo { height: 40px; } } /* Mobile: stack full width */ @media (max-width: 900px) { .booking-row { grid-template-columns: 1fr; } .booking__card { grid-column: 1; } }