* { box-sizing: border-box; }
/* No double-tap zoom on controls (pinch-zoom still works); also kills the 300ms tap delay. */
button, a, summary, label, [role="button"], [role="tab"], input, select, textarea {
  touch-action: manipulation;
}
html, body { margin: 0; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #c9c7d6; border-radius: 9px; }
@keyframes nm-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes nm-pop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes nm-floorin { from { opacity: 0; transform: translate(-6px, -50%); } to { opacity: 1; transform: translate(10px, -50%); } }
/* quartal building-marker entrance (opacity only — keeps the wrapper's translate intact) */
@keyframes nm-pinin { from { opacity: 0; } to { opacity: 1; } }
/* floor control (AUKŠTAS + arrows) anchored to the bottom-right of the plan on all sizes */
[data-nm-floorctl] { position: absolute; right: 24px; bottom: 24px; z-index: 10; }
/* apartment specs panel: keep scrollable but hide the scrollbar */
[data-nm-aptspecs] { scrollbar-width: none; -ms-overflow-style: none; }
[data-nm-aptspecs]::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }

/* ====================== HEADER RESPONSIVE (robust, data-attr based) ====================== */
/* hide address + phone once space is tight */
@media (max-width: 1024px) { [data-nm-meta] { display: none !important; } }
[data-nm-contactcta] { display: none !important; }
/* mobile header: logo · favourite · button · hamburger */
@media (max-width: 900px) {
  [data-nm-header] { padding: 0 16px !important; }
  [data-nm-formo] { display: none !important; }
  [data-nm-actions] { gap: 16px !important; }
  /* breadcrumb bar keeps the desktop max(40px, ...) gutter otherwise, which leaves it
     indented further than the header and the content below it. Match the 16px page gutter. */
  .nm-crumbbar { padding-left: 16px !important; padding-right: 16px !important; }
  /* Drop the "Namučiai" root crumb (and its separator) — the trail wraps onto two lines
     without it. sc-for emits <span>label</span><span>/</span> per crumb, so that's the
     first two children. "Atgal" still goes back, and the logo still returns home. */
  .nm-crumbs > span:nth-child(-n+2) { display: none !important; }
  .nm-crumbs { white-space: nowrap; }
}
@media (max-width: 600px) {
  [data-nm-actions] { gap: 13px !important; }
  [data-nm-cta] { padding: 11px 16px !important; font-size: 13px !important; }
  [data-nm-logo] { height: 32px !important; }
}
@media (max-width: 380px) {
  [data-nm-actions] { gap: 11px !important; }
  [data-nm-cta] { padding: 10px 13px !important; font-size: 12px !important; }
  [data-nm-logo] { height: 32px !important; }
}

