/* ═══════════════════════════════════════════════════════════════════════
   Crepicure Booking Form  v1.1.4
   ═══════════════════════════════════════════════════════════════════════ */

#crepBookingWrap {
  --crep-primary:      #3b82f6;
  --crep-primary-dark: #1d4ed8;
  --crep-accent:       #5bc5a7;
  --crep-summary-bg:   #0e1b2e;
  --crep-label-color:  #ffffff;
  --crep-btn-text:     #ffffff;
  --crep-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  font-family: var(--crep-font);
  max-width:   680px;
  margin:      0 auto;
  padding:     20px;
  box-sizing:  border-box;
}

/* ── Layout ─────────────────────────────────────────────────────────── */
#crepBookingWrap .crep-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
#crepBookingWrap .crep-field { margin-bottom: 18px; }

/* ── ALL labels — white ─────────────────────────────────────────────── */
#crepBookingWrap label,
#crepBookingWrap .crep-field label {
  display:      block !important;
  font-weight:  600 !important;
  font-size:    14px !important;
  margin-bottom: 7px !important;
  line-height:  1.4 !important;
  color:        #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background:   transparent !important;
  text-shadow:  none !important;
}

/* ── Text inputs & textarea ─────────────────────────────────────────── */
#crepBookingWrap input[type="text"],
#crepBookingWrap input[type="email"],
#crepBookingWrap input[type="tel"],
#crepBookingWrap textarea {
  display:      block !important;
  width:        100% !important;
  padding:      11px 14px !important;
  border:       1.5px solid rgba(255,255,255,0.25) !important;
  border-radius: 8px !important;
  font-size:    15px !important;
  font-family:  var(--crep-font) !important;
  color:        #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  background:   #ffffff !important;
  box-sizing:   border-box !important;
  box-shadow:   none !important;
  outline:      none;
  transition:   border-color .2s, box-shadow .2s;
}
#crepBookingWrap input[type="file"] {
  display:      block !important;
  width:        100% !important;
  padding:      9px 14px !important;
  border:       1.5px solid rgba(255,255,255,0.3) !important;
  border-radius: 8px !important;
  font-size:    14px !important;
  /* White background so the native "Choose file" button renders visibly */
  background:   #ffffff !important;
  color:        #333333 !important;
  -webkit-text-fill-color: #333333 !important;
  box-sizing:   border-box !important;
  cursor:       pointer;
  /* Must use auto so browser renders the native file button */
  -webkit-appearance: auto !important;
  -moz-appearance:    auto !important;
  appearance:         auto !important;
}
#crepBookingWrap textarea {
  resize:       vertical;
  min-height:   100px;
}
#crepBookingWrap input[type="text"]:focus,
#crepBookingWrap input[type="email"]:focus,
#crepBookingWrap input[type="tel"]:focus,
#crepBookingWrap textarea:focus {
  border-color: var(--crep-primary) !important;
  box-shadow:   0 0 0 3px rgba(59,130,246,.3) !important;
  outline:      none !important;
}
#crepBookingWrap .req {
  color:                   #f87171 !important;
  -webkit-text-fill-color: #f87171 !important;
}

/* ── SELECT DROPDOWNS ───────────────────────────────────────────────── */
/* Wrapper for positioning the arrow */
#crepBookingWrap .crep-select-wrap {
  position:  relative;
  display:   block;
  width:     100%;
}

/* Arrow: pure CSS chevron via a positioned span */
#crepBookingWrap .crep-select-arrow {
  position:       absolute;
  right:          14px;
  top:            50%;
  transform:      translateY(-50%);
  pointer-events: none;
  display:        block;
  width:          10px;
  height:         6px;
}
#crepBookingWrap .crep-select-arrow::before,
#crepBookingWrap .crep-select-arrow::after {
  content:      '';
  position:     absolute;
  top:          0;
  width:        7px;
  height:       2px;
  background:   #555555;
  border-radius: 1px;
}
#crepBookingWrap .crep-select-arrow::before { left: 0;   transform: rotate(40deg);  transform-origin: left center; }
#crepBookingWrap .crep-select-arrow::after  { right: 0;  transform: rotate(-40deg); transform-origin: right center; }

