/* =============================================================
   PICKERS — area picker (GPS) + Jalali datepicker panels
   Loaded globally; markup hooks are consumed by area-picker.js
   and datepicker.js / jdate-picker.js.
   ============================================================= */

/* ---- Area picker ---- */
.bk-areapicker { position: absolute; top: calc(100% + 12px); inset-inline-start: 0; z-index: var(--bk-z-overlay); }
.bk-areapicker[hidden] { display: none; }
.bk-areapicker__panel {
  display: grid; grid-template-columns: 180px minmax(0, 1fr);
  width: 560px; max-width: 92vw; max-height: 420px;
  background: var(--bk-bg); border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius-card); box-shadow: var(--bk-shadow-xl);
  overflow: hidden; animation: bk-pop-in var(--bk-dur-fast) var(--bk-ease-out);
}
@keyframes bk-pop-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.bk-areapicker__side { background: var(--bk-surface); padding: var(--bk-space-3); display: flex; flex-direction: column; gap: 6px; border-inline-end: 1px solid var(--bk-border); }
.bk-areapicker__quick { text-align: start; padding: 12px; border-radius: var(--bk-radius-input); transition: background var(--bk-dur-fast) var(--bk-ease); display: flex; flex-direction: column; gap: 3px; }
.bk-areapicker__quick:hover { background: var(--bk-hover); }
.bk-areapicker__quick.is-active { background: var(--bk-primary-tint); }
.bk-areapicker__quick.is-active .bk-areapicker__quick-title { color: var(--bk-primary-700); }
.bk-areapicker__quick-title { font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-semibold); display: flex; align-items: center; gap: 7px; }
.bk-areapicker__quick--gps .bk-areapicker__quick-title i { color: var(--bk-primary); }
.bk-areapicker__quick-sub { font-size: var(--bk-fs-xs); color: var(--bk-text-muted); }
.bk-areapicker__main { display: flex; flex-direction: column; min-height: 0; }
.bk-areapicker__search { display: flex; align-items: center; gap: 8px; margin: var(--bk-space-3); padding: 10px 12px; border-radius: var(--bk-radius-input); background: var(--bk-surface-2); color: var(--bk-text-muted); flex: 0 0 auto; }
.bk-areapicker__search input { flex: 1; border: none; background: transparent; font-size: var(--bk-fs-sm); color: var(--bk-text); min-width: 0; }
.bk-areapicker__search input:focus { outline: none; }
.bk-areapicker__list { overflow-y: auto; max-height: 340px; padding: 0 var(--bk-space-3) var(--bk-space-3); display: flex; flex-direction: column; gap: 2px; }
.bk-areapicker__item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--bk-radius-input); font-size: var(--bk-fs-sm); color: var(--bk-text); text-align: start; transition: background var(--bk-dur-fast) var(--bk-ease); }
.bk-areapicker__item i { color: var(--bk-text-faint); width: 14px; }
.bk-areapicker__item:hover { background: var(--bk-hover); }
.bk-areapicker__item.is-active { background: var(--bk-primary-tint); color: var(--bk-primary-700); font-weight: var(--bk-fw-semibold); }
.bk-areapicker__item.is-active i { color: var(--bk-primary); }
/* Province → city grouping */
.bk-areapicker__group { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--bk-space-2); }
.bk-areapicker__group + .bk-areapicker__group { border-top: 1px solid var(--bk-border); padding-top: var(--bk-space-2); }
.bk-areapicker__province { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--bk-radius-input); font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-bold); color: var(--bk-text); text-align: start; transition: background var(--bk-dur-fast) var(--bk-ease); }
.bk-areapicker__province i { color: var(--bk-primary); width: 14px; }
.bk-areapicker__province:hover { background: var(--bk-hover); }
.bk-areapicker__province.is-active { background: var(--bk-primary-tint); color: var(--bk-primary-700); }
.bk-areapicker__group-label { padding: 8px 12px 4px; font-size: var(--bk-fs-xs); font-weight: var(--bk-fw-bold); color: var(--bk-text-faint); }
.bk-areapicker__cities { display: flex; flex-direction: column; gap: 2px; padding-inline-start: var(--bk-space-4); }
.bk-areapicker__cities .bk-areapicker__item { color: var(--bk-text-muted); }

@media (max-width: 640px) {
  .bk-areapicker { position: static; margin-top: var(--bk-space-2); }
  .bk-areapicker__panel { grid-template-columns: 1fr; width: 100%; max-height: 380px; box-shadow: none; animation: none; }
  .bk-areapicker__side { flex-direction: row; border-inline-end: none; border-bottom: 1px solid var(--bk-border); }
  .bk-areapicker__quick { flex: 1; }
}

/* ---- Jalali datepicker (search + booking modes) ---- */
.mp-fresha-picker { position: absolute; top: calc(100% + 12px); inset-inline-start: 0; z-index: var(--bk-z-overlay); background: var(--bk-bg); border-radius: var(--bk-radius-card); box-shadow: var(--bk-shadow-xl); border: 1px solid var(--bk-border); padding: var(--bk-space-4); width: 600px; max-width: 92vw; }
.mp-fresha-picker[hidden] { display: none; }
.mp-fresha-picker--search .mp-fresha-picker__panel { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: var(--bk-space-4); }
.mp-fresha-picker--search .mp-fresha-picker__times { grid-column: 1 / -1; }
.mp-fresha-picker--booking { width: 330px; }

