/** * SVR Direct Booking widget. * * Every selector is `.svr-` prefixed and scoped under `.svr-booking`. This site has * already shipped two bugs where an unprefixed single-class selector (`.single-post`, * `.woocommerce`) collided with a class WordPress puts on and squeezed the * whole document, so nothing here is allowed to be a bare generic name. * * Colours read the Coastal theme's tokens where they exist and fall back to literals * so the widget still looks right if it is ever rendered outside that theme. */ .svr-booking { --svr-sand: var( --color-sand, #efe4d0 ); --svr-ink: var( --color-charcoal, #2f2c27 ); --svr-muted: var( --color-charcoal-soft, #524e45 ); --svr-line: rgba( 47, 44, 39, 0.14 ); --svr-sea: var( --color-teal, #1a7574 ); --svr-shut: rgba( 47, 44, 39, 0.28 ); max-width: 560px; margin-inline: auto; color: var( --svr-ink ); } .svr-booking__panel { background: #fff; border: 1px solid var( --svr-line ); border-radius: 14px; padding: clamp( 1.25rem, 4vw, 2rem ); box-shadow: 0 18px 44px rgba( 47, 44, 39, 0.09 ); } .svr-booking__head { text-align: center; margin-bottom: 1.5rem; } .svr-booking__eyebrow { display: block; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var( --svr-sea ); margin-bottom: 0.4rem; } .svr-booking__title { margin: 0 0 0.4rem; font-size: clamp( 1.35rem, 3vw, 1.7rem ); } .svr-booking__note { margin: 0; font-size: 0.9rem; color: var( --svr-muted ); } /* Calendar */ .svr-cal__bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; } .svr-cal__label { font-size: 1rem; } .svr-cal__nav { border: 1px solid var( --svr-line ); background: #fff; border-radius: 8px; width: 38px; height: 38px; cursor: pointer; font-size: 1rem; color: var( --svr-ink ); line-height: 1; } .svr-cal__nav:hover { background: var( --svr-sand ); } .svr-cal__grid { display: grid; grid-template-columns: repeat( 7, minmax( 0, 1fr ) ); gap: 4px; } .svr-cal__dow { text-align: center; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var( --svr-muted ); padding-bottom: 0.35rem; } .svr-cal__pad { min-height: 3.4rem; } .svr-cal__months { display: grid; grid-template-columns: repeat( var( --svr-month-cols, 1 ), minmax( 0, 1fr ) ); gap: 1.4rem; } .svr-cal__mname { text-align: center; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.5rem; color: var( --svr-ink ); } .svr-cal__day { /* Was a strict square, which is too narrow for a formatted price like MX$3,000 - the text overflowed into the next cell. Let the cell take the width the grid gives it and set a comfortable minimum height instead. */ min-height: 3.4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; border: 1px solid rgba( 31, 111, 120, 0.28 ); border-radius: 8px; /* Was pale sand on a cream card - almost invisible. A tinted brand teal reads clearly as "this night is for sale" against the white panel. */ background: rgba( 31, 111, 120, 0.10 ); color: var( --svr-ink ); cursor: pointer; padding: 0; font: inherit; line-height: 1; transition: background 0.12s ease, border-color 0.12s ease; } .svr-cal__day:hover:not( [disabled] ) { background: rgba( 31, 111, 120, 0.22 ); border-color: var( --svr-sea ); } .svr-cal__num { font-size: 0.9rem; font-weight: 600; } .svr-cal__price { font-size: 0.72rem; color: var( --svr-sea ); font-weight: 600; } /* Not for sale: booked, or in the past. Struck through, no rate shown. */ .svr-cal__day.is-shut { background: transparent; border-color: transparent; color: var( --svr-shut ); cursor: not-allowed; text-decoration: line-through; } .svr-cal__day.is-shut .svr-cal__price { display: none; } /* For sale, but not clickable with the check-in currently chosen. The rate stays visible - it is still a real price for that night - just muted. */ .svr-cal__day.is-dimmed { opacity: 0.45; cursor: not-allowed; } /* Deliberately no blanket [disabled] rule here: a dimmed day is disabled too, and a shared rule would strike it through and hide its price all over again. */ .svr-cal__day.is-between { background: rgba( 31, 111, 120, 0.16 ); border-radius: 0; } .svr-cal__day.is-start, .svr-cal__day.is-end { background: var( --svr-sea ); color: #fff; } .svr-cal__day.is-start .svr-cal__price, .svr-cal__day.is-end .svr-cal__price { color: rgba( 255, 255, 255, 0.8 ); } .svr-cal__legend { display: flex; align-items: center; gap: 0.4rem; justify-content: center; font-size: 0.76rem; color: var( --svr-muted ); margin: 0.9rem 0 0; } .svr-cal__key { display: inline-block; width: 13px; height: 13px; border-radius: 4px; margin-left: 0.6rem; } .svr-cal__key--open { background: rgba( 31, 111, 120, 0.10 ); border: 1px solid rgba( 31, 111, 120, 0.28 ); } .svr-cal__key--shut { background: transparent; border: 1px solid var( --svr-shut ); } /* Fields */ .svr-guests { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 0.85rem; margin-top: 1.4rem; } .svr-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.86rem; } .svr-field > span { color: var( --svr-muted ); letter-spacing: 0.02em; } .svr-field input { border: 1px solid var( --svr-line ); border-radius: 8px; padding: 0.6rem 0.7rem; font: inherit; color: var( --svr-ink ); background: #fff; width: 100%; } .svr-field input:focus-visible { outline: 2px solid var( --svr-sea ); outline-offset: 1px; } /* Summary */ .svr-summary { margin-top: 1.4rem; padding: 1rem 1.1rem; background: var( --svr-sand ); border-radius: 10px; font-size: 0.9rem; } .svr-summary__loading { margin: 0; color: var( --svr-muted ); } .svr-summary__dates { margin-bottom: 0.7rem; } .svr-summary__lines { margin: 0; } .svr-summary__line { display: flex; justify-content: space-between; gap: 1rem; padding: 0.2rem 0; } .svr-summary__line dt, .svr-summary__line dd { margin: 0; } .svr-summary__total { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var( --svr-line ); font-size: 1.02rem; } .svr-error { margin: 1rem 0 0; padding: 0.75rem 0.9rem; border-radius: 8px; background: #fdf0ed; border: 1px solid #e5b8ae; color: #8a3423; font-size: 0.88rem; } /* Guest form */ .svr-guestform { margin-top: 1.5rem; border-top: 1px solid var( --svr-line ); padding-top: 1.3rem; } .svr-guestform__title { margin: 0 0 0.9rem; font-size: 1.05rem; } .svr-guestform__row { display: grid; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 0.85rem; margin-bottom: 0.85rem; } .svr-guestform__fine { font-size: 0.79rem; color: var( --svr-muted ); margin: 0 0 1rem; } .svr-btn { display: block; width: 100%; border: 0; border-radius: 999px; background: var( --svr-sea ); color: #fff; padding: 0.85rem 1.4rem; font: inherit; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; } .svr-btn:hover:not( [disabled] ) { filter: brightness( 1.08 ); } .svr-btn[disabled] { opacity: 0.6; cursor: progress; } @media ( max-width: 480px ) { .svr-guestform__row { grid-template-columns: 1fr; } .svr-cal__price { display: none; } } /* Hand-off block: shown on the condo page instead of the guest form, so the property page stays about the property and the booking page owns checkout. */ .svr-handoff { margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid var( --svr-line ); text-align: center; } .svr-handoff .svr-btn { text-decoration: none; text-align: center; } .svr-handoff__fine { font-size: 0.79rem; color: var( --svr-muted ); margin: 0.7rem 0 0; } /* On the condo page the widget sits inside the page flow rather than owning it. */ .svr-booking--preview { max-width: 520px; } /* Indicative USD figure under the total. Deliberately quiet: the guest is charged in the property currency and their bank sets the real rate. */ .svr-summary__usd { margin: 0.6rem 0 0; font-size: 0.84rem; color: var( --svr-ink ); } .svr-summary__usd span { display: block; margin-top: 0.2rem; font-size: 0.74rem; color: var( --svr-muted ); line-height: 1.45; } /* Promo code row. Only ever in the DOM when a code is actually running - the field is rendered server-side behind an active-coupon check, not hidden with CSS. */ .svr-promo { display: flex; align-items: flex-end; gap: 0.6rem; margin-top: 1.1rem; } .svr-promo__field { flex: 1 1 auto; } .svr-promo__field input { text-transform: uppercase; letter-spacing: 0.06em; } .svr-promo__apply { flex: 0 0 auto; border: 1px solid var( --svr-sea ); background: #fff; color: var( --svr-sea ); border-radius: 8px; padding: 0.6rem 1.1rem; font: inherit; font-weight: 600; cursor: pointer; line-height: 1.2; } .svr-promo__apply:hover { background: var( --svr-sea ); color: #fff; } /* Two months side by side on the booking page. Stacks on narrow screens, where side-by-side would squeeze the square day cells to nothing. */ .svr-booking--full { max-width: 760px; } .svr-booking--full .svr-cal__months { --svr-month-cols: 2; } @media ( max-width: 720px ) { .svr-booking--full .svr-cal__months { --svr-month-cols: 1; } } /* Compact preview for the property page, where the calendar sits beside the copy rather than owning the section. */ .svr-booking--preview .svr-cal__day { border-radius: 6px; } .svr-booking--preview .svr-cal__num { font-size: 0.82rem; } .svr-booking--preview .svr-cal__price { font-size: 0.55rem; } .svr-booking--preview .svr-booking__panel { padding: 1.25rem; } .svr-booking--preview .svr-booking__title { font-size: 1.15rem; } .svr-booking--preview .svr-booking__note { font-size: 0.8rem; } .svr-field--note { justify-content: flex-end; } .svr-contact-note { margin: 0; font-size: 0.76rem; color: var( --svr-muted ); line-height: 1.45; } /* Single-month view already names the month in the nav bar, so the per-month caption would just repeat it. Two months need their own captions. */ .svr-booking--preview .svr-cal__mname { display: none; } /* Past dates are not booked dates. Quietly greyed, no strike-through, and kept out of the legend so the calendar never implies a fully reserved month. */ .svr-cal__day.is-past { background: transparent; border-color: transparent; color: rgba( 47, 44, 39, 0.22 ); cursor: default; } .svr-cal__day.is-past .svr-cal__price { display: none; } /* iOS zooms the viewport on focus for any input under 16px. The theme sets this too, but `.svr-field input { font: inherit }` here has equal specificity and loads later, so it has to be restated at this layer or it silently wins. */ @media ( max-width: 782px ) { .svr-booking .svr-field input, .svr-booking input[type="text"], .svr-booking input[type="email"], .svr-booking input[type="tel"], .svr-booking input[type="number"] { font-size: 16px; } } /* Month tag on the 1st, so a rolling window that spans months stays orientable. */ .svr-cal__mtag { /* Was 0.55rem, which is under 9px and effectively unreadable at a glance. This label is the only cue for where one month ends and the next begins in the rolling view, so it has to carry. */ font-size: 0.72rem; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.04em; color: var( --svr-sea ); font-weight: 800; margin-bottom: 2px; } /* The month tag is a calendar orientation cue, not an availability cue, so it must not be dimmed along with the day. Whether the 1st happens to be booked is arbitrary, and it was exactly the case that made the boundary hardest to see. */ .svr-cal__day.is-shut .svr-cal__mtag { color: var( --svr-sea ); opacity: 1; } .svr-cal__day.is-past .svr-cal__mtag { color: var( --svr-sea ); opacity: 0.75; } /* Prices must never wrap or spill into the neighbouring day. */ .svr-cal__price { white-space: nowrap; font-variant-numeric: tabular-nums; max-width: 100%; } .svr-cal__grid { gap: 5px; } /* The two-month booking page is the tightest case: 14 columns of formatted prices. */ .svr-booking--full { max-width: 980px; } /* superseded by the three-line cell height below */ .svr-booking--full .svr-cal__price { font-size: 0.66rem; } /* The rolling-week preview has only 7 columns, so it can breathe. */ .svr-booking--preview .svr-cal__day { min-height: 3.5rem; } .svr-booking--preview .svr-cal__price { font-size: 0.66rem; } @media ( max-width: 520px ) { .svr-cal__price { font-size: 0.58rem; } .svr-cal__day { min-height: 3rem; } } .svr-cal__currency { text-align: center; font-size: 0.72rem; color: var( --svr-muted ); margin: 0.35rem 0 0; } /* The cell is ~50px wide; the price has to live inside that without clipping. */ .svr-cal__price { font-size: 0.68rem; letter-spacing: -0.01em; } .svr-booking--full .svr-cal__price { font-size: 0.64rem; } .svr-booking--preview .svr-cal__price { font-size: 0.64rem; } /* ========================================================================== Three-line day cells: date / price / currency MXN sits in the box rather than in a footnote, so a US visitor reading "$3,000" cannot mistake it for dollars. ========================================================================== */ .svr-cal__day { min-height: 4.6rem; padding: 0.28rem 0.15rem; gap: 0; } .svr-cal__pad { min-height: 4.6rem; } .svr-cal__num { font-size: 0.95rem; line-height: 1.1; } .svr-cal__price { font-size: 0.7rem; line-height: 1.2; margin-top: 1px; } .svr-cal__cur { font-size: 0.55rem; line-height: 1.1; letter-spacing: 0.05em; font-weight: 700; color: var( --svr-sea ); opacity: 0.75; } .svr-cal__day.is-shut .svr-cal__cur, .svr-cal__day.is-past .svr-cal__cur { display: none; } /* Wider panels so three lines never squeeze the columns. */ .svr-booking--full { max-width: 1040px; } .svr-booking--full .svr-cal__price { font-size: 0.66rem; } .svr-booking--full .svr-cal__cur { font-size: 0.52rem; } .svr-booking--preview .svr-cal__day { min-height: 4.5rem; } .svr-booking--preview .svr-cal__price { font-size: 0.66rem; } .svr-booking--preview .svr-cal__cur { font-size: 0.52rem; } @media ( max-width: 520px ) { .svr-cal__day { min-height: 4.1rem; } .svr-cal__num { font-size: 0.85rem; } .svr-cal__price { font-size: 0.6rem; } .svr-cal__cur { font-size: 0.48rem; } } /* Keep both layouts on the same three-line cell height. */ .svr-booking--full .svr-cal__day { min-height: 4.6rem; } /* Segmented Cell / WhatsApp control. Real radio inputs so it is keyboard and screen-reader native; the visual button is the sibling span. */ .svr-segmented { border: 0; padding: 0; margin: 0; min-width: 0; /* .svr-field is a flex column and flex columns stretch their children, which made the pill span the whole grid cell. Hug the buttons instead. */ align-items: flex-start; } .svr-segmented legend { padding: 0; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var( --svr-ink-soft, #524e45 ); margin-bottom: 0.4rem; } .svr-segmented__options { display: inline-flex; border: 1px solid var( --svr-border, rgba(43,41,36,0.18) ); border-radius: 999px; padding: 3px; gap: 3px; background: #fff; } .svr-segmented__opt { margin: 0; cursor: pointer; } .svr-segmented__opt input { position: absolute; opacity: 0; width: 1px; height: 1px; } .svr-segmented__opt span { display: block; padding: 0.5em 1.25em; border-radius: 999px; font-size: 0.92rem; font-weight: 600; color: var( --svr-ink-soft, #524e45 ); white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .svr-segmented__opt input:checked + span { background: var( --svr-sea, #1a7574 ); color: #fff; } .svr-segmented__opt input:focus-visible + span { outline: 2px solid var( --svr-sea, #1a7574 ); outline-offset: 2px; } /* What happens after payment. Placed inside the form rather than on a confirmation screen: a verification request that arrives unannounced reads like a phishing text, and an unverified booking does not hold its dates. */ .svr-nextstep { background: var( --svr-sand ); border-radius: 10px; padding: 0.9rem 1.1rem; margin: 0 0 1.1rem; } .svr-nextstep strong { display: block; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; color: var( --svr-sea ); margin-bottom: 0.35rem; } .svr-nextstep p { margin: 0; font-size: 0.88rem; line-height: 1.6; color: var( --svr-ink ); } /* ========================================================================== Localbird experience cards Viator ships a closed JS widget that cannot be restyled, so these are built to match the site instead: same card language as the rest of the pages. ========================================================================== */