/* =========================================================
stayon — dizaino sistema
Šviesus, ramus, dideli lietimo taikiniai (patogu ir vyresniems)
========================================================= */
:root{
/* Prekės ženklas — iš logotipo (#131A3F) */
--navy:#131A3F;
--navy-2:#232C5C;
--navy-3:#3A4680;
--canvas:#F3F5F9;
--surface:#FFFFFF;
--surface-2:#F8FAFC;
--ink:#131A3F;
--ink-2:#5B6480;
--ink-3:#8A92A8;
--ink-lead:#3F4864; /* paaiškinimai po antraštėmis - turi būti skaitomi */
--line:#E2E6F0;
--line-2:#EDF0F6;
--brand:#131A3F;
--brand-soft:#EEF1F9;
--brand-deep:#0C1230;
--accent:#F5A524; /* dėmesio signalas: laukia, priminimai */
--accent-soft:#FEF4E2;
--accent-deep:#B87708;
--free:#0F9E77;
--free-soft:#E4F6F0;
--hold:#6C7BD6;
--hold-soft:#EDEFFB;
--stop:#D93B2B;
--stop-soft:#FCEDEB;
--night:#131A3F;
--r-sm:10px;
--r-md:16px;
--r-lg:24px;
--r-xl:32px;
--shadow-1:0 1px 2px rgba(19,26,63,.05), 0 4px 16px rgba(19,26,63,.06);
--shadow-2:0 8px 30px rgba(19,26,63,.14);
--nav-w:344px;
--top-h:64px;
--tap:52px;
--font:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;overflow-x:clip;
font-family:var(--font);
font-size:17px;
line-height:1.5;
color:var(--ink);
background:var(--canvas);
-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--navy-3);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
*{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
/* ---------- Tipografija ---------- */
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.15}
h1{font-size:30px}
h2{font-size:22px}
h3{font-size:18px}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-3)}
.muted{color:var(--ink-2)}
.small{font-size:14px}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.03em}
/* =========================================================
Karkasas
========================================================= */
.app{min-height:100vh}
.sidebar{
position:fixed;inset:var(--top-h) auto 0 0;width:var(--nav-w);
background:var(--surface);border-right:1px solid var(--line);
padding:22px 16px;display:flex;flex-direction:column;gap:6px;z-index:40;
overflow-y:auto;overscroll-behavior:contain;
scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:999px}
.sidebar::-webkit-scrollbar-track{background:transparent}
/* Prenumeratos juostelė apačioje — nesislenka */
.sidebar .nav-foot{position:sticky;bottom:-22px;z-index:2;background:var(--surface);
margin:auto -16px -22px;padding:12px 16px 22px}
.brand{display:flex;align-items:center;padding:6px 4px 20px}
.brand-logo{height:34px;width:auto;max-width:100%}
.brand-mark{width:38px;height:auto;flex:none}
.brand-name{font-weight:800;font-size:20px;letter-spacing:-.03em;color:var(--navy)}
.brand-name span{font-weight:800}
.brand-sub{display:block;font-size:9.5px;font-weight:700;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase;margin-top:1px}
.nav-link{
display:flex;align-items:center;gap:12px;
min-height:var(--tap);padding:0 13px;border-radius:var(--r-md);
color:var(--ink-2);font-weight:600;font-size:14.5px;letter-spacing:-.015em;
transition:background .15s,color .15s;
}
/* Ilgi pavadinimai („Kalendorius ir užimtumas") laikomi vienoje eilutėje -
dvi eilutės meniu paverčia sunkiai skaitoma sienele */
.nav-link>span,.nav-sublink{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.nav-link svg{width:22px;height:22px;flex:none;stroke-width:1.9}
.badge svg{flex:none}
.list-item>svg{flex:none;color:var(--ink-3)}
.nav-link:hover{background:var(--surface-2);color:var(--ink)}
.nav-link.is-active{background:var(--navy);color:#fff}
.nav-link .badge{margin-left:auto}
.nav-sep{height:1px;background:var(--line-2);margin:12px 4px}
.nav-foot{margin-top:auto;padding-top:12px}
/* Prenumeratos juostelė šoniniame meniu */
.nav-plan{
display:flex;align-items:center;gap:10px;
padding:10px 12px;margin-bottom:8px;border-radius:var(--r-md);
border:1px solid var(--line);background:var(--surface-2);transition:background .15s;
}
.nav-plan:hover{background:var(--brand-soft)}
.nav-plan .grow{flex:1;min-width:0}
.nav-plan-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--free)}
.nav-plan-title{display:block;font-size:13px;font-weight:700;line-height:1.25;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-plan-note{display:block;font-size:12px;color:var(--ink-2);margin-top:1px}
.nav-plan.is-warn{border-color:#F8E2BC;background:var(--accent-soft)}
.nav-plan.is-warn .nav-plan-dot{background:var(--accent)}
.nav-plan.is-warn .nav-plan-note{color:var(--accent-deep);font-weight:700}
.nav-plan.is-bad{border-color:#F6CFCA;background:var(--stop-soft)}
.nav-plan.is-bad .nav-plan-dot{background:var(--stop)}
.nav-plan.is-bad .nav-plan-note{color:#A32116;font-weight:700}
/* Prenumeratos kortelė profilyje (telefone) */
.plan-card .plan-title{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em}
.plan-card .plan-note{margin:5px 0 0;font-size:15px;color:var(--ink-2);font-weight:600}
.plan-card.is-warn{border-color:#F8E2BC;background:var(--accent-soft)}
.plan-card.is-warn .plan-note{color:var(--accent-deep);font-weight:700}
.plan-card.is-bad{border-color:#F6CFCA;background:var(--stop-soft)}
.plan-card.is-bad .plan-note{color:#A32116;font-weight:700}
.nav-user{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-md);background:var(--surface-2)}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--navy);color:#fff;
display:grid;place-items:center;font-weight:700;font-size:15px;flex:none}
.main{margin-left:var(--nav-w);margin-top:var(--top-h);min-height:calc(100vh - var(--top-h));
padding:28px 32px 64px;min-width:0;overflow-x:clip}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:26px;flex-wrap:wrap}
.topbar-title h1{margin-bottom:4px}
.topbar-actions{display:flex;gap:10px;flex-wrap:wrap}
/* Mobilus */
.mobile-head,.tabbar{display:none}
@media (max-width:900px){
body{font-size:17px}
.sidebar{display:none}
.topnav{display:none}
.save-card{top:20px}
.main{margin-left:0;margin-top:0;min-height:100vh;padding:0 16px 110px}
.mobile-head{
display:flex;align-items:center;justify-content:space-between;gap:12px;
position:sticky;top:0;z-index:30;background:var(--canvas);
padding:14px 0 12px;margin-bottom:6px;
}
.mobile-head .brand-logo{height:34px}
.topbar{margin-bottom:18px}
.topbar-title h1{font-size:25px}
.tabbar{
display:grid;grid-template-columns:repeat(5,1fr);
position:fixed;left:0;right:0;bottom:0;z-index:50;
background:var(--surface);border-top:1px solid var(--line);
padding:8px 6px calc(8px + env(safe-area-inset-bottom));
}
.tabbar a{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
padding:7px 2px;border-radius:14px;color:var(--ink-3);font-size:11.5px;font-weight:700;
min-height:56px;
}
.tabbar a svg{width:23px;height:23px;stroke-width:1.9}
.tabbar a.is-active{color:var(--navy);background:var(--brand-soft)}
/* Sąrašo eilutės telefone: žyma viršuje, tekstas per visą plotį */
.list-item{flex-wrap:wrap;row-gap:4px}
.list-item .grow{flex:1 1 100%}
.list-item .chev{display:none}
.timeline{margin:0 -6px}
}
/* =========================================================
Kortelės
========================================================= */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow-1)}
.card-tight{padding:16px}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.card-head h2,.card-head h3{letter-spacing:-.02em}
.grid{display:grid;gap:16px}
.grid>*{min-width:0}
/* Telefone šis blokas rodomas pirmas */
@media (max-width:900px){.mobile-first{order:-1}}
.stack{min-width:0}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-side{grid-template-columns:1.6fr 1fr;align-items:start}
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-side{grid-template-columns:1fr}}
@media (max-width:760px){.grid-2,.grid-3{grid-template-columns:1fr}}
/* Trys rodikliai vienoje eilutėje ir telefone */
@media (max-width:760px){
.grid.grid-stats{grid-template-columns:repeat(3,1fr);gap:8px}
.grid-stats .stat{padding:13px 11px;border-radius:18px;display:flex;flex-direction:column}
.grid-stats .stat .hint{margin-top:auto;padding-top:6px}
.grid-stats .stat .label{font-size:11.5px;line-height:1.25;margin-bottom:6px}
.grid-stats .stat .value{font-size:21px;letter-spacing:-.04em}
.grid-stats .stat .hint{font-size:11px;margin-top:5px;line-height:1.3}
}
@media (max-width:390px){
.grid-stats .stat .value{font-size:19px}
.grid-stats .stat{padding:11px 8px}
}
@media (max-width:900px){
.grid-4{grid-template-columns:repeat(2,1fr);gap:12px}
.grid-4 .stat{padding:15px}
.grid-4 .stat .value{font-size:28px}
.grid-4 .stat .label{font-size:13px;margin-bottom:5px}
.grid-4 .stat .hint{font-size:12.5px;margin-top:5px}
}
/* Rodikliai */
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--shadow-1)}
.stat .label{font-size:14px;font-weight:700;color:var(--ink-2);margin-bottom:8px}
.stat .value{font-size:38px;font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.stat .hint{margin-top:8px;font-size:13.5px;color:var(--ink-3)}
.stat.accent{background:var(--night);border-color:var(--night);color:#fff}
.stat.accent .label{color:rgba(255,255,255,.65)}
.stat.accent .hint{color:rgba(255,255,255,.55)}
.stat.accent .value{color:#fff}
.stat.accent .value em{font-style:normal;color:#8E9BE0}
/* Objekto viršelis sąraše */
.ap-cover{width:calc(100% + 44px);margin:-22px -22px 16px;height:170px;object-fit:cover;
border-radius:var(--r-lg) var(--r-lg) 0 0;display:block}
@media (max-width:900px){.ap-cover{height:150px}}
/* Telefono meniu: modulių pomeniu */
.list-sub{padding-left:30px;gap:12px;background:var(--surface-2)}
.list-sub .title{font-size:15px;font-weight:600;color:var(--ink-2)}
.list-sub:hover .title{color:var(--navy)}
.list-sub.is-off .title{color:var(--ink-3)}
.list-sub.is-off .nav-dot{background:transparent;border:1.5px solid var(--line-2);box-shadow:none}
.list-sub.is-plain{padding-left:56px}
/* Atsiliepimai */
.rv-score{flex:none;display:grid;place-items:center;width:46px;height:40px;border-radius:12px;
background:var(--navy);color:#fff;font-weight:800;font-size:15px;letter-spacing:-.02em}
.rv-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 20px}
.rv-cat{display:flex;align-items:center;gap:10px;font-size:13.5px}
.rv-cat>span{flex:none;width:110px;color:var(--ink-2);font-weight:600}
.rv-cat b{flex:none;width:32px;text-align:right;font-weight:800}
.rv-bar{flex:1;height:7px;border-radius:999px;background:var(--line-2);overflow:hidden}
.rv-bar i{display:block;height:100%;background:var(--navy);border-radius:999px}
/* Leaflet žemėlapis */
.map-canvas { position: absolute; inset: 0; }
.leaflet-container { font: inherit; background: #EDF0F6; }
.leaflet-control-attribution { font-size: 10px }
.lf-pin { background: none; border: 0; filter: drop-shadow(0 3px 6px rgba(19,26,63,.3)) }
.map-box .map-open { z-index: 500 }
/* Atsiliepimo kortelė */
.rv-item{padding:16px 0;border-bottom:1px solid var(--line)}
.rv-item:last-of-type{border-bottom:0}
.rv-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.rv-head .grow{display:flex;flex-direction:column;line-height:1.3}
.rv-text{margin:0 0 10px;font-size:14.5px;color:var(--ink-2);line-height:1.6}
.rv-reply{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;background:var(--surface-2)}
.rv-reply summary{display:flex;align-items:center;gap:8px;cursor:pointer;list-style:none;
font-size:13.5px;font-weight:700;color:var(--ink-2)}
.rv-reply summary::-webkit-details-marker{display:none}
.rv-reply summary:hover{color:var(--ink)}
.rv-reply summary svg{color:var(--ink-3)}
.rv-reply[open] summary{margin-bottom:10px}
.rv-replytext{margin:0 0 10px;padding:10px 12px;border-radius:10px;background:#fff;
border-left:3px solid var(--line-2);font-size:14px;color:var(--ink-2)}
/* Atstumai */
.dist-row{display:flex;gap:10px;align-items:center;margin-bottom:9px}
.dist-row>.input{flex:1;min-width:0}
.dist-km{display:flex;align-items:center;gap:7px;flex:none;width:120px}
.dist-km .input{width:80px;text-align:right}
.dist-km span{font-size:14px;font-weight:700;color:var(--ink-3)}
.dist-row .btn{flex:none}
@media (max-width:640px){
.dist-km{width:auto}
.dist-km .input{width:66px}
}
/* Laiškų kintamieji */
.varlist{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.var{padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);
color:var(--ink-2);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
font-variant-numeric:tabular-nums}
.var:hover{background:var(--brand-soft);color:var(--navy);border-color:var(--navy)}
/* Administravimas */
.admin-stats{display:grid;gap:12px;grid-template-columns:repeat(5,1fr)}
.admin-stats .stat{display:flex;flex-direction:column;gap:6px;padding:16px 18px;
text-decoration:none;transition:border-color .15s,box-shadow .15s}
.admin-stats .stat:hover{border-color:var(--ink-3)}
.admin-stats .stat.is-on{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.admin-stats .value{font-size:30px}
.admin-stats .value.ok{color:var(--free)}
.admin-stats .value.warn{color:var(--accent-deep)}
.admin-stats .value.bad{color:var(--stop)}
@media (max-width:1100px){.admin-stats{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){
.admin-stats{grid-template-columns:repeat(2,1fr);gap:8px}
.admin-stats .stat{padding:12px 13px}
.admin-stats .value{font-size:23px}
.admin-stats .label{font-size:12px}
}
/* Moduliai */
.module-card{display:flex;flex-direction:column;border:1.5px solid var(--line)}
.module-card.is-on{border-color:var(--navy)}
.module-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
background:var(--surface-2);color:var(--ink-2)}
.module-card.is-on .module-ico{background:var(--brand-soft);color:var(--navy)}
.module-card .divider{margin-top:auto}
/* Meniu su papildomu sąrašu */
.nav-link{position:relative}
.nav-caret{margin-left:auto;display:flex;align-items:center;justify-content:center;
width:28px;height:28px;padding:0;border:0;border-radius:9px;background:transparent;cursor:pointer;
color:var(--ink-3);transition:transform .18s,background .14s}
.nav-caret:hover{background:rgba(19,26,63,.08);color:var(--navy)}
.nav-link.is-active .nav-caret,.nav-link.is-open .nav-caret{transform:rotate(90deg)}
.nav-link.is-open{color:var(--navy);background:var(--surface-2)}
.nav-link[data-nav]:not(.is-open):not(.is-active){background:transparent}
.nav-sub{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px 0;padding-left:38px;
overflow:hidden;transition:max-height .22s ease,opacity .18s ease,margin .18s ease;max-height:420px}
.nav-sub.is-shut{max-height:0;opacity:0;margin:0;pointer-events:none}
.nav-sublink{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:12px;
font-size:13.5px;font-weight:600;letter-spacing:-.012em;color:var(--ink-2);
text-decoration:none;transition:background .14s,color .14s}
.nav-dot{width:9px;height:9px;border-radius:50%;flex:none;background:var(--free);
box-shadow:0 0 0 3px rgba(15,158,119,.16)}
.nav-sublink.is-plain{padding-left:22px}
.nav-sublink.is-off{color:var(--ink-3)}
.nav-sublink.is-off .nav-dot{background:transparent;border:1.5px solid var(--line-2);box-shadow:none}
.nav-sublink.is-off:hover{color:var(--ink-2)}
.nav-sublink:hover{background:var(--surface-2);color:var(--navy)}
.nav-sublink.is-active{background:var(--brand-soft);color:var(--navy);font-weight:800}
/* Lipnus išsaugojimo mygtukas */
.grid-side>.sticky-col{align-self:stretch}
/* Prilipusios kortelės skaičiuojasi nuo viršutinės juostos apačios -
kitaip jos pasislepia po ja ir mygtuko nebematyti */
.save-card{position:sticky;top:calc(var(--top-h) + 20px);z-index:20}
@media (max-width:900px){
.save-card{
position:fixed;left:0;right:0;bottom:calc(78px + env(safe-area-inset-bottom));top:auto;
border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0;
padding:12px 16px;
box-shadow:0 -6px 24px rgba(19,26,63,.14);
}
.save-card .btn-lg{min-height:52px}
/* vieta juostai ir apatiniam meniu */
body.has-savebar .main{padding-bottom:150px}
}
/* Žemėlapis */
.map-box{position:relative;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
background:linear-gradient(160deg,#EDF0F6,#E3E8F2);margin-bottom:12px;isolation:isolate}
.map-box::before{content:"";display:block;padding-top:52%}
.map-tiles{position:absolute;inset:0;overflow:hidden}
.map-tiles img{position:absolute;width:256px;height:256px;display:block;
image-rendering:auto;user-select:none;-webkit-user-drag:none}
.map-pin{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);z-index:3;
filter:drop-shadow(0 3px 6px rgba(19,26,63,.35));pointer-events:none}
.map-zoom{position:absolute;right:10px;top:10px;z-index:4;display:flex;flex-direction:column;
border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(19,26,63,.22)}
.map-zoom button{width:36px;height:36px;border:0;background:#fff;color:var(--ink);
font-size:19px;font-weight:700;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.map-zoom button:hover{background:var(--surface-2)}
.map-zoom button+button{border-top:1px solid var(--line)}
.map-open{position:absolute;left:10px;bottom:10px;z-index:4;display:inline-flex;align-items:center;
gap:7px;padding:9px 15px;border-radius:999px;background:#fff;color:var(--ink);
font-size:13.5px;font-weight:700;text-decoration:none;box-shadow:0 2px 10px rgba(19,26,63,.22)}
.map-open:hover{background:var(--surface-2)}
.map-open svg{color:var(--stop)}
.map-attr{position:absolute;right:0;bottom:0;z-index:4;padding:3px 8px;
background:rgba(255,255,255,.82);color:var(--ink-3);font-size:10.5px;font-weight:600;
text-decoration:none;border-radius:8px 0 0 0}
.map-attr:hover{color:var(--ink-2)}
/* Nuotraukos */
.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.photo{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;
background:var(--surface-2);border:1px solid var(--line);aspect-ratio:4/3}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo-tag{position:absolute;left:8px;top:8px;padding:3px 9px;border-radius:999px;
background:var(--navy);color:#fff;font-size:11px;font-weight:800;letter-spacing:.02em}
.photo-tools{position:absolute;right:6px;bottom:6px;display:flex;gap:4px;opacity:0;transition:opacity .15s}
.photo:hover .photo-tools,.photo:focus-within .photo-tools{opacity:1}
.pbtn{width:32px;height:32px;border-radius:9px;border:0;cursor:pointer;
background:rgba(19,26,63,.86);color:#fff;font-size:14px;font-weight:700;line-height:1;
display:grid;place-items:center;padding:0}
.pbtn:hover{background:var(--navy)}
.pbtn-del{background:rgba(217,59,43,.9)}
.pbtn-del:hover{background:var(--stop)}
@media (max-width:900px){
.photo-grid{grid-template-columns:repeat(2,1fr)}
.photo-tools{opacity:1}
.pbtn{width:34px;height:34px}
}
/* Lovos pagal kambarius */
.bedroom-card{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:16px;margin-bottom:12px;background:var(--surface-2)}
.bedroom-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.bedroom-head .bedroom-type{max-width:190px;flex:none}
.bedroom-name{flex:1;min-width:0;font-weight:800;font-size:16px;letter-spacing:-.01em;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bedroom-head .btn{flex:none}
.bed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.bed-item{display:flex;flex-direction:column;gap:7px;background:var(--surface);
border:1px solid var(--line-2);border-radius:var(--r-md);padding:11px}
.bed-item>span{font-size:13px;font-weight:700;line-height:1.3;color:var(--ink-2);min-height:34px}
.bed-item input{width:100%;min-height:44px;padding:6px 8px;text-align:center;font-weight:800;font-size:17px}
@media (max-width:640px){
.bedroom-head{flex-wrap:wrap}
.bedroom-head .bedroom-type{max-width:none;flex:1 1 100%;order:1}
.bedroom-name{order:0;flex:1}
.bed-grid{grid-template-columns:repeat(3,1fr);gap:8px}
.bed-item{padding:9px 7px}
.bed-item>span{font-size:12px;min-height:32px}
}
/* Savaitės dienų žymėjimas */
.daypick{display:flex;gap:7px;flex-wrap:wrap}
.daypick-item{position:relative;cursor:pointer}
.daypick-item input{position:absolute;opacity:0;width:0;height:0}
.daypick-item span{
display:grid;place-items:center;min-width:52px;height:48px;padding:0 12px;
border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);
font-weight:700;font-size:15px;color:var(--ink-2);transition:background .12s,border-color .12s,color .12s;
}
.daypick-item:hover span{background:var(--surface)}
.daypick-item input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.daypick-item input:focus-visible+span{outline:3px solid var(--navy-3);outline-offset:2px}
/* Apmokėjimo juosta */
.paybar{display:flex;height:8px;border-radius:999px;overflow:hidden;background:var(--line-2);margin:2px 0 12px}
.paybar span{display:block;height:100%;transition:width .3s}
/* Patogumai */
.am-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}
.am-item{
display:flex;align-items:center;gap:11px;padding:11px 13px;
border:1.5px solid var(--line);border-radius:var(--r-md);background:var(--surface-2);
cursor:pointer;font-size:14.5px;font-weight:600;transition:background .12s,border-color .12s;
min-height:52px;
}
.am-item:hover{background:var(--surface)}
.am-item input{width:20px;height:20px;accent-color:var(--navy);flex:none;margin:0}
.am-item .am-ico{display:grid;place-items:center;color:var(--ink-2);flex:none}
.am-item .am-lbl{min-width:0;line-height:1.3}
.am-item:has(input:checked){background:var(--brand-soft);border-color:var(--navy)}
.am-item:has(input:checked) .am-ico{color:var(--navy)}
/* Patogumai peržiūrai (be žymimųjų langelių) */
.am-list{display:flex;flex-wrap:wrap;gap:8px}
.am-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;
border:1px solid var(--line);background:var(--surface-2);font-size:13.5px;font-weight:600}
.am-chip svg{color:var(--ink-2);flex:none}
/* Rezervacijų šaltiniai */
.src-card{display:flex;flex-direction:column}
.src-bar{display:flex;height:9px;border-radius:999px;overflow:hidden;background:var(--line-2);margin:2px 0 14px}
.src-bar span{display:block;height:100%}
.src-list{list-style:none;margin:0;padding:0}
.src-list li{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:14.5px}
.src-list i{width:10px;height:10px;border-radius:3px;flex:none}
.src-list .src-name{flex:1;min-width:0;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.src-list b{font-weight:800;font-size:16px}
.src-list .src-pct{width:42px;text-align:right;color:var(--ink-3);font-size:13px;font-weight:700}
.src-empty{font-size:14px;color:var(--ink-2);margin:6px 0 0;line-height:1.45}
.src-empty a{color:var(--navy);font-weight:700;text-decoration:underline}
/* Skydelio rodiklių eilutė: 3 skaičiai + šaltiniai */
.stats-row{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.stats-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){
.stats-row{grid-template-columns:repeat(3,1fr);gap:8px}
.stats-row>.stat{padding:13px 11px;border-radius:18px}
.stats-row>.stat .label{font-size:11.5px;line-height:1.25;margin-bottom:6px}
.stats-row>.stat .value{font-size:21px;letter-spacing:-.04em}
.stats-row>.stat .hint{font-size:11px;margin-top:auto;padding-top:6px;line-height:1.3}
.stats-row .src-card{grid-column:1 / -1;padding:16px}
.stats-row .src-card .label{font-size:13px}
}
@media (max-width:900px){
.grid-4 .src-card{grid-column:1 / -1}
}
/* Šiandienos blokas — parašo elementas */
.daycard{
/* Dekoratyvi šviesa įpiešta į patį foną — todėl niekada neišlenda
už suapvalintų kampų (Safari nekerpa filtruotų vaikų). */
background:
radial-gradient(300px 300px at calc(100% - 30px) -40px,
rgba(142,155,224,.30), rgba(38,50,110,.13) 52%, rgba(255,255,255,0) 74%),
var(--surface);
border:1px solid var(--line);border-radius:var(--r-xl);
padding:24px;box-shadow:var(--shadow-1);display:flex;gap:26px;align-items:center;flex-wrap:wrap;
position:relative;overflow:hidden;
}
.daycard-date{line-height:.88}
.daycard-date .dow{font-size:15px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.daycard-date .day{font-size:66px;font-weight:800;letter-spacing:-.05em}
.daycard-date .mon{font-size:20px;font-weight:600;color:var(--ink-2);margin-top:6px}
.daycard-flow{display:flex;gap:12px;flex-wrap:wrap}
.flow-item{
min-width:132px;border-radius:var(--r-md);padding:14px 16px;border:1px solid var(--line);background:var(--surface-2);
}
.flow-item b{display:block;font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1.1}
.flow-item span{font-size:13.5px;font-weight:700;color:var(--ink-2)}
.flow-item.in{background:var(--free-soft);border-color:#CFEDE3}
.flow-item.in b{color:#0B7A5B}
.flow-item.out{background:var(--accent-soft);border-color:#F8E2BC}
.flow-item.out b{color:var(--accent-deep)}
/* =========================================================
Mygtukai
========================================================= */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
min-height:var(--tap);padding:0 22px;border-radius:999px;border:1px solid transparent;
background:var(--navy);color:#fff;font-weight:700;font-size:16px;cursor:pointer;
transition:transform .12s ease,box-shadow .15s ease,background .15s;white-space:nowrap;
}
.btn:hover{box-shadow:var(--shadow-2)}
.btn:active{transform:translateY(1px)}
.btn svg{width:19px;height:19px;stroke-width:2.1;flex:none}
.btn-brand{background:var(--navy)}
.btn-brand:hover{background:var(--navy-2)}
.btn-accent{background:var(--accent);color:#3A2600}
.btn-accent:hover{background:#E29612}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-danger{background:var(--stop-soft);color:#A32116;border-color:#F6CFCA}
.btn-sm{min-height:42px;padding:0 16px;font-size:14.5px}
.btn-lg{min-height:58px;padding:0 28px;font-size:17px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
/* =========================================================
Formos
========================================================= */
.field{margin-bottom:18px}
.field label{display:block;font-weight:700;font-size:15px;margin-bottom:7px}
.field .help{font-size:14px;line-height:1.5;color:var(--ink-2);margin-top:6px}
.input,select.input,textarea.input{
width:100%;min-height:var(--tap);padding:12px 16px;
background:var(--surface-2);border:1.5px solid var(--line);border-radius:var(--r-md);
font-size:17px;transition:border-color .15s,background .15s;
}
.input:focus{outline:none;border-color:var(--navy-3);background:var(--surface);box-shadow:0 0 0 4px rgba(58,70,128,.10)}
textarea.input{min-height:110px;resize:vertical;line-height:1.5}
select.input{appearance:none;background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 14px center;padding-right:44px}
.input-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.input-row{grid-template-columns:1fr}}
.checkbox{display:flex;align-items:center;gap:11px;min-height:var(--tap);font-weight:600}
.checkbox input{width:22px;height:22px;accent-color:var(--navy)}
/* =========================================================
Žymos
========================================================= */
.badge{
display:inline-flex;align-items:center;gap:6px;
line-height:1.35;
padding:5px 12px;border-radius:999px;font-size:13px;font-weight:700;
background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);white-space:nowrap;
}
.badge-dot{width:8px;height:8px;border-radius:50%;background:currentColor}
.badge.ok{background:var(--free-soft);color:#0B7A5B;border-color:#CFEDE3}
.badge.warn{background:var(--accent-soft);color:var(--accent-deep);border-color:#F8E2BC}
.badge.info{background:var(--hold-soft);color:#3C48A8;border-color:#D8DCF6}
.badge.bad{background:var(--stop-soft);color:#A32116;border-color:#F6CFCA}
.badge.dark{background:var(--navy);color:#fff;border-color:var(--navy)}
/* =========================================================
Lentelės / sąrašai
========================================================= */
.table{width:100%;border-collapse:collapse}
.table th{
text-align:left;font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
color:var(--ink-3);padding:0 14px 12px;border-bottom:1px solid var(--line-2);
}
.table td{padding:15px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
.table tr:last-child td{border-bottom:none}
.table tbody tr{transition:background .12s}
.table tbody tr:hover{background:var(--surface-2)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:900px){.table-desktop{display:none}}
.list-item{
display:flex;align-items:center;gap:14px;padding:15px 4px;border-bottom:1px solid var(--line-2);
}
.list-item:last-child{border-bottom:none}
.list-item .grow{flex:1;min-width:0}
.list-item .title{display:block;font-weight:700;letter-spacing:-.01em}
.list-item .sub{display:block;font-size:14px;color:var(--ink-2);margin-top:2px}
.list-item .chev{color:var(--ink-3);flex:none}
.empty{text-align:center;padding:44px 20px}
.empty .icon{width:62px;height:62px;border-radius:20px;background:var(--brand-soft);color:var(--navy);
display:grid;place-items:center;margin:0 auto 16px}
.empty h3{margin-bottom:6px}
.empty p{color:var(--ink-2);margin:0 0 20px}
/* =========================================================
Kalendoriaus juosta (parašo elementas)
========================================================= */
.timeline-wrap{position:relative}
.timeline{
overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
border-radius:var(--r-lg);border:1px solid var(--line);background:var(--surface);
scrollbar-width:thin;scrollbar-color:var(--ink-3) var(--line-2);
cursor:grab;scroll-behavior:smooth;
}
.timeline.dragging{cursor:grabbing;scroll-behavior:auto;user-select:none}
.timeline.dragging .tl-bar,.timeline.dragging .tl-cell{pointer-events:none}
/* Visada matoma horizontali slinkties juosta */
.timeline::-webkit-scrollbar{height:12px}
.timeline::-webkit-scrollbar-track{background:var(--line-2);border-radius:0 0 var(--r-lg) var(--r-lg)}
.timeline::-webkit-scrollbar-thumb{background:#AFB6C6;border-radius:999px;border:3px solid var(--line-2)}
.timeline::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}
.timeline:focus-visible{outline:3px solid var(--navy-3);outline-offset:2px}
/* Rodyklės slinkimui */
.tl-nav{
position:absolute;top:50%;transform:translateY(-50%);z-index:8;
width:44px;height:44px;border-radius:50%;border:1px solid var(--line);
background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;
box-shadow:var(--shadow-2);transition:opacity .15s,background .15s;
}
.tl-nav:hover{background:var(--surface-2)}
.tl-nav.prev{left:170px}
.tl-nav.next{right:8px}
.tl-nav[hidden]{display:none}
@media (max-width:900px){
.tl-nav{display:none}
.timeline::-webkit-scrollbar{height:8px}
}
.tl-grid{min-width:max-content}
.tl-row{display:flex;border-bottom:1px solid var(--line-2)}
.tl-row:last-child{border-bottom:none}
.tl-head{position:sticky;top:0;background:var(--surface);z-index:5}
.tl-name{
width:186px;flex:none;padding:14px 16px;position:sticky;left:0;z-index:4;
background:var(--surface);border-right:1px solid var(--line);
font-weight:700;font-size:15px;display:flex;align-items:center;gap:10px;
}
.tl-name .dotc{width:11px;height:11px;border-radius:4px;flex:none}
.tl-days{display:flex;position:relative}
.tl-day{
width:44px;flex:none;text-align:center;padding:10px 0;border-right:1px solid var(--line-2);
font-size:13px;font-variant-numeric:tabular-nums;
}
.tl-day .dw{display:block;font-size:11px;font-weight:700;color:var(--ink-3);text-transform:uppercase}
.tl-day .dn{font-weight:700}
.tl-day.weekend{background:var(--surface-2)}
.tl-day.today{background:var(--accent-soft)}
.tl-day.today .dn{color:var(--accent-deep)}
.tl-cells{display:flex;position:relative;height:56px}
.tl-cell{width:44px;flex:none;border-right:1px solid var(--line-2)}
.tl-cell.weekend{background:var(--surface-2)}
.tl-cell.today{background:var(--accent-soft)}
.tl-bar{
position:absolute;top:9px;height:38px;border-radius:999px;
display:flex;align-items:center;padding:0 12px;gap:7px;
font-size:13px;font-weight:700;color:#fff;overflow:hidden;white-space:nowrap;
box-shadow:0 2px 8px rgba(20,22,26,.14);cursor:pointer;transition:transform .12s;
}
.tl-bar:hover{transform:translateY(-1px)}
.tl-bar.s-confirmed{background:linear-gradient(120deg,var(--navy),#3A4680)}
.tl-bar.s-pending{background:linear-gradient(120deg,#F5A524,#FFC15E);color:#4A2E00}
.tl-bar.s-checked_in{background:linear-gradient(120deg,#0F9E77,#28C296)}
.tl-bar.s-checked_out{background:linear-gradient(120deg,#9AA1AF,#B8BEC9)}
.tl-bar.s-blocked{background:repeating-linear-gradient(45deg,#5B6480,#5B6480 7px,#6E7791 7px,#6E7791 14px)}
/* ---------------------------------------------------------
Mėnesio tinklelis (telefonui)
--------------------------------------------------------- */
.mgrids{display:grid;gap:22px}
.mgrid-block{min-width:0}
.mgrid-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.mgrid-head b{font-size:16px;letter-spacing:-.01em}
.mgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.mdow{font-size:11.5px;font-weight:800;color:var(--ink-3);text-align:center;text-transform:uppercase;padding-bottom:2px}
.mcell{
aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
border-radius:12px;border:1px solid var(--line-2);background:var(--surface-2);
font-size:15px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;
text-decoration:none;transition:transform .1s;
}
.mcell:active{transform:scale(.94)}
.mcell.is-empty{visibility:hidden;pointer-events:none}
.mcell.is-past{opacity:.45}
.mcell.is-today{box-shadow:0 0 0 2.5px var(--accent);font-weight:800}
.mcell.s-confirmed{background:var(--navy);border-color:var(--navy);color:#fff}
.mcell.s-pending{background:#F5A524;border-color:#F5A524;color:#4A2E00}
.mcell.s-checked_in{background:#0F9E77;border-color:#0F9E77;color:#fff}
.mcell.s-checked_out{background:#B8BEC9;border-color:#B8BEC9;color:#fff}
.mcell.s-blocked{background:repeating-linear-gradient(45deg,#5B6480,#5B6480 6px,#6E7791 6px,#6E7791 12px);border-color:#5B6480;color:#fff}
@media (min-width:900px){
.mgrids{grid-template-columns:repeat(2,1fr);gap:26px}
}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:13.5px;color:var(--ink-2)}
.legend i{width:14px;height:14px;border-radius:5px;display:inline-block;margin-right:7px;vertical-align:-2px}
.month-switch{display:flex;align-items:center;gap:8px}
.month-switch .mbtn{
width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);
display:grid;place-items:center;cursor:pointer;
}
.month-switch .mbtn:hover{background:var(--surface-2)}
.month-switch .mlabel{font-weight:800;font-size:18px;min-width:150px;text-align:center;letter-spacing:-.02em}
/* Išskleidžiami mėnuo ir metai */
.mpick{
appearance:none;-webkit-appearance:none;
font-family:inherit;font-weight:800;font-size:16px;letter-spacing:-.02em;color:var(--ink);
background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
min-height:44px;padding:0 34px 0 14px;cursor:pointer;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 9px center;
}
.mpick:hover{background-color:var(--surface-2)}
.mpick:focus{outline:none;border-color:var(--navy-3);box-shadow:0 0 0 4px rgba(58,70,128,.10)}
.mpick-y{padding-right:32px}
@media (max-width:900px){
.month-switch{flex-wrap:nowrap}
.mpick{font-size:15px;min-height:44px;padding:0 30px 0 11px}
.month-switch .mbtn{flex:none}
}
/* =========================================================
Prisijungimas
========================================================= */
.auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.auth-visual{
background:#0C1230 url('../img/auth-visual.png') center/cover no-repeat;
color:#fff;padding:56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;
}
.auth-visual::after{
content:"";position:absolute;inset:0;
background:linear-gradient(155deg,rgba(12,18,48,.86) 0%,rgba(19,26,63,.80) 45%,rgba(12,18,48,.90) 100%);
}
.auth-visual h2{font-size:38px;letter-spacing:-.035em;max-width:12ch;position:relative;z-index:2}
.auth-visual p{color:rgba(255,255,255,.72);max-width:38ch;margin-top:14px;position:relative;z-index:2}
.auth-points{list-style:none;padding:0;margin:26px 0 0;position:relative;z-index:2}
.auth-points li{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px;color:rgba(255,255,255,.85);font-size:15.5px}
.auth-points svg{flex:none;margin-top:3px;color:var(--accent)}
.auth-form{display:flex;align-items:center;justify-content:center;padding:40px 24px;background:var(--canvas)}
.auth-box{width:100%;max-width:420px}
.auth-box .card{padding:30px}
@media (max-width:980px){
.auth{grid-template-columns:1fr}
.auth-visual{display:none}
}
/* =========================================================
Pranešimai
========================================================= */
.flash-wrap{position:fixed;top:18px;right:18px;left:18px;z-index:100;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none}
@media (max-width:900px){.flash-wrap{align-items:stretch;top:10px}}
.flash{
pointer-events:auto;max-width:460px;padding:15px 18px;border-radius:var(--r-md);
background:var(--navy);color:#fff;box-shadow:var(--shadow-2);font-weight:600;font-size:15.5px;
display:flex;gap:11px;align-items:flex-start;animation:slidein .25s ease;
}
.flash.ok{background:#0B7A5B}
.flash.error{background:#B3271A}
@keyframes slidein{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
/* Modalas */
.modal{position:fixed;inset:0;background:rgba(20,22,26,.5);backdrop-filter:blur(3px);z-index:80;
display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-box{background:var(--surface);border-radius:var(--r-xl);width:100%;max-width:560px;
max-height:88vh;overflow:auto;padding:26px;box-shadow:var(--shadow-2)}
@media (max-width:640px){
.modal{align-items:flex-end;padding:0}
.modal-box{max-width:none;border-radius:var(--r-xl) var(--r-xl) 0 0;max-height:92vh}
}
/* Smulkmenos */
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.row-end{justify-content:flex-end}
.between{display:flex;align-items:center;justify-content:space-between;gap:14px}
.stack>*+*{margin-top:16px}
.mt-0{margin-top:0}.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-0{margin-bottom:0}.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}
.only-mobile{display:none}
@media (max-width:900px){
.hide-mobile{display:none}
.only-mobile{display:revert}
div.only-mobile,.card.only-mobile{display:block}
.btn.only-mobile{display:inline-flex}
}
.divider{height:1px;background:var(--line-2);margin:18px 0}
.kv{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--line-2);font-size:15.5px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--ink-2);font-weight:600}
.kv .v{font-weight:700;text-align:right}
.copybox{display:flex;gap:8px;align-items:center}
.copybox input{font-size:13.5px;font-family:ui-monospace,Menlo,Consolas,monospace}
/* Adreso pasiūlymai */
.field[data-geo]{position:relative}
.geo-drop{
position:absolute;left:0;right:0;top:calc(100% - 22px);z-index:60;
max-height:290px;overflow:auto;padding:6px;
background:#fff;border:1px solid var(--line);border-radius:14px;
box-shadow:0 16px 40px rgba(19,26,63,.16);
}
.geo-drop[hidden]{display:none}
.geo-opt{
display:block;width:100%;text-align:left;padding:9px 11px;border:0;border-radius:10px;
background:none;cursor:pointer;font:inherit;font-size:13.5px;line-height:1.4;color:var(--ink);
}
.geo-opt:hover,.geo-opt.on{background:var(--surface-2)}
.geo-opt b{display:block;font-weight:700}
.geo-opt span{display:block;font-size:12px;color:var(--muted)}
.geo-empty{padding:10px 11px;font-size:13px;color:var(--muted)}
/* Nuoroda-mygtukas pagalbiniame tekste */
.link-btn{
display:inline;padding:0;margin-left:2px;border:0;background:none;cursor:pointer;
font:inherit;color:var(--brand);text-decoration:underline;text-underline-offset:2px;
}
.link-btn:hover{color:var(--ink)}
/* stayon kreditai */
.cr-code-in{font-size:22px;font-weight:800;letter-spacing:.28em;text-align:center}
.cr-found{padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);margin-bottom:18px}
.cr-found h3{margin:2px 0 4px;font-size:19px}
.cr-left{margin:12px 0 0;font-size:15px}
.cr-left b{font-size:20px;color:var(--brand)}
.cr-steps{margin:0;padding-left:20px;display:grid;gap:8px;font-size:14.5px;color:var(--ink-2)}
.cr-steps b{color:var(--ink)}
.row-btns{display:flex;gap:10px;flex-wrap:wrap}
/* Laukiam svečio patvirtinimo */
.ask-wait{text-align:center;padding:26px 20px}
.ask-wait h2{margin:16px 0 6px;font-size:22px}
.ask-sum{margin:0 0 12px}
.ask-sum b{display:block;font-size:34px;font-weight:800;letter-spacing:-.03em}
.ask-sum span{font-size:14.5px;color:var(--ink-3)}
.ask-left{margin:16px 0;font-size:14px;color:var(--ink-3)}
.ask-spin{width:46px;height:46px;margin:0 auto;border-radius:50%;
border:3px solid var(--line);border-top-color:var(--navy);animation:askSpin .9s linear infinite}
@keyframes askSpin{to{transform:rotate(360deg)}}
.card.is-ok .ask-sum b{color:#0F9E77}
.card.is-no .ask-sum b{color:#C0392B}
/* Įskiepių puslapis: plati kortelė peržiūrai */
.grid-2 > .card.is-wide{grid-column:1 / -1}
/* Bandomosios paskyros juosta */
.demo-bar{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;
margin:0 0 18px;padding:14px 18px;border-radius:16px;
background:linear-gradient(135deg,#FFF3E4,#FFE8D2);border:1px solid #F5C89B;color:#7A4A12;font-size:14.5px
}
.demo-bar svg{flex:none;color:#D9822B}
.demo-bar span{flex:1;min-width:220px}
.demo-bar b{color:#5E3608}
.demo-bar a{
padding:9px 16px;border-radius:999px;background:var(--navy,#131A3F);color:#fff;
font-weight:700;font-size:13.5px;text-decoration:none;white-space:nowrap
}
.demo-bar a:hover{opacity:.9}
/* Bandomosios paskyros mygtukas */
.demo-btn{gap:9px;border:1.5px dashed var(--line-2,#D7DCE8);font-weight:700}
.demo-btn svg{color:var(--accent,#F26A1B)}
.demo-btn:hover{border-style:solid;border-color:var(--navy,#131A3F)}
/* Viešas mokėjimo puslapis */
.pub{background:#F4F6FB;min-height:100vh;margin:0;padding:0}
.pub-wrap{max-width:520px;margin:0 auto;padding:40px 20px 60px}
.pub-brand{display:block;margin:0 0 24px}
.pub-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:32px 30px;box-shadow:var(--shadow-1)}
.pub-card h1{margin:0 0 8px;font-size:25px;font-weight:800;letter-spacing:-.03em}
.pub-res{margin:22px 0;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.pub-row{display:flex;justify-content:space-between;gap:14px;padding:12px 16px;font-size:14.5px;border-bottom:1px solid var(--line)}
.pub-row:last-child{border-bottom:0}
.pub-row span{color:var(--ink-3)}
.pub-row.is-sum{background:#F8FAFC;font-size:16px}
.pub-row.is-sum b{font-size:20px;color:var(--navy,#131A3F)}
.pub-note{margin:18px 0 0;font-size:13px;color:var(--ink-3);line-height:1.6}
.pub-err{padding:14px;border-radius:12px;background:#FDECEA;color:#B3261E;font-size:14px}
.pub-ok{display:grid;place-items:center;width:60px;height:60px;margin:0 auto 16px;border-radius:50%;
background:#E6F6F0;color:#0F9E77}
.pub-foot{margin:22px 0 0;text-align:center;font-size:12.5px;color:var(--ink-3)}
.pub-foot b{font-weight:800;color:var(--navy,#131A3F)}
.pub-foot b i{font-style:normal;color:#F26A1B}
/* Prisijungimų istorija */
.lg-more{
margin-left:10px;padding:4px 11px;border:1px solid var(--line-2,#D7DCE8);border-radius:999px;
background:#fff;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;color:var(--navy,#131A3F)
}
.lg-more:hover{border-color:var(--navy,#131A3F)}
.lg-list{display:grid;gap:8px}
.lg-row{
display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:center;
padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff
}
.lg-when b{display:block;font-size:13.5px;font-weight:700}
.lg-when i{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.lg-what b{display:block;font-size:14px;font-weight:700}
.lg-what i{font-style:normal;font-size:12.5px;color:var(--ink-3)}
.lg-len{font-size:13px;color:var(--ink-3);white-space:nowrap}
@media (max-width:600px){
.lg-row{grid-template-columns:1fr auto}
.lg-when{grid-column:1 / -1;display:flex;gap:8px;align-items:baseline}
}
/* Administratorius dirba su svetima įmone */
.as-bar{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;
margin:0 0 18px;padding:14px 18px;border-radius:16px;
background:linear-gradient(135deg,#EEF1F9,#E4E9F7);border:1px solid #C9D2EA;color:#2A3566;font-size:14.5px
}
.as-bar svg{flex:none;color:#3A4680}
.as-bar span{flex:1;min-width:220px}
.as-bar b{color:#131A3F}
.as-bar a{
padding:9px 16px;border-radius:999px;background:var(--navy,#131A3F);color:#fff;
font-weight:700;font-size:13.5px;text-decoration:none;white-space:nowrap
}
.as-bar a:hover{opacity:.9}
/* Įmonės objektų sąrašas administravime */
.ap-mini{display:grid;gap:8px;margin-top:4px}
.ap-mini-row{
display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff
}
.ap-mini-row b{font-size:14.5px}
.ap-mini-row .muted{font-size:12.5px}
.ap-mini-row .badge{align-self:center}
@media (max-width:600px){.ap-mini-row{grid-template-columns:1fr auto}}
/* Išvykimo diena - pusiau užimta */
.mcell.is-out{position:relative;background:transparent!important;color:var(--ink)}
.mcell.is-out::before{
content:"";position:absolute;inset:0;border-radius:inherit;
background:linear-gradient(135deg,currentColor 0 50%,transparent 50% 100%);opacity:.22
}
.mcell.is-out.s-confirmed{color:var(--navy,#131A3F)}
.mcell.is-out.s-pending{color:#F5A524}
.mcell.is-out.s-checked_in{color:#0F9E77}
.mcell.is-out.s-checked_out{color:#9AA1AF}
/* Kalendoriaus prenumerata objekto kortelėje */
.ap-wrap{display:flex;flex-direction:column}
.ap-wrap > .card{flex:1;border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:0}
.ap-ical{
display:flex;align-items:center;gap:10px;padding:12px 22px;
border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);
background:var(--surface);font-size:14px;color:var(--ink-2)
}
.ap-ical svg{color:var(--ink-3);flex:none}
.ap-ical .grow{flex:1}
/* Kalendoriaus prenumeratos langas */
.ics-box{padding:4px 0}
.ics-box p{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.ics-box ol{margin:0 0 16px;padding-left:20px;display:grid;gap:7px;font-size:14px;color:var(--ink-2)}
.ics-box b{color:var(--ink)}
/* Objekto puslapio nuoroda kortelėje */
.ap-site{
display:flex;align-items:center;gap:10px;padding:12px 22px;
border:1px solid var(--line);border-top:0;background:#fff;font-size:13.5px;color:var(--ink-2)
}
.ap-site svg{color:var(--accent,#F26A1B);flex:none}
/* Etiketė trumpa, tad jos netrumpinam - geriau mygtukai persikelia
į kitą eilutę, nei kad liktų „Jūsų p..." */
.ap-site{flex-wrap:wrap}
.ap-site .grow{flex:1 1 auto;white-space:nowrap}
.ap-site .btn-sm{flex:none}
.ap-site b{color:var(--ink)}
.ap-wrap > .card{border-bottom:0}
@media (max-width:600px){
.ap-site{flex-wrap:wrap}
.ap-site .grow{flex:1 1 100%}
}
/* Logotipo peržiūra nustatymuose */
.logo-now{display:flex;align-items:center;gap:14px;margin-bottom:10px;padding:12px 14px;
border:1px solid var(--line);border-radius:14px;background:#fff}
.logo-now img{max-height:46px;max-width:170px;width:auto;object-fit:contain}
/* Įvertinimų eilutės objekto formoje */
.rate-row{padding:14px 0;border-bottom:1px solid var(--line)}
.rate-row:last-child{border-bottom:0;padding-bottom:0}
.rate-name{display:block;margin-bottom:8px;font-size:14px;font-weight:800;color:var(--ink)}
/* =========================================================
Pradžia naujam šeimininkui
========================================================= */
.ob-body { background: linear-gradient(160deg, #F4F6FB, #EDF0F7 60%, #E7EBF4); min-height: 100vh; }
.ob-head {
display: flex; align-items: center; justify-content: space-between;
max-width: 720px; margin: 0 auto; padding: 22px 20px 0;
}
.ob-head .brand { font-family: var(--font-head); font-size: 22px; font-weight: 800; color: var(--navy); }
.ob-head .brand span { color: var(--brand); }
.ob-out { font-size: 14px; color: var(--ink-3); }
.ob-main { max-width: 720px; margin: 0 auto; padding: 26px 20px 60px; }
/* Žingsniai */
.ob-steps { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 26px; }
.ob-step {
position: relative; display: grid; place-items: center;
width: 36px; height: 36px; border-radius: 50%;
background: #fff; border: 2px solid var(--line-2); color: var(--ink-3);
font-size: 15px; font-weight: 800;
}
.ob-step i {
position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink-3); white-space: nowrap;
}
.ob-step.is-now { background: var(--navy); border-color: var(--navy); color: #fff; }
.ob-step.is-now i { color: var(--navy); }
.ob-step.done { background: #E7F6F0; border-color: #0F9E77; color: #0F9E77; }
.ob-line { width: 54px; height: 2px; background: var(--line-2); border-radius: 2px; }
/* Kortelė */
.ob-card {
margin-top: 22px; padding: 34px; border-radius: 24px; background: #fff;
border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(19,26,63,.08);
}
.ob-card h1 {
margin: 0 0 10px; font-family: var(--font-head);
font-size: clamp(22px, 3.2vw, 28px); font-weight: 700; letter-spacing: -.02em;
line-height: 1.25; text-wrap: balance;
}
.ob-lead { margin: 0 0 26px; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.ob-big { font-size: 17px; height: 54px; }
.ob-card .field label b { color: var(--brand); }
.btn-lg { height: 56px; font-size: 16.5px; }
/* Planai */
.ob-plans { display: grid; gap: 14px; margin-bottom: 22px; }
.ob-plan {
position: relative; display: block; padding: 22px; border-radius: 20px;
border: 2px solid var(--line); background: #fff; cursor: pointer;
transition: border-color .18s, box-shadow .18s, transform .18s;
}
.ob-plan:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(19,26,63,.09); }
.ob-plan input { position: absolute; opacity: 0; pointer-events: none; }
.ob-plan:has(input:checked) {
border-color: var(--brand); box-shadow: 0 16px 36px rgba(242,106,27,.16);
background: linear-gradient(180deg, rgba(242,106,27,.05), #fff 42%);
}
.ob-flag {
position: absolute; top: -12px; right: 20px; padding: 5px 12px; border-radius: 999px;
background: var(--brand); color: #fff; font-size: 11.5px; font-weight: 800;
letter-spacing: .05em; text-transform: uppercase;
}
.ob-plan-in { display: block; }
.ob-plan-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ob-plan-top b { font-size: 18px; font-weight: 800; }
.ob-price { font-size: 13.5px; color: var(--ink-3); }
.ob-price em {
font-style: normal; font-family: var(--font-head); font-size: 28px; font-weight: 800;
color: var(--ink); letter-spacing: -.03em; margin-right: 3px;
}
.ob-perks { display: grid; gap: 8px; margin-bottom: 12px; }
.ob-perks span { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; color: var(--ink-2); }
.ob-perks svg { flex: none; margin-top: 2px; color: #0F9E77; }
.ob-note { display: block; font-size: 13px; color: var(--ink-3); }
.ob-fine { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); text-align: center; }
@media (max-width: 600px) {
.ob-card { padding: 24px 20px; border-radius: 20px; }
.ob-main { padding: 20px 16px 50px; }
/* Penki žingsniai telefone: apskritimai ir tarpai mažesni, o užrašai
rodomi tik ties tuo žingsniu, kuriame esi - kitaip „Apartamentas" ir
„Kalendoriai" užlipdavo vienas ant kito. */
.ob-steps { gap: 6px; margin-bottom: 34px; }
.ob-step { width: 32px; height: 32px; font-size: 14px; }
.ob-line { width: 18px; }
.ob-step i { display: none; }
.ob-step.is-now i { display: block; font-size: 12.5px; }
}
/* Pasirinktas planas - varnelė kampe */
.ob-plan::after {
content: ""; position: absolute; right: 18px; bottom: 18px;
width: 22px; height: 22px; border-radius: 50%;
border: 2px solid var(--line-2); background: #fff;
}
.ob-plan:has(input:checked)::after {
border-color: var(--brand); background: var(--brand);
box-shadow: inset 0 0 0 3px #fff;
}
.ob-plan { padding-bottom: 26px; }
.ob-note { padding-right: 44px; }
/* Puslapio peržiūra pradžioje */
.ob-done {
margin-top: 22px; padding: 24px; border-radius: 24px; background: #fff;
border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(19,26,63,.08);
}
.ob-done-t {
display: flex; align-items: center; gap: 9px; margin: 0 0 16px;
font-size: 17px; font-weight: 800; color: #0F9E77;
}
.ob-prev { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); background: #F4F6FB; }
.ob-prev-bar {
display: flex; align-items: center; gap: 6px; padding: 10px 14px;
background: #EDF0F7; border-bottom: 1px solid var(--line);
}
.ob-prev-bar span { width: 10px; height: 10px; border-radius: 50%; background: #D7DCE8; }
.ob-prev-bar b {
margin-left: 10px; padding: 4px 12px; border-radius: 999px; background: #fff;
font-size: 12.5px; font-weight: 600; color: var(--ink-3);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ob-prev iframe { display: block; width: 100%; height: 420px; border: 0; background: #fff; }
.ob-done-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
@media (max-width: 600px) {
.ob-done { padding: 18px; }
.ob-prev iframe { height: 320px; }
/* Mygtukai per visą plotį. Be `white-space: normal` ilgas užrašas
„Atidaryti naujame lange" siaurame telefone išlįsdavo už krašto ir
puslapį būdavo galima stumdyti į šoną. */
.ob-done-acts .btn {
flex: 1 1 100%; min-width: 0;
white-space: normal; padding: 10px 16px; line-height: 1.35; text-align: center;
}
}
/* Papildomi nustatymai pradžioje */
.ob-more { margin: 6px 0 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.ob-more summary {
cursor: pointer; list-style: none; padding: 12px 14px; border-radius: 13px;
background: #F4F6FB; font-size: 15px; font-weight: 700; color: var(--navy);
}
.ob-more summary::-webkit-details-marker { display: none; }
.ob-more summary i { font-style: normal; font-weight: 500; color: var(--ink-3); font-size: 13.5px; }
.ob-more summary::after { content: " ▾"; color: var(--ink-3); }
.ob-more[open] summary::after { content: " ▴"; }
.ob-more > .field, .ob-more > .input-row, .ob-more > .checkbox { margin-top: 16px; }
.ob-ams { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.ob-am {
display: flex; align-items: center; gap: 9px; padding: 10px 12px;
border: 1px solid var(--line); border-radius: 12px; background: #fff;
font-size: 14px; cursor: pointer;
}
.ob-am:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.ob-am input { width: 17px; height: 17px; accent-color: var(--brand); }
a.ob-back { margin-top: 12px; }
/* Nuotraukų įkėlimas pradžioje */
.ob-drop {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 26px 20px; border: 2px dashed var(--line-2); border-radius: 16px;
background: #F8FAFD; text-align: center; cursor: pointer;
transition: border-color .18s, background .18s;
}
.ob-drop:hover { border-color: var(--brand); background: rgba(242,106,27,.05); }
.ob-drop svg { color: var(--ink-3); }
.ob-drop b { font-size: 15.5px; font-weight: 800; color: var(--navy); }
.ob-drop span { font-size: 13.5px; color: var(--ink-3); }
.ob-picked {
margin: 10px 0 0; padding: 10px 14px; border-radius: 12px;
background: #E7F6F0; color: #0B6B52; font-size: 14px; font-weight: 700;
}
.ob-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.ob-foto { position: relative; width: 84px; height: 62px; border-radius: 10px; overflow: hidden; }
.ob-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ob-foto b {
position: absolute; left: 0; right: 0; bottom: 0; padding: 3px;
background: rgba(19,26,63,.78); color: #fff; font-size: 9.5px; font-weight: 800;
text-align: center; letter-spacing: .04em; text-transform: uppercase;
}
/* Pradžios juosta objekto lange */
.wiz-bar {
display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
margin-bottom: 22px; padding: 22px 24px; border-radius: 20px;
background: linear-gradient(135deg, #131A3F, #232C5C); color: #fff;
box-shadow: 0 18px 40px rgba(19,26,63,.22);
}
.wiz-step {
margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .14em;
text-transform: uppercase; color: rgba(255,255,255,.6);
}
.wiz-bar h1 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.wiz-note { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.78); max-width: 60ch; }
.wiz-bar .btn { flex: none; background: var(--brand); border-color: var(--brand); color: #fff; }
.wiz-bar .btn:hover { opacity: .92; color: #fff; }
@media (max-width: 720px) {
.wiz-bar { padding: 18px; }
.wiz-bar h1 { font-size: 20px; }
.wiz-bar .btn { width: 100%; }
}
/* Pradžios juostos mygtukas telefone matomas */
@media (max-width: 720px) {
.wiz-bar .btn { background: var(--brand); border-color: var(--brand); color: #fff; }
}
/* Kol pradžia nebaigta - be šoninio ir apatinio meniu */
.is-wizard .sidebar,
.is-wizard .tabbar { display: none; }
.is-wizard .app { grid-template-columns: 1fr; }
.is-wizard .main { margin-left: 0; padding-left: 20px; padding-right: 20px; max-width: 900px; margin-inline: auto; }
.is-wizard .topbar { display: none; }
@media (max-width: 900px) {
.is-wizard .main { padding-left: 16px; padding-right: 16px; padding-bottom: 40px; }
}
.wiz-bar .btn, .wiz-bar .btn:hover {
background: var(--brand); border-color: var(--brand); color: #fff;
}
/* Prilipęs mygtukas pradžios metu */
.wiz-dock {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
display: flex; align-items: center; justify-content: center; gap: 16px;
padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
background: rgba(255,255,255,.96);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border-top: 1px solid var(--line);
box-shadow: 0 -10px 30px rgba(19,26,63,.1);
}
.wiz-dock .dock-txt { font-size: 14.5px; color: var(--ink-2); }
.wiz-dock .btn { background: var(--brand); border-color: var(--brand); color: #fff; flex: none; }
.is-wizard .main { padding-bottom: 110px; }
@media (max-width: 720px) {
.wiz-dock { gap: 10px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
}
.wiz-dock .btn, .wiz-dock .btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Google žemėlapis objekto lange */
.map-box { position: relative; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--line); }
.map-box iframe { display: block; width: 100%; height: 260px; border: 0; }
.map-box .map-open { position: absolute; right: 10px; bottom: 10px; z-index: 2; }
/* Nuoroda po žemėlapiu, ne ant jo */
.map-box .map-open {
position: static; display: flex; align-items: center; justify-content: center; gap: 7px;
padding: 11px; border-top: 1px solid var(--line); background: #fff;
font-size: 14px; font-weight: 700; color: var(--navy);
}
.map-box .map-open:hover { background: var(--surface); }
/* Nuotraukų įkėlimas objekto lange */
.ph-drop {
display: flex; flex-direction: column; align-items: center; gap: 6px;
padding: 26px 20px; border: 2px dashed var(--line-2); border-radius: 16px;
background: #F8FAFD; text-align: center; cursor: pointer;
transition: border-color .18s, background .18s;
}
.ph-drop:hover { border-color: var(--brand); background: rgba(242,106,27,.05); }
.ph-drop svg { color: var(--ink-3); }
.ph-drop b { font-size: 15.5px; font-weight: 800; color: var(--navy); }
.ph-drop span { font-size: 13.5px; color: var(--ink-3); }
.ph-picked {
margin: 10px 0 0; padding: 10px 14px; border-radius: 12px;
background: #E7F6F0; color: #0B6B52; font-size: 14px; font-weight: 700;
}
/* Įkėlimo sritis - tekstas vienas po kitu, su ikona */
.ph-drop { flex-direction: column; }
.ph-drop svg { display: block; }
.ph-drop b, .ph-drop span { display: block; width: 100%; }
.ph-ic { display: grid; place-items: center; color: var(--ink-3); }
/* Google žemėlapis objekto lange - pilnas aukštis */
.map-box { margin-bottom: 12px; }
.map-box::before { content: none; display: none; }
.map-box iframe { display: block; width: 100%; height: 300px; border: 0; }
/* Kai vieta dar nenustatyta */
.map-empty {
display: grid; place-items: center; min-height: 220px; text-align: center;
background: linear-gradient(160deg, #EDF0F6, #E3E8F2); border-style: dashed;
}
.map-empty p { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink-2); }
.map-empty span { display: block; margin-top: 6px; font-size: 13.5px; font-weight: 500; color: var(--ink-3); }
/* Paslėpti laukai turi likti paslėpti - .input-row turi display:grid */
[hidden] { display: none !important; }
/* Puslapio adreso pasirinkimas */
.slug-row { display: flex; align-items: stretch; }
.slug-pre {
display: flex; align-items: center; padding: 0 12px;
border: 1px solid var(--line-2); border-right: 0; border-radius: 13px 0 0 13px;
background: #F4F6FB; font-size: 15px; font-weight: 700; color: var(--ink-3); white-space: nowrap;
}
.slug-row .input { border-radius: 0 13px 13px 0; }
.slug-ideas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.slug-ideas > span { font-size: 13.5px; color: var(--ink-3); }
.slug-chip {
padding: 7px 13px; border-radius: 999px; cursor: pointer;
border: 1px solid var(--line-2); background: #fff;
font: inherit; font-size: 13.5px; font-weight: 700; color: var(--navy);
transition: border-color .18s, background .18s;
}
.slug-chip:hover { border-color: var(--brand); background: var(--brand-soft); }
.slug-chip.is-on { border-color: var(--brand); background: var(--brand); color: #fff; }
/* Ką rodyti be logotipo */
.logo-fb { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.logo-fb-opt {
display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-bottom: 8px;
border: 1px solid var(--line); border-radius: 13px; background: #fff; cursor: pointer;
}
.logo-fb-opt:has(input:checked) { border-color: var(--brand); background: rgba(242,106,27,.05); }
.logo-fb-opt input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--brand); flex: none; }
.logo-fb-opt b { display: block; font-size: 14.5px; font-weight: 700; }
.logo-fb-opt i { display: block; font-style: normal; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.logo-fb-opt { align-items: center; }
.logo-fb-opt input { margin-top: 0; }
/* Peržiūra rodoma taip, kaip puslapis atrodys kompiuteryje, bet stulpelio
nebeplatinam: anksčiau žingsniai su peržiūra (Puslapis ir Planas) buvo
1120 px, o Apartamentas ir Kalendoriai - 720 px, tad langeliai šokinėjo.
Peržiūra tiesiog sumažinama, kad tilptų į tą patį plotį. */
.ob-prev-in { position: relative; overflow: hidden; background: #fff; }
.ob-prev-in iframe {
position: absolute; top: 0; left: 0;
width: 1440px; height: 1600px; border: 0;
transform-origin: 0 0;
}
/* Peržiūroje galima slinkti visą puslapį */
.ob-prev-in { overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; }
.ob-prev-scroll { position: relative; }
.ob-prev-in iframe { position: absolute; top: 0; left: 0; }
/* Logotipo peržiūra */
.logo-box { position: relative; }
.logo-box img {
display: block; max-height: 96px; max-width: 260px; width: auto;
padding: 14px 18px; border: 1px solid var(--line); border-radius: 16px; background: #F8FAFD;
}
.logo-del {
display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
padding: 8px 14px; border-radius: 999px; cursor: pointer;
border: 1px solid #F3C9C9; background: #FEF6F6; color: #B4232A;
font: inherit; font-size: 13.5px; font-weight: 700;
}
.logo-del:hover { background: #FCEBEB; }
.logo-fb-opt:has(input:disabled) { opacity: .45; cursor: not-allowed; }
/* Prilipusi juosta pradžios žingsniuose */
.wiz-dock .dock-back { flex: none; }
.wiz-dock .dock-txt { flex: 1; text-align: right; }
.ob-body .ob-main { padding-bottom: 110px; }
/* Trumpas užrašas - tik telefone */
.dock-short { display: none; }
@media (max-width: 720px) {
/* Anksčiau čia abu mygtukai gaudavo width:100%, tad juosta išsipūsdavo
platesnė už ekraną: „Atgal" nubėgdavo į kairę, o ilgas „Baigti ir
atidaryti sistemą" - į dešinę. Dabar „Atgal" tiek, kiek reikia,
o pagrindinis mygtukas užima likusią vietą. */
.wiz-dock { gap: 8px; padding-left: 14px; padding-right: 14px; }
.wiz-dock .dock-txt { display: none; }
.wiz-dock .dock-long { display: none; }
.wiz-dock .dock-short { display: inline; }
.wiz-dock .dock-back { flex: 0 0 auto; width: auto; padding: 0 16px; }
.wiz-dock .btn:not(.dock-back) { flex: 1 1 auto; width: auto; min-width: 0; }
}
/* Su trumpais užrašais „Atgal" telpa net 320 px ekrane, tad teksto
neslepiam - vien rodyklė nieko nesako. Atsarginė riba - itin siauri ekranai. */
@media (max-width: 300px) {
.wiz-dock .dock-back span { display: none; }
.wiz-dock .dock-back { padding: 0 14px; }
}
/* ---------------------------------------------------------------
* Kalendorių žingsnis pradžioje
* --------------------------------------------------------------- */
.cal-flow {
display: flex; align-items: center; gap: 12px;
margin: 4px 0 4px; padding: 14px 16px;
border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2);
}
.cal-flow-x { flex: 1; min-width: 0; }
.cal-flow-x b { display: block; font-size: 14.5px; font-weight: 800; color: var(--navy); }
.cal-flow-x i { display: block; font-style: normal; font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.cal-flow-a { flex: none; color: var(--brand); }
.cal-h {
display: flex; align-items: center; gap: 10px;
margin: 0 0 8px; font-size: 15.5px; font-weight: 800; color: var(--navy);
}
.cal-n {
flex: none; width: 24px; height: 24px; border-radius: 50%;
background: var(--brand); color: #fff;
font-size: 13px; font-weight: 800;
display: inline-flex; align-items: center; justify-content: center;
}
.cal-where { margin-top: 12px; display: grid; gap: 8px; }
.cal-where p {
margin: 0; padding: 10px 12px; border-radius: 10px;
background: var(--brand-soft); font-size: 13.5px; line-height: 1.5;
}
.cal-where b { color: var(--navy); margin-right: 6px; }
.cal-where span { color: var(--ink-2); }
.cal-field { margin-bottom: 14px; }
.cal-row { display: flex; gap: 8px; align-items: center; }
.cal-row .input { flex: 1; min-width: 0; font-size: 13.5px; }
.cal-test { flex: none; white-space: nowrap; }
.cal-msg { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; }
.cal-msg.is-ok { color: var(--free); }
.cal-msg.is-bad { color: var(--stop); }
.cal-fine { margin: 4px 0 0; font-size: 13px; color: var(--ink-3); line-height: 1.55; }
.cal-skip {
margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cal-skip p { margin: 0; font-size: 14px; font-weight: 700; color: var(--navy); }
.cal-skip .help { margin: 0; flex-basis: 100%; }
@media (max-width: 640px) {
.cal-flow { flex-direction: column; align-items: stretch; text-align: center; }
.cal-row { flex-direction: column; align-items: stretch; }
.cal-test { width: 100%; }
}
/* ---------------------------------------------------------------
* Svetainės viršelis
* --------------------------------------------------------------- */
.cov-ap {
margin: 18px 0 8px; font-size: 14px; font-weight: 800; color: var(--navy);
}
.cov-now {
position: relative; overflow: hidden;
border: 1px solid var(--line); border-radius: 14px;
background: var(--surface-2);
aspect-ratio: 16 / 7;
}
.cov-now img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cov-now.is-empty { display: flex; align-items: center; justify-content: center; }
.cov-none {
display: flex; align-items: center; gap: 10px;
font-size: 14px; color: var(--ink-3);
}
.cov-tag {
position: absolute; left: 10px; bottom: 10px;
padding: 4px 10px; border-radius: 999px;
background: rgba(0,0,0,.55); color: #fff;
font-size: 12px; font-weight: 700;
}
.cov-opts { border-top: 0; padding-top: 12px; }
.cov-pick {
display: flex; flex-wrap: wrap; gap: 8px;
margin: -2px 0 10px; padding: 0 0 4px 34px;
}
.cov-th { display: block; cursor: pointer; }
.cov-th input { position: absolute; opacity: 0; pointer-events: none; }
.cov-th img,
.cov-th span {
display: flex; align-items: center; justify-content: center; gap: 4px;
width: 78px; height: 56px; border-radius: 10px; object-fit: cover;
border: 2px solid var(--line); background: var(--surface-2);
}
.cov-th:has(input:checked) img,
.cov-th:has(input:checked) span { border-color: var(--brand); }
.cov-th-auto span { flex-direction: column; color: var(--ink-3); }
.cov-th-auto b { font-size: 11.5px; font-weight: 700; }
.cov-up { padding: 0 0 4px 34px; }
@media (max-width: 640px) {
.cov-pick, .cov-up { padding-left: 0; }
}
/* Žinučių programėlės kontaktuose */
.msg-row { display: grid; gap: 0 14px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
.msg-row { grid-template-columns: 1fr; }
}
/* =========================================================
Prisijungimo puslapis: paaiškinimas ir slaptažodžio rodymas
========================================================= */
/* Kortelės po prisijungimo forma */
.auth-box .card + .card { margin-top: 16px; }
.auth-try h2, .auth-why h2 {
margin: 0 0 8px; font-size: 17px; font-weight: 800; color: var(--navy);
}
.auth-try p, .auth-why p {
margin: 0 0 14px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2);
}
/* Paaiškinimas rodomas tada, kai dingsta paveikslėlis kairėje.
Riba ta pati kaip .auth-visual - kitaip liktų tarpas, kuriame
nesimatytų nei vieno, nei kito. */
.auth-why { display: none; }
@media (max-width: 980px) {
.auth-why { display: block; }
}
.auth-why-list { list-style: none; padding: 0; margin: 0; }
.auth-why-list li {
display: flex; gap: 10px; align-items: flex-start;
margin-bottom: 11px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
}
.auth-why-list li:last-child { margin-bottom: 0; }
.auth-why-list svg { flex: none; margin-top: 3px; color: #0F9E77; }
.auth-why-steps { margin: 0; padding-left: 20px; }
.auth-why-steps li {
margin-bottom: 10px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2);
}
.auth-why-steps li:last-child { margin-bottom: 0; }
.auth-why-steps b { color: var(--navy); }
/* Slaptažodis: mygtukas „Rodyti" laukelio viduje */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-right: 82px; }
.pw-see {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
padding: 8px 12px; border: 0; border-radius: 999px; cursor: pointer;
background: none; color: var(--ink-2);
font: inherit; font-size: 13.5px; font-weight: 700;
}
.pw-see:hover { background: var(--line-2); color: var(--navy); }
/* Siaurame ekrane prisijungimo kortelės turi trauktis, o ne stumti puslapio.
Be `min-width: 0` tinklelio ir flex elementai neleidžia sau susitraukti
žemiau turinio pločio, o ilgas mygtuko užrašas („Apsižvalgyti be
registracijos") mygtukams uždrausta laužyti - puslapis imdavo slinkti šonu. */
.auth-form, .auth-box { min-width: 0; }
.auth-box .input { min-width: 0; }
.auth-box .btn-block { white-space: normal; line-height: 1.35; padding-top: 10px; padding-bottom: 10px; }
@media (max-width: 400px) {
.auth-form { padding-left: 14px; padding-right: 14px; }
.auth-box .card { padding: 22px 18px; }
.pw-wrap .input { padding-right: 72px; }
.pw-see { right: 4px; padding: 8px 10px; font-size: 13px; }
}
/* „arba" tarp Prisijungti ir Susikurti paskyrą */
.auth-consent { margin: 12px 0 0; text-align: center; line-height: 1.5; }
.auth-consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.auth-consent a:hover { color: var(--navy); }
.auth-or {
display: flex; align-items: center; gap: 12px;
margin: 14px 0; color: var(--ink-3); font-size: 13px; font-weight: 700;
}
.auth-or::before, .auth-or::after {
content: ""; flex: 1; height: 1px; background: var(--line-2);
}
/* „Gaunate ir asmeninę svetainę" - paryškintas langelis su tikru pavyzdžiu */
.auth-site {
margin-top: 18px; padding: 14px 16px 16px;
border: 1px solid var(--accent); border-radius: 16px;
background: var(--accent-soft);
}
.auth-site-h {
display: flex; align-items: center; gap: 8px;
margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--navy);
}
.auth-site-h svg { flex: none; color: var(--accent-deep); }
.auth-site-bar {
display: flex; align-items: center; gap: 10px;
padding: 9px 10px 9px 12px; border-radius: 11px;
background: #fff; border: 1px solid var(--line);
transition: border-color .18s, box-shadow .18s;
}
.auth-site-bar:hover { border-color: var(--accent); box-shadow: 0 6px 16px rgba(19,26,63,.1); }
.auth-site-dots { display: flex; gap: 4px; flex: none; }
.auth-site-dots i { width: 7px; height: 7px; border-radius: 50%; background: #D7DCE8; }
.auth-site-bar b {
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-size: 13px; font-weight: 700; color: var(--ink-2);
font-family: ui-monospace, Menlo, Consolas, monospace;
}
.auth-site-bar em {
flex: none; font-style: normal; font-size: 12.5px; font-weight: 800;
color: var(--accent-deep); white-space: nowrap;
}
.auth-site-n {
margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2);
}
/* Ant tamsaus paveikslėlio kairėje */
.auth-site.is-dark {
margin-top: 24px; position: relative; z-index: 2;
border-color: rgba(245,165,36,.55);
background: rgba(245,165,36,.14);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.auth-site.is-dark .auth-site-h { color: #fff; }
.auth-site.is-dark .auth-site-h svg { color: var(--accent); }
.auth-site.is-dark .auth-site-bar {
background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22);
}
.auth-site.is-dark .auth-site-bar:hover { border-color: var(--accent); box-shadow: none; }
.auth-site.is-dark .auth-site-dots i { background: rgba(255,255,255,.4); }
.auth-site.is-dark .auth-site-bar b { color: rgba(255,255,255,.94); }
.auth-site.is-dark .auth-site-bar em { color: var(--accent); }
.auth-site.is-dark .auth-site-n { color: rgba(255,255,255,.8); max-width: 44ch; }
@media (max-width: 400px) {
.auth-site-bar em { display: none; }
}
/* Žemesniame lange kairysis stulpelis turi galėti slinkti */
.auth-visual { overflow-y: auto; }
/* Sąskaitos mygtukas rezervacijų sąraše telefone */
.res-inv {
padding: 0 4px 12px; margin-top: -6px;
border-bottom: 1px solid var(--line-2);
}
.res-inv:last-child { border-bottom: 0; }
.res-inv .btn { width: 100%; }
/* =========================================================
Žingsniai (e-Turistas ir panašūs darbai)
========================================================= */
.steps { display: grid; gap: 14px; }
.step {
display: flex; gap: 16px; align-items: flex-start;
padding: 22px 24px; border-radius: 20px;
background: var(--surface); border: 1px solid var(--line);
box-shadow: 0 8px 22px rgba(19,26,63,.05);
}
.step-n {
flex: none; display: grid; place-items: center;
width: 34px; height: 34px; border-radius: 50%;
background: var(--navy); color: #fff;
font-size: 15px; font-weight: 800;
}
.step.is-done .step-n { background: var(--free); }
.step-in { min-width: 0; flex: 1; }
.step-in h2 { margin: 4px 0 8px; font-size: 19px; font-weight: 800; color: var(--navy); }
.step-in p { margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.step-in .btn { max-width: 100%; white-space: normal; }
.step-fine { margin: 10px 0 0 !important; font-size: 13px !important; color: var(--ink-3) !important; }
@media (max-width: 640px) {
.step { padding: 18px; gap: 12px; border-radius: 16px; }
.step-in h2 { font-size: 17px; }
.step-in .btn { width: 100%; }
}
/* Sąrašas po žingsniais - suskleistas, kad netrukdytų */
.ntis-list > summary {
display: flex; align-items: center; gap: 10px; cursor: pointer;
font-size: 15.5px; color: var(--ink-2); list-style: none;
}
.ntis-list > summary::-webkit-details-marker { display: none; }
.ntis-list > summary b { color: var(--navy); }
.ntis-list > summary svg { color: var(--ink-3); flex: none; }
.ntis-list[open] > summary { margin-bottom: 4px; }
/* Nustatymų plytelės - viskas, kas nebetelpa į trumpą meniu */
.hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.hub-t {
display: block; padding: 18px 20px; border-radius: 18px;
background: var(--surface); border: 1px solid var(--line);
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.hub-t:hover {
transform: translateY(-2px); border-color: var(--navy);
box-shadow: 0 12px 26px rgba(19,26,63,.1);
}
.hub-ic {
display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px;
border-radius: 14px; background: var(--brand-soft); color: var(--navy);
}
.hub-t b { display: block; font-size: 16px; font-weight: 800; color: var(--navy); }
.hub-t i {
display: block; margin-top: 4px; font-style: normal;
font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--ink-lead);
}
@media (max-width: 640px) {
.hub { grid-template-columns: 1fr 1fr; gap: 10px; }
.hub-t { padding: 14px; border-radius: 14px; }
.hub-ic { width: 38px; height: 38px; margin-bottom: 9px; }
.hub-t b { font-size: 14.5px; }
.hub-t i { display: none; }
}
/* Kiekvieno puslapio paaiškinimas po antrašte - vienu sakiniu, kam jis */
/* Paaiškinimas po antrašte - atskira kortelė su ikona.
Pilkas sakinys po h1 tiesiog nebūdavo pastebimas: akis jį praleisdavo
kartu su antrašte. Dabar tai atskiras langelis, kurio nepražiopsosi. */
.page-lead {
/* Ne flex: viduje pasitaiko ir , o flex juos paverstų atskirais
blokais ir sakinys sulūžtų per vidurį */
position: relative;
margin: 14px 0 0; max-width: 78ch;
padding: 14px 18px 14px 52px;
border: 1px solid #F4DDB4; border-left: 4px solid var(--accent);
border-radius: 14px; background: var(--accent-soft);
font-size: 15.5px; font-weight: 600; line-height: 1.55; color: var(--ink);
}
.page-lead::before {
content: ""; position: absolute; left: 17px; top: 15px;
width: 24px; height: 24px;
background: url("data:image/svg+xml;utf8,\
") center/contain no-repeat;
}
@media (max-width: 640px) {
.page-lead { font-size: 15px; padding: 12px 14px 12px 44px; }
.page-lead::before { left: 14px; top: 13px; width: 21px; height: 21px; }
}
@media (max-width: 720px) {
.page-lead { font-size: 14.5px; }
}
/* ---------------------------------------------------------------
Prenumerata: kiek liko galioti ir mokėjimo būdo pasirinkimas
--------------------------------------------------------------- */
.plan-left {
display: grid; gap: 2px; margin-top: 14px;
padding: 11px 13px; border-radius: 12px;
border: 1px solid var(--line); background: var(--canvas);
}
.plan-left b { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.plan-left span { font-size: 13px; color: var(--ink-2); }
.plan-left.is-warn { border-color: #F8E2BC; background: var(--accent-soft); }
.plan-left.is-warn b { color: var(--accent-deep); }
.plan-left.is-bad { border-color: #F6CFCA; background: var(--stop-soft); }
.plan-left.is-bad b { color: #A32116; }
.pay-h { margin: 22px 0 10px; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.pay-pick { display: grid; gap: 10px; }
.pay-o { display: block; cursor: pointer; }
.pay-o input { position: absolute; opacity: 0; pointer-events: none; }
.pay-o-in {
display: flex; align-items: center; gap: 13px;
padding: 14px 16px; border-radius: 14px;
border: 1.5px solid var(--line); background: #fff;
transition: border-color .15s, box-shadow .15s, background .15s;
}
.pay-o:hover .pay-o-in { border-color: var(--ink-3); }
.pay-o input:focus-visible + .pay-o-in { outline: 2px solid var(--ink); outline-offset: 2px; }
.pay-o input:checked + .pay-o-in {
border-color: var(--ink); box-shadow: 0 10px 26px rgba(19,26,63,.10);
}
.pay-o-in .grow { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
.pay-o-in b { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }
.pay-o-in i { font-style: normal; font-size: 13px; color: var(--ink-2); }
.pay-ic {
flex: 0 0 auto; display: grid; place-items: center;
width: 42px; height: 42px; border-radius: 11px;
background: var(--canvas); color: var(--ink-2);
}
.pay-o input:checked + .pay-o-in .pay-ic { background: var(--ink); color: #fff; }
.pay-dot {
flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
border: 2px solid var(--line-2, var(--line)); position: relative;
}
.pay-o input:checked + .pay-o-in .pay-dot { border-color: var(--ink); }
.pay-o input:checked + .pay-o-in .pay-dot::after {
content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink);
}
@media (max-width: 520px) {
.pay-o-in { padding: 12px 13px; gap: 11px; }
.pay-ic { width: 38px; height: 38px; }
.pay-o-in b { font-size: 15px; }
}
/* ---------------------------------------------------------------
Prenumeratos puslapis: kairėje planas, dešinėje suvestinė
--------------------------------------------------------------- */
.bill { display: grid; gap: 18px; align-items: start; }
.bill-main { display: grid; gap: 18px; min-width: 0; }
/* Apsauga: net jei kortelės viduje kas nors platesnio, ji neišsipučia už
savo stulpelio ir neužlenda ant suvestinės */
.bill-main > * { max-width: 100%; min-width: 0; }
@media (min-width: 1000px) {
.bill { grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; }
.bill-side { position: sticky; top: calc(var(--top-h) + 22px); }
}
.pl-head {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap; margin-bottom: 14px;
}
.pl-head h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
/* Mėnesinis / Metinis */
.seg {
display: inline-flex; padding: 3px; gap: 3px;
border-radius: 999px; background: var(--canvas); border: 1px solid var(--line);
}
.seg-o { position: relative; }
.seg-o input { position: absolute; opacity: 0; pointer-events: none; }
.seg-o span {
display: block; padding: 7px 15px; border-radius: 999px; cursor: pointer;
font-size: 13.5px; font-weight: 700; color: var(--ink-2);
transition: background .15s, color .15s, box-shadow .15s;
}
.seg-o:hover span { color: var(--ink); }
.seg-o input:checked + span {
background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(19,26,63,.10);
}
.seg-o input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.pl-eyebrow {
display: block; width: 100%; margin-bottom: 2px;
font-size: 12px; font-weight: 800; letter-spacing: .08em;
text-transform: uppercase; color: var(--ink-3);
}
.pl-note { margin: 14px 0 0; font-size: 15px; color: var(--ink-2); max-width: 52ch; }
.pl-price { margin: 14px 0 0; display: flex; align-items: baseline; gap: 8px; }
.pl-price em {
font-style: normal; font-family: var(--font-head);
font-size: 40px; font-weight: 800; letter-spacing: -.035em; color: var(--ink);
}
.pl-price i { font-style: normal; font-size: 16px; color: var(--ink-3); }
.pl-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.pl-perks li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink-2); }
.pl-perks svg { flex: none; margin-top: 2px; color: #0F9E77; }
/* Suvestinė */
.sum-card h2 { margin: 0 0 16px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.sum-row {
display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
padding: 12px 0; border-top: 1px solid var(--line);
}
.sum-row:first-of-type { border-top: 0; padding-top: 0; }
.sum-row > span { display: grid; gap: 3px; min-width: 0; }
.sum-row b { font-size: 15px; font-weight: 700; }
.sum-row i { font-style: normal; font-size: 13px; color: var(--ink-3); line-height: 1.45; }
.sum-row > b { white-space: nowrap; }
.sum-total {
display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
margin-top: 4px;
}
.sum-total span { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.sum-total b {
font-family: var(--font-head); font-size: 26px; font-weight: 800; letter-spacing: -.03em;
}
.sum-save {
justify-self: start; margin-top: 5px; padding: 4px 10px; border-radius: 999px;
border: 1px solid #BFE5D6; background: var(--free-soft);
font-size: 12.5px; font-weight: 700; color: #0B7A5C;
}
.sum-swap {
justify-self: start; margin-top: 5px; padding: 4px 10px; border-radius: 999px;
border: 1px solid var(--line-2); background: var(--canvas);
font-size: 12.5px; font-weight: 700; color: var(--ink-2);
}
.sum-fine { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-3); }
@media (max-width: 560px) {
.pl-head h2 { font-size: 19px; }
.pl-price em { font-size: 34px; }
.seg-o span { padding: 7px 13px; font-size: 13px; }
}
/* Siauresniame stulpelyje lentelė neturi lūžinėti per vidurį žodžio */
.table-nowrap th, .table-nowrap td { white-space: nowrap; }
/* ---------------------------------------------------------------
Viršutinė juosta: ženklas, dažniausias veiksmas, naudotojas
--------------------------------------------------------------- */
.topnav {
position: fixed; top: 0; left: 0; right: 0; z-index: 45;
height: var(--top-h); display: flex; align-items: center;
background: var(--surface); border-bottom: 1px solid var(--line);
}
.topnav-brand {
flex: 0 0 var(--nav-w); display: flex; align-items: center;
height: 100%; padding: 0 26px; border-right: 1px solid var(--line);
}
.topnav-brand .brand-logo { height: 32px; width: auto; }
.topnav-in {
flex: 1 1 auto; display: flex; align-items: center; gap: 12px;
padding: 0 24px 0 20px; min-width: 0;
}
.topnav-gap { flex: 1 1 auto; }
.topnav-new { height: 42px; padding: 0 18px; }
.topnav-user {
display: flex; align-items: center; gap: 11px; min-width: 0;
padding: 6px 12px 6px 6px; border-radius: 999px;
color: inherit; text-decoration: none; transition: background .15s;
}
.topnav-user:hover { background: var(--surface-2); }
.topnav-user .avatar { width: 34px; height: 34px; font-size: 14px; }
.topnav-who { display: grid; gap: 1px; min-width: 0; }
.topnav-who b {
font-size: 14.5px; font-weight: 700; line-height: 1.2;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topnav-who i {
font-style: normal; font-size: 12.5px; color: var(--ink-3); line-height: 1.2;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 1180px) {
.topnav-who { display: none; }
.topnav-user { padding: 4px; }
}
/* Telefone viršutinės juostos nereikia - ten savas antgalvis ir apatinė juosta */
@media (max-width: 900px) { .topnav { display: none !important; } }
/* Prenumerata viršutinėje juostoje - šalia naudotojo ir atsijungimo */
.topnav-plan {
display: inline-flex; align-items: center; gap: 9px; flex: none;
height: 46px; padding: 0 12px 0 14px; border-radius: 999px;
border: 1px solid var(--line); background: var(--canvas);
color: var(--ink-2); font-size: 13.5px; font-weight: 700;
text-decoration: none; white-space: nowrap;
transition: border-color .15s, color .15s;
}
/* Būsena ir po ja - kur pateksi paspaudęs */
.topnav-plan-t { display: grid; gap: 1px; min-width: 0; }
.topnav-plan-t b { font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.topnav-plan-t i {
font-style: normal; font-size: 12px; font-weight: 500; line-height: 1.2;
color: var(--ink-3);
}
.topnav-plan svg { flex: none; color: var(--ink-3); }
.topnav-plan:hover svg { color: inherit; }
.topnav-plan:hover { border-color: var(--ink-3); color: var(--ink); }
.topnav-plan-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--free); }
.topnav-plan.is-warn {
border-color: #F8E2BC; background: var(--accent-soft); color: var(--accent-deep);
}
.topnav-plan.is-warn .topnav-plan-dot { background: var(--accent); }
.topnav-plan.is-bad {
border-color: #F6CFCA; background: var(--stop-soft); color: #A32116;
}
.topnav-plan.is-bad .topnav-plan-dot { background: var(--stop); }
@media (max-width: 1320px) {
.topnav-plan span:last-child { display: none; }
.topnav-plan { width: 36px; padding: 0; justify-content: center; }
}
/* Dabartinė prenumeratos būsena - atskira juosta virš planų */
.now {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 18px; margin-bottom: 18px;
border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface);
}
.now .grow { display: grid; gap: 2px; min-width: 0; }
.now b { font-size: 15.5px; font-weight: 800; letter-spacing: -.01em; }
.now i { font-style: normal; font-size: 14px; color: var(--ink-2); }
.now-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; margin-top: 7px; background: var(--free); }
.now.now-ok { border-color: #BFE5D6; background: var(--free-soft); }
.now.now-warn { border-color: #F8E2BC; background: var(--accent-soft); }
.now.now-warn .now-dot { background: var(--accent); }
.now.now-bad { border-color: #F6CFCA; background: var(--stop-soft); }
.now.now-bad .now-dot { background: var(--stop); }
.now.now-bad b { color: #A32116; }
/* Ikoninis mygtukas viršutinėje juostoje (sistemos dalys) */
.topnav-ic {
display: grid; place-items: center; flex: none;
width: 42px; height: 42px; border-radius: 12px;
border: 1px solid var(--line); background: #fff; color: var(--ink-2);
transition: border-color .15s, color .15s, background .15s;
}
.topnav-ic:hover { border-color: var(--ink-3); color: var(--ink); }
.topnav-ic.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.topnav-ic svg { width: 20px; height: 20px; }
/* Atsijungimas - šoninio meniu apačioje, su užrašu */
.nav-out {
display: flex; align-items: center; justify-content: center; gap: 8px;
height: 42px; border-radius: var(--r-md);
border: 1px solid var(--line); background: #fff;
font-size: 14.5px; font-weight: 700; color: var(--ink-2);
transition: border-color .15s, color .15s;
}
.nav-out:hover { border-color: var(--ink-3); color: var(--ink); }
.nav-out svg { flex: none; }
/* Paaiškinimas iškart po kortelės antrašte - tai skilties įvadas, o ne
smulkus prierašas, tad skaitomas taip pat kaip .page-lead */
.card > .card-head + p.small.muted,
.card > .card-head + p.muted,
.card > .card-head + .small.muted {
font-size: 14.5px; font-weight: 500; line-height: 1.55; color: var(--ink-lead);
}
/* ---------------------------------------------------------------
Iš kur atėjo rezervacija - spalvota juostelė kalendoriaus juostoje.
Būsena lieka pagrindine spalva (patvirtinta / laukiama / apsigyveno),
o šaltinis prisideda kairiajame krašte, tad matosi abu dalykai iškart.
--------------------------------------------------------------- */
.tl-bar[class*="src-"] { padding-left: 16px; }
.tl-bar[class*="src-"]::before {
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
background: var(--src-c, transparent);
}
.tl-bar.src-booking { --src-c: #1E4FA8; }
.tl-bar.src-airbnb { --src-c: #FF5A5F; }
.tl-bar.src-direct { --src-c: #0F9E77; }
.legend-src { margin-top: 6px; }
.legend-src b { font-weight: 800; color: var(--ink); }
.lg-src { width: 14px; height: 14px; border-radius: 4px; background: var(--src-c, #ccc); }
.lg-src.src-booking { --src-c: #1E4FA8; }
.lg-src.src-airbnb { --src-c: #FF5A5F; }
.lg-src.src-direct { --src-c: #0F9E77; }
/* Telefone - taškelis langelio kampe, iš kur rezervacija atėjo */
.mcell[class*="src-"] { position: relative; }
.mcell[class*="src-"]::after {
content: ""; position: absolute; right: 3px; top: 3px;
width: 7px; height: 7px; border-radius: 50%;
background: var(--src-c, transparent); box-shadow: 0 0 0 1.5px rgba(255,255,255,.75);
}
.mcell.src-booking { --src-c: #1E4FA8; }
.mcell.src-airbnb { --src-c: #FF5A5F; }
.mcell.src-direct { --src-c: #0F9E77; }
/* Paaiškinimas rodomas virš antraštės - jį perskaitai pirmiau, o ne po to,
kai jau pradėjai ieškoti mygtukų. Vietos keisti šablonuose nereikia. */
.topbar-title { display: flex; flex-direction: column; }
.topbar-title .page-lead { order: -1; margin: 0 0 14px; }
/* Rezervacijų sąrašo antraštė po kalendoriumi */
.res-head { margin: 26px 0 14px; }
.res-head h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.res-head p { margin: 4px 0 0; }
/* Rezervacijų sąrašas po kalendoriumi: datos ir sumos nelūžta,
o objekto pavadinimas gali persikelti į kitą eilutę */
.res-table th, .res-table td.num { white-space: nowrap; }
.res-src {
display: inline-block; width: 8px; height: 8px; border-radius: 50%;
margin-right: 6px; vertical-align: 1px; background: var(--src-c, #ccc);
}
.res-src.src-booking { --src-c: #1E4FA8; }
.res-src.src-airbnb { --src-c: #FF5A5F; }
.res-src.src-direct { --src-c: #0F9E77; }
/* Paaiškinimas puslapio viršuje, dar prieš pirmą kortelę */
.page-lead.is-top { margin: 0 0 16px; }
/* Puslapio nustatymai viršuje - ikona su užrašu, kad būtų aišku, kur veda */
.topnav-ic.has-text {
width: auto; padding: 0 14px; gap: 9px;
grid-auto-flow: column; align-items: center;
font-size: 14.5px; font-weight: 700;
}
.topnav-ic.has-text span { white-space: nowrap; }
@media (max-width: 1280px) {
.topnav-ic.has-text span { display: none; }
.topnav-ic.has-text { width: 42px; padding: 0; }
}
/* ---------------------------------------------------------------
Puslapio nustatymai: kurio apartamento puslapį keičiam
--------------------------------------------------------------- */
.site-pick {
display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px;
}
.site-tab {
display: inline-flex; align-items: center; gap: 9px;
height: 44px; padding: 0 16px; border-radius: 999px;
border: 1px solid var(--line); background: #fff;
font-size: 14.5px; font-weight: 700; color: var(--ink-2);
text-decoration: none; transition: border-color .15s, color .15s, background .15s;
}
.site-tab:hover { border-color: var(--ink-3); color: var(--ink); }
.site-tab svg { flex: none; }
.site-tab.is-now { background: var(--navy); border-color: var(--navy); color: #fff; }
/* ---------------------------------------------------------------
Raudonas skaičiukas meniu - kur šiandien kažko laukia
--------------------------------------------------------------- */
.nav-bell {
margin-left: auto; flex: none;
min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
display: inline-grid; place-items: center;
background: var(--stop); color: #fff;
font-size: 12px; font-weight: 800; line-height: 1;
}
.nav-link.is-active .nav-bell { background: #fff; color: var(--stop); }
.nav-sublink .nav-bell { margin-left: 8px; }
/* ---------------------------------------------------------------
Prilipęs „Nauja rezervacija" apatiniame dešiniajame kampe
--------------------------------------------------------------- */
.fab {
position: fixed; right: 26px; bottom: 26px; z-index: 46;
display: inline-flex; align-items: center; gap: 10px;
height: 54px; padding: 0 22px; border-radius: 999px;
background: var(--navy); color: #fff;
font-size: 15.5px; font-weight: 800; letter-spacing: -.01em;
text-decoration: none; box-shadow: 0 12px 30px rgba(19,26,63,.28);
transition: transform .15s, box-shadow .15s;
}
.fab:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(19,26,63,.34); }
.fab svg { flex: none; }
@media (max-width: 900px) {
/* Telefone apačioje jau yra juosta su „Nauja", tad mygtuko nekartojam */
.fab { display: none; }
}
/* Puslapio adresas apartamento kortelėje - paryškintas, nes jį dažniausiai
ir ieško: šitą nuorodą šeimininkas siunčia svečiams */
.ap-url {
display: flex; align-items: center; gap: 7px;
margin: 0 0 14px; padding: 7px 11px; border-radius: 10px;
border: 1px solid var(--line); background: var(--canvas);
font-size: 13.5px; font-weight: 700; color: var(--ink);
}
.ap-url svg { flex: none; color: var(--ink-3); }
.ap-url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Svečių eilutės rezervacijos formoje */
.g-row {
display: flex; align-items: flex-start; gap: 12px;
padding: 14px 0; border-top: 1px solid var(--line-2);
}
.g-row:first-child { padding-top: 0; border-top: 0; }
.g-in { flex: 1 1 auto; min-width: 0; }
.g-num {
flex: none; width: 26px; height: 26px; margin-top: 10px; border-radius: 50%;
display: grid; place-items: center; background: var(--canvas);
font-size: 12.5px; font-weight: 800; color: var(--ink-2);
}
/* e-Turisto peržiūroje trūkstamas laukas turi kristi į akis */
.table td.is-miss { color: var(--accent-deep); font-weight: 700; }
/* e-Turistas: kuriose rezervacijose trūksta svečių duomenų */
.miss-card { border-color: #F6CFCA; background: var(--stop-soft); }
.miss-card .list-item { background: #fff; border-radius: 12px; margin-bottom: 8px; padding: 10px 12px; }
.miss-card .list-item:last-child { margin-bottom: 0; }
/* ---------------------------------------------------------------
Pasibaigusi prenumerata: „tik peržiūra"
Raudona juosta viršuje ir nuslopinti kuriantys mygtukai - kad
žmogus iš karto matytų, kodėl kai kas nebeveikia.
--------------------------------------------------------------- */
.plan-bar{
display:flex;align-items:center;gap:12px;flex-wrap:wrap;
margin:0 0 18px;padding:14px 18px;border-radius:16px;
background:linear-gradient(135deg,#FDECEA,#FBDBD7);border:1px solid #F1B7B0;
color:#8A2018;font-size:14.5px
}
.plan-bar svg{flex:none;color:#C0392B}
.plan-bar span{flex:1;min-width:220px}
.plan-bar b{color:#6E1810}
.plan-bar a{
padding:9px 16px;border-radius:999px;background:var(--navy,#131A3F);color:#fff;
font-weight:700;font-size:13.5px;text-decoration:none;white-space:nowrap
}
.plan-bar a:hover{opacity:.9}
/* Rašantys mygtukai lieka matomi, bet nespaudžiami - taip aišku,
kas čia būna, kai prenumerata atnaujinta */
body.is-frozen .btn-brand:not([data-plan-ok]),
body.is-frozen .fab{
opacity:.45;pointer-events:none;filter:grayscale(.5)
}
/* Mokėjimo būdas, kuris dar neveikia: matomas, bet pilkesnis - kad
žmogus suprastų, jog ne varnelės trūksta, o įjungimo */
.am-item.is-todo{border-style:dashed;background:var(--surface-2)}
.am-item.is-todo .am-lbl{color:var(--ink-2)}
.am-item.is-todo .badge{margin-left:6px;vertical-align:middle}
/* Raudonas skaičiukas kortelės antraštėje - toks pat kaip šoniniame
meniu, kad matytųsi, iš ko susideda bendras skaičius */
.head-bell{
flex:none;min-width:22px;height:22px;padding:0 7px;border-radius:999px;
display:inline-grid;place-items:center;
background:var(--stop);color:#fff;font-size:12px;font-weight:800;line-height:1
}
/* ---------------------------------------------------------------
„Štai kur reikalas": eilutė, dėl kurios dega raudonas ženklas meniu.
Paspaudęs ženklą žmogus iškart mato, ko būtent ieškoti.
--------------------------------------------------------------- */
.att-note{
display:flex;align-items:center;gap:10px;flex-wrap:wrap;
margin:0 0 16px;padding:12px 16px;border-radius:14px;
background:var(--stop-soft);border:1px solid #F6CFCA;color:#8A2018;font-size:14.5px
}
.att-note svg{flex:none;color:var(--stop)}
.att-note b{color:#6E1810}
tr.is-att td{background:var(--stop-soft)}
tr.is-att td:first-child{box-shadow:inset 3px 0 0 var(--stop)}
.list-item.is-att{background:var(--stop-soft);box-shadow:inset 3px 0 0 var(--stop)}
.card-head h2 .head-bell,h1 .head-bell{margin-left:10px;vertical-align:middle}
/* ---------------------------------------------------------------
Neatlikti darbai Apžvalgoje.
Blyškios kortelės susiliedavo su fonu, tad dabar: balta kortelė,
spalvota juostelė kairėje, spalvota ikona ir skaičius dešinėje.
--------------------------------------------------------------- */
.todos{display:grid;gap:10px}
.todo{
--tone:var(--accent,#F26A1B); --tone-soft:var(--accent-soft,#FFF3E4);
display:flex;align-items:center;gap:14px;
padding:14px 18px 14px 16px;border-radius:16px;
background:var(--surface,#fff);border:1px solid var(--line,#E6E9F2);
border-left:5px solid var(--tone);
box-shadow:0 2px 10px rgba(19,26,63,.06);
text-decoration:none;color:inherit;transition:transform .12s,box-shadow .12s
}
.todo:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(19,26,63,.10)}
.todo-ic{
flex:none;width:40px;height:40px;border-radius:12px;
display:grid;place-items:center;background:var(--tone-soft);color:var(--tone)
}
.todo-txt{flex:1;min-width:0;display:grid;gap:2px}
.todo-txt b{font-size:15.5px;font-weight:750;color:var(--navy,#131A3F);line-height:1.25}
.todo-txt i{font-style:normal;font-size:13px;color:var(--ink-2,#5A6480)}
.todo-n{
flex:none;min-width:26px;height:26px;padding:0 8px;border-radius:999px;
display:grid;place-items:center;background:var(--tone);color:#fff;
font-size:13px;font-weight:800;line-height:1
}
.todo-go{flex:none;color:var(--ink-3,#8B93AB)}
.todo.is-warn{--tone:#D9822B;--tone-soft:#FFF3E4}
.todo.is-stop{--tone:#D93B2B;--tone-soft:#FDECEA}
.todo.is-info{--tone:#4A57C4;--tone-soft:#EEF0FD}
@media (max-width:560px){
.todo{padding:12px 14px 12px 12px;gap:10px}
.todo-txt i{display:none}
.todo-go{display:none}
}
/* ---------------------------------------------------------------
Apartamento anketa žingsniais.
Kortelių buvo dvylika ir jos gulėjo viena po kitos - žmogus
pasimesdavo. Dabar viršuje numeruoti žingsniai kaip registracijoje.
--------------------------------------------------------------- */
.ap-steps{
display:flex;gap:8px;overflow-x:auto;padding:6px 2px 10px;margin:0 0 4px;
scrollbar-width:thin;-webkit-overflow-scrolling:touch
}
.ap-stepb{
flex:none;display:inline-flex;align-items:center;gap:10px;
padding:9px 16px 9px 10px;border-radius:999px;cursor:pointer;
background:var(--surface,#fff);border:1.5px solid var(--line,#E6E9F2);
color:var(--ink-2,#5A6480);font:inherit;font-size:14px;font-weight:650;
white-space:nowrap;transition:border-color .12s,color .12s,background .12s
}
.ap-stepb:hover{border-color:var(--ink-3,#8B93AB);color:var(--navy,#131A3F)}
.ap-stepn{
flex:none;width:24px;height:24px;border-radius:999px;display:grid;place-items:center;
background:var(--surface-2,#F2F4FA);color:var(--ink-2,#5A6480);
font-size:12.5px;font-weight:800;line-height:1
}
.ap-stepb.is-now{
background:var(--navy,#131A3F);border-color:var(--navy,#131A3F);color:#fff
}
.ap-stepb.is-now .ap-stepn{background:rgba(255,255,255,.22);color:#fff}
.ap-sec{display:grid;gap:16px}
/* Išsaugoti + žingsnių vartymas vienoje juostoje, prilipusioje apačioje */
.save-card.ap-save{
position:sticky;top:auto;bottom:16px;
display:flex;align-items:center;gap:10px
}
.save-card.ap-save .btn-brand{flex:1}
.save-card.ap-save .btn-ghost{flex:none}
@media (max-width:900px){
.save-card.ap-save{bottom:calc(78px + env(safe-area-inset-bottom))}
.save-card.ap-save .ap-prev span,.save-card.ap-save .ap-next span{display:none}
}
.ap-form{max-width:900px}
/* ---------------------------------------------------------------
Varpelis viršutinėje juostoje: visi neatlikti darbai vienoje vietoje.
Skaičius rodo kiek, o taškelis - kad nuo paskutinio karto kažkas
pasikeitė. Kitaip žmogus varpelį greitai nustotų matyti.
--------------------------------------------------------------- */
.bell-wrap{position:relative;flex:none}
.bell-b{position:relative;cursor:pointer;font:inherit}
.bell-n{
position:absolute;top:-4px;right:-4px;
min-width:19px;height:19px;padding:0 5px;border-radius:999px;
display:grid;place-items:center;
background:var(--stop);color:#fff;font-size:11.5px;font-weight:800;line-height:1;
border:2px solid var(--surface,#fff)
}
/* Naujiena - taškelis prie skaičiaus */
.bell-b.has-new::after{
content:'';position:absolute;top:-6px;right:-7px;width:9px;height:9px;
border-radius:50%;background:#12B981;border:2px solid var(--surface,#fff)
}
.bell-pop{
position:absolute;top:calc(100% + 10px);right:0;z-index:60;
width:min(360px,calc(100vw - 32px));
background:var(--surface,#fff);border:1px solid var(--line,#E6E9F2);
border-radius:16px;box-shadow:0 18px 44px rgba(19,26,63,.18);
overflow:hidden
}
.bell-head{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:14px 16px;border-bottom:1px solid var(--line,#E6E9F2)
}
.bell-head b{font-size:15px;color:var(--navy,#131A3F)}
.bell-cnt{
min-width:22px;height:22px;padding:0 7px;border-radius:999px;
display:grid;place-items:center;background:var(--surface-2,#F2F4FA);
color:var(--ink-2,#5A6480);font-size:12.5px;font-weight:800;line-height:1
}
.bell-list{max-height:min(60vh,420px);overflow-y:auto}
.bell-i{
display:flex;align-items:center;gap:12px;padding:13px 16px;
text-decoration:none;color:inherit;border-bottom:1px solid var(--line-2,#EEF0F6);
border-left:4px solid transparent
}
.bell-i:last-child{border-bottom:0}
.bell-i:hover{background:var(--surface-2,#F2F4FA)}
.bell-ic{flex:none;display:grid;place-items:center;width:32px;height:32px;
border-radius:10px;background:var(--surface-2,#F2F4FA);color:var(--ink-2,#5A6480)}
.bell-t{flex:1;min-width:0;font-size:14px;font-weight:650;color:var(--navy,#131A3F);line-height:1.3}
.bell-i > svg:last-child{flex:none;color:var(--ink-3,#8B93AB)}
.bell-i.is-stop{border-left-color:var(--stop,#D93B2B)}
.bell-i.is-stop .bell-ic{background:var(--stop-soft,#FDECEA);color:var(--stop,#D93B2B)}
.bell-i.is-warn{border-left-color:#D9822B}
.bell-i.is-warn .bell-ic{background:var(--accent-soft,#FFF3E4);color:#D9822B}
.bell-none{
display:flex;align-items:center;gap:10px;margin:0;padding:22px 16px;
color:var(--ink-2,#5A6480);font-size:14px
}
.bell-none svg{flex:none;color:#0B7A5B}
/* Telefone varpelis gyvena antraštėje šalia avataro, o sąrašas
prisisega prie ekrano kraštų - kitaip išlįstų už jo */
@media (max-width:900px){
.mobile-head .bell-b{
width:40px;height:40px;border-radius:12px;
display:grid;place-items:center;
background:var(--surface,#fff);border:1px solid var(--line,#E6E9F2);color:var(--ink-2,#5A6480)
}
.bell-pop{
position:fixed;top:70px;left:12px;right:12px;width:auto
}
.bell-list{max-height:calc(100vh - 200px)}
}
/* ---------------------------------------------------------------
Laiško peržiūra: kaip jį pamatys gavėjas, su tikroviškomis reikšmėmis.
--------------------------------------------------------------- */
.mail-pv{margin:0 0 16px}
.mail-pv summary{
display:flex;align-items:center;gap:8px;cursor:pointer;
font-size:13.5px;font-weight:700;color:var(--ink-2,#5A6480);
padding:8px 0;list-style:none
}
.mail-pv summary::-webkit-details-marker{display:none}
.mail-pv summary svg{color:var(--accent,#F26A1B)}
.mail-pv summary:hover{color:var(--navy,#131A3F)}
.mail-pv-box{
border:1px solid var(--line,#E6E9F2);border-radius:14px;overflow:hidden;
background:var(--surface-2,#F2F4FA)
}
.mail-pv-head{
display:grid;gap:3px;padding:12px 16px;background:var(--surface,#fff);
border-bottom:1px solid var(--line,#E6E9F2);font-size:13px;color:var(--ink-2,#5A6480)
}
.mail-pv-head b{color:var(--navy,#131A3F);font-weight:700}
.mail-pv-body{
padding:16px;font-size:14px;line-height:1.6;color:var(--ink,#1F2740);
white-space:normal;word-break:break-word
}
/* ---------------------------------------------------------------
Teisiniai puslapiai: nuorodos šoninio meniu apačioje ir prisijungimo
lange. Patys puslapiai gyvena stayon.lt - čia tik kelias į juos.
--------------------------------------------------------------- */
/* Telpa - eina viena eilute, netelpa - paskutinė nusileidžia žemiau.
Raidžių dėl to nemažinam: perskaitomumas svarbiau už lygią eilutę */
.nav-legal {
display: flex; flex-wrap: wrap; gap: 6px 12px;
margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line);
}
.nav-legal a {
font-size: 12px; white-space: nowrap; color: var(--ink-3); text-decoration: none;
}
.nav-legal a:hover { color: var(--ink); }
/* e-Turisto kodas apartamento kortelėje - tokia pat eilutė kaip „Jūsų puslapis" */
.ap-ntis {
display: flex; align-items: center; gap: 10px;
padding: 12px 18px; border-top: 1px solid var(--line);
}
.ap-ntis svg { flex: none; color: var(--ink-3); }
.ap-ntis label { font-size: 14px; color: var(--ink-2); cursor: pointer; }
.ap-ntis .input-sm {
width: 180px; height: 36px; padding: 0 12px; font-size: 14px;
}
@media (max-width: 720px) {
.ap-ntis { flex-wrap: wrap; }
.ap-ntis .input-sm { width: 100%; }
}
/* Prenumerata telefono antgalvyje - siauras ženkliukas, kad tilptų šalia
varpelio ir nuotraukos. Ilgesnį užrašą nukerpam daugtaškiu */
.mob-plan {
display: inline-flex; align-items: center; gap: 7px; max-width: 132px;
height: 32px; padding: 0 11px; border-radius: 999px;
border: 1px solid var(--line); background: var(--canvas);
color: var(--ink-2); font-size: 12px; font-weight: 700;
text-decoration: none; white-space: nowrap;
}
.mob-plan span:last-child { overflow: hidden; text-overflow: ellipsis; }
/* Antgalvis telefone - viskas viena eilute: ženklas traukiasi, eilutė nelaužoma */
.mobile-head .row { flex-wrap: nowrap; }
.mobile-head .brand { min-width: 0; overflow: hidden; }
.mobile-head .brand-logo { height: 32px; }
.mob-plan.is-warn {
border-color: #F8E2BC; background: var(--accent-soft); color: var(--accent-deep);
}
.mob-plan.is-warn .topnav-plan-dot { background: var(--accent); }
.mob-plan.is-bad {
border-color: #F6CFCA; background: var(--stop-soft); color: #A32116;
}
.mob-plan.is-bad .topnav-plan-dot { background: var(--stop); }
/* Turinio apačioje - tik telefone, nes ten šoninio meniu nėra */
.app-foot { display: none; }
@media (max-width: 900px) {
.app-foot {
display: grid; gap: 12px; margin: 28px 0 0;
padding: 20px 0 calc(var(--tabbar-h, 72px) + 20px);
border-top: 1px solid var(--line); text-align: center;
}
.app-foot p { margin: 0; }
/* Trys nuorodos - viena eilute; siauriausiame telefone raidės kiek mažesnės */
.app-foot-legal {
display: flex; flex-wrap: nowrap; justify-content: center; gap: 10px;
}
.app-foot-legal a {
font-size: 11.5px; white-space: nowrap; color: var(--ink-3); text-decoration: none;
}
.app-foot-contact {
display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px;
}
.app-foot-contact a {
display: inline-flex; align-items: center; gap: 7px;
font-size: 14px; font-weight: 700; color: var(--ink); text-decoration: none;
}
.app-foot-contact a svg { flex: none; color: var(--ink-3); }
}
/* Kontaktai po jomis - ryškesni, su ženkliukais */
.nav-contact {
display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px;
margin: 14px 0 0;
}
.nav-contact a {
display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
font-size: 12.5px; font-weight: 700; color: var(--ink); text-decoration: none;
}
.nav-contact a svg { flex: none; color: var(--ink-3); }
/* Šalies kodas ir „@" - stayon oranžine, kaip ir ženkle bei stayon.lt poraštėje.
`--brand` čia yra tamsiai mėlyna, tad oranžinę rašom tiesiogiai.
Tekstas laikomas viename `span`, kitaip „@" taptų atskiru flex nariu ir
aplink jį atsirastų tarpai */
.nav-contact a em,
.app-foot-contact a em { font-style: normal; color: #F26A1B; }
.nav-contact a:hover { color: var(--brand, var(--ink)); }
.nav-contact a:hover svg { color: inherit; }
.pub-legal {
display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
margin: 10px 0 0;
}
.pub-legal a { font-size: 12.5px; color: var(--ink-3); text-decoration: none; }
.pub-legal a:hover { color: var(--ink); }