/* =========================================================
   ARAM MIZURI ARCHITECTURE — estimate.css
   The cost estimator (/estimate), on top of project.css (tokens, top bar,
   footer, buttons) and engage.css.
   ========================================================= */

.es { max-width: var(--wide); margin: 0 auto; padding: clamp(110px, 18vh, 170px) var(--gutter) clamp(72px, 12vh, 130px); }

.es-head { max-width: 760px; }
.es-title {
    font-size: clamp(36px, 5.6vw, 74px); font-weight: 200; color: #fff;
    letter-spacing: -.025em; line-height: 1.06;
}
[dir="rtl"] .es-title { letter-spacing: 0; line-height: 1.3; font-weight: 400; }
.es-intro { margin-top: 20px; max-width: 60ch; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.8; font-weight: 300; color: rgba(255,255,255,.7); }

.es-body {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px);
    align-items: start; margin-top: clamp(40px, 7vh, 72px);
}

/* ---- The answers ----------------------------------------------- */
.es-form { display: grid; gap: 26px; }
.es-field { border: 0; min-width: 0; }
.es-label { display: block; margin-bottom: 10px; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
[dir="rtl"] .es-label { letter-spacing: 0; font-size: 14px; }

.es-unit { position: relative; max-width: 320px; }
.es-unit[hidden] { display: none; }
.es-unit input {
    width: 100%; height: 56px; padding: 0 56px 0 18px; border-radius: 14px;
    font: 300 22px/1 var(--font); color: #fff; text-align: left;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.14);
    transition: border-color .25s;
}
.es-unit input:focus { outline: none; border-color: var(--gold); }
.es-unit span { position: absolute; right: 18px; top: 50%; translate: 0 -50%; font-size: 14px; color: var(--muted); }
.es-unit { direction: ltr; }

.es-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.es-seg label, .es-finish, .es-switch { position: relative; cursor: pointer; }
.es-seg input, .es-finish input, .es-switch input { position: absolute; opacity: 0; pointer-events: none; }
.es-seg span {
    display: grid; place-items: center; width: 52px; height: 48px; border-radius: 12px;
    font-size: 16px; border: 1px solid rgba(255,255,255,.14); transition: border-color .2s, background .2s, color .2s;
}
.es-seg input:checked + span { border-color: var(--gold); background: rgba(245,197,24,.12); color: var(--gold); }
.es-seg input:focus-visible + span, .es-finish input:focus-visible ~ .es-finish__name, .es-switch input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }

