@ticketboothapp/booking 1.2.24 → 1.2.25-rc.0

package/src/components/booking/BookingDialog.module.css

@@ -0,0 +1,643 @@
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  padding: 1rem;
+}
+
+@media (max-width: 639px) {
+  .overlay {
+    padding: 1rem 1.25rem;
+  }
+}
+
+.dialog {
+  background: var(--accent-white);
+  border-radius: 1rem;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  width: 100%;
+  max-width: 680px;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.header {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem 0.75rem;
+  border-bottom: 1px solid #e5e7eb;
+  flex-shrink: 0;
+}
+
+.headerLeft {
+  display: flex;
+  justify-content: flex-start;
+  flex-shrink: 0;
+}
+
+.headerSpacer {
+  display: block;
+  width: 2.5rem;
+  height: 2.5rem;
+  flex-shrink: 0;
+}
+
+.backButton {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.5rem;
+  font-size: 0.875rem;
+  font-family: 'Figtree', sans-serif;
+  color: var(--accent-turquoise);
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.backButton:hover {
+  text-decoration: underline;
+}
+
+.title {
+  font-size: 1.125rem;
+  font-weight: 700;
+  margin: 0;
+  justify-self: center;
+  text-align: center;
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+
+.headerRight {
+  display: flex;
+  justify-content: flex-end;
+  flex-shrink: 0;
+}
+
+.closeButton {
+  padding: 0.5rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #6b7280;
+}
+
+.closeButton:hover {
+  color: #111;
+}
+
+.content {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  min-height: 0;
+  overscroll-behavior: contain;
+}
+
+.screen {
+  padding: 1.25rem;
+}
+
+@media (min-width: 768px) {
+  .dialog {
+    max-width: 960px;
+    max-height: 92vh;
+  }
+
+  .title {
+    font-size: 1.375rem;
+  }
+
+  .titleProductGrid {
+    font-size: 1.5rem;
+  }
+}
+
+.titleProductGrid {
+  composes: title;
+}
+
+/* ----- Dependent add-on dialog (photo sessions): layout + typography; control sizing in booking-flow.css (.dap-add-on-dialog) ----- */
+
+.dapTopMedia {
+  margin-bottom: 1.25rem;
+}
+
+.dapSlotRow {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+.dapSessionPickerLabel {
+  margin-bottom: 0.375rem !important;
+}
+
+.dapSlotDateLine {
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--booking-stone-600, #57534e);
+  margin-bottom: 0.125rem;
+}
+
+.dapSlotTimeRangeLine {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--booking-stone-900, #1c1917);
+  font-variant-numeric: tabular-nums;
+}
+
+/* Selected session row: green button uses ReturnTimeSelector child colors; force white for contrast. */
+.dapSlotBtnSelected,
+.dapSlotBtnSelected * {
+  color: #fff !important;
+}
+
+/* Full-width “how this fits your trip” below the session list (not inside a slot row). */
+.dapItineraryInsert {
+  margin-top: 0.75rem;
+}
+
+.dapRefItinerarySummaryTitle {
+  margin-bottom: 0.375rem !important;
+}
+
+.dapItineraryInsertTitle {
+  margin-bottom: 0.375rem !important;
+}
+
+.dapSessionDateUnderTitle {
+  font-family: 'Figtree', sans-serif;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--booking-stone-700, #44403c);
+  padding: 0.5rem;
+}
+
+.dapItineraryInsertRow {
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--booking-stone-200, #e7e5e4);
+}
+
+.dapItineraryInsertRow:last-of-type {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.dapItineraryInsertLead {
+  font-family: 'Poppins', sans-serif;
+  font-weight: 700;
+  font-size: 0.9375rem;
+  text-transform: lowercase;
+  color: var(--accent-orange, #ff4d00);
+  margin-bottom: 0.375rem;
+}
+
+.dapItineraryInsertText {
+  font-family: 'Figtree', sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.45;
+  color: var(--booking-stone-700, #44403c);
+  margin: 0;
+}
+
+.dapItineraryInsertFoot {
+  font-family: 'Figtree', sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.4;
+  color: var(--booking-stone-500, #78716c);
+  margin: 0.75rem 0 0;
+}
+
+.dapCheckoutSectionPlain {
+  border-top: none !important;
+  margin-top: 0 !important;
+  padding-top: 0 !important;
+}
+
+.dapSubmitBtnWrapper {
+  margin-top: 0.25rem !important;
+}
+
+.dapCancellationFinePrint {
+  font-family: 'Figtree', sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.5;
+  color: var(--booking-stone-500, #78716c);
+  padding: var(--spacing-small);
+}
+
+.dapCancellationFinePrint strong {
+  font-weight: 600;
+  color: var(--booking-stone-600, #57534e);
+}
+
+.dapPreviewItinList {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  border: 1px solid var(--booking-stone-200, #e7e5e4);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  background: #fff;
+}
+
+.dapPreviewItinRow {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid var(--booking-stone-100, #f5f5f4);
+  font-family: 'Figtree', sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.35;
+}
+
+.dapPreviewItinRow:last-child {
+  border-bottom: none;
+}
+
+.dapPreviewItinLabel {
+  flex: 1;
+  min-width: 0;
+  color: var(--booking-stone-800, #292524);
+}
+
+.dapPreviewItinTime {
+  flex-shrink: 0;
+  font-weight: 600;
+  color: var(--booking-stone-900, #1c1917);
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.dapPreviewItinMain {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.dapPreviewItinLead {
+  font-weight: 700;
+  color: var(--booking-emerald-700, #047857);
+  font-size: 0.875rem;
+}
+
+.dapPreviewItinSub {
+  font-size: 0.8125rem;
+  color: var(--booking-stone-600, #57534e);
+}
+
+.dapPreviewPhotoRow {
+  background: var(--booking-emerald-50, #ecfdf5);
+  border-bottom-color: var(--booking-emerald-100, #d1fae5);
+}
+
+.dapPreviewPhotoRow .dapPreviewItinTime {
+  color: var(--booking-emerald-800, #065f46);
+}
+
+.dapForm {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+/* Must come after `.dapForm` and use both classes — otherwise `gap: 1.25rem` wins over a lone `.dapFormSlotsTight`. */
+.dapForm.dapFormSlotsTight {
+  gap: 0.25rem;
+}
+
+/* Times + continue block sits under the ref / session-length form (single scroll, no step change). */
+.dapSlotsPanelBelow {
+  margin-top: 1rem;
+  padding-top: 0.25rem;
+}
+
+/* DAP checkout questionnaire — tighter than CheckoutForm contactSection (gap 1rem) */
+.dapCheckoutQuestions {
+  margin-top: 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.dapCheckoutQuestionField {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.dapCheckoutQuestionLabel {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #44403c;
+  margin: 0 0 0.125rem;
+  line-height: 1.35;
+}
+
+.dapCheckoutQuestionHelp {
+  font-family: 'Figtree', sans-serif;
+  font-size: 0.8125rem;
+  line-height: 1.45;
+  color: #57534e;
+  margin: 0.25rem 0 0;
+}
+
+.dapCheckoutCheckboxQuestion {
+  padding: var(--spacing-small);
+}
+
+.dapField {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.dapLabel {
+  font-family: 'Figtree', sans-serif;
+  font-weight: 600;
+  font-size: 1rem;
+  line-height: 1.4;
+  color: #292524;
+}
+
+.dapIntro {
+  font-family: 'Figtree', sans-serif;
+  font-size: 1rem;
+  line-height: 1.55;
+  color: #57534e;
+  margin: 0;
+}
+
+.dapMetaLine {
+  font-family: 'Figtree', sans-serif;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: #57534e;
+  margin: 0;
+}
+
+.dapMetaLine strong,
+.dapMetaLine .dapRefMono {
+  color: #1c1917;
+}
+
+.dapRefMono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
+    monospace;
+  font-weight: 600;
+  font-size: 0.95em;
+}
+
+.dapFieldset {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  min-width: 0;
+}
+
+.dapLegend {
+  font-family: 'Figtree', sans-serif;
+  font-weight: 600;
+  font-size: 1rem;
+  line-height: 1.4;
+  color: #292524;
+  padding: 0;
+}
+
+.dapRadioList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.625rem;
+}
+
+.dapRadioOption {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  cursor: pointer;
+  font-family: 'Figtree', sans-serif;
+  font-size: 1rem;
+  line-height: 1.4;
+  color: #292524;
+  padding: 0.875rem 1.125rem;
+  border: 1px solid #e7e5e4;
+  border-radius: 0.5rem;
+  background: #fff;
+  margin: 0;
+}
+
+.dapRadioOption:hover {
+  border-color: #d6d3d1;
+  background: #fafaf9;
+}
+
+.dapSessionOptionGrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 0.5rem;
+}
+
+@media (min-width: 480px) {
+  .dapSessionOptionGrid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* Base tile look; .booking-flow-preflight overrides padding/background to beat button reset */
+.dapSessionOptionBtn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem 1.25rem;
+  border: none;
+  border-radius: 0.5rem;
+  background: var(--light-orange-background-dark, #f7e4dc);
+  color: var(--booking-stone-700, #44403c);
+  cursor: pointer;
+  text-align: center;
+  font-family: 'Figtree', sans-serif;
+  transition: background 0.2s ease;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.dapSessionOptionBtn:hover:not(:disabled):not(.dapSessionOptionBtnSelected) {
+  background: var(--light-orange-background, #fff1eb);
+}
+
+.dapSessionOptionBtn:disabled {
+  cursor: wait;
+  opacity: 0.55;
+}
+
+.dapSessionOptionBtnSelected {
+  background: var(--booking-emerald-600, #059669);
+  color: #fff;
+}
+
+.dapSessionOptionTitle {
+  font-weight: 600;
+  font-size: 0.875rem;
+  line-height: 1.35;
+  color: inherit;
+}
+
+.dapSessionOptionBtnSelected .dapSessionOptionTitle {
+  color: #fff;
+}
+
+.dapSessionOptionMeta {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.35;
+  color: var(--booking-stone-500, #78716c);
+}
+
+.dapSessionOptionBtnSelected .dapSessionOptionMeta {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.dapSessionOptionPrice {
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.35;
+  color: var(--booking-stone-500, #78716c);
+}
+
+.dapSessionOptionBtnSelected .dapSessionOptionPrice {
+  color: rgba(255, 255, 255, 0.92);
+}
+
+.dapTableWrap {
+  overflow-x: auto;
+  border-radius: 0.5rem;
+  border: 1px solid #e7e5e4;
+  background: #fff;
+}
+
+.dapTable {
+  width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+  font-family: 'Figtree', sans-serif;
+  font-size: 1rem;
+}
+
+.dapTable thead {
+  background: #fafaf9;
+  color: #44403c;
+}
+
+.dapTable th {
+  font-weight: 600;
+  padding: 0.75rem 1rem;
+  vertical-align: middle;
+}
+
+.dapTable td {
+  padding: 0.75rem 1rem;
+  vertical-align: middle;
+}
+
+.dapTable tbody tr {
+  border-top: 1px solid #f5f5f4;
+}
+
+.dapRowSelected {
+  background: #ecfdf5 !important;
+}
+
+.dapQtyField {
+  max-width: 12rem;
+}
+
+.dapGrid2 {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+}
+
+@media (min-width: 640px) {
+  .dapGrid2 {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.dapSummary {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  border-radius: 0.5rem;
+  border: 1px solid #e7e5e4;
+  background: #fafaf9;
+  padding: 1rem 1.125rem;
+  font-family: 'Figtree', sans-serif;
+  font-size: 1rem;
+  line-height: 1.45;
+  color: #292524;
+}
+
+.dapSummaryRow {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: baseline;
+}
+
+.dapSummaryAmount {
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+
+.dapSummaryTotal {
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  align-items: baseline;
+  padding-top: 0.5rem;
+  margin-top: 0.25rem;
+  border-top: 1px solid #e7e5e4;
+  font-weight: 700;
+}
+
+.dapSummaryTotal .dapSummaryAmount {
+  font-weight: 700;
+}
+
+.dapError {
+  font-family: 'Figtree', sans-serif;
+  font-size: 1rem;
+  line-height: 1.45;
+  color: #b91c1c;
+  margin: 0;
+}
+
+.dapStripeNotice {
+  font-family: 'Figtree', sans-serif;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  color: #92400e;
+  background: #fffbeb;
+  border: 1px solid #fde68a;
+  border-radius: 0.5rem;
+  padding: 0.875rem 1.125rem;
+  margin: 0;
+}