/* Arta Electric Stabilizer Calculator — design-matched stylesheet
 * Reproduces the React (Tailwind) interface using scoped `.ac-` classes.
 *
 * Font and color tokens are aligned with the "New Arta Electric" theme:
 *   font  : IRANYekanX (weights 500 / 800 / 950)
 *   brand : primary #ee4562, secondary #ef9848
 *   scale : theme neutral-light / neutral-mix, green, red, yellow.
 */

/* Font faces copied from the Arta theme (assets/fonts/IRANYekanX-*). */
@font-face {
  font-family: "IRANYekanX";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/woff2/IRANYekanX-500.woff2") format("woff2"),
       url("fonts/woff/IRANYekanX-500.woff") format("woff"),
       url("fonts/ttf/IRANYekanX-500.ttf") format("truetype");
}
@font-face {
  font-family: "IRANYekanX";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/woff2/IRANYekanX-800.woff2") format("woff2"),
       url("fonts/woff/IRANYekanX-800.woff") format("woff"),
       url("fonts/ttf/IRANYekanX-800.ttf") format("truetype");
}
@font-face {
  font-family: "IRANYekanX";
  font-style: normal;
  font-weight: 950;
  font-display: swap;
  src: url("fonts/woff2/IRANYekanX-950.woff2") format("woff2"),
       url("fonts/woff/IRANYekanX-950.woff") format("woff"),
       url("fonts/ttf/IRANYekanX-950.ttf") format("truetype");
}

.arta-calc,
.arta-calc * { box-sizing: border-box; }

.arta-calc {
  overflow-x: clip; /* محافظ: هیچ عنصری از ویجت نباید اسکرول افقی صفحه بسازد */
  /* Neutral scale — theme neutral-light (10/20/30/40/50) + neutral-mix (90/200/300/500/700/800). */
  --slate-50: #fafbfc; --slate-100: #f4f5f7; --slate-200: #ebecf0;
  --slate-300: #dfe1e6; --slate-400: #8993a4; --slate-500: #6b778c;
  --slate-600: #5e6c84; --slate-700: #42526e; --slate-800: #253858; --slate-900: #172b4d;
  /* Brand scale — theme primary (#ee4562 / base #ef3f40 scale). */
  --indigo-50: #fff2f0; --indigo-100: #ffe9e6; --indigo-200: #ffc3bd; --indigo-500: #fc6f6a;
  --indigo-600: #ee4562; --indigo-700: #c92a30;
  /* Success scale — theme green. */
  --emerald-50: #f6ffed; --emerald-300: #b7eb8f; --emerald-600: #52c41a; --emerald-700: #389e0d; --emerald-800: #237804;
  /* Danger scale — theme red. */
  --rose-50: #fff1f0; --rose-200: #ffccc7; --rose-400: #ff7875; --rose-700: #cf1322; --rose-800: #a8071a;
  /* Warning scale — theme yellow. */
  --amber-50: #fffbe6; --amber-200: #ffe58f; --amber-700: #d48806; --amber-800: #ad6800;

  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px;
  color: var(--slate-800);
  font-family: "IRANYekanX", "Segoe UI", Tahoma, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}

.arta-calc button { font-family: inherit; cursor: pointer; }
.arta-calc a { text-decoration: none; }
.arta-calc .no-print { }

