﻿:root{
  --bg:#C4DFE6;--ink:#111827;--muted:#6b7280;--line:#e5e7eb;--brand:#66A5AD;--brand-ink:#fff;
  --shadow:0 6px 20px rgba(0,0,0,.08);--shadow-lg:0 10px 30px rgba(0,0,0,.12);
  --r:1rem;--pad:.75rem;--gap:.75rem;
}

.vb-sticky{position:sticky;top:0;z-index:40}
.vb-booking-wrap{width:100%;max-width:100%;position:relative;margin:0 auto}
.vb-bar{
  display:flex;gap:var(--gap);align-items:center;justify-content:space-between;flex-wrap:nowrap;
  width:100%;max-width:1140px;box-sizing:border-box;background:var(--bg);padding:var(--pad);border-radius:var(--r);
  border:1px solid var(--line);box-shadow:var(--shadow);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,"Noto Sans",sans-serif;
  position:relative;margin:0 auto;
}

.vb-brand-chip{display:none}

.vb-bar > *{margin:0 !important}
.vb-bar > * + *{margin-left:var(--gap) !important}
.vb-field{
  display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;border:1px solid var(--line);
  background:#fff;border-radius:.75rem;min-height:44px;cursor:pointer;flex:1 1 0;min-width:0;
}

/* Place the label and value side-by-side inside the booking bar fields */
.vb-bar .vb-field{flex-direction:row}
  .vb-icon-calendar,
  .vb-icon-users {
    flex-shrink: 0;
    margin-right: .5rem;
    color: var(--brand);
  }
