/* ============================================================
   Part 14 / P3 — the storefront form system
   ------------------------------------------------------------
   ONE stylesheet for every public form (register, provider register, login,
   password reset, pre-order, product comment, checkout, user panel). Change a
   form's look here and every form changes with it.

   Loads AFTER front.css / uikit-rtl.css so it wins on the shared legacy classes.
   Preflight is off project-wide (see resources/css/storefront.css), so every
   property a control needs is set explicitly rather than assumed from a reset.

   HOW TO RESTYLE
   --------------
   Everything visual is a --sdf-* custom property on .sd-form below. Edit a
   value there and it propagates to all forms. The rules underneath consume the
   variables and should rarely need touching.

   To restyle ONE form only, override the same variable on that form:
       .sd-form.is-checkout{ --sdf-control-h:52px; }

   MARKUP
   ------
   Rendered by the Blade components in resources/views/components/form/.
   Prefer those over hand-writing the classes — they wire up the id / for /
   aria-required / aria-describedby relationships that make the markup correct.
   ============================================================ */

.sd-form{
  /* ---- surface -------------------------------------------------------- */
  --sdf-panel:rgba(255,255,255,.82);
  --sdf-panel-solid:#fff;
  --sdf-border:1px solid rgba(18,86,74,.12);
  --sdf-radius:22px;
  --sdf-shadow:0 18px 42px -32px rgba(26,62,55,.42);
  --sdf-pad:26px;
  --sdf-pad-mobile:18px;

  /* ---- rhythm --------------------------------------------------------- */
  --sdf-col-gap:16px;          /* between the two columns */
  --sdf-row-gap:18px;          /* between rows of fields */
  --sdf-label-gap:7px;         /* label -> control */

  /* ---- labels --------------------------------------------------------- */
  --sdf-label-size:12.5px;
  --sdf-label-weight:800;
  --sdf-label-color:var(--sd-ink);
  --sdf-hint-size:11px;
  --sdf-hint-color:var(--sd-muted);

  /* ---- required marker ------------------------------------------------ */
  --sdf-req-color:var(--sd-red-500);
  --sdf-req-size:12px;

  /* ---- controls ------------------------------------------------------- */
  --sdf-control-h:46px;
  --sdf-control-radius:12px;
  --sdf-control-bg:#fff;
  --sdf-control-color:var(--sd-ink);
  --sdf-control-size:13px;
  --sdf-control-pad:0 14px;
  --sdf-control-border:1px solid rgba(18,86,74,.16);
  --sdf-control-border-hover:1px solid rgba(18,86,74,.3);
  --sdf-control-border-focus:1px solid var(--sd-teal-400);
  --sdf-control-ring:0 0 0 3px rgba(26,188,156,.16);
  --sdf-placeholder-color:#a9b4b1;
  --sdf-textarea-h:130px;
  --sdf-disabled-bg:#f4f7f6;

  /* ---- validation ----------------------------------------------------- */
  --sdf-error-color:var(--sd-red-700);
  --sdf-error-size:11.5px;
  --sdf-error-border:1px solid var(--sd-red-500);
  --sdf-error-ring:0 0 0 3px rgba(210,90,78,.14);
  --sdf-alert-bg:var(--sd-red-050,#fff1f0);

  /* ---- buttons -------------------------------------------------------- */
  --sdf-btn-h:47px;
  --sdf-btn-radius:12px;
  --sdf-btn-size:13.5px;
  --sdf-btn-bg:var(--sd-teal-600);
  --sdf-btn-bg-hover:#0b6f5c;
  --sdf-btn-color:#fff;
  --sdf-btn-ghost-color:var(--sd-teal-600);
  --sdf-btn-ghost-border:1px solid rgba(18,86,74,.22);
  --sdf-btn-ghost-bg-hover:var(--sd-teal-050);

  /* ---- motion --------------------------------------------------------- */
  --sdf-transition:.18s ease;

  font-family:'iransans',sans-serif;
  color:var(--sd-ink);
  text-align:right;
}

/* ============================================================
   1. Page shell — <x-form.page>
   ============================================================ */
.sd-form-page{
  --sdf-page-width:760px;
  width:min(var(--sdf-page-width),100%);
  margin:0 auto;
  padding:0 0 40px;
}
.sd-form-page.is-wide{ --sdf-page-width:980px; }
.sd-form-page.is-narrow{ --sdf-page-width:470px; }

/* ============================================================
   2. Card — <x-form.card>
   ============================================================ */
.sd-form-card{
  padding:var(--sdf-pad);
  border:var(--sdf-border);
  border-radius:var(--sdf-radius);
  background:var(--sdf-panel);
  box-shadow:var(--sdf-shadow);
}
@media(max-width:640px){
  .sd-form-card{ padding:var(--sdf-pad-mobile); border-radius:16px; }
}

/* ---- header ---- */
.sd-form-head{ margin:0 0 20px; }
.sd-form-head-row{ display:flex; align-items:center; gap:11px; }
.sd-form-head-ic{
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto; width:40px; height:40px;
  border-radius:13px;
  background:var(--sd-teal-050);
  color:var(--sd-teal-600);
  font-size:16px;
}
.sd-form-title{
  margin:0;
  color:var(--sd-ink);
  font-family:'iransans2',sans-serif;
  font-size:19px; font-weight:900; line-height:1.6;
}
.sd-form-sub{
  margin:6px 0 0;
  color:var(--sd-muted);
  font-size:12px; line-height:1.9;
}
/* the "starred fields are required" note — rendered only when the form
   actually has a required field (the component decides) */
.sd-form-note{
  display:inline-flex; align-items:center; gap:6px;
  margin:14px 0 0;
  padding:6px 12px;
  border-radius:100px;
  background:var(--sd-teal-050);
  color:var(--sd-teal-600);
  font-size:11px; font-weight:700;
}

/* ============================================================
   3. Field grid — <x-form.grid> / <x-form.field>
   ============================================================ */
.sd-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--sdf-col-gap);
  row-gap:var(--sdf-row-gap);
  align-items:start;
}
.sd-form-grid.is-single{ grid-template-columns:minmax(0,1fr); }
@media(max-width:640px){
  .sd-form-grid{ grid-template-columns:minmax(0,1fr); }
}
.sd-form-field{ min-width:0; }
.sd-form-field.is-full{ grid-column:1 / -1; }

