/* =============================================================================
   PestoKill — Booking Engine styles
   Reuses brand tokens (--theme, --header, --text...). No site redesign.
   Responsive: desktop / tablet / mobile.
   ============================================================================= */

.pdb-widget {
  --pdb-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pdb-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pdb-field label {
  font-size: 13px;
  font-weight: 700;
  color: var(--header, #141414);
}
.pdb-field label span {
  color: #c0392b;
}

.pdb-input {
  width: 100%;
  height: 50px;
  border: 1px solid #e2e6ea;
  border-radius: var(--pdb-radius);
  padding: 0 14px;
  font-size: 15px;
  color: var(--header, #141414);
  background: #fff;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}
textarea.pdb-input {
  height: auto;
  padding: 12px 14px;
}
.pdb-input:focus {
  border-color: var(--theme, #ee9a3f);
  box-shadow: 0 0 0 3px rgba(238, 154, 63, 0.12);
}

/* summary rows (used inside the modal review + schedule) */
.pdb-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 14px;
  font-size: 13.5px;
  color: var(--text, #54595f);
}
.pdb-sum-row > span {
  flex: none;
}
.pdb-sum-row strong {
  color: var(--header, #141414);
  text-align: right;
  margin-left: auto;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-weight: 700;
}

.pdb-book-btn {
  width: 100%;
  justify-content: center;
}
.pdb-load-error,
.pdb-load-error a {
  color: var(--text, #54595f);
  font-size: 14px;
}

/* ---------- modal ---------- */
.pdb-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  overflow: hidden; /* never allow the popup to cause page/horizontal scroll */
}
.pdb-modal * {
  box-sizing: border-box;
}
.pdb-modal.is-open {
  display: flex;
}
.pdb-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 21, 36, 0.55);
  backdrop-filter: blur(2px);
}
.pdb-modal-dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border-radius: 12px;
  padding: 26px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
  animation: pdbIn 0.25s ease;
}
/* keep grids/flex children shrinkable so nothing forces horizontal overflow */
.pdb-modal-body,
.pdb-sched,
.pdb-cal,
.pdb-slots,
.pdb-review {
  min-width: 0;
  max-width: 100%;
}
@keyframes pdbIn {
  from {
    transform: translateY(16px);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}
.pdb-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: #f1f1f1;
  color: #333;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.pdb-modal-close:hover {
  background: #e4e4e4;
}

.pdb-steps {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.pdb-step {
  flex: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: #9aa0a6;
  padding-bottom: 8px;
  border-bottom: 3px solid #eceff1;
}
.pdb-step.is-active {
  color: var(--theme, #ee9a3f);
  border-bottom-color: var(--theme, #ee9a3f);
}

.pdb-modal-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--header, #141414);
  margin: 0 0 12px;
}
.pdb-modal-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--bg, #ee9a3f24);
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.pdb-modal-summary {
  gap: 10px;
}
.pdb-modal-summary span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.pdb-modal-summary strong {
  color: var(--theme, #ee9a3f);
  font-size: 16px;
  white-space: nowrap;
}

.pdb-modal-body .pdb-field {
  margin-bottom: 14px;
}

/* map */
.pdb-map-wrap {
  position: relative;
  margin-bottom: 8px;
}
.pdb-map {
  width: 100%;
  height: 240px;
  border-radius: 8px;
  overflow: hidden;
  background: #e9eef0;
}
.pdb-map-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 18px;
  text-align: center;
  color: var(--text, #54595f);
  font-size: 14px;
}
.pdb-locate-btn {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: #fff;
  border: 1px solid #e2e6ea;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.pdb-geo-note {
  font-size: 12px;
  color: var(--text, #54595f);
  margin-bottom: 14px;
}

.pdb-error {
  color: #c0392b;
  font-size: 13px;
  min-height: 18px;
  margin: 4px 0;
}

.pdb-actions {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 10px;
  flex-wrap: wrap;
}
.pdb-actions .theme-btn {
  flex: 1;
  justify-content: center;
}
.pdb-back {
  background: none;
  border: none;
  color: var(--text, #54595f);
  font-weight: 600;
  cursor: pointer;
  padding: 12px 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.pdb-back:hover {
  color: var(--theme, #ee9a3f);
}

.pdb-review {
  background: var(--bg, #ee9a3f24);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pdb-pay {
  width: 100%;
  justify-content: center;
  font-size: 15px;
}

/* processing + success */
.pdb-processing {
  text-align: center;
  padding: 30px 10px;
}
.pdb-processing p {
  color: var(--text, #54595f);
  margin-top: 16px;
}
.pdb-spinner {
  width: 46px;
  height: 46px;
  margin: 0 auto;
  border: 4px solid #fdf4ec;
  border-top-color: var(--theme, #ee9a3f);
  border-radius: 50%;
  animation: pdbSpin 0.9s linear infinite;
}
@keyframes pdbSpin {
  to {
    transform: rotate(360deg);
  }
}

.pdb-success {
  text-align: center;
  padding: 10px 4px;
}
.pdb-success-icon {
  font-size: 64px;
  color: var(--theme, #ee9a3f);
  line-height: 1;
}
.pdb-success-sub {
  color: var(--text, #54595f);
  margin: 6px 0 16px;
}
.pdb-booking-id {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  background: var(--bg, #ee9a3f24);
  border-radius: 8px;
  padding: 12px 24px;
  margin-bottom: 18px;
  font-size: 12px;
  color: var(--text, #54595f);
  letter-spacing: 1px;
}
.pdb-booking-id strong {
  font-size: 20px;
  color: var(--header, #141414);
  letter-spacing: 1px;
}
.pdb-success-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
}
.pdb-success-actions .theme-btn {
  justify-content: center;
}

/* ---------- responsive ---------- */
@media (max-width: 575px) {
  .pdb-modal {
    padding: 10px;
  }
  .pdb-modal-dialog {
    padding: 18px 14px;
    border-radius: 10px;
    max-height: 94vh;
  }
  .pdb-modal-title {
    font-size: 18px;
  }
  /* keep the step tabs clear of the close (×) button and let them shrink */
  .pdb-steps {
    gap: 4px;
    padding-right: 34px;
  }
  .pdb-step {
    font-size: 10.5px;
    letter-spacing: -0.2px;
  }
  .pdb-modal-summary {
    padding: 10px 12px;
  }
  .pdb-modal-summary span {
    font-size: 14px;
  }
  .pdb-map {
    height: 200px;
  }
  .pdb-cal {
    padding: 10px;
  }
  .pdb-cal-day {
    font-size: 12px;
    border-radius: 7px;
  }
  .pdb-actions {
    flex-direction: column-reverse;
  }
  .pdb-actions .theme-btn,
  .pdb-back {
    width: 100%;
    text-align: center;
  }
}

/* ---- Leaflet (OpenStreetMap) map integration ---- */
.pdb-map .leaflet-container {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  font-family: inherit;
}
.pdb-locate-btn {
  z-index: 1000;
} /* keep above Leaflet panes/controls */
.pdb-map .leaflet-control-attribution {
  font-size: 10px;
  opacity: 0.8;
}
.pdb-map .leaflet-top .leaflet-control {
  margin-top: 10px;
}
.pdb-map .leaflet-left .leaflet-control {
  margin-left: 10px;
}
@media (max-width: 575px) {
  .pdb-map .leaflet-control-zoom {
    display: none;
  } /* pinch-zoom on mobile; keep it clean */
}

/* ============================ SCHEDULING (Phase 4) ======================== */
.pdb-sched {
  display: block;
  margin-bottom: 4px;
}

/* calendar (full width, on top) */
.pdb-cal {
  border: 1px solid #e6ebe4;
  border-radius: 8px;
  padding: 14px;
  background: #fff;
  margin-bottom: 18px;
}
.pdb-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pdb-cal-title {
  font-weight: 700;
  color: var(--header, #141414);
  font-size: 15px;
}
.pdb-cal-nav {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid #e2e6ea;
  background: #fff;
  color: var(--header, #141414);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.pdb-cal-nav:hover:not(:disabled) {
  background: var(--green-light, #fdf4ec);
  border-color: var(--theme, #ee9a3f);
  color: var(--theme, #ee9a3f);
}
.pdb-cal-nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.pdb-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  width: 100%;
}
.pdb-cal-dow span {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #9aa0a6;
  padding: 4px 0;
}
.pdb-cal-empty {
  aspect-ratio: 1;
  min-width: 0;
}
.pdb-cal-day {
  aspect-ratio: 1;
  min-width: 0;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: 9px;
  font-size: 13px;
  color: var(--header, #141414);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease;
}
.pdb-cal-day:hover:not(.is-disabled):not(.is-selected) {
  background: var(--green-light, #fdf4ec);
}
.pdb-cal-day.is-today {
  box-shadow: inset 0 0 0 1.5px var(--theme, #ee9a3f);
  font-weight: 700;
}
.pdb-cal-day.is-selected {
  background: var(--theme, #ee9a3f);
  color: #fff;
  font-weight: 700;
  transform: scale(1.04);
}
.pdb-cal-day.is-disabled {
  color: #cfd4ce;
  cursor: not-allowed;
  text-decoration: line-through;
}

/* slots */
.pdb-slots-wrap {
  display: flex;
  flex-direction: column;
}
.pdb-slots-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--header, #141414);
  margin-bottom: 10px;
}
.pdb-slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  align-content: start;
}
.pdb-slot {
  border: 1px solid #f3e6d5;
  background: #fbfdfa;
  border-radius: 8px;
  padding: 13px 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--header, #141414);
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease;
}
.pdb-slot.is-selected {
  box-shadow: 0 6px 16px rgba(238, 154, 63, 0.28);
}
.pdb-slot:hover:not(.is-disabled):not(.is-selected) {
  border-color: var(--theme, #ee9a3f);
  background: var(--green-light, #fdf4ec);
}
.pdb-slot.is-selected {
  background: var(--theme, #ee9a3f);
  border-color: var(--theme, #ee9a3f);
  color: #fff;
}
.pdb-slot.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
  background: #f2f4f1;
}
.pdb-slots-empty {
  grid-column: 1 / -1;
  padding: 18px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--text, #54595f);
  background: #fff7ed;
  border: 1px dashed #f0c98a;
  border-radius: 10px;
}

/* responsive slot grid: touch-friendly, no cramped wrapping */
@media (max-width: 575px) {
  .pdb-slots {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  .pdb-slot {
    font-size: 12.5px;
    padding: 12px 4px;
    min-height: 46px;
  }
}
@media (max-width: 340px) {
  .pdb-slots {
    grid-template-columns: 1fr;
  }
}

/* ============================ QUICK BOOKING CARD =========================
   Inline homepage/service widget redesigned as a compact "Quick Booking"
   card: eyebrow + title, a horizontal filter row (service + dynamic
   dropdowns) and a single result row (icon + name + trust tags + price +
   Book Now). Brand tokens only; no colour/redesign changes.
   ======================================================================== */
.pdb-qb {
  background: #fff;
  border: 1px solid #e8ece4;
  border-radius: 14px;
  padding: 26px;
  box-shadow: 0 18px 50px rgba(34, 35, 58, 0.08);
  gap: 20px;
}

/* filter row: service select + dynamic dropdowns, evenly laid out */
.pdb-qb-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  align-items: end;
}
/* On wide screens keep the dropdowns a comfortable, uniform width instead of
   stretching each one across the full-width container. */
@media (min-width: 768px) {
  .pdb-qb-filters {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.pdb-fields {
  display: contents;
} /* lets each .pdb-field join the parent grid */

/* result row */
.pdb-qb-result {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  border: 1px solid #e8ece4;
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--bg, #ee9a3f24);
}
.pdb-qb-info {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 240px;
  min-width: 0;
}
.pdb-qb-ic {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--green-light, #fdf4ec);
  color: var(--theme, #ee9a3f);
  font-size: 22px;
}
.pdb-qb-meta {
  min-width: 0;
}
.pdb-qb-meta h4 {
  font-size: 17px;
  font-weight: 800;
  color: var(--header, #141414);
  margin: 0 0 6px;
  line-height: 1.2;
}
.pdb-qb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pdb-qb-tags span {
  font-size: 11px;
  font-weight: 700;
  color: var(--theme, #ee9a3f);
  background: var(--green-light, #fdf4ec);
  padding: 3px 10px;
  border-radius: 30px;
  white-space: nowrap;
}

/* price column */
.pdb-qb-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.1;
  margin-left: auto;
}
.pdb-qb-mrp {
  font-size: 14px;
  color: #9aa0a6;
  text-decoration: line-through;
}
.pdb-qb-offer {
  font-size: 26px;
  font-weight: 800;
  color: var(--theme, #ee9a3f);
}
.pdb-qb-insp {
  font-size: 15px;
  font-weight: 800;
  color: #e67e00;
  background: #fff3e0;
  padding: 6px 12px;
  border-radius: 30px;
  white-space: nowrap;
}

/* Book Now: keep natural width inside the result row (base rule is 100%) */
.pdb-qb-result .pdb-book-btn {
  width: auto;
  flex: none;
  white-space: nowrap;
}

/* utensils add-on note inside the result row (wraps to its own line) */
.pdb-qb-addon {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #b26a00;
  background: #fff7e6;
  border: 1px solid #ffe0a6;
  border-radius: 8px;
  padding: 8px 12px;
}
.pdb-qb-addon i {
  color: #e08a00;
}

/* add-on note inside the booking modal (schedule + review) */
.pdb-modal-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #b26a00;
  background: #fff7e6;
  border: 1px solid #ffe0a6;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
}
.pdb-modal-note i {
  color: #e08a00;
}

/* lock/advance note */
.pdb-qb-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text, #54595f);
  margin: 0;
}
.pdb-qb-note i {
  color: var(--theme, #ee9a3f);
}

/* ---- responsive: tablet ---- */
@media (max-width: 767px) {
  .pdb-qb {
    padding: 22px 18px;
  }
}

/* ---- responsive: mobile ---- */
@media (max-width: 575px) {
  .pdb-qb {
    padding: 20px 16px;
    border-radius: 12px;
    gap: 16px;
  }
  .pdb-qb-filters {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .pdb-qb-result {
    padding: 14px;
    gap: 14px;
  }
  .pdb-qb-info {
    flex: 1 1 100%;
  }
  .pdb-qb-price {
    margin-left: 66px; /* align under meta text, past the icon */
    align-items: flex-start;
  }
  .pdb-qb-offer {
    font-size: 23px;
  }
  .pdb-qb-result .pdb-book-btn {
    width: 100%;
    flex: 1 1 100%;
    justify-content: center;
  }
}