@ticketboothapp/booking 1.2.24 → 1.2.25-rc.0

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

@@ -0,0 +1,357 @@
+/**
+ * Private Shuttle Booking Flow - matches BookingFlow styling
+ */
+
+.root {
+  /* Uses booking-flow-root from parent */
+}
+
+.section {
+  padding-top: 1.5rem;
+  margin-top: 1.5rem;
+  border-top: 1px solid var(--booking-stone-200, #e7e5e4);
+}
+
+.sectionLabel {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--booking-stone-700, #44403c);
+  margin-bottom: 0.5rem;
+}
+
+/* Overridden by booking-flow.css for orange/Poppins - see .private-shuttle-sectionLabel */
+
+.optionGrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+}
+
+@media (min-width: 640px) {
+  .optionGrid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 0.5rem;
+  }
+}
+
+.btnOption {
+  padding: 0.875rem 1rem;
+  padding-top: 0.875rem;
+  border-radius: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  position: relative;
+  text-align: left;
+  border: none;
+  cursor: pointer;
+}
+
+@media (min-width: 640px) {
+  .btnOption {
+    padding: 0.75rem 1rem;
+    padding-top: 0.75rem;
+  }
+}
+
+.btnOptionWithBadge {
+  padding-top: 1.25rem;
+}
+
+@media (min-width: 640px) {
+  .btnOptionWithBadge {
+    padding-top: 1rem;
+  }
+}
+
+.btnOptionSelected {
+  background: var(--booking-emerald-600, #059669);
+  color: #fff;
+}
+
+.btnOptionDefault {
+  background: var(--light-orange-background-dark, #f7e4dc);
+  color: var(--booking-stone-700, #44403c);
+}
+
+.btnOptionDefault:hover {
+  background: var(--light-orange-background, #fff1eb);
+}
+
+.badge {
+  position: absolute;
+  top: -0.75rem;
+  left: 50%;
+  transform: translateX(-50%);
+  font-family: 'Poppins', sans-serif;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: lowercase;
+  color: #fff;
+  padding: 0.25rem 0.5rem;
+  border-radius: 9999px;
+  white-space: nowrap;
+  background-color: #ff4d00;
+}
+
+.passengerBox {
+  padding: 1rem;
+  background: var(--booking-stone-50, #fafaf9);
+  border-radius: 0.5rem;
+  border: 1px solid var(--booking-stone-200, #e7e5e4);
+}
+
+/* Ensure selected value is visible when collapsed; keep compact and narrow (input has width:100%) */
+.passengerSelect {
+  width: auto !important;
+  max-width: 5rem !important;
+  color: var(--booking-stone-900, #1c1917) !important;
+  background-color: #fff !important;
+  -webkit-appearance: menulist !important;
+  appearance: menulist !important;
+  padding: 0.375rem 0.5rem !important;
+  font-size: 0.9375rem !important;
+  min-height: auto !important;
+}
+
+/* Number input for special request - no menulist, allow typing */
+.passengerInput {
+  width: auto !important;
+  max-width: 5rem !important;
+  min-width: 4.5rem !important;
+  color: var(--booking-stone-900, #1c1917) !important;
+  background-color: #fff !important;
+  padding: 0.375rem 0.5rem !important;
+  font-size: 0.9375rem !important;
+  text-align: center;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
+.btnTime {
+  padding: 0.875rem 1.25rem;
+  border-radius: 9999px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  border: none;
+  cursor: pointer;
+}
+
+.btnTimeSelected {
+  background: var(--booking-emerald-600, #059669);
+  color: #fff;
+}
+
+.btnTimeDefault {
+  background: var(--light-orange-background-dark, #f7e4dc);
+  color: var(--booking-stone-700, #44403c);
+}
+
+.btnTimeDefault:hover {
+  background: var(--light-orange-background, #fff1eb);
+}
+
+.policyList {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.btnPolicy {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  border-radius: 0.5rem;
+  border: 2px solid;
+  text-align: left;
+  transition: all 0.2s;
+  cursor: pointer;
+  background: #fff;
+}
+
+.btnPolicySelected {
+  border-color: var(--booking-emerald-500, #10b981);
+  background: var(--booking-emerald-50, #ecfdf5);
+}
+
+.btnPolicyDefault {
+  border-color: var(--booking-stone-200, #e7e5e4);
+}
+
+.btnPolicyDefault:hover {
+  border-color: var(--booking-stone-300, #d6d3d1);
+}
+
+.btnPolicyForced {
+  cursor: default;
+  pointer-events: none;
+  border-color: #fde68a;
+  background: #fffbeb;
+}
+
+.input {
+  width: 100%;
+  padding: 0.875rem 1.25rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--booking-stone-300, #d6d3d1);
+  font-size: 1rem;
+  color: var(--booking-stone-900, #1c1917);
+}
+
+.input:focus {
+  outline: none;
+  border-color: var(--booking-stone-500, #78716c);
+}
+
+.inputTime {
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
+  border: 1px solid var(--booking-stone-300, #d6d3d1);
+  font-size: 1rem;
+}
+
+.inputTime:focus {
+  outline: none;
+  border-color: var(--booking-primary, #059669);
+  box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2);
+}
+
+.labelSecondary {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--booking-stone-500, #78716c);
+  margin-bottom: 0.25rem;
+}
+
+.qtyBtn {
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: 9999px;
+  border: 1px solid var(--booking-stone-300, #d6d3d1);
+  background: #fff;
+  color: var(--booking-stone-600, #57534e);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.qtyBtn:hover:not(:disabled) {
+  background: var(--booking-stone-50, #fafaf9);
+}
+
+.qtyBtn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.adminBox {
+  padding: 1rem;
+  background: rgba(254, 243, 199, 0.5);
+  border: 1px solid #fde68a;
+  border-radius: 0.5rem;
+}
+
+.submitBtn {
+  width: 100%;
+  padding: 1rem 1.5rem;
+  min-height: 3.25rem;
+  background: var(--booking-emerald-600, #059669);
+  color: #fff;
+  font-weight: 600;
+  border-radius: 0.5rem;
+  border: none;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.submitBtn:hover:not(:disabled) {
+  background: var(--booking-emerald-700, #047857);
+}
+
+.submitBtn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.errorBox {
+  padding: 1rem;
+  background: #fef2f2;
+  border: 1px solid #fecaca;
+  border-radius: 0.5rem;
+  color: #b91c1c;
+}
+
+.secureNote {
+  text-align: center;
+  font-size: 0.875rem;
+  color: var(--booking-stone-500, #78716c);
+  margin-top: 1rem;
+}
+
+.changeBtn {
+  font-size: 0.875rem;
+  color: var(--booking-emerald-600, #059669);
+  text-decoration: underline;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.changeBtn:hover {
+  color: var(--booking-emerald-700, #047857);
+}
+
+.contactGrid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+}
+
+@media (min-width: 640px) {
+  .contactGrid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+.required {
+  color: #b91c1c;
+}
+
+.addOnOptionBtn {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 1rem;
+  border-radius: 0.5rem;
+  border: 2px solid;
+  text-align: left;
+  transition: all 0.2s;
+  cursor: pointer;
+  background: #fff;
+}
+
+.addOnOptionBtnSelected {
+  border-color: var(--booking-emerald-500, #10b981);
+  background: var(--booking-emerald-50, #ecfdf5);
+}
+
+.addOnOptionBtnDefault {
+  border-color: var(--booking-stone-200, #e7e5e4);
+}
+
+.addOnOptionBtnDefault:hover {
+  border-color: var(--booking-stone-300, #d6d3d1);
+}
+
+.specialRequestLink {
+  font-size: 0.75rem !important;
+  font-weight: 400 !important;
+}