/* Casa Lily — booking flow screen 01: full-viewport photo, no image filter.
   This stylesheet only runs on the /rezervare/design/ non-production prototype. */
.booking-design-page{--bd-accent:#ad2433;--bd-paper:#fbf9f5;--bd-stroke:#dfd4c9;margin:0;padding:0!important;background:#1f3228}
.booking-design-page .site-header .nav-actions > a.btn{display:none!important}
.booking-design-page .site-header{position:sticky}
.booking-design-page main{min-height:calc(100vh - 77px)}
.bd-hero{
  background-color:#29382f;
  background-image:url("/assets/images/booking-apple-blossom.webp");
  background-position:center 47%;
  background-size:cover;
  background-repeat:no-repeat;
  min-height:calc(100vh - 77px);
  display:flex;
}
.bd-hero-inner{
  min-width:0;
  width:100%;
  max-width:1180px;
  min-height:calc(100vh - 77px);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:clamp(12px,1.7vh,18px);
  /* Match the second step: same 1180px container, inner padding and top offset. */
  padding:clamp(14px,2vw,26px) clamp(16px,3vw,32px) clamp(16px,3vw,32px);
}
.bd-intro{color:white;max-width:770px;margin:auto 0 0 auto;padding:0;background:none;text-align:right}
.bd-intro h1{font:400 clamp(2.6rem,5.5vw,4.65rem)/1.1 Georgia,"Times New Roman",serif;letter-spacing:-.03em;color:#fff;margin:0 0 10px;text-shadow:0 3px 15px rgba(0,0,0,.9),0 1px 3px #000}
.bd-lead{font-size:clamp(.95rem,1.4vw,1.12rem);line-height:1.5;max-width:650px;color:#fff;margin:0;text-shadow:0 2px 11px rgba(0,0,0,.96),0 1px 2px #000}
.bd-progress{min-width:0;background:none;border:0;margin:0;padding-top:8px;flex-shrink:0}
.bd-progress-inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:none}
.bd-stage{
  display:flex;align-items:center;justify-content:center;gap:12px;
  min-height:86px;min-width:0;padding:12px 17px;
  color:#433d36;background:rgba(251,249,245,.96);
  border:1px solid rgba(255,255,255,.92);
  border-bottom:3px solid transparent;
  text-decoration:none;
}
.bd-stage-current{background:#fff;border-bottom-color:var(--bd-accent)}
.bd-stage-current:hover{background:#fbf2e8}
.bd-stage-current:focus-visible{outline:3px solid #ad2433;outline-offset:-3px}
.bd-stage-future{color:#56504a;cursor:default}
.bd-stage-next{font:inherit;line-height:inherit;text-align:left;color:#433d36;cursor:pointer;appearance:none;-webkit-appearance:none}
.bd-stage-next:hover{background:#fff5f0;border-color:#dec8bd}
.bd-stage-next:focus-visible{outline:3px solid var(--bd-accent);outline-offset:-3px}
.bd-stage-next .bd-stage-text small{color:#8b2935;font-weight:700}
.bd-stage-index{font:400 1.55rem/1 Georgia,"Times New Roman",serif;color:#a64a45}
.bd-stage-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.bd-stage-text strong{font-size:.84rem;line-height:1.35}
.bd-stage-text small{font-size:.71rem;line-height:1.25;color:#716b63}
.bd-stage-text .bd-stage-period{font-size:.82rem;font-weight:750;color:#292d28}
.bd-stage-text .bd-stage-guests{font-size:.74rem;color:#514840}
.bd-booking{margin:0;padding:0;background:none;min-width:0}
.bd-booking-shell{margin:0;padding:0;border:0;background:none;box-shadow:none}
.bd-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bd-search{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.04fr) minmax(170px,.85fr);
  min-width:0;max-width:none;gap:8px;
  margin:0;padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  align-items:stretch;
}
.bd-field{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:13px 17px;border-right:1px solid var(--bd-stroke);background:var(--bd-paper)}
.bd-field label,.bd-field-label{font-size:.67rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:#68584b}
.bd-field input{width:100%;min-height:30px;border:0;background:transparent;color:#25221e;font-weight:650;font-size:.98rem;line-height:1.3;font-family:inherit;outline:none}
.bd-field input:focus-visible{outline:2px solid var(--bd-accent);outline-offset:2px}
.bd-guests{position:relative;min-width:0;background:var(--bd-paper);border-right:1px solid var(--bd-stroke)}
.bd-guests details{position:relative;height:100%}
.bd-guests summary{display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:100%;padding:13px 40px 13px 17px;position:relative;list-style:none;cursor:pointer}
.bd-guests summary::-webkit-details-marker{display:none}
.bd-guests summary:focus-visible{outline:3px solid var(--bd-accent);outline-offset:-3px}
.bd-guests-count{font-size:.98rem;font-weight:650;color:#25221e}
.bd-guests svg{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.bd-guests-panel{position:absolute;z-index:60;top:calc(100% + 7px);bottom:auto;right:0;width:min(340px,calc(100vw - 28px));max-height:min(340px,75dvh);overflow-y:auto;background:#fff;box-shadow:0 14px 40px rgba(0,0,0,.28);border:1px solid #dcd3c7;border-radius:4px;padding:15px}
.bd-counter{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 0;border-bottom:1px solid #eee7dd}
.bd-counter label{font-weight:650;color:#302b25}
.bd-counter-control{display:flex;align-items:center;gap:6px}
.bd-counter-control button{width:40px;height:40px;display:grid;place-items:center;background:#f6f1e9;color:#6a3434;border:1px solid #d5c8b8;border-radius:50%;cursor:pointer;font-size:1.25rem}
.bd-counter-control button:disabled{opacity:.36;cursor:not-allowed}
.bd-counter-control input{width:44px;text-align:center;border:0;background:#fff;color:#2a241f;font:700 1rem/1.3 Arial,sans-serif;appearance:textfield}
.bd-counter-control input::-webkit-inner-spin-button,.bd-counter-control input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.bd-counter-control input:focus-visible,.bd-counter-control button:focus-visible{outline:2px solid var(--bd-accent);outline-offset:2px}
.bd-guests-hint{color:#70665a;font-size:.76rem;line-height:1.5;margin:11px 0}
.bd-guests-done{background:#344839;color:white;border:0;min-height:41px;width:100%;font-weight:650;cursor:pointer}
.bd-submit{
  display:flex;align-items:center;justify-content:center;gap:10px;
  min-height:75px;min-width:0;padding:12px 16px;
  border:1px solid #98212f;border-radius:3px;
  background:var(--bd-accent);color:#fff;
  font:700 .9rem/1.4 Arial,sans-serif;
  cursor:pointer;box-shadow:0 8px 22px rgba(0,0,0,.17);
}
.bd-submit:hover{background:#8f1b29}
.bd-submit:focus-visible{outline:3px solid #fff;outline-offset:-5px}
.bd-submit span{font-size:1.3rem}
.bd-submit [data-i18n="continue"]{font-size:inherit}
.bd-form-message{margin:9px 0 0;background:rgba(255,250,242,.98);border-left:4px solid var(--bd-accent);padding:10px 13px;color:#352921;font-size:.85rem;line-height:1.5}
.bd-form-message[hidden]{display:none}
@supports(height:100dvh){
  .booking-design-page main,.bd-hero,.bd-hero-inner{min-height:calc(100dvh - 77px)}
}
/* Lift the large title slightly on desktop, without moving the date cards. */
@media(min-width:741px){
  .bd-intro{margin-bottom:clamp(26px,4.5vh,52px)}
}
@media(max-width:900px){
  .bd-hero-inner{gap:clamp(12px,2vh,18px)}
  .bd-search{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bd-guests{grid-column:auto}
  .bd-submit{min-height:66px}
  .bd-field:nth-child(2){border-right:0}
  .bd-field,.bd-guests{border-bottom:1px solid var(--bd-stroke)}
  .bd-stage{min-height:86px;padding:9px 12px}
}
@media(max-width:560px){
  .booking-design-page main,.bd-hero,.bd-hero-inner{min-height:calc(100vh - 69px)}
  .bd-hero{background-position:54% 50%}
  .bd-hero-inner{gap:clamp(9px,1.6vh,13px);padding-top:14px;padding-bottom:14px;justify-content:flex-start}
  .bd-intro h1{font-size:clamp(2.1rem,8.3vw,2.9rem);margin:0 0 6px}
  .bd-lead{font-size:.85rem;line-height:1.4}
  .bd-progress{padding-top:0}
  .bd-progress-inner{gap:5px}
  .bd-stage{min-height:94px;padding:8px 9px;flex-direction:row;justify-content:flex-start;gap:7px;text-align:left}
  .bd-stage-index{font-size:1.18rem}
  .bd-stage-text strong{font-size:.72rem}
  .bd-stage-text small{font-size:.64rem}
  .bd-stage-text .bd-stage-period{font-size:.66rem;overflow-wrap:anywhere}
  .bd-stage-text .bd-stage-guests{font-size:.65rem}
  .bd-field{padding:12px 10px}
  .bd-field input{font-size:.9rem}
  .bd-guests summary{padding:11px 33px 11px 10px;min-height:66px}
  .bd-guests svg{right:10px}
  .bd-guests-count{font-size:.9rem}
  .bd-submit{min-height:66px;padding:9px 10px;font-size:.8rem}
  @supports(height:100dvh){.booking-design-page main,.bd-hero,.bd-hero-inner{min-height:calc(100dvh - 69px)}}
}
@media(max-width:340px){
  .bd-intro h1{font-size:2rem}
  .bd-stage-text strong{font-size:.64rem}
  .bd-stage-text .bd-stage-period{font-size:.61rem}
  .bd-stage{gap:5px;padding:7px 6px}
  .bd-stage-index{font-size:1.08rem}
  .bd-search{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-height:620px) and (min-width:561px){
  .bd-hero-inner{padding-block:12px;gap:10px}
  .bd-intro h1{font-size:clamp(2rem,4.4vw,3rem)}
  .bd-stage{min-height:86px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Step navigation now stays immediately below the header.
   Date search and hero copy are centered in the remaining photo area. */


/* Interactive date-range picker. Entire card is a native button. */
.bd-field.bd-date{position:relative;gap:0;padding:0}
.bd-date-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:75px;padding:13px 17px;border:0;background:transparent;color:#25221e;font-weight:650;font-size:.98rem;line-height:1.3;font-family:inherit;cursor:pointer;text-align:left}
.bd-date-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-width:0}
.bd-date-copy .bd-field-label{font-size:.67rem;font-weight:750;line-height:1.4;letter-spacing:.07em;text-transform:uppercase;color:#68584b}
.bd-date-trigger span{min-width:0}
.bd-date-trigger svg{flex:0 0 20px;color:#403c35}
.bd-date-trigger:focus-visible{outline:3px solid #ad2433;outline-offset:2px}
.bd-booking-shell{position:relative}
.bd-calendar[hidden]{display:none!important}
.bd-calendar{position:absolute;z-index:100;top:calc(100% + 9px);bottom:auto;left:0;width:min(710px,100%);max-height:min(490px,calc(100dvh - 90px));overflow:auto;background:#fff;color:#302a26;border:1px solid #dfd5c8;border-radius:5px;box-shadow:0 16px 45px rgba(0,0,0,.32);padding:16px}
.bd-calendar-header{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bd-calendar-header strong{font-size:1rem}
.bd-calendar-actions{display:flex;align-items:center;gap:5px}
.bd-calendar-nav,.bd-calendar-close{display:grid;place-items:center;width:36px;height:36px;border:1px solid #ded6ca;background:#fff;color:#6a4139;border-radius:4px;cursor:pointer;font-size:1.6rem;line-height:1}
.bd-calendar-close{font-size:1.4rem}
.bd-calendar-nav,.bd-calendar-close{display:flex;align-items:center;justify-content:center;flex:0 0 36px;padding:0}
.bd-calendar-nav svg,.bd-calendar-close svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.bd-calendar-nav:disabled{opacity:.3;cursor:not-allowed}
.bd-calendar-nav:focus-visible,.bd-calendar-close:focus-visible,.bd-calendar-day:focus-visible,.bd-calendar-footer button:focus-visible{outline:3px solid #ad2433;outline-offset:2px}
.bd-calendar-months{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.bd-calendar-month{min-width:0}
.bd-calendar-month-name{text-align:center;font:400 1.05rem/1.4 Georgia,"Times New Roman",serif;margin:2px 0 8px;text-transform:capitalize}
.bd-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.bd-calendar-weekday{display:grid;place-items:center;font-size:.7rem;font-weight:700;color:#807569;min-height:25px}
.bd-calendar-empty{min-height:35px}
.bd-calendar-day{display:grid;place-items:center;min-height:35px;padding:0;border:0;background:#fff;border-radius:3px;color:#302a26;font-size:.84rem;cursor:pointer}
.bd-calendar-day:hover:not(:disabled){background:#f5e5d8}
.bd-calendar-day.is-today{box-shadow:inset 0 0 0 1px #b98677}
.bd-calendar-day.is-range{background:#f3e8dd;border-radius:0}
.bd-calendar-day.is-arrival,.bd-calendar-day.is-departure{background:#aa2333;color:#fff;font-weight:700}
.bd-calendar-day.is-past{color:#beb7b0;cursor:not-allowed}
.bd-calendar-footer{border-top:1px solid #eee5dc;margin-top:12px;padding-top:11px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.77rem;color:#65594c}
.bd-calendar-footer button{min-height:36px;padding:7px 17px;border:0;border-radius:3px;background:#344839;color:white;cursor:pointer;font-weight:700}
@media(max-width:900px){
 .bd-date-trigger{font-size:.9rem}
}
@media(max-width:620px){
 .bd-calendar{position:fixed;bottom:auto;top:50%;left:50%;transform:translate(-50%,-50%);width:min(410px,calc(100vw - 22px));max-height:calc(100dvh - 24px);padding:13px}
 .bd-calendar-months{grid-template-columns:1fr}
 .bd-calendar-month:nth-child(2){display:none}
 .bd-date-trigger{font-size:.9rem}
 .bd-calendar-day{min-height:40px}
 .bd-calendar-empty{min-height:40px}
}

/* Mobile guest picker: keep the panel entirely inside the viewport. */
@media(max-width:620px){
  .bd-guests-panel{
    position:fixed;
    z-index:200;
    top:50%;
    bottom:auto;
    left:50%;
    right:auto;
    transform:translate(-50%,-50%);
    width:min(390px,calc(100vw - 24px));
    max-height:calc(100dvh - 24px);
    overflow-y:auto;
    padding:16px;
  }
}

/* CASA-BOOKING-UX: separated cards; no dead clickable zones. */
.bd-search .bd-field,
.bd-search .bd-guests{border:1px solid var(--bd-stroke);border-radius:3px;box-shadow:0 8px 22px rgba(0,0,0,.14)}
.bd-date-trigger:hover{background:rgba(245,238,228,.55)}
.bd-date-trigger:focus-visible{outline:3px solid var(--bd-accent);outline-offset:-3px}
@media(max-width:900px){
  .bd-search{gap:6px}
  .bd-date-trigger{min-height:66px;padding:12px 12px}
}
@media(max-width:560px){
  .bd-search{gap:6px}
  .bd-date-trigger{min-height:66px;padding:11px 10px}
  .bd-date-copy .bd-field-label{font-size:.63rem}
}
