/* ========================================================================== ReserBoutique Booking · widget styles -------------------------------------------------------------------------- Everything is scoped under .rbw-* with its own CSS custom properties. No global selectors, no !important on host elements, no images. Theme tokens are set inline by rbw-widget.js from the resolved config; the values below are Heritage-preset fallbacks so the widget still looks right if JS theming fails for any reason. ========================================================================== */ .rbw-root { /* ── theme tokens (overridden inline by JS) ─────────────────────── */ --rbw-primary: #1e3a2f; --rbw-accent: #b08d57; --rbw-bg: #f7f4ef; --rbw-surface: #fffdf8; --rbw-heading: #141412; --rbw-text: #3a3a34; --rbw-muted: #6e6a60; --rbw-border: #d8d2c6; /* derived (JS computes from the hex tokens) */ --rbw-primary-hover: #152b23; --rbw-on-primary: #ffffff; --rbw-accent-soft: rgba(176, 141, 87, 0.14); --rbw-shadow: 0 1px 2px rgba(20, 20, 18, 0.05), 0 8px 24px rgba(20, 20, 18, 0.07); /* ── geometry tokens ────────────────────────────────────────────── */ --rbw-radius: 2px; --rbw-max-w: 1160px; --rbw-font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --rbw-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ── fixed semantic colors (never themed — clarity first) ───────── */ --rbw-ok: #3e7c4f; --rbw-warn: #b07d18; --rbw-err: #b3402a; box-sizing: border-box; max-width: var(--rbw-max-w); margin-left: auto; margin-right: auto; padding: 24px 16px 48px; font-family: var(--rbw-font-body); font-size: 15px; line-height: 1.55; color: var(--rbw-text); background: transparent; text-align: left; -webkit-font-smoothing: antialiased; isolation: isolate; position: relative; color-scheme: light; } .rbw-root *, .rbw-root *::before, .rbw-root *::after { box-sizing: border-box; } /* ── neutralize common host-theme leakage ─────────────────────────────── */ /* Base reset for bare structural elements inside the widget. :where() keeps this rule at ZERO specificity, so every .rbw-* component rule below always wins over it — and host-theme leakage is neutralized without our own rules ever fighting each other. */ :where(.rbw-root p, .rbw-root h1, .rbw-root h2, .rbw-root h3, .rbw-root h4, .rbw-root ul, .rbw-root ol) { margin: 0; padding: 0; } .rbw-root a { color: var(--rbw-primary); text-decoration: underline; text-underline-offset: 2px; } .rbw-root button, .rbw-root input, .rbw-root select, .rbw-root textarea { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; margin: 0; } .rbw-root img { max-width: 100%; display: block; } /* ── header ───────────────────────────────────────────────────────────── */ .rbw-header { padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--rbw-border); } .rbw-prop-name { margin: 0; font-family: var(--rbw-font-display); font-size: clamp(30px, 4.5vw, 42px); line-height: 1.12; font-weight: 600; letter-spacing: -0.01em; color: var(--rbw-heading); } .rbw-prop-tag { margin-top: 8px; color: var(--rbw-muted); font-size: 15px; } .rbw-notes { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 0; } .rbw-note-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--rbw-surface); border: 1px solid var(--rbw-border); border-radius: calc(var(--rbw-radius) + 2px); padding: 6px 11px; font-size: 12.5px; color: var(--rbw-muted); } .rbw-note-chip::before { content: "✓"; color: var(--rbw-ok); font-weight: 700; } /* ── layout grid ──────────────────────────────────────────────────────── */ .rbw-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; } @media (max-width: 979px) { .rbw-grid { grid-template-columns: 1fr; } } /* ── step cards ───────────────────────────────────────────────────────── */ .rbw-step { margin-bottom: 28px; scroll-margin-top: 16px; } .rbw-step-title { font-family: var(--rbw-font-display); font-size: 20px; font-weight: 600; color: var(--rbw-heading); display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; } .rbw-step-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--rbw-primary); color: var(--rbw-on-primary); font-family: var(--rbw-font-body); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; transform: translateY(2px); } .rbw-step.is-done .rbw-step-num { background: var(--rbw-ok); } /* ── calendar ─────────────────────────────────────────────────────────── */ .rbw-cal-wrap { display: grid; gap: 18px; } @media (min-width: 720px) and (max-width: 979px) { .rbw-cal-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .rbw-cal { background: var(--rbw-surface); border: 1px solid var(--rbw-border); border-radius: calc(var(--rbw-radius) + 4px); padding: 16px; box-shadow: var(--rbw-shadow); } .rbw-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .rbw-cal-month { font-family: var(--rbw-font-display); font-size: 17px; font-weight: 600; color: var(--rbw-heading); } .rbw-cal-nav { display: flex; gap: 6px; } .rbw-cal-btn { width: 32px; height: 32px; border-radius: calc(var(--rbw-radius) + 2px); border: 1px solid var(--rbw-border); background: var(--rbw-surface); color: var(--rbw-text); cursor: pointer; font-size: 15px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: border-color .12s, color .12s; } .rbw-cal-btn:hover:not(:disabled) { border-color: var(--rbw-primary); color: var(--rbw-primary); } .rbw-cal-btn:disabled { opacity: .35; cursor: default; } .rbw-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .rbw-dow { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--rbw-muted); padding: 4px 0 8px; } .rbw-day { position: relative; min-height: 42px; border: 1px solid transparent; background: none; border-radius: calc(var(--rbw-radius) + 2px); cursor: pointer; font-size: 13.5px; color: var(--rbw-text); padding: 4px 6px; text-align: var(--rbw-date-align, left); transition: background .1s, border-color .1s; } .rbw-day:hover:not(:disabled) { background: var(--rbw-accent-soft); } .rbw-day:disabled { cursor: default; color: var(--rbw-muted); opacity: .55; } .rbw-day.is-out { visibility: hidden; pointer-events: none; } .rbw-day.is-full { color: var(--rbw-muted); opacity: .45; cursor: not-allowed; } .rbw-day.is-in-range { background: var(--rbw-accent-soft); border-color: transparent; } .rbw-day.is-edge { background: var(--rbw-primary); color: var(--rbw-on-primary); font-weight: 600; } .rbw-day.is-today:not(:disabled) { box-shadow: inset 0 -3px 0 var(--rbw-accent); font-weight: 600; color: var(--rbw-heading); } .rbw-day .rbw-rate { display: block; font-size: 10.5px; margin-top: 2px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 639px) { .rbw-day .rbw-rate { display: none; } } /* prices live in the summary on phones */ /* Full-width primary CTAs on phones (code row keeps its input+button layout). */ @media (max-width: 639px) { .rbw-mt16:not(.rbw-code-row) > .rbw-btn { width: 100%; } } .rbw-day.is-edge .rbw-rate { color: var(--rbw-on-primary); } .rbw-cal-foot { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--rbw-border); font-size: 13.5px; } .rbw-cal-foot b { color: var(--rbw-heading); font-weight: 600; } /* ── room cards ───────────────────────────────────────────────────────── */ .rbw-rooms { display: grid; gap: 12px; } @media (min-width: 720px) and (max-width: 979px) { .rbw-rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .rbw-room { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; align-items: center; background: var(--rbw-surface); border: 1.5px solid var(--rbw-border); border-radius: calc(var(--rbw-radius) + 4px); padding: 16px 18px; cursor: pointer; transition: border-color .12s, box-shadow .12s; text-align: left; width: 100%; } .rbw-room:hover { border-color: var(--rbw-accent); } .rbw-room.is-selected { border-color: var(--rbw-primary); box-shadow: 0 0 0 3px var(--rbw-accent-soft); } .rbw-room.is-full { opacity: .55; cursor: not-allowed; } .rbw-room-name { font-family: var(--rbw-font-display); font-size: 17.5px; font-weight: 600; color: var(--rbw-heading); } .rbw-room-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; font-size: 13px; color: var(--rbw-muted); } .rbw-room-price { text-align: right; justify-self: end; } .rbw-room-price b { display: block; font-family: var(--rbw-font-display); font-size: 19px; color: var(--rbw-heading); } .rbw-room-price span { font-size: 12px; color: var(--rbw-muted); } /* availability dots */ .rbw-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: baseline; } .rbw-dot-wrap { display: inline-flex; align-items: center; font-size: 12.5px; color: var(--rbw-muted); } .rbw-dot--ok { background: var(--rbw-ok); } .rbw-dot--low { background: var(--rbw-warn); } .rbw-dot--full { background: var(--rbw-err); } /* ── forms ────────────────────────────────────────────────────────────── */ .rbw-form-grid { display: grid; gap: 14px; } @media (min-width: 640px) { .rbw-form-grid.cols2 { grid-template-columns: 1fr 1fr; } } .rbw-field label { display: block; font-size: 13px; font-weight: 600; color: var(--rbw-heading); margin-bottom: 5px; } .rbw-input, .rbw-select, .rbw-textarea { width: 100%; padding: 10px 12px; background: var(--rbw-surface); border: 1.5px solid var(--rbw-border); border-radius: calc(var(--rbw-radius) + 2px); color: var(--rbw-text); font-size: 14.5px; transition: border-color .12s, box-shadow .12s; } .rbw-input:focus, .rbw-select:focus, .rbw-textarea:focus { outline: none; border-color: var(--rbw-primary); box-shadow: 0 0 0 3px var(--rbw-accent-soft); } .rbw-field.is-invalid .rbw-input, .rbw-field.is-invalid .rbw-select { border-color: var(--rbw-err); } .rbw-err-msg { display: none; margin-top: 5px; font-size: 12.5px; color: var(--rbw-err); } .rbw-field.is-invalid .rbw-err-msg { display: block; } /* guest stepper */ .rbw-stepper { display: inline-flex; align-items: center; gap: 0; border: 1.5px solid var(--rbw-border); border-radius: calc(var(--rbw-radius) + 2px); background: var(--rbw-surface); } .rbw-step-btn { width: 38px; height: 40px; border: none; background: none; cursor: pointer; font-size: 17px; color: var(--rbw-primary); display: inline-flex; align-items: center; justify-content: center; } .rbw-step-btn:hover:not(:disabled) { background: var(--rbw-accent-soft); } .rbw-step-btn:disabled { opacity: .35; cursor: default; } .rbw-stepper-val { min-width: 40px; text-align: center; font-weight: 600; color: var(--rbw-heading); } /* ── buttons ──────────────────────────────────────────────────────────── */ .rbw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: calc(var(--rbw-radius) + 2px); border: 1.5px solid var(--rbw-primary); background: var(--rbw-primary); color: var(--rbw-on-primary); font-size: 14.5px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background .12s, border-color .12s, opacity .12s; } .rbw-btn:hover:not(:disabled) { background: var(--rbw-primary-hover); } .rbw-btn:disabled { opacity: .5; cursor: not-allowed; } .rbw-btn--ghost { background: transparent; color: var(--rbw-primary); } .rbw-btn--ghost:hover:not(:disabled) { background: var(--rbw-accent-soft); } .rbw-btn--sm { padding: 8px 14px; font-size: 13.5px; } /* Placeholder CTA (no action available yet): reads as a hint, not a broken button */ .rbw-btn--hint { background: transparent; border: 1px dashed var(--rbw-border); color: var(--rbw-muted); font-weight: 400; opacity: 1; cursor: default; } .rbw-btn .rbw-spin { width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: rbw-rot .7s linear infinite; display: inline-block; } @keyframes rbw-rot { to { transform: rotate(360deg); } } /* ── verification panels ──────────────────────────────────────────────── */ .rbw-panel { background: var(--rbw-surface); border: 1px solid var(--rbw-border); border-radius: calc(var(--rbw-radius) + 4px); padding: 20px; box-shadow: var(--rbw-shadow); } .rbw-code-row { display: flex; gap: 10px; align-items: stretch; max-width: 380px; } .rbw-code-input { letter-spacing: .35em; font-size: 20px !important; text-align: center; width: 170px !important; padding-left: 8px !important; padding-right: 8px !important; } .rbw-timer { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 13.5px; color: var(--rbw-muted); } .rbw-timer b { font-variant-numeric: tabular-nums; color: var(--rbw-heading); } .rbw-demo-hint { margin-top: 14px; padding: 10px 13px; border-left: 3px solid var(--rbw-accent); background: var(--rbw-accent-soft); font-size: 12.5px; color: var(--rbw-text); border-radius: 0 calc(var(--rbw-radius) + 2px) calc(var(--rbw-radius) + 2px) 0; } .rbw-demo-hint code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 3px; font-size: 12px; } /* ── payment providers ────────────────────────────────────────────────── */ .rbw-providers { display: grid; gap: 10px; margin-bottom: 18px; } @media (min-width: 640px) { .rbw-providers { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .rbw-provider { display: flex; align-items: center; gap: 12px; padding: 13px 15px; cursor: pointer; background: var(--rbw-surface); border: 1.5px solid var(--rbw-border); border-radius: calc(var(--rbw-radius) + 4px); transition: border-color .12s, box-shadow .12s; } .rbw-provider input { accent-color: var(--rbw-primary); width: 16px; height: 16px; flex: none; } .rbw-provider.is-selected { border-color: var(--rbw-primary); box-shadow: 0 0 0 3px var(--rbw-accent-soft); } .rbw-provider-name { font-weight: 600; color: var(--rbw-heading); font-size: 14.5px; display: block; } .rbw-provider-desc { font-size: 12.5px; color: var(--rbw-muted); display: block; margin-top: 1px; } .rbw-card-form { display: grid; gap: 14px; padding: 18px; background: var(--rbw-bg); border: 1px solid var(--rbw-border); border-radius: calc(var(--rbw-radius) + 4px); margin-top: 6px; } .rbw-card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .rbw-brand-tag { font-size: 11px; font-weight: 700; letter-spacing: .05em; padding: 2px 8px; border-radius: 3px; background: var(--rbw-primary); color: var(--rbw-on-primary); margin-left: auto; } .rbw-bank-box { padding: 16px; background: var(--rbw-bg); border: 1px dashed var(--rbw-border); border-radius: calc(var(--rbw-radius) + 4px); font-size: 14px; line-height: 1.7; } .rbw-bank-box b { color: var(--rbw-heading); } /* ── summary panel ────────────────────────────────────────────────────── */ .rbw-summary { position: sticky; top: 20px; background: var(--rbw-surface); border: 1px solid var(--rbw-border); border-radius: calc(var(--rbw-radius) + 4px); padding: 20px; box-shadow: var(--rbw-shadow); } .rbw-summary h3 { font-family: var(--rbw-font-display); font-size: 17px; color: var(--rbw-heading); margin-bottom: 14px; font-weight: 600; } .rbw-sum-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13.5px; border-bottom: 1px dashed var(--rbw-border); } .rbw-sum-row span:first-child { color: var(--rbw-muted); } .rbw-sum-row b { color: var(--rbw-heading); font-weight: 600; text-align: right; } .rbw-sum-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; margin-bottom: 16px; } .rbw-sum-total span { color: var(--rbw-muted); font-size: 13.5px; } .rbw-sum-total b { font-family: var(--rbw-font-display); font-size: 26px; color: var(--rbw-heading); letter-spacing: -0.01em; } .rbw-summary .rbw-btn { width: 100%; } @media (max-width: 979px) { .rbw-summary { position: static; order: 2; margin-top: 8px; } } /* ── confirmation ─────────────────────────────────────────────────────── */ .rbw-confirm { text-align: center; padding: 40px 20px; background: var(--rbw-surface); border: 1px solid var(--rbw-border); border-radius: calc(var(--rbw-radius) + 6px); box-shadow: var(--rbw-shadow); } .rbw-confirm-badge { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--rbw-ok); color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; } .rbw-confirm h2 { font-family: var(--rbw-font-display); font-size: 28px; color: var(--rbw-heading); margin-bottom: 6px; } .rbw-confirm .rbw-ref { display: inline-block; margin: 14px 0; padding: 8px 18px; background: var(--rbw-accent-soft); border-radius: calc(var(--rbw-radius) + 2px); font-size: 15px; letter-spacing: .12em; color: var(--rbw-heading); font-weight: 600; } .rbw-confirm p { color: var(--rbw-muted); max-width: 420px; margin: 0 auto; } .rbw-confirm-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; } /* ── error / loading states ───────────────────────────────────────────── */ .rbw-error-card { text-align: center; padding: 48px 24px; background: var(--rbw-surface); border: 1px solid var(--rbw-border); border-radius: calc(var(--rbw-radius) + 6px); } .rbw-error-card h3 { font-family: var(--rbw-font-display); color: var(--rbw-heading); margin-bottom: 8px; font-size: 20px; } .rbw-error-card p { color: var(--rbw-muted); max-width: 420px; margin: 0 auto 18px; } .rbw-skeleton { position: relative; overflow: hidden; background: var(--rbw-bg); border-radius: calc(var(--rbw-radius) + 2px); min-height: 16px; } .rbw-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: rbw-shimmer 1.3s infinite; } @keyframes rbw-shimmer { to { transform: translateX(100%); } } /* ── toast ────────────────────────────────────────────────────────────── */ .rbw-toast-wrap { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 30; display: flex; flex-direction: column; gap: 8px; width: min(92%, 420px); pointer-events: none; } .rbw-toast { padding: 11px 16px; border-radius: calc(var(--rbw-radius) + 3px); font-size: 13.5px; color: #fff; background: var(--rbw-heading); box-shadow: var(--rbw-shadow); animation: rbw-rise .18s ease-out; } .rbw-toast--err { background: var(--rbw-err); } @keyframes rbw-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ── misc ─────────────────────────────────────────────────────────────── */ .rbw-muted { color: var(--rbw-muted); } .rbw-mt8 { margin-top: 8px; } .rbw-mt16 { margin-top: 16px; } .rbw-hidden { display: none !important; } .rbw-focusable:focus-visible, .rbw-btn:focus-visible, .rbw-day:focus-visible, .rbw-room:focus-visible, .rbw-provider:focus-visible { outline: 2px solid var(--rbw-accent); outline-offset: 2px; } /* ── hostile-host hardening ─────────────────────────────────────────────── */ /* Some host themes apply element-level resets with !important (e.g. `button, input { all:unset; background:#fff !important }`). The rules below re-assert the widget's own look for exactly those properties so the widget keeps its identity on aggressive templates. Everything stays scoped to .rbw-root — nothing leaks out of the widget. */ .rbw-root button, .rbw-root input, .rbw-root select, .rbw-root textarea { font-family: var(--rbw-font-body) !important; text-transform: none !important; letter-spacing: normal !important; } .rbw-root h1, .rbw-root h2, .rbw-root h3, .rbw-root h4 { font-family: var(--rbw-font-display) !important; color: var(--rbw-heading) !important; text-shadow: none !important; letter-spacing: normal !important; } .rbw-root p, .rbw-root li, .rbw-root span, .rbw-root b, .rbw-root strong { line-height: inherit !important; } /* primary CTA + generic buttons */ .rbw-root .rbw-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 12px 22px !important; background: var(--rbw-primary) !important; color: var(--rbw-on-primary) !important; border: 1.5px solid var(--rbw-primary) !important; font-size: 14.5px !important; font-weight: 600 !important; line-height: 1.2 !important; cursor: pointer !important; text-decoration: none !important; } .rbw-root .rbw-btn--ghost { background: transparent !important; color: var(--rbw-primary) !important; } .rbw-root .rbw-btn--hint { background: transparent !important; border: 1px dashed var(--rbw-border) !important; color: var(--rbw-muted) !important; font-weight: 400 !important; cursor: default !important; } /* calendar nav + guest stepper */ .rbw-root .rbw-cal-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 32px !important; height: 32px !important; padding: 0 !important; background: var(--rbw-surface) !important; color: var(--rbw-text) !important; border: 1px solid var(--rbw-border) !important; font-size: 15px !important; cursor: pointer !important; } .rbw-root .rbw-step-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 38px !important; height: 40px !important; padding: 0 !important; background: none !important; border: none !important; color: var(--rbw-primary) !important; font-size: 17px !important; cursor: pointer !important; } /* calendar day cells */ .rbw-root .rbw-day { display: block !important; min-height: 42px !important; padding: 4px 6px !important; background: none !important; color: var(--rbw-text) !important; border: 1px solid transparent !important; font-size: 13.5px !important; text-align: var(--rbw-date-align, left) !important; cursor: pointer !important; } .rbw-root .rbw-day.is-in-range { background: var(--rbw-accent-soft) !important; } .rbw-root .rbw-day.is-edge { background: var(--rbw-primary) !important; color: var(--rbw-on-primary) !important; font-weight: 600 !important; } /* room cards (rendered as