/* spot_calc_page.css — страница калькулятора растаможки /calculator (templates/calculator.tpl, docs/calc/CUSTOMS.md).
   Цвета и размеры только из токенов spot_ui.css (тёмная тема — те же токены). Мобильный вид основной: одна колонка, поля 16px
   и не ниже 44px, без зависимости от наведения; с 992px — форма слева, результат и эксперт справа (липкая колонка). */

.spot-cc [hidden],
.spot-cc [data-cc-off] {
    display: none !important;
}

.spot-cc-h1 {
    padding-bottom: 6px;
}

.spot-cc-lead {
    margin: 0 0 16px;
    color: var(--spot-ink-2);
    font-size: 15px;
    line-height: 22px;
}

.spot-cc-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.spot-cc-form,
.spot-cc-card,
.spot-cc-faq {
    margin: 0 -15px;
    padding: 16px;
    background: var(--spot-surface);
}

.spot-cc-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.spot-cc-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.spot-cc-fs {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.spot-cc-row2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
}

.spot-cc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.spot-cc-label {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--spot-ink);
    font-size: 14px;
    line-height: 18px;
    font-weight: 700;
}

.spot-cc-fs > .spot-cc-label {
    margin-bottom: 6px;
}

.spot-cc-in {
    width: 100%;
    min-width: 0;
    height: var(--spot-control-h);
    padding: 0 12px;
    border: 1px solid var(--spot-field-border);
    border-radius: var(--spot-radius);
    background: var(--spot-surface);
    color: var(--spot-ink);
    font-family: var(--spot-font);
    font-size: 16px;
    line-height: 20px;
    -webkit-appearance: none;
    appearance: none;
}

select.spot-cc-in {
    padding-inline-end: 36px;
    background-image: linear-gradient(-45deg, transparent 50%, currentColor 50%), linear-gradient(-135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - (100% - 18px)) 19px, calc(100% - (100% - 13px)) 19px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

html[dir="rtl"] select.spot-cc-in {
    background-position: right 13px top 19px, right 18px top 19px;
}

select.spot-cc-in:disabled {
    opacity: .55;
}

.spot-cc-in:focus-visible {
    outline: 2px solid var(--spot-focus);
    outline-offset: 1px;
}

.spot-cc-hint {
    margin: 0;
    color: var(--spot-mut);
    font-size: 12px;
    line-height: 16px;
}

/* страны и руль — «таблетки» на радиокнопках (работают без JS) */
.spot-cc-chips,
.spot-cc-seg {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.spot-cc-seg .spot-cc-chip {
    flex: 1 1 0;
}

.spot-cc-chip {
    position: relative;
    display: inline-flex;
    margin: 0;
    cursor: pointer;
}

.spot-cc-chip input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.spot-cc-chip span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--spot-control-h);
    padding: 0 14px;
    border: 1px solid var(--spot-line);
    border-radius: var(--spot-radius);
    background: var(--spot-field);
    color: var(--spot-ink);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
}

.spot-cc-chip input:checked + span {
    border-color: var(--spot-inv);
    background: var(--spot-inv);
    color: var(--spot-on-inv);
}

.spot-cc-chip input:focus-visible + span {
    outline: 2px solid var(--spot-focus);
    outline-offset: 2px;
}

.spot-cc-price {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 84px;
    gap: 8px;
}

.spot-cc-from-ad {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--spot-radius);
    background: var(--spot-bg);
    color: var(--spot-ink-2);
    font-size: 14px;
    line-height: 20px;
    overflow-wrap: anywhere;
}

.spot-cc-from-ad a {
    color: var(--spot-focus);
    font-weight: 600;
}

.spot-cc-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: var(--spot-control-h-l);
    padding: 0 18px;
    border: 0;
    border-radius: var(--spot-radius);
    background: var(--spot-red);
    color: var(--spot-on-inv);
    font-family: var(--spot-font);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.spot-cc-btn--sec {
    min-height: var(--spot-control-h);
    background: var(--spot-inv);
}

.spot-cc-btn:focus-visible {
    outline: 2px solid var(--spot-focus);
    outline-offset: 2px;
}

.spot-cc-spin {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-left-color: transparent;
    border-radius: 50%;
    animation: spot-cc-spin .8s linear infinite;
}

.spot-cc-btn.is-busy .spot-cc-spin {
    display: inline-block;
}

@keyframes spot-cc-spin { to { transform: rotate(-360deg); } }

@media (prefers-reduced-motion: reduce) {
    .spot-cc-spin { animation-duration: 2s; }
}

