/* Arkadia Apartments — a flat's page ('/apartament/<slug>/' and '/en/apartment/<slug>/',
   PropertyPage, templates/pages/property*). Loaded on that page only, after site.css:
   the hero and its photo mosaic, the lightbox, the booking card and the "Când e liber"
   calendar, the "about" block, the compare cards and the FAQ. Split out of site.css on
   2026-10-09 (PageSpeed Insights): a rule lives here only if it matches on a flat's
   page alone; what other pages share stays in site.css. */
.section.alt{background:#fff}.section-head{display:flex;justify-content:space-between;gap:30px;align-items:end;margin-bottom:36px}.section-head p{max-width:500px;color:var(--muted)}.control{display:grid;gap:6px}.control label{font-size:.78rem;font-weight:600}.control input,.control select{width:100%;border:1px solid var(--line);border-radius:12px;padding:12px;background:#fff}.status{display:inline-flex;align-items:center;gap:6px;font-size:.76rem;font-weight:600;padding:6px 9px;border-radius:999px}.property-hero{background:#fff;padding:44px 0 70px}.property-hero p{color:var(--muted);font-size:1.03rem}.booking-box{margin-top:24px;border:1px solid var(--line);border-radius:20px;padding:18px;background:#fff}.booking-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.booking-grid .control:nth-child(3){grid-column:1/-1}.booking-grid input,.booking-grid select{width:100%;min-width:0;padding:11px;border:1px solid var(--line);border-radius:12px}.booking-result{margin-top:12px}.source-note{font-size:.75rem;color:var(--muted);margin-top:18px}
/* "3 / 9" as a pill at the top centre of the viewer (brief A9): it sat under the dialog, faint; the
   dimensions and offsets are reset, so nothing else can stretch it. */
.lightbox-count{position:absolute;z-index:2;inset:16px auto auto 50%;width:auto;height:auto;margin:0;padding:4px 12px;transform:translateX(-50%);border-radius:999px;background:rgba(15,23,20,.72);color:#fff;font-size:13px;font-weight:600;line-height:1.4;white-space:nowrap;opacity:1}
@media(max-width:680px){.section-head{display:block}}.lightbox{width:min(1100px,94vw);max-width:none;height:min(820px,92vh);border:0;border-radius:20px;padding:0;background:#0a141c;color:#fff}.lightbox::backdrop{background:rgba(0,0,0,.86)}.lightbox figure{height:100%;margin:0;display:grid;grid-template-rows:1fr auto;place-items:center;padding:42px}.lightbox img{max-width:100%;max-height:calc(92vh - 110px);object-fit:contain}.lightbox figcaption{padding:12px 0 0;color:#cbd9df}.lightbox-close,.lightbox-prev,.lightbox-next{position:absolute;z-index:2;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;cursor:pointer}.lightbox-close{right:15px;top:15px;width:42px;height:42px;font-size:28px}.lightbox-prev,.lightbox-next{top:50%;transform:translateY(-50%);width:48px;height:48px;font-size:36px}.lightbox-prev{left:14px}.lightbox-next{right:14px}
/* The photo viewer on a phone, or a phone turned sideways (owner, 2026-10-12): the whole screen, the photo
   centred at the full width, its caption under it, the buttons over its edges; a swipe walks the photos
   (booking.js). It stood small at the bottom of a framed box. */
@media(max-width:680px),(max-height:520px){.lightbox{width:100%;max-width:none;height:100%;max-height:none;margin:0;inset:0;border-radius:0;background:#05090c}.lightbox figure{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:64px 0 calc(20px + env(safe-area-inset-bottom))}.lightbox img{width:100%;height:auto;max-height:calc(100% - 96px);object-fit:contain;touch-action:pan-y pinch-zoom;user-select:none;-webkit-user-select:none}.lightbox figcaption{padding:0 16px;font-size:15px;line-height:1.45;text-align:center}.lightbox-close{top:calc(10px + env(safe-area-inset-top));right:10px;width:44px;height:44px;background:rgba(10,20,28,.6)}.lightbox-prev,.lightbox-next{width:44px;height:44px;font-size:30px;background:rgba(10,20,28,.6)}.lightbox-prev{left:8px}.lightbox-next{right:8px}.lightbox-count{top:calc(18px + env(safe-area-inset-top))}}
@media(max-height:520px){.lightbox figure{gap:6px;padding:52px 64px 10px}.lightbox img{max-height:calc(100% - 30px)}.lightbox figcaption{font-size:13px}}
.control input:focus-visible,.control select:focus-visible{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}.lead-status:empty,.booking-result:empty{display:none}
.property-hero{padding-top:18px}
/* The title at 42px from 1050px up, scaled down to 34px on narrower screens (brief B2; system fonts, owner
   2026-10-12: no served font), less tight than the display headings. */
.property-hero h1{font-size:clamp(34px,4vw,42px);line-height:1.12;letter-spacing:-.012em;margin:0 0 14px}
.booking-box button[type=submit]{width:100%;margin-top:14px}
.booking-box .source-note{margin:14px 0 0;font-size:13px}
.section h2.section-title{font-size:clamp(1.9rem,3.2vw,2.9rem)}.control input[type=date]:focus-within{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}

/* ---- v0.15: property availability calendar ---- */
/* Jump targets (the booking-box link, the calendar's "go to the booking box"
   button, old links to #imagini / #photos) under a sticky header: 76px, 66px
   on phones. */
.cal-section,.booking-box,.property-hero-gallery{scroll-margin-top:90px}
/* The page's rhythm (brief B5): its sections 72px apart from 681px up (phones keep site.css's 68px), and the
   calendar and the comparison on a warm grey, so they stand apart from the white blocks around them. */
@media(min-width:681px){main .section{padding:72px 0}}
.cal-section,.compare-section{background:#f6f5f2}
.booking-cal-link{margin:10px 0 0;font-size:.86rem;font-weight:600}
.booking-cal-link a{color:var(--green)}
.booking-cal-link a:hover{text-decoration:underline}
/* The month buttons in the card's corners, level with the months' names, as in a date picker (brief B7): the
   toolbar shares the months' cell of the card's grid, so it stays level whatever stands above them (the
   confirm note). The buttons, their order and their listeners are the same. */
.cal-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px}
.cal-card>.cal-note{grid-row:1}
.cal-card>.cal-toolbar,.cal-card>.cal-months{grid-row:2;grid-column:1}
/* Every other line keeps its place under the months: an empty row 1 would otherwise take the status line. */
.cal-card>.cal-conflict,.cal-card>noscript{grid-row:3}
.cal-card>.cal-status{grid-row:4}
.cal-card>.cal-legend{grid-row:5}
.cal-toolbar{z-index:1;align-self:start;display:flex;justify-content:space-between;gap:8px;margin:-9px 0 0;pointer-events:none}
.cal-toolbar .cal-nav{pointer-events:auto}
/* There is no global [hidden] rule, and these carry a display of their own.
   Until the first load the toolbar and the legend hold their space invisibly:
   revealing them then pushed everything below the card down by ~90px. The two
   optional legend items depend on the data, so they cannot be reserved. */
.cal-toolbar[hidden],.cal-legend[hidden]{visibility:hidden}
.cal-legend li[hidden]{display:none}
.cal-nav{width:44px;height:44px;display:inline-grid;place-items:center;padding:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--ink);font-size:1.6rem;line-height:1;cursor:pointer}
.cal-nav:hover:not(:disabled){border-color:var(--green);color:var(--green)}
.cal-nav:disabled{opacity:.35;cursor:default}
.cal-note:empty{display:none}
.cal-note{margin:0 0 18px}
/* min-height is two six-week months, so loading, a five-week month or an error
   never moves the sections below. align-content keeps a lone notice at its own
   height instead of stretching it over the reserved space. */
.cal-months{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:start;align-content:start;min-height:380px;transition:opacity .2s}
.cal-months.is-loading{opacity:.5}
.cal-months>.notice,.cal-months>.cal-loading{grid-column:1/-1}
.cal-months .notice .btn{min-height:40px;margin-left:8px;padding:0 16px}
.cal-loading{margin:0;color:var(--muted)}
.cal-month{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0 4px;margin:0}
.cal-month caption{caption-side:top;padding:0 0 10px;text-align:center;font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
.cal-month th{padding:0 0 6px;text-align:center;font-size:.72rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.cal-month td{padding:0;text-align:center}
.cal-day{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:1;min-height:40px;max-height:48px;margin:0;padding:0;border:0;border-radius:12px;background:transparent;color:var(--ink);font-size:.92rem;font-weight:600;cursor:pointer}
.cal-day:hover:not([aria-disabled=true],.is-start,.is-end,.is-range){background:var(--soft)}
.cal-day.is-past,.cal-day.is-beyond{color:#b3bec6;cursor:default}
/* Booked is grey AND struck through, so the state never rests on colour alone. */
.cal-day.is-busy{background:#eef1f0;color:#5b6b78;text-decoration:line-through;cursor:default}
/* The first booked night after a free one: its morning is still a departure. */
.cal-day.is-busy.is-turn{background:linear-gradient(135deg,transparent 50%,#eef1f0 50%)}
.cal-day.is-busy.is-out-ok{color:var(--ink);text-decoration:none;cursor:pointer}
.cal-day.is-no-arrival{color:var(--muted)}
.cal-day.is-no-arrival::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.cal-day.is-confirm{background:#fff3d8;color:#775313}
.cal-day.is-today{box-shadow:inset 0 0 0 2px var(--ink)}
.cal-day.is-range{background:#d6ece2;color:var(--ink);border-radius:0}
.cal-month td:first-child .cal-day.is-range{border-radius:12px 0 0 12px}
.cal-month td:last-child .cal-day.is-range{border-radius:0 12px 12px 0}
/* A check-out may fall on a booked night; it must still read as chosen, so the
   booked and turn-over styles yield to it. */
.cal-day.is-start,.cal-day.is-end,.cal-day.is-busy.is-end{background:var(--green);color:#fff;text-decoration:none}
/* An arrival never may. Typed dates can still put one on a booked night, and the
   link from a refused check lands right on it, so it stays booked and only a
   ring marks it as theirs. Same weight as the turn-over rule and after it, so it
   wins there too, and still yields to the forced-colours block below. */
.cal-day.is-busy.is-start{background:#eef1f0;color:#5b6b78;text-decoration:line-through;box-shadow:inset 0 0 0 2px var(--green)}
/* Dates typed in the card over booked nights (brief A2): those nights hatched in the warning tones,
   whatever else they are; and, with an arrival picked, the days past a booked night, no departure for it. */
.cal-day.is-busy.is-conflict{background:repeating-linear-gradient(135deg,#fdf3e3 0 5px,#f3dfb6 5px 8px);color:#7a5212;box-shadow:inset 0 0 0 2px #d9a54a}
.cal-day.is-cut{color:#a9b3bb}
.cal-card .cal-conflict{margin:14px 0 0}
.has-range .cal-day.is-start{border-radius:12px 0 0 12px}
.has-range .cal-day.is-end{border-radius:0 12px 12px 0}
.has-range td:last-child .cal-day.is-start,.has-range td:first-child .cal-day.is-end{border-radius:12px}
.cal-day:focus-visible{z-index:1;outline:3px solid var(--green);outline-offset:2px}
.cal-status{min-height:1.55em;margin:14px 0 0;font-size:.92rem;font-weight:600}
.cal-goto{margin-left:4px;padding:0;border:0;background:none;color:var(--green);font-weight:600;text-decoration:underline;cursor:pointer}
/* The legend draws the grid's own shapes (brief A8): free a white cell with an edge, booked a slanted
   cell struck through the middle, like a run of booked days, the visitor's dates green. */
.cal-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 0;padding:0;list-style:none;font-size:13px;color:var(--muted)}
.cal-legend li{display:inline-flex;align-items:center;gap:8px}
.cal-legend .sw{width:20px;height:14px;flex:none;border:1px solid var(--line);border-radius:4px;background:#fff}
.cal-legend .sw-free{border:1.5px solid #d9d6d0}
.cal-legend .sw-busy{border-color:#e9e7e2;background:linear-gradient(transparent 5.25px,#9aa3ab 5.25px,#9aa3ab 6.75px,transparent 6.75px),#e9e7e2;transform:skewX(-16deg)}
.cal-legend .sw-sel{background:#187b58;border-color:#187b58}
.cal-legend .sw-confirm{background:#fff3d8;border-color:#f0dca8}
.cal-legend .sw-noarr{background:radial-gradient(circle at 50% 72%,var(--muted) 2px,transparent 2.5px),#fff}
/* Forced colours (Windows contrast themes) repaint every background as Canvas
   and drop gradients and shadows, which is where the chosen stay, the legend
   swatches and the no-arrival dot live. Those opt out and use system colours:
   Highlight for the stay, ringed at its two ends; a GrayText stroke for booked,
   whose days keep their strike-through; a dotted ring for "to confirm". The
   .cal-month prefix outranks the booked turn-over gradient, which would
   otherwise survive the opt-out on a booked check-out day. Only HighlightText
   is sure to contrast with Highlight, so a focused day of the stay is ringed
   inside in that colour rather than outside in CanvasText. */
@media(forced-colors:active){.cal-month .cal-day.is-range,.cal-month .cal-day.is-start,.cal-month .cal-day.is-end{forced-color-adjust:none;background:Highlight;color:HighlightText;box-shadow:none}.cal-month .cal-day.is-start,.cal-month .cal-day.is-end{box-shadow:inset 0 0 0 3px HighlightText}.cal-day.is-today{border:1px dashed CanvasText}.cal-day[aria-disabled=true]{color:GrayText}.cal-day.is-confirm:not(.is-start,.is-end,.is-range){outline:1px dotted CanvasText;outline-offset:-5px}.cal-day.is-no-arrival::after{forced-color-adjust:none;background:currentColor}.cal-month .cal-day:focus-visible{outline:3px solid CanvasText;outline-offset:2px}.cal-month .cal-day:is(.is-start,.is-end,.is-range):focus-visible{outline:2px solid HighlightText;outline-offset:-8px}.cal-legend .sw{forced-color-adjust:none;border-color:CanvasText;background:Canvas}.cal-legend .sw-busy{background:linear-gradient(transparent 8px,GrayText 8px,GrayText 9.5px,transparent 9.5px),Canvas}.cal-legend .sw-sel{background:Highlight}.cal-legend .sw-confirm{outline:1px dotted CanvasText;outline-offset:-5px}.cal-legend .sw-noarr{background:radial-gradient(circle at 50% 72%,CanvasText 2px,transparent 2.5px),Canvas}.cal-month .cal-day.is-conflict{outline:2px dashed CanvasText;outline-offset:-5px}}
/* Phones: the two months stack. A stay often crosses the end of a month, so the
   second one stays on screen rather than behind a button. min-height is a
   six-week month plus a five-week one (two consecutive months never both span
   six weeks; each extra week is a cell plus 4px of row spacing) at the width a
   day cell actually gets (wrap and card padding take 50px). Two five-week
   months leave one empty row, but the first load never moves the page. */
@media(max-width:680px){.cal-card{padding:16px 12px;border-radius:20px}.cal-months{grid-template-columns:1fr;gap:28px;min-height:calc(2 * 88px + 4px + 11 * min(48px, (100vw - 50px) / 7) + 28px)}.cal-day{min-height:38px}.cal-legend{gap:8px 14px}}
/* Without scripting the grid never loads, so the reserved height, the toolbar,
   the legend and the status line would only frame empty space above the
   noscript notice. Last in the section on purpose: what it undoes (the phone
   min-height, .cal-legend's display) has the same specificity and wins by
   coming later, which is also how this has to win. */
@media(scripting:none){.cal-months{min-height:0}.cal-toolbar,.cal-legend,.cal-status{display:none}}

/* ---- v0.15: property page hero — title, photo mosaic, details beside the booking card ---- */
/* The title runs the full width, over the photos. .property-hero p (muted,
   1.03rem) still styles the kicker, the calendar link and the notes. */
/* The hero's kicker small, spaced and green (brief B3): .property-hero p made it 16.48px grey, as loud as the breadcrumbs.
   The sections' kickers (.eyebrow) are unchanged. */
.property-hero-head .kicker{margin:0 0 10px;font-size:12.5px;letter-spacing:.17em;color:#187b58;font-weight:600}
/* The title's row of chips (brief B4): the rating, the classification and the flat's own words as pills,
   no dots between them; the nightly rate on a line of its own under them, the figure first. */
.property-hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:15px;color:var(--muted);margin-bottom:22px}
.property-hero-meta .property-rating{padding:4px 12px;border:1px solid #efe2c4;border-radius:999px;background:#fbf6ea;color:#102131}
.property-rating{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.property-rating svg{color:#d99a00}
.property-rating span{color:var(--muted)}
.property-rating-sm{font-size:14px}
.classification-badge,.hero-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--soft);color:var(--green2);font-weight:600;font-size:13.5px}
/* The mosaic: the hero photo over both rows, four tiles beside it. Fewer photos
   narrow the grid rather than leave holes; PropertyPage::MOSAIC_COLUMNS mirrors
   these columns for the sizes attribute. Photos past the tiles are hidden
   anchors for the lightbox, and .gallery-tile's display would show them. */
.gallery-mosaic{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));height:clamp(320px,52vh,480px);gap:8px;position:relative;border-radius:var(--r);overflow:hidden}
.gallery-mosaic[data-count="4"]{grid-template-columns:2fr 1fr;grid-template-rows:repeat(3,minmax(0,1fr))}
.gallery-mosaic[data-count="3"]{grid-template-columns:2fr 1fr}
.gallery-mosaic[data-count="2"]{grid-template-columns:2fr 1fr;grid-template-rows:minmax(0,1fr)}
.gallery-mosaic[data-count="1"]{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.gallery-mosaic a[hidden]{display:none}
.gallery-tile{position:relative;display:block;overflow:hidden;min-height:0}
.gallery-tile picture{display:block;height:100%}
.gallery-tile img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease,filter .3s}
.gallery-tile:hover img{transform:scale(1.035);filter:brightness(.95)}
/* The mosaic clips its corners, which would also clip a focus ring drawn outside. */
.gallery-tile:focus-visible{outline-offset:-3px}
.gallery-tile-main{grid-row:1/-1}
.gallery-all{position:absolute;right:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border:1px solid rgba(16,33,49,.12);border-radius:999px;background:#fff;color:var(--ink);font-weight:600;font-size:14px;line-height:1;box-shadow:0 6px 20px rgba(13,29,41,.18);cursor:pointer}
.gallery-all:hover{background:var(--paper)}
/* Below the photos: the details, and the booking card beside them. */
.property-hero-body{display:grid;grid-template-columns:minmax(0,1fr) 392px;gap:56px;align-items:start;margin-top:36px;padding-bottom:12px}
.property-stats{display:flex;flex-wrap:wrap;list-style:none;margin:0 0 22px;padding:0 0 22px;border-bottom:1px solid var(--line)}
.property-stats li{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--ink);padding-right:22px;margin-right:22px;border-right:1px solid var(--line)}
.property-stats li:last-child{border:0;margin:0;padding:0}
.property-stats svg{color:var(--green)}
.property-hero .property-lead{font-size:18px;line-height:1.6;color:var(--ink);margin:0 0 28px;max-width:60ch}
.highlight-list{list-style:none;margin:0 0 32px;padding:0;display:grid;gap:18px}
.highlight-list li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.highlight-icon{width:44px;height:44px;border-radius:12px;background:var(--soft);color:var(--green);display:grid;place-items:center}
.highlight-list b{display:block;font-size:16px;color:var(--ink);margin:2px 0 3px}
.highlight-text{font-size:15px;color:var(--muted);line-height:1.5}
/* The guests' words (brief of 2026-10-13, on the owner's brief of 2026-10-11;
   pages/property/reviews.php), on a pale panel: the rating large, its stars and count
   beside it, the line on who wrote the reviews at the row's end; the ratings by
   category; the newest review on navy under a large quotation mark; the others two to
   a row (one where the panel is narrow), their bylines level; the reviews page as a
   pill, and up to 900px, where the booking card is not beside the block, a button to
   it. The cards draw no shadow and do not change under the pointer: they are not
   links. Colours are site.css's --rv-* where the brief's match them. */
.rev-block{--rb-panel:#f4f7f5;--rb-star-off:#d6dee3;--rb-avatar:#dfede6;--rb-verified:#33475b;--rb-on-navy:#9db0bf;--rb-gold-on-navy:#e3b65c;--rb-link-on-navy:#8fd3b6;container:rev-block/inline-size;padding:26px 26px 28px;border-radius:20px;background:var(--rb-panel);scroll-margin-top:96px}
/* The block's heading on the scale of the page's section headings (brief B3): it was 20.8px, under the 22px h3s. */
.property-hero .rev-block h2{margin:0 0 20px;font-size:clamp(1.9rem,3.2vw,2.9rem);line-height:1.01;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
/* The rating summary (owner, 2026-10-13; tightened for phones the same day): the score, beside it
   its stars over the reviews it counts and who wrote them; then the evidence, a white card with each
   platform in its own scale, its figures in columns, and at its foot when they were read and how an
   average of two is worked out. Two levels of text: the ink for figures and the count, one grey. */
.rev-block__summary{display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;margin:0 0 20px}
.rev-block__overall{display:grid;grid-template-columns:auto auto;justify-content:start;align-items:center;gap:4px 14px}
.property-hero .rev-block__score{display:contents}
.rev-block__num{grid-row:1/3;font-size:40px;font-weight:700;line-height:1;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.rev-block__stars{display:inline-flex;align-self:end;gap:2px;font-size:19px;line-height:1}
/* Each star filled to its share of the rating: a whole one, an empty one, or tenths of one. */
.rev-block__star{color:var(--rb-star-off)}
.rev-block__star.is-full{color:var(--rv-gold)}
.rev-block__star[class*=" is-p"]{background:linear-gradient(90deg,var(--rv-gold) var(--fill),var(--rb-star-off) var(--fill));-webkit-background-clip:text;background-clip:text;color:transparent}
.rev-block__star.is-p1{--fill:10%}.rev-block__star.is-p2{--fill:20%}.rev-block__star.is-p3{--fill:30%}.rev-block__star.is-p4{--fill:40%}.rev-block__star.is-p5{--fill:50%}
.rev-block__star.is-p6{--fill:60%}.rev-block__star.is-p7{--fill:70%}.rev-block__star.is-p8{--fill:80%}.rev-block__star.is-p9{--fill:90%}
.property-hero .rev-block__count{display:flex;flex-direction:column;align-items:flex-start;align-self:start;gap:3px;margin:0;font-size:15px;font-weight:600;line-height:1.3;color:var(--ink)}
.rev-block__verified{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--rb-verified)}
.rev-block__verified svg{flex:none;color:var(--green)}
.rev-block__evidence{padding:12px 16px;border:1px solid var(--rv-line);border-radius:12px;background:#fff}
.rev-block__platforms{display:grid;grid-template-columns:auto auto auto;justify-content:start;align-items:baseline;gap:8px 18px;margin:0;font-size:13.5px;line-height:1.3;color:var(--ink-2)}
.rev-block__platform{display:contents}
.rev-block__platforms dt{font-weight:600;color:var(--ink)}
.rev-block__platforms dd{margin:0;font-variant-numeric:tabular-nums}
.rev-block__pscore b{font-weight:700;color:var(--ink)}
.rev-block__pscale,.rev-block__pcount{color:var(--rv-mute)}
.rev-block__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 18px;margin-top:10px;padding-top:9px;border-top:1px solid var(--rv-line)}
/* The brief's #7A8A96 is 3.3:1 on the panel, under AA for 13px; --rv-mute is 4.8:1 there, 5.2:1 on white. */
.property-hero .rev-block__updated{margin:0;font-size:12.5px;line-height:1.35;color:var(--rv-mute)}
/* How an average of two is worked out: one click away, a native disclosure, no script; open, it takes the card's width. */
.rev-block__how[open]{flex-basis:100%}
.rev-block__how summary{display:inline-flex;align-items:center;gap:6px;min-height:24px;border-radius:6px;font-size:13px;font-weight:600;color:var(--green);cursor:pointer;list-style:none}
.rev-block__how summary::-webkit-details-marker{display:none}
.rev-block__how summary::before{content:"i";display:inline-grid;place-items:center;width:16px;height:16px;border:1.5px solid currentColor;border-radius:50%;font:italic 700 10px/1 Georgia,"Times New Roman",serif}
.rev-block__how summary:hover{text-decoration:underline;text-underline-offset:2px}
.property-hero .rev-block__how p{max-width:62ch;margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--ink-2)}
.rev-block__subscores{display:flex;flex-wrap:wrap;gap:6px 18px;margin:-10px 0 20px;padding:0;list-style:none;font-size:13px;color:var(--ink-2)}
.rev-block__subscores b{font-weight:700;color:var(--ink)}
.rev-block__subscores span{margin-left:3px;font-size:11px;color:var(--rv-gold)}
.rev-block .rev{display:flex;flex-direction:column;gap:0;padding:20px;border-radius:16px}
.rev-block .rev__stars{font-size:13px;letter-spacing:2px}
.rev-block .rev__stars-off{color:var(--rb-star-off)}
/* The opening mark hangs in the card's margin, the words aligned under the stars;
   the padding keeps it inside the box the clamp clips. */
.rev-block .rev blockquote{margin:10px 0 16px -.45em;padding-left:.45em;text-indent:-.45em;font-size:15.5px;line-height:1.55;color:var(--rv-ink)}
.rev-block .rev-grid blockquote:lang(en){margin-left:-.4em;padding-left:.4em;text-indent:-.4em}
/* The bylines level at the foot of the cards of a row. */
.rev-block .rev figcaption{display:block;margin-top:auto}
.rev-block .rev__by{gap:10px}
.rev__avatar{flex:0 0 36px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--rb-avatar);color:var(--rv-green);font-size:15px;font-weight:700;line-height:1}
.rev-block .rev__name{display:block;font-size:14.5px;font-weight:600;line-height:1.3;color:var(--rv-ink)}
.rev-block .rev__date{display:block;font-size:12.5px;line-height:1.35;color:var(--rv-mute)}
/* "citește mai mult": shown by booking.js only under a quote its four lines cut. */
.rev__toggle{align-self:flex-start;min-height:24px;margin:-12px 0 14px;padding:2px 0;border:0;background:none;font:inherit;font-size:13.5px;font-weight:600;line-height:1.3;color:var(--green);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.rev__toggle[hidden]{display:none}
/* The clamp only where scripts run, so a page without them shows every word; on from
   the first paint, so nothing moves when the script measures. */
@media(scripting:enabled){.rev-block .rev blockquote{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}.rev-block .rev blockquote.is-open{display:block;-webkit-line-clamp:none;line-clamp:none;overflow:visible}}
.rev-block .rev--featured{position:relative;margin:0 0 18px;padding:24px 84px 24px 26px;border-color:var(--ink);background:var(--ink);color:#fff;overflow:hidden}
.rev__qmark{position:absolute;top:4px;right:20px;font-family:Georgia,"Times New Roman",serif;font-size:96px;line-height:1;color:rgba(255,255,255,.07);pointer-events:none}
.rev-block .rev--featured .rev__stars{font-size:14px;color:var(--rb-gold-on-navy)}
.rev-block .rev--featured blockquote{margin:10px 0 18px;padding:0;text-indent:0;font-size:19px;line-height:1.55;color:#fff}
.rev-block .rev--featured .rev__toggle{color:var(--rb-link-on-navy)}
.rev-block .rev--featured .rev__toggle:focus-visible{outline-color:var(--rb-link-on-navy)}
.rev-block .rev--featured .rev__avatar{background:rgba(255,255,255,.14);color:#fff}
.rev-block .rev--featured .rev__name{color:#fff}
.rev-block .rev--featured .rev__date{color:var(--rb-on-navy)}
.rev-block .rev-grid{grid-template-columns:1fr 1fr;align-items:stretch;gap:18px;margin:0 0 22px}
.rev-block .rev-grid--one{grid-template-columns:1fr}
.rev-block .rev--featured+.rev-block__actions{margin-top:22px}
.rev-block__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.rev-block .rev-block__more{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:1.5px solid var(--green);border-radius:999px;background:#fff;color:var(--green);font-size:14.5px;font-weight:600;line-height:1.3;text-decoration:none}
.rev-block .rev-block__more:hover{background:var(--rv-mist)}
.rev-block .rev-block__more:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.rev-block__book{display:none}
/* The cards come in once, the first time they are scrolled to (booking.js adds the class). */
@media(prefers-reduced-motion:no-preference){.rev-block--reveal .rev{opacity:0;transform:translateY(8px)}.rev-block--reveal .rev.is-in{opacity:1;transform:none;transition:opacity .45s ease-out,transform .45s ease-out}}
/* A narrow panel (beside the booking card from 901 to about 1050px) takes the phones' layout. */
@container rev-block (max-width:540px){.rev-block .rev-grid{grid-template-columns:1fr}.rev-block__summary{flex-direction:column;align-items:stretch}.rev-block .rev--featured{padding:22px 24px}.rev__qmark{display:none}}
@media(max-width:900px){.rev-block .rev-block__book{display:inline-flex}.booking-aside{scroll-margin-top:90px}}
@media(max-width:760px){.rev-block{padding:18px 16px 20px}.rev-block .rev-grid{grid-template-columns:1fr}.rev-block__summary{flex-direction:column;align-items:stretch}.rev-block .rev--featured{padding:22px 24px}.rev__qmark{display:none}}
/* The rating beside the title takes the reader to the block. */
.property-hero-meta a.property-rating:hover{border-color:#e2cb93;background:#f7eedb}
/* The booking card follows the reader down the details. */
.booking-aside{position:sticky;top:96px}
.booking-aside .booking-box{margin:0;padding:22px;border-radius:24px;box-shadow:var(--shadow)}
.booking-price{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:16px}
.booking-price b{font-size:28px;letter-spacing:-.02em;color:var(--ink)}
.booking-price-from,.booking-price-per{color:var(--muted);font-size:15px}
.booking-price .property-rating{align-self:center}
.booking-price .property-rating b{font-size:15px;letter-spacing:0}
/* The pricing rules under the nightly rate: weekend nights, discounts, the tourist tax. */
.booking-terms{list-style:none;display:grid;gap:2px;margin:-8px 0 16px;padding:0;font-size:13px;color:var(--muted)}
/* Why book here (owner, 2026-10-10): under the nightly rate until the card has a total, then under the total.
   The card's own lines name .booking-box: .property-hero p would grey them and set them at 1.03rem. */
.booking-box .booking-better{margin:-8px 0 16px}
/* A badge that says why when pressed (brief A5): the reason under it, in the card's secondary words. */
.booking-better-btn{list-style:none;display:inline-flex;align-items:center;gap:6px;min-height:28px;margin:0;padding:4px 12px;border:1px solid #cfe3d6;border-radius:999px;background:#eef6f0;color:#14532d;font:inherit;font-size:13px;font-weight:600;line-height:1.3;text-align:left;cursor:pointer}
.booking-better-btn:hover{border-color:#9fc7ae}
.booking-better-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.booking-better-btn svg{flex:none}
.booking-better-btn::-webkit-details-marker{display:none}
.booking-box .booking-better-why{margin:8px 0 0;font-size:13px;line-height:1.45;color:#52606d;text-wrap:balance}
.booking-box .booking-terms+.booking-better{margin-top:-10px}
.booking-box.has-total>.booking-better{display:none}
/* The stay's price, line by line, then its total: empty, and so hidden, until the dates make a stay. */
.booking-estimate{margin:6px 0 12px;padding:12px 0 0;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.booking-estimate:empty{display:none}
.booking-estimate ul{list-style:none;display:grid;gap:4px;margin:0;padding:0}
.booking-estimate li,.booking-total{display:flex;justify-content:space-between;gap:10px}
.booking-estimate li span:last-child{white-space:nowrap}
.booking-estimate .is-discount span:last-child{color:var(--green-text)}
/* One kind of divider in the card, a solid hairline (brief B6; it was dashed). */
.booking-total{margin:8px 0 0;padding-top:8px;border-top:1px solid #e7e4de;color:var(--ink)}
.booking-estimate b{color:var(--ink)}
.booking-estimate .booking-better{margin:6px 0 0;text-align:right}
/* A stay of 7 nights or more: a line under the total that asks for its own rate (brief C4). */
.booking-box .booking-long{margin:8px 0 0;font-size:13.5px;line-height:1.45}
.booking-long a{color:var(--green-text);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* The first free stay the card was given, and the hint while it has no dates (owner, 2026-10-10). */
.booking-box .booking-first{margin:0 0 8px;font-size:inherit;color:var(--ink);font-weight:600}
.booking-box .booking-hint{margin:0;font-size:inherit}
/* After a refusal, the flat's nearest free stays of the same length, each a button that takes it (owner, 2026-10-11). */
.booking-box .booking-near{margin:10px 0 0}
.booking-box .booking-near-title{margin:0 0 8px;font-size:14px;font-weight:600;color:var(--ink)}
.booking-near-list{display:flex;flex-wrap:wrap;gap:8px}
.booking-near-btn{min-height:44px;padding:8px 14px;border:1px solid var(--green);border-radius:999px;background:#fff;color:var(--green-text);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.booking-near-btn:hover{background:var(--green-soft)}
/* What a link asked for and the box could not take: past dates, a group larger than the flat (owner, 2026-10-11). */
.booking-box .booking-note{margin:10px 0 0;padding:10px 12px;border:1px solid var(--warn-box-line);border-radius:12px;background:var(--warn-box-bg);font-size:14px;line-height:1.45;color:var(--ink)}
.booking-note a{color:var(--green-text);font-weight:600;text-decoration:underline}
/* Booked nights in the dates typed, said at once under the fields and beside the calendar (brief A2). */
.booking-box .booking-conflict,.cal-card .cal-conflict{padding:10px 12px;border:1px solid #f0ddb4;border-radius:10px;background:#fdf3e3;font-size:13.5px;line-height:1.45;color:#7a5212}
.booking-box .booking-conflict{margin:10px 0 0}
.booking-conflict:empty,.cal-conflict:empty{display:none}
.booking-conflict a{color:inherit;font-weight:600;text-decoration:underline}
.booking-aside .btn-primary{width:100%}
/* The answer takes the focus once shown (brief A1): a ring for the keyboard only. */
.booking-result:focus{outline:none}
.booking-result:focus-visible{outline:2px solid var(--green);outline-offset:4px;border-radius:14px}
/* While a check offers the request the card's own button turns secondary, at the same width. */
.booking-box>button[type=submit]{width:100%}
/* Under the request: the phone and an email, for a guest without WhatsApp (brief A3). */
.booking-box .booking-alt{margin:10px 0 0;text-align:center;font-size:13.5px;line-height:1.45;color:var(--muted)}
.booking-alt a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.booking-alt-tel{white-space:nowrap}
/* Under the request (under the check before one): nothing is paid now, and how a stay is paid (owner, 2026-10-10). */
.booking-box .booking-pay{margin:12px 0 0;font-size:14px;line-height:1.45;color:var(--ink)}
.booking-trust{list-style:none;display:grid;gap:8px;margin:14px 0 0;padding:0;font-size:14px;color:var(--ink)}
.booking-trust li{display:flex;align-items:center;gap:8px}
.booking-trust svg{flex:none;color:var(--green)}
/* "Gazda ta" (brief C1, HostCard): the host's photo, round, then the first name and the line, in a pill of the
   chips' colour, no shadow. */
.booking-host{display:flex;align-items:center;gap:12px;margin:14px 0 0;padding:6px 18px 6px 6px;border-radius:999px;background:var(--soft)}
.booking-host picture{flex:none}
.booking-host img{width:56px;height:56px;border-radius:50%;object-fit:cover}
.booking-box .booking-host p{margin:0;font-size:14px;line-height:1.4;color:var(--ink-2)}
.booking-host b{display:block;font-size:15px;color:var(--ink)}
/* A refusal in the card is a "not these dates", not a failure: amber, not red. */
.booking-aside .notice.error{background:#fff8ec;border:1px solid #f0dcb4;color:#5f4512}
/* The floating WhatsApp button steps aside while the card or the closing band is in view (brief A4, booking.js):
   faded out, then out of the tab order. */
.wa-float{transition:opacity .25s,visibility 0s}
.wa-float.is-tucked{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility 0s .25s}
/* Phones and small tablets: the photo first, then the title, then one column.
   The card stops following: the fixed .mobile-bar keeps the button in reach. */
@media(max-width:900px){.property-hero{display:flex;flex-direction:column}.property-hero-gallery{order:-1;margin-bottom:18px}.gallery-mosaic,.gallery-mosaic[data-count]{grid-template-columns:100%;grid-template-rows:100%;height:300px;border-radius:20px}.gallery-tile:not(.gallery-tile-main){display:none}.gallery-tile-main{grid-row:auto}.property-hero-body{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:22px}.booking-aside{position:static}.property-stats li{border:0;margin:0 18px 8px 0;padding:0}}

/* ---- v0.16: property page — "about the property", redesigned (Despre proprietate v2) ---- */
/* An intro beside a short facts card, the flat room by room, and the main
   amenities with the full list in a native <details>. Everything is prefixed
   .pa-. The icons come from src/View/Icons.php, which puts no class on
   them, so these rules select any svg inside the section. */
.pa svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.pa .section-title{letter-spacing:-.02em;margin:0 0 20px}
.pa-nowrap{white-space:nowrap}
/* Tab goes from the photo button, low in the left column, up to the map link at the
   top of the facts card; scrolled only to the viewport edge, it would sit under the
   sticky header. Same clearance as the page's own anchors. */
.pa a,.pa button,.pa summary,.pa-rooms{scroll-margin-top:90px}
.pa-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(28px,5vw,64px);align-items:start}
.pa-intro p:not(.eyebrow){font-size:1.08rem;line-height:1.7;margin:0 0 14px;max-width:62ch}
.pa-intro p:last-of-type{margin-bottom:0}
.pa-actions{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}
.pa-actions svg{width:18px;height:18px;color:var(--green)}
.pa-facts{margin:0;padding:6px 22px;background:var(--paper);border:1px solid var(--line);border-radius:20px}
.pa-fact{position:relative;padding:16px 0 16px 56px;border-bottom:1px solid var(--line)}
.pa-fact:last-child{border-bottom:0}
.pa-ico{position:absolute;left:0;top:16px;width:40px;height:40px;border-radius:12px;background:#fff;color:var(--green);display:grid;place-items:center;box-shadow:inset 0 0 0 1px var(--line)}
.pa-fact dt{font-size:.82rem;color:var(--muted);font-weight:400;line-height:1.3}
.pa-fact dd{margin:3px 0 0;font-weight:600;line-height:1.35}
.pa-sub{display:block;font-size:.84rem;font-weight:400;color:var(--muted);margin-top:3px}
.pa-sub a{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
/* The flat's own pin on its map (brief A6, map.js): the Arkadia mark in white on green, not a label. */
.hub-gpin.hub-gpin--brand{display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;background:var(--green);color:#fff}
.hub-gpin.hub-gpin--brand:hover,.hub-gpin.hub-gpin--brand.is-on{background:var(--green2);color:#fff}
.hub-gpin--brand svg{display:block}
.pa-block{margin-top:clamp(48px,7vw,72px)}
.pa-block-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px 16px;margin-bottom:18px;flex-wrap:wrap}
.pa-block h3{font-size:clamp(1.3rem,2vw,1.55rem);letter-spacing:-.02em;line-height:1.2;margin:0}
.pa-block-head p{margin:0;color:var(--muted);font-size:.95rem}
.pa-rooms{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
/* Full-bleed on phones, so a ring drawn outside it would be cut by the screen edge. */
.pa-rooms:focus-visible{outline-offset:-3px}
/* height:auto matters: img() writes the master's own width and height, and without
   it the height attribute would win over aspect-ratio and stretch the photo. */
.pa-room picture{display:block}
.pa-room img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:16px;background:#dfe7e3}
.pa-room-meta{display:flex;gap:10px;align-items:flex-start;margin-top:12px}
.pa-room-meta svg{color:var(--green);margin-top:1px}
.pa-room b{display:block;line-height:1.25}
.pa-room-bed{display:block;font-size:.9rem;color:var(--muted);margin-top:2px}
.pa-amen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:28px}
.pa-amen li{display:flex;gap:12px;align-items:center;padding:14px 0;font-weight:600;border-bottom:1px solid var(--line);line-height:1.35}
.pa-amen svg{color:var(--green)}
.pa-all{margin-top:24px}
.pa-all summary{box-sizing:border-box;list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;cursor:pointer}
.pa-all summary:hover{background:var(--paper)}
.pa-all summary::-webkit-details-marker{display:none}
.pa-all summary svg{width:18px;height:18px;transition:transform .2s}
.pa-all[open] summary svg{transform:rotate(180deg)}
.pa-less,.pa-all[open] .pa-more{display:none}
.pa-all[open] .pa-less{display:inline}
.pa-groups{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:20px;padding:24px;background:var(--paper);border-radius:20px}
.pa-groups h4{font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;color:var(--green);margin:0 0 12px;font-weight:600}
.pa-groups ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pa-groups li{display:flex;gap:8px;align-items:flex-start;font-size:.95rem;line-height:1.4}
.pa-groups li svg{width:16px;height:16px;color:var(--green);margin-top:3px}
/* Five groups or more, shown directly: columns rather than a grid, whose rows are
   each as tall as their tallest group and left half the panel empty for ten. The
   panel's gap becomes the column gap. */
.pa-groups-flow{display:block;columns:4}
.pa-groups-flow>div{break-inside:avoid}
.pa-groups-flow>div+div{margin-top:24px}
.pa-source{font-size:.84rem;color:var(--muted);margin:28px 0 0}
@media(max-width:980px){.pa-top{grid-template-columns:1fr}.pa-rooms{grid-template-columns:repeat(2,minmax(0,1fr))}.pa-amen{grid-template-columns:repeat(2,minmax(0,1fr))}.pa-groups{grid-template-columns:repeat(2,minmax(0,1fr))}.pa-groups-flow{columns:2}}
/* Phones: the rooms become a carousel that snaps, the next card showing at the edge. */
@media(max-width:680px){.pa-rooms{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:12px;gap:12px;margin:0 -12px;padding:0 12px 4px;scrollbar-width:none}.pa-rooms::-webkit-scrollbar{display:none}.pa-room{flex:0 0 74%;scroll-snap-align:start}.pa-amen{column-gap:16px}.pa-amen li{align-items:flex-start;gap:10px;font-size:.94rem;padding:12px 0}.pa-facts{padding:4px 16px}.pa-groups{padding:18px;gap:22px 16px}.pa-groups-flow>div+div{margin-top:22px}.pa-all summary,.pa-actions .btn{width:100%;justify-content:center}}
@media(max-width:420px){.pa-groups{grid-template-columns:1fr}.pa-groups-flow{columns:1}}
@media(prefers-reduced-motion:reduce){.pa-all summary svg{transition:none}}
/* The green set on an svg itself would survive forced colours; take the text colour of
   the user's palette instead, as the icons in the facts card already do. */
@media(forced-colors:active){.pa svg,.pa-groups li svg{color:inherit}}

/* ---- v0.16: property page — compare with the other apartments ---- */
/* The last section of a property page: the other flats
   as cards whose rows line up across a row, and once the visitor picks dates
   (site.js wireCompare) which of them are free and what the stay costs. */
/* -.055em suits the large hero titles; at 30-46px it is too tight. */
.compare-section .section-title{letter-spacing:-.02em}
.compare-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px 30px;margin-bottom:26px}
/* Where the button no longer fits beside the text (about 681-890px) it moves under
   it, rather than squeezing its label onto two or three lines. */
.compare-head .btn{flex:none}
.compare-sub{margin:12px 0 0;max-width:560px;color:var(--muted);line-height:1.55}
/* The line about the chosen dates: only once the visitor has picked some. */
.compare-context{display:flex;align-items:flex-start;gap:10px;margin:0 0 18px;font-size:.92rem;line-height:1.5;color:var(--ink)}
.compare-context[hidden]{display:none}
.compare-context svg{width:18px;height:18px;flex:none;margin-top:2px;color:var(--green)}
.compare-context a{margin-left:4px;white-space:nowrap;color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.compare-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.compare-grid>li{display:flex;min-width:0}
/* The whole card is the link, through .compare-link::after. Only the photo clips:
   a card that clipped would cut the focus ring drawn around it. */
.compare-card{position:relative;display:flex;flex-direction:column;width:100%;background:#fff;border:1px solid var(--line);border-radius:18px;transition:transform .2s ease,box-shadow .2s ease}
.compare-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.compare-photo{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:17px 17px 0 0;background:var(--soft)}
/* The height comes from the box's aspect ratio, not from the img's height attribute. */
.compare-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease,filter .2s ease,opacity .2s ease}
.compare-card:hover .compare-photo img{transform:scale(1.04)}
.compare-badge,.compare-photo .status{position:absolute;top:12px;box-shadow:0 2px 10px rgba(16,33,49,.14)}
.compare-badge{left:12px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--ink);font-size:.74rem;font-weight:600}
.compare-photo .status{right:12px}
.compare-photo .status[hidden]{display:none}
/* .status.available and .status.needs_confirmation come from the availability page. */
.status.unavailable{background:#eef1f2;color:#4b5a67}
.compare-body{flex:1;display:flex;flex-direction:column;gap:10px;padding:16px}
.compare-title{margin:0;font-size:1.08rem;line-height:1.25;font-weight:600;letter-spacing:-.01em}
.compare-link{color:inherit;text-decoration:none}
.compare-link::after{content:"";position:absolute;inset:0;z-index:2;border-radius:18px}
.compare-link:focus-visible{outline:none}
.compare-link:focus-visible::after{outline:3px solid var(--green);outline-offset:2px}
.compare-card:hover .compare-link{color:var(--green)}
.compare-rating{display:flex;align-items:center;gap:5px;margin:-4px 0 0;font-size:.84rem;font-weight:600}
.compare-rating svg{width:14px;height:14px;flex:none;color:#d99a00}
.compare-count{color:var(--muted);font-weight:600}
/* The same rows in the same order on every card: the eye compares across a row. */
.compare-facts{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:7px;font-size:.86rem;line-height:1.35}
.compare-facts li{display:flex;align-items:flex-start;gap:8px}
/* No word left alone on a last line. */
.compare-facts span,.compare-sub{text-wrap:pretty}
.compare-facts svg{width:16px;height:16px;flex:none;margin-top:1px;color:var(--muted)}
.compare-facts .is-highlight svg{color:var(--green)}
/* margin-top:auto puts the price on one line across every card of a row. */
.compare-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.compare-price{margin:0;font-size:.84rem;color:var(--muted)}
.compare-price b{color:var(--ink);font-size:1.05rem;font-weight:600}
.compare-go{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--soft);color:var(--green);transition:background .2s,color .2s,transform .2s}
.compare-go svg{width:18px;height:18px}
.compare-card:hover .compare-go{background:var(--green);color:#fff;transform:translateX(2px)}
/* Booked, or too small for the guests chosen. */
.compare-card.is-off .compare-photo img{filter:grayscale(.7);opacity:.72}
.compare-card.is-off .compare-price b{color:var(--muted)}
.compare-card.is-off .compare-go{color:var(--muted)}
@media(max-width:980px){.compare-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Phones: a carousel that snaps, the next card showing at the edge. The grid reaches
   into the wrap's 12px gutters and pads them back, which also leaves the focus ring
   room inside the scroll box. */
@media(max-width:680px){.compare-head{flex-direction:column;align-items:flex-start;gap:16px}.compare-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:12px;margin-inline:-12px;padding:6px 12px 16px;scrollbar-width:none}.compare-grid::-webkit-scrollbar{display:none}.compare-grid>li{scroll-snap-align:start}}
@media(prefers-reduced-motion:reduce){.compare-card,.compare-photo img,.compare-go{transition:none}.compare-card:hover,.compare-card:hover .compare-photo img,.compare-card:hover .compare-go{transform:none}}
/* A colour set on an svg itself survives forced colours; take the palette's text colour, as .pa does. */
@media(forced-colors:active){.compare-section svg{color:inherit}}

/* ---- v0.16: property page — frequently asked questions, redesigned ---- */
/* One section in place of "good to know" and the old FAQ (FaqBuilder):
   beside the questions, the facts too short to hide in an accordion and a way to
   ask the rest. On a screen wide and tall enough that column stays in view while
   the questions scroll; below 961px it comes apart, and the title and the facts go
   first, the questions next and the help card last. Everything is prefixed .faq2-,
   and the accordion is native <details>, with no script. */
.faq2 svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.faq2 .section-title{letter-spacing:-.02em;margin:6px 0 12px}
/* The "about" section above is white too: a hairline in the wrap instead of 192px of white. */
.pa+.faq2{padding-top:0}
.pa+.faq2>.faq2-grid{border-top:1px solid var(--line);padding-top:72px}
.faq2-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}
.faq2-aside{display:grid;gap:20px}
/* Sticky only where the whole column fits under the header, WhatsApp button
   included: measured on all ten pages (2026-09-26), it is at most 728px tall from
   1100px wide and 777px below that, where the help card's buttons wrap. So 108px
   above it, the column and a margin need 860px of height, and 910px below 1100px. */
@media(min-width:1100px) and (min-height:860px),(min-width:961px) and (min-height:910px){.faq2-aside{position:sticky;top:108px}}
.faq2-lead{color:var(--muted);margin:0;max-width:40ch}
.faq2-kicker{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600;line-height:1.4;margin:0 0 14px}
/* Jump targets and Tab stops clear the sticky header above and, below, the
   WhatsApp button (tablets) or the mobile bar (phones). */
.faq2 a,.faq2 summary,.faq2-list>details{scroll-margin:90px 0 96px}

/* "At a glance": what does not need an accordion. */
.faq2-facts{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:20px}
.faq2-facts ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}
.faq2-facts li{display:flex;gap:10px;align-items:center;line-height:1.25;min-width:0}
.faq2-facts li.wide{grid-column:1/-1}
.faq2-facts small{display:block;color:var(--muted);font-size:.78rem}
.faq2-facts b{font-weight:600;font-size:.95rem}
.faq2-ic{flex:0 0 36px;height:36px;border-radius:10px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;color:var(--green)}
.faq2-ic.rule{color:var(--muted)}
.faq2-ic svg{width:18px;height:18px}

/* The help card. */
.faq2-help{border-radius:20px;background:var(--navy);color:#fff;padding:22px}
.faq2-help h3{margin:0 0 4px;font-size:1.1rem;line-height:1.3}
.faq2-help p{margin:0 0 16px;color:#cbd9df}
.faq2-btns{display:flex;gap:10px;flex-wrap:wrap}
.faq2-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1px solid transparent;border-radius:999px;font-weight:600;text-decoration:none;transition:background .15s}
.faq2-btn svg{width:18px;height:18px}
.faq2-btn.wa{background:var(--green);color:#fff}
.faq2-btn.wa:hover{background:var(--green2)}
.faq2-btn.tel{color:#fff;border-color:rgba(255,255,255,.28)}
.faq2-btn.tel:hover{background:rgba(255,255,255,.08)}
.faq2-help .faq2-airbnb{margin:14px 0 0;font-size:.86rem}
.faq2-airbnb a{color:#cbd9df;text-decoration:underline;text-underline-offset:3px}

/* The questions, one card per group. */
.faq2-group+.faq2-group{margin-top:32px}
.faq2-group>.faq2-kicker{margin-bottom:10px}
.faq2-list{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.faq2-list details+details{border-top:1px solid var(--line)}
.faq2-list summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 18px 14px 22px;font-weight:600;font-size:1.02rem;line-height:1.35;cursor:pointer;transition:background .15s,color .15s}
.faq2-list summary::-webkit-details-marker{display:none}
.faq2-list summary:hover{background:var(--paper)}
/* Inside the card, where the card's clipping would cut a ring drawn outside; the
   corner rows take the card's curve so the ring is not cut at the corners either. */
.faq2-list summary:focus-visible{outline-offset:-3px}
.faq2-list>details:first-child>summary{border-top-left-radius:19px;border-top-right-radius:19px}
.faq2-list>details:last-child:not([open])>summary{border-bottom-left-radius:19px;border-bottom-right-radius:19px}
.faq2-list details[open]>summary{color:var(--green2)}
.faq2-chev{flex:0 0 32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);transition:transform .25s,background .2s,color .2s,border-color .2s}
.faq2-chev svg{width:16px;height:16px;stroke-width:2.4}
.faq2-list details[open] .faq2-chev{transform:rotate(180deg);background:var(--green);border-color:var(--green);color:#fff}
/* The answer is 4px lower than the reference so a link on its first line keeps its focus ring.
   The 66ch includes the padding, as in the reference: about 58 characters of text per line. */
.faq2-a{padding:4px 70px 20px 22px;color:var(--muted);max-width:66ch}
.faq2-a p{margin:0}
/* A short answer's second paragraph: the link to the whole answer on the collection page. */
.faq2-a p+p{margin-top:10px}
.faq2-a b{color:var(--ink);font-weight:600}
/* The site sets links without an underline; here colour alone would not tell one from a bold figure. */
.faq2-a a,.faq2-more a{color:var(--green2);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.faq2-a ol{margin:0;padding:0;list-style:none;counter-reset:s;display:grid;gap:10px}
.faq2-a ol li{counter-increment:s;display:flex;gap:12px;align-items:baseline}
.faq2-a ol li::before{content:counter(s);flex:0 0 24px;height:24px;border-radius:50%;background:var(--soft);color:var(--green2);font-weight:600;font-size:.8rem;display:grid;place-items:center;transform:translateY(-1px)}
.faq2-more{margin:20px 0 0;color:var(--muted);font-size:.95rem}

/* Opening animation, where the browser can animate to a height of auto. Elsewhere,
   and with reduced motion, the answer simply appears. ::details-content stays out
   of any selector list: a browser that does not know it would drop the whole rule. */
@supports (interpolate-size:allow-keywords){@media(prefers-reduced-motion:no-preference){
.faq2-list{interpolate-size:allow-keywords}
.faq2-list details::details-content{block-size:0;overflow:clip;transition:block-size .28s ease,content-visibility .28s allow-discrete}
.faq2-list details[open]::details-content{block-size:auto}}}

@media(max-width:960px){.faq2-grid{grid-template-columns:minmax(0,1fr);gap:28px}.faq2-aside{display:contents}.faq2-head{order:1}.faq2-facts{order:2}.faq2-main{order:3}.faq2-help{order:4}.faq2-a{padding-right:22px}}
@media(max-width:680px){.pa+.faq2>.faq2-grid{padding-top:68px}}
@media(max-width:420px){.faq2-facts ul{grid-template-columns:1fr}}
@media(forced-colors:active){.faq2-list details[open] .faq2-chev{border:2px solid CanvasText}}

/* ---- v0.17: prices in tabular figures ---- */
.booking-price b,.booking-estimate,.booking-total,.compare-price{font-variant-numeric:tabular-nums}

/* ---- The phones' bar with the rate (owner, 2026-10-11) ---- */
/* pages/property/bar.php: the nightly rate over the tax, or the answer's total over
   "Schimbă datele" (one grid cell, the other hidden, so the button never moves);
   one green button; WhatsApp as a round icon. 65px: 1 + 9 + 46 + 9. The root's
   scroll padding keeps what is brought into view (the request and the payment
   line, a focused control) clear of the bar at its real height (site.js --bar-h);
   the questions keep their 96px. */
@media(max-width:680px){
html{scroll-padding-bottom:calc(var(--bar-h) + 12px)}
.faq2 a,.faq2 summary,.faq2-list>details{scroll-margin-bottom:19px}
.mobile-bar.price-bar{grid-template-columns:minmax(0,max-content) minmax(min-content,1fr) 46px;align-items:center;padding-bottom:calc(9px + env(safe-area-inset-bottom,0px))}
.mobile-bar.no-price{grid-template-columns:minmax(min-content,1fr) 46px}
.pb-price{position:relative;display:grid;margin:0;min-width:0;line-height:1.2;color:var(--ink);text-align:left}
.pb-price>span{grid-area:1/1;display:flex;flex-direction:column;justify-content:center;min-width:0}
.pb-price>.is-off{visibility:hidden}
.pb-l1 b{font-size:17px;font-weight:700;letter-spacing:-.01em}
.pb-l1 small,.pb-l2{font-size:13px;color:var(--ink-2)}
a.pb-l2{color:var(--green-text);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* "Schimbă datele" answers a tap anywhere on the total's cell. */
a.pb-l2::after{content:"";position:absolute;inset:-9px -4px -9px -10px}
.mobile-bar.price-bar .btn{font-size:14px;line-height:1.2;padding:0 10px;text-align:center}
.pb-wa{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff}
.pb-wa svg{width:24px;height:24px}
.hero-price{display:none}
}
@media(max-width:340px){.pb-l2{font-size:12px}}
/* Computers: the rate on a line of its own under the chips (brief B4), "458 lei" read at once, the tax in
   the second voice. */
.hero-price{flex-basis:100%;margin-top:4px;font-size:13.5px;color:#607181}
.hero-price b{font-size:21px;font-weight:700;color:#102131;letter-spacing:-.01em}

/* ---- The new booking card (booking.new_card; spec §5-§6, docs/prototip-card-rezervare-arkadia.html) ---- */
/* pages/property/booking-card.php: the prototype's card in the site's tokens, under .booking-card so the old
   card's rules above stay its own. Its paragraphs set their own size and colour: .property-hero p would grey
   them at 1.03rem. Under 650px tall before any check on a computer (spec §5). */
.booking-aside .booking-card{padding:20px 20px 16px;border-radius:18px;box-shadow:0 10px 30px rgba(16,33,49,.08)}
.booking-card{font-size:14px;line-height:1.45;color:var(--ink)}
.booking-card p{margin:0;font-size:inherit;color:inherit}
.booking-card .bc-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.booking-card .bc-price{color:var(--muted);font-size:14px}
.booking-card .bc-price b{font-size:28px;font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.booking-card .bc-peak{margin:4px 0 2px;font-size:13px;line-height:1.4;color:var(--muted);white-space:pre-line}
.booking-card .bc-peak[hidden]{display:none}
.bc-rating{display:inline-flex;align-items:center;gap:4px;padding-bottom:1px;border-bottom:1px dashed #b9c4be;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap}
.bc-rating svg{color:#d99a00}
.bc-rating em{font-style:normal;font-weight:400;color:var(--muted)}
a.bc-rating:hover{color:var(--green)}
.bc-fields{position:relative;margin-top:12px}
/* The picker's field with JavaScript, the native date fields without it (spec §5, no-JS). */
.bc-date{display:none;width:100%;align-items:stretch;padding:0;overflow:hidden;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .15s}
.bc-date:hover{border-color:#b9c7c0}
.bc-half{flex:1;display:flex;flex-direction:column;gap:1px;padding:8px 14px}
.bc-lbl{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.bc-half strong{font-size:15px;font-weight:600;white-space:nowrap}
.bc-sep{width:1px;background:var(--line)}
.bc-date>svg{flex:none;align-self:center;margin-right:14px;color:var(--muted)}
.bc-native{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(scripting:enabled){.bc-date{display:flex}.bc-native{display:none}}
.bc-guests{position:relative;margin-top:8px}
.bc-guests label{position:absolute;top:7px;left:14px;font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);pointer-events:none}
.bc-guests select{width:100%;appearance:none;-webkit-appearance:none;padding:21px 40px 7px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.bc-guests::after{content:"";position:absolute;top:50%;right:16px;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);pointer-events:none}
.bc-date:focus-visible,.bc-guests select:focus-visible{outline:2px solid var(--green);outline-offset:1px;border-color:var(--green)}
/* The range picker: a popover under the field, one month (spec §6). */
.bc-cal{position:absolute;z-index:30;top:58px;left:0;right:0;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 18px 44px rgba(16,33,49,.16)}
.bc-cal[hidden]{display:none}
.bc-cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.bc-cal-head strong{font-size:14px}
.bc-cal-nav{width:32px;height:32px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font-size:16px;line-height:1;cursor:pointer}
.bc-cal-nav:disabled{opacity:.35;cursor:default}
.bc-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.bc-dow{padding:4px 0;font-size:10.5px;font-weight:700;text-transform:uppercase;color:var(--muted)}
.bc-day{position:relative;height:36px;border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.bc-day:hover:not([aria-disabled=true]){background:var(--green-soft)}
.bc-day[aria-disabled=true]{color:#a3afb8;cursor:default}
/* Booked as in the page's calendar (.cal-day.is-busy): a grey cell AND struck through, so it never
   reads as a past day, and never on colour alone. Today ringed; a chosen day loses both. */
.bc-day.is-occ{background:#eef1f0;color:#5b6b78;text-decoration:line-through}
.bc-day.is-today{box-shadow:inset 0 0 0 1px var(--muted)}
.bc-day.is-in{background:var(--green-soft)}
.bc-day.is-edge{background:var(--green);color:#fff;font-weight:700;text-decoration:none;box-shadow:none}
.bc-day:focus-visible{outline:2px solid var(--green);outline-offset:1px}
.bc-day.is-edge:focus-visible{outline-color:var(--ink)}
.booking-card .bc-cal-hint{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:var(--muted)}
/* The legend's swatch is the page calendar's booked one (.cal-legend .sw-busy), smaller. */
.bc-legend{display:inline-flex;flex:none;align-items:center;gap:6px}
.bc-legend[hidden]{display:none}
.bc-sw{width:16px;height:12px;flex:none;border:1px solid #e9e7e2;border-radius:3px;background:linear-gradient(transparent 4.25px,#9aa3ab 4.25px,#9aa3ab 5.75px,transparent 5.75px),#e9e7e2;transform:skewX(-16deg)}
/* Booked nights in the dates chosen and the nearest free stays (spec §7, conflict): the calendar's amber. */
.bc-warn{margin-top:12px;padding:12px 14px;border:1px solid #f0ddb4;border-radius:12px;background:#fdf3e3;font-size:13.5px;color:#7a5212}
.bc-warn[hidden]{display:none}
.bc-warn strong{display:block;font-weight:600}
.bc-chips-label{display:block;margin-top:8px;font-size:12.5px}
.bc-chips-label:empty,.bc-chips:empty{display:none}
.bc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.bc-chip{min-height:32px;padding:6px 12px;border:1px solid var(--green);border-radius:999px;background:#fff;color:#14532d;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;transition:background .15s}
.bc-chip:hover{background:var(--green-soft)}
/* The stay's price: nights, discount, tax, total, from the quote; faded while booked nights are in it. */
.bc-summary{margin-top:12px;transition:opacity .2s}
.bc-summary[hidden]{display:none}
.bc-summary.is-dim{opacity:.4}
.booking-card .bc-first{margin-bottom:2px;font-size:13px;font-weight:600;color:var(--green-text)}
.bc-rows{list-style:none;margin:0;padding:0}
.booking-card .bc-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:2px 0;font-size:14px;color:var(--muted)}
.bc-row>span:first-child{display:inline-flex;align-items:center;gap:6px}
.bc-amt{color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.bc-row.is-discount .bc-amt{color:var(--green-text)}
.booking-card .bc-total{margin-top:6px;padding-top:8px;border-top:1px solid var(--line);font-size:16px;font-weight:700;color:var(--ink)}
.bc-total .bc-amt{font-size:18px}
.booking-card .bc-direct{display:flex;align-items:center;gap:6px;margin-top:6px;font-size:13px;font-weight:600;color:#14532d}
.bc-direct>svg{flex:none;color:var(--green)}
.booking-card .bc-long{margin-top:8px;font-size:13px}
.bc-long a{color:var(--green-text);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* The ⓘ: a tap, a hover or the keyboard opens it (prototype, round 2); about 40px to touch. */
.bc-tip-wrap{position:relative;display:inline-flex}
.bc-info{position:relative;display:inline-grid;place-items:center;width:16px;height:16px;padding:0;border:1px solid #b9c4be;border-radius:999px;background:#fff;color:var(--muted);cursor:pointer}
.bc-info::before{content:"";position:absolute;inset:-12px;border-radius:999px}
.bc-info:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.bc-tip{display:none;position:absolute;z-index:40;right:-12px;bottom:calc(100% + 8px);width:230px;padding:9px 11px;border-radius:9px;background:var(--ink);color:#fff;font-size:12px;font-weight:400;line-height:1.45;text-align:left;white-space:normal}
.bc-tip-wrap:hover .bc-tip,.bc-info:focus-visible+.bc-tip,.bc-info[aria-expanded=true]+.bc-tip{display:block}
/* A price row's ⓘ opens over its label, from the label's left edge: from the ⓘ, a short label on a
   phone put the bubble off the screen. */
.bc-row>span:first-child{position:relative}
.bc-row .bc-tip-wrap{position:static}
.bc-row .bc-tip{left:0;right:auto}
/* The button, then the answer and the request (spec §7). */
.bc-cta{margin-top:12px}
.booking-card .bc-go{width:100%;min-height:48px;margin:0;font-size:16px}
.booking-card .bc-go[disabled]{opacity:.75;cursor:progress}
.bc-alt-dates{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.bc-alt-dates:hover{border-color:var(--green);color:#14532d}
.bc-spin{flex:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:999px;animation:bc-rot .7s linear infinite}
@keyframes bc-rot{to{transform:rotate(360deg)}}
.bc-ok,.bc-no{margin-bottom:12px;padding:12px 14px;border-radius:12px;font-size:13.5px}
.bc-ok{border:1px solid #cbe4d6;background:var(--green-soft);color:#14532d}
.bc-no{border:1px solid #f0ddb4;background:#fdf3e3;color:#7a5212}
.bc-ok strong,.bc-no strong{display:block;margin-bottom:2px;font-size:14px}
.bc-no a{color:inherit;font-weight:600;text-decoration:underline}
.booking-card .bc-alt{margin-top:10px;text-align:center;font-size:13px;color:var(--muted)}
.bc-alt a,.bc-linklike{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.bc-linklike{padding:0;border:0;background:none;font:inherit;cursor:pointer}
.bc-alt a:hover,.bc-linklike:hover{color:var(--green)}
.booking-card .bc-privacy{margin-top:8px;text-align:center;font-size:12px;color:var(--muted)}
.bc-privacy a{color:inherit;text-decoration:underline}
.booking-card .bc-micro{margin-top:8px;text-align:center;font-size:13px;color:var(--muted)}
.bc-micro strong{font-weight:600;color:var(--ink)}
.bc-micro[hidden]{display:none}
/* Trust, the host, how it works. */
.bc-trust{list-style:none;display:grid;gap:4px;margin:10px 0 0;padding:0;font-size:13.5px}
.bc-trust li{display:flex;align-items:center;gap:9px}
.bc-trust svg{flex:none;color:var(--green)}
.bc-host{display:flex;align-items:center;gap:12px;margin-top:8px;padding:6px 12px;border:1px solid var(--line);border-radius:12px;background:#fafbfa}
.bc-host picture{flex:none}
.bc-host img{width:38px;height:38px;border-radius:50%;object-fit:cover}
.bc-host b{display:block;font-size:13.5px}
.bc-host span{font-size:12.5px;color:var(--muted)}
.bc-how{margin-top:8px;padding-top:6px;border-top:1px solid var(--line)}
.bc-how summary{list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:32px;padding:4px 0;font-size:14px;font-weight:600;cursor:pointer}
.bc-how summary::-webkit-details-marker{display:none}
.bc-how summary::after{content:"";width:8px;height:8px;margin-right:4px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s}
.bc-how[open] summary::after{transform:rotate(-135deg)}
.bc-how summary:focus-visible{outline:2px solid var(--green);outline-offset:2px;border-radius:4px}
.bc-how ol{list-style:none;display:grid;gap:8px;margin:8px 0 0;padding:0}
.bc-how li{display:flex;gap:10px;font-size:13.5px;color:var(--muted)}
.bc-n{flex:none;display:flex;align-items:center;justify-content:center;width:20px;height:20px;margin-top:1px;border-radius:999px;background:var(--green-soft);color:#14532d;font-size:11px;font-weight:700}
.booking-card .bc-refund{display:flex;align-items:flex-start;gap:8px;margin-top:10px;font-size:13.5px;font-weight:600}
.bc-refund svg{flex:none;margin-top:2px;color:var(--green)}
.booking-card .bc-hours{margin-top:8px;font-size:12.5px;color:var(--muted)}
.bc-hours a{color:inherit;text-decoration:underline}
@media(prefers-reduced-motion:reduce){.bc-spin{animation:none}.bc-summary,.bc-how summary::after,.bc-date,.bc-chip{transition:none}}
@media(forced-colors:active){.bc-day.is-edge,.bc-day.is-in{forced-color-adjust:none;background:Highlight;color:HighlightText}.bc-day[aria-disabled=true]{color:GrayText}.bc-day.is-today{border:1px dashed CanvasText}.bc-sw{forced-color-adjust:none;border-color:CanvasText;background:linear-gradient(transparent 4.25px,GrayText 4.25px,GrayText 5.75px,transparent 5.75px),Canvas}}
/* What booking.js writes into the card: the picker's loading line, an answer to confirm on WhatsApp
   (needs_confirmation), the suggestions after a refusal. */
.booking-card .bc-cal-msg{grid-column:1/-1;padding:24px 0;text-align:center;font-size:13px;color:var(--muted)}
.bc-ok.is-confirm{border-color:#f1dcb2;background:#fff3d8;color:#775313}
.bc-near{margin-top:4px}
.bc-near[hidden]{display:none}
.booking-card .bc-near .bc-chips-label{margin:0;font-size:13px;font-weight:600;color:var(--ink)}
.bc-sheet-head{display:none}
/* The phones' bar with the new card (pages/property/bar-card.php): the rate, then the stay's total over its
   dates and guests; "Rezervă"; WhatsApp; a call, white and outlined so "Rezervă" stays the first action. */
@media(max-width:680px){
.mobile-bar.bc-bar{grid-template-columns:minmax(0,1fr) auto 46px 46px;align-items:center;padding-bottom:calc(9px + env(safe-area-inset-bottom,0px))}
.mobile-bar.bc-bar.no-price{grid-template-columns:minmax(0,1fr) 46px 46px}
.pb-call{display:grid;place-items:center;width:46px;height:46px;border:1px solid #b9c4be;border-radius:50%;background:#fff;color:var(--green)}
.pb-call svg{width:22px;height:22px}
.bcb-info{display:grid;margin:0;min-width:0;line-height:1.2;color:var(--ink);text-align:left}
.bcb-rate,.bcb-stay{display:flex;flex-direction:column;justify-content:center;min-width:0}
.bcb-rate[hidden],.bcb-stay[hidden]{display:none}
.bcb-l1{font-size:17px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.bcb-l1 small,.bcb-l2{font-size:13px;font-weight:400;color:var(--ink-2)}
.bcb-l2{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.mobile-bar.bc-bar .bcb-open{min-height:46px;padding:0 22px;font-size:15px}
}
/* Narrow phones: a narrower "Rezervă" leaves the total and the stay their room beside the two icons. */
@media(max-width:400px){.mobile-bar.bc-bar{column-gap:6px}.mobile-bar.bc-bar .bcb-open{padding:0 14px}}
/* On phones the new card is a sheet over the page, opened from the bar (spec §9): the same form, its column
   fixed to the bottom. Where scripts run only, so without them the card stays in the page; :target opens it
   for a link to #rezervare before booking.js takes over. */
@media(max-width:680px) and (scripting:enabled){
.booking-aside.bc-aside{position:fixed;z-index:70;left:0;right:0;bottom:0;max-height:91vh;max-height:91dvh;overflow:auto;overscroll-behavior:contain;padding:0 16px calc(16px + env(safe-area-inset-bottom,0px));border-radius:22px 22px 0 0;background:#fff;box-shadow:0 -16px 48px rgba(16,33,49,.3);transform:translateY(104%);visibility:hidden;transition:transform .3s cubic-bezier(.3,.8,.3,1),visibility 0s .3s}
.booking-aside.bc-aside.is-open,.booking-aside.bc-aside:target{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.3,.8,.3,1),visibility 0s}
.booking-aside.bc-aside:focus{outline:none}
.bc-aside .booking-card{padding:0 2px 10px;border:0;border-radius:0;box-shadow:none}
.bc-aside .bc-sheet-head{position:sticky;top:0;z-index:35;display:flex;justify-content:center;margin:0 -18px 6px;padding:10px;background:#fff}
.bc-handle{width:40px;height:4px;border-radius:99px;background:#d7deda}
.bc-sheet-close{position:absolute;top:4px;right:8px;width:40px;height:40px;border:0;border-radius:999px;background:#f0f3f1;color:var(--ink);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.bc-sheet-close:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.bc-backdrop{position:fixed;inset:0;z-index:65;background:rgba(16,33,49,.45);opacity:0;pointer-events:none;transition:opacity .25s}
.bc-backdrop.is-shown{opacity:1;pointer-events:auto}
html.bc-locked,html.bc-locked body{overflow:hidden}
}
@media(prefers-reduced-motion:reduce){.booking-aside.bc-aside,.bc-backdrop{transition:none}}