/* ═══════════════════════════════════════════════════════════════════════
   Разметка плана 24 горы — fsa-plan-24-gory.css v1.0
   Шрифты: Roboto 400 (основной), PT Sans Narrow (заголовки)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Переменные ──────────────────────────────────────────────────────── */
.fsaplan {
    --gold    : #C9A96E;
    --gold-d  : #9A7840;
    --gold-p  : #FAF6F0;
    --pur     : #6B4FA0;
    --pur-d   : #4A3270;
    --pur-p   : #F2EDF9;
    --ink     : #1A1008;
    --ink-m   : #4A3828;
    --ink-l   : #8C7060;
    --white   : #FFFFFF;
    --border  : #E8DDD5;
    --cream   : #F4EDE4;
    --red     : #C9320A;
    --green   : #2E7D32;

    font-family : 'Roboto', -apple-system, sans-serif;
    font-weight : 400;
    font-size   : 15px;
    line-height : 1.6;
    color       : var(--ink);
    width       : 100%;
    margin      : 0;
}

.fsaplan * { box-sizing: border-box; }
.fsaplan p { margin: 0 0 8px; }
.fsaplan h2, .fsaplan h3 { margin: 0 0 12px; }

/* ── Заголовок инструмента ──────────────────────────────────────────── */
.fsaplan-header {
    text-align    : center;
    margin-bottom : 20px;
    padding       : 24px 20px 20px;
    background    : var(--white);
    border        : 1px solid var(--border);
    border-radius : 16px;
}

.fsaplan-header__title {
    font-family   : 'PT Sans Narrow', 'Arial Narrow', sans-serif;
    font-size     : 28px;
    font-weight   : 700;
    color         : var(--ink);
    margin        : 0 0 8px;
}

.fsaplan-header__sub {
    font-size  : 14px;
    color      : var(--ink-l);
    margin     : 0;
    line-height: 1.5;
}

/* ── Шаги ──────────────────────────────────────────────────────────── */
.fsaplan-step {
    background    : var(--white);
    border        : 1px solid var(--border);
    border-radius : 16px;
    padding       : 28px 32px;
    margin-bottom : 16px;
}

.fsaplan-step--hidden { display: none !important; }

.fsaplan-step__title {
    font-family : 'PT Sans Narrow', 'Arial Narrow', sans-serif;
    font-size   : 22px;
    font-weight : 700;
    color       : var(--ink);
    margin-bottom: 6px;
}

.fsaplan-step__desc {
    color       : var(--ink-m);
    font-size   : 14px;
    margin-bottom: 20px;
}

/* ── Прогресс-бар ───────────────────────────────────────────────────── */
.fsaplan-progress {
    display       : flex;
    align-items   : center;
    margin-bottom : 20px;
    padding       : 16px 20px;
    background    : var(--white);
    border        : 1px solid var(--border);
    border-radius : 14px;
    overflow-x    : auto;
    gap           : 0;
}

.fsaplan-progress__step {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    gap            : 4px;
    flex-shrink    : 0;
}

.fsaplan-progress__circle {
    width         : 14px;
    height        : 14px;
    border-radius : 50%;
    background    : var(--border);
    border        : 2px solid var(--border);
    transition    : background 0.25s, border-color 0.25s;
    flex-shrink   : 0;
}

.fsaplan-progress__step.active .fsaplan-progress__circle {
    background   : var(--pur);
    border-color : var(--pur);
}

.fsaplan-progress__step.done .fsaplan-progress__circle {
    background   : var(--green);
    border-color : var(--green);
}

/* Выбранная карточка типа объекта */
.fsaplan-type-card--selected {
    border-color : var(--pur) !important;
    background   : var(--pur-p) !important;
}

.fsaplan-progress__label {
    font-size   : 11px;
    color       : var(--ink-l);
    font-family : 'Roboto', sans-serif;
    white-space : nowrap;
}

.fsaplan-progress__step.active .fsaplan-progress__label { color: var(--pur); font-weight: 600; }
.fsaplan-progress__step.done  .fsaplan-progress__label  { color: var(--green); }

