/**
 * SOLVA - Solar System Calculator
 * Minimal / Swiss direction, see design-system/solva/MASTER.md
 */
.calc-hero, .calc-section, .calc-mini {
    --ink: #0f172a;
    --brand: #1d1d35;
    --muted: #475569;
    --line: #e3e6ec;
    --line-strong: #c9ced8;
    --surface: #ffffff;
    --canvas: #f6f7f9;
    --focus: #2563eb;
}
.calc-section [hidden] { display: none !important; }

/* ---------- Page header ---------- */
.calc-hero { padding: calc(var(--header-height) + 2.5rem) 0 2.25rem; background: var(--brand); color: #fff; }
.calc-hero h1 { color: #fff; font-size: clamp(1.75rem, 3.5vw, 2.5rem); margin: 0 0 .5rem; }
.calc-hero p { color: rgba(255, 255, 255, .78); font-size: 1.02rem; line-height: 1.7; max-width: 640px; margin: 0; }

/* ---------- Layout ---------- */
.calc-section { padding-top: 2rem; background: var(--canvas); }
.calc-layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.25rem; align-items: start; }
.calc-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }
.calc-side { position: sticky; top: calc(var(--header-height) + 1rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; min-width: 0; }

.calc-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 1.25rem; }
.calc-card-head { margin-bottom: 1rem; }
.calc-card-head h2 { font-size: 1.1rem; margin: 0; color: var(--ink); }
.calc-card-head p { margin: .4rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.7; }
.calc-step { color: var(--muted); font-variant-numeric: tabular-nums; margin-inline-end: .2rem; }