/* ====================== HAMBURGER MENU — slice reveal ====================== */
[data-nm-menumobile] { display: none; }
/* the overlay is always mounted; visibility + pointer-events gate it so open AND close animate */
[data-nm-menu] { visibility: hidden; pointer-events: none; }
[data-nm-menu][data-open="1"] { visibility: visible; pointer-events: auto; }
[data-nm-menu][data-open="closing"] { visibility: visible; }
[data-nm-slices] { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
[data-nm-slice] { position: absolute; top: 0; height: 100%; width: calc(20% + 1px); background: #333594; transform: scaleY(0); transition: transform .55s cubic-bezier(.77,0,.18,1); will-change: transform; }
[data-nm-slice]:nth-child(1) { left: 0;   transform-origin: bottom; }
[data-nm-slice]:nth-child(2) { left: 20%; transform-origin: top; }
[data-nm-slice]:nth-child(3) { left: 40%; transform-origin: bottom; }
[data-nm-slice]:nth-child(4) { left: 60%; transform-origin: top; }
[data-nm-slice]:nth-child(5) { left: 80%; transform-origin: bottom; }
[data-nm-menu][data-open="1"] [data-nm-slice] { transform: scaleY(1); }
[data-nm-menu][data-open="1"] [data-nm-slice]:nth-child(1) { transition-delay: 0s; }
[data-nm-menu][data-open="1"] [data-nm-slice]:nth-child(2) { transition-delay: .08s; }
[data-nm-menu][data-open="1"] [data-nm-slice]:nth-child(3) { transition-delay: .16s; }
[data-nm-menu][data-open="1"] [data-nm-slice]:nth-child(4) { transition-delay: .24s; }
[data-nm-menu][data-open="1"] [data-nm-slice]:nth-child(5) { transition-delay: .32s; }
[data-nm-menu][data-open="closing"] [data-nm-slice]:nth-child(1) { transition-delay: .32s; }
[data-nm-menu][data-open="closing"] [data-nm-slice]:nth-child(2) { transition-delay: .24s; }
[data-nm-menu][data-open="closing"] [data-nm-slice]:nth-child(3) { transition-delay: .16s; }
[data-nm-menu][data-open="closing"] [data-nm-slice]:nth-child(4) { transition-delay: .08s; }
[data-nm-menu][data-open="closing"] [data-nm-slice]:nth-child(5) { transition-delay: 0s; }
[data-nm-menucontent] { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; opacity: 0; transition: opacity .45s ease; }
[data-nm-menu][data-open="1"] [data-nm-menucontent] { opacity: 1; transition-delay: .34s; }
@media (prefers-reduced-motion: reduce) {
  [data-nm-slice], [data-nm-menucontent] { transition-duration: .001ms !important; }
}
/* MOBILE menu — the new grid, stacked (no legacy panel) */
@media (max-width: 760px) {
  [data-nm-menumobile] { display: none !important; }
  [data-nm-menutop] { display: flex !important; height: 70px !important; padding: 0 20px !important; }
  [data-nm-menutop] > div:last-child > *:not(:last-child) { display: none !important; }
  [data-nm-menutop] img[src*="logo"] { height: 40px !important; }
  [data-nm-menugrid] { display: grid !important; grid-template-columns: 1fr !important; gap: 40px !important; padding: 24px !important; align-content: center !important; }
  [data-nm-menugrid] > div:first-child { justify-content: flex-start !important; }
  [data-nm-menugrid] > div:first-child > div > div { font-size: 27px !important; }
  [data-nm-menugrid] > div:first-child > div { gap: 20px !important; }
  [data-nm-menugrid] > div:nth-child(2) { align-items: flex-start !important; text-align: left !important; justify-content: flex-start !important; }
  [data-nm-menugrid] > div:nth-child(2) img { width: min(300px, 78%) !important; }
  [data-nm-menuaccent] { display: none !important; }
}

/* ====================== STEP STAGES RESPONSIVE (building / floor / apartment / parking) ====================== */
@media (max-width: 1024px) {
  /* stack into a simple block flow (no grid row stretching -> columns are exactly their content height) */
  [data-nm-stage] {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  /* keep columns within the viewport (don't expand to widest child) so plans scale to fit */
  [data-nm-stage] > div { min-width: 0 !important; }
  /* the right (info) column: move its divider to the top */
  [data-nm-stage] > div + div {
    border-left: none !important;
    border-top: 1px solid #e9e7f0 !important;
  }
  /* any inner scroll panels: let them grow instead of scrolling in a short box */
  [data-nm-stage] [style*="overflow-y: auto"],
  [data-nm-stage] [style*="overflow-y:auto"] {
    overflow-y: visible !important;
    max-height: none !important;
    min-height: 0 !important;
  }
}
@media (max-width: 680px) {
  /* trim the large side padding on every stage column */
  [data-nm-stage] > div { padding-left: 16px !important; padding-right: 16px !important; }
  [data-nm-stage] > div:first-child { padding-top: 24px !important; padding-bottom: 24px !important; }
  /* let the plan toolbar / legend rows wrap instead of overflowing */
  [data-nm-stage] > div:first-child > div:first-child { flex-wrap: wrap !important; row-gap: 12px !important; }
  /* parking: 10 columns -> 5 so spots stay tappable */
  [data-nm-stage] [style*="repeat(10"] { grid-template-columns: repeat(5, 1fr) !important; }
}

/* ====================== BUILDING STEP — MOBILE ====================== */
@media (max-width: 1024px) {
  /* full-bleed image at its natural height (override the generic stage padding incl. :first-child top/bottom) */
  [data-nm-stage] > div[data-nm-bldg-left] {
    padding: 0 !important;
    display: block !important;     /* no flex centering -> no gradient gaps above/below */
    align-self: start !important;  /* don't stretch the grid cell taller than the image */
    line-height: 0 !important;
    background: transparent !important;  /* no gray strip if anything peeks below */
    min-height: 0 !important;
    height: auto !important;
  }
  /* show the building image at its natural height so the column has no extra gray strip */
  [data-nm-bldg-imgwrap] { aspect-ratio: auto !important; display: block !important; font-size: 0 !important; line-height: 0 !important; }
  [data-nm-bldg-img] { width: 100% !important; height: auto !important; object-fit: initial !important; display: block !important; vertical-align: top !important; }
  /* floor hotspots + parking overlay stay aligned on the image at all sizes */
}

/* ---- MOBILE: compact parking button (P + arrow only) & smaller bird markers ---- */
/* ---- MOBILE: collapsible filter bar ---- */
@media (max-width: 680px) {
  [data-nm-filterbar] { padding: 20px 24px !important; }
  [data-nm-filterhead] { display: flex !important; }
  [data-nm-filterbody] { display: none !important; flex-direction: column !important; align-items: stretch !important; gap: 18px !important; margin-top: 18px !important; padding: 4px 6px 8px !important; }
  [data-nm-filterbody][data-open="1"] { display: flex !important; }
}

@media (max-width: 680px) {
  [data-nm-header] { height: 70px !important; }
  [data-nm-page] { padding-top: 70px !important; }
  [data-nm-mokykla] { display: none !important; }
  [data-nm-hint] { display: none !important; }
  [data-nm-hint-icon] { display: flex !important; }
  [data-nm-tabletitle] { font-size: 18px !important; }
  [data-nm-bird] { width: 44px !important; height: 41px !important; }
  [data-nm-bird] > span { font-size: 16px !important; }
}

/* ---- APARTMENT TABLE: horizontal scroll on narrow screens so columns stay readable ---- */
@media (max-width: 820px) {
  /* swap the wide scrolling table for a stacked card layout — all details visible, no scroll */
  [data-nm-tablecard] { display: none !important; }
  [data-nm-tablecards] { display: flex !important; }
}

/* ====================== RESPONSIVE ====================== */
/* ---- TABLET (<=1024px): stack the two-column stages ---- */
@media (max-width: 1024px) {
  div[style*="rgba(255, 255, 255, 0.72)"], div[style*="rgba(255, 255, 255, 0.82)"] { display: none !important; }
  div[style*="1fr 400px"], div[style*="1fr 432px"], div[style*="1fr 460px"] {
    grid-template-columns: 1fr !important; grid-template-rows: auto !important;
    height: auto !important; min-height: 0 !important; overflow: visible !important;
  }
  div[style*="border-left: 1px solid rgb(233, 231, 240)"] {
    border-left: none !important; border-top: 1px solid rgb(233, 231, 240) !important;
  }
  div[style*="overflow-y: auto"] {
    overflow-y: visible !important; max-height: none !important; flex: 0 0 auto !important; min-height: 0 !important;
  }
  div[style*="max-width: 1560px"][style*="flex-wrap: wrap"] { gap: 30px !important; }
}
/* ---- MOBILE (<=680px) ---- */
@media (max-width: 680px) {
  div[style*="height: 88px"] { padding: 0 16px !important; }
  div[style*="height: 58px"] { padding: 0 14px !important; }
  span[style*="0.34em"] { display: none !important; }
  div[style*="gap: 18px"][style*="rgb(151, 149, 173)"] { display: none !important; }
  div[style*="linear-gradient(165deg"] { padding: 22px 14px !important; min-height: 340px !important; }
  div[style*="border-left: 1px solid rgb(233, 231, 240)"] { padding: 24px 16px !important; }
  div[style*="width: 460px"] { width: 100% !important; max-width: 340px !important; }
  div[style*="width: 660px"] { width: 100% !important; height: auto !important; aspect-ratio: 660 / 480 !important; }
  div[style*="max-width: 780px"] { padding: 14px !important; }
  div[style*="repeat(10, 1fr)"] { grid-template-columns: repeat(5, 1fr) !important; }
  div[style*="max-width: 1560px"][style*="flex-wrap: wrap"] {
    flex-direction: column !important; align-items: stretch !important; gap: 20px !important;
  }
  div[style*="rgb(245, 166, 35)"][style*="padding: 26px 40px"] { padding: 22px 16px !important; }
  div[style*="border-radius: 16px"][style*="overflow: hidden"] { overflow-x: auto !important; overflow-y: visible !important; }
  div[style*="1.2fr 54px"] { min-width: 720px !important; }
  div[style*="calc(100vh - 128px)"] { height: auto !important; min-height: 72vh !important; }
  div[style*="46px / 1.05"] { font-size: 30px !important; }
  div[style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; }
  div[style*="font: 800 36px / 1"] { font-size: 28px !important; }
  div[style*="44px / 1"][style*="rgb(255, 255, 255)"] { font-size: 30px !important; }
}

/* ====================== HOMEPAGE FOOTER (BENDRAUKIME) — ported from index ====================== */
[data-nm-input]:focus { border-bottom-color: #FBAD1D !important; }
.nm-check { position: relative; display: inline-flex; align-items: center; gap: 11px; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
.nm-check input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.nm-check .nm-box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid rgba(255,255,255,.42); background: transparent; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background .28s cubic-bezier(.16,.8,.24,1), border-color .28s; }
.nm-check:hover .nm-box { border-color: #FBAD1D; }
.nm-check:active .nm-box { transform: scale(.88); }
.nm-check input:focus-visible + .nm-box { box-shadow: 0 0 0 3px rgba(245,166,35,.4); }
.nm-check .nm-box svg { width: 13px; height: 13px; display: block; }
.nm-check .nm-box svg path { fill: none; stroke: #333594; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .32s cubic-bezier(.65,0,.45,1) .06s; }
.nm-check input:checked + .nm-box { background: #FBAD1D; border-color: #FBAD1D; animation: nm-checkpop .34s cubic-bezier(.16,.8,.24,1); }
.nm-check input:checked + .nm-box svg path { stroke-dashoffset: 0; }
@keyframes nm-checkpop { 0% { transform: scale(.7); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }
@media (max-width: 1024px) {
  [data-nm-contact] { grid-template-columns: 1fr !important; gap: 60px !important; }
}
@media (max-width: 600px) {
  [data-nm-formfoot] { flex-direction: column !important; align-items: stretch !important; }
  [data-nm-submit] { justify-content: center !important; }
}

@media (max-width: 760px) { [data-nm-vizdisc] { display: none !important; } }

/* ---- Floor (aukšto planas) view: mobile + tablet responsive ----
   900px, not 760px: iPad portrait is 768px and the absolutely-positioned selector/legend
   crowd the plan at that width. Stacking them above the image covers every tablet. */
@media (max-width: 900px) {
  .nm-floorwrap { display: flex; flex-direction: column; }
  /* The plan runs edge-to-edge. .nm-floorwrap is a [data-nm-stage] > div, so it inherits that
     rule's 16px side gutter — width the drawing can't spare on a phone. Class raises
     specificity above the !important gutter; the overlay row keeps its own padding. */
  [data-nm-stage] > div.nm-floorwrap { padding-left: 0 !important; padding-right: 0 !important; }
  .nm-planbox { order: 2; width: 100%; }
  .nm-floorimg { width: 100%; }
  /* 3 columns: [AUKŠTAS selector] [3 statuses stacked] [compass] */
  .nm-flooroverlays { order: 1; display: flex; align-items: center; gap: 18px; padding: 4px 16px 4px; }
  .nm-floorctl, .nm-floorlegend {
    position: static !important; top: auto !important; left: auto !important; right: auto !important;
    filter: none !important; z-index: auto !important; flex: 0 0 auto;
  }
  .nm-floorctl { gap: 8px; }
  .nm-floorctl > span:nth-child(2) { font-size: 22px !important; }
  /* legend: statuses in a single stacked column, compass as its own column beside them */
  .nm-floorlegend {
    display: grid !important; grid-template-rows: auto auto auto !important; grid-auto-flow: column !important;
    column-gap: 14px !important; row-gap: 7px !important; align-items: center !important; gap: 7px 14px !important;
  }
  .nm-floorlegend > div:nth-child(-n+3) { gap: 8px !important; }
  .nm-floorlegend > div:last-child { grid-row: 1 / 4; align-self: center; margin-left: 0 !important; }
}

/* The plan is a 2.05:1 drawing, so fitted to a phone it is far too small to read. It is a
   pinch/double-tap zoom surface instead (see setupPlanZoom): the box is the viewport and
   .nm-planzoom is the transformed layer, so nothing may escape the box.
   touch-action starts as pan-y so a one-finger swipe still scrolls the page; the script
   switches it to none once zoomed in, to take over panning. */
@media (max-width: 900px) {
  .nm-planbox { overflow: hidden; touch-action: pan-y; }
  .nm-planzoom { transform-origin: 0 0; }
  /* hint that the plan is interactive; fades out once the user has zoomed */
  .nm-floorwrap::after {
    content: "Priartinkite pirštais";
    position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
    padding: 5px 12px; border-radius: 20px; pointer-events: none; z-index: 4;
    background: rgba(42,33,82,.62); color: #fff;
    font: 600 11px/1 'Raleway'; white-space: nowrap;
    transition: opacity .2s ease;
  }
  .nm-floorwrap:has(.nm-planbox[data-zoomed])::after { opacity: 0; }
}

/* ---- Apartment detail 2D plan: edge-to-edge on mobile (no card radius/padding) ---- */
@media (max-width: 760px) {
  /* extra specificity to beat [data-nm-stage] > div:first-child padding rule */
  [data-nm-stage] > div.nm-aptmedia { padding: 0 !important; }
  [data-nm-stage] .nm-aptcard { border-radius: 0 !important; padding: 0 !important; box-shadow: none !important; height: auto !important; max-height: none !important; width: 100% !important; }
  [data-nm-stage] .nm-aptcard img { max-height: none !important; width: 100% !important; }
}