/* ---- label ---- */
.sd-form-label{
  display:block;
  margin:0 0 var(--sdf-label-gap);
  color:var(--sdf-label-color);
  font-size:var(--sdf-label-size);
  font-weight:var(--sdf-label-weight);
  line-height:1.7;
}
/* Required marker. Decorative — the real signal for assistive tech is the
   control's `required` + aria-required, which <x-form.field> always emits
   together with this. aria-hidden keeps it from being read as "star". */
.sd-form-req{
  margin-inline-start:3px;
  color:var(--sdf-req-color);
  font-size:var(--sdf-req-size);
  font-weight:900;
  line-height:1;
}
/* inline parenthetical guidance inside the label, e.g. "(بین ۴ تا ۱۲ کاراکتر)" */
.sd-form-label .sd-form-label-hint{
  margin-inline-start:5px;
  color:var(--sdf-hint-color);
  font-size:var(--sdf-hint-size);
  font-weight:600;
}

/* ---- controls ---- */
.sd-form-control,
.sd-form .uk-input,
.sd-form .uk-select,
.sd-form .uk-textarea{
  display:block;
  box-sizing:border-box;
  width:100%;
  height:var(--sdf-control-h);
  margin:0;
  padding:var(--sdf-control-pad);
  border:var(--sdf-control-border);
  border-radius:var(--sdf-control-radius);
  background:var(--sdf-control-bg);
  color:var(--sdf-control-color);
  font-family:'iransans',sans-serif;
  font-size:var(--sdf-control-size);
  line-height:1.7;
  text-align:right;
  transition:border-color var(--sdf-transition),box-shadow var(--sdf-transition);
  -webkit-appearance:none; appearance:none;
}
.sd-form-control:hover:not(:disabled),
.sd-form .uk-input:hover:not(:disabled){ border:var(--sdf-control-border-hover); }
.sd-form-control:focus,
.sd-form .uk-input:focus,
.sd-form .uk-select:focus,
.sd-form .uk-textarea:focus{
  outline:none;
  border:var(--sdf-control-border-focus);
  box-shadow:var(--sdf-control-ring);
}
.sd-form-control::placeholder{ color:var(--sdf-placeholder-color); }
.sd-form-control:disabled{ background:var(--sdf-disabled-bg); color:var(--sd-muted); cursor:not-allowed; }