.vb-bar .vb-field .vb-label{display:inline-block;margin-right:.6rem;font-size:.85rem;color:var(--muted);white-space:nowrap}
.vb-bar .vb-field .vb-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Date, Guests, CTA button proportions: 39%, 39%, 19% + gaps */
.vb-bar .vb-date-btn{flex:0 1 39%;min-width:0;overflow:hidden}
.vb-bar .vb-date-btn .vb-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vb-bar .vb-guests-btn{flex:0 1 39%;min-width:0}
.vb-bar .vb-cta{flex:0 1 19%;min-width:120px}
.vb-field:focus{outline:2px solid var(--brand);outline-offset:2px}
.vb-label{font-size:.8rem;color:var(--muted)}
.vb-value{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vb-caret{margin-left:auto;transition:transform .2s ease}
.vb-field[aria-expanded="true"] .vb-caret{transform:rotate(180deg)}

.vb-cta{
  flex:1 1 0;min-width:0;padding:.8rem 1.1rem;font-weight:800;border:0;border-radius:.8rem;
  background:var(--brand);color:var(--brand-ink);cursor:pointer;box-shadow:0 6px 16px rgba(26,115,232,.25);text-align:center;
  display:flex;align-items:center;justify-content:center;gap:.5rem;
}
.vb-cta .vb-icon-arrow{flex-shrink:0}
.vb-cta:hover{filter:brightness(1.05)}

.vb-pop{
  position:absolute;display:block;opacity:0;transform:translateY(6px) scale(.98);
  transition:opacity .18s ease, transform .18s ease;pointer-events:none;
  width:auto;max-width:90vw;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);z-index:50;
}
.vb-pop.vb-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.vb-pop-inner{padding:1rem}
.vb-pop-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem;gap:.5rem}
.vb-hint{font-size:.85rem;color:var(--muted)}
.vb-link{background:transparent;border:0;color:#1a73e8;cursor:pointer;padding:.4rem .6rem;border-radius:.5rem}
.vb-link:hover{background:rgba(26,115,232,.08)}
.vb-btn{background:#111827;color:#fff;border:0;padding:.6rem .9rem;border-radius:.6rem;font-weight:700;cursor:pointer}

.vb-row{display:flex;align-items:center;justify-content:space-between;margin:.5rem 0;gap:1rem}
.vb-row-label{font-weight:700}
.vb-stepper{display:flex;align-items:center;gap:.4rem}
.vb-step{width:34px;height:34px;border-radius:.5rem;border:1px solid var(--line);background:#fff;cursor:pointer}
.vb-step:active{transform:scale(.96)}
.vb-step:hover{background:#f3f4f6}
.vb-num{width:48px;text-align:center;border:1px solid var(--line);border-radius:.5rem;height:34px}

.vb-age-list{margin-top:.5rem;margin-bottom:.75rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.vb-age-list select{width:100%;padding:.5rem;border:1px solid var(--line);border-radius:.5rem;background:#fff}

.vb-cal{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:.12rem;padding:.5rem;align-items:start}
.vb-month{padding:.12rem;display:flex;flex-direction:column;align-items:stretch}
.vb-month-header{display:flex;align-items:center;justify-content:center;margin-bottom:.12rem;font-size:.92rem;font-weight:700}
.vb-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.15rem}
.vb-dow,.vb-day{text-align:center;border-radius:.4rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;box-sizing:border-box}
.vb-dow{font-size:.76rem;color:var(--muted);font-weight:600;margin-bottom:.06rem}
.vb-day{cursor:pointer;border:1px solid transparent;font-weight:500;line-height:32px;background:#eeeeee}
.vb-day:hover{background:#ddd}
.vb-day.disabled{color:#c4c7cf;cursor:not-allowed;background:#f9f9f9}
.vb-day.start,.vb-day.end{background:var(--brand);color:#fff;font-weight:700}
.vb-day.inrange{background:#B8D8DE;color:#111;font-weight:600}

.vb-cal-nav{position:absolute;top:1rem;z-index:2;display:flex;gap:.25rem}
.vb-cal-nav.btn-prev{left:1rem}
.vb-cal-nav.btn-next{right:1rem}
.vb-cal-nav button{background:#fff;border:1px solid var(--line);border-radius:.5rem;padding:.5rem .75rem;cursor:pointer;box-shadow:var(--shadow);font-size:1.2rem;line-height:1;min-width:36px;min-height:36px}
.vb-cal-nav button:hover{background:#f3f4f6}
.vb-cal-nav button:disabled{opacity:.5;cursor:not-allowed}

.vb-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.25);opacity:0;transition:opacity .2s ease;z-index:39}
.vb-backdrop.show{opacity:1}

@media (max-width:768px){
  .vb-bar{flex-direction:column;align-items:stretch;gap:.75rem}
  .vb-bar .vb-date-btn,.vb-bar .vb-guests-btn,.vb-bar .vb-cta{flex:1 1 auto;min-width:0}
  .vb-bar > * + *{margin-left:0 !important}
  .vb-pop{position:fixed;left:0;right:0;bottom:0;top:auto;max-width:100%;width:100%;border-radius:1rem 1rem 0 0;max-height:80vh;overflow-y:auto}
  .vb-brand-chip{width:100%}
  .vb-cal{grid-template-columns:1fr;padding:.75rem}
  .vb-month{margin-bottom:1rem}
  .vb-cal-nav.btn-prev{left:.75rem}
  .vb-cal-nav.btn-next{right:.75rem}
}

@media (max-width:1024px){
  /* allow date to shrink more on medium screens */
  .vb-bar .vb-date-btn{min-width:180px}
}

/* Error messages for fogadó form */
.vb-error-message {
  display: block;
  color: #dc2626;
  font-size: .875rem;
  margin-top: .25rem;
  min-height: 1.25rem;
  opacity: 0;
  transition: opacity .2s ease;
}

.vb-error-message.vb-error-visible {
  opacity: 1;
}

.vb-field-error {
  border-color: #dc2626 !important;
  background-color: #fef2f2 !important;
}

/* Styles for the fogadó (booking completion) form */
.vb-fogado-wrap{max-width:1100px;margin:2.25rem auto;padding:1rem;width:100%;box-sizing:border-box}
.vb-fogado-title{font-size:1.8rem;margin-bottom:1rem;font-weight:800}
.vb-fogado-intro{
  font-size:1rem;line-height:1.6;color:#334155;margin:1.5rem 0 2rem 0;
  padding:1rem 1.25rem;background:#e0f2fe;border-left:4px solid var(--brand);
  border-radius:8px;
}
.vb-fogado-grid{display:grid;grid-template-columns:360px 1fr;gap:1.5rem;align-items:start}
.vb-fogado-info{background:var(--brand);border:1px solid var(--brand);padding:1.5rem;border-radius:12px;box-shadow:var(--shadow);color:#fff;}
.vb-fogado-info h3{margin-top:0;margin-bottom:.8rem;font-size:1rem;color:#fff;font-weight:700}
.vb-fogado-info ul{margin:0;padding-left:1.2rem;color:#fff;line-height:1.5;font-size:.85rem}
.vb-fogado-info li{margin-bottom:.5rem}
.vb-fogado-info li:last-child{margin-bottom:0}
.vb-fogado-info strong{color:#fff;font-weight:700}

.vb-fogado-form-wrap{background:transparent}
.vb-fogado-form{background:var(--bg);border-radius:12px;border:1px solid var(--line);padding:1.25rem;box-shadow:var(--shadow)}
.vb-fogado-columns{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem}
.vb-fogado-field{display:flex;flex-direction:column;gap:.25rem}
.vb-field-full{grid-column:1 / -1}
#vb-child-ages-wrapper{display:contents}
.vb-fogado-field label{font-size:.85rem;color:var(--brand);font-weight:700}
.vb-fogado-field input[type="text"], .vb-fogado-field input[type="email"], .vb-fogado-field input[type="date"], .vb-fogado-field input[type="number"], .vb-fogado-field textarea, .vb-fogado-field select{
  width:100%;padding:.75rem;border:1px solid var(--brand);border-radius:10px;background:#fff;box-sizing:border-box;font-size:.95rem;color:var(--brand)
}
.vb-fogado-field textarea{min-height:110px}
.vb-checkbox-field{display:flex;flex-direction:row;align-items:center;gap:.5rem}
.vb-checkbox-field label{font-size:.9rem;display:flex;align-items:center;gap:.5rem;cursor:pointer}
.vb-checkbox-field input[type="checkbox"]{width:auto;margin:0}

/* Child age fields styling - make them wider to fill the row */
.vb-child-age-field-wrapper{display:flex;flex-direction:column;gap:.4rem}
.vb-age-input-group{display:flex;align-items:center;gap:.5rem;width:100%}
.vb-age-btn{width:38px;height:38px;border-radius:.5rem;border:1px solid var(--brand);background:#fff;cursor:pointer;color:var(--brand);font-weight:700;font-size:1.3rem;line-height:1;display:flex;align-items:center;justify-content:center;transition:all .15s ease;flex-shrink:0}
.vb-age-btn:hover{background:var(--brand);color:#fff}
.vb-age-btn:active{transform:scale(.94)}
.vb-child-age-input{flex:1;min-width:80px;text-align:center;border:1px solid var(--brand);border-radius:.5rem;height:38px;padding:.25rem;color:var(--brand);font-weight:600;font-size:.95rem}
.vb-age-unit{font-size:.85rem;color:var(--muted);font-weight:600;flex-shrink:0;margin-left:.25rem}

/* Keep room type and special requests always together */
#vb-child-ages-wrapper + .vb-fogado-field{grid-column:1}
#vb-child-ages-wrapper + .vb-fogado-field + .vb-fogado-field{grid-column:2}

.vb-fogado-actions{margin-top:1rem;display:flex;justify-content:flex-end}
.vb-fogado-submit{background:var(--brand);color:var(--brand-ink);padding:.8rem 1rem;border-radius:10px;border:0;font-weight:700;cursor:pointer}

/* responsive */
@media (max-width:900px){
  .vb-fogado-grid{grid-template-columns:1fr;gap:1rem}
  .vb-fogado-info{order:-1}
  .vb-fogado-form-wrap{order:1}
}
@media (max-width:700px){
  .vb-fogado-columns{grid-template-columns:1fr}
}
@media (max-width:600px){
  .vb-fogado-wrap{padding:0 !important;margin:0 auto !important;max-width:100% !important;width:100% !important;overflow-x:hidden;box-sizing:border-box !important}
  .vb-fogado-wrap .elementor-widget-container{padding:0 !important}
  .elementor-shortcode{padding:0 !important;margin:0 !important}
  .elementor-widget-container .elementor-shortcode{width:100% !important;max-width:100% !important}
  .vb-fogado-title{font-size:1.5rem;padding:0 1rem;margin-bottom:1rem}
  .vb-fogado-intro{font-size:.9rem;padding:.75rem 1rem;margin:0rem}
  .vb-fogado-info{padding:1rem;margin:1rem 0 !important}
  .vb-fogado-form{padding:1rem;margin:0rem 0 !important}
  .vb-fogado-grid{gap:.75rem;margin:0 !important;padding:0 !important}
  .vb-fogado-form-wrap{margin:0 !important}
  .vb-fogado-submit{width:100%;padding:1rem}
  .elementor-element:has(.vb-fogado-wrap) .elementor-widget-container{padding-left:0 !important;padding-right:0 !important}
  .elementor-column-wrap:has(.vb-fogado-wrap){padding-left:0 !important;padding-right:0 !important}
}

/* small helper for error/success blocks */
.vb-fogado-errors{border:1px solid #fee2e2;background:#fff1f2;padding:.75rem;border-radius:.5rem;margin-bottom:1rem;color:#b91c1c}
.vb-fogado-success{border:1px solid #d1fae5;background:#ecfdf5;padding:.75rem;border-radius:.5rem;margin-bottom:1rem;color:#065f46}

/* Thank you page styles */
.vb-thank-you-wrap{max-width:800px;margin:2.25rem auto;padding:1rem}
.vb-thank-you-container{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:2rem;box-shadow:var(--shadow)}
.vb-thank-you-header{text-align:center;margin-bottom:2rem}
.vb-thank-you-icon{margin:0 auto 1rem;color:var(--brand)}
.vb-thank-you-header h1{margin:.5rem 0;font-size:1.8rem;color:var(--brand)}
.vb-thank-you-greeting{font-size:1.1rem;color:var(--muted);margin:.5rem 0}
.vb-thank-you-content{text-align:left}
.vb-thank-you-section{margin:1.5rem 0;padding:1rem;background:#fff;border-radius:8px;border:1px solid var(--line)}
.vb-thank-you-section h3{margin-top:0;margin-bottom:.75rem;color:var(--brand);font-size:1.1rem}
.vb-alert{padding:1rem;border-radius:8px;margin:1.5rem 0}
.vb-alert-info{background:#e0f2fe;border:1px solid #7dd3fc;color:#0c4a6e}
.vb-alert-urgent{background:#fef3c7;border:1px solid #fbbf24;color:#78350f;text-align:center}
.vb-phone-link{color:#78350f;font-weight:700;text-decoration:none;border-bottom:2px solid #fbbf24}
.vb-phone-link:hover{color:#451a03}
.vb-summary-list{list-style:none;padding:0;margin:0}
.vb-summary-list li{padding:.5rem 0;border-bottom:1px solid var(--line)}
.vb-summary-list li:last-child{border-bottom:0}
.vb-thank-you-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1rem}
.vb-thank-you-btn{display:inline-block;padding:.8rem 1.2rem;border-radius:8px;text-decoration:none;text-align:center;font-weight:700;transition:all .2s}
.vb-btn-primary{background:var(--brand);color:#fff}
.vb-btn-primary:hover{filter:brightness(1.1)}
.vb-btn-secondary{background:#fff;color:var(--brand);border:2px solid var(--brand)}
.vb-btn-secondary:hover{background:var(--brand);color:#fff}

@media (max-width:600px){
  .vb-thank-you-container{padding:1.5rem}
  .vb-thank-you-buttons{grid-template-columns:1fr}
  .vb-thank-you-icon{width:48px;height:48px}
  .vb-thank-you-header h1{font-size:1.5rem}
  .vb-thank-you-greeting{font-size:1rem}
  .vb-thank-you-wrap{padding:.75rem;margin:1rem auto}
}