.fsaplan-progress__line {
    flex       : 1;
    height     : 2px;
    background : var(--border);
    min-width  : 20px;
    margin     : 0 4px;
    margin-bottom: 16px;
}

/* ── Тип объекта ────────────────────────────────────────────────────── */
.fsaplan-type-row {
    display   : flex;
    gap       : 12px;
    flex-wrap : wrap;
    margin-bottom: 20px;
}

.fsaplan-type-card {
    flex          : 1;
    min-width     : 180px;
    display       : flex;
    flex-direction: column;
    align-items   : center;
    gap           : 6px;
    padding       : 16px;
    border        : 2px solid var(--border);
    border-radius : 12px;
    cursor        : pointer;
    transition    : border-color 0.2s, background 0.2s;
    text-align    : center;
}

.fsaplan-type-card input[type="radio"] { display: none; }

.fsaplan-type-card:has(input:checked) {
    border-color: var(--pur);
    background  : var(--pur-p);
}

.fsaplan-type-card__icon  { font-size: 28px; }
.fsaplan-type-card__label {
    font-family : 'PT Sans Narrow', sans-serif;
    font-size   : 16px;
    font-weight : 700;
    color       : var(--ink);
}
.fsaplan-type-card__hint  { font-size: 12px; color: var(--ink-l); }

/* ── Способы загрузки плана ─────────────────────────────────────────── */
.fsaplan-upload-ways {
    display       : flex;
    gap           : 14px;
    flex-wrap     : wrap;
    margin-bottom : 20px;
}

.fsaplan-upload-way {
    flex          : 1;
    min-width     : 240px;
    background    : var(--cream);
    border        : 1px solid var(--border);
    border-radius : 12px;
    padding       : 16px 18px;
}

.fsaplan-upload-way__head {
    display       : flex;
    align-items   : center;
    gap           : 10px;
    margin-bottom : 8px;
}

.fsaplan-upload-way__num {
    font-family   : 'PT Sans Narrow', sans-serif;
    font-size     : 11px;
    font-weight   : 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color         : var(--white);
    background    : var(--pur);
    border-radius : 6px;
    padding       : 2px 8px;
    flex-shrink   : 0;
}

.fsaplan-upload-way__title {
    font-family : 'PT Sans Narrow', sans-serif;
    font-size   : 16px;
    font-weight : 700;
    color       : var(--ink);
}

.fsaplan-upload-way__text {
    font-size   : 13px;
    color       : var(--ink-m);
    line-height : 1.55;
    margin      : 0 0 8px;
}

.fsaplan-upload-way__list {
    margin      : 0;
    padding-left: 18px;
}

.fsaplan-upload-way__list li {
    font-size   : 13px;
    color       : var(--ink-m);
    line-height : 1.55;
    margin-bottom: 3px;
}

/* ── Зона загрузки ──────────────────────────────────────────────────── */
.fsaplan-upload-zone {
    border        : 2px dashed var(--border);
    border-radius : 14px;
    padding       : 40px 20px;
    text-align    : center;
    cursor        : pointer;
    transition    : border-color 0.2s, background 0.2s;
    margin-bottom : 20px;
    background    : var(--cream);
}

.fsaplan-upload-zone:hover,
.fsaplan-upload-zone--over {
    border-color : var(--pur);
    background   : var(--pur-p);
}

.fsaplan-upload-zone__icon { font-size: 40px; margin-bottom: 8px; }

.fsaplan-upload-zone__text {
    font-size     : 15px;
    color         : var(--ink-m);
    margin-bottom : 6px;
    line-height   : 1.5;
}

.fsaplan-upload-zone__link {
    color           : var(--pur);
    text-decoration : underline;
    cursor          : pointer;
}

.fsaplan-upload-zone__hint { font-size: 12px; color: var(--ink-l); }

.fsaplan-upload-zone__preview img {
    max-width     : 100%;
    max-height    : 220px;
    border-radius : 8px;
    margin-bottom : 10px;
    display       : block;
    margin-left   : auto;
    margin-right  : auto;
}

