@ticketboothapp/booking 1.2.24 → 1.2.25

package/src/components/BookingDetails.module.css

@@ -0,0 +1,1591 @@
+.container {
+  position: relative;
+  width: 100%;
+  max-width: 650px;
+  margin: 0 auto;
+  padding: var(--spacing-large);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-large);
+  box-sizing: border-box;
+}
+
+/* Light overlay while parent refetches booking (e.g. after change dialog closes) */
+.bookingRefreshOverlay {
+  position: fixed;
+  inset: 0;
+  z-index: 900;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  background-color: rgba(254, 243, 233, 0.92);
+  padding: 1rem;
+}
+
+.section {
+  background-color: var(--primary-background);
+  border-radius: 24px;
+  padding: var(--spacing-large);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.headerContent {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-medium);
+  margin-bottom: var(--spacing-medium);
+}
+
+.checkmarkIcon {
+  width: 64px;
+  height: 64px;
+  background-color: var(--accent-turquoise-60);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.checkmarkSvg {
+  width: 32px;
+  height: 32px;
+  color: var(--accent-turquoise);
+}
+
+.cancelledIcon {
+  width: 64px;
+  height: 64px;
+  background-color: rgba(0, 0, 0, 0.08);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.cancelledSvg {
+  width: 32px;
+  height: 32px;
+  color: var(--primary-text);
+}
+
+.title {
+  font-family: 'Poppins';
+  font-weight: 800;
+  font-size: 2rem;
+  color: var(--primary-text);
+  margin: 0;
+  text-transform: none;
+}
+
+.reference {
+  color: var(--grey-text);
+  margin: 0.5rem 0 0 0;
+  font-size: 1rem;
+}
+
+.printSummaryWrap {
+  margin-top: 0.35rem;
+}
+
+.printSummaryButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  font-family: 'Figtree', sans-serif;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 0;
+  background: none;
+  color: var(--grey-text);
+  cursor: pointer;
+  line-height: 1.4;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+.printSummaryButton:hover {
+  color: var(--accent-turquoise);
+}
+
+.printSummaryButton:focus-visible {
+  outline: 2px solid var(--accent-turquoise);
+  outline-offset: 2px;
+  border-radius: 2px;
+}
+
+.printSummaryIcon {
+  width: 0.8125rem;
+  height: 0.8125rem;
+  flex-shrink: 0;
+  opacity: 0.65;
+}
+
+.gygSectionIcon {
+  flex-shrink: 0;
+  width: 20px;
+  height: 20px;
+  color: var(--accent-orange);
+}
+
+.gygSectionIcon path {
+  fill: var(--accent-orange);
+}
+
+.gygSectionContent {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.gygRefLine {
+  margin: 0;
+  color: var(--primary-text);
+  font-size: 1rem;
+}
+
+.gygNote {
+  color: var(--primary-text);
+  font-size: 0.75rem;
+  line-height: 1.4;
+  margin: 0;
+}
+
+.gygNoteLink {
+  color: var(--accent-orange);
+  text-decoration: underline;
+}
+
+.gygNoteLink:hover {
+  text-decoration: none;
+}
+
+.gygManageLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--accent-orange);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  text-decoration: none;
+  margin-top: 0.5rem;
+}
+
+.gygManageLink:hover {
+  text-decoration: underline;
+}
+
+.gygManageIcon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
+}
+
+.gygSection {
+  scroll-margin-top: 6rem;
+}
+
+.policyGygLink {
+  color: var(--accent-orange);
+  text-decoration: underline;
+}
+
+.policyGygLink:hover {
+  color: var(--accent-turquoise);
+  text-decoration: underline;
+}
+
+.bookingDetails {
+  margin-top: var(--spacing-medium);
+  padding-top: var(--spacing-medium);
+  border-top: 1px solid var(--accent-orange-10);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+}
+
+.bookingDetailRow {
+  display: flex;
+  gap: 0;
+  align-items: baseline;
+}
+
+.bookingDetailLabel {
+  font-weight: 600;
+  color: var(--primary-text);
+  margin-right: 0.35em;
+}
+
+.bookingDetailValue {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0;
+  color: var(--primary-text);
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+
+.customerMessage {
+  color: var(--primary-text);
+  margin-top: var(--spacing-medium);
+}
+
+.sectionTitle {
+  font-family: 'Poppins';
+  font-weight: 800;
+  font-size: 1.5rem;
+  color: var(--accent-orange);
+  margin: 0 0 var(--spacing-medium) 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-transform: lowercase;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  color: var(--accent-orange);
+  flex-shrink: 0;
+}
+
+.itinerarySectionHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: var(--spacing-medium);
+}
+
+.itinerarySectionHeader .sectionTitle {
+  margin: 0;
+}
+
+.draftPill {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.2rem 0.6rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: white;
+  background-color: var(--accent-orange);
+  border-radius: 9999px;
+  flex-shrink: 0;
+}
+
+.addOnSuccessBanner {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-medium);
+  background-color: rgba(16, 185, 129, 0.12);
+  border-left: 4px solid #059669;
+  border-radius: 8px;
+  padding: var(--spacing-medium);
+  margin-bottom: var(--spacing-medium);
+}
+
+.addOnSuccessBannerIcon {
+  width: 22px;
+  height: 22px;
+  color: #059669;
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+}
+
+.addOnSuccessBannerText {
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+  color: var(--primary-text);
+  font-size: 0.9375rem;
+  line-height: 1.5;
+}
+
+.addOnCard {
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+  padding: var(--spacing-medium);
+  margin-bottom: var(--spacing-small);
+  background: rgba(0, 0, 0, 0.02);
+}
+
+.addOnCard:last-child {
+  margin-bottom: 0;
+}
+
+.addOnCardMeta {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--grey-text);
+  line-height: 1.45;
+}
+
+.addOnRefMono {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  font-size: 0.9em;
+}
+
+.addOnCardTitle {
+  margin: 0 0 0.35rem 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--primary-text);
+}
+
+.draftItineraryBanner {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-medium);
+  background-color: var(--accent-orange-10);
+  border-left: 4px solid var(--accent-orange);
+  border-radius: 8px;
+  padding: var(--spacing-medium);
+  margin-bottom: var(--spacing-medium);
+  min-width: 0;
+}
+
+.draftItineraryBannerBelowList {
+  margin-top: var(--spacing-medium);
+  margin-bottom: 0;
+}
+
+/* Ready-for-review: full-width block, no side icon (see Action Required title) */
+.draftItineraryBannerActionRequired {
+  display: block;
+}
+
+.draftItineraryReviewFullWidth {
+  width: 100%;
+  min-width: 0;
+}
+
+.draftItineraryActionTitle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  text-align: left;
+  font-family: 'Poppins', sans-serif;
+  font-size: 1.5rem;
+  font-weight: 700;
+  line-height: 1.25;
+  color: var(--accent-orange);
+  margin: 0 0 0.5rem 0;
+}
+
+.draftItineraryIcon {
+  width: 20px;
+  height: 20px;
+  color: var(--accent-orange);
+  flex-shrink: 0;
+  margin-top: 0.125rem;
+}
+
+.draftItineraryText {
+  margin: 0;
+  flex: 1;
+  min-width: 0;
+  color: var(--primary-text);
+  font-size: 0.9375rem;
+  line-height: 1.5;
+}
+
+.draftItineraryReviewActions {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 0.5rem;
+  margin-top: 1rem;
+  min-width: 0;
+  width: 100%;
+}
+
+.draftItineraryReviewActions .pickupPrimaryButton {
+  width: 100%;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.draftItineraryRequestChangesButton {
+  width: 100%;
+  box-sizing: border-box;
+  justify-content: center;
+}
+
+.draftItineraryFeedbackFields {
+  margin-top: 1rem;
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+.draftItineraryFeedbackLabel {
+  display: block;
+  margin-bottom: 0.35rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--primary-text);
+}
+
+.draftItineraryTextarea {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 0.5rem 0.75rem;
+  font: inherit;
+  min-height: 5rem;
+  border-radius: 8px;
+  border: 1px solid rgba(0, 0, 0, 0.18);
+  background-color: #fff;
+  color: var(--primary-text);
+  resize: vertical;
+}
+
+.draftItineraryTextarea:focus {
+  outline: 2px solid var(--accent-orange);
+  outline-offset: 1px;
+}
+
+.draftItineraryFeedbackSubmitRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  margin-top: 0.75rem;
+  align-items: stretch;
+  min-width: 0;
+  width: 100%;
+}
+
+.draftItineraryFeedbackSubmitRow .payOwingButton {
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.itineraryList {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+}
+
+.itineraryItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: var(--spacing-medium);
+  padding-left: var(--spacing-medium);
+  border-left: 2px solid var(--accent-orange-10);
+}
+
+.itineraryItemDraft {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 0.25rem;
+}
+
+.itineraryItemDraft .itineraryLabel {
+  flex: none;
+}
+
+.itineraryTimeBlock {
+  display: block;
+  color: var(--grey-text);
+  font-weight: 500;
+}
+
+.itineraryLabel {
+  color: var(--primary-text);
+  font-weight: 500;
+  flex: 1;
+}
+
+.itineraryTime {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-shrink: 0;
+  color: var(--grey-text);
+  font-weight: 500;
+}
+
+.tbdIcon {
+  color: var(--grey-text);
+  cursor: help;
+}
+
+.timeIcon {
+  width: 16px;
+  height: 16px;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.tbdText {
+  color: var(--grey-text);
+  font-weight: 500;
+}
+
+.timeTooltipWrap {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 0.35rem;
+  position: relative;
+  vertical-align: middle;
+}
+
+.timeTooltipIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--grey-text);
+  cursor: pointer;
+  width: 18px;
+  height: 18px;
+}
+
+.timeTooltipIcon svg {
+  width: 100%;
+  height: 100%;
+}
+
+
+.timeTooltipIcon:hover {
+  color: var(--accent-orange);
+}
+
+.timeTooltip {
+  position: absolute;
+  left: 0;
+  top: 100%;
+  margin-top: 6px;
+  padding: 0.5rem 0.75rem;
+  max-width: 260px;
+  font-size: 0.8125rem;
+  font-weight: 400;
+  line-height: 1.4;
+  color: #fff;
+  background: #333;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  white-space: normal;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease, visibility 0.15s ease;
+  pointer-events: none;
+  z-index: 10;
+}
+
+.timeTooltipWrap:hover .timeTooltip {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.timeTooltipLink {
+  color: var(--accent-orange);
+  text-decoration: underline;
+}
+
+.timeTooltipLink:hover {
+  color: #ff7a4d;
+  text-decoration: none;
+}
+
+.pickupNote {
+  margin-top: var(--spacing-medium);
+  font-size: 0.875rem;
+  color: var(--grey-text);
+}
+
+.pickupLink {
+  color: var(--accent-orange);
+  text-decoration: underline;
+}
+
+.pickupLink:hover {
+  color: var(--accent-turquoise);
+}
+
+.paymentSummaryHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: var(--spacing-medium);
+}
+
+.paymentSummaryHeader .sectionTitle {
+  margin: 0;
+}
+
+.paymentStatusPill {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.2rem 0.6rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  border-radius: 9999px;
+  flex-shrink: 0;
+}
+
+.paymentStatusPillPaid {
+  color: white;
+  background-color: var(--accent-turquoise);
+}
+
+.paymentStatusPillDeposit {
+  color: #92400e;
+  background-color: #fef3c7;
+}
+
+.paymentStatusPillOwing {
+  color: #92400e;
+  background-color: #fef3c7;
+}
+
+.paymentStatusPillAwaiting {
+  color: var(--grey-text);
+  background-color: rgba(0, 0, 0, 0.08);
+}
+
+.priceSummary {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+}
+
+.priceLine {
+  display: flex;
+  justify-content: space-between;
+  color: var(--primary-text);
+}
+
+.priceLabel {
+  font-weight: 400;
+}
+
+.priceAmount {
+  font-weight: 500;
+}
+
+.totalLine {
+  margin-top: var(--spacing-small);
+  padding-top: var(--spacing-small);
+  border-top: 1px solid var(--accent-orange-10);
+}
+
+.totalLabel {
+  font-weight: 700;
+  font-size: 1.125rem;
+}
+
+.totalAmount {
+  font-weight: 700;
+  font-size: 1.125rem;
+  color: var(--accent-orange);
+}
+
+.changeDifferenceLine {
+  margin-top: -0.125rem;
+}
+
+.changeDifferenceLabel {
+  font-weight: 400;
+  font-size: 0.85rem;
+  color: var(--grey-text);
+}
+
+.changeDifferenceAmount {
+  font-weight: 500;
+  font-size: 0.85rem;
+  color: var(--grey-text);
+}
+
+.payOwingSection {
+  margin-top: var(--spacing-medium);
+  padding-top: var(--spacing-medium);
+  border-top: 1px solid var(--accent-orange-10);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+}
+
+.payOwingRow {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.payOwingLabel {
+  font-weight: 600;
+  color: var(--primary-text);
+}
+
+.payOwingAmount {
+  font-weight: 700;
+  font-size: 1.125rem;
+  color: var(--accent-orange);
+}
+
+.payOwingButtons {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+  width: 100%;
+}
+
+.payOwingButton {
+  width: 100%;
+  display: block;
+}
+
+.payOwingButtonOutline {
+  background-color: transparent !important;
+  border: 2px solid var(--accent-orange);
+  color: var(--accent-orange);
+}
+
+.payOwingButton:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.payOwingRefreshHint {
+  font-size: 0.875rem;
+  margin: 0.25rem 0 0 0;
+}
+
+.payOwingRefreshLink {
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--accent-orange);
+  font-weight: 500;
+  text-decoration: underline;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.payOwingRefreshLink:hover {
+  color: var(--accent-turquoise);
+}
+
+.payOwingError {
+  font-size: 0.875rem;
+  color: #dc2626;
+  margin: 0.25rem 0 0 0;
+}
+
+.payOwingDisclaimer {
+  font-size: 0.8125rem;
+  color: var(--grey-text);
+  margin: 0.25rem 0 0 0;
+  line-height: 1.4;
+  text-align: center;
+}
+
+.paymentModalOverlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.paymentModal {
+  background-color: var(--primary-background);
+  border-radius: 16px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  max-width: 32rem;
+  width: 100%;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.paymentModalHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 1.5rem;
+  border-bottom: 1px solid var(--accent-orange-10);
+}
+
+.paymentModalTitle {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--primary-text);
+  margin: 0;
+}
+
+.paymentModalClose {
+  padding: 0.25rem;
+  background: none;
+  border: none;
+  color: var(--grey-text);
+  cursor: pointer;
+}
+
+.paymentModalClose:hover {
+  color: var(--primary-text);
+}
+
+.paymentModalCloseIcon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.paymentModalSummary {
+  padding: 0.75rem 1.5rem 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.paymentModalLine {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.875rem;
+  color: var(--primary-text);
+}
+
+.paymentModalLineLabel {
+  font-weight: 400;
+}
+
+.paymentModalLineAmount {
+  font-weight: 500;
+}
+
+.paymentModalTotal {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 0.5rem;
+  padding-top: 0.5rem;
+  border-top: 1px solid var(--accent-orange-10);
+  font-size: 1rem;
+}
+
+.paymentModalTotalLabel {
+  font-weight: 700;
+}
+
+.paymentModalTotalAmount {
+  font-weight: 700;
+  color: var(--accent-orange);
+}
+
+.paymentModalDepositDue {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 0.5rem;
+  font-size: 1rem;
+}
+
+.paymentModalDepositDueLabel {
+  font-weight: 700;
+}
+
+.paymentModalDepositDueAmount {
+  font-weight: 700;
+  color: var(--accent-orange);
+}
+
+.paymentModalBody {
+  padding: 0.75rem 1.5rem 1.5rem;
+  overflow: auto;
+  flex: 1;
+}
+
+/* Cancel booking confirmation dialog */
+.cancelConfirmModal {
+  background-color: var(--primary-background);
+  border-radius: 16px;
+  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+  max-width: 28rem;
+  width: 100%;
+  padding: 1.5rem;
+}
+
+.cancelConfirmTitle {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--primary-text);
+  margin: 0 0 0.75rem;
+}
+
+.cancelConfirmMessage {
+  font-size: 0.9375rem;
+  color: var(--primary-text);
+  margin: 0 0 1rem;
+  line-height: 1.5;
+}
+
+.cancelConfirmActions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  justify-content: flex-end;
+  margin-top: 0.5rem;
+}
+
+.cancelConfirmSecondary {
+  padding: 0.625rem 1.25rem;
+  background: transparent;
+  color: var(--primary-text);
+  border: 1px solid var(--grey-text-20, rgba(0, 0, 0, 0.2));
+  border-radius: 8px;
+  font-size: 0.9375rem;
+  cursor: pointer;
+}
+
+.cancelConfirmSecondary:hover:not(:disabled) {
+  background: var(--grey-text-10, rgba(0, 0, 0, 0.05));
+}
+
+.cancelConfirmPrimary {
+  padding: 0.625rem 1.25rem;
+  background: var(--accent-orange);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 0.9375rem;
+  cursor: pointer;
+}
+
+.cancelConfirmPrimary:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.cancelConfirmSecondary:disabled,
+.cancelConfirmPrimary:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.cancelBtn {
+  border-color: var(--grey-text);
+  color: var(--grey-text);
+}
+
+.cancelBtn:hover {
+  color: var(--grey-text);
+}
+
+/* Full-screen overlay while cancelling booking */
+.cancelOverlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1200;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  background-color: var(--light-orange-background, #fef3e9);
+  padding: 1rem;
+}
+
+.cancelOverlaySpinner {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 50%;
+  border: 3px solid rgba(0, 0, 0, 0.1);
+  border-top-color: var(--accent-orange);
+  animation: bookingDetailsSpin 0.8s linear infinite;
+}
+
+.cancelOverlayText {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 500;
+  color: var(--primary-text);
+}
+
+@keyframes bookingDetailsSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.paymentForm {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.paymentFormError {
+  font-size: 0.875rem;
+  color: #dc2626;
+  margin: 0;
+}
+
+.paymentFormActions {
+  display: flex;
+  gap: 0.75rem;
+  padding-top: 0.5rem;
+}
+
+.paymentFormCancel {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  border: 2px solid var(--accent-orange-10);
+  background: transparent;
+  color: var(--primary-text);
+  font-weight: 600;
+  font-size: 1rem;
+  border-radius: 12px;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.paymentFormCancel:hover {
+  background-color: var(--accent-orange-10);
+}
+
+.paymentFormSubmit {
+  flex: 1;
+  padding: 0.75rem 1rem;
+  background-color: var(--accent-orange);
+  color: white;
+  border: none;
+  font-weight: 600;
+  font-size: 1rem;
+  border-radius: 12px;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.paymentFormSubmit:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.paymentFormSubmit:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.paymentMethods {
+  margin-top: var(--spacing-large);
+  padding-top: var(--spacing-medium);
+  border-top: 1px solid var(--accent-orange-10);
+}
+
+.paymentMethodsTitle {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--primary-text);
+  margin: 0 0 var(--spacing-small) 0;
+}
+
+.paymentMethodLine {
+  display: flex;
+  justify-content: space-between;
+  color: var(--grey-text);
+  font-size: 0.875rem;
+}
+
+.paymentStatus {
+  margin-top: var(--spacing-medium);
+  padding-top: var(--spacing-medium);
+  border-top: 1px solid var(--accent-orange-10);
+}
+
+.paymentStatusLine {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.875rem;
+}
+
+.paymentStatusLabel {
+  color: var(--grey-text);
+}
+
+.paymentStatusValue {
+  font-weight: 600;
+}
+
+.statusPaid {
+  color: var(--accent-turquoise);
+}
+
+.statusDeposit {
+  color: #f59e0b;
+}
+
+.statusAwaiting {
+  color: var(--grey-text);
+}
+
+.balanceDue {
+  margin-top: var(--spacing-small);
+  background-color: #fef3c7;
+  border-radius: 8px;
+  padding: var(--spacing-small);
+}
+
+.balanceDueTitle {
+  font-weight: 600;
+  color: #92400e;
+  margin: 0;
+  font-size: 0.875rem;
+}
+
+.balanceDueDate {
+  font-size: 0.75rem;
+  color: #92400e;
+  margin: 0.25rem 0 0 0;
+}
+
+.policyLabel {
+  color: var(--primary-text);
+  font-weight: 500;
+  font-size: 1rem;
+  margin-bottom: var(--spacing-small);
+}
+
+.policyCancelBy {
+  margin-bottom: var(--spacing-small);
+}
+
+.policyCancelByHeading {
+  font-weight: 700;
+  font-size: 1rem;
+  color: var(--primary-text);
+  margin: 0 0 var(--spacing-small) 0;
+  text-align: left;
+}
+
+.policyTierList {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.policyTierRow {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-medium);
+  align-items: start;
+  padding: var(--spacing-medium) 0;
+  border-bottom: 1px solid var(--accent-orange-10);
+  font-size: 1rem;
+}
+
+.policyTierRow:last-child {
+  border-bottom: none;
+}
+
+.policyTierDeadline {
+  font-weight: 700;
+  color: var(--primary-text);
+}
+
+.policyTierRefund {
+  color: var(--grey-text);
+}
+
+.policyChangeWindow {
+  font-size: 1rem;
+  color: var(--grey-text);
+  margin: 0;
+}
+
+.changeBookingCopy {
+  margin: 0;
+  color: var(--grey-text);
+  font-size: 0.95rem;
+}
+
+.changeBookingActions {
+  margin-top: var(--spacing-medium);
+  display: flex;
+  justify-content: center;
+}
+
+.changeBookingMeta {
+  margin: var(--spacing-small) 0 0 0;
+  color: var(--grey-text);
+  font-size: 0.8rem;
+  text-align: center;
+}
+
+.changeBookingSuccess {
+  margin: 0 0 var(--spacing-medium) 0;
+  border: 1px solid rgba(5, 150, 105, 0.35);
+  background: rgba(16, 185, 129, 0.12);
+  color: #065f46;
+  border-radius: 12px;
+  padding: 0.75rem 1rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.changeBookingBlocked {
+  margin: var(--spacing-small) 0 0 0;
+  color: #b91c1c;
+  font-size: 0.8rem;
+  text-align: center;
+}
+
+.cancelBookingSection {
+  margin-top: var(--spacing-large);
+  padding-top: var(--spacing-medium);
+  border-top: 1px solid var(--grey-text-20, rgba(0, 0, 0, 0.08));
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-small);
+}
+
+.cancelBookingText {
+  font-size: 0.8rem;
+  color: var(--grey-text);
+}
+
+.cancelBookingError {
+  font-size: 0.875rem;
+  color: #b91c1c;
+  margin: 0 0 var(--spacing-small) 0;
+}
+
+.contactInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  color: var(--primary-text);
+  font-size: 1rem;
+}
+
+.contactLine {
+  margin: 0;
+  font-size: 1rem;
+}
+
+.contactLabel {
+  font-weight: 500;
+  font-size: 1rem;
+}
+
+.finePrintSection {
+  margin-top: var(--spacing-medium);
+  padding-top: var(--spacing-medium);
+  border-top: 1px solid var(--accent-orange-10);
+}
+
+.finePrint {
+  font-size: 1rem;
+  color: var(--grey-text);
+  margin: 0;
+}
+
+.communicationLabel {
+  font-weight: 500;
+  font-size: 1rem;
+}
+
+.whatsappLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.whatsappIconSmall {
+  width: 18px;
+  height: 18px;
+  color: #25d366;
+  flex-shrink: 0;
+}
+
+.contactUpdateWrap {
+  margin-top: var(--spacing-medium);
+}
+
+.contactUpdateLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--accent-orange);
+  font-weight: 500;
+  font-size: 0.875rem;
+  font-family: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.contactForm {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-medium);
+}
+
+.contactFieldGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  min-width: 0;
+}
+
+.contactFieldLabel {
+  font-weight: 600;
+  font-size: 0.9375rem;
+  color: var(--primary-text);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.contactCheckboxGroup {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: 1rem 1.5rem;
+}
+
+.contactCheckboxLabel {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-size: 1rem;
+  color: var(--primary-text);
+}
+
+.contactCheckbox {
+  width: 1.125rem;
+  height: 1.125rem;
+  accent-color: var(--accent-orange);
+}
+
+.contactCheckboxText {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.contactHint {
+  font-size: 0.8125rem;
+  color: var(--grey-text);
+  margin: 0;
+}
+
+.contactInput {
+  width: 100%;
+  max-width: 100%;
+  padding: 0.625rem 0.875rem;
+  font-size: 1rem;
+  font-family: inherit;
+  border: 2px solid var(--accent-orange-10, rgba(0, 0, 0, 0.08));
+  border-radius: 12px;
+  color: var(--primary-text);
+  box-sizing: border-box;
+}
+
+.contactInput:focus {
+  outline: none;
+  border-color: var(--accent-orange);
+}
+
+.contactInput::placeholder {
+  color: var(--grey-text);
+}
+
+.contactError {
+  color: #dc2626;
+  font-size: 0.9375rem;
+  margin: 0;
+}
+
+.contactSaveBtn {
+  align-self: center;
+  padding: 0.625rem 1.25rem;
+  background: var(--accent-orange);
+  color: white;
+  border: none;
+  border-radius: 12px;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 600;
+  font-size: 1rem;
+  text-transform: lowercase;
+  cursor: pointer;
+}
+
+.contactSaveBtn:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+.contactSaveBtn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+#contact-details {
+  scroll-margin-top: 6rem;
+}
+
+.pickupDetailsSection {
+  scroll-margin-top: 6rem;
+}
+
+.pickupDetails {
+  color: var(--primary-text);
+  margin: 0;
+}
+
+.pickupLocationBlock {
+  text-align: center;
+}
+
+.pickupLocationBlock .pickupDetails {
+  margin: 0 0 0.25rem 0;
+  text-align: center;
+}
+
+.pickupLinksWrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.35rem;
+}
+
+.pickupChangeLink {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--accent-orange);
+  font-weight: 500;
+  font-size: 0.875rem;
+  font-family: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.pickupChangeLink:hover:not(:disabled) {
+  color: var(--accent-turquoise);
+}
+
+.pickupChangeLink:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.pickupEditIcon {
+  width: 16px;
+  height: 16px;
+}
+
+.pickupMapLink {
+  display: inline-block;
+  color: var(--accent-orange);
+  font-weight: 500;
+}
+
+.pickupMapLink:hover {
+  color: var(--accent-turquoise);
+}
+
+.pickupSelectPrompt {
+  color: var(--primary-text);
+  margin: 0 0 var(--spacing-medium) 0;
+  font-size: 0.9375rem;
+}
+
+.pickupButtonWrap {
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--spacing-medium);
+}
+
+.pickupPrimaryButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1.25rem;
+  background-color: var(--accent-orange);
+  color: white;
+  font-family: 'Poppins', sans-serif;
+  font-weight: 600;
+  font-size: 1rem;
+  border: none;
+  border-radius: 24px;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.pickupPrimaryButton:hover {
+  background-color: #e85a2e;
+}
+
+
+/* Mobile styles */
+@media (max-width: 768px) {
+  .container {
+    padding: var(--spacing-medium);
+  }
+
+  .section {
+    padding: var(--spacing-medium);
+  }
+
+  .headerContent {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .title {
+    font-size: 1.5rem;
+  }
+
+  .reference {
+    text-align: center;
+  }
+
+  .sectionTitle {
+    font-size: 1.25rem;
+  }
+
+  .draftItineraryActionTitle {
+    font-size: 1.25rem;
+  }
+
+  .itineraryItem {
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .bookingDetails {
+    min-width: unset;
+    width: 100%;
+  }
+
+  .policyTierRow {
+    grid-template-columns: 1fr;
+  }
+}