.es-built { font-size: 14px; color: var(--muted); line-height: 1.6; }
.es-built b { font-size: 22px; font-weight: 300; color: #fff; }
.es-built span { display: block; margin-top: 2px; font-size: 13px; }
.es-check { display: inline-flex; align-items: center; gap: 10px; margin: 12px 0 10px; font-size: 14px; color: rgba(255,255,255,.8); cursor: pointer; }
.es-check input { width: 18px; height: 18px; accent-color: var(--gold); }

.es-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.es-step { display: inline-flex; align-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; overflow: hidden; }
.es-step button { width: 48px; height: 52px; font-size: 20px; color: var(--gold); transition: background .2s; }
.es-step button:hover { background: rgba(245,197,24,.1); }
.es-step input {
    width: 56px; height: 52px; text-align: center; border: 0; background: transparent;
    font: 300 20px/1 var(--font); color: #fff; -moz-appearance: textfield;
}
.es-step input::-webkit-outer-spin-button, .es-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.es-finishes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.es-finish {
    display: grid; gap: 4px; padding: 16px; border-radius: 14px;
    border: 1px solid rgba(255,255,255,.14); transition: border-color .2s, background .2s;
}
.es-finish:has(input:checked) { border-color: var(--gold); background: rgba(245,197,24,.08); }
.es-finish__name { font-size: 16px; color: #fff; }
.es-finish:has(input:checked) .es-finish__name { color: var(--gold); }
.es-finish__rate { font-size: 12px; color: var(--muted); }

.es-toggles { display: flex; flex-wrap: wrap; gap: 10px; }
.es-switch span {
    display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 18px 0 12px; border-radius: 100px;
    border: 1px solid rgba(255,255,255,.14); font-size: 14px; transition: border-color .2s, color .2s;
}
.es-switch span::before {
    content: ''; width: 34px; height: 20px; border-radius: 10px; flex: none;
    background: rgba(255,255,255,.14) radial-gradient(circle at 10px 50%, #fff 7px, transparent 7.5px);
    transition: background .2s;
}
.es-switch input:checked + span { border-color: var(--gold); color: var(--gold); }
.es-switch input:checked + span::before { background: var(--gold) radial-gradient(circle at 24px 50%, #111 7px, transparent 7.5px); }
[dir="rtl"] .es-switch span { padding: 0 12px 0 18px; }

.es-go { justify-self: start; }
.es-form.is-live .es-go { display: none; }

/* ---- The result ------------------------------------------------ */
.es-result {
    position: sticky; top: 90px;
    padding: clamp(22px, 3vw, 32px); border-radius: 22px;
    background: linear-gradient(160deg, rgba(245,197,24,.07), rgba(255,255,255,.025) 45%);
    border: 1px solid rgba(245,197,24,.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.es-empty { font-size: 15px; line-height: 1.7; font-weight: 300; color: var(--muted); }
.es-figure__label { font-size: 13px; color: var(--muted); }
.es-figure__usd { margin-top: 4px; font-size: clamp(26px, 3vw, 38px); font-weight: 200; color: #fff; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.es-figure__iqd { margin-top: 2px; font-size: 14px; color: rgba(245,197,24,.85); }
.es-figure--fee { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.es-figure--fee .es-figure__usd { font-size: clamp(20px, 2.2vw, 26px); }
.es-figure__note { margin-top: 4px; font-size: 12px; color: var(--faint); }
.es-lines { list-style: none; margin-top: 16px; display: grid; gap: 6px; font-size: 13px; color: var(--muted); }
.es-lines li { display: flex; justify-content: space-between; gap: 12px; }
.es-lines bdi { color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; white-space: nowrap; }
.es-note { margin-top: 20px; font-size: 12px; line-height: 1.6; color: var(--faint); }

.es-send { margin-top: 24px; }
.es-send[hidden] { display: none; }
.es-send__open { width: 100%; justify-content: center; }
.es-send__form { display: grid; gap: 10px; }
.es-send__form[hidden] { display: none; }
.es-send__title { font-size: 15px; color: #fff; margin-bottom: 4px; }
.es-send__form input, .es-send__form textarea {
    width: 100%; padding: 13px 16px; border-radius: 12px; font: 300 15px/1.4 var(--font); color: #fff;
    background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.14); resize: vertical;
}
.es-send__form input:focus, .es-send__form textarea:focus { outline: none; border-color: var(--gold); }
.es-send__form .pp-btn { justify-content: center; }
.es-send__hint { font-size: 12px; color: var(--faint); }
.es-send__status { font-size: 14px; color: #b9f0c9; }
.es-send__status.is-error { color: #ff8a8a; }
.es-send__form.is-sent > :not(.es-send__status) { display: none; }
.form-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---- The house, drawn from the answers (estimate-house.js) ---------- */
.es-house { margin: -6px -8px 18px; }
.es-house svg { display: block; width: 100%; height: auto; overflow: visible; }
.es-house .h-plot { fill: rgba(255,255,255,.025); stroke: rgba(255,255,255,.42); stroke-width: 1; stroke-dasharray: 12 4 2 4; }
.es-house .h-dig { fill: url(#esHatch); stroke: rgba(245,197,24,.6); stroke-width: 1; stroke-dasharray: 4 3; }
.es-house .h-hatch { stroke: rgba(245,197,24,.4); stroke-width: 1; }
.es-house .h-ground { stroke: rgba(255,255,255,.75); stroke-width: 1.6; }
/* solid, so the house hides what stands behind it */
.es-house .h-face { stroke: none; }
.es-house .h-face--front { fill: #2a2411; }
.es-house .h-face--side { fill: #1c190e; }
.es-house .h-roof { fill: #23211a; stroke: rgba(245,197,24,.6); stroke-width: 1; }
.es-house .h-floor { stroke: rgba(245,197,24,.45); stroke-width: 1; }
.es-house .h-win { fill: rgba(9,9,9,.65); stroke: rgba(245,197,24,.7); stroke-width: .8; }
.es-house .h-door { fill: rgba(245,197,24,.3); stroke: rgba(245,197,24,.85); stroke-width: .8; }
.es-house .h-edge { stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; }
.es-house .h-edge--crown { stroke-width: 1.8; }
.es-house .h-pool { fill: rgba(255,255,255,.04); stroke: rgba(255,255,255,.6); stroke-width: 1; }
.es-house .h-water { fill: rgba(120,190,230,.16); stroke: rgba(150,205,235,.55); stroke-width: .8; }
.es-house .h-ripple { stroke: rgba(170,215,240,.55); stroke-width: .8; stroke-linecap: round; }
.es-house .h-tree { fill: none; stroke: rgba(255,255,255,.35); stroke-width: .8; }
.es-house .h-dim { stroke: rgba(255,255,255,.55); stroke-width: .8; }
.es-house .h-label {
    fill: rgba(255,255,255,.7); font-size: 11px; letter-spacing: .08em; font-family: var(--font);
    /* a halo of the panel's colour, so a word stays legible over the lines it crosses */
    paint-order: stroke; stroke: #14120b; stroke-width: 4px; stroke-linejoin: round;
}
.es-house .h-label--big { fill: var(--gold); font-size: 15px; letter-spacing: .04em; }
.es-house .h-label--hint { fill: rgba(255,255,255,.45); font-size: 13px; letter-spacing: 0; }
[dir="rtl"] .es-house .h-label { letter-spacing: 0; font-size: 12px; }
[dir="rtl"] .es-house .h-label--big { font-size: 16px; }

/* ---- Built on a plot like yours ------------------------------------ */
.es-like { margin-top: clamp(56px, 9vh, 96px); padding-top: 34px; border-top: 1px solid var(--line); }
.es-like__title { font-size: clamp(26px, 3.2vw, 40px); font-weight: 200; color: #fff; letter-spacing: -.01em; }
[dir="rtl"] .es-like__title { letter-spacing: 0; font-weight: 400; }
.es-like__text { margin-top: 10px; font-size: 15px; font-weight: 300; color: var(--muted); }
.es-like__grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 26px; }
.es-like__card { display: block; }
.es-like__pic { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--panel); }
.es-like__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.es-like__card:hover .es-like__pic img { transform: scale(1.04); }
.es-like__name { display: block; margin-top: 14px; font-size: 18px; font-weight: 300; color: #fff; transition: color .25s; }
.es-like__card:hover .es-like__name { color: var(--gold); }
.es-like__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.es-like__plot { color: rgba(245,197,24,.85); }

@media (max-width: 900px) {
    .es-body { grid-template-columns: 1fr; }
    .es-result { position: static; }
    .es-like__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-height: 820px) and (min-width: 901px) {
    .es-result { position: static; }          /* too tall to stay put on a short screen */
}
@media (max-width: 560px) {
    .es-like__grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
    .es-finishes { grid-template-columns: 1fr; }
    .es-finish { grid-template-columns: 1fr auto; align-items: baseline; }
}