/* ============================================================ Villa Rhodea – Booking Bar v5.4.3 Responsive: desktop → tablet (≤980px) → mobile (≤600px) ============================================================ */ /* ── Reset scope ─────────────────────────────────────────── */ .vrb-bar, .vrb-bar *, .vrb-bar-guests-pop, .vrb-bar-guests-pop *, .vrb-bar-cal, .vrb-bar-cal * { box-sizing: border-box; -webkit-font-smoothing: antialiased; } /* ── Wrapper ─────────────────────────────────────────────── */ .vrb-bar { width: 100%; position: relative; } /* ── Card ────────────────────────────────────────────────── */ .vrb-bar-card { display: flex; flex-wrap: nowrap; /* single row on desktop */ align-items: stretch; width: 100%; background: rgba(255,255,255,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(0,0,0,.07); border-radius: 22px; box-shadow: 0 10px 40px rgba(0,0,0,.09); padding: 10px; gap: 0; } .vrb-bar-hero .vrb-bar-card { padding: 12px; } .vrb-bar-inline .vrb-bar-card { box-shadow:none; background:transparent; border:0; padding:0; } /* ── Separators ──────────────────────────────────────────── */ .vrb-bar-sep { flex: 0 0 1px; background: rgba(0,0,0,.08); margin: 10px 0; align-self: stretch; } /* ── Cells ───────────────────────────────────────────────── */ .vrb-bar-cell { flex: 1 1 0; padding: 10px 14px; display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; /* allow shrink */ } .vrb-bar-cell-dates { flex: 2 1 0; } .vrb-bar-cell-guests { flex: 1 1 0; } /* ── CTA cell ────────────────────────────────────────────── */ .vrb-bar-cta { flex: 0 0 auto; display: flex; align-items: center; padding: 6px; } /* ── Label ───────────────────────────────────────────────── */ .vrb-bar-lbl { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; opacity: .6; white-space: nowrap; } /* ── Date range input ────────────────────────────────────── */ .vrb-bar-range { width: 100%; border: 0; background: transparent; padding: 2px 0; font-size: 15px; font-weight: 600; line-height: 1.3; outline: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; caret-color: transparent; /* readonly, no caret */ } .vrb-bar-range::placeholder { font-weight: 400; opacity: .5; } /* ── Guests trigger button ───────────────────────────────── */ .vrb-bar-guests-btn { width: 100%; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: transparent !important; -webkit-appearance: none; appearance: none; padding: 2px 0; text-align: left; cursor: pointer; display: flex; gap: 8px; align-items: baseline; font-family: inherit; } .vrb-bar-guests-btn:focus-visible { outline: 2px solid rgba(0,0,0,.25) !important; border-radius: 6px; } .vrb-bar-guests-summary { font-size: 15px; font-weight: 700; } .vrb-bar-guests-sub { font-size: 12px; opacity: .55; } /* ── Submit button ───────────────────────────────────────── */ .vrb-bar-btn { white-space: nowrap; padding: 14px 22px; border-radius: 16px; border: 0; cursor: pointer; font-weight: 800; font-size: 15px; background: #111; color: #fff; transition: background .15s; } .vrb-bar-btn:hover { background: #333; } /* ── Error message ───────────────────────────────────────── */ /* Sits BELOW the card as a full-width block — not inside the flex row */ .vrb-bar-error { display: none; width: 100%; margin-top: 10px; padding: 9px 14px; font-size: 13px; font-weight: 600; color: #b00020; text-align: center; border-radius: 12px; background: rgba(176,0,32,.07); border: 1px solid rgba(176,0,32,.12); } /* ── Guests popover (lives in , positioned by JS) ───── */ .vrb-bar-guests-pop { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 18px; box-shadow: 0 18px 60px rgba(0,0,0,.18); padding: 16px; min-width: 280px; /* display & position managed entirely by JS */ } .vrb-bar-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid rgba(0,0,0,.06); } .vrb-bar-row:last-child { border-bottom: 0; } .vrb-bar-rowlbl { font-size: 14px; font-weight: 500; } .vrb-bar-stepper { display: flex; align-items: center; gap: 10px; } .vrb-bar-stepper input { width: 58px; text-align: center; padding: 9px 6px; border: 1px solid rgba(0,0,0,.13); border-radius: 12px; font-size: 14px; font-weight: 700; font-family: inherit; -moz-appearance: textfield; } .vrb-bar-stepper input::-webkit-inner-spin-button, .vrb-bar-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; } .vrb-step { width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(0,0,0,.13); background: #fff; cursor: pointer; font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center; font-family: inherit; transition: background .1s; } .vrb-step:hover { background: #f5f5f5; } .vrb-step:active { background: #eaeaea; } .vrb-bar-note { margin-top: 12px; font-size: 12px; opacity: .7; } /* ── Calendar popover (lives in , positioned by JS) ─── */ .vrb-bar-cal { background: #fff; border: 1px solid rgba(0,0,0,.10); border-radius: 18px; box-shadow: 0 18px 60px rgba(0,0,0,.16); padding: 14px; } .vrb-bar-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .vrb-bar-cal-title { display: flex; justify-content: space-around; gap: 16px; flex: 1; font-weight: 800; font-size: 15px; } .vrb-bar-cal-nav { cursor: pointer; border: 1px solid rgba(0,0,0,.12); border-radius: 12px; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: #fff; font-size: 22px; line-height: 1; flex-shrink: 0; } .vrb-bar-cal-nav:disabled { opacity: .3; cursor: not-allowed; } .vrb-bar-cal-grid { display: grid; gap: 14px; } .vrb-bar-cal-grid.two { grid-template-columns: 1fr 1fr; } .vrb-bar-cal-grid.one { grid-template-columns: 1fr; } .vrb-bar-cal-month { border: 1px solid rgba(0,0,0,.06); border-radius: 14px; overflow: hidden; } /* Table */ .vrb-bar-cal .vrb-table { width: 100%; border-collapse: collapse; table-layout: fixed; } .vrb-bar-cal .vrb-table thead th { background: #f5f5f5; padding: 8px 2px; font-size: 11px; font-weight: 800; text-align: center; color: #666; border-bottom: 1px solid #e0e0e0; } .vrb-bar-cal .vrb-day, .vrb-bar-cal .vrb-empty { height: 46px; border: 1px solid #f0f0f0; } .vrb-bar-cal .vrb-inner { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; } .vrb-bar-cal .vrb-inner span { font-weight: 700; font-size: 13px; } /* Day states */ .vrb-bar-cal .vrb-av { background: #d4edda; cursor: pointer; } .vrb-bar-cal .vrb-av:hover { background: #aad9b8; } .vrb-bar-cal .vrb-bk { background: #fcd5d5; cursor: not-allowed; opacity: .65; } .vrb-bar-cal .vrb-co { background: linear-gradient(to bottom right,#fcd5d5 50%,#d4edda 50%); cursor: pointer; } .vrb-bar-cal .vrb-co:hover { opacity: .9; } .vrb-bar-cal .vrb-past { background: #f5f5f5; color: #bbb; cursor: not-allowed; opacity: .7; } .vrb-bar-cal .vrb-empty { background: #fafafa; } /* Selection */ .vrb-bar-cal .vrb-sel-s, .vrb-bar-cal .vrb-sel-e { background: #111 !important; } .vrb-bar-cal .vrb-sel-s span, .vrb-bar-cal .vrb-sel-e span { color: #fff; } .vrb-bar-cal .vrb-in-range { background: rgba(17,17,17,.11) !important; } /* Footer */ .vrb-bar-cal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .vrb-bar-cal-close { border: 1px solid rgba(0,0,0,.12); background: #fff; border-radius: 12px; padding: 10px 16px; cursor: pointer; font-weight: 700; font-size: 13px; font-family: inherit; } .vrb-bar-cal-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: #555; } .vrb-dot { display:inline-block; width:11px; height:11px; border-radius:3px; border:1px solid rgba(0,0,0,.1); vertical-align: middle; margin-right: 3px; } .vrb-dot.vrb-av { background: #d4edda; } .vrb-dot.vrb-bk { background: #fcd5d5; } /* ══════════════════════════════════════════════════════════ RESPONSIVE — Tablet ≤ 860px Two cells side-by-side, guests full-width, CTA full-width ══════════════════════════════════════════════════════════ */ @media (max-width: 860px) { .vrb-bar-card { flex-wrap: wrap; padding: 12px; border-radius: 20px; } .vrb-bar-sep { display: none; } /* Dates left, Guests right on same row */ .vrb-bar-cell-dates { flex: 1 1 50%; min-width: 0; padding: 10px 12px; } .vrb-bar-cell-guests { flex: 1 1 40%; min-width: 0; padding: 10px 12px; } /* CTA full-width below */ .vrb-bar-cta { flex: 0 0 100%; padding: 4px 0 0; } .vrb-bar-btn { width: 100%; padding: 15px; font-size: 15px; border-radius: 14px; } .vrb-bar-error { margin-top: 8px; } } /* ══════════════════════════════════════════════════════════ RESPONSIVE — Mobile ≤ 520px All cells stacked, bigger tap targets ══════════════════════════════════════════════════════════ */ @media (max-width: 520px) { .vrb-bar-card { padding: 10px; border-radius: 18px; gap: 2px; } /* Stack everything */ .vrb-bar-cell-dates, .vrb-bar-cell-guests { flex: 0 0 100%; padding: 10px 12px; border-bottom: 1px solid rgba(0,0,0,.06); } .vrb-bar-cell-guests { border-bottom: 0; } .vrb-bar-range { font-size: 16px; /* prevent iOS zoom on focus */ } .vrb-bar-guests-summary { font-size: 16px; } .vrb-bar-cta { flex: 0 0 100%; padding: 4px 0 0; } .vrb-bar-btn { width:100%; padding:16px; font-size:16px; border-radius:14px; } /* Calendar: full-width sheet pinned to top */ .vrb-bar-cal { border-radius: 16px; padding: 10px 8px; } .vrb-bar-cal .vrb-day, .vrb-bar-cal .vrb-empty { height: 42px; } .vrb-bar-cal .vrb-inner span { font-size: 12px; } .vrb-bar-cal-title { font-size: 14px; } /* Guests popover: full-width on mobile */ .vrb-bar-guests-pop { border-radius: 16px; padding: 12px; } .vrb-step { width: 40px; height: 40px; } /* bigger tap target */ .vrb-bar-stepper input { width: 52px; } } /* ══════════════════════════════════════════════════════════ RESPONSIVE — Very small ≤ 380px (iPhone SE etc.) ══════════════════════════════════════════════════════════ */ @media (max-width: 380px) { .vrb-bar-card { border-radius: 16px; } .vrb-bar-cal .vrb-table thead th { font-size: 10px; padding: 6px 1px; } .vrb-bar-cal .vrb-day, .vrb-bar-cal .vrb-empty { height: 38px; } .vrb-bar-cal-nav { width: 34px; height: 34px; font-size: 18px; } }