/* ---------- Presets ---------- */
.calc-presets { display: flex; flex-wrap: wrap; gap: .4rem; }
.calc-preset {
    height: 40px; padding: 0 1rem; border-radius: 999px;
    background: var(--surface); border: 1px solid var(--line);
    font-family: inherit; font-weight: 600; font-size: .9rem; color: var(--ink);
    cursor: pointer; transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.calc-preset:hover { border-color: var(--line-strong); }
.calc-preset.is-active { background: var(--brand); border-color: var(--brand); color: #fff; }
.calc-preset-clear { color: var(--muted); }

/* ---------- Appliance list ---------- */
.calc-table-head, .calc-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) 72px 96px 88px 88px 36px;
    gap: .5rem; align-items: center;
}
.calc-table-head { padding: 0 .5rem .5rem; font-size: .78rem; font-weight: 700; color: var(--muted); border-bottom: 1px solid var(--line); }
.calc-list { list-style: none; margin: 0; padding: 0; }
.calc-row { padding: .55rem .5rem; border-bottom: 1px solid var(--line); }
.calc-row.is-new { animation: calcFlash 1.2s ease; }
@keyframes calcFlash { 0% { background: #eef2ff; } 100% { background: transparent; } }
.calc-name { display: flex; align-items: center; gap: .55rem; min-width: 0; font-weight: 600; color: var(--ink); font-size: .93rem; }
.calc-name > i { width: 18px; flex: none; text-align: center; color: var(--muted); font-size: .85rem; }
.calc-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc-name-input, .calc-f input, .calc-add select, .calc-settings select {
    width: 100%; height: 40px; padding: 0 .6rem;
    border: 1px solid var(--line-strong); border-radius: 8px;
    background: var(--surface); color: var(--ink);
    font-family: inherit; font-size: .95rem;
}
.calc-f input { text-align: center; -moz-appearance: textfield; padding: 0 .3rem; font-variant-numeric: tabular-nums; }
.calc-f input::-webkit-outer-spin-button, .calc-f input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc-name-input:focus-visible, .calc-f input:focus-visible, .calc-add select:focus-visible, .calc-settings select:focus-visible,
.calc-preset:focus-visible, .calc-btn:focus-visible, .calc-remove:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.calc-f { margin: 0; display: block; }
.calc-f-cap { display: none; }
.calc-remove {
    width: 36px; height: 36px; border-radius: 8px; border: 0;
    background: transparent; color: var(--muted); cursor: pointer;
}
.calc-remove:hover { background: #fef2f2; color: #dc2626; }

.calc-empty { text-align: center; padding: 1.5rem 1rem; color: var(--muted); }
.calc-empty p { margin: 0; }
.calc-add { margin-top: 1rem; }
.calc-add select { height: 44px; cursor: pointer; font-weight: 600; }

/* ---------- Settings / How ---------- */
.calc-settings summary, .calc-how summary {
    cursor: pointer; font-weight: 700; color: var(--ink); list-style: none;
    display: flex; align-items: center; min-height: 24px;
}
.calc-settings summary::-webkit-details-marker, .calc-how summary::-webkit-details-marker { display: none; }
.calc-settings summary::after, .calc-how summary::after { content: '+'; margin-inline-start: auto; font-size: 1.2rem; font-weight: 400; color: var(--muted); }
.calc-settings[open] summary::after, .calc-how[open] summary::after { content: '−'; }
.calc-settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem 1rem; margin-top: 1rem; }
.calc-settings-grid label { display: grid; gap: .35rem; margin: 0; }
.calc-settings-grid label span { font-size: .85rem; font-weight: 600; color: var(--muted); }
.calc-how ul { margin: .85rem 0 0; padding-inline-start: 1.1rem; color: var(--muted); line-height: 1.85; font-size: .9rem; }

/* ---------- Results ---------- */
.calc-result { background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: 10px; padding: 1.25rem; }
.calc-result h2 { color: var(--ink); font-size: 1.1rem; margin: 0 0 .75rem; }
.calc-big { display: grid; }
.calc-big-item { display: grid; gap: .1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.calc-big-item:first-child { padding-top: 0; }
.calc-big-item small { color: var(--muted); font-size: .85rem; font-weight: 600; }
.calc-big-item strong { font-size: 1.75rem; line-height: 1.25; color: var(--ink); font-family: var(--font-heading); font-variant-numeric: tabular-nums; }
.calc-big-item strong em { font-style: normal; font-size: .9rem; font-weight: 600; color: var(--muted); }
.calc-note { color: var(--muted); font-size: .85rem; }
.calc-details { margin: .5rem 0 0; display: grid; }
.calc-details div { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; font-size: .9rem; }
.calc-details dt { color: var(--muted); }
.calc-details dd { margin: 0; font-weight: 700; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.calc-disclaimer { margin: .75rem 0 1rem; padding: .7rem .85rem; border-radius: 8px; background: var(--canvas); font-size: .85rem; line-height: 1.75; color: var(--muted); }
.calc-result.is-empty .calc-big-item strong { color: var(--line-strong); }

.calc-actions { display: grid; gap: .5rem; }
.calc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    height: 44px; padding: 0 1rem; border-radius: 8px; border: 1px solid transparent;
    font-family: inherit; font-weight: 700; font-size: .95rem; text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.calc-btn:disabled { opacity: .5; cursor: not-allowed; }
.calc-btn-wa { background: #1fa855; color: #fff; }
.calc-btn-wa:hover:not(:disabled) { background: #188a46; color: #fff; }
.calc-btn-primary { background: var(--brand); color: #fff; }
.calc-btn-primary:hover { background: #2b2b4d; color: #fff; }
.calc-btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.calc-btn-ghost:hover { border-color: var(--ink); color: var(--ink); }

/* ---------- Mobile mini summary ---------- */
.calc-mini {
    position: fixed; z-index: 990;
    left: 10px; right: 10px; bottom: 10px;
    display: flex; align-items: center; gap: .9rem;
    padding: .55rem .6rem .55rem .9rem;
    border-radius: 10px;
    background: var(--brand); color: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .3);
    font-size: .82rem;
}
.calc-mini[hidden] { display: none; }
.calc-mini span { white-space: nowrap; color: rgba(255, 255, 255, .8); }
.calc-mini b { font-size: .98rem; color: #fff; font-variant-numeric: tabular-nums; }
.calc-mini button {
    margin-inline-start: auto; border: 0; border-radius: 8px; height: 36px;
    padding: 0 .85rem; background: #fff; color: var(--brand);
    font-family: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; white-space: nowrap;
}
body.calc-mini-on .whatsapp-float { transform: translateY(-62px); transition: transform .2s ease; }

/* ---------- Dark mode ---------- */
body.dark-mode .calc-section, body.dark-mode .calc-mini { --ink: #e2e8f0; --muted: #94a3b8; --line: rgba(255, 255, 255, .1); --line-strong: rgba(255, 255, 255, .22); --surface: #0b1222; --canvas: #070c18; }
body.dark-mode .calc-preset.is-active { background: #e2e8f0; border-color: #e2e8f0; color: #0b1222; }
body.dark-mode .calc-btn-primary { background: #e2e8f0; color: #0b1222; }
body.dark-mode .calc-result { border-top-color: #e2e8f0; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .calc-layout { grid-template-columns: minmax(0, 1fr); }
    .calc-side { position: static; }
}
@media (max-width: 720px) {
    .calc-hero { padding: calc(var(--header-height) + 1.5rem) 0 1.75rem; }
    .calc-section { padding-top: 1rem; }
    .calc-card { padding: 1rem; }
    .calc-presets { flex-wrap: nowrap; overflow-x: auto; margin-inline: -1rem; padding-inline: 1rem; scrollbar-width: none; }
    .calc-presets::-webkit-scrollbar { display: none; }
    .calc-preset { flex: none; }
    .calc-table-head { display: none; }
    /* each appliance: name on top, four labelled fields below */
    .calc-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-template-areas: "name name name rm" "qty w d n";
        row-gap: .45rem; padding: .75rem 0;
    }
    .calc-name { grid-area: name; }
    .calc-remove { grid-area: rm; justify-self: end; }
    .calc-f-qty { grid-area: qty; } .calc-f-w { grid-area: w; } .calc-f-d { grid-area: d; } .calc-f-n { grid-area: n; }
    .calc-f-cap { display: block; font-size: .72rem; font-weight: 600; color: var(--muted); margin-bottom: .2rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .calc-f input, .calc-name-input, .calc-add select, .calc-settings select { font-size: 16px; }
    .calc-settings-grid { grid-template-columns: 1fr; }
}
/* very small phones: keep the result bar inside the screen */
@media (max-width: 380px) {
    .calc-mini { gap: .5rem; padding-inline: .7rem .5rem; font-size: .74rem; }
    .calc-mini b { font-size: .88rem; }
    .calc-mini button { padding: 0 .6rem; }
}
@media (prefers-reduced-motion: reduce) {
    .calc-row.is-new { animation: none; }
    .calc-preset, .calc-btn { transition: none; }
}

/* ---------- Coming from the quote form ---------- */
.calc-from-quote {
    display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: .9rem 1.1rem;
    background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--brand); border-radius: 10px;
}
.calc-from-quote > i { color: var(--brand); font-size: 1.3rem; }
.calc-from-quote p { margin: 0; flex: 1; color: var(--muted); font-size: .9rem; line-height: 1.7; }
.calc-from-quote strong { display: block; color: var(--ink); font-size: .98rem; }
.calc-from-quote .calc-btn { flex: none; width: auto; }
@media (max-width: 720px) {
    .calc-from-quote { flex-wrap: wrap; }
    .calc-from-quote .calc-btn { width: 100%; }
}

/* ---------- Interactive guide ---------- */
.calc-tour-btn {
    margin-top: 1.1rem; display: inline-flex; align-items: center; gap: .55rem;
    padding: .55rem 1rem; border: 1px solid rgba(255, 255, 255, .35); border-radius: 8px;
    background: transparent; color: #fff; font-family: inherit; font-size: .92rem; font-weight: 600; cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}
.calc-tour-btn:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }
.calc-tour-btn i { font-size: 1.1rem; }

.ct-spot {
    position: fixed; z-index: 100001; pointer-events: none; border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(10, 12, 28, .58);
    transition: top .35s cubic-bezier(.2, .8, .2, 1), left .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1), height .35s cubic-bezier(.2, .8, .2, 1);
}
.ct-spot.is-try::after {
    content: ""; position: absolute; inset: -4px; border: 2px solid #fff; border-radius: 13px;
    animation: ctRing 1.6s ease-out infinite;
}
@keyframes ctRing { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.04); } }

.ct-tip {
    position: fixed; z-index: 100002; width: 340px; max-width: calc(100vw - 20px);
    background: #fff; color: #0f172a; border-radius: 10px; padding: 1rem 1.1rem 1rem;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .3); outline: none; font-family: inherit;
    opacity: 0; transform: translateY(6px);
}
.ct-tip.is-in { opacity: 1; transform: none; transition: opacity .25s ease, transform .3s ease, top .35s cubic-bezier(.2, .8, .2, 1), left .35s cubic-bezier(.2, .8, .2, 1); }
.ct-tip.is-sheet { top: auto !important; left: 10px !important; right: 10px; bottom: 10px; width: auto; max-width: none; }
.ct-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.ct-count { font-size: .78rem; font-weight: 600; color: #64748b; }
.ct-x { border: 0; background: transparent; color: #64748b; width: 32px; height: 32px; border-radius: 6px; cursor: pointer; margin-inline-end: -.4rem; }
.ct-x:hover { background: #f1f2f5; color: #0f172a; }
.ct-tip h3 { margin: 0 0 .3rem; font-size: 1.05rem; color: #0f172a; }
.ct-text { margin: 0; color: #334155; font-size: .9rem; line-height: 1.75; }
.ct-try { display: none; align-items: center; gap: .5rem; margin: .7rem 0 0; padding: .35rem .7rem; border-radius: 6px; background: #f1f2f5; color: #1d1d35; font-size: .84rem; font-weight: 600; width: fit-content; }
.ct-tip.has-try .ct-try { display: flex; }
.ct-dot { width: 8px; height: 8px; border-radius: 50%; background: #1d1d35; animation: ctDot 1.2s ease-in-out infinite; }
@keyframes ctDot { 50% { transform: scale(1.6); opacity: .5; } }
.ct-tip.is-good .ct-try { background: #dcfce7; color: #166534; }
.ct-tip.is-good .ct-dot { background: #16a34a; animation: none; }
.ct-bar { height: 3px; background: #eceef2; border-radius: 3px; margin: .9rem 0 .8rem; overflow: hidden; }
.ct-bar span { display: block; height: 100%; background: #1d1d35; border-radius: inherit; transition: width .35s ease; }
.ct-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.ct-actions button { font-family: inherit; font-size: .88rem; font-weight: 700; border-radius: 8px; height: 38px; padding: 0 1rem; cursor: pointer; }
.ct-next { border: 0; background: #1d1d35; color: #fff; }
.ct-next:hover { background: #2c2c50; }
.ct-prev { border: 1px solid #d5d9e3; background: #fff; color: #1d1d35; }
.ct-actions button:focus-visible, .ct-x:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
body.ct-on .whatsapp-float { opacity: 0; pointer-events: none; }

body.dark-mode .calc-from-quote { background: #0b1222; border-color: rgba(255, 255, 255, .1); border-inline-start-color: #e2e8f0; }
body.dark-mode .calc-from-quote strong, body.dark-mode .calc-from-quote > i { color: #e2e8f0; }
body.dark-mode .ct-tip { background: #111a2e; color: #e2e8f0; }
body.dark-mode .ct-tip h3 { color: #fff; }
body.dark-mode .ct-text { color: #cbd5e1; }
body.dark-mode .ct-try { background: rgba(255, 255, 255, .08); color: #e2e8f0; }
body.dark-mode .ct-dot { background: #e2e8f0; }
body.dark-mode .ct-bar { background: rgba(255, 255, 255, .1); }
body.dark-mode .ct-bar span, body.dark-mode .ct-next { background: #e2e8f0; color: #0f172a; }
body.dark-mode .ct-prev { background: transparent; border-color: rgba(255, 255, 255, .2); color: #e2e8f0; }

@media (prefers-reduced-motion: reduce) {
    .ct-spot, .ct-tip.is-in, .ct-bar span { transition: none; }
    .ct-spot.is-try::after, .ct-dot { animation: none; }
}