/* The select itself */
#crepBookingWrap select {
  display:      block !important;
  width:        100% !important;
  padding:      11px 40px 11px 14px !important;
  border:       1.5px solid rgba(255,255,255,0.25) !important;
  border-radius: 8px !important;
  font-size:    15px !important;
  font-family:  var(--crep-font) !important;
  line-height:  1.4 !important;
  /* WHITE background so dark text is always readable */
  color:        #111111 !important;
  -webkit-text-fill-color: #111111 !important;
  background:   #ffffff !important;
  background-image: none !important;
  box-sizing:   border-box !important;
  box-shadow:   none !important;
  /* Remove ALL native browser appearance */
  -webkit-appearance: none !important;
  -moz-appearance:    none !important;
  appearance:         none !important;
  cursor:       pointer;
  outline:      none;
  min-width:    0;
}
#crepBookingWrap select:focus {
  border-color: var(--crep-primary) !important;
  box-shadow:   0 0 0 3px rgba(59,130,246,.3) !important;
  outline:      none !important;
}
#crepBookingWrap select option {
  color:        #111111 !important;
  background:   #ffffff !important;
}

/* ── Terms & Conditions ─────────────────────────────────────────────── */
#crepBookingWrap .crep-terms { margin-top: 4px; }
#crepBookingWrap .crep-terms label,
#crepBookingWrap .crep-field.crep-terms label {
  display:      flex !important;
  align-items:  center !important;
  flex-wrap:    wrap !important;
  gap:          8px !important;
  font-weight:  400 !important;
  cursor:       pointer !important;
  color:        #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
#crepBookingWrap .crep-terms label span {
  color:                   #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
#crepBookingWrap .crep-terms input[type="checkbox"] {
  display:      inline-block !important;
  width:        17px !important;
  height:       17px !important;
  flex-shrink:  0 !important;
  cursor:       pointer !important;
  accent-color: var(--crep-primary) !important;
  -webkit-appearance: checkbox !important;
  -moz-appearance:    checkbox !important;
  appearance:         checkbox !important;
  margin:       0 !important;
}
#crepBookingWrap .crep-terms a {
  color:                   var(--crep-primary) !important;
  -webkit-text-fill-color: var(--crep-primary) !important;
  text-decoration: underline !important;
  font-weight:  600 !important;
}

/* ── Price Summary ──────────────────────────────────────────────────── */
#crepBookingWrap .crep-price-summary {
  background:   rgba(0,0,0,0.25) !important;
  border:       1px solid rgba(255,255,255,0.15) !important;
  border-radius: 12px;
  padding:      20px 24px;
  margin:       24px 0 20px;
}
#crepBookingWrap .crep-price-row {
  display:         flex;
  justify-content: space-between;
  font-size:       14px;
  padding:         5px 0;
  color:           rgba(255,255,255,0.85) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
}
#crepBookingWrap .crep-price-row span {
  color:                   rgba(255,255,255,0.85) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.85) !important;
}
#crepBookingWrap .crep-price-total {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  font-size:       20px;
  font-weight:     700;
  border-top:      1px solid rgba(255,255,255,.2);
  padding-top:     12px;
  margin-top:      8px;
}
#crepBookingWrap .crep-price-total > span:first-child {
  color:                   #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
#crepBookingWrap .crep-price-total > span:last-child,
#crepBookingWrap #crepTotal {
  color:                   var(--crep-accent) !important;
  -webkit-text-fill-color: var(--crep-accent) !important;
}

/* ── PAYMENT METHOD OPTIONS ─────────────────────────────────────────── */
#crepBookingWrap .crep-payment-select { margin-bottom: 20px; }

#crepBookingWrap .crep-pay-label {
  display:      block !important;
  font-weight:  600 !important;
  font-size:    15px !important;
  margin-bottom: 12px !important;
  color:        #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background:   transparent !important;
}

#crepBookingWrap .crep-pay-options {
  display:   flex;
  gap:       10px;
  flex-wrap: wrap;
}

/* Each payment card — DARK background, WHITE text, coloured border when selected */
#crepBookingWrap .crep-pay-option {
  flex:         1;
  min-width:    140px;
  display:      flex !important;
  align-items:  center !important;
  gap:          8px !important;
  /* Solid dark navy background so white text is always visible */
  background:   #132035 !important;
  border:       2px solid rgba(255,255,255,0.2) !important;
  border-radius: 8px !important;
  padding:      12px 14px !important;
  cursor:       pointer;
  transition:   border-color .15s, background .15s;
  font-size:    14px !important;
  font-weight:  500 !important;
  /* White text */
  color:        #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-sizing:   border-box;
}
#crepBookingWrap .crep-pay-option * {
  color:                   #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
