/* ============================================================
   Part 15 — shared page chrome
   ------------------------------------------------------------
   The storefront's newer surfaces (the product card, the product page, the form
   system) all agree on one look: a soft white panel, ~20px radius, a hairline
   teal-tinted border and a wide, low-opacity shadow. The older content pages —
   about, contact, articles, news, journals, آموزش‌ها, FAQ, complaints, privacy,
   brands, compare, favourites, search — never got there. They render flat white
   rectangles with 2px grey box-shadows, sharp 3–7px corners, and each one pulls
   itself 12px UP under the header with an inline `margin-top:-12px`.

   This sheet is the bridge. It restyles the LEGACY class names those pages
   already use, so no page markup has to change:

       .color_tag      the single-panel content pages
       .box-comparis   the listing wrapper (articles/news/journals/compare)
       .news-box       the grid inside it
       .card-text      the long-form text panel
       .all            one card in a listing grid
       .addressbar_page  the breadcrumb bar (spacing only)

   Loads AFTER forms14.css and BEFORE @yield('css'), so a page that really needs
   something different can still override it.

   Also here, because both belong to "how every page behaves" rather than to one
   feature:
     * §1 the single canonical gap between the sticky header and the page body
     * §5 the 16px mobile control font that stops iOS zooming on focus
   ============================================================ */

/* ============================================================
   1. Top of the page
   ------------------------------------------------------------
   Every content page carried `style="margin-top:-12px"` on .body — a hand-tuned
   nudge from before the Part 9 sticky header existed. With the current header the
   breadcrumb bar ends up tucked under the floating nav pill (most visible on the
   login page, where the two overlap). The inline styles were removed from the
   templates; this is the one gap, applied everywhere.
   ============================================================ */
.f_body > .body{ padding-top:14px; }
@media(max-width:960px){ .f_body > .body{ padding-top:10px; } }

/* the breadcrumb already brings its own bottom margin; keep its top edge honest */
.addressbar_page{ margin-top:0; }
@media(max-width:960px){
  /* front.css adds margin-top:15px here for the old header; §1's padding covers it now */
  .addressbar_page{ margin-top:0; }
}

/* ============================================================
   2. Content panels
   ============================================================ */
.color_tag,
.box-comparis,
.card-text{
  border:1px solid rgba(18,86,74,.12);
  border-radius:20px;
  background:#fff;
  box-shadow:0 18px 42px -32px rgba(26,62,55,.42);
}
/* .card-text asks for 4rem of padding, which is a 64px inset on a phone */
.card-text{ padding:32px!important; }
.color_tag{ padding:24px; }
.box-comparis{ padding:20px 24px!important; margin:0 0 20px!important; }
.news-box{ margin-top:4px!important; padding:0!important; }

@media(max-width:640px){
  .color_tag{ padding:16px; border-radius:16px; }
  .card-text{ padding:18px!important; border-radius:16px; }
  .box-comparis{ padding:14px!important; border-radius:16px; }
}

/* long-form admin copy reads better with the storefront's own rhythm */
.color_tag p,.card-text p,.news-text{ color:var(--sd-ink); line-height:2; }
.color_tag h1,.card-text h1{ margin-top:0; }

/* ============================================================
   3. Listing cards (articles / news / journals / آموزش‌ها)
   ------------------------------------------------------------
   Same idiom as the product card: rounded plate, image on top, title bar under
   it, lift on hover. front.css draws these with a 0.5px silver border and square
   corners, and `.nwes_a` is absolutely nudged with `bottom:28px`, which overlaps
   the card below it on narrow screens.
   ============================================================ */
.div_all{ margin-bottom:22px; }
.all{
  display:flex; flex-direction:column;
  overflow:hidden;
  padding:0;
  border:1px solid rgba(18,86,74,.12);
  border-radius:18px;
  background:#fff;
  box-shadow:0 14px 30px -26px rgba(26,62,55,.5);
  transition:transform .25s ease,box-shadow .25s ease;
}
.all:hover{
  border-radius:18px;
  transform:translateY(-4px);
  box-shadow:0 20px 38px -24px rgba(26,62,55,.55);
}
.all > a{ display:block; }
.div_titr{
  order:2;
  height:auto; line-height:1.7;
  padding:13px 14px 4px;
  background:transparent;
  text-align:right;
}
.div_titr > a,.div_titr a{
  display:block;
  color:var(--sd-ink);
  font-size:14px!important; font-weight:800;
}
.div_titr > a:hover{ color:var(--sd-teal-600); }
.img1{
  order:1;
  width:100%; height:210px;
  object-fit:cover;
  border-radius:17px 17px 0 0;
  background:var(--sd-teal-050);
}
.div_text{ order:3; height:auto; margin:0; }
/* the "read more" link becomes a normal in-flow footer row instead of a floated
   element pulled 28px up out of its own card */
.nwes_a{
  order:4;
  align-self:flex-start;
  position:static; float:none; bottom:auto;
  margin:6px 14px 14px;
  padding:6px 14px;
  border:1px solid var(--sd-teal-200);
  border-radius:100px;
  background:var(--sd-teal-050);
  color:var(--sd-teal-700);
  font-size:12px; font-weight:800;
}
.nwes_a:hover{
  border-color:var(--sd-teal-400);
  background:#fff;
  box-shadow:0 6px 14px -10px rgba(10,120,99,.7);
  color:var(--sd-teal-700)!important;
}
@media(max-width:640px){
  .img1{ height:170px; }
  .div_titr > a,.div_titr a{ font-size:13px!important; }
}