/* ---------------------------------------------------------------- header */
.ac-header { margin: 0 -16px 20px; border-bottom: 1px solid var(--slate-200); background: #fff; }
/* محافظ در برابر استایل‌های سراسری قالب (مثلاً header/nav چسبان یا ثابت) */
.arta-calc .ac-header, .arta-calc .ac-tabs, .arta-calc .ac-main { position: static !important; top: auto !important; transform: none !important; z-index: auto !important; box-shadow: none; }
.ac-header__top { display: flex; align-items: center; gap: 12px; max-width: 1280px; margin: 0 auto; padding: 12px 16px; }
.ac-brand { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.ac-logo { height: 64px; width: auto; max-width: 300px; object-fit: contain; }
.ac-brandmark { color: var(--indigo-600); font-weight: 950; font-size: 18px; white-space: nowrap; }
.ac-brand .ac-title { margin: 0; padding: 0; border: 0; font-family: inherit; font-size: 17px; font-weight: 950; line-height: 1.6; color: var(--slate-900); }
.ac-header__actions { display: flex; align-items: center; gap: 8px; }
.ac-tabs { display: flex; gap: 4px; max-width: 1280px; margin: 0 auto; padding: 0 16px 8px; }
.ac-tab { border: 0; border-radius: 8px; background: var(--slate-100); color: var(--slate-600); padding: 6px 12px; font-size: 12px; font-weight: 800; }
.ac-tab.active { background: var(--indigo-600); color: #fff; }
.ac-tab:hover:not(.active) { background: var(--slate-200); }

/* ---------------------------------------------------------------- layout */
.ac-main { padding-bottom: 24px; }
.ac-grid { display: grid; gap: 16px; }
@media (min-width: 1024px) {
  .ac-grid { grid-template-columns: 1.15fr 1fr; align-items: start; }
  .ac-col-results { position: sticky; top: var(--ac-sticky-top, 7rem); max-height: calc(100vh - var(--ac-sticky-top, 7rem) - 16px); overflow-y: auto; padding-left: 4px; }
}
.ac-col-inputs, .ac-col-results { min-width: 0; display: grid; gap: 16px; align-content: start; }

/* ------------------------------------------------------------------ card */
.ac-card { min-width: 0; overflow: visible; border: 1px solid var(--slate-200); border-radius: 16px; background: #fff; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.ac-card__head { display: flex; align-items: flex-start; justify-content: flex-start; gap: 12px; border-bottom: 1px solid var(--slate-100); padding: 12px 16px; }
.ac-card__head > div { flex: 1; min-width: 0; text-align: start; }
.ac-card__head > .ac-btn { margin-inline-start: auto; flex-shrink: 0; align-self: center; }
.ac-card__head h2 { margin: 0; font-size: 15px; font-weight: 800; color: var(--slate-800); }
.ac-card__head p { margin: 2px 0 0; font-size: 12px; color: var(--slate-500); font-weight: 500; }
/* هشدار بخش «لوازم و بارهای مصرفی» */
.ac-card__head p.ac-loads-warn { margin: 6px 0 2px; padding: 4px 9px; border-inline-start: 3px solid var(--rose-400); border-radius: 6px; background: var(--rose-50); color: var(--rose-700); font-size: 12px; font-weight: 700; line-height: 1.8; }
.ac-card__icon { flex-shrink: 0; font-size: 20px; line-height: 1.4; }
.ac-card > :not(.ac-card__head) { padding: 16px; }
.ac-card > ul, .ac-card > p { padding: 16px; margin: 0; }

/* --------------------------------------------------------------- buttons */
.ac-btn { border: 0; border-radius: 12px; padding: 9px 14px; font-size: 12px; font-weight: 800; transition: background .15s, border-color .15s, color .15s; }
.ac-btn--grey { background: #a5adba; color: #fff; }
.ac-btn--grey:hover { background: #97a0af; }
.ac-btn--ghost { border: 1px solid var(--slate-300); background: #fff; color: var(--slate-700); }
.ac-btn--ghost:hover { background: var(--slate-50); }
.ac-btn--primary { background: var(--indigo-600); color: #fff; box-shadow: 0 4px 10px rgba(238,69,98,.25); }
.ac-btn--primary:hover { background: var(--indigo-700); }
.ac-btn--dashed { border: 1px solid var(--emerald-300); background: var(--emerald-50); color: var(--emerald-700); border-radius: 8px; padding: 6px 10px; white-space: nowrap; }
.ac-btn--dashed:hover { border-color: var(--emerald-600); background: #eafbdc; color: var(--emerald-800); }
.ac-btn--sm { padding: 6px 10px; }
.ac-btn--affordable { width: 100%; border: 1px dashed var(--indigo-500); background: var(--indigo-50); color: var(--indigo-700); border-radius: 12px; padding: 10px; }
.ac-btn--affordable.active { background: var(--indigo-600); color: #fff; border-style: solid; }

/* ------------------------------------------------------------- quick start */
.ac-scenarios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ac-scenario { position: relative; border: 1px solid var(--slate-200); border-radius: 12px; background: var(--slate-50); color: var(--slate-700); padding: 10px 8px; font-size: 12px; font-weight: 800; text-align: center; }
.ac-scenario:hover { border-color: var(--indigo-500); background: var(--indigo-50); color: var(--indigo-700); }
.ac-scenario.selected { border-color: var(--indigo-500); background: var(--indigo-50); color: var(--indigo-700); box-shadow: 0 0 0 2px var(--indigo-100); }
.ac-scenario__icon { display: block; font-size: 22px; margin-bottom: 2px; }
.ac-check { position: absolute; top: 4px; left: 8px; color: var(--indigo-600); font-weight: 950; }

/* --------------------------------------------------------------- network */
.ac-field { display: block; margin-bottom: 14px; }
.ac-label { display: flex; align-items: center; gap: 4px; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--slate-600); }

/* نمایش tooltip با کلیک (موبایل و دسکتاپ) — کلاس open روی ac-tip */
.ac-tip.open .ac-tip__text { opacity: 1; visibility: visible; transform: translateY(0); }
.ac-tip.open .ac-tip__icon { background: var(--indigo-600); color: #fff; }

/* --------------------------------------------------------------- tooltip */
.ac-tip { position: relative; display: inline-flex; align-items: center; z-index: 1; }
.ac-tip:focus-within { z-index: 60; }
.ac-tip__icon { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 0; border-radius: 999px; background: var(--slate-200); color: var(--slate-600); font-family: inherit; font-size: 12px; font-weight: 800; line-height: 1; cursor: pointer; padding: 0; outline: 0; }
.ac-tip:hover .ac-tip__icon,
.ac-tip:focus-within .ac-tip__icon { background: var(--indigo-100); color: var(--indigo-700); }
.ac-tip__text { position: absolute; bottom: calc(100% + 8px); inset-inline-start: 0; z-index: 60; width: max-content; max-width: min(260px, calc(100vw - 40px)); padding: 8px 10px; border-radius: 10px; background: var(--slate-800); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.8; text-align: right; white-space: normal; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s; box-shadow: 0 8px 20px rgba(15,23,42,.25); pointer-events: none; }
/* موبایل: tooltip به‌صورت توستِ پایین صفحه — همیشه کامل داخل کادر */
@media (max-width: 640px) {
  .ac-tip.open { position: relative; z-index: 999; }
  .ac-tip.open .ac-tip__text {
    position: fixed;
    left: 12px; right: 12px; top: auto; bottom: 12px;
    width: auto; max-width: none;
    transform: translateY(4px);
    line-height: 2;
    z-index: 999;
  }
  .ac-tip.open .ac-tip__text::after { display: none; }
}
.ac-tip__text::after { content: ""; position: absolute; top: 100%; inset-inline-start: 2px; border: 6px solid transparent; border-top-color: var(--slate-800); }
/* جای‌گذاری هوشمند (دسکتاپ): JS موقعیت افقی و فلش را طوری تنظیم می‌کند که راهنما داخل کادر بماند. */
.ac-tip__text.is-placed::after { inset-inline-start: auto; left: var(--ac-arrow-x, 8px); }
.ac-tip__text.is-below { top: calc(100% + 8px); bottom: auto; transform: translateY(-4px); }
.ac-tip__text.is-below::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--slate-800); }
.ac-tip.hover .ac-tip__text { opacity: 1; visibility: visible; transform: translateY(0); }
/* راهنمای بسته هیچ فضایی نمی‌گیرد؛ وگرنه در صفحه‌های باریک (زیر ۵۰۰px) اسکرول افقی می‌سازد.
 * is-measuring فقط برای اندازه‌گیری لحظه‌ای در placeTip است. */
.ac-tip:not(.open):not(.hover) .ac-tip__text:not(.is-measuring) { display: none; }
.ac-load,
.ac-load__fields,
.ac-label { overflow: visible; }
.ac-segmented { display: flex; width: 100%; gap: 4px; border-radius: 12px; background: var(--slate-100); padding: 4px; }
.ac-segmented button { flex: 1; border: 0; border-radius: 8px; background: transparent; color: var(--slate-500); padding: 8px; font-size: 13px; font-weight: 700; }
.ac-segmented button.active { background: #fff; color: var(--indigo-700); box-shadow: 0 1px 2px rgba(15,23,42,.08); }
.ac-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-chip { border: 1px solid var(--slate-200); border-radius: 10px; background: #fff; color: var(--slate-600); padding: 6px 10px; font-size: 12px; font-weight: 700; }
.ac-chip:hover { border-color: var(--indigo-500); }
.ac-chip.active { border-color: var(--indigo-600); background: var(--indigo-600); color: #fff; }
.ac-pill { border: 1px solid var(--slate-200); border-radius: 999px; background: #fff; color: var(--slate-600); padding: 6px 12px; font-size: 12px; font-weight: 700; }
.ac-pill:hover { border-color: var(--indigo-500); }
.ac-pill.active { border-color: var(--indigo-600); background: var(--indigo-600); color: #fff; }
.ac-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ac-mt { margin-top: 4px; }
.ac-numwrap { position: relative; display: block; }
.ac-num { width: 100%; border: 1px solid var(--slate-300); border-radius: 12px; background: #fff; padding: 9px 12px; font-size: 14px; font-weight: 500; color: var(--slate-800); outline: 0; text-align: left; }
.ac-numwrap--suffix .ac-num { padding-left: 46px; }
.ac-num:focus { border-color: var(--indigo-500); box-shadow: 0 0 0 2px var(--indigo-100); }
.ac-suffix { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--slate-400); font-size: 12px; font-weight: 500; pointer-events: none; }
.ac-hint { margin: 8px 0 0; font-size: 12px; color: var(--slate-500); }
.ac-hint b { color: var(--slate-700); }

/* ----------------------------------------------------------------- loads */
.ac-search { width: 100%; border: 1px solid var(--slate-300); border-radius: 12px; padding: 9px 12px; font-size: 14px; color: var(--slate-800); outline: 0; }
.ac-search:focus { border-color: var(--indigo-500); box-shadow: 0 0 0 2px var(--indigo-100); }
.ac-catrow { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.ac-appbox { max-height: 230px; overflow-y: auto; border: 1px solid var(--slate-100); border-radius: 12px; background: var(--slate-50); padding: 8px; }
.ac-appchips { display: flex; flex-wrap: wrap; gap: 6px; }
.ac-app { border: 1px solid var(--slate-200); border-radius: 8px; background: #fff; color: var(--slate-600); padding: 6px 10px; font-size: 12px; font-weight: 700; }
.ac-app:hover { border-color: var(--indigo-500); color: var(--indigo-700); }
.ac-app.active { border-color: var(--emerald-300); background: var(--emerald-50); color: var(--emerald-700); }
.ac-empty-inline { padding: 10px; font-size: 12px; color: var(--slate-400); }
.ac-empty { margin-top: 16px; border: 1px dashed var(--slate-300); border-radius: 12px; padding: 24px; text-align: center; font-size: 14px; color: var(--slate-400); }
.ac-loads { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 14px; container-type: inline-size; }
.ac-load { border: 1px solid var(--slate-200); border-radius: 12px; background: #fff; padding: 10px; }
.ac-load.disabled { border-color: var(--slate-100); opacity: .55; }
.ac-load__head { display: flex; align-items: center; gap: 8px; }
.ac-cb { width: 16px; height: 16px; accent-color: var(--indigo-600); flex: 0 0 auto; }
.ac-loadname { flex: 1; min-width: 0; border: 1px solid transparent; border-radius: 6px; background: transparent; padding: 4px; font-size: 13px; font-weight: 800; color: var(--slate-700); outline: 0; }
.ac-loadname:hover { border-color: var(--slate-200); }
.ac-loadname:focus { border-color: var(--indigo-500); }
.ac-qty { display: flex; align-items: center; gap: 2px; border-radius: 8px; background: var(--slate-100); padding: 2px; }
.ac-qty button { width: 24px; height: 24px; border: 0; border-radius: 6px; background: #fff; color: var(--slate-600); font-size: 14px; font-weight: 800; box-shadow: 0 1px 1px rgba(15,23,42,.08); }
.ac-qty span { width: 24px; text-align: center; font-size: 12px; font-weight: 800; color: var(--slate-700); }
.ac-loadwatt { display: block; flex: 0 0 auto; min-width: 72px; text-align: end; white-space: nowrap; font-size: 12px; font-weight: 800; color: var(--slate-500); }
.ac-loadbtns { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.ac-iconbtn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 8px; color: #fff; font-size: 13px; box-shadow: 0 1px 2px rgba(15,23,42,.15); }
.ac-iconbtn--green { background: var(--emerald-600); }
.ac-iconbtn--green:hover { background: var(--emerald-700); }
.ac-iconbtn--green.active { background: var(--emerald-700); }
.ac-iconbtn--red { background: #ff4d4f; }
.ac-iconbtn--red:hover { background: #d9363e; }
.ac-load__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; border-top: 1px solid var(--slate-100); padding-top: 10px; }
.ac-sub { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--slate-400); }

/* --------------------------------------------------------------- actions */
.ac-formactions { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.ac-formactions .ac-btn--primary { padding: 12px; font-size: 14px; }
.ac-formactions .ac-btn--ghost { padding: 12px 16px; font-size: 14px; }

/* --------------------------------------------------------------- results */
.ac-hero { overflow: hidden; border-radius: 16px; background: var(--indigo-600); /* یکدست، رنگ برند (#ee4562) */ padding: 20px; color: #fff; box-shadow: 0 10px 22px rgba(238,69,98,.22); }
.ac-hero__top { display: flex; align-items: center; justify-content: space-between; }
.ac-hero__top > span:first-child { font-size: 12px; font-weight: 800; color: rgba(255,255,255,.92); }
.ac-hero__phase { border-radius: 999px; background: rgba(255,255,255,.15); padding: 2px 10px; font-size: 12px; font-weight: 800; }
.ac-hero__value { display: flex; align-items: flex-end; gap: 8px; margin-top: 8px; }
.ac-hero__value span { font-size: 44px; font-weight: 950; letter-spacing: -1px; }
.ac-hero__value small { margin-bottom: 8px; font-size: 16px; font-weight: 800; color: rgba(255,255,255,.92); }
.ac-hero__line { margin: 6px 0 0; font-size: 13px; color: #fff; }
.ac-hero__line b { color: #fff; }
.ac-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; text-align: center; }
.ac-metrics > div { border-radius: 12px; background: rgba(255,255,255,.14); padding: 8px; }
.ac-metrics small { display: block; font-size: 12px; color: rgba(255,255,255,.92); }
.ac-metrics b { font-size: 13px; font-weight: 700; }
.ac-metrics em { display: block; font-style: normal; font-size: 12px; color: rgba(255,255,255,.92); }
.ac-metrics > div.hl { background: rgba(255,255,255,.26); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85); }
.ac-hero__note { margin: 12px 0 0; border-radius: 12px; background: rgba(0,0,0,.16); padding: 10px; font-size: 12px; color: #fff; }
.ac-hero__note b { color: #fff; }
.ac-hero__foot { margin: 8px 0 0; font-size: 12px; color: rgba(255,255,255,.92); }
.ac-center { text-align: center; font-size: 14px; color: var(--slate-400); }

/* -------------------------------------------------------------- products */
.ac-status { margin-bottom: 10px; }
.ac-status__note { margin: 6px 0 0; font-size: 12px; color: var(--slate-500); }
.ac-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; background: var(--slate-100); color: var(--slate-600); padding: 2px 8px; font-size: 12px; font-weight: 800; }
.ac-badge--green { background: var(--emerald-50); color: var(--emerald-700); }
.ac-badge--amber { background: var(--amber-50); color: var(--amber-700); }
.ac-badge--red { background: var(--rose-50); color: var(--rose-700); }
.ac-badge--indigo { background: var(--indigo-50); color: var(--indigo-700); }
.ac-product { display: flex; align-items: stretch; gap: 12px; margin-top: 12px; border: 1px solid var(--slate-200); border-radius: 12px; background: #fff; padding: 14px; color: inherit; }
.ac-product--best { border-color: var(--emerald-300); background: var(--emerald-50); }
.ac-product__media { flex: 0 0 84px; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--slate-50); overflow: hidden; font-size: 28px; }
.ac-product__media img { width: 100%; height: 100%; object-fit: contain; }
.ac-product__body { flex: 1; min-width: 0; }
.ac-product__body h4 { margin: 6px 0; font-size: 14px; font-weight: 700; color: var(--slate-800); line-height: 1.6; }
.ac-product__badges { display: flex; flex-wrap: wrap; gap: 4px; }
.ac-reasons { margin: 8px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--emerald-700); }
.ac-flags { margin: 4px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--amber-800); }
.ac-product__price { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; text-align: left; }
.ac-product__price b { font-size: 15px; font-weight: 950; color: var(--slate-800); }
.ac-product__price small { font-size: 12px; color: var(--slate-500); }
.ac-strike { font-size: 12px; color: var(--slate-400); text-decoration: line-through; }
.ac-nomatch { border: 1px dashed var(--slate-300); border-radius: 12px; background: var(--slate-50); padding: 14px; font-size: 13px; color: var(--slate-600); }
.ac-nomatch small { color: var(--slate-500); }
.ac-affordable-wrap { margin-top: 12px; }
.ac-affordable-body, .ac-alt-body { margin-top: 10px; border: 1px solid #f9d6b6; border-radius: 12px; background: #fffaf0; padding: 10px; }
.ac-alt-body { border-color: var(--slate-200); background: var(--slate-50); }
.ac-affordable-body .ac-sub, .ac-alt-body .ac-sub { font-size: 12px; font-weight: 800; color: #603d1d; }
.ac-alt-body .ac-sub { color: var(--slate-600); }

/* گزینه‌های پیشنهاد (تنظیمات ماشین‌حساب) */
.ac-optcard { margin-top: 12px; }
.ac-opt { display: flex; align-items: flex-start; gap: 8px; padding: 7px 2px; font-size: 12.5px; font-weight: 700; color: var(--slate-700); cursor: pointer; }
.ac-opt input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--emerald-600, #059669); flex: none; cursor: pointer; }
.ac-opt span { display: inline-flex; align-items: center; gap: 4px; }
.ac-opt .ac-tip { margin-right: 2px; }

/* کارت توسعه‌ی آتی (یک پله بالاتر) */
.ac-future-body { border-color: var(--emerald-200, #a7f3d0); background: #f2fbf6; }
.ac-future-body .ac-sub { color: #065f46; }
.ac-affordable-item + .ac-affordable-item { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--slate-200); }
.ac-affordable-item .ac-sub { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 800; color: #603d1d; }
.ac-cta__body { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ac-cta__body p { margin: 0; flex: 1 1 220px; font-size: 12px; color: var(--slate-600); }
.ac-cta__btn { display: inline-block; text-align: center; padding: 11px 18px; font-size: 13px; }
.ac-disclaimer { margin: 12px 0 0; border-radius: 10px; background: var(--slate-50); padding: 10px; font-size: 12px; color: var(--slate-500); }

/* -------------------------------------------------------------- warnings */
.ac-warnings { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ac-card > .ac-warnings { padding: 16px; }
.ac-warn { border: 1px solid var(--slate-200); border-radius: 12px; padding: 10px; font-size: 12px; line-height: 1.9; }
.ac-warn--err { border-color: var(--rose-200); background: var(--rose-50); color: var(--rose-800); }
.ac-warn--warn { border-color: var(--amber-200); background: var(--amber-50); color: var(--amber-800); }
.ac-warn--info { border-color: var(--slate-200); background: var(--slate-50); color: var(--slate-600); }
.ac-warn b { margin-left: 4px; }

/* ----------------------------------------------------------------- techs */
.ac-techs { display: grid; gap: 10px; }
.ac-tech { border: 1px solid var(--slate-200); border-radius: 12px; padding: 12px; }
.ac-tech.suggested { border-color: var(--emerald-300); background: var(--emerald-50); }
.ac-tech__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ac-tech__head h4 { margin: 0; font-size: 13px; font-weight: 800; color: var(--slate-800); }
.ac-tech__cols { display: grid; gap: 4px; margin-top: 8px; }
@media (min-width: 640px) { .ac-tech__cols { grid-template-columns: 1fr 1fr; } }
.ac-tech__cols ul { margin: 0; padding: 0; list-style: none; }
.ac-tech__cols li { font-size: 12px; line-height: 1.9; }
.ac-tech__cols li.pro { color: var(--emerald-700); }
.ac-tech__cols li.con { color: var(--rose-700); }

/* ----------------------------------------------------------------- table */
.ac-tablewrap { overflow-x: auto; }
.ac-table { width: 100%; border-collapse: collapse; text-align: right; font-size: 12px; }
.ac-table th { border-bottom: 1px solid var(--slate-200); padding: 8px 4px; font-weight: 800; color: var(--slate-500); }
.ac-table td { border-bottom: 1px solid var(--slate-100); padding: 6px 4px; color: var(--slate-600); }
.ac-table .ac-strong { font-weight: 700; color: var(--slate-800); }
.ac-table tfoot td { padding: 10px 4px; font-weight: 800; color: var(--slate-800); }

/* ----------------------------------------------------------------- guide */
.ac-mistakes, .ac-checklist { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ac-card > .ac-mistakes, .ac-card > .ac-checklist { padding: 16px; }
@media (min-width: 640px) { .ac-mistakes, .ac-checklist { grid-template-columns: 1fr 1fr; } }
.ac-mistakes li { display: flex; gap: 8px; border-radius: 12px; background: var(--rose-50); padding: 8px; font-size: 12px; color: var(--rose-800); }
.ac-mistakes b { color: var(--rose-400); }
.ac-checklist label { display: flex; align-items: center; gap: 8px; border: 1px solid var(--slate-200); border-radius: 12px; padding: 8px; font-size: 12px; color: var(--slate-600); cursor: pointer; }
.ac-checklist label:hover { border-color: var(--slate-300); }
.ac-checklist label.done { border-color: var(--emerald-300); background: var(--emerald-50); color: var(--emerald-800); text-decoration: line-through; }
.ac-checklist input { width: 16px; height: 16px; accent-color: var(--emerald-600); }
.ac-faq { display: grid; gap: 8px; }
.ac-faq__item { overflow: hidden; border: 1px solid var(--slate-200); border-radius: 12px; }
.ac-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: var(--slate-50); padding: 10px 12px; text-align: right; font-size: 13px; font-weight: 800; color: var(--slate-700); }
.ac-faq__q:hover { background: var(--slate-100); }
.ac-faq__q span { color: var(--slate-400); }
.ac-faq__a { margin: 0; border-top: 1px solid var(--slate-100); background: #fff; padding: 12px; font-size: 12px; line-height: 2; color: var(--slate-600); }

/* ---------------------------------------------------------------- footer */
.ac-footer { margin-top: 24px; border: 1px solid var(--slate-200); border-radius: 12px; background: #fff; padding: 12px; text-align: center; font-size: 12px; line-height: 2; color: var(--slate-500); }

/* ----------------------------------------------------------- responsive */
@media (max-width: 640px) {
  .ac-header__actions { display: none; }
  .ac-brand .ac-title { font-size: 14px; }
  .ac-logo { height: 48px; }
  .ac-hero__value span { font-size: 32px; }
  .ac-loadwatt { display: block; width: auto; flex: 0 0 auto; text-align: end; white-space: nowrap; }
  .ac-load__head {
    flex-wrap: wrap;
    align-items: center;
    row-gap: 8px;
    column-gap: 8px;
  }
  .ac-cb { flex: 0 0 16px; align-self: center; }
  .ac-loadname {
    flex: 1 1 calc(100% - 28px);
    min-width: 0;
    max-width: 100%;
    font-size: 12px;
    line-height: 1.45;
  }
  .ac-badge { flex: 0 0 auto; font-size: 12px; padding: 2px 6px; }
  .ac-qty { flex: 0 0 auto; }
  .ac-loadbtns { flex: 0 0 auto; margin-inline-start: auto; }
  .ac-iconbtn { width: 28px; height: 28px; font-size: 12px; }
  .ac-product { flex-direction: column; }
  .ac-product__price { align-items: flex-start; }
}
@media (max-width: 520px) {
  .ac-grid2, .ac-load__fields { grid-template-columns: 1fr; }
  .ac-scenarios { grid-template-columns: 1fr 1fr; }
  .ac-card__head { flex-wrap: wrap; }
  .ac-card__head > .ac-btn { margin-inline-start: auto; width: auto; }
  /* متن سربرگ کل عرض را بگیرد و دکمه (مثلاً «بار دلخواه») به خط بعد برود */
  .ac-card__head > div { flex: 1 1 calc(100% - 40px); }
}

/* ---------------------------------------------------------------- print */
@media print {
  .no-print { display: none !important; }
  .ac-print-only { display: block !important; }
  .arta-calc, .arta-calc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ac-header, .ac-col-inputs, .ac-tabs, .ac-cta, .ac-guide, .ac-status { display: none !important; }
  .ac-col-results { display: block; }
  .ac-col-results > * + * { margin-top: 12px; }
  .ac-footer { margin-top: 12px; }
  .ac-product { text-decoration: none; }
  html.arta-printing body { background: #fff !important; margin: 0 !important; padding: 0 !important; }
  @page { margin: 12mm; }
  .arta-calc { max-width: none; padding: 0; }
  .ac-col-results { position: static; max-height: none; overflow: visible; }
  .ac-grid { display: block; }
  .ac-card, .ac-hero, .ac-product { break-inside: avoid; box-shadow: none; }
  .ac-tip__text { display: none !important; }
}

/* ------------------------------------------------------------- skeleton
 * تا اجرای calculator.js نمایش داده می‌شود (خروجی سرور). */
.ac-skeleton { min-height: 640px; padding: 16px 0; }
.ac-skeleton__bar { height: 56px; border-radius: 12px; background: var(--slate-100); margin-bottom: 16px; }
.ac-skeleton__grid { display: grid; gap: 16px; }
@media (min-width: 1024px) { .ac-skeleton__grid { grid-template-columns: 1.15fr 1fr; } }
.ac-skeleton__card { height: 420px; border-radius: 16px; background: var(--slate-100); }
.ac-skeleton__card--hero { height: 260px; background: #f7b3c0; }
.ac-skeleton__bar, .ac-skeleton__card { animation: ac-pulse 1.4s ease-in-out infinite; }
.ac-skeleton__text { margin: 14px 0 0; text-align: center; font-size: 13px; color: var(--slate-500); }
@keyframes ac-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .ac-skeleton__bar, .ac-skeleton__card { animation: none; } }

/* ردیف هشدار + دکمه‌ی «بار دلخواه» در بخش لوازم: هم‌تراز و در یک سطر */
.ac-loads-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.ac-loads-row .ac-loads-warn { flex: 1 1 auto; min-width: 0; margin: 0 !important; }
.ac-loads-row .ac-btn { flex: 0 0 auto; align-self: center; }
@media (max-width: 520px) { .ac-loads-row { flex-wrap: wrap; } .ac-loads-row .ac-btn { margin-inline-start: auto; } }

/* ---- 3.7.3: چیدمان بر اساس عرض واقعی افزونه (نه عرض صفحه) ----
 * در قالب‌هایی که محتوای صفحه باریک است، ستون‌بندی دوتایی و ردیف دستگاه‌ها
 * از کادر بیرون می‌زد. */
.arta-calc { container-type: inline-size; container-name: artacalc; }
.ac-break { display: none; }
@container artacalc (max-width: 760px) {
  .ac-grid, .ac-skeleton__grid { grid-template-columns: minmax(0, 1fr); }
  .ac-col-results { position: static; max-height: none; overflow: visible; padding-left: 0; }
}
@container (max-width: 480px) {
  .ac-load__head { flex-wrap: wrap; row-gap: 8px; column-gap: 8px; }
  .ac-cb { flex: 0 0 16px; }
  .ac-loadname { flex: 1 1 0; min-width: 0; font-size: 12px; line-height: 1.45; }
  .ac-break { display: block; flex: 0 0 100%; height: 0; }
  .ac-load__head .ac-badge { font-size: 12px; padding: 2px 6px; }
  .ac-loadwatt { min-width: 0; }
  .ac-loadbtns { margin-inline-start: auto; }
  .ac-iconbtn { width: 28px; height: 28px; font-size: 12px; }
}

/* ---- 3.8.0: آیکون‌های SVG ---- */
.arta-calc .ac-ic { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ac-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: var(--indigo-50); color: var(--indigo-600); font-size: 20px; line-height: 1; }
.ac-scenario__icon { color: var(--indigo-600); line-height: 1; }
.ac-scenario__icon .ac-ic { width: 26px; height: 26px; }
.ac-check .ac-ic { width: 14px; height: 14px; stroke-width: 3; }
.ac-iconbtn .ac-ic { width: 16px; height: 16px; stroke-width: 2.4; }
.ac-reasons li, .ac-flags li { display: flex; align-items: flex-start; gap: 4px; }
.ac-reasons .ac-ic, .ac-flags .ac-ic { margin-top: 0.25em; width: 1.05em; height: 1.05em; }
.ac-warn b { display: inline-flex; vertical-align: -0.2em; }
.ac-warn--err b { color: var(--rose-600, #e11d48); }
.ac-warn--warn b { color: var(--amber-600, #d97706); }
.ac-warn--info b { color: var(--indigo-600); }
.ac-product__media > span { color: var(--slate-300, #cbd5e1); font-size: 36px; }
.ac-badge .ac-ic { width: 1em; height: 1em; vertical-align: -0.15em; }

/* ---- 3.8.0: بدون اسکرول تودرتو در موبایل ---- */
.ac-appmore { display: none; }
.ac-appmore[hidden] { display: none !important; }
@media (max-width: 640px) {
  .ac-appbox { max-height: none; overflow: visible; }
  .ac-appbox--collapsed { max-height: 168px; overflow: hidden; position: relative; }
  .ac-appbox--collapsed::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40px; background: linear-gradient(to bottom, rgba(250,251,252,0), var(--slate-50)); pointer-events: none; }
  .ac-appmore { display: block; width: 100%; margin-top: 6px; border: 1px dashed var(--slate-300); border-radius: 10px; background: #fff; color: var(--indigo-600); padding: 7px; font-size: 12px; font-weight: 800; }
}

/* ---- 3.8.1: حداقل اندازه‌ی متن ۱۲px (گوگل: Legible font sizes) ---- */
.ac-metrics > div:only-child { grid-column: 1 / -1; }
@container artacalc (max-width: 480px) {
  .ac-metrics { gap: 6px; }
  .ac-metrics > div { padding: 8px 4px; }
  .ac-metrics small { line-height: 1.5; }
}

/* ---- 3.8.3: چاپ / PDF ---- */
.ac-print-only { display: none; }
.ac-printbar { display: flex; justify-content: center; }
.ac-printbar .ac-btn { width: 100%; justify-content: center; }
.ac-print-head { border-bottom: 2px solid var(--indigo-600); padding-bottom: 8px; }
.ac-print-head__top { display: flex; justify-content: space-between; font-size: 13px; color: var(--slate-600); }
.ac-print-head h2 { margin: 6px 0 2px; font-size: 18px; }
.ac-print-url { font-size: 12px; color: var(--slate-500); direction: ltr; text-align: left; word-break: break-all; margin: 4px 0 0; }
.ac-print-inputs, .ac-print-loads { margin-top: 8px; font-size: 12px; }
.ac-print-inputs th, .ac-print-loads th { background: var(--slate-50); }
.ac-print-foot { border-top: 1px solid var(--slate-200); padding-top: 8px; font-size: 12px; color: var(--slate-600); }
.ac-print-foot p { margin: 4px 0; }
.ac-printbar .ac-btn { display: flex; align-items: center; gap: 6px; padding: 11px 14px; }
@media print { .ac-tablewrap { overflow: visible !important; max-height: none !important; } }
.ac-btn--print { border: 1.5px solid var(--indigo-600); background: #fff; color: var(--indigo-600); }
.ac-btn--print:hover { background: var(--indigo-50); }

/* ---- 3.8.5: دکمه‌ی دانلود PDF ---- */
.ac-printbar .ac-btn[disabled] { opacity: .7; cursor: progress; }