#crepBookingWrap .crep-pay-option span {
  color:                   #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  display: inline !important;
}
#crepBookingWrap .crep-pay-option.selected,
#crepBookingWrap .crep-pay-option:has(input:checked) {
  border-color: var(--crep-primary) !important;
  background:   #1a2f50 !important;
}
#crepBookingWrap .crep-pay-option input[type="radio"] {
  display: none !important;
  width:   0 !important;
  height:  0 !important;
}

/* SVG icons — white stroke */
#crepBookingWrap .crep-pay-icon {
  width:        20px !important;
  height:       20px !important;
  flex-shrink:  0 !important;
  display:      inline-block !important;
  stroke:       #ffffff !important;
  fill:         none !important;
  color:        #ffffff !important;
  vertical-align: middle;
}

/* ── COD Note ───────────────────────────────────────────────────────── */
#crepBookingWrap .crep-cod-note {
  background:   rgba(253,224,71,0.1) !important;
  border:       1px solid rgba(253,224,71,0.5) !important;
  border-radius: 8px;
  padding:      12px 14px;
  margin-top:   10px;
  font-size:    14px;
  line-height:  1.5;
  color:        #fde047 !important;
  -webkit-text-fill-color: #fde047 !important;
}
#crepBookingWrap .crep-cod-note strong {
  color:                   #fde047 !important;
  -webkit-text-fill-color: #fde047 !important;
}

/* ── Stripe Element ─────────────────────────────────────────────────── */
#crepBookingWrap .crep-stripe-element {
  border:       1.5px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  padding:      14px;
  margin-bottom: 20px;
  background:   rgba(255,255,255,0.05) !important;
}

/* ── Button ─────────────────────────────────────────────────────────── */
#crepBookingWrap .crep-btn {
  display:         flex !important;
  align-items:     center !important;
  justify-content: center !important;
  gap:             8px;
  width:           100% !important;
  padding:         15px 24px !important;
  border:          none !important;
  border-radius:   8px !important;
  font-size:       16px !important;
  font-family:     var(--crep-font) !important;
  font-weight:     700 !important;
  cursor:          pointer;
  transition:      transform .15s, box-shadow .15s;
  margin-top:      8px;
  text-shadow:     none !important;
  box-sizing:      border-box !important;
}
#crepBookingWrap .crep-btn-primary {
  background: linear-gradient(135deg, var(--crep-primary), var(--crep-primary-dark)) !important;
  color:      var(--crep-btn-text) !important;
  -webkit-text-fill-color: var(--crep-btn-text) !important;
  box-shadow: 0 4px 16px rgba(59,130,246,.45) !important;
}
#crepBookingWrap .crep-btn-primary:hover {
  transform:  translateY(-2px);
  box-shadow: 0 6px 22px rgba(59,130,246,.55) !important;
}
#crepBookingWrap .crep-btn:disabled {
  opacity:    .55;
  cursor:     not-allowed;
  transform:  none;
}

/* ── Messages ───────────────────────────────────────────────────────── */
#crepBookingWrap .crep-messages {
  padding:      14px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight:  500;
  font-size:    14px;
}
#crepBookingWrap .crep-messages.success {
  background: rgba(16,185,129,0.15) !important;
  border:     1px solid rgba(16,185,129,.4) !important;
  color:      #6ee7b7 !important;
  -webkit-text-fill-color: #6ee7b7 !important;
}
#crepBookingWrap .crep-messages.error {
  background: rgba(239,68,68,0.15) !important;
  border:     1px solid rgba(239,68,68,.4) !important;
  color:      #fca5a5 !important;
  -webkit-text-fill-color: #fca5a5 !important;
}

/* ── Success Screen ─────────────────────────────────────────────────── */
#crepBookingWrap .crep-success     { text-align: center; padding: 48px 24px; }
#crepBookingWrap .crep-success-icon { margin-bottom: 20px; }
#crepBookingWrap .crep-success h2 {
  font-size:    26px;
  margin-bottom: 12px;
  color:        #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
#crepBookingWrap .crep-success p {
  color:        rgba(255,255,255,0.8) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.8) !important;
  font-size:    16px;
  line-height:  1.6;
}
#crepBookingWrap .crep-order-ref {
  margin-top:   20px;
  font-size:    15px;
  color:        rgba(255,255,255,0.9) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.9) !important;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 520px) {
  #crepBookingWrap .crep-row-2       { grid-template-columns: 1fr; }
  #crepBookingWrap .crep-pay-options { flex-direction: column; }
  #crepBookingWrap .crep-pay-option  { min-width: 100%; }
}