/* ==========================================================================
   Serita implant cost calculator

   Deliberately NOT set here, so the theme stays in charge:
     - font-family / @font-face  -> everything inherits from the theme
     - width / max-width         -> put this inside your own .container
   The desktop result column IS sticky - on .sc-resultcol, never on .sc-result.
   See the note above that rule before moving it.

   Every rule is scoped under .serita-calc so nothing leaks into the theme.
   ========================================================================== */

.serita-calc {
  --sc-ink:      #241B33;
  --sc-muted:    #6B6280;
  --sc-line:     #DED5EE;
  --sc-hair:     #EBE4F7;
  --sc-accent:   #975DDE;
  /* Same hue, darkened. #975DDE on white is 4.26:1 — fine for borders, fills
     and large type, but under AA for small text, so error copy uses this. */
  --sc-accent-ink: #7B44C0;
  --sc-tint:     #EFE7FB;
  --sc-cta:      #C9A2F2;
  --sc-cta-hi:   #B98DEE;
  --sc-panel:    #F7F3FD;
  --sc-radius:   8px;
  --sc-control:  48px;

  direction: rtl;
  text-align: right;
  box-sizing: border-box;

  /* No max-width and no horizontal padding: the width comes from whatever
     wrapper you drop this into (your .container). Vertical padding only. */
  width: 100%;
  padding: 32px 0;

  /* font-family and font-size are inherited from the theme on purpose. */
  line-height: 1.7;
  color: var(--sc-ink);
}
.serita-calc *,
.serita-calc *::before,
.serita-calc *::after { box-sizing: inherit; }

/* Form controls do not inherit type by default in any browser - this pulls the
   theme's font down into them rather than declaring one. */
.serita-calc button,
.serita-calc input,
.serita-calc select,
.serita-calc optgroup,
.serita-calc option { font-family: inherit; }

.serita-calc :focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 2px; }

/* ---------- layout ---------- */
.sc-title { font-size: 1.6em; font-weight: 700; letter-spacing: -0.3px; margin: 0 0 24px; }
.sc-grid  { display: flex; flex-direction: column; gap: 24px; }

.sc-card {
  background: #fff;
  border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius);
  padding: 24px 20px;
}
/* The sticky column. Sticky lives HERE, not on .sc-result: this element is the
   grid item, so its containing block is the full-height grid area, which is what
   gives the card room to travel. Put sticky on the card instead and it pins
   itself to a parent of identical height and never moves. */
.sc-resultcol { /* static until the desktop breakpoint */ }

.sc-result {
  background: var(--sc-panel);
  border-radius: var(--sc-radius);
  padding: 24px 20px;
}

/* Sticky is clipped by any ancestor whose overflow is not visible, so make sure
   the component's own wrappers never do that. A theme wrapper still can - see
   the console snippet in the README for finding it. */
.serita-calc,
.serita-calc .sc-grid,
.serita-calc .sc-resultcol { overflow: visible; }
.sc-divider { height: 36px; }
.sc-h { font-size: 1em; font-weight: 700; margin: 0 0 16px; }
.sc-h--tight { margin-bottom: 6px; }
.sc-label { font-size: 0.9em; font-weight: 500; color: var(--sc-muted); margin-bottom: 10px; }
.sc-note  { font-size: 0.75em; font-weight: 400; color: var(--sc-muted); line-height: 1.7; }
.sc-lede  { font-size: 0.85em; font-weight: 400; color: var(--sc-muted); margin: 0 0 16px; }

/* ---------- progress ---------- */
.sc-steps { display: flex; gap: 8px; margin-bottom: 28px; }
.sc-step  { flex: 1; }
.sc-step__bar { height: 2px; border-radius: 2px; margin-bottom: 8px; background: var(--sc-line); }
.sc-step.is-done .sc-step__bar { background: var(--sc-accent); }
.sc-step__text { font-size: 0.75em; font-weight: 500; color: var(--sc-muted); }

