/* ===========================================================
   Akhand Paath booking: start-time picker and the
   "At Gurudwara Sahib / At our home" choice.
   Loaded after seva.css on /seva/book only.
   =========================================================== */

.sv-where-note {
  margin-top: 16px; padding: 12px 16px;
  background: color-mix(in srgb, var(--gold-2) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--gold-2) 40%, transparent);
  border-radius: var(--radius-sm);
  font-size: 14px; color: var(--text);
}
.sv-where-note[hidden] { display: none; }

/* ---------- start times ---------- */
.sv-times { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); }
.sv-times[hidden] { display: none; }
.sv-times h3 { font-size: 17px; margin-bottom: 4px; }
.sv-times-day { color: var(--gold-text); font-weight: 600; }
.sv-time-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sv-time {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 12px 14px; text-align: left; cursor: pointer;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font: inherit;
}
.sv-time .t { font: 600 17px/1.2 'Jost', sans-serif; }
.sv-time .r { font-size: 12.5px; color: var(--text-soft); }
.sv-time:not(:disabled):hover { border-color: var(--gold-2); }
.sv-time.is-selected {
  background: linear-gradient(135deg, var(--gold-1), var(--gold-2)); border-color: var(--gold-2); color: #231a02;
}
.sv-time.is-selected .r { color: #231a02; }
.sv-time:disabled { background: var(--bg-2); opacity: .6; cursor: not-allowed; }
.sv-time:focus-visible { outline: 3px solid color-mix(in srgb, var(--gold-2) 55%, transparent); outline-offset: 2px; }

/* ---------- Gurudwara or home ---------- */
.sv-loc-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 4px; }
.sv-loc {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.sv-loc input { margin-top: 4px; accent-color: var(--gold-2); flex-shrink: 0; }
.sv-loc-body { display: flex; flex-direction: column; gap: 4px; }
.sv-loc-name { font: 600 16px/1.3 'Jost', sans-serif; }
.sv-loc-text { font-size: 13.5px; color: var(--text-soft); }
.sv-loc:hover { border-color: var(--gold-2); }
.sv-loc.is-on, .sv-loc:has(input:checked) {
  border-color: var(--gold-2); background: color-mix(in srgb, var(--gold-2) 12%, var(--surface));
}
.sv-loc:has(input:focus-visible) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold-2) 55%, transparent); }
.sv-loc[hidden] { display: none; }
.sv-home-fields { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.sv-home-fields[hidden] { display: none; }
.sv-home-fields h4 { font-size: 16px; margin-bottom: 12px; }
.sv-home-fields textarea {
  width: 100%; min-height: 84px; padding: 10px 14px; resize: vertical;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font: 14.5px 'Poppins', sans-serif;
}

@media (max-width: 640px) {
  .sv-loc-choices { grid-template-columns: 1fr; }
  .sv-time-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}