/* результат */
.spot-cc-h2 {
    margin: 0 0 12px;
    color: var(--spot-ink);
    font-family: var(--spot-font);
    font-size: 20px;
    line-height: 26px;
    font-weight: 800;
}

.spot-cc-h3 {
    margin: 4px 0 0;
    color: var(--spot-ink);
    font-size: 16px;
    line-height: 22px;
    font-weight: 800;
}

.spot-cc-p {
    margin: 0;
    color: var(--spot-ink-2);
    font-size: 14px;
    line-height: 20px;
}

.spot-cc-result {
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: opacity .15s;
}

.spot-cc-result.is-busy {
    opacity: .55;
}

.spot-cc-empty,
.spot-cc-msg,
.spot-cc-note {
    margin: 0;
    color: var(--spot-ink-2);
    font-size: 15px;
    line-height: 22px;
}

.spot-cc-msg {
    padding: 12px;
    border-radius: var(--spot-radius);
    background: var(--spot-bg);
}

.spot-cc-msg--warn {
    background: var(--spot-amber-soft);
    color: var(--spot-amber);
}

.spot-cc-note {
    color: var(--spot-mut);
    font-size: 13px;
    line-height: 18px;
}

.spot-cc-totals {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.spot-cc-total {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 2px;
    align-items: baseline;
    padding: 12px 14px;
    border-radius: var(--spot-radius);
    background: var(--spot-bg);
}

.spot-cc-total-k {
    color: var(--spot-ink);
    font-size: 15px;
    line-height: 20px;
    font-weight: 700;
}

.spot-cc-total-v {
    color: var(--spot-ink);
    font-size: 24px;
    line-height: 28px;
    font-weight: 800;
    white-space: nowrap;
    text-align: end;
}

.spot-cc-total-gel {
    grid-column: 2;
    color: var(--spot-mut);
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    white-space: nowrap;
    text-align: end;
}

.spot-cc-total-range {
    grid-column: 1 / -1;
    color: var(--spot-mut);
    font-size: 13px;
    line-height: 18px;
}

.spot-cc-warn {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--spot-radius);
    background: var(--spot-bg);
    color: var(--spot-ink-2);
    font-size: 14px;
    line-height: 20px;
}

.spot-cc-warn--red {
    background: var(--spot-red-soft);
    color: var(--spot-red-dark-fg);
    font-weight: 700;
}

.spot-cc-warn--amber {
    background: var(--spot-amber-soft);
    color: var(--spot-amber);
}

.spot-cc-warn a,
.spot-cc-src a,
.spot-cc-qa a,
.spot-cc-agree a {
    color: var(--spot-focus);
    text-decoration: underline;
}

.spot-cc-break {
    display: flex;
    flex-direction: column;
}

.spot-cc-gh {
    margin: 10px 0 2px;
    color: var(--spot-mut);
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.spot-cc-dl {
    margin: 0;
}

.spot-cc-li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--spot-line);
}