/* textarea overrides the fixed control height */
textarea.sd-form-control,
.sd-form .uk-textarea{
  height:auto;
  min-height:var(--sdf-textarea-h);
  padding:12px 14px;
  line-height:1.9;
  resize:vertical;
}

/* select: native arrow removed above, drawn back on the correct (left) side for RTL */
select.sd-form-control,
.sd-form .uk-select{
  padding-inline-end:14px;
  padding-inline-start:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236d7a76' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4Z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left 14px center;
  background-size:10px;
  cursor:pointer;
}

/* number inputs: kill the spinners, they fight RTL and Persian digits */
.sd-form-control[type=number]{ -moz-appearance:textfield; }
.sd-form-control[type=number]::-webkit-outer-spin-button,
.sd-form-control[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* digit runs (mobile, postcode, price) read left-to-right even inside RTL copy */
.sd-form-control.is-ltr{ direction:ltr; text-align:right; }

/* ---- password reveal (Part 15 / P23) ----
   assets/new/js/forms14.js wraps EVERY input[type=password] on the public site in
   .sd-pw and appends the button, so this covers the component-rendered fields and
   the few hand-written ones (provider/info/pass.blade.php) identically, with no
   markup change anywhere.

   Deliberately scoped to .sd-pw > input rather than .sd-form-control: one of those
   fields is a bare .uk-input, and the padding that makes room for the button has to
   apply to whatever the input happens to be.

   The eye sits at the END of the line — the left edge in RTL — which is where the
   select arrow sits too, so the controls line up down the right column of a form. */
.sd-pw{ position:relative; display:block; }
.sd-pw > input{ padding-inline-end:42px!important; }
.sd-pw-btn{
  position:absolute; top:50%; inset-inline-end:5px;
  transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; padding:0;
  border:0; border-radius:9px;
  background:transparent;
  color:var(--sd-muted);
  font-size:15px; line-height:1;
  cursor:pointer;
  transition:color var(--sdf-transition),background var(--sdf-transition);
}
.sd-pw-btn:hover{ background:var(--sd-teal-050); color:var(--sd-teal-600); }
/* pressed = the password is currently VISIBLE, so the state is worth showing */
.sd-pw-btn[aria-pressed="true"]{ color:var(--sd-teal-600); }
.sd-pw-btn:focus-visible{ outline:none; box-shadow:var(--sdf-control-ring); }
/* Edge/IE draw their own reveal control, which would sit next to ours */
.sd-pw > input::-ms-reveal,
.sd-pw > input::-ms-clear{ display:none; }

/* ---- hint + error ---- */
.sd-form-hint{
  display:block;
  margin:6px 0 0;
  color:var(--sdf-hint-color);
  font-size:var(--sdf-hint-size);
  line-height:1.8;
}
.sd-form-error{
  display:flex; align-items:flex-start; gap:5px;
  margin:6px 0 0;
  color:var(--sdf-error-color);
  font-size:var(--sdf-error-size);
  font-weight:700;
  line-height:1.8;
}
.sd-form-error > i{ margin-top:3px; font-size:11px; }

/* a field the server rejected */
.sd-form-field.has-error .sd-form-control{
  border:var(--sdf-error-border);
}
.sd-form-field.has-error .sd-form-control:focus{
  box-shadow:var(--sdf-error-ring);
}

/* ---- error summary at the top of the card ---- */
.sd-form-alert{
  display:flex; align-items:flex-start; gap:9px;
  margin:0 0 20px;
  padding:13px 15px;
  border:1px solid rgba(210,90,78,.3);
  border-radius:14px;
  background:var(--sdf-alert-bg);
  color:var(--sdf-error-color);
  font-size:12.5px; font-weight:700; line-height:1.9;
}
.sd-form-alert > i{ margin-top:4px; }
.sd-form-alert ul{ margin:4px 0 0; padding-inline-start:16px; font-weight:600; }

/* ---- checkbox row ---- */
.sd-form-check{
  display:flex; align-items:flex-start; gap:9px;
  font-size:12.5px; line-height:1.9;
}
.sd-form-check input[type=checkbox]{
  flex:0 0 auto;
  width:18px; height:18px;
  margin:3px 0 0;
  border:1px solid rgba(18,86,74,.28);
  border-radius:5px;
  background:#fff;
  accent-color:var(--sd-teal-600);
  cursor:pointer;
}
.sd-form-check label{ cursor:pointer; }
.sd-form-check a{ color:var(--sd-teal-600); font-weight:800; text-decoration:none; }
.sd-form-check a:hover{ text-decoration:underline; }

/* ---- file picker ----
   The native input is visually hidden but kept in the layout and focusable, so
   keyboard users still reach it; the styled row is a <label> pointing at it. */
.sd-form-file{ position:relative; }
.sd-form-file > input[type=file]{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0; cursor:pointer;
}
.sd-form-file > .sd-form-file-face{
  display:flex; align-items:center; gap:10px;
  box-sizing:border-box;
  height:var(--sdf-control-h);
  padding:0 12px 0 6px;
  border:1px dashed rgba(18,86,74,.28);
  border-radius:var(--sdf-control-radius);
  background:#fff;
  color:var(--sd-muted);
  font-size:12px;
  transition:border-color var(--sdf-transition),background var(--sdf-transition);
}
.sd-form-file > input[type=file]:hover + .sd-form-file-face,
.sd-form-file > input[type=file]:focus + .sd-form-file-face{
  border-color:var(--sd-teal-400);
  background:var(--sd-teal-050);
}
.sd-form-file-face > i{ color:var(--sd-teal-600); font-size:14px; }
.sd-form-file-name{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sd-form-file-btn{
  flex:0 0 auto;
  padding:6px 13px;
  border-radius:9px;
  background:var(--sd-teal-050);
  color:var(--sd-teal-600);
  font-size:11.5px; font-weight:800;
}

/* ============================================================
   4. Actions — <x-form.actions>
   ============================================================ */
.sd-form-actions{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:24px 0 0;
  padding:20px 0 0;
  border-top:1px solid rgba(18,86,74,.1);
}
.sd-form-actions .sd-form-spacer{ flex:1 1 auto; }

.sd-form-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  box-sizing:border-box;
  min-width:150px;
  height:var(--sdf-btn-h);
  padding:0 24px;
  border:0;
  border-radius:var(--sdf-btn-radius);
  background:var(--sdf-btn-bg);
  color:var(--sdf-btn-color);
  font-family:'iransans2',sans-serif;
  font-size:var(--sdf-btn-size);
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  transition:background var(--sdf-transition),transform var(--sdf-transition),box-shadow var(--sdf-transition);
}
.sd-form-btn:hover{ background:var(--sdf-btn-bg-hover); color:var(--sdf-btn-color); transform:translateY(-2px); }
.sd-form-btn:active{ transform:none; }
.sd-form-btn:focus-visible{ outline:none; box-shadow:var(--sdf-control-ring); }
.sd-form-btn[disabled]{ opacity:.55; cursor:not-allowed; transform:none; }

.sd-form-btn.is-ghost{
  background:transparent;
  border:var(--sdf-btn-ghost-border);
  color:var(--sdf-btn-ghost-color);
}
.sd-form-btn.is-ghost:hover{ background:var(--sdf-btn-ghost-bg-hover); color:var(--sdf-btn-ghost-color); }

@media(max-width:640px){
  .sd-form-actions{ flex-direction:column-reverse; align-items:stretch; }
  .sd-form-actions .sd-form-spacer{ display:none; }
  .sd-form-btn{ width:100%; }
}

/* ---- a secondary link under the actions (e.g. "already have an account?") ---- */
.sd-form-foot{
  margin:16px 0 0;
  color:var(--sd-muted);
  font-size:12px; line-height:1.9; text-align:center;
}
.sd-form-foot a{ color:var(--sd-teal-600); font-weight:800; text-decoration:none; }
.sd-form-foot a:hover{ text-decoration:underline; }

/* ============================================================
   5. Modal / bottom-sheet presentation — Part 14 / P6
   ------------------------------------------------------------
   Same card, shown inside a UIkit modal on desktop and as a bottom sheet on
   mobile. The form keeps its own URL as a full-page fallback, so this is a
   presentation layer only — no markup of the form itself changes.
   ============================================================ */
.sd-form-modal .uk-modal-dialog{
  width:min(760px,100%);
  padding:0;
  border-radius:var(--sdf-radius);
  background:transparent;
  box-shadow:none;
}
/* UIkit puts 50px of vertical padding on .uk-modal itself, so the card can be at
   most 100vh minus that 100px (plus a little breathing room). Budgeting only 90px
   made a tall form 10px too big for the viewport, and UIkit's centring resolved
   that by pushing the dialog to top:-50px — clipping the title with no way to
   scroll it back into view. */
.sd-form-modal .sd-form-card{
  max-height:calc(100vh - 120px);
  overflow-y:auto;
  background:var(--sdf-panel-solid);
  -webkit-overflow-scrolling:touch;
}
.sd-form-modal .uk-modal-close-default{ z-index:2; color:var(--sd-muted); }

/* ---- Part 15 / P9+P10: fit the desktop viewport without scrolling ----
   The two overlay forms are the pre-order (seven fields, two columns, plus a
   textarea) and the product comment (three fields, one column, with a five-row
   textarea). Both overflowed a normal laptop viewport, so the first thing a user
   did after opening them was scroll. Nothing was removed — the modal presentation
   just gets a tighter scale than the same card gets on its own full page:
   shorter rows, a shorter textarea, a smaller header block. The card keeps
   max-height + overflow above, so a very short window still scrolls rather than
   clipping. */
.sd-form-modal .sd-form{
  --sdf-pad:20px;
  --sdf-row-gap:12px;
  --sdf-col-gap:14px;
  --sdf-label-gap:5px;
  --sdf-control-h:42px;
  --sdf-textarea-h:78px;
  --sdf-btn-h:43px;
}
.sd-form-modal .sd-form-head{ margin-bottom:14px; }
.sd-form-modal .sd-form-title{ font-size:17px; }
.sd-form-modal .sd-form-sub{ margin-top:4px; line-height:1.8; }
.sd-form-modal .sd-form-head-ic{ width:34px; height:34px; border-radius:11px; font-size:14px; }
/* the «فیلدهای ستاره‌دار الزامی است» note is a whole extra row of height in a dialog
   whose fields already carry visible stars */
.sd-form-modal .sd-form-note{ display:none; }
.sd-form-modal .sd-form-actions{ margin-top:16px; padding-top:14px; }
.sd-form-modal .sd-form-hint{ margin-top:4px; }
/* --sdf-textarea-h alone is not enough: the base rule is `height:auto` +
   `min-height`, so a rows="5" textarea (the «نظر شما» box) still renders five lines
   tall and the min-height never comes into play. Pin the height in a modal — and
   keep resize:vertical from the base rule, so anyone who wants a bigger box can
   still drag it open. */
.sd-form-modal textarea.sd-form-control,
.sd-form-modal .sd-form .uk-textarea{ height:var(--sdf-textarea-h); }

@media(max-width:640px){
  /* ---- bottom sheet ----
     Part 15 / P8: it used to open at 88vh — near enough to full screen that it read
     as a page, not a sheet, and the "handle" was decoration (pointer-events:none)
     so the gesture it advertised did nothing. It opens at --sd-sheet-h (58vh) now
     and forms14.js makes the handle real: drag to resize between 35vh and 92vh,
     drag down past the bottom snap to dismiss. The height is a custom property so
     the drag can write to it without fighting a static rule. */
  .sd-form-modal.uk-modal{ padding:0; }
  .sd-form-modal .uk-modal-dialog{
    --sd-sheet-h:58vh;
    position:absolute;
    inset:auto 0 0 0;
    width:100%;
    margin:0;
  }
  .sd-form-modal .sd-form-card{
    height:var(--sd-sheet-h);
    max-height:92vh;
    padding-top:26px;
    border:0;
    border-radius:20px 20px 0 0;
    box-shadow:0 -12px 40px -20px rgba(26,62,55,.5);
    /* the drag handle sits above this; keep momentum scrolling inside the card */
    overscroll-behavior:contain;
  }
  /* while a finger is down, kill the transition so the sheet tracks the drag 1:1 */
  .sd-form-modal .uk-modal-dialog:not(.is-dragging) .sd-form-card{
    transition:height .22s cubic-bezier(.2,.9,.3,1);
  }
  /* Drag handle. It lives on the dialog, not the card: the card is the scroll
     container, so a handle drawn inside it would scroll away with the content.
     Part 15 / P8: it is a real target now — 30px tall, pointer-events on — and
     .sd-sheet-grip (added by forms14.js) is the element that receives the touch;
     ::before is only the visible pill. */
  .sd-form-modal .uk-modal-dialog::before{
    content:"";
    position:absolute; top:11px; left:50%;
    z-index:4;
    width:44px; height:4px;
    margin-inline-start:-22px;
    border-radius:100px;
    background:rgba(18,86,74,.24);
    pointer-events:none;
  }
  .sd-form-modal .sd-sheet-grip{
    position:absolute; top:0; left:0; right:0;
    z-index:3;
    height:30px;
    cursor:grab;
    touch-action:none;          /* we own the vertical gesture */
    -webkit-tap-highlight-color:transparent;
  }
  .sd-form-modal .uk-modal-dialog.is-dragging .sd-sheet-grip{ cursor:grabbing; }
  /* the close × would sit on top of the grip strip */
  .sd-form-modal .uk-modal-close-default{ top:32px; }

  /* mobile gets a little of the padding back — a phone sheet is one column, so the
     rows are not competing for height the way the desktop two-column grid is */
  .sd-form-modal .sd-form{ --sdf-row-gap:14px; --sdf-textarea-h:88px; }
}

@media(prefers-reduced-motion:reduce){
  .sd-form-btn,.sd-form-control,.sd-form-file-face{ transition:none; }
  .sd-form-btn:hover{ transform:none; }
}

/* ============================================================
   Part 16 / P19 — «اطلاعات تکمیلی (اختیاری)» section divider
   ------------------------------------------------------------
   The supplier form now runs required fields first, then a labelled rule, then
   the optional ones. It is a grid child spanning both columns rather than a
   separate block, so it participates in the same row rhythm as the fields.
   ============================================================ */
.sd-form-divider{
  display:flex;
  align-items:center;
  gap:12px;
  margin:6px 0 2px;
  color:var(--sd-muted);
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.sd-form-divider::before,
.sd-form-divider::after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:rgba(18,86,74,.14);
}

/* Part 16 / P15 — «به نام … — شماره‌ی تماس …» on the pre-order form.
   Reuses .sd-form-note's pill so it reads as the same class of aside as
   «فیلدهای ستاره‌دار الزامی است», with the leading icon lined up on its text. */
.sd16-preorder-who{
  align-items:center;
  margin:0 0 14px;
  direction:rtl;
  unicode-bidi:isolate;
}