───────────────────── */ .casco-app .h2{font-size:18px;font-weight:800;color:var(--ts);line-height:1.3;margin:0 0 .5rem} /* ── layout blocks used on every width (desktop widens them below) ─────────────────────── */ .casco-app .offers{display:grid;grid-template-columns:minmax(0,1fr);gap:12px} .casco-app .ckgrid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px} .casco-app .actions{display:flex;flex-direction:column;gap:8px;margin-top:16px} /* ── stop page (stop.php) ────────────────────────────────────────────────────────────── */ .casco-app .stop .stop-text{font-size:13.5px} .casco-app .stop .stop-text b{color:var(--ts)} .casco-app .stop .stop-text b.bad{color:var(--red)} .casco-app .stop .kv .ti-x{font-size:13px} /* ── narrow-screen overflow fixes (design bug: checkout consents overflowed; long values) ── */ .casco-app .consents,.casco-app .consents .form-check{min-width:0;max-width:100%} .casco-app .consents .form-check .form-check-input{float:none;margin-left:0} .casco-app .consents label .doc,.casco-app .consents label a{color:var(--g);font-weight:700} .casco-app .consents .form-check label,.casco-app .consent label{flex:1 1 auto;min-width:0;overflow-wrap:anywhere} .casco-app .kv b{min-width:0;overflow-wrap:anywhere} .casco-app .paycard>div,.casco-app .filecard>div{min-width:0} .casco-app .filecard .name{overflow-wrap:anywhere} /* ── upload zone: keep the file input keyboard-reachable (the design hid it with display:none) */ .casco-app .drop{position:relative} .casco-app .drop input{display:block;position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none} .casco-app .drop:focus-within{outline:2px solid var(--g);outline-offset:2px} /* ── htmx: double-submit guard (hx-sync drops the 2nd request; this greys the buttons) ───── */ .casco-app .htmx-request .btn-ep,.casco-app .htmx-request .btn-ep-ghost, .casco-app .btn-ep.htmx-request,.casco-app .btn-ep-ghost.htmx-request{pointer-events:none;opacity:.6} .casco-app .btn-ep,.casco-app .btn-ep-ghost{min-height:44px} /* ── full-screen loader: the page wrapper has hx-indicator="#casco-loader"; htmx adds .htmx-request while a request is in flight (fades in after .25s: no flash on fast calls) */ .casco-app .casco-loader{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1080;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(242,243,245,.72);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s} .casco-app .casco-loader.htmx-request{opacity:1;visibility:visible;pointer-events:all;transition:opacity .2s ease .25s,visibility 0s} /* the card speaks the language of the loaders between steps (below): dark green, yellow lockup, yellow bar */ .casco-app .casco-loader-box{background:var(--gdk);color:#fff;border-radius:16px;box-shadow:0 12px 40px rgba(6,78,66,.35);padding:22px 30px 20px;text-align:center;min-width:220px;max-width:300px;display:flex;flex-direction:column;align-items:center;gap:12px} .casco-app .casco-loader-box .logo{height:26px;width:auto} .casco-app .casco-loader-title{font-size:15px;font-weight:800;color:#fff;margin:2px 0 0} .casco-app .casco-loader-sub{font-size:12.5px;color:rgba(255,255,255,.7);margin:-8px 0 0} /* ── loaders between steps (design "Loader între pași", L6) — one per transition, markup and wiring in partials/step_loaders.php. Hidden until htmx puts .htmx-request on the one a step's hx-indicator names; a short delay keeps a fast answer from flashing the whole screen green. */ .casco-app .casco-steploader{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1085;background:var(--gdk);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:0 24px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,visibility 0s linear .2s} .casco-app .casco-steploader.htmx-request{opacity:1;visibility:visible;pointer-events:all;transition:opacity .2s ease .12s,visibility 0s} /* navigations (→ checkout, → the bank): htmx drops the class the moment it sets location.href, while the browser still shows the page being left — so these stay up a little longer instead of flashing it */ .casco-app .casco-steploader.nav{transition:opacity .2s ease 1.5s,visibility 0s linear 1.7s} .casco-app .casco-steploader.nav.htmx-request{transition:opacity .2s ease .12s,visibility 0s} .casco-app .casco-steploader .logo{height:34px;width:auto;margin-bottom:8px} .casco-app .casco-steploader .bar,.casco-app .casco-loader-box .bar{width:min(240px,70vw);height:6px;background:rgba(255,255,255,.15);border-radius:3px;overflow:hidden} .casco-app .casco-steploader .bar i,.casco-app .casco-loader-box .bar i{display:block;height:100%;width:40%;background:var(--y);border-radius:3px;animation:casco-steploader-slide 1.4s ease-in-out infinite} @keyframes casco-steploader-slide{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}} .casco-app .casco-steploader .t{font-size:16px;font-weight:800;color:#fff} .casco-app .casco-steploader .s{font-size:13px;color:rgba(255,255,255,.7)} .casco-app .casco-steploader .steps{display:flex;gap:6px;width:min(240px,70vw);margin-top:6px} .casco-app .casco-steploader .steps span{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.2)} .casco-app .casco-steploader .steps span.done{background:var(--g)}.casco-app .casco-steploader .steps span.on{background:var(--y)} @media (prefers-reduced-motion:reduce){.casco-app .casco-steploader .bar i,.casco-app .casco-loader-box .bar i{animation:none;width:100%;opacity:.6}} /* the card's bar is shorter than the interstitial's (after the shared rule, same specificity) */ .casco-app .casco-loader-box .bar{width:160px} /* ── mobile header burger + offcanvas menu (menu.php) ─────────────────────────────────── */ .casco-app .mhead .burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;padding:0;border:0;background:transparent;color:#fff;font-size:24px;cursor:pointer} .casco-app .mhead .veh .ti-check{color:var(--g)} .casco-app .casco-menu{width:320px;max-width:86vw} /* Bootstrap 5.0.2 parks the closed drawer at translateX(100%) — 320px PAST the right edge. Desktop browsers ignore that hidden box, but iOS WebKit (Safari and Chrome alike) counts it in the page width: the page became 390 + 320px wide and iOS zoomed the whole calculator out to fit (the half-width page, user report 2026-09-21). The drawer now stays inside the screen, clipped away while closed, and is revealed by un-clipping — still sliding in from the right, but its box never leaves the viewport. */ .casco-app .casco-menu.offcanvas-end{transform:none;-webkit-clip-path:inset(0 0 0 100%);clip-path:inset(0 0 0 100%);transition:clip-path .3s ease-in-out,-webkit-clip-path .3s ease-in-out} .casco-app .casco-menu.offcanvas-end.show{-webkit-clip-path:inset(0);clip-path:inset(0)} @media (prefers-reduced-motion:reduce){.casco-app .casco-menu.offcanvas-end{transition:none}} .casco-app .casco-menu .offcanvas-header{background:var(--gdk);color:#fff;padding:16px 18px} /* the yellow lockup (logo-epolite-yellow.svg, made for dark backgrounds) in the mobile header and the menu */ .casco-app .casco-menu .logo,.casco-app .rail .logo{display:inline-flex;line-height:0} .casco-app .casco-menu .logo img,.casco-app .rail .logo img{height:28px;width:auto;display:block} .casco-app .casco-menu .links a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--line);font-size:15px;font-weight:700;color:var(--ts)} .casco-app .casco-menu .links a.on{color:var(--g)} .casco-app .casco-menu .links a:hover{color:var(--gd);text-decoration:none} /* "Servicii RCA": the navbar's dropdown as a native collapsible group */ .casco-app .casco-menu .links .group{border-bottom:1px solid var(--line)} .casco-app .casco-menu .links .group summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;font-size:15px;font-weight:700;color:var(--ts);cursor:pointer;list-style:none} .casco-app .casco-menu .links .group summary::-webkit-details-marker{display:none} .casco-app .casco-menu .links .group summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--m);border-bottom:2px solid var(--m);transform:rotate(45deg);margin-right:4px;transition:transform .15s} .casco-app .casco-menu .links .group[open] summary::after{transform:rotate(-135deg)} .casco-app .casco-menu .links .group a{min-height:42px;padding-left:14px;font-size:14px;font-weight:600;color:var(--m);border-bottom:0} .casco-app .casco-menu .links .group a:last-child{margin-bottom:6px} /* ── mobile privacy note under the content ────────────────────────────────────────────── */ .casco-app .mnote{text-align:center;font-size:11px;color:var(--m);margin:24px 0 0} /* ── step 3 (info) extras; the .e-info-* base rules come from the site's style.css ─────── */ .casco-app .e-info-acc .ab ul.cov li{font-size:14px} .casco-app .e-info-acc .ab ol{list-style:decimal} .casco-app .e-info-acc .ab ul:not(.cov){list-style:disc;padding-left:18px} @media (prefers-reduced-motion:reduce){ .casco-app .spin,.casco-app .skel,.casco-app .prog i{animation:none} .casco-app .casco-loader,.casco-app .casco-loader.htmx-request{transition:none} } /* ══ below lg (< 992px): mobile header (.rail.mhead), white page, fixed action bar ══════════ */ @media (max-width:991.98px){ .casco-app .rail{background:var(--gdk);color:#fff} .casco-app .rail-wrap{padding:16px} .casco-app .rail .kicker{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--y)} .casco-app .rail h2{font-size:18px;font-weight:800;margin:2px 0 0;color:#fff} .casco-app .rail .veh{font-size:11.5px;color:rgba(255,255,255,.7);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.casco-app .rail .veh b{color:#fff} .casco-app .rsteps{display:flex;gap:6px;margin-top:12px} /* a column per step: bar + label; completed steps are links (tap target = the whole column) */ .casco-app .rsteps .rstep{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;padding-bottom:4px;text-decoration:none;font-size:10px;font-weight:600;color:rgba(255,255,255,.6)} .casco-app .rsteps .rstep:first-child{align-items:flex-start}.casco-app .rsteps .rstep:last-child{align-items:flex-end} .casco-app .rsteps .rstep:not(:first-child):not(:last-child){align-items:center} .casco-app .rsteps .rstep i{display:block;align-self:stretch;height:5px;border-radius:3px;background:rgba(255,255,255,.2)} .casco-app .rsteps .rstep i.on{background:var(--y)}.casco-app .rsteps .rstep i.done{background:var(--g)} .casco-app .rsteps .rstep span{white-space:nowrap} .casco-app .rsteps .rstep .cur{color:#fff;font-weight:800}.casco-app .rsteps .rstep .d{color:var(--gl)} .casco-app .rsteps a.rstep span{text-decoration:underline;text-underline-offset:2px} .casco-app .page{background:#fff;min-height:calc(100vh - 140px);padding:16px 16px 24px} /* the action row sits at the end of the step, in the flow: a fixed bottom bar took screen for a button only needed once the form is filled, and iOS drew it off-screen after zooming (user rule 2026-09-21) */ .casco-app .foot{position:static;border-top:0;padding:20px 0 0} .casco-app .foot .inner{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:8px} .casco-app .foot .inner>.btn-ep,.casco-app .foot .inner>.btn-ep-ghost{width:100%} /* the back link goes under the button, centred (the desktop row has it on the left) */ .casco-app .foot .back{order:2;align-self:center;padding:10px 0;font-size:.875em;font-weight:700} .casco-app .foot .tot{display:flex;justify-content:space-between;align-items:baseline} .casco-app .foot .tot span{font-size:12px;color:var(--m);font-weight:700}.casco-app .foot .tot b{font-size:18px;color:var(--g)} .casco-app .legal-note{font-size:11px;color:rgba(255,255,255,.6);margin-top:8px}.casco-app .legal-note a{color:var(--gl)} .casco-app .docpanel{max-height:none} /* tap targets >= 44px for the small inline links, without moving the layout */ .casco-app .consent-ok a,.casco-app .ck .hd a,.casco-app .strip a,.casco-app .sec a{display:inline-block;padding-top:12px;padding-bottom:12px;margin-top:-12px;margin-bottom:-12px} } @media (max-width:767.98px){ .casco-app .e-info-acc{max-height:55vh} } /* ══ tablet (768–991px): the mobile layout as a centred 560px column ════════════════════════ */ @media (min-width:768px) and (max-width:991.98px){ .casco-app{padding-bottom:24px} .casco-app .page{max-width:560px;margin:0 auto;min-height:auto;border-radius:0 0 16px 16px;padding-bottom:24px} .casco-app .rail-wrap{max-width:560px;margin:0 auto} } /* ══ lg and up (>= 992px): desktop shell — rail (aside.rail.drail) + content ══════════════ */ @media (min-width:992px){ .casco-app{padding:0 16px} .casco-app .shell{max-width:1100px;margin:32px auto;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,.08)} .casco-app .rail{background:var(--gdk);color:#fff;padding:32px 28px;display:flex;flex-direction:column;min-height:640px} .casco-app .rail .kicker{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--y);margin-bottom:6px} .casco-app .rail h2{font-size:20px;font-weight:800;margin:0 0 22px;color:#fff} .casco-app .rs{display:flex;gap:14px;padding:14px 0;position:relative;color:#fff} .casco-app a.rs:hover{color:#fff;text-decoration:none}.casco-app a.rs:hover .t{text-decoration:underline} .casco-app .rs .dot{width:26px;height:26px;border-radius:50%;border:2px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex:none;color:rgba(255,255,255,.6)} .casco-app .rs.cur .dot{background:var(--y);border-color:var(--y);color:#3b2d00} .casco-app .rs.done .dot{background:var(--g);border-color:var(--g);color:#fff} .casco-app .rs .t{font-size:14px;font-weight:700}.casco-app .rs .s{font-size:12px;color:rgba(255,255,255,.6);margin-top:2px}.casco-app .rs.cur .s{color:rgba(255,255,255,.85)}.casco-app .rs.done .s{color:var(--gl)} .casco-app .rs:not(:last-child)::after{content:"";position:absolute;left:12px;top:44px;bottom:-4px;width:2px;background:rgba(255,255,255,.15)} .casco-app .rail .sum{margin-top:12px;padding:12px 14px;background:rgba(255,255,255,.07);border-radius:12px;font-size:12.5px;line-height:1.6} .casco-app .rail .sums{margin-top:10px} .casco-app .rail .sum b{display:block;color:#fff;font-size:13px}.casco-app .rail .sum span{color:rgba(255,255,255,.7)}.casco-app .rail .sum .bad{color:#ffb4a8} .casco-app .rail .sum .lbl{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--y);display:block;margin-bottom:2px} .casco-app .rail .note{margin-top:auto;padding-top:22px;border-top:1px solid rgba(255,255,255,.15);font-size:12px;color:rgba(255,255,255,.65);line-height:1.6} .casco-app .rail .note .ti{color:var(--y)} .casco-app .rail .note a{color:var(--gl);text-decoration:underline} .casco-app .content{padding:32px 40px 40px;min-width:0} .casco-app .h2{font-size:22px} .casco-app .form-label{font-size:11.5px;margin-bottom:5px} .casco-app .form-control,.casco-app .form-select{height:46px;font-size:14.5px} .casco-app .invalid-feedback{font-size:12px}.casco-app .form-text{font-size:12px} .casco-app .input-ico .form-control{padding-right:40px}.casco-app .input-ico>i{font-size:18px} .casco-app .btn-ep{padding:12px 26px}.casco-app .btn-ep-ghost{padding:11px 22px;font-size:14px} .casco-app .drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:13.5px;min-height:170px} .casco-app .drop i{font-size:34px}.casco-app .drop b{font-size:15px} .casco-app .chip{font-size:12px;padding:5px 11px} .casco-app .or{gap:14px;margin:22px 0;font-size:12px} .casco-app .filecard{gap:14px;padding:12px 14px}.casco-app .filecard .thumb{width:56px;height:40px}.casco-app .filecard .name{font-size:14px}.casco-app .filecard .sub{font-size:13px} .casco-app .sec{font-size:11.5px;gap:10px;margin:24px 0 12px}.casco-app .sec a{font-size:12px} .casco-app .alert-ep{padding:14px 16px;gap:12px;font-size:13.5px}.casco-app .alert-ep i{font-size:22px}.casco-app .alert-ep b{font-size:14.5px} .casco-app .muted{font-size:13px} .casco-app .seg{display:inline-flex;margin-bottom:22px}.casco-app .seg a{padding:10px 26px;font-size:13.5px;flex:none} .casco-app .stop{max-width:520px;margin:30px auto 0;padding:0} .casco-app .stop .ic{width:84px;height:84px;font-size:42px;margin-bottom:20px}.casco-app .stop h3{font-size:24px} .casco-app .stop .stop-text{font-size:14.5px} .casco-app .kv{font-size:14px;padding:11px 0} .casco-app .actions{flex-direction:row;justify-content:flex-end;align-items:center;gap:14px;margin-top:30px} .casco-app .foot{margin-top:30px} .casco-app .foot .inner{display:flex;justify-content:flex-end;align-items:center;gap:14px;flex-wrap:wrap} .casco-app .foot .back{margin-right:auto;font-size:.875em;font-weight:700} .casco-app .foot .tot{display:none} .casco-app .foot.center .inner{justify-content:center;flex-direction:row-reverse} .casco-app .stop .foot{margin-top:24px} .casco-app .consent label{font-size:12.5px} .casco-app .docpanel{max-height:380px;font-size:13px} .casco-app .offers{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .casco-app .offers.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:720px} .casco-app .ckgrid{grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start} .casco-app .ckgrid .side{position:sticky;top:20px} .casco-app .center{padding:40px 0 0;max-width:520px;margin:0 auto} } /* ── touch devices: iOS zooms into any text field whose font is under 16px the moment it is tapped. The page then stays zoomed, pans sideways, and the fixed bottom bar (anchored to the un-zoomed layout) drifts off screen — "the Continuă button disappears and I can scroll on the x axis" (user report 2026-09-21, iPhone). Touch-first devices get 16px fields; mouse devices keep the design's 14 / 14.5px. Last in the file so it also beats the ≥992px rule on a large iPad in landscape. */ @media (pointer:coarse){.casco-app .form-control,.casco-app .form-select{font-size:16px}} /* iOS keeps a text field focused when the tap lands on "non-clickable" page, so the plate / VIN never fire their change (the lookup) until Enter; a pointer cursor makes every tap count as a click, which moves the focus off the field (user report 2026-09-22). No visible effect on touch screens. */ @media (hover:none) and (pointer:coarse){.casco-app{cursor:pointer;-webkit-tap-highlight-color:transparent}} /* nothing inside the calculator may widen the page: iOS refits its zoom to the widest box (a select sized by its longest option — Safari does that — or any other overflow) and the page ends up at half width */ .casco-app{overflow-x:clip} .casco-app .form-select{min-width:0;max-width:100%;text-overflow:ellipsis} .casco-app .row>*{min-width:0}