/* ============================================
   Furniture Calculator — Flat & Compact
   Mobile-First, No outer margin/shadow/radius
   ============================================ */

.fmc-calculator {
    background: var(--fmc-bg, #fff);
    color: var(--fmc-text, #0F172A);
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    direction: rtl;
    width: 100%;
    box-sizing: border-box;
    /* ❌ NO margin, box-shadow, border-radius on outer wrapper */
    margin: 0;
    box-shadow: none;
    border-radius: 0;
}

.fmc-inner {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ── Header ── */
.fmc-calc-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px 14px;
    border-bottom: 1px solid rgba(0,0,0,.07);
}
.fmc-header-icon {
    width: 28px;
    height: 28px;
    color: var(--fmc-primary, #2563EB);
    flex-shrink: 0;
    opacity: .85;
}
.fmc-calc-title {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 700;
    color: var(--fmc-secondary, #0F172A);
    line-height: 1.2;
}
.fmc-calc-subtitle {
    margin: 0;
    font-size: 12px;
    color: #94A3B8;
    font-weight: 400;
}

/* ── Progress ── */
.fmc-progress-wrap {
    padding: 12px 16px 6px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fmc-progress-bar {
    flex: 1;
    height: 3px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
}
.fmc-progress-fill {
    height: 100%;
    background: var(--fmc-primary, #2563EB);
    border-radius: 3px;
    transition: width .35s cubic-bezier(.4,0,.2,1);
    width: 0%;
}
.fmc-progress-text {
    font-size: 11px;
    font-weight: 600;
    color: #94A3B8;
    white-space: nowrap;
}

/* ── Step ── */
.fmc-step {
    padding: 14px 16px 16px;
    animation: fmcIn .25s ease;
}
@keyframes fmcIn {
    from { opacity:0; transform:translateX(-14px); }
    to   { opacity:1; transform:none; }
}
.fmc-step-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--fmc-secondary, #0F172A);
    display: flex;
    align-items: center;
    gap: 7px;
}
.fmc-step-title-ico {
    width: 18px;
    height: 18px;
    color: var(--fmc-primary, #2563EB);
    flex-shrink: 0;
}

/* ── Option Grid ── */
.fmc-options-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.fmc-options-grid.g3 { grid-template-columns: repeat(3, 1fr); }

.fmc-option-card {
    position: relative;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    padding: 12px 10px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.fmc-option-card:active { transform: scale(.97); }
.fmc-option-card.selected {
    border-color: var(--fmc-primary, #2563EB);
    background: #fff;
    box-shadow: inset 0 0 0 1px var(--fmc-primary, #2563EB);
}

/* Icon inside card */
.fmc-opt-ico {
    width: 22px;
    height: 22px;
    color: #94A3B8;
    transition: color .15s;
}
.fmc-option-card.selected .fmc-opt-ico { color: var(--fmc-primary, #2563EB); }

.fmc-option-label {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    line-height: 1.3;
}
.fmc-option-card.selected .fmc-option-label { color: var(--fmc-primary, #2563EB); }

.fmc-option-price {
    font-size: 10px;
    color: var(--fmc-primary, #2563EB);
    font-weight: 700;
    opacity: .8;
}

/* Check badge */
.fmc-opt-check {
    position: absolute;
    top: 5px;
    left: 5px;
    width: 16px;
    height: 16px;
    background: var(--fmc-primary, #2563EB);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(.4);
    transition: all .2s cubic-bezier(.34,1.56,.64,1);
}
.fmc-opt-check svg { width: 10px; height: 10px; color: #fff; }
.fmc-option-card.selected .fmc-opt-check { opacity: 1; transform: scale(1); }

/* Multi note */
.fmc-multi-note {
    font-size: 11px;
    color: #94A3B8;
    margin: 0 0 8px;
}

/* ── Nav ── */
.fmc-nav {
    padding: 0 16px 14px;
    display: flex;
    gap: 8px;
}
.fmc-btn-back {
    background: #F1F5F9;
    color: #64748B;
    border: none;
    border-radius: 7px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background .15s;
    flex-shrink: 0;
}
.fmc-btn-back:hover { background: #E2E8F0; }
.fmc-btn-back svg { width: 15px; height: 15px; }

.fmc-btn-next {
    flex: 1;
    background: var(--fmc-primary, #2563EB);
    color: var(--fmc-btn-text, #fff);
    border: none;
    border-radius: 7px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity .15s;
}
.fmc-btn-next:disabled { opacity: .35; cursor: not-allowed; }
.fmc-btn-next svg { width: 15px; height: 15px; }

.fmc-multi-next-wrap {
    padding: 10px 16px 0;
}
.fmc-multi-next-wrap .fmc-btn-next { width: 100%; }

/* ── Result ── */
.fmc-result {
    padding: 20px 16px 18px;
    background: var(--fmc-result-bg, #F0F7FF);
    color: var(--fmc-result-text, #0F172A);
    animation: fmcIn .3s ease;
}

/* compact label, no giant icon */
.fmc-result-label {
    font-size: 11px;
    font-weight: 700;
    color: #94A3B8;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}
.fmc-result-price-wrap {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.fmc-result-price {
    font-size: 30px;
    font-weight: 800;
    color: var(--fmc-primary, #2563EB);
    line-height: 1;
}
.fmc-result-sep { font-size: 18px; color: #CBD5E1; }
.fmc-result-cur {
    font-size: 13px;
    color: #94A3B8;
    font-weight: 500;
    align-self: flex-end;
    padding-bottom: 3px;
}

/* Breakdown */
.fmc-result-breakdown {
    background: rgba(0,0,0,.04);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 14px 0 10px;
}
.fmc-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 12px;
    border-bottom: 1px solid rgba(0,0,0,.05);
}
.fmc-breakdown-row:last-child { border: none; }
.fmc-breakdown-label { color: #64748B; }
.fmc-breakdown-val { font-weight: 700; color: var(--fmc-primary, #2563EB); }

.fmc-result-note {
    font-size: 11px;
    color: #94A3B8;
    margin: 0 0 14px;
    line-height: 1.5;
}
.fmc-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--fmc-primary, #2563EB);
    color: var(--fmc-btn-text, #fff);
    text-decoration: none;
    border-radius: 8px;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 8px;
    transition: opacity .15s;
}
.fmc-cta-btn:hover { opacity: .88; }
.fmc-cta-btn .fmc-btn-ico { width: 17px; height: 17px; }

.fmc-restart-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    background: transparent;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #64748B;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.fmc-restart-btn:hover { border-color: var(--fmc-primary, #2563EB); color: var(--fmc-primary, #2563EB); }
.fmc-restart-btn .fmc-btn-ico { width: 15px; height: 15px; }
.fmc-btn-ico { flex-shrink: 0; }

/* ── Tablet+ ── */
@media (min-width: 480px) {
    .fmc-options-grid { grid-template-columns: repeat(3, 1fr); }
    .fmc-result-price { font-size: 34px; }
}
@media (min-width: 600px) {
    .fmc-calc-header { padding: 20px 20px 16px; }
    .fmc-progress-wrap { padding: 14px 20px 8px; }
    .fmc-step { padding: 16px 20px 18px; }
    .fmc-nav { padding: 0 20px 16px; }
    .fmc-result { padding: 22px 20px 20px; }
    .fmc-multi-next-wrap { padding: 10px 20px 0; }
}