.spot-cc-li dt {
    min-width: 0;
    color: var(--spot-ink-2);
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

.spot-cc-li dd {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 0;
    color: var(--spot-ink);
    font-size: 14px;
    line-height: 20px;
    font-weight: 700;
    white-space: nowrap;
    text-align: end;
}

.spot-cc-li dd small {
    color: var(--spot-mut);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
}

.spot-cc-unk {
    color: var(--spot-mut);
    font-weight: 600;
}

.spot-cc-disc {
    margin: 4px 0 0;
    padding: 10px 12px;
    border-radius: var(--spot-radius);
    background: var(--spot-bg);
    color: var(--spot-ink-2);
    font-size: 13px;
    line-height: 18px;
}

.spot-cc-fx {
    margin: 0;
    color: var(--spot-mut);
    font-size: 12px;
    line-height: 16px;
}

.spot-cc-src {
    font-size: 13px;
    line-height: 18px;
    color: var(--spot-ink-2);
}

.spot-cc-src summary,
.spot-cc-qa summary {
    display: flex;
    align-items: center;
    min-height: var(--spot-control-h);
    color: var(--spot-ink);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.spot-cc-src summary::-webkit-details-marker,
.spot-cc-qa summary::-webkit-details-marker {
    display: none;
}

.spot-cc-src summary::after,
.spot-cc-qa summary::after {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-inline-start: auto;
    margin-inline-end: 4px;
    border-left: 1.8px solid currentColor;
    border-bottom: 1.8px solid currentColor;
    transform: rotate(-45deg);
}

.spot-cc-src[open] summary::after,
.spot-cc-qa[open] summary::after {
    transform: rotate(135deg);
}

.spot-cc-src summary:focus-visible,
.spot-cc-qa summary:focus-visible {
    outline: 2px solid var(--spot-focus);
    outline-offset: 2px;
}

.spot-cc-src-list {
    margin: 0 0 8px;
    padding-inline-start: 18px;
    overflow-wrap: anywhere;
}

.spot-cc-src-list li + li {
    margin-top: 6px;
}

.spot-cc-src-h {
    margin: 8px 0 4px;
    font-weight: 700;
}

.spot-cc-share {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 14px;
}

.spot-cc-share-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
}

.spot-cc-share-row .spot-cc-in {
    font-size: 14px;
    color: var(--spot-ink-2);
}

.spot-cc-copy {
    min-height: var(--spot-control-h);
    padding: 0 14px;
    border: 1px solid var(--spot-field-border);
    border-radius: var(--spot-radius);
    background: var(--spot-surface);
    color: var(--spot-ink);
    font-family: var(--spot-font);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.spot-cc-copy:focus-visible {
    outline: 2px solid var(--spot-focus);
    outline-offset: 2px;
}

/* эксперт и заявка */
.spot-cc-expert {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.spot-cc-exp-top {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
}

.spot-cc-exp-top .spot-cc-h2 {
    margin-bottom: 4px;
}

.spot-cc-exp-top img {
    width: 72px;
    height: auto;
    border-radius: var(--spot-radius-s);
    background: #fff;
}

.spot-cc-exp-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.spot-cc-exp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--spot-control-h);
    border-radius: var(--spot-radius);
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
}

.spot-cc-exp-wa {
    background: var(--spot-green);
}

.spot-cc-exp-tg {
    background: var(--spot-focus);
}

html.spot-dm[data-theme="dark"] .spot-cc-exp-tg {
    background: #1D5FD1;
}

.spot-cc-exp-btn:focus-visible {
    outline: 2px solid var(--spot-ink);
    outline-offset: 2px;
}

.spot-cc-lead {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--spot-line);
}

.spot-cc-hp {
    position: absolute;
    right: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.spot-cc-agree {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    color: var(--spot-ink-2);
    font-size: 13px;
    line-height: 18px;
    cursor: pointer;
}

.spot-cc-agree input {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    -webkit-appearance: checkbox;
    appearance: auto; /* общий стиль движка снимает вид флажка */
    accent-color: var(--spot-red);
}

.spot-cc-lead-msg {
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--spot-radius);
    font-size: 14px;
    line-height: 20px;
}

.spot-cc-lead-msg.is-ok {
    background: var(--spot-green-soft);
    color: var(--spot-green-fg);
    font-weight: 700;
}

.spot-cc-lead-msg.is-err {
    background: var(--spot-red-soft);
    color: var(--spot-red-dark-fg);
}

/* Иран — разметка модуля spot_calc_ir.js (те же классы, что в блоке объявления) */
.spot-cc .spot-calc-ir-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid var(--spot-line);
    font-size: 14px;
    font-weight: 700;
}

.spot-cc .spot-calc-ir-row-k {
    min-width: 0;
    color: var(--spot-ink-2);
    font-weight: 400;
}

.spot-cc .spot-calc-ir-row-v {
    white-space: nowrap;
}

.spot-cc .spot-calc-ir-row--sub {
    padding-inline-start: 14px;
    font-size: 13px;
}

.spot-cc .spot-calc-ir-total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    padding: 12px 14px;
    border-radius: var(--spot-radius);
    background: var(--spot-bg);
    font-size: 15px;
    font-weight: 800;
}

.spot-cc .spot-calc-ir-total-v {
    font-size: 22px;
    white-space: nowrap;
}

.spot-cc .spot-calc-ir-title,
.spot-cc .spot-calc-ir-msg,
.spot-cc .spot-calc-ir-note,
.spot-cc .spot-calc-ir-warn {
    margin: 8px 0 0;
    color: var(--spot-ink-2);
    font-size: 14px;
    line-height: 20px;
}

.spot-cc .spot-calc-ir-title {
    color: var(--spot-ink);
    font-weight: 700;
}

.spot-cc .spot-calc-ir-warn {
    padding: 10px 12px;
    border-radius: var(--spot-radius);
    background: var(--spot-amber-soft);
    color: var(--spot-amber);
}

.spot-cc .spot-calc-ir-fees > summary {
    cursor: pointer;
    list-style: none;
}

.spot-cc .spot-calc-ir-fees > summary::-webkit-details-marker {
    display: none;
}

