/* ============================================================
   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; }

/* ---- 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); }

@media(max-width:640px){
  /* bottom sheet: pinned to the bottom edge, rounded top corners, drag handle */
  .sd-form-modal.uk-modal{ padding:0; }
  .sd-form-modal .uk-modal-dialog{
    position:absolute;
    inset:auto 0 0 0;
    width:100%;
    margin:0;
  }
  .sd-form-modal .sd-form-card{
    max-height:88vh;
    padding-top:24px;
    border:0;
    border-radius:20px 20px 0 0;
    box-shadow:0 -12px 40px -20px rgba(26,62,55,.5);
  }
  /* 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. */
  .sd-form-modal .uk-modal-dialog{ position:absolute; }
  .sd-form-modal .uk-modal-dialog::before{
    content:"";
    position:absolute; top:9px; left:50%;
    z-index:3;
    width:40px; height:4px;
    margin-inline-start:-20px;
    border-radius:100px;
    background:rgba(18,86,74,.18);
    pointer-events:none;
  }
}

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