.fsaplan-upload-zone__filename { font-size: 13px; color: var(--ink-m); margin-bottom: 4px; }
.fsaplan-upload-zone__change   { font-size: 12px; color: var(--pur);   text-decoration: underline; }

/* ── Блок авто-результата ───────────────────────────────────────────── */
.fsaplan-auto-result { margin-bottom: 14px; min-height: 0; }

.fsaplan-auto-result__ok {
    background    : #E8F5E9;
    border        : 1px solid #A5D6A7;
    border-radius : 10px;
    padding       : 12px 16px;
    font-size     : 14px;
    font-weight   : 600;
    color         : #2E7D32;
}

.fsaplan-auto-result__sub {
    font-weight : 400;
    font-size   : 12px;
    color       : #4CAF50;
    margin-top  : 4px;
}

.fsaplan-auto-result__fail {
    background    : #FFF8E1;
    border        : 1px solid #FFE082;
    border-radius : 10px;
    padding       : 12px 16px;
    font-size     : 14px;
    color         : #E65100;
}

/* ── Методы (центр / фасад) ─────────────────────────────────────────── */
.fsaplan-methods,
.fsaplan-facade-methods {
    display   : flex;
    gap       : 12px;
    flex-wrap : wrap;
    margin-bottom: 16px;
}

.fsaplan-method-card {
    flex          : 1;
    min-width     : 160px;
    display       : flex;
    flex-direction: column;
    gap           : 4px;
    padding       : 14px 16px;
    border        : 2px solid var(--border);
    border-radius : 12px;
    cursor        : pointer;
    transition    : border-color 0.2s, background 0.2s;
}

.fsaplan-method-card input[type="radio"] { display: none; }

.fsaplan-method-card:has(input:checked) {
    border-color : var(--pur);
    background   : var(--pur-p);
}

.fsaplan-method-card__title {
    font-family : 'PT Sans Narrow', sans-serif;
    font-size   : 15px;
    font-weight : 700;
    color       : var(--ink);
}

.fsaplan-method-card__desc { font-size: 13px; color: var(--ink-m); line-height: 1.45; }

/* ── Блоки-подсказки ────────────────────────────────────────────────── */
.fsaplan-hint-box {
    background    : var(--pur-p);
    border        : 1px solid rgba(107,79,160,0.2);
    border-radius : 10px;
    padding       : 12px 16px;
    font-size     : 13px;
    color         : var(--ink-m);
    margin-bottom : 14px;
    line-height   : 1.5;
}

.fsaplan-hint-box--info {
    background : var(--gold-p);
    border     : 1px solid #E8D5B0;
}

.fsaplan-hint-box--warning {
    background  : #fff;
    border      : 1px solid var(--border);
    color       : var(--ink-m);
    font-weight : 600;
    font-size   : 14px;
}
.fsaplan-hint-box--warning .fsaplan-hint-box__accent {
    color              : var(--red);
    text-decoration-color: var(--red);
}

.fsaplan-hint-tip {
    display       : block;
    margin-top    : 8px;
    font-size     : 12px;
    color         : var(--ink-l);
    border-top    : 1px solid var(--border);
    padding-top   : 8px;
    line-height   : 1.5;
}

/* ── Canvas обёртки ─────────────────────────────────────────────────── */
.fsaplan-canvas-wrap,
.fsaplan-result-canvas-wrap {
    width         : 100%;
    overflow      : hidden;
    border-radius : 12px;
    border        : 1px solid var(--border);
    background    : #e8e0d8;
    margin-bottom : 14px;
    display       : flex;
    justify-content: center;
}

.fsaplan-canvas-wrap canvas,
.fsaplan-result-canvas-wrap canvas {
    display   : block;
    max-width : 100%;
    height    : auto;
}

/* ── Статус под канвасом ────────────────────────────────────────────── */
.fsaplan-center-status {
    font-size     : 13px;
    color         : var(--green);
    font-weight   : 600;
    margin-bottom : 12px;
    min-height    : 20px;
}

