@ticketboothapp/booking 0.1.23 → 1.2.24

package/src/components/BookingDetails.module.css

@@ -1,1591 +0,0 @@
-.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;
-  }
-}