/* Shared checkout/payments modal shell. Borrows the item-detail information modal's dialog/header/close-button feel while keeping form controls scoped to the shared address/payment modals. */ .shared-form-modal { box-sizing: border-box; padding: 24px 16px; align-items: center; justify-content: center; overflow-y: auto; } .shared-form-modal.is-open { display: flex; z-index: 20001; } /* Google Places appends suggestions to , outside the modal stacking context. */ .pac-container { z-index: 30050 !important; } .shared-form-modal *, .shared-form-modal *::before, .shared-form-modal *::after { box-sizing: border-box; } .shared-form-modal__dialog { width: min(680px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow: hidden; display: flex; flex-direction: column; background: #fff; border-radius: 8px; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.22); color: #262626; } .shared-form-modal__dialog--payment { width: min(520px, calc(100vw - 32px)); } .shared-form-modal__header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px 18px; border-bottom: 1px solid #eeeeee; flex-shrink: 0; } .shared-form-modal__title { margin: 0; color: #222; font-size: 24px; font-weight: 700; line-height: 1.15; } .shared-form-modal__close { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0; border: none; border-radius: 50%; background: transparent; color: #444; cursor: pointer; font-size: 21px; line-height: 1; } .shared-form-modal__close:hover, .shared-form-modal__close:focus-visible { background: #f2f2f2; color: #111; outline: none; } .shared-form-modal__body { padding: 22px 24px; overflow-y: auto; min-height: 0; } .payment-modal .shared-form-modal__body { padding-top: 14px; } .shared-form-modal__footer { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin: 0; padding: 16px 24px 22px; border-top: 1px solid #eeeeee; flex-shrink: 0; } .shared-form-modal__footer--embedded { padding: 18px 0 0; border-top: none; } .shared-form-modal .primary-action, .shared-form-modal .secondary-action { width: auto; min-width: 104px; min-height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 700; line-height: 1.2; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease; } .shared-form-modal .primary-action { border: 1px solid #003660; background: #003660; color: #ffffff; padding: 9px 18px; box-shadow: 0 3px 8px rgba(0, 54, 96, 0.2); } .shared-form-modal .primary-action:hover:not(:disabled), .shared-form-modal .primary-action:focus-visible:not(:disabled) { background: #012848; border-color: #012848; color: #ffffff; outline: none; } .shared-form-modal .primary-action:disabled, .shared-form-modal .secondary-action:disabled { cursor: not-allowed; opacity: 0.68; transform: none; } .shared-form-modal .primary-action:disabled { background: #6f879a; border-color: #6f879a; box-shadow: none; } .shared-form-modal .secondary-action { border: 1px solid #cccccc; background: #f7f7f7; color: #333333; padding: 8px 16px; box-shadow: none; } .shared-form-modal .secondary-action:hover, .shared-form-modal .secondary-action:focus-visible { background: #eeeeee; border-color: #bbbbbb; color: #111111; outline: none; } .shared-form-modal__picker { margin-bottom: 18px; } .shared-form-modal__picker label { display: block; margin: 0 0 7px; color: #4a4a4a; font-size: 13px; font-weight: 700; line-height: 1.2; } .shared-form-modal__picker select { width: 100%; min-height: 44px; padding: 9px 12px; border: 1.5px solid #d4d4d4; border-radius: 8px; background: #fff; color: #1f2933; font: inherit; } .shared-form-modal__picker select:focus { outline: none; border-color: #003660; box-shadow: 0 0 0 3px rgba(0, 54, 96, 0.12); } .shared-form-modal__toggle { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; color: #222; font-size: 14px; font-weight: 600; line-height: 1.3; } .shared-form-modal__toggle input { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; accent-color: #003660; } .shared-form-modal__stripe-element { min-height: 150px; padding: 12px; border: 1.5px solid #d4d4d4; border-radius: 8px; background: #fafafa; } .payment-modal__use-saved-text { margin: 0; color: #333; font-size: 15px; line-height: 1.45; } @media (max-width: 600px) { .shared-form-modal { padding: 16px 12px; align-items: flex-start; } .shared-form-modal__dialog { width: calc(100vw - 24px); max-height: calc(100vh - 32px); } .shared-form-modal__header { padding: 18px 16px 14px; } .shared-form-modal__title { font-size: 20px; } .shared-form-modal__body { padding: 16px; } .shared-form-modal__footer { padding: 14px 16px 16px; flex-direction: column-reverse; align-items: stretch; } .shared-form-modal__footer--embedded { padding: 16px 0 0; } .shared-form-modal .primary-action, .shared-form-modal .secondary-action { width: 100%; min-width: 0; } } /* Confirmation modal — narrower dialog + filled red destructive button. Paired with frontend/partials/confirmation_modal.html. */ .shared-form-modal__dialog--confirm { width: min(440px, calc(100vw - 32px)); } .confirmation-modal__message { margin: 0; color: #333; font-size: 16px; line-height: 1.45; } .shared-form-modal .primary-action.is-danger { border-color: #b3261e; background: #b3261e; color: #ffffff; box-shadow: 0 3px 8px rgba(179, 38, 30, 0.22); } .shared-form-modal .primary-action.is-danger:hover:not(:disabled), .shared-form-modal .primary-action.is-danger:focus-visible:not(:disabled) { background: #8c1d18; border-color: #8c1d18; color: #ffffff; outline: none; } .shared-form-modal .primary-action.is-danger:disabled { background: #c98682; border-color: #c98682; box-shadow: none; } .shared-form-modal .primary-action.is-primary { /* Explicit opt-in alias of the default .primary-action look, paired with .is-danger so callers can declare intent symmetrically. */ border-color: #003660; background: #003660; color: #ffffff; box-shadow: 0 3px 8px rgba(0, 54, 96, 0.2); } .shared-form-modal .primary-action.is-primary:hover:not(:disabled), .shared-form-modal .primary-action.is-primary:focus-visible:not(:disabled) { background: #012848; border-color: #012848; color: #ffffff; outline: none; }