/* ============================================================
   Part 15 / P6 — the mobile <select> bottom sheet
   ------------------------------------------------------------
   On a phone a native <select> opens the OS picker: an opaque grey wheel (iOS) or
   a cramped list (Android) that ignores every token this site uses, renders the
   Persian option text at the system size, and on the product page hid the photo
   behind it. It also cannot be styled — that is why the product page grew its own
   .sd11-cs replacement, which is a desktop-shaped dropdown and equally awkward on
   a phone.

   assets/new/js/sheet15.js turns EVERY <select> on the public site into a
   half-screen sheet at ≤768px: product model/size, the register form's
   activity/province/city, the catalogue filters, the panel forms. The native
   <select> stays in the DOM as the source of truth — the sheet writes the value
   back and fires `change`, so every existing onchange handler (set_model1/2,
   ajax(), sdExpertise, the filter submit) runs unchanged. With JS off, or on
   desktop, the native control behaves exactly as before.

   Sizing note: the sheet is `max-height:60vh` with its list scrolling inside, so a
   30-province list is reachable without the sheet swallowing the whole screen.
   ============================================================ */

.sd15-sheet{
  position:fixed; inset:0;
  z-index:100001;                /* above the filter off-canvas (10000) and modals */
  display:none;
}
.sd15-sheet.is-open{ display:block; }

.sd15-sheet-backdrop{
  position:absolute; inset:0;
  background:rgba(20,35,31,.42);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; transition:opacity .2s ease;
}
.sd15-sheet.is-in .sd15-sheet-backdrop{ opacity:1; }

.sd15-sheet-panel{
  position:absolute; inset:auto 0 0 0;
  display:flex; flex-direction:column;
  box-sizing:border-box;
  max-height:60vh;
  padding:0 0 max(10px, env(safe-area-inset-bottom));
  border-radius:22px 22px 0 0;
  background:#fff;
  box-shadow:0 -16px 44px -20px rgba(26,62,55,.6);
  transform:translateY(100%);
  transition:transform .26s cubic-bezier(.2,.9,.3,1);
  direction:rtl; text-align:right;
}
.sd15-sheet.is-in .sd15-sheet-panel{ transform:translateY(0); }

/* grab handle */
.sd15-sheet-panel::before{
  content:"";
  position:absolute; top:9px; left:50%;
  width:40px; height:4px; margin-left:-20px;
  border-radius:100px;
  background:rgba(18,86,74,.18);
}

.sd15-sheet-head{
  flex:0 0 auto;
  display:flex; align-items:center; gap:10px;
  padding:20px 18px 12px;
  border-bottom:1px solid rgba(18,86,74,.1);
}
.sd15-sheet-title{
  flex:1 1 auto; min-width:0;
  margin:0;
  color:var(--sd-ink);
  font-family:'iransans2',sans-serif;
  font-size:15px; font-weight:900; line-height:1.6;
}
.sd15-sheet-close{
  flex:0 0 auto;
  width:30px; height:30px; padding:0;
  border:0; border-radius:50%;
  background:var(--sd-teal-050);
  color:var(--sd-teal-700);
  font-size:20px; line-height:1;
  cursor:pointer;
}

.sd15-sheet-list{
  flex:1 1 auto;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  margin:0; padding:8px 10px 6px;
  list-style:none;
}
.sd15-sheet-opt{
  display:flex; align-items:center; gap:9px;
  width:100%;
  box-sizing:border-box;
  margin:0 0 7px;
  /* 50px minimum: a comfortable touch target, same as the filter drawer's pills */
  min-height:50px;
  padding:12px 14px;
  border:1px solid rgba(18,86,74,.14);
  border-radius:13px;
  background:#fff;
  color:var(--sd-ink);
  font-family:'iransans',sans-serif;
  /* 16px so focusing the sheet can never trigger the iOS zoom either (P21) */
  font-size:16px; font-weight:600; line-height:1.7;
  text-align:right;
  cursor:pointer;
}
.sd15-sheet-opt:last-child{ margin-bottom:0; }
.sd15-sheet-opt.is-selected{
  border-color:var(--sd-teal-600);
  background:var(--sd-teal-600);
  color:#fff;
  box-shadow:0 8px 16px -12px rgba(10,120,99,.8);
  font-weight:800;
}
.sd15-sheet-opt.is-selected::after{
  content:"✓";
  margin-inline-start:auto;
  font-size:15px; font-weight:900; line-height:1;
}
/* a disabled option (rare, but the filter forms use them as group labels) */
.sd15-sheet-opt[disabled]{
  border-style:dashed;
  background:#f6faf9;
  color:var(--sd-muted);
  cursor:default;
}

/* ---- the trigger that replaces the native control ----
   Same box as .sd-form-control so a sheet-backed field is indistinguishable from
   a text field next to it in the grid. */
.sd15-sheet-trigger{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  box-sizing:border-box;
  width:100%;
  min-height:var(--sdf-control-h,46px);
  margin:0;
  padding:0 14px;
  border:1px solid rgba(18,86,74,.16);
  border-radius:var(--sdf-control-radius,12px);
  background:#fff;
  color:var(--sd-ink);
  font-family:'iransans',sans-serif;
  font-size:16px; font-weight:600; line-height:1.7;
  text-align:right;
  cursor:pointer;
}
.sd15-sheet-trigger.is-placeholder{ color:var(--sdf-placeholder-color,#a9b4b1); font-weight:500; }
.sd15-sheet-trigger::after{
  content:"";
  flex:0 0 auto;
  width:8px; height:8px;
  margin-top:-4px;
  border-left:2px solid var(--sd-teal-600);
  border-bottom:2px solid var(--sd-teal-600);
  transform:rotate(-45deg);
}
.sd15-sheet-trigger:focus-visible{
  outline:none;
  border-color:var(--sd-teal-400);
  box-shadow:0 0 0 3px rgba(26,188,156,.16);
}
/* the real control stays focusable for assistive tech but out of the way */
.sd15-sheet-native{
  position:absolute!important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  border:0;
}

/* prevent the page behind the sheet from scrolling */
body.sd15-sheet-lock{ overflow:hidden; }

/* The product page's own custom dropdown (.sd11-cs, products11.css) is a
   desktop-shaped popover. Below the sheet's breakpoint the sheet owns those two
   selects, so the popover is hidden here rather than raced in JS — sheet15.js and
   the product page's $(document).ready both run at DOMContentLoaded and the order
   is not something to depend on. The product page also refuses to build .sd11-cs
   at all once a select has a sheet trigger. */
@media(max-width:768px){
  .sd11-product-page .sd11-cs{ display:none!important; }
}

@media(prefers-reduced-motion:reduce){
  .sd15-sheet-panel,.sd15-sheet-backdrop{ transition:none; }
}