/* ── Навигационные кнопки ───────────────────────────────────────────── */
.fsaplan-nav {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    margin-top      : 20px;
    gap             : 12px;
}

.fsaplan-nav--result { flex-wrap: wrap; }

.fsaplan-btn {
    padding       : 12px 28px !important;
    border-radius : 10px !important;
    font-size     : 15px !important;
    font-family   : 'Roboto', sans-serif !important;
    font-weight   : 600 !important;
    cursor        : pointer !important;
    border        : none !important;
    transition    : background 0.2s, opacity 0.2s !important;
    white-space   : nowrap !important;
}

.fsaplan-btn--primary {
    background : var(--pur) !important;
    color      : #fff !important;
}
.fsaplan-btn--primary:hover:not(:disabled) { background: var(--pur-d) !important; }
.fsaplan-btn--primary:disabled { opacity: 0.45 !important; cursor: not-allowed !important; }

.fsaplan-btn--secondary {
    background : var(--cream) !important;
    color      : var(--ink-m) !important;
    border     : 1px solid var(--border) !important;
}
.fsaplan-btn--secondary:hover { background: var(--gold-p) !important; border-color: var(--gold) !important; }

.fsaplan-btn--download {
    background : var(--gold-d) !important;
    color      : #fff !important;
}
.fsaplan-btn--download:hover { background: var(--gold) !important; }

/* ── Ввод градуса вручную ───────────────────────────────────────────── */
.fsaplan-degree-input-wrap {
    background    : var(--cream);
    border        : 1px solid var(--border);
    border-radius : 12px;
    padding       : 24px;
    margin-bottom : 16px;
    max-width     : 360px;
}

.fsaplan-degree-label {
    display       : block;
    font-family   : 'PT Sans Narrow', sans-serif;
    font-size     : 15px;
    font-weight   : 700;
    color         : var(--ink);
    margin-bottom : 10px;
}

.fsaplan-degree-row {
    display     : flex;
    align-items : center;
    gap         : 8px;
}

.fsaplan-degree-input {
    width         : 140px !important;
    padding       : 10px 14px !important;
    font-size     : 22px !important;
    font-family   : 'Roboto', sans-serif !important;
    border        : 1.5px solid var(--border) !important;
    border-radius : 10px !important;
    outline       : none !important;
    background    : var(--white) !important;
    color         : var(--ink) !important;
    text-align    : center !important;
}
.fsaplan-degree-input:focus { border-color: var(--pur) !important; }

.fsaplan-degree-sym { font-size: 22px; color: var(--ink-m); }

.fsaplan-degree-hint { font-size: 12px; color: var(--ink-l); margin-top: 8px; margin-bottom: 0; }

/* ── Информация о результате ────────────────────────────────────────── */
.fsaplan-result-info {
    display       : flex;
    gap           : 20px;
    flex-wrap     : wrap;
    background    : var(--gold-p);
    border        : 1px solid #E8D5B0;
    border-radius : 10px;
    padding       : 12px 18px;
    margin-bottom : 16px;
    font-size     : 14px;
    color         : var(--ink-m);
}
.fsaplan-result-info strong { color: var(--gold-d); font-size: 16px; }

/* ── Панель управления результатом ─────────────────────────────────── */
.fsaplan-result-controls {
    display               : grid;
    grid-template-columns : 1fr 1fr 1fr;
    gap                   : 12px 24px;
    background            : var(--white);
    border                : 1px solid var(--border);
    border-radius         : 12px;
    padding               : 14px 18px;
    margin-bottom         : 14px;
    align-items           : start;
}

.fsaplan-control-group { display: flex; flex-direction: column; gap: 5px; }

.fsaplan-control-label {
    font-size      : 11px;
    font-weight    : 700;
    color          : var(--ink-l);
    text-transform : uppercase;
    letter-spacing : 0.06em;
    font-family    : 'Roboto', sans-serif;
}

.fsaplan-rotation-row { display: flex; align-items: center; gap: 6px; }

.fsaplan-slider-hint {
    flex-shrink : 0;
    min-width   : 30px;
    text-align  : right;
    font-size   : 12px;
    color       : var(--ink-l);
}