.spot-cc .spot-calc-ir-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--spot-control-h);
    margin-top: 12px;
    border-radius: var(--spot-radius);
    background: var(--spot-green);
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
}

/* вопросы и ответы */
.spot-cc-faq {
    margin-top: 16px;
}

.spot-cc-qa {
    border-bottom: 1px solid var(--spot-line);
}

.spot-cc-qa summary {
    padding: 8px 0;
    font-size: 15px;
    line-height: 20px;
}

.spot-cc-qa p {
    margin: 0 0 12px;
    color: var(--spot-ink-2);
    font-size: 14px;
    line-height: 21px;
}

@media (min-width: 576px) {
    .spot-cc-row2 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (min-width: 992px) {
    .spot-cc-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
        align-items: start;
        gap: 24px;
    }
    .spot-cc-form,
    .spot-cc-card,
    .spot-cc-faq {
        margin: 0;
        padding: 24px;
        border-radius: var(--spot-radius-l);
    }
    .spot-cc-side {
        position: sticky;
        top: 16px;
    }
    .spot-cc-faq {
        max-width: calc(100% - 464px);
    }
}

/* ---- шаг 6 пакета Codex: «Как посчитать» и «Что учитывает расчёт» (.spot-cc-more — третий ребёнок .spot-cc-grid).
   Телефон: после результата и эксперта. Десктоп: под формой слева, колонка результата справа идёт на две строки сетки
   (строки auto + 1fr: лишняя высота правой колонки уходит во вторую строку, между формой и блоком нет дыры).
   Шаги — .spot-biz-step-list из spot_business.css (head.tpl подключает его раньше этого файла). ---- */
.spot-cc-more {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.spot-cc-how .spot-cc-h2 {
    margin-top: 8px;
}

.spot-cc-steps li {
    align-content: start;
}

.spot-cc-steps li span a {
    color: var(--spot-focus);
    font-weight: 600;
    text-decoration: underline;
}

.spot-cc-steps li span a:focus-visible {
    outline: 2px solid var(--spot-focus);
    outline-offset: 2px;
}

/* «Написать в Telegram» (бот поддержки) — своей строкой, цель нажатия 44px */
.spot-cc-steps li span a.spot-cc-tg {
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    min-height: 44px;
    margin-top: 2px;
}

.spot-cc-steps li span a.spot-cc-tg svg {
    flex-shrink: 0;
}

.spot-cc-incl {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 -15px;
    padding: 16px;
    background: var(--spot-surface);
}

.spot-cc-incl-head {
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
}

.spot-cc-incl-head .spot-cc-h2 {
    margin: 0;
}

.spot-cc-incl-img img {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin: 0 auto;
    border-radius: var(--spot-radius);
}

.spot-cc-incl-tx {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.spot-cc-incl-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin: 0;
}

.spot-cc-incl-list > div {
    padding: 12px 14px;
    border-radius: var(--spot-radius);
    background: var(--spot-bg);
}

.spot-cc-incl-list dt {
    margin: 0 0 2px;
    color: var(--spot-ink);
    font-size: 15px;
    line-height: 21px;
    font-weight: 700;
}

.spot-cc-incl-list dd {
    margin: 0;
    color: var(--spot-ink-2);
    font-size: 14px;
    line-height: 20px;
}

.spot-cc-how-disc {
    margin: 0;
    font-weight: 600;
    color: var(--spot-ink);
}

.spot-cc-how-dates {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding-inline-start: 18px;
    color: var(--spot-mut);
    font-size: 13px;
    line-height: 18px;
}

@media (min-width: 576px) {
    .spot-cc-steps,
    .spot-cc-incl-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .spot-cc-incl-head {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
    .spot-cc-incl-img {
        flex: 0 0 180px;
    }
}

@media (min-width: 992px) {
    .spot-cc-grid {
        grid-template-rows: auto 1fr;
    }
    .spot-cc-form {
        grid-column: 1;
        grid-row: 1;
    }
    .spot-cc-side {
        grid-column: 2;
        grid-row: 1 / span 2;
    }
    .spot-cc-more {
        grid-column: 1;
        grid-row: 2;
        gap: 24px;
    }
    .spot-cc-how .spot-cc-h2 {
        margin-top: 0;
    }
    .spot-cc-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .spot-cc-incl {
        margin: 0;
        padding: 24px;
        border-radius: var(--spot-radius-l);
    }
    .spot-cc-incl-img {
        flex-basis: 220px;
    }
    .spot-cc-grid + .spot-cc-faq {
        margin-top: 24px;
    }
}