/* ============================================================
   3b. Legal / long-form pages (Part 15 / P15)
   ------------------------------------------------------------
   The terms page (and anything else built the same way). Numbered clause groups
   with real <ol> markup, a table of contents, and enough line-height that a wall
   of Persian legal text is actually readable.
   ============================================================ */
.sd15-legal{ max-width:900px; margin-inline:auto; }
.sd15-legal h1{ margin:0 0 6px; }
.sd15-legal-updated{
  margin:0 0 18px;
  color:var(--sd-muted);
  font-size:12px; font-weight:700;
}
.sd15-legal-updated > i{ color:var(--sd-teal-600); }
.sd15-legal-intro{
  margin:0 0 22px;
  padding:14px 16px;
  border-inline-start:3px solid var(--sd-teal-400);
  border-radius:0 12px 12px 0;
  background:var(--sd-teal-050);
  color:var(--sd-ink);
  font-size:13px; line-height:2.1; text-align:justify;
}

.sd15-legal-toc{
  margin:0 0 26px;
  padding:16px 18px;
  border:1px solid rgba(18,86,74,.12);
  border-radius:14px;
  background:#fbfdfc;
}
.sd15-legal-toc-title{
  margin-bottom:8px;
  color:var(--sd-ink);
  font-size:13px; font-weight:900;
}
.sd15-legal-toc ol{
  margin:0; padding-inline-start:20px;
  columns:2; column-gap:26px;
}
.sd15-legal-toc li{ margin-bottom:5px; break-inside:avoid; }
.sd15-legal-toc a{
  color:var(--sd-teal-700);
  font-size:12.5px; font-weight:700; text-decoration:none;
}
.sd15-legal-toc a:hover{ text-decoration:underline; }
@media(max-width:640px){ .sd15-legal-toc ol{ columns:1; } }

.sd15-legal-section{
  /* offset for the sticky header, so a #terms-N jump does not land under it */
  scroll-margin-top:120px;
  margin:0 0 24px;
}
.sd15-legal-section > h2{
  margin:0 0 10px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(18,86,74,.1);
  color:var(--sd-ink);
  font-size:16px!important; font-weight:900; line-height:1.7;
}
.sd15-legal-list{ margin:0; padding-inline-start:20px; }
.sd15-legal-list > li{
  margin-bottom:9px;
  color:var(--sd-ink);
  font-size:13px; line-height:2.1; text-align:justify;
}
.sd15-legal-list > li::marker{ color:var(--sd-teal-600); font-weight:800; }
.sd15-legal-rich{ font-size:13px; line-height:2.1; text-align:justify; }
.sd15-legal-rich img{ max-width:100%; height:auto; }
.sd15-legal-contact{
  margin:28px 0 0;
  padding-top:16px;
  border-top:1px solid rgba(18,86,74,.1);
  color:var(--sd-muted);
  font-size:12.5px; line-height:2;
}
.sd15-legal-contact a{ color:var(--sd-teal-600); font-weight:800; text-decoration:none; }
.sd15-legal-contact a:hover{ text-decoration:underline; }

/* ============================================================
   4. Footer — supplier call-to-action (Part 15 / P20)
   ------------------------------------------------------------
   Second .order card in the middle column, under the pre-order one. It inherits
   the card look from front.css; only the stacking rhythm is set here.
   ============================================================ */
.sd15-footer-supplier{ margin-top:14px; }
.sd15-footer-supplier > p{ margin-bottom:8px; }

/* ============================================================
   5. Login page (Part 15 / P17)
   ------------------------------------------------------------
   «مرا به خاطر بسپار» and «رمز عبورم را فراموش کرده‌ام» were two stacked
   full-width rows; they belong on one line, one at each edge. The row is a grid
   child of .sd-form-grid, so `.is-full` still makes it span both columns.
   ============================================================ */
.sd15-login-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
  min-width:0;
}
.sd15-login-row.is-full{ grid-column:1 / -1; }
/* the checkbox field brings its own wrapper; stop it eating the whole row */
.sd15-login-row > .sd-form-field{ flex:0 1 auto; margin:0; }
.sd15-login-forgot{
  flex:0 0 auto;
  color:var(--sd-teal-600);
  font-size:12px; font-weight:800; text-decoration:none;
}
.sd15-login-forgot:hover{ color:var(--sd-teal-700); text-decoration:underline; }
/* the «هنوز حساب کاربری ندارید؟» line sat close enough to the ورود button to read
   as part of the action row */
.sd15-login-foot{ margin-top:26px; }

/* ============================================================
   6. Mobile: no zoom-on-focus (Part 15 / P21)
   ------------------------------------------------------------
   iOS Safari zooms the viewport whenever it focuses a control whose text renders
   below 16px — which is every control on this site (13px in the form system,
   11.5px in the search bar, 12–13px in the legacy uk-* inputs). The page then
   stays scaled, so the layout "changes size" as soon as you tap a field.

   16px is the documented threshold. The alternative — `maximum-scale=1,
   user-scalable=no` on the viewport — also blocks deliberate pinch-zoom, so it is
   not an option. The boxes keep their heights (they are set in px, not em), so
   only the glyphs grow, and on a phone that is a readability win anyway.

   `!important` because several legacy forms set font-size inline on the control.
   ============================================================ */
@media(max-width:900px){
  input[type=text],input[type=email],input[type=tel],input[type=number],
  input[type=password],input[type=search],input[type=url],input[type=date],
  select,textarea,
  .sd-form-control,
  .uk-input,.uk-select,.uk-textarea,.uk-search-input{
    font-size:16px!important;
  }
  /* the form system sizes its own controls off this variable; keep the two in step
     so hint/label proportions stay right */
  .sd-form{ --sdf-control-size:16px; }
}