/* Balcon Makeover: the estimator (plan + price left, controls right), stages, packages, visit. */
.est { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 72px); align-items: start; padding-block-end: clamp(64px, 11vh, 128px); }
.est__plan { position: sticky; top: 24px; display: grid; gap: 18px; padding: clamp(18px, 2vw, 28px); border-radius: 16px; background: #fff; box-shadow: 0 1px 0 rgba(18,20,18,.06), 0 20px 50px -30px rgba(18,20,18,.35); }
.plan { margin: 0; display: grid; gap: 8px; }
.plan__svg { inline-size: 100%; block-size: auto; aspect-ratio: 840 / 500; border-radius: 10px; background: #f3f2ec; }
.plan__cap { font: 400 13px/1.4 var(--font-text); color: var(--encre-soft); }
.p-floor { fill: #ebe7dc; } .p-tile { stroke: rgba(18,20,18,.06); stroke-width: 1; }
.p-house { fill: none; stroke: var(--encre); stroke-width: 8; stroke-linejoin: round; }
.p-door { stroke: #f3f2ec; stroke-width: 10; } .p-swing { fill: none; stroke: rgba(18,20,18,.3); stroke-width: 1.5; stroke-dasharray: 4 4; }
.p-rail { stroke: var(--encre); stroke-width: 3; stroke-dasharray: 2 5; stroke-linecap: round; }
.p-bac { fill: #c98e66; stroke: #9c6440; stroke-width: 1.5; }
.p-leaf { fill: var(--zellige); opacity: .85; }
.p-wall { fill: #cfe0d4; stroke: var(--zellige); stroke-width: 1.5; }
.p-drip { fill: none; stroke: #3b7bb8; stroke-width: 1.5; stroke-dasharray: 6 5; }
.p-auto { fill: #3b7bb8; }
.p-scale { fill: none; stroke: rgba(18,20,18,.45); stroke-width: 1.5; }
.p-bench { fill: #fff; stroke: var(--encre); stroke-width: 1.5; }
.p-light { fill: #e7b34b; stroke: #b07f1c; stroke-width: 1; }
.p-t { font: 500 15px/1 var(--font-text); fill: var(--encre); } .p-t--soft { fill: rgba(18,20,18,.5); font-size: 13px; }
.plan__svg * { transition: x .35s var(--ease-out), y .35s var(--ease-out), width .35s var(--ease-out), height .35s var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .plan__svg * { transition: none; } }
.est__price { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 24px; }
.est__price .small { margin: 0 0 6px; }
.est__price .price-big { margin: 0; font-variant-numeric: tabular-nums; }
.est__tier { margin: -4px 0 0; font: 400 15px/1.45 var(--font-text); color: var(--encre-soft); }
.est__tier b { color: var(--encre); font-weight: 600; }
.tiers { display: flex; gap: 0; margin: 0; padding: 3px; border-radius: 99px; background: #f0eee7; }
.tiers li { display: grid; justify-items: center; gap: 2px; padding: 8px 14px; border-radius: 99px; transition: background-color .3s var(--ease-out), color .3s var(--ease-out); }
.tiers b { font: 600 13px/1 var(--font-text); } .tiers span { font: 400 12px/1 var(--font-text); opacity: .65; }
.tiers li.is-on { background: var(--zellige); color: #f6f6f2; } .tiers li.is-on span { opacity: .8; }

.est__ctrl { display: grid; gap: clamp(32px, 4.4vh, 44px); min-inline-size: 0; }
.slide { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; align-items: baseline; }
.slide label { font: 500 15px/1.3 var(--font-text); }
.slide output { font: 400 24px/1 var(--font-serif); font-variant-numeric: tabular-nums; }
.slide input { grid-column: 1 / -1; }
.slide input[type="range"] { --p: 50%; appearance: none; inline-size: 100%; block-size: 28px; margin: 0; background: none; cursor: pointer; }
.slide input[type="range"]::-webkit-slider-runnable-track { block-size: 4px; border-radius: 99px; background: linear-gradient(var(--zellige), var(--zellige)) 0 / var(--p) 100% no-repeat, rgba(18,20,18,.14); }
.slide input[type="range"]::-moz-range-track { block-size: 4px; border-radius: 99px; background: rgba(18,20,18,.14); }
.slide input[type="range"]::-moz-range-progress { block-size: 4px; border-radius: 99px; background: var(--zellige); }
.slide input[type="range"]::-webkit-slider-thumb { appearance: none; inline-size: 26px; block-size: 26px; margin-block-start: -11px; border-radius: 50%; background: #fff; border: 1.5px solid var(--zellige); box-shadow: 0 4px 12px -4px rgba(18,20,18,.35); transition: scale .2s var(--ease-out); }
.slide input[type="range"]::-moz-range-thumb { inline-size: 24px; block-size: 24px; border-radius: 50%; background: #fff; border: 1.5px solid var(--zellige); }
.slide input[type="range"]:active::-webkit-slider-thumb { scale: 1.1; }
.slide input[type="range"]:focus-visible { outline: none; } .slide input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--zellige); outline-offset: 3px; }

.inc { display: grid; gap: 16px; padding-block-start: 28px; border-block-start: 1px solid rgba(18,20,18,.15); }
.inc__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font: 400 15px/1.45 var(--font-text); }
.inc__list li { display: flex; gap: 12px; align-items: flex-start; }
.inc__list svg { inline-size: 20px; block-size: 20px; flex: none; margin-block-start: 1px; fill: none; stroke: var(--zellige); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.inc__list a { color: inherit; }
.inc__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-block-start: 6px; }
@media (max-width: 1000px) { .est { grid-template-columns: 1fr; } .est__plan { position: static; } }
@media (max-width: 600px) { .tiers li { padding: 7px 10px; } .est__price { align-items: start; flex-direction: column; } }

/* mobile: the price stays in view while you set the options */
.mbar { position: fixed; z-index: 40; inset-inline: 12px; inset-block-end: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 10px; padding-inline: 18px 10px; border-radius: 14px; background: var(--encre); color: #f6f6f2; box-shadow: 0 20px 40px -16px rgba(0,0,0,.45); translate: 0 calc(100% + 20px); transition: translate .45s var(--ease-reveal); }
.mbar.is-on { translate: 0 0; }
.mbar span { display: grid; gap: 3px; } .mbar b { font: 400 24px/1 var(--font-serif); } .mbar small { font: 400 13px/1 var(--font-text); opacity: .7; }
.mbar .b { padding: 13px 16px; font-size: 15px; }
@media (min-width: 1000px) { .mbar { display: none; } }

/* stages */
.ba--steps { aspect-ratio: 3 / 2; max-block-size: 78vh; inline-size: 100%; }
.ba--steps .ba__after img { transition: opacity .4s var(--ease-out); }
.stages { margin-block-start: 18px; }
@media (max-width: 600px) { .stages { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding-inline: 20px; scrollbar-width: none; } .stages .choice { flex: none; } }

/* packages: three columns separated by hairlines, the middle one marked */
.packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid rgba(18,20,18,.15); }
.pk { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 12px; padding: 32px clamp(18px, 2.4vw, 36px) 36px; }
.pk + .pk { border-inline-start: 1px solid rgba(18,20,18,.15); }
.pk--main { background: #fff; }
.pk__name { margin: 0; font: 400 30px/1.1 var(--font-serif); letter-spacing: -.015em; }
.pk__price { margin: 0; font: 400 clamp(36px, 3.2vw, 48px)/1 var(--font-serif); letter-spacing: -.02em; }
.pk__for { margin: 0; font: 400 15px/1.4 var(--font-text); color: var(--encre-soft); }
.pk__list { display: grid; gap: 10px; margin: 8px 0 12px; padding: 0; list-style: none; font: 400 15px/1.4 var(--font-text); }
.pk__list li { padding-inline-start: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%230E4A3A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 2px / 16px; }
.pk .b { justify-self: start; }
.pk__care { margin-block-start: 22px; color: var(--encre-soft); }
@media (max-width: 900px) { .packs { grid-template-columns: 1fr; } .pk + .pk { border-inline-start: 0; border-block-start: 1px solid rgba(18,20,18,.15); } .pk { padding-inline: 4px; } .pk--main { padding-inline: 16px; margin-inline: -16px; } }

.visit .days .day span { background: rgba(246,246,242,.08); border-color: rgba(246,246,242,.3); color: #f6f6f2; }
.visit .day input:checked + span { background: #f6f6f2; color: var(--encre); border-color: #f6f6f2; }
.visit .day.is-full span { background: none; }
.form__city { margin: -6px 0 0; font: 400 14px/1.45 var(--font-text); color: rgba(246,246,242,.85); }
.visit .note { color: rgba(246,246,242,.9); }
.p-t { font-size: 18px; } .p-t--soft { font-size: 15px; }
@media (max-width: 600px) { .p-t { font-size: 30px; } .p-t--soft { font-size: 26px; } }

/* right-to-left: the slider fill starts on the right, the package ticks sit on the right */
[dir="rtl"] .slide input[type="range"]::-webkit-slider-runnable-track { background-position: 100% 0; }
[dir="rtl"] .pk__list li { background-position: right 0 top 2px; }