/* Калькулятор аренды [ps5_calc]. Всё внутри .ps5c — чтобы не задевать тему и не проигрывать её стилям. */
.ps5c{
	--c-bg:#fff; --c-soft:#f5f6f8; --c-ink:#121417; --c-muted:#5d6470; --c-faint:#8a919c; --c-line:#e2e5ea;
	--c-accent:#0b6bc4; --c-accent-soft:#eaf2fc; --c-warn-ink:#8a4b00; --c-warn-bg:#fff4e2; --c-err:#b42318; --c-ok:#1c7c46;
	--c-r:12px;
	container:ps5c / inline-size;
	color:var(--c-ink); font-size:15px; line-height:1.45;
}
.ps5c *{box-sizing:border-box}
.ps5c [hidden]{display:none!important}
.ps5c :focus-visible{outline:2px solid var(--c-accent); outline-offset:2px}
.ps5c button, .ps5c label, .ps5c summary{touch-action:manipulation}
.ps5c button{font:inherit; color:inherit; margin:0; min-height:0; box-shadow:none; text-transform:none; letter-spacing:normal; -webkit-appearance:none; appearance:none}
.ps5c .ps5c-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:0}
.ps5c .ps5c-hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.ps5c .ps5c-layout{display:grid; gap:28px; margin:0}
.ps5c .ps5c-main{display:grid; gap:28px}
.ps5c .ps5c-step{display:grid; gap:12px; margin:0}
.ps5c .ps5c-h{display:flex; align-items:center; gap:10px; margin:0; font-size:16px; line-height:1.3; font-weight:700}
.ps5c .ps5c-n{width:24px; height:24px; border-radius:50%; background:var(--c-ink); color:#fff; font-size:12px; display:grid; place-items:center; flex:none}

/* даты и поля */
.ps5c .ps5c-dates, .ps5c .ps5c-names{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ps5c .ps5c-fld{display:grid; gap:5px; margin:0}
.ps5c .ps5c-fld>span{font-size:12.5px; font-weight:600; color:var(--c-muted)}
.ps5c .ps5c-inp{width:100%; min-width:0; height:46px; margin:0; padding:0 12px; border:1px solid var(--c-line); border-radius:10px; background:var(--c-bg); color:var(--c-ink); font:inherit; font-size:16px; box-shadow:none}
.ps5c input[type="date"].ps5c-inp{cursor:pointer}
.ps5c input[type="date"].ps5c-inp::-webkit-calendar-picker-indicator{cursor:pointer}
.ps5c textarea.ps5c-inp{height:auto; min-height:72px; padding:10px 12px; resize:vertical}
.ps5c .ps5c-inp:focus{border-color:var(--c-accent); outline:none; box-shadow:0 0 0 3px var(--c-accent-soft)}
.ps5c .ps5c-inp[aria-invalid="true"]{border-color:var(--c-err)}
.ps5c .ps5c-chips{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.ps5c .ps5c-lbl{font-size:12.5px; color:var(--c-muted); margin-right:2px}
.ps5c .ps5c-chip{border:1px solid var(--c-line); background:var(--c-bg); border-radius:999px; padding:6px 12px; font-size:13px; line-height:1.3; font-weight:600; cursor:pointer}
.ps5c .ps5c-chip[aria-pressed="true"]{background:var(--c-ink); border-color:var(--c-ink); color:#fff}
.ps5c .ps5c-days{display:flex; align-items:baseline; gap:8px; font-size:13.5px; color:var(--c-muted)}
.ps5c .ps5c-days b{font-size:17px; color:var(--c-ink); font-variant-numeric:tabular-nums}
.ps5c .ps5c-days.ps5c-bad b{color:var(--c-err)}

/* позиции */
.ps5c .ps5c-group{font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--c-faint); margin:18px 0 8px}
.ps5c .ps5c-group:first-child{margin-top:0}
.ps5c .ps5c-list{display:grid; gap:8px}
.ps5c .ps5c-item{border:1px solid var(--c-line); border-radius:var(--c-r); background:var(--c-bg)}
.ps5c .ps5c-item.ps5c-on{border-color:var(--c-accent); background:var(--c-accent-soft)}
.ps5c .ps5c-item.ps5c-off{background:var(--c-soft)}
.ps5c .ps5c-row{display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; padding:10px 12px; margin:0; cursor:pointer}
.ps5c .ps5c-off .ps5c-row{cursor:not-allowed}
.ps5c .ps5c-row:has(input:focus-visible){outline:2px solid var(--c-accent); outline-offset:-2px; border-radius:var(--c-r)}
.ps5c .ps5c-thumb{width:56px; height:56px; border-radius:9px; background:#fff; overflow:hidden; display:block}
.ps5c .ps5c-thumb img{width:100%; height:100%; object-fit:contain; display:block; margin:0}
.ps5c .ps5c-txt{display:grid; min-width:0}
.ps5c .ps5c-nm{font-weight:700; font-size:15px; line-height:1.25}
.ps5c .ps5c-kit{font-size:12.5px; color:var(--c-muted); line-height:1.35; margin-top:2px}
.ps5c .ps5c-pr{font-size:13px; font-weight:600; margin-top:4px}
.ps5c .ps5c-m{color:var(--c-muted); font-weight:500}
.ps5c .ps5c-sub{display:block; font-size:12px}
.ps5c .ps5c-tick{width:26px; height:26px; border-radius:50%; border:2px solid #c9ced6; display:grid; place-items:center; background:#fff; flex:none}
.ps5c .ps5c-on .ps5c-tick{background:var(--c-accent); border-color:var(--c-accent)}
.ps5c .ps5c-on .ps5c-tick::after{content:""; width:10px; height:6px; border:2.5px solid #fff; border-top:0; border-right:0; transform:translateY(-1px) rotate(-45deg)}
.ps5c .ps5c-more{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 12px 12px 80px; flex-wrap:wrap}
.ps5c .ps5c-qty{display:inline-flex; align-items:center; border:1px solid var(--c-line); border-radius:10px; background:var(--c-bg)}
.ps5c .ps5c-qty button{width:38px; height:36px; padding:0; border:0; background:none; font-size:19px; line-height:1; cursor:pointer}
.ps5c .ps5c-qty button:disabled{color:#c5c9d0; cursor:default}
.ps5c .ps5c-qty output{min-width:26px; text-align:center; font-weight:700}
.ps5c .ps5c-sum{font-weight:800; font-size:16px; font-variant-numeric:tabular-nums}
.ps5c .ps5c-note{font-size:12.5px; line-height:1.4; border-radius:8px; padding:8px 10px; background:var(--c-warn-bg); color:var(--c-warn-ink)}
.ps5c .ps5c-note.ps5c-info{background:var(--c-soft); color:var(--c-muted)}
.ps5c .ps5c-gta{display:grid; gap:8px; padding:0 12px 12px 80px}
.ps5c .ps5c-ed{display:inline-flex; background:var(--c-bg); border:1px solid var(--c-line); border-radius:10px; padding:3px; gap:2px; width:max-content; max-width:100%}
.ps5c .ps5c-ed label{padding:7px 14px; border-radius:7px; font-size:13.5px; font-weight:600; cursor:pointer; margin:0}
.ps5c .ps5c-ed input{position:absolute; opacity:0; pointer-events:none}
.ps5c .ps5c-ed label:has(input:checked){background:var(--c-ink); color:#fff}
.ps5c .ps5c-ed label:has(input:focus-visible){outline:2px solid var(--c-accent)}

/* итог */
.ps5c .ps5c-zone{display:grid; gap:12px; background:var(--c-soft); border-radius:var(--c-r); padding:14px}
.ps5c .ps5c-zt{font-size:16px}
.ps5c .ps5c-lines{list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:13.5px}
.ps5c .ps5c-lines li{display:flex; justify-content:space-between; gap:12px; margin:0}
.ps5c .ps5c-lines li span:first-child{color:var(--c-muted)}
.ps5c .ps5c-lines li span:last-child{font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums}
.ps5c .ps5c-total{display:flex; justify-content:space-between; align-items:baseline; gap:12px; border-top:1px solid var(--c-line); padding-top:10px}
.ps5c .ps5c-total span{font-weight:600}
.ps5c .ps5c-total b{font-size:24px; font-weight:800; white-space:nowrap; font-variant-numeric:tabular-nums}
.ps5c .ps5c-empty{color:var(--c-muted); font-size:13.5px; margin:0}
.ps5c .ps5c-btn{display:block; width:100%; height:50px; padding:0 16px; border:0; border-radius:8px; background:var(--c-ink); color:#fff; font-weight:600; font-size:15px; cursor:pointer}
.ps5c .ps5c-btn:hover{background:#000; color:#fff}
.ps5c .ps5c-btn:disabled{opacity:.6; cursor:progress}
.ps5c .ps5c-legal{font-size:11.5px; line-height:1.4; color:var(--c-muted); margin:0}
.ps5c .ps5c-legal a{color:inherit; text-decoration:underline}
.ps5c .ps5c-err{color:var(--c-err); font-size:12.5px}
.ps5c .ps5c-side{display:none}

/* липкая плашка итога — телефон */
.ps5c .ps5c-bar{position:sticky; bottom:0; z-index:20; margin-top:16px; background:var(--c-ink); color:#fff; border-radius:12px 12px 0 0; padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); display:grid; gap:8px; box-shadow:0 -6px 20px rgba(0,0,0,.12)}
.ps5c .ps5c-bar-row{display:flex; align-items:center; justify-content:space-between; gap:12px}
.ps5c .ps5c-bar-t{border:0; background:none; color:#fff; text-align:left; padding:0; cursor:pointer; display:grid}
.ps5c .ps5c-bar-t b{font-size:20px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums}
.ps5c .ps5c-bar-t small{font-size:12px; opacity:.72}
.ps5c .ps5c-bar-t small::after{content:" ▾"}
.ps5c .ps5c-bar-t[aria-expanded="true"] small::after{content:" ▴"}
.ps5c .ps5c-go{height:44px; padding:0 18px; border:0; border-radius:8px; background:#fff; color:var(--c-ink); font-weight:700; cursor:pointer; white-space:nowrap}
.ps5c .ps5c-bar .ps5c-lines{padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.15)}
.ps5c .ps5c-bar .ps5c-lines li span:first-child{color:rgba(255,255,255,.7)}

.ps5c .ps5c-done{padding:40px 16px; text-align:center; display:grid; gap:10px; justify-items:center}
.ps5c .ps5c-done h3{margin:0; font-size:20px}
.ps5c .ps5c-done p{margin:0; color:var(--c-muted); max-width:42ch}
.ps5c .ps5c-ok{width:52px; height:52px; border-radius:50%; background:var(--c-ok); display:grid; place-items:center}
.ps5c .ps5c-ok::after{content:""; width:18px; height:10px; border:3.5px solid #fff; border-top:0; border-right:0; transform:translateY(-2px) rotate(-45deg)}

/* ПК: две колонки, итог сбоку */
@container ps5c (min-width: 820px){
	.ps5c .ps5c-layout{grid-template-columns:minmax(0,1fr) 330px; gap:28px 40px; align-items:start}
	.ps5c .ps5c-main{gap:30px}
	.ps5c .ps5c-side{display:block; position:sticky; top:90px}
	.ps5c .ps5c-side .ps5c-zone{padding:18px}
	.ps5c .ps5c-zone-mob, .ps5c .ps5c-bar{display:none!important}
	.ps5c .ps5c-dates{grid-template-columns:1fr 1fr auto; align-items:end}
}
/* Компактный вид для страниц услуг: [ps5_calc service="…"] — в один экран */
.ps5c.ps5c-compact .ps5c-layout, .ps5c.ps5c-compact .ps5c-main{gap:14px}
.ps5c.ps5c-compact .ps5c-step{gap:8px}
.ps5c.ps5c-compact .ps5c-fld{gap:3px}
.ps5c.ps5c-compact .ps5c-fld>span{font-size:12px}
.ps5c.ps5c-compact .ps5c-inp{height:42px}
.ps5c.ps5c-compact .ps5c-chips{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.ps5c.ps5c-compact .ps5c-chips::-webkit-scrollbar{display:none}
.ps5c.ps5c-compact .ps5c-chip{padding:5px 10px; flex:none}
.ps5c.ps5c-compact .ps5c-days:not(.ps5c-bad){display:none}
.ps5c.ps5c-compact .ps5c-list{gap:6px}
/* строка: [галочка][картинка][название, цена] | [количество / издание] */
.ps5c.ps5c-compact .ps5c-item{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center}
.ps5c.ps5c-compact .ps5c-row{grid-template-columns:22px 36px minmax(0,1fr); gap:10px; padding:7px 10px}
.ps5c.ps5c-compact .ps5c-tick{order:-1; width:22px; height:22px}
.ps5c.ps5c-compact .ps5c-on .ps5c-tick::after{width:9px; height:5px; border-width:2px}
.ps5c.ps5c-compact .ps5c-thumb{width:36px; height:36px; border-radius:7px}
.ps5c.ps5c-compact .ps5c-nm{font-size:14px}
.ps5c.ps5c-compact .ps5c-kit{display:none}
.ps5c.ps5c-compact [data-item="gta"]:not(.ps5c-on) .ps5c-kit{display:block; font-size:12px; margin-top:1px}
.ps5c.ps5c-compact .ps5c-pr{font-size:12px; font-weight:500; color:var(--c-muted); margin-top:1px}
.ps5c.ps5c-compact .ps5c-sub{display:none}
.ps5c.ps5c-compact .ps5c-more, .ps5c.ps5c-compact .ps5c-gta{padding:0 10px 0 0; flex-wrap:nowrap}
.ps5c.ps5c-compact .ps5c-sum{display:none}
.ps5c.ps5c-compact .ps5c-qty button{width:30px; height:30px; font-size:17px}
.ps5c.ps5c-compact .ps5c-qty output{min-width:20px}
.ps5c.ps5c-compact .ps5c-ed{padding:2px}
.ps5c.ps5c-compact .ps5c-ed label{padding:5px 10px; font-size:12.5px}
/* заказ и контакты */
.ps5c.ps5c-compact .ps5c-side{display:block}
.ps5c.ps5c-compact .ps5c-zone{gap:8px; padding:10px 12px}
.ps5c.ps5c-compact .ps5c-sumup{display:grid; gap:6px}
.ps5c.ps5c-compact .ps5c-total{padding-top:6px}
.ps5c.ps5c-compact .ps5c-zt{display:none}
.ps5c.ps5c-compact .ps5c-total b{font-size:22px}
.ps5c.ps5c-compact .ps5c-names{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); gap:8px}
.ps5c.ps5c-compact .ps5c-cmt summary{font-size:12.5px; font-weight:600; color:var(--c-muted); cursor:pointer}
.ps5c.ps5c-compact .ps5c-cmt textarea{margin-top:6px; min-height:60px}
.ps5c.ps5c-compact .ps5c-btn{height:44px}
@container ps5c (max-width: 479px){
	.ps5c.ps5c-compact .ps5c-row{grid-template-columns:22px minmax(0,1fr)}
	.ps5c.ps5c-compact .ps5c-thumb{display:none}
}
@container ps5c (min-width: 820px){
	.ps5c.ps5c-compact .ps5c-layout{grid-template-columns:minmax(0,1fr) 320px; gap:14px 32px}
	.ps5c.ps5c-compact .ps5c-side{position:static}
	.ps5c.ps5c-compact .ps5c-zt{display:block}
	.ps5c.ps5c-compact .ps5c-names{grid-template-columns:1fr}
}
@container ps5c (min-width: 1000px){
	.ps5c.ps5c-compact .ps5c-list{grid-template-columns:1fr 1fr}
}
/* Форма обратной связи [ps5_callback]: белая карточка — читается на любом фоне секции */
.ps5c.ps5c-cb{background:var(--c-bg); border-radius:var(--c-r); box-shadow:0 1px 3px rgba(18,20,23,.08)}
.ps5c .ps5c-cb-form{display:grid; gap:12px; margin:0; padding:20px 16px}
.ps5c .ps5c-cb-h{margin:0; font-size:20px; line-height:1.25; font-weight:700; color:var(--c-ink)}
.ps5c .ps5c-cb-t{margin:0 0 4px; color:var(--c-muted); font-size:14.5px}
.ps5c .ps5c-cb-go{display:grid; gap:10px; margin-top:4px}
.ps5c.ps5c-cb .ps5c-done{padding:24px 8px}
@container ps5c (max-width: 419px){
	.ps5c.ps5c-cb .ps5c-names{grid-template-columns:1fr}
}
@container ps5c (min-width: 620px){
	.ps5c .ps5c-cb-form{padding:28px}
	.ps5c .ps5c-cb-h{font-size:24px}
	.ps5c .ps5c-cb-go{grid-template-columns:auto 1fr; align-items:center; gap:16px}
	.ps5c .ps5c-cb-go .ps5c-btn{width:auto; min-width:200px}
}
/* Граница раскладки (calc.js → fix): высота задана, поэтому правки внутри калькулятора
   пересчитывают только его, а не всю страницу (iPhone). Страницу вокруг не трогаем. */
.ps5c .ps5c-in{display:flow-root}
.ps5c.ps5c-fix{contain:size layout style}
@media (prefers-reduced-motion: reduce){ .ps5c *{transition:none!important} }