.mp-fresha-picker__quick { display: flex; flex-direction: column; gap: 8px; }
.mp-fresha-quick { padding: 14px 12px; border-radius: var(--bk-radius-input); box-shadow: inset 0 0 0 1px var(--bk-border); text-align: start; transition: box-shadow var(--bk-dur-fast) var(--bk-ease), background var(--bk-dur-fast) var(--bk-ease); }
.mp-fresha-quick:hover { box-shadow: inset 0 0 0 1px var(--bk-ink); }
.mp-fresha-quick__title { display: block; font-weight: var(--bk-fw-semibold); font-size: var(--bk-fs-sm); }
.mp-fresha-quick__sub { display: block; color: var(--bk-text-muted); font-size: var(--bk-fs-xs); margin-top: 2px; }

.mp-fresha-cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--bk-space-3); }
.mp-fresha-cal__nav { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--bk-text); box-shadow: inset 0 0 0 1px var(--bk-border); transition: all var(--bk-dur-fast) var(--bk-ease); }
.mp-fresha-cal__nav:hover { box-shadow: inset 0 0 0 1px var(--bk-ink); }
.mp-fresha-cal__month { font-weight: var(--bk-fw-bold); }
.mp-fresha-cal__weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.mp-fresha-cal__weekdays span { text-align: center; font-size: var(--bk-fs-xs); color: var(--bk-text-muted); padding: 4px 0; }
.mp-fresha-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.mp-fresha-cal__day { aspect-ratio: 1; border-radius: 50%; font-size: var(--bk-fs-sm); color: var(--bk-text); transition: all var(--bk-dur-fast) var(--bk-ease); display: inline-flex; align-items: center; justify-content: center; }
.mp-fresha-cal__day:hover:not(:disabled) { background: var(--bk-hover); }
.mp-fresha-cal__day.is-today { box-shadow: inset 0 0 0 1.5px var(--bk-primary); font-weight: var(--bk-fw-bold); }
.mp-fresha-cal__day.is-selected { background: var(--bk-ink); color: #fff; box-shadow: none; }
.mp-fresha-cal__day.is-disabled { color: var(--bk-text-faint); opacity: 0.45; cursor: default; }
.mp-fresha-cal__day.is-empty { visibility: hidden; }

.mp-fresha-picker__times { margin-top: var(--bk-space-3); padding-top: var(--bk-space-4); border-top: 1px solid var(--bk-border); }
.mp-fresha-picker__times-label { font-size: var(--bk-fs-sm); font-weight: var(--bk-fw-semibold); }
.mp-fresha-times { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mp-fresha-time { padding: 10px 16px; border-radius: var(--bk-radius-pill); box-shadow: inset 0 0 0 1px var(--bk-border); font-size: var(--bk-fs-sm); display: inline-flex; flex-direction: column; align-items: center; gap: 1px; transition: all var(--bk-dur-fast) var(--bk-ease); }
.mp-fresha-time small { color: var(--bk-text-muted); font-size: var(--bk-fs-xs); }
.mp-fresha-time:hover { box-shadow: inset 0 0 0 1px var(--bk-ink); }
.mp-fresha-time.is-active { box-shadow: inset 0 0 0 1.5px var(--bk-primary); background: var(--bk-primary-tint); color: var(--bk-primary-700); }

/* Booking-modal portal mode (datepicker.js mounts to body) */
.mp-fresha-picker--modal { position: fixed; top: 50%; inset-inline-start: 50%; transform: translate(50%, -50%); z-index: calc(var(--bk-z-modal) + 1); }
[dir="ltr"] .mp-fresha-picker--modal { transform: translate(-50%, -50%); }
.mp-fresha-picker-overlay { position: fixed; inset: 0; background: var(--bk-overlay); z-index: var(--bk-z-modal); }
.mp-fresha-picker-overlay[hidden] { display: none; }

@media (max-width: 640px) {
  .mp-fresha-picker { position: static; width: 100%; box-shadow: none; margin-top: var(--bk-space-2); }
  .mp-fresha-picker--search .mp-fresha-picker__panel { grid-template-columns: 1fr; }
  .mp-fresha-picker__quick { flex-direction: row; }
  .mp-fresha-quick { flex: 1; }
}

/* ===== Item 9 — mobile full-screen pickers (area + search-date) with X ===== */
.bk-picker-sheet-head { display: none; }

@media (max-width: 640px) {
  /* Turn the open dropdown into a full-screen sheet. */
  .bk-areapicker:not([hidden]),
  .mp-fresha-picker.mp-fresha-picker--search:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: var(--bk-z-modal);
    margin: 0;
    width: 100%;
    max-width: none;
    background: var(--bk-bg);
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .bk-areapicker:not([hidden]) .bk-areapicker__panel,
  .mp-fresha-picker--search:not([hidden]) .mp-fresha-picker__panel {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    animation: none;
    max-height: none;
    overflow-y: auto;
  }

  .bk-picker-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--bk-border);
    position: sticky;
    top: 0;
    background: var(--bk-bg);
    z-index: 2;
  }
  .bk-picker-sheet-head__title { font-weight: var(--bk-fw-bold); font-size: var(--bk-fs-md); }
  .bk-picker-sheet-close {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px var(--bk-border);
    color: var(--bk-text);
    font-size: 18px;
    background: var(--bk-bg);
  }
  .bk-picker-sheet-close:hover { box-shadow: inset 0 0 0 1px var(--bk-ink); }
}