/* ---------- stepper ---------- */
.sc-countrow { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.sc-stepper {
  display: flex; align-items: center; gap: 2px;
  border: 1px solid var(--sc-line); border-radius: var(--sc-radius);
  padding: 1px; height: var(--sc-control);
}
.sc-stepper__btn {
  width: 44px; height: 44px; font-size: 1.3em; font-weight: 500;
  color: var(--sc-ink); background: none; border: none;
  border-radius: var(--sc-radius); cursor: pointer;
}
.sc-stepper__btn:hover { background: var(--sc-hair); }
.sc-stepper__val {
  min-width: 56px; text-align: center;
  font-size: 1.15em; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* ---------- chips / cards / segments ---------- */
.sc-chip {
  height: var(--sc-control); padding: 0 18px;
  font-size: 0.9em; font-weight: 500; color: var(--sc-ink);
  background: #fff; border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius); cursor: pointer;
}
.sc-chip[aria-pressed="true"] { font-weight: 700; background: var(--sc-tint); border-color: var(--sc-accent); }

.sc-brands { display: flex; flex-direction: column; gap: 8px; }
.sc-brand {
  display: block; text-align: start; padding: 16px;
  background: #fff; border: 1px solid var(--sc-line);
  border-radius: var(--sc-radius); cursor: pointer;
}
.sc-brand[aria-pressed="true"] { background: var(--sc-tint); border-color: var(--sc-accent); }
.sc-brand__name  { font-size: 1em; font-weight: 700; margin-bottom: 6px; }
.sc-brand__desc  { font-size: 0.85em; font-weight: 400; color: var(--sc-muted); line-height: 1.7; }
.sc-brand__price { font-size: 0.85em; font-weight: 500; color: var(--sc-ink); margin-top: 10px; }

.sc-seg {
  display: flex; height: var(--sc-control); margin-bottom: 24px;
  border: 1px solid var(--sc-line); border-radius: var(--sc-radius); overflow: hidden;
}
.sc-seg__btn {
  flex: 1; height: 100%; font-size: 0.9em; font-weight: 500;
  color: var(--sc-muted); background: transparent; border: none;
  border-radius: 7px; cursor: pointer;
}
.sc-seg__btn[aria-pressed="true"] { font-weight: 700; color: var(--sc-ink); background: var(--sc-tint); }

/* ---------- add-ons ---------- */
.sc-addons { display: flex; flex-direction: column; }
.sc-addon {
  display: flex; align-items: center; gap: 12px;
  height: var(--sc-control); padding: 0;
  background: none; border: none; border-bottom: 1px solid var(--sc-hair);
  cursor: pointer; text-align: start; color: var(--sc-ink);
}
.sc-addon__box {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: var(--sc-radius); border: 1px solid var(--sc-line); background: #fff;
}
.sc-addon[aria-pressed="true"] .sc-addon__box {
  border-color: var(--sc-accent); background: var(--sc-accent);
  background-image:
    linear-gradient(45deg,  transparent 46%, #fff 46%, #fff 54%, transparent 54%),
    linear-gradient(-45deg, transparent 46%, #fff 46%, #fff 54%, transparent 54%);
  background-size: 12px 12px; background-position: center; background-repeat: no-repeat;
}
.sc-addon__name  { flex: 1; text-align: start; font-size: 0.9em; font-weight: 500; }
.sc-addon__price { font-size: 0.85em; font-weight: 400; color: var(--sc-muted); }

/* ---------- range ----------
   WordPress themes almost always ship a blanket `input { ... }` rule - border,
   padding, height, background, sometimes appearance. Any one of those turns a
   range input into an undraggable bar. These resets are !important because a
   theme selector like `.entry-content input[type="range"]` matches with the
   same specificity as ours and can win purely by load order. */
.sc-rangehead { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 2px; }
.sc-rangehead__val { font-size: 1em; font-weight: 700; font-variant-numeric: tabular-nums; }
/* "پیش‌فرض همین طرح" - shown until the visitor moves the slider, because each
   term has its own default deposit (۰ / ۲۰ / ۲۵ / ۳۰٪) rather than one fixed one. */
.sc-rangehead__hint { margin-right: 6px; font-size: 0.75em; font-weight: 400; color: var(--sc-muted); }

.serita-calc input[type="range"].sc-range {
  -webkit-appearance: none !important;
     -moz-appearance: none !important;
          appearance: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  outline: none;
  min-height: 0 !important;
  max-width: none !important;
  height: var(--sc-control);
  width: 100%;
  display: block;
  cursor: pointer;
  pointer-events: auto !important;
  opacity: 1 !important;
  touch-action: manipulation;      /* stop mobile browsers stealing the drag */
  position: relative;
  z-index: 1;
}
.serita-calc input[type="range"].sc-range::-webkit-slider-runnable-track {
  height: 2px; background: var(--sc-line); border-radius: 2px; border: 0;
}
.serita-calc input[type="range"].sc-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  height: 22px; width: 22px; margin-top: -10px;
  border-radius: var(--sc-radius);
  background: #fff; border: 1.5px solid var(--sc-accent);
  box-shadow: none; cursor: grab; pointer-events: auto;
}
.serita-calc input[type="range"].sc-range::-webkit-slider-thumb:active { cursor: grabbing; }
.serita-calc input[type="range"].sc-range::-moz-range-track {
  height: 2px; background: var(--sc-line); border: 0; border-radius: 2px;
}
.serita-calc input[type="range"].sc-range::-moz-range-thumb {
  height: 22px; width: 22px; border-radius: var(--sc-radius);
  background: #fff; border: 1.5px solid var(--sc-accent);
  box-shadow: none; cursor: grab;
}
.serita-calc input[type="range"].sc-range::-moz-focus-outer { border: 0; }

.sc-rangefoot {
  display: flex; justify-content: space-between;
  font-size: 0.75em; color: var(--sc-muted); margin: -6px 0 26px;
}
/* ---------- instalment terms ----------
   Each chip carries two lines: the term, and the deposit that term requires.
   The deposit is a property of the plan the visitor picks, not a value they
   set, so it is shown here rather than offered as a slider. */
.sc-months { display: flex; gap: 8px; flex-wrap: wrap; }
.sc-months .sc-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; height: auto; min-height: var(--sc-control); padding: 8px 16px; line-height: 1.3;
}
.sc-chip__term { font-size: 1em; }
.sc-chip__down { font-size: 0.75em; font-weight: 400; color: var(--sc-muted); }
.sc-chip[aria-pressed="true"] .sc-chip__down { font-weight: 500; color: var(--sc-accent-ink); }

/* Read-only echo of the selected plan's deposit — replaces the old slider. */
.sc-downinfo {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin-top: 16px; padding: 14px 16px;
  background: var(--sc-panel); border-radius: var(--sc-radius);
}
.sc-downinfo__label { font-size: 0.85em; font-weight: 500; color: var(--sc-muted); }
.sc-downinfo__val {
  font-size: 1.15em; font-weight: 700; color: var(--sc-ink);
  font-variant-numeric: tabular-nums;
}

/* ---------- result ---------- */
.sc-row { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 14px; }
.sc-row--gap { padding-bottom: 20px; }
.sc-row__label { font-size: 0.9em; font-weight: 500; color: var(--sc-muted); }
.sc-num { font-size: 1.15em; font-weight: 700; font-variant-numeric: tabular-nums; }
.sc-monthly { border-top: 1px solid var(--sc-hair); padding-top: 20px; }
.sc-monthly__val {
  display: flex; align-items: baseline; gap: 6px; white-space: nowrap;
  font-size: 2em; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.6px; font-variant-numeric: tabular-nums;
}
.sc-monthly__unit { font-size: 0.5em; font-weight: 500; color: var(--sc-muted); }

/* Amounts stay blurred until the visitor identifies themselves. */
.sc-locked .sc-num          { filter: blur(6px); user-select: none; }
.sc-locked .sc-monthly__val { filter: blur(9px); user-select: none; }
.sc-locked .sc-break__val   { filter: blur(4px); user-select: none; }
.sc-num, .sc-monthly__val, .sc-break__val { transition: filter .35s ease; }

/* ---------- gate ---------- */
.sc-gate {
  margin-top: 20px; padding-top: 20px;
  border-top: 1px solid var(--sc-hair);
  display: flex; flex-direction: column; gap: 8px;
}
.sc-gate__title { font-size: 0.9em; font-weight: 700; }

.serita-calc .sc-field,
.serita-calc .sc-select {
  width: 100%; height: var(--sc-control);
  padding: 0 12px; font-size: 0.9em;
  color: var(--sc-ink); background: #fff;
  border: 1px solid var(--sc-line); border-radius: var(--sc-radius);
  margin: 0; box-shadow: none; max-width: none;
}
.serita-calc .sc-select {
  padding: 0 12px 0 32px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background-repeat: no-repeat; background-position: left 12px center;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B6280' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.serita-calc .sc-select.is-empty { color: var(--sc-muted); }

.serita-calc .sc-btn {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 52px; padding: 0 24px;
  font-size: 1em; font-weight: 700;
  color: var(--sc-ink); background: var(--sc-cta);
  border: none; border-radius: var(--sc-radius); cursor: pointer;
  text-decoration: none; text-transform: none;
}
.serita-calc .sc-btn:hover { background: var(--sc-cta-hi); color: var(--sc-ink); }
.serita-calc .sc-btn--gate { height: var(--sc-control); min-height: var(--sc-control); margin-top: 4px; font-size: 0.9em; }
.serita-calc .sc-btn[disabled] { color: var(--sc-muted); background: #EDE7F6; cursor: not-allowed; }
.sc-hint { font-size: 0.75em; font-weight: 400; color: var(--sc-muted); line-height: 1.7; }
.sc-hint.is-error { font-weight: 500; color: var(--sc-accent-ink); }

/* ---------- breakdown ---------- */
.sc-break__toggle {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; min-height: 44px; margin-top: 16px; padding: 0;
  font-size: 0.9em; font-weight: 500;
  color: var(--sc-ink); background: none; border: none;
  border-top: 1px solid var(--sc-hair); cursor: pointer;
}
.sc-break__list { padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.sc-break__row  { display: flex; justify-content: space-between; font-size: 0.85em; color: var(--sc-muted); }
.sc-break__val  { font-variant-numeric: tabular-nums; color: var(--sc-ink); }
/* ---------- cheque due dates ----------
   Only rendered after the gate opens, so these never need the blur treatment
   that .sc-num and .sc-break__val get. Capped in height because a 48-month
   plan is 48 rows and would otherwise push the CTA off the screen. */
.sc-cheques {
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid var(--sc-hair);
}
.sc-cheques__head { font-size: 0.9em; font-weight: 700; margin-bottom: 12px; }
.sc-cheques__list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px 16px;
  max-height: 260px; overflow-y: auto;
}
.sc-cheques__row  { display: flex; justify-content: space-between; gap: 8px; font-size: 0.85em; }
.sc-cheques__n    { color: var(--sc-muted); }
.sc-cheques__date { font-variant-numeric: tabular-nums; white-space: nowrap; }

.sc-cta-wrap { margin-top: 24px; }
.sc-fineprint { font-size: 0.75em; color: var(--sc-muted); line-height: 1.7; margin: 20px 0 0; }

/* ---------- mobile summary bar ----------
   Was position:sticky and did not stick, for the same overflow reason as
   .sc-result. It now sits in normal flow at the end of the component. */
.sc-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 0 0; margin-top: 24px;
  border-top: 1px solid var(--sc-line);
}
.sc-bar__label { font-size: 0.75em; font-weight: 500; color: var(--sc-muted); }
.sc-bar__val   { font-size: 1.15em; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.serita-calc.sc-locked .sc-bar__val { filter: blur(6px); user-select: none; }
.serita-calc .sc-bar__btn {
  height: 44px; padding: 0 18px; flex-shrink: 0;
  font-size: 0.9em; font-weight: 700; color: var(--sc-ink);
  background: var(--sc-cta); border: none; border-radius: var(--sc-radius); cursor: pointer;
}
.serita-calc .sc-bar__btn:hover { background: var(--sc-cta-hi); }

.sc-hidden { display: none !important; }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  .serita-calc { padding: 48px 0; }
  .sc-title  { font-size: 2em; margin-bottom: 40px; }
  .sc-grid   { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 40px; align-items: start; }
  .sc-card   { padding: 40px; }
  .sc-result { padding: 28px; }

  /* align-self:start keeps the column from stretching to the row height, which
     would leave it nothing to slide against. top: must be set - sticky with no
     inset behaves exactly like static. */
  .sc-resultcol {
    position: -webkit-sticky;
    position: sticky;
    top: 32px;
    align-self: start;
  }
  .sc-divider { height: 48px; }
  .sc-brands { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 12px; }
  .sc-monthly__val { font-size: 2.3em; }
  .sc-bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .sc-num, .sc-monthly__val, .sc-break__val { transition: none; }
}