/* Sjednání pojištění na webu smluv (Front:Sale). Navazuje na styles.css (tokeny --b, --n, --g, --line, --mut, --ice). */

.sale{width:min(1180px,calc(100% - 40px));margin:auto;padding:46px 0 80px}

/* ── Úvod ── */
.sale-hero{display:grid;grid-template-columns:1.15fr .85fr;gap:50px;align-items:center;margin-bottom:38px}
.sale-hero h1{font-size:58px;line-height:1.04;letter-spacing:-.055em;margin:18px 0 16px}
.sale-hero h1 em{font-style:normal;color:var(--b)}
.sale-hero p{color:var(--mut);font-size:18px;line-height:1.6;margin:0;max-width:560px}
.sale-hero__art{position:relative;height:250px}
.sale-hero__art::before{content:"";position:absolute;inset:10px 0 0 30px;border-radius:50%;background:radial-gradient(closest-side,#e6f0ff,transparent);z-index:-1}
.sale-hero__art svg{width:100%;height:100%}
.sale-progress{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px;padding:0;list-style:none}
.sale-progress li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:800;color:var(--mut);background:#fff;border:1px solid var(--line);border-radius:99px;padding:7px 13px 7px 7px}
.sale-progress li b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ice);color:var(--mut);font-size:11px}
.sale-progress li.on{color:var(--n);border-color:#b9d3fb}
.sale-progress li.on b{background:var(--b);color:#fff}
.sale-progress li.ok b{background:var(--g);color:#fff}

/* ── Nadpisy sekcí ── */
.sale-step{display:flex;align-items:baseline;gap:12px;margin:0 0 16px}
.sale-step h2{margin:0;font-size:24px;letter-spacing:-.03em}
.sale-step span{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--b);color:#fff;font-weight:900;font-size:13px;transform:translateY(-3px)}
.sale-step p{margin:0 0 0 auto;color:var(--mut);font-size:14px}

/* ── Dlaždice typů pojištění ── */
.sale-types{margin-bottom:34px}
.sale-type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:14px}
.sale-type{position:relative;display:flex;flex-direction:column;gap:6px;padding:20px 18px 18px;border:1px solid var(--line);border-radius:18px;background:#fff;color:var(--n);text-decoration:none;transition:border-color .15s,box-shadow .15s,transform .15s}
.sale-type:hover{border-color:#b9d3fb;box-shadow:0 12px 30px -18px #0761e966;transform:translateY(-2px)}
.sale-type i{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--ice);color:var(--b);margin-bottom:8px}
.sale-type i svg{width:24px;height:24px}
.sale-type b{font-size:16px;line-height:1.3;letter-spacing:-.01em}
.sale-type small{color:var(--mut);font-size:13px}
.sale-type em{font-style:normal;margin-top:auto;padding-top:10px;font-weight:800;color:var(--b);font-size:14px}
.sale-type.is-active{border:2px solid var(--b);padding:19px 17px 17px;background:linear-gradient(180deg,#f2f7ff,#fff 70%);box-shadow:0 16px 34px -22px #0761e9aa}
.sale-type.is-active i{background:var(--b);color:#fff}
.sale-type__check{position:absolute;top:14px;right:14px;width:24px;height:24px;border-radius:50%;background:var(--b);color:#fff;display:grid;place-items:center}
.sale-type__check svg{width:14px;height:14px}

/* ── Karta se zařízením ── */
.sale-card{border:1px solid var(--line);border-radius:22px;padding:28px;background:#fff;box-shadow:0 20px 50px -40px #06285c55;margin-bottom:34px;scroll-margin-top:100px}
.sale-form{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.2fr auto;gap:14px;align-items:end}
.sale-form .bf-field input,.sale-form .bf-field select{height:50px}
.sale-price-input{position:relative}
.sale-price-input input{padding-right:46px}
.sale-price-input::after{content:attr(data-currency);position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--mut);font-weight:700;font-size:13px;pointer-events:none}
.sale-form .btn{height:50px;align-items:center;white-space:nowrap}
.sale-form__hint{grid-column:1/-1;margin:2px 0 0;color:var(--mut);font-size:13px}

/* ── Výsledek ── */
.sale-offers{position:relative;scroll-margin-top:100px}
.sale-offers.is-loading{min-height:120px;pointer-events:none}
.sale-offers.is-loading>*{opacity:.35;transition:opacity .2s}

/* ── Načítání ── */
@keyframes sale-spin{to{transform:rotate(360deg)}}
.sale-offers.is-loading::after,.sale-type.is-loading::after{content:"";position:absolute;width:34px;height:34px;border-radius:50%;border:3px solid #d6e4fa;border-top-color:var(--b);animation:sale-spin .7s linear infinite}
.sale-offers.is-loading::after{left:50%;top:50%;margin:-17px 0 0 -17px;z-index:2}
#sale-flow.is-loading .sale-card,#sale-flow.is-loading .sale-offers{opacity:.4;pointer-events:none;transition:opacity .2s}
#sale-flow.is-loading .sale-type{pointer-events:none}
.sale-type.is-loading{border-color:#b9d3fb}
.sale-type.is-loading::after{top:14px;right:14px;width:20px;height:20px;border-width:3px}
.sale-type.is-loading .sale-type__check{display:none}
.sale-offers__links{margin-left:auto;display:flex;gap:16px}
.sale-offers__links a{color:var(--b);font-weight:800;font-size:14px;text-decoration:none}
.sale-offer-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start}
.sale-offer{position:relative;border:1px solid var(--line);border-radius:22px;padding:26px;background:#fff}
.sale-offer.is-chosen{border:2px solid var(--b);padding:25px;background:linear-gradient(160deg,#f1f6ff 0%,#fff 55%);box-shadow:0 26px 60px -40px #0761e9cc}
.sale-offer__badge{position:absolute;top:20px;right:20px;background:#e7faf2;color:#07975a;font-size:12px;font-weight:900;border-radius:99px;padding:6px 11px}
.sale-offer__head{display:flex;gap:14px;align-items:center;margin-bottom:6px;padding-right:110px}
.sale-offer__head i{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--b);color:#fff}
.sale-offer__head i svg{width:24px;height:24px}
.sale-offer__head h3{margin:0;font-size:20px;letter-spacing:-.02em;line-height:1.25}
.sale-offer__head small{color:var(--mut)}
.sale-offer__price{display:flex;align-items:baseline;gap:10px;margin:18px 0 4px}
.sale-offer__price b{font-size:46px;letter-spacing:-.04em;line-height:1}
.sale-offer__price span{color:var(--mut);font-weight:700}
.sale-offer__facts{list-style:none;padding:0;margin:18px 0 22px;border-top:1px solid var(--line)}
.sale-offer__facts li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.sale-offer__facts li span{color:var(--mut)}
.sale-offer__facts li b{text-align:right}
.sale-offer .btn{width:100%;justify-content:center;font-size:16px;padding:17px 20px}
.sale-offer__note{margin:12px 0 0;color:var(--mut);font-size:12px;text-align:center}

.sale-others{display:flex;flex-direction:column;gap:12px}
.sale-others>small{color:var(--mut);font-weight:900;font-size:11px;letter-spacing:.12em}
.sale-other{display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:16px;padding:15px 16px;text-decoration:none;color:var(--n);background:#fff;transition:border-color .15s,background .15s}
.sale-other:hover{border-color:#b9d3fb;background:#f8fbff}
.sale-other i{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--ice);color:var(--b)}
.sale-other i svg{width:19px;height:19px}
.sale-other div{flex:1;min-width:0}
.sale-other div b{display:block;font-size:14px;line-height:1.3}
.sale-other div small{color:var(--mut);font-size:12px}
.sale-other>em{font-style:normal;font-weight:900;white-space:nowrap}
.sale-other>span{color:var(--b);font-weight:900}

.sale-alert{display:flex;gap:14px;align-items:flex-start;border:1px solid #ffd9a8;background:#fff8ee;border-radius:16px;padding:18px 20px;color:#7a4a00}
.sale-alert svg{flex:none;width:22px;height:22px;margin-top:1px}
.sale-alert p{margin:0;line-height:1.5}
.sale-empty{border:1px dashed var(--line);border-radius:22px;padding:34px;text-align:center;color:var(--mut)}
.sale-empty b{display:block;color:var(--n);font-size:17px;margin-bottom:6px}

/* ── Výhody ── */
.sale-perks{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.sale-perks div{background:var(--ice);border-radius:16px;padding:18px}
.sale-perks b{display:block;margin-bottom:4px}
.sale-perks span{color:var(--mut);font-size:13px;line-height:1.5}

/* ── Údaje ── */
.sale-firm{border:1px solid var(--line);border-radius:14px;padding:16px;margin:4px 0 14px;background:var(--ice)}
.sale-firm .bf-row:last-child{margin-bottom:0}
.sale-section-label{display:block;margin:26px 0 12px;color:var(--b);font-size:11px;font-weight:900;letter-spacing:.12em}
.sale-agree{display:flex;gap:12px;align-items:flex-start;margin-top:22px;padding:16px;border:1px solid var(--line);border-radius:14px;font-size:14px;line-height:1.5;cursor:pointer}
.sale-agree input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--b)}
.sale-agree a{color:var(--b);font-weight:700}
.sale-device-pill{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;margin:14px 0 6px}
.sale-device-pill i{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--b);color:#fff}
.sale-device-pill i svg{width:19px;height:19px}
.sale-device-pill b{display:block;font-size:14px}
.sale-device-pill small{color:var(--mut)}

@media(max-width:980px){
	.sale-form{grid-template-columns:1fr 1fr}
	.sale-form .btn{grid-column:1/-1;justify-content:center}
	.sale-offer-grid{grid-template-columns:1fr}
	.sale-perks{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
	.sale{padding-top:26px}
	.sale-hero{grid-template-columns:1fr;gap:0;margin-bottom:26px}
	.sale-hero h1{font-size:38px}
	.sale-hero p{font-size:16px}
	.sale-hero__art{display:none}
	.sale-step{flex-wrap:wrap}
	.sale-step p{margin-left:40px;flex-basis:100%}
	/* Dlaždice jako kompaktní řádky — ať je formulář blízko */
	.sale-type-grid{grid-template-columns:1fr;gap:8px}
	.sale-type{display:grid;grid-template-columns:40px 1fr auto;column-gap:12px;row-gap:2px;align-items:center;padding:12px 14px}
	.sale-type.is-active{padding:11px 13px}
	.sale-type i{grid-row:1/3;width:40px;height:40px;margin:0}
	.sale-type b{font-size:14px}
	.sale-type small{grid-column:2;font-size:12px}
	.sale-type em{grid-column:3;grid-row:1/3;padding:0;font-size:13px;text-align:right}
	.sale-type__check{display:none}
	.sale-type.is-loading::after{top:50%;right:auto;left:24px;margin-top:-10px}
	.sale-type.is-loading i{visibility:hidden}
	.sale-card{padding:20px 16px}
	.sale-form{grid-template-columns:1fr}
	.sale-offer,.sale-offer.is-chosen{padding:20px 18px}
	.sale-offer__head{padding-right:0;margin-top:28px}
	.sale-offer__badge{top:16px;right:auto;left:18px}
	.sale-offer__price b{font-size:38px}
	.sale-perks{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
	.sale-type,.sale-offers{transition:none}
	.sale-offers.is-loading::after,.sale-type.is-loading::after{animation-duration:2s}
	.sale-type:hover{transform:none}
}

/* ── Chyby ve formuláři údajů ── */
.bf-err{display:none;color:#c22943;font-size:12px;font-weight:700;line-height:1.4}
.has-error>.bf-err{display:block}
.bf-field.has-error input,.bf-field.has-error select{border-color:#e0475e;background:#fff8f9}
.bf-field.has-error input:focus,.bf-field.has-error select:focus{box-shadow:0 0 0 3px #ffe3e8}
.bf-field.has-error label{color:#c22943}
.sale-agree{flex-wrap:wrap}
.sale-agree .bf-err{flex-basis:100%;padding-left:32px}
.sale-agree.has-error{border-color:#e0475e;background:#fff8f9}
.sale-udaje .auth-err{margin-bottom:16px}

/* ── Doklady ── */
.checkout-steps.sale-steps-5{grid-template-columns:repeat(5,1fr)}
.sale-doc{position:relative;display:grid;grid-template-columns:52px 1fr auto;gap:16px;align-items:center;margin-top:14px;padding:18px;border:2px dashed #c9d8ec;border-radius:16px;background:#fbfdff;cursor:pointer;transition:border-color .15s,background .15s}
.sale-doc:hover{border-color:var(--b);background:#f4f8ff}
.sale-doc__input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sale-doc:focus-within{border-color:var(--b);box-shadow:0 0 0 3px #eaf2ff}
.sale-doc__ico{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--ice);color:var(--b)}
.sale-doc__ico svg{width:24px;height:24px}
.sale-doc__body{display:flex;flex-direction:column;gap:3px;min-width:0}
.sale-doc__body b{font-size:15px}
.sale-doc__body b em{font-style:normal;font-weight:700;font-size:11px;color:var(--mut);background:var(--ice);border-radius:99px;padding:2px 8px;margin-left:6px;vertical-align:2px}
.sale-doc__body small{color:var(--mut);font-size:13px;line-height:1.45}
.sale-doc__file{font-size:13px;font-weight:700;color:var(--b);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sale-doc__btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 14px;font-weight:800;font-size:13px;color:var(--n)}
.sale-doc .bf-err{grid-column:2/-1}
.sale-doc.is-done,.sale-doc.is-picked{border-style:solid;border-color:#9fe3c4;background:#f3fcf8}
.sale-doc.is-done .sale-doc__ico,.sale-doc.is-picked .sale-doc__ico{background:#16d684;color:#fff}
.sale-doc.is-done .sale-doc__file,.sale-doc.is-picked .sale-doc__file{color:#07975a}
.sale-doc.has-error{border-color:#e0475e;background:#fff8f9}
.sale-docs-note{margin:16px 0 0;color:var(--mut);font-size:13px}
.btn.is-sending{opacity:.7;cursor:progress}
@media(max-width:760px){
	.sale-doc{grid-template-columns:44px 1fr;padding:14px;gap:12px}
	.sale-doc__ico{width:44px;height:44px}
	.sale-doc__btn{grid-column:1/-1;text-align:center}
	.sale-doc .bf-err{grid-column:1/-1}
}