/* ============================================================
   COMPONENTS.CSS — Reusable UI components
   ============================================================ */

/* ---------- Status pills ---------- */
.status-pill {
  display:        inline-block;
  padding:        4px 10px;
  border-radius:  var(--radius-sm);
  font-size:      10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight:    500;
}
.status-pill.pending   { background: rgba(201, 168, 118, 0.12); color: var(--accent); }
.status-pill.confirmed { background: rgba(120, 180, 120, 0.12); color: #8FC58F; }
.status-pill.completed { background: rgba(160, 160, 160, 0.12); color: var(--text-secondary); }

/* ---------- Form elements ---------- */
.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field.full { grid-column: 1 / -1; }

.form-label {
  font-size:      12px;
  color:          var(--text-secondary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight:    500;
}

.form-input,
.form-select {
  background:    var(--surface);
  border:        1px solid var(--border-strong);
  color:         var(--text-primary);
  padding:       14px 16px;
  font-family:   var(--font-sans);
  font-size:     15px;
  outline:       none;
  transition:    border-color 0.2s;
  border-radius: var(--radius-sm);
}
.form-input:focus,
.form-select:focus { border-color: var(--accent); }

/* ---------- Field validation error states ---------- */
@keyframes field-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

.input-error {
  border-color: #C58F8F !important;
  animation:    field-shake 0.35s ease;
}

.group-error {
  outline:          2px solid #C58F8F;
  outline-offset:   2px;
  border-radius:    var(--radius-sm);
  animation:        field-shake 0.35s ease;
}

/* ---------- Date input: fix black-on-black picker icon + apply dark color-scheme ---------- */
.form-input[type="date"] {
  color-scheme: dark;
  color:        var(--text-primary);
  cursor:       pointer;
}
.form-input[type="date"]::-webkit-calendar-picker-indicator {
  filter:        invert(0.75) sepia(1) saturate(2) hue-rotate(5deg);
  opacity:       0.65;
  cursor:        pointer;
  padding:       2px;
  border-radius: 2px;
  transition:    opacity 0.2s;
}
.form-input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* ---------- Option / selection cards ---------- */
.option-card {
  background:    var(--surface);
  border:        1px solid var(--border);
  padding:       22px 18px;
  cursor:        pointer;
  transition:    all 0.25s;
  text-align:    left;
  border-radius: var(--radius-sm);
}
.option-card:hover    { border-color: var(--border-strong); }
.option-card.selected { border-color: var(--accent); background: rgba(201, 168, 118, 0.05); }

.option-card-name {
  font-family:   var(--font-serif);
  font-size:     19px;
  font-weight:   500;
  margin-bottom: 4px;
}
.option-card-meta {
  font-size:      12px;
  color:          var(--text-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom:  16px;
}
.option-card-price {
  font-family: var(--font-serif);
  color:       var(--accent);
  font-size:   22px;
  font-weight: 500;
}

/* ---------- Addon rows ---------- */
.addon-row {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  padding:         16px 18px;
  background:      var(--surface);
  border:          1px solid var(--border);
  cursor:          pointer;
  transition:      all 0.2s;
  border-radius:   var(--radius-sm);
}
.addon-row:hover    { border-color: var(--border-strong); }
.addon-row.selected { border-color: var(--accent); background: rgba(201, 168, 118, 0.06); }

.addon-left  { display: flex; align-items: center; gap: 12px; }

.addon-check {
  width:           18px;
  height:          18px;
  border:          1px solid var(--border-strong);
  border-radius:   var(--radius-sm);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  transition:      all 0.2s;
}
.addon-row.selected .addon-check { background: var(--accent); border-color: var(--accent); }
.addon-row.selected .addon-check::after { content: '✓'; color: var(--bg); font-size: 12px; font-weight: 600; }

.addon-name  { font-size: 14px; }
.addon-price { color: var(--accent); font-size: 14px; font-weight: 500; }

/* ---------- Location toggle ---------- */
.location-toggle {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
  margin-bottom:         24px;
}
.loc-option {
  padding:       18px;
  background:    var(--surface);
  border:        1px solid var(--border);
  cursor:        pointer;
  transition:    all 0.2s;
  text-align:    center;
  border-radius: var(--radius-sm);
}
.loc-option.selected { border-color: var(--accent); background: rgba(201, 168, 118, 0.06); }
.loc-option-title { font-family: var(--font-serif); font-size: 18px; margin-bottom: 4px; }
.loc-option-sub   { font-size: 12px; color: var(--text-tertiary); }

/* ---------- Summary block ---------- */
.summary-row {
  display:         flex;
  justify-content: space-between;
  padding:         14px 0;
  border-bottom:   1px solid var(--border);
  font-size:       15px;
}
.summary-row.total {
  border-bottom: none;
  padding-top:   22px;
  font-family:   var(--font-serif);
  font-size:     26px;
  color:         var(--accent);
  font-weight:   500;
}
.summary-label { color: var(--text-secondary); }

/* ---------- Time slots ---------- */
.time-slots {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   10px;
}
.slot {
  padding:       12px;
  background:    var(--surface);
  border:        1px solid var(--border);
  text-align:    center;
  font-size:     13px;
  cursor:        pointer;
  transition:    all 0.2s;
  font-weight:   500;
  border-radius: var(--radius-sm);
}
.slot:hover    { border-color: var(--border-strong); }
.slot.selected { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.slot.disabled { opacity: 0.3; cursor: not-allowed; }

/* ---------- Promo code field ---------- */
.promo-field { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.promo-status { font-size: 12px; color: var(--text-tertiary); min-height: 16px; letter-spacing: 0.04em; }
.promo-status.valid   { color: #8FC58F; }
.promo-status.invalid { color: #C58F8F; }

/* ---------- Utilities checkbox ---------- */
.utilities-row {
  display:       flex;
  align-items:   flex-start;
  gap:           14px;
  padding:       18px;
  background:    var(--surface);
  border:        1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor:        pointer;
  margin-top:    20px;
  transition:    border-color 0.2s;
}
.utilities-row:hover   { border-color: var(--accent); }
.utilities-row.checked { border-color: var(--accent); background: rgba(201, 168, 118, 0.06); }
.utilities-box {
  width:           22px;
  height:          22px;
  border:          1px solid var(--border-strong);
  border-radius:   var(--radius-sm);
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin-top:      2px;
  transition:      all 0.2s;
}
.utilities-row.checked .utilities-box { background: var(--accent); border-color: var(--accent); }
.utilities-row.checked .utilities-box::after { content: '✓'; color: var(--bg); font-size: 14px; font-weight: 600; }
.utilities-text { font-size: 14px; line-height: 1.5; color: var(--text-primary); }
.utilities-text .required { color: var(--accent); margin-left: 4px; }

/* ---------- Empty addons state ---------- */
.addons-empty {
  padding:     40px;
  text-align:  center;
  color:       var(--text-tertiary);
  font-size:   14px;
  background:  var(--surface);
  border:      1px dashed var(--border-strong);
  grid-column: 1 / -1;
}

/* ---------- Discount summary row ---------- */
.summary-row.discount-row { color: #8FC58F; }
.summary-row.discount-row .summary-label { color: #8FC58F; }

/* ---------- Vehicle type selector ---------- */
.vehicle-type-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   12px;
  margin-bottom:         16px;
}
.vtype-card {
  background:     var(--surface);
  border:         1px solid var(--border);
  padding:        18px 12px;
  cursor:         pointer;
  transition:     all 0.2s;
  text-align:     center;
  border-radius:  var(--radius-sm);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
}
.vtype-card:hover    { border-color: var(--border-strong); }
.vtype-card.selected { border-color: var(--accent); background: rgba(201, 168, 118, 0.06); }
.vtype-card svg { color: var(--accent); opacity: 0.7; transition: opacity 0.2s; }
.vtype-card.selected svg { opacity: 1; }
.vtype-label {
  font-size:      13px;
  color:          var(--text-secondary);
  letter-spacing: 0.04em;
  line-height:    1.3;
}
.vtype-card.selected .vtype-label { color: var(--text-primary); }
.vtype-custom         { display: none; margin-top: 4px; }
.vtype-custom.visible { display: block; }

/* ---------- Toast notifications ---------- */
#toast-container {
  position:       fixed;
  bottom:         28px;
  left:           50%;
  transform:      translateX(-50%);
  z-index:        9999;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            10px;
  pointer-events: none;
  width:          min(480px, 90vw);
}
.toast {
  display:        flex;
  align-items:    center;
  gap:            14px;
  padding:        16px 20px;
  background:     var(--surface-2);
  border:         1px solid var(--border-strong);
  border-left:    3px solid var(--accent);
  color:          var(--text-primary);
  font-size:      14px;
  line-height:    1.5;
  width:          100%;
  pointer-events: all;
  border-radius:  var(--radius-sm);
  opacity:        0;
  transform:      translateY(12px);
  transition:     opacity 0.32s ease, transform 0.32s ease;
  box-shadow:     0 8px 32px rgba(0,0,0,0.5);
}
.toast--visible  { opacity: 1; transform: translateY(0); }
.toast--error    { border-left-color: #C58F8F; }
.toast--success  { border-left-color: #8FC58F; }
.toast--info     { border-left-color: var(--accent); }
.toast__icon {
  flex-shrink:     0;
  width:           26px;
  height:          26px;
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       13px;
  font-weight:     700;
  background:      rgba(255,255,255,0.06);
}
.toast--error   .toast__icon { color: #C58F8F; }
.toast--success .toast__icon { color: #8FC58F; }
.toast--info    .toast__icon { color: var(--accent); }
.toast__msg   { flex: 1; }
.toast__close {
  flex-shrink: 0;
  background:  none;
  border:      none;
  color:       var(--text-tertiary);
  font-size:   18px;
  line-height: 1;
  padding:     0 0 0 8px;
  cursor:      pointer;
  transition:  color 0.2s;
}
.toast__close:hover { color: var(--text-primary); }

@media (max-width: 880px) {
  .form-row          { grid-template-columns: 1fr; }
  .location-toggle   { grid-template-columns: 1fr; }
  .time-slots        { grid-template-columns: repeat(3, 1fr); }
  .vehicle-type-grid { grid-template-columns: 1fr 1fr; }
  #toast-container   { bottom: 16px; }
}