.fsaplan-slider {
    flex               : 1 !important;
    -webkit-appearance : none !important;
    appearance         : none !important;
    height             : 4px !important;
    background         : var(--border) !important;
    border-radius      : 2px !important;
    outline            : none !important;
    cursor             : pointer !important;
    border             : none !important;
    box-shadow         : none !important;
    padding            : 0 !important;
}
.fsaplan-slider::-webkit-slider-thumb {
    -webkit-appearance : none !important;
    width              : 20px !important;
    height             : 20px !important;
    border-radius      : 50% !important;
    background         : var(--pur) !important;
    cursor             : pointer !important;
    border             : 3px solid #fff !important;
    box-shadow         : 0 1px 4px rgba(0,0,0,0.2) !important;
}
.fsaplan-slider::-moz-range-thumb {
    width         : 20px !important;
    height        : 20px !important;
    border-radius : 50% !important;
    background    : var(--pur) !important;
    cursor        : pointer !important;
    border        : 3px solid #fff !important;
}

.fsaplan-rot-btn {
    width           : 32px !important;
    height          : 32px !important;
    border-radius   : 8px !important;
    border          : 1px solid var(--border) !important;
    background      : var(--cream) !important;
    color           : var(--ink) !important;
    font-size       : 15px !important;
    cursor          : pointer !important;
    display         : flex !important;
    align-items     : center !important;
    justify-content : center !important;
    flex-shrink     : 0 !important;
    transition      : background 0.15s !important;
    padding         : 0 !important;
    line-height     : 1 !important;
}
.fsaplan-rot-btn:hover { background: var(--gold-p) !important; border-color: var(--gold) !important; }

.fsaplan-rot-angle {
    min-width   : 42px;
    text-align  : center;
    font-size   : 14px;
    color       : var(--ink-m);
    font-family : 'Roboto', sans-serif;
}

/* ── Таблица секторов ───────────────────────────────────────────────── */
.fsaplan-sectors-wrap {
    margin-top    : 20px;
    margin-bottom : 20px;
}

.fsaplan-sectors-title {
    font-family   : 'PT Sans Narrow', sans-serif;
    font-size     : 17px;
    font-weight   : 700;
    color         : var(--ink);
    margin-bottom : 10px;
}

.fsaplan-sectors-table {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(200px, 1fr));
    gap                   : 6px;
}

.fsaplan-sector-row {
    display       : flex;
    align-items   : center;
    gap           : 8px;
    background    : var(--cream);
    border        : 1px solid var(--border);
    border-radius : 8px;
    padding       : 8px 12px;
    font-size     : 13px;
}

.fsaplan-sector-name {
    font-family : 'PT Sans Narrow', sans-serif;
    font-weight : 700;
    font-size   : 14px;
    color       : var(--pur);
    min-width   : 46px;
}
.fsaplan-sector-dir  { color: var(--ink-m); min-width: 48px; }
.fsaplan-sector-deg  { color: var(--ink-l); font-size: 11px; margin-left: auto; }

/* ── Карта (из fsa-map.css — подключена отдельно, здесь только override) */
.fsaplan #fsaplan-map-wrap .fsamap-container { margin-bottom: 0; }

/* ── Адаптив ────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
    .fsaplan-step { padding: 18px 16px; }
    .fsaplan-step__title { font-size: 18px; }
    .fsaplan-result-controls { grid-template-columns: 1fr; }
    .fsaplan-methods,
    .fsaplan-facade-methods { flex-direction: column; }
    .fsaplan-type-row { flex-direction: column; }
    .fsaplan-progress { padding: 12px; gap: 0; }
    .fsaplan-progress__line { min-width: 10px; }
    .fsaplan-sectors-table { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 400px) {
    .fsaplan-sectors-table { grid-template-columns: 1fr; }
    .fsaplan-btn { padding: 10px 18px !important; font-size: 14px !important; }
}

/* ── Подключаем стили карты ─────────────────────────────────────────── */
/* fsa-map.css подключается отдельно через wp_enqueue_style в fsa-plan.php */