/* Keep essential form fields before the illustration; consent never overlays them. */
.hero-subtitle-compact, .quantity-label-compact, .mobile-plan-details { display: none; }
.monitor-dates { display: flex; flex-direction: column; }
.monitor-dates > label { order: 0; }
.monitor-dates > .quick-dates { order: 1; }
.monitor-dates > #date_picker { order: 2; }
.quick-dates .tag-btn { font-family: inherit; }
.cookie-consent { position: static; margin-top: 1rem; padding: .9rem; border: 1px solid #655033; border-radius: 8px; background: #191819; color: #ddd; text-align: left; }
.cookie-consent p { margin: 0; font-size: .78rem; line-height: 1.5; }
.cookie-consent a, .mobile-plan-details a { color: #e9bb76; text-underline-offset: 3px; }
.cookie-actions { display: flex; gap: .6rem; margin-top: .5rem; }
.cookie-actions button { min-height: 44px; padding: .5rem 1rem; background: #292323; color: #eee; border: 1px solid #ae8752; border-radius: 5px; font: 700 .8rem 'Lato', sans-serif; cursor: pointer; }
.cookie-actions button:first-child { background: #d69f4c; color: #17120d; }
.cookie-actions button:focus-visible, .quick-dates .tag-btn:focus-visible, .mobile-plan-details summary:focus-visible { outline: 2px solid #f0c381; outline-offset: 3px; }
/* Extend only the form fields to wider phone/tablet viewports. */
@media (min-width: 481px) and (max-width: 900px) {
    #alert-form .monitor-fields { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: .3rem .65rem; margin-bottom: .6rem; }
    #alert-form .monitor-dates, #alert-form .monitor-quantity { display: contents; }
    #alert-form .monitor-dates > label { grid-column: 1; grid-row: 1; }
    #alert-form .monitor-dates > #date_picker { grid-column: 1; grid-row: 2; }
    #alert-form .monitor-quantity > label { grid-column: 2; grid-row: 1; }
    #alert-form .monitor-quantity > input { grid-column: 2; grid-row: 2; }
    #alert-form .monitor-fields label { margin: 0; font-size: .85rem; }
    #alert-form .monitor-fields input { min-width: 0; min-height: 44px; padding: .5rem .65rem; font-size: 16px; }
    #alert-form .quantity-label-full { display: none; }
    #alert-form .quantity-label-compact { display: inline; }
    #alert-form .quick-dates { grid-column: 1 / -1; grid-row: 3; gap: .4rem !important; margin: .4rem 0 0 !important; }
    #alert-form .quick-dates .tag-btn { min-height: 44px; padding: .4rem .65rem; font-size: .78rem; white-space: nowrap; }
}
@media (max-width: 900px) {
    #alert-form[data-has-dates="false"] #clear-dates { display: none; }
}
@media (max-width: 480px) {
    .hero-subtitle-full, .quantity-label-full, .plan-detail-copy { display: none; }
    .hero-subtitle-compact, .quantity-label-compact { display: inline; }
    .hero-content h1 { font-size: 1.3rem; line-height: 1.15; letter-spacing: 0; text-transform: none; margin-top: 1rem; }
    .mobile-hero-subtitle { font-size: .8rem; line-height: 1.25; }
    .form-container { width: 100%; padding: .6rem; }
    .form-group { margin-bottom: .4rem; }
    .form-group label { font-family: 'Lato', sans-serif; font-size: .75rem; letter-spacing: 0; margin-bottom: .25rem; }
    /* 16px prevents automatic input zoom on iOS; keep 44px touch targets. */
    .form-group input { font-size: 16px; min-height: 44px; padding: .45rem .5rem; }
    .monitor-fields { display: grid; grid-template-columns: minmax(0, 1fr) 76px; column-gap: .5rem; }
    .monitor-dates { display: contents; }
    .monitor-dates > label { grid-column: 1; grid-row: 1; }
    .monitor-dates > #date_picker { grid-column: 1; grid-row: 2; min-width: 0; }
    .monitor-quantity { display: contents; }
    .monitor-quantity > label { grid-column: 2; grid-row: 1; }
    .monitor-quantity > input { grid-column: 2; grid-row: 2; min-width: 0; }
    .monitor-fields .quick-dates { grid-column: 1 / -1; grid-row: 3; flex-wrap: nowrap; gap: .35rem !important; overflow-x: auto; margin: .35rem 0 .4rem !important; padding: 0 0 .2rem; scrollbar-width: thin; }
    .monitor-fields .quick-dates .tag-btn { flex: 0 0 auto; white-space: nowrap; min-height: 44px; padding: .3rem .55rem !important; font-size: .7rem !important; }
    .plan-selector { margin-bottom: .4rem; }
    .plan-btn { min-height: 70px; padding: .3rem .2rem; font-family: 'Lato', sans-serif; font-size: .8rem; }
    .plan-btn small { font-size: .69rem; margin-top: 2px; }
    .plan-btn .price, .plan-btn.active .price { font-size: .8rem; margin-top: 3px; }
    .order-summary { padding: .4rem .55rem; margin-bottom: .4rem; }
    .order-summary-title { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); }
    .order-summary-row { font-size: .72rem; padding: .05rem 0; line-height: 1.4; gap: .4rem; }
    .order-summary-total { margin-top: .15rem; padding-top: .2rem; }
    .btn-magic { min-height: 44px; font-size: .73rem; padding: .6rem .3rem; letter-spacing: 0; }
    .mobile-plan-details { display: block; margin-top: .4rem; color: #c6c0b8; text-align: left; font-size: .75rem; line-height: 1.5; }
    .mobile-plan-details summary { min-height: 44px; padding: .65rem 0; cursor: pointer; color: #e9bb76; }
    .mobile-plan-details p { padding-bottom: .4rem; }
    #cookieConsent.cookie-consent { margin-top: .5rem; padding: .65rem !important; }
    #cookieConsent.cookie-consent p { font-size: .72rem !important; line-height: 1.4; }
    #cookieConsent.cookie-consent button { min-height: 44px; }
    /* The existing activity toast must not cover form controls on short screens. */
    .live-activity { display: none !important; }
}
@media (max-width: 350px) {
    .hero-content h1 { font-size: 1.15rem; }
}