/* ==========================================================================
   Rajendra Eco Resort - customer booking UI (prefix rb-)
   Used by: /book-now, booking thanks page, payment pages, package details.
   Brand: green #006641 / deep green #124332 / gold #c5995a / dark gold #926633 / cream #fffbf6
   ========================================================================== */
.rb-root {
    --rb-green: #006641; --rb-deep: #124332; --rb-gold: #c5995a; --rb-gold-d: #926633; --rb-cream: #fffbf6;
    --rb-ink: #1b1e22; --rb-muted: #6a6f76; --rb-line: #eadfcd; --rb-soft: #f7f2ea;
    --rb-ok: #1a8a54; --rb-bad: #c0392b; --rb-warn: #b8731a;
    --rb-radius: 16px; --rb-shadow: 0 2px 6px rgba(18, 67, 50, .05), 0 10px 30px rgba(18, 67, 50, .07);
    font-family: 'Jost', sans-serif; color: var(--rb-ink); font-size: 16px; line-height: 1.55;
}
.rb-root *, .rb-root *::before, .rb-root *::after { box-sizing: border-box; }
.rb-root h1, .rb-root h2, .rb-root h3, .rb-root h4 { font-family: 'Inter Tight', 'Jost', sans-serif; color: var(--rb-ink); margin: 0; letter-spacing: -.01em; }
.rb-root a { text-decoration: none; }
.rb-root .rb-wrap { max-width: 1240px; margin: 0 auto; padding: 36px 20px 90px; }
.rb-root .rb-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; align-items: start; }

/* progress */
.rb-root .rb-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 26px; }
.rb-root .rb-stepbtn { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fff; border: 1.5px solid var(--rb-line); border-radius: 14px; color: var(--rb-muted); font-weight: 600; cursor: pointer; text-align: left; font: inherit; font-weight: 600; transition: all .15s; }
.rb-root .rb-stepbtn .n { flex: 0 0 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--rb-soft); color: var(--rb-gold-d); font-weight: 700; font-size: .9rem; }
.rb-root .rb-stepbtn.is-done { color: var(--rb-green); border-color: rgba(0, 102, 65, .35); }
.rb-root .rb-stepbtn.is-done .n { background: var(--rb-green); color: #fff; }
.rb-root .rb-stepbtn.is-now { border-color: var(--rb-gold); box-shadow: 0 0 0 3px rgba(197, 153, 90, .22); color: var(--rb-ink); }
.rb-root .rb-stepbtn small { display: block; font-weight: 500; font-size: .76rem; color: var(--rb-muted); line-height: 1.2; }

/* cards */
.rb-root .rb-card { background: #fff; border: 1px solid var(--rb-line); border-radius: var(--rb-radius); box-shadow: var(--rb-shadow); margin-bottom: 22px; scroll-margin-top: 110px; }
.rb-root .rb-card-h { display: flex; align-items: center; gap: 14px; padding: 20px 26px; border-bottom: 1px solid var(--rb-line); }
.rb-root .rb-card-h .no { flex: 0 0 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--rb-green), var(--rb-deep)); color: #fff; font-weight: 700; }
.rb-root .rb-card-h h2 { font-size: 1.35rem; font-weight: 700; }
.rb-root .rb-card-h p { margin: 0; color: var(--rb-muted); font-size: .92rem; }
.rb-root .rb-card-h .ok { margin-left: auto; color: var(--rb-ok); font-weight: 700; font-size: .85rem; display: none; }
.rb-root .rb-card.is-done .rb-card-h .ok { display: inline-flex; gap: 6px; align-items: center; }
.rb-root .rb-card-b { padding: 26px; }

/* package cards */
.rb-root .rb-pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.rb-root .rb-pkg input { position: absolute; opacity: 0; pointer-events: none; }
.rb-root .rb-pkg { position: relative; }
.rb-root .rb-pkg label { display: flex; flex-direction: column; height: 100%; border: 2px solid var(--rb-line); border-radius: 14px; overflow: hidden; cursor: pointer; background: #fff; transition: all .18s; }
.rb-root .rb-pkg label:hover { border-color: var(--rb-gold); transform: translateY(-2px); box-shadow: var(--rb-shadow); }
.rb-root .rb-pkg input:checked + label { border-color: var(--rb-green); box-shadow: 0 0 0 4px rgba(0, 102, 65, .12); }
.rb-root .rb-pkg input:focus-visible + label { outline: 3px solid var(--rb-gold); outline-offset: 2px; }
.rb-root .rb-pkg .img { aspect-ratio: 16 / 10; background: var(--rb-soft) center / cover no-repeat; position: relative; }
.rb-root .rb-pkg .tag { position: absolute; left: 10px; top: 10px; background: rgba(18, 67, 50, .88); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .22rem .6rem; border-radius: 99px; }
.rb-root .rb-pkg .tick { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border-radius: 50%; background: var(--rb-green); color: #fff; display: none; place-items: center; font-size: .8rem; }
.rb-root .rb-pkg input:checked + label .tick { display: grid; }
.rb-root .rb-pkg .body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.rb-root .rb-pkg .nm { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.rb-root .rb-pkg .pr { color: var(--rb-gold-d); font-weight: 700; font-size: 1.1rem; }
.rb-root .rb-pkg .pr small { color: var(--rb-muted); font-weight: 500; font-size: .82rem; }
.rb-root .rb-pkg .ds { color: var(--rb-muted); font-size: .85rem; }
.rb-root .rb-pkg .more { margin-top: auto; padding-top: 8px; font-size: .82rem; font-weight: 600; color: var(--rb-green); }

/* fields */
.rb-root .rb-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; color: var(--rb-ink); }
.rb-root .rb-label .req { color: var(--rb-bad); }
.rb-root .rb-input, .rb-root .rb-select, .rb-root .rb-textarea { width: 100%; padding: 13px 15px; border: 1.5px solid var(--rb-line); border-radius: 12px; font: inherit; background: #fff; color: var(--rb-ink); transition: border-color .15s, box-shadow .15s; min-height: 50px; }
.rb-root .rb-input:focus, .rb-root .rb-select:focus, .rb-root .rb-textarea:focus { outline: 0; border-color: var(--rb-green); box-shadow: 0 0 0 4px rgba(0, 102, 65, .12); }
.rb-root .rb-input.is-bad, .rb-root .rb-textarea.is-bad { border-color: var(--rb-bad); box-shadow: 0 0 0 4px rgba(192, 57, 43, .1); }
.rb-root .rb-help { font-size: .82rem; color: var(--rb-muted); margin-top: 5px; }
.rb-root .rb-err { font-size: .83rem; color: var(--rb-bad); margin-top: 5px; display: none; font-weight: 600; }
.rb-root .rb-err.show { display: block; }
.rb-root .rb-row { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.rb-root .rb-row.three { grid-template-columns: repeat(3, 1fr); }
.rb-root .rb-field { margin-bottom: 18px; }
.rb-root .rb-textarea { min-height: 96px; resize: vertical; }

/* stepper */
.rb-root .rb-num { display: flex; align-items: center; justify-content: space-between; border: 1.5px solid var(--rb-line); border-radius: 12px; padding: 6px; background: #fff; }
.rb-root .rb-num button { width: 42px; height: 42px; border-radius: 10px; border: 0; background: var(--rb-soft); color: var(--rb-deep); font-size: 1.3rem; font-weight: 700; cursor: pointer; line-height: 1; }
.rb-root .rb-num button:hover { background: var(--rb-green); color: #fff; }
.rb-root .rb-num button:disabled { opacity: .35; cursor: not-allowed; }
.rb-root .rb-num .v { font-weight: 700; font-size: 1.15rem; min-width: 40px; text-align: center; }
.rb-root .rb-guestrow { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rb-line); }
.rb-root .rb-guestrow:last-child { border-bottom: 0; }
.rb-root .rb-guestrow .t { font-weight: 600; }
.rb-root .rb-guestrow .s { font-size: .82rem; color: var(--rb-muted); }
.rb-root .rb-guestrow .rb-num { width: 150px; }
.rb-root .rb-ages { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 12px 0 4px; }
.rb-root .rb-ages .rb-select { min-height: 44px; padding: 9px 12px; }
.rb-root .rb-policy { background: var(--rb-cream); border: 1px dashed var(--rb-gold); color: var(--rb-gold-d); border-radius: 10px; padding: 9px 12px; font-size: .84rem; margin-top: 10px; }

/* date section */
.rb-root .rb-when { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 30px; }
.rb-root .rb-cal { border: 1.5px solid var(--rb-line); border-radius: 14px; padding: 14px; background: #fff; }
.rb-root .rb-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rb-root .rb-cal-h .t { font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 1.05rem; }
.rb-root .rb-cal-h button { width: 38px; height: 38px; border-radius: 10px; border: 1.5px solid var(--rb-line); background: #fff; cursor: pointer; color: var(--rb-deep); }
.rb-root .rb-cal-h button:hover:not(:disabled) { border-color: var(--rb-green); color: var(--rb-green); }
.rb-root .rb-cal-h button:disabled { opacity: .3; cursor: default; }
.rb-root .rb-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.rb-root .rb-dow { text-align: center; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--rb-muted); padding: 6px 0; }
.rb-root .rb-day { aspect-ratio: 1 / 1; min-height: 40px; border: 0; background: transparent; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; position: relative; color: var(--rb-ink); transition: background .12s; }
.rb-root .rb-day:hover:not(:disabled) { background: var(--rb-soft); }
.rb-root .rb-day.other { visibility: hidden; }
.rb-root .rb-day:disabled { color: #c3c0b8; cursor: not-allowed; font-weight: 500; }
.rb-root .rb-day.full:disabled { text-decoration: line-through; color: #d2928b; }
.rb-root .rb-day.few::after { content: ''; position: absolute; bottom: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--rb-warn); }
.rb-root .rb-day.today { box-shadow: inset 0 0 0 1.5px var(--rb-gold); }
.rb-root .rb-day.in-range { background: rgba(0, 102, 65, .12); border-radius: 0; }
.rb-root .rb-day.sel { background: var(--rb-green); color: #fff; border-radius: 10px; }
.rb-root .rb-day.sel:hover:not(:disabled) { background: var(--rb-deep); }
.rb-root .rb-cal-lg { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .78rem; color: var(--rb-muted); margin-top: 12px; }
.rb-root .rb-cal-lg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.rb-root .rb-cal-msg { margin-top: 10px; font-size: .88rem; padding: 9px 12px; border-radius: 10px; display: none; }
.rb-root .rb-cal-msg.show { display: block; }
.rb-root .rb-cal-msg.bad { background: #fdeeec; color: var(--rb-bad); }
.rb-root .rb-cal-msg.info { background: var(--rb-cream); color: var(--rb-gold-d); border: 1px dashed var(--rb-gold); }
.rb-root .rb-chosen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.rb-root .rb-chosen > div { border: 1.5px solid var(--rb-line); border-radius: 12px; padding: 10px 14px; background: var(--rb-cream); }
.rb-root .rb-chosen .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rb-muted); font-weight: 700; }
.rb-root .rb-chosen .v { font-weight: 700; font-size: 1.02rem; }
.rb-root .rb-chosen .v.empty { color: #b3aca0; font-weight: 500; }
.rb-root .rb-chosen > div.full { grid-column: 1 / -1; }

/* payment choice */
.rb-root .rb-opts { display: grid; gap: 12px; }
.rb-root .rb-opt input { position: absolute; opacity: 0; pointer-events: none; }
.rb-root .rb-opt { position: relative; }
.rb-root .rb-opt label { display: flex; align-items: center; gap: 14px; border: 2px solid var(--rb-line); border-radius: 14px; padding: 16px 18px; cursor: pointer; transition: all .15s; }
.rb-root .rb-opt label:hover { border-color: var(--rb-gold); }
.rb-root .rb-opt input:checked + label { border-color: var(--rb-green); background: rgba(0, 102, 65, .05); box-shadow: 0 0 0 4px rgba(0, 102, 65, .1); }
.rb-root .rb-opt .dot { flex: 0 0 22px; height: 22px; border-radius: 50%; border: 2px solid #cfc6b6; display: grid; place-items: center; }
.rb-root .rb-opt input:checked + label .dot { border-color: var(--rb-green); }
.rb-root .rb-opt input:checked + label .dot::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--rb-green); }
.rb-root .rb-opt .t { font-weight: 700; }
.rb-root .rb-opt .s { font-size: .86rem; color: var(--rb-muted); }
.rb-root .rb-opt .amt { margin-left: auto; font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: 1.2rem; color: var(--rb-green); white-space: nowrap; }
.rb-root .rb-check { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; font-size: .92rem; }
.rb-root .rb-check input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--rb-green); flex: 0 0 20px; }
.rb-root .rb-check a { color: var(--rb-green); font-weight: 600; text-decoration: underline; }
.rb-root .rb-how { display: grid; gap: 10px; margin-top: 18px; padding: 16px 18px; background: var(--rb-cream); border-radius: 12px; border: 1px solid var(--rb-line); }
.rb-root .rb-how div { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; }
.rb-root .rb-how i { color: var(--rb-gold-d); margin-top: 3px; width: 18px; text-align: center; }

/* summary */
.rb-root .rb-sum { position: sticky; top: 100px; }
.rb-root .rb-sum-card { background: #fff; border: 1px solid var(--rb-line); border-radius: var(--rb-radius); box-shadow: var(--rb-shadow); overflow: hidden; }
.rb-root .rb-sum-h { background: linear-gradient(135deg, var(--rb-green), var(--rb-deep)); color: #fff; padding: 16px 22px; font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.rb-root .rb-sum-b { padding: 20px 22px; }
.rb-root .rb-sum-pkg { display: flex; gap: 14px; align-items: center; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px dashed var(--rb-line); }
.rb-root .rb-sum-pkg .img { flex: 0 0 74px; height: 74px; border-radius: 12px; background: var(--rb-soft) center / cover; }
.rb-root .rb-sum-pkg .nm { font-family: 'Inter Tight', sans-serif; font-weight: 700; line-height: 1.25; }
.rb-root .rb-sum-pkg .mt { font-size: .84rem; color: var(--rb-muted); }
.rb-root .rb-sum-empty { color: var(--rb-muted); text-align: center; padding: 18px 0; }
.rb-root .rb-line { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; font-size: .95rem; }
.rb-root .rb-line.minus { color: var(--rb-ok); }
.rb-root .rb-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; margin-top: 8px; border-top: 2px dashed var(--rb-line); }
.rb-root .rb-total .l { font-weight: 700; }
.rb-root .rb-total .v { font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: 1.8rem; color: var(--rb-green); }
.rb-root .rb-due { margin-top: 12px; background: var(--rb-cream); border: 1px solid var(--rb-line); border-radius: 12px; padding: 12px 14px; }
.rb-root .rb-due .line { display: flex; justify-content: space-between; font-size: .9rem; }
.rb-root .rb-due .line.big { font-weight: 800; font-size: 1.05rem; color: var(--rb-deep); }
.rb-root .rb-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px 20px; border: 0; border-radius: 14px; font: inherit; font-weight: 700; font-size: 1.08rem; color: #fff; background: linear-gradient(135deg, var(--rb-green), var(--rb-deep)); cursor: pointer; transition: transform .12s, box-shadow .12s, opacity .12s; box-shadow: 0 8px 20px rgba(0, 102, 65, .25); text-decoration: none; }
.rb-root .rb-btn:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 12px 26px rgba(0, 102, 65, .3); }
.rb-root .rb-btn[disabled] { opacity: .6; cursor: wait; transform: none; }
.rb-root .rb-btn.gold { background: linear-gradient(135deg, var(--rb-gold), var(--rb-gold-d)); box-shadow: 0 8px 20px rgba(146, 102, 51, .28); }
.rb-root .rb-btn.ghost { background: #fff; color: var(--rb-green); border: 2px solid var(--rb-green); box-shadow: none; }
.rb-root .rb-btn.ghost:hover { background: var(--rb-green); color: #fff; }
.rb-root .rb-btn.sm { padding: 11px 16px; font-size: .95rem; width: auto; border-radius: 12px; }
.rb-root .rb-trust { display: grid; gap: 8px; margin-top: 16px; font-size: .86rem; color: var(--rb-muted); }
.rb-root .rb-trust div { display: flex; gap: 10px; align-items: center; }
.rb-root .rb-trust i { color: var(--rb-green); width: 16px; text-align: center; }
.rb-root .rb-alert { border-radius: 12px; padding: 12px 16px; margin-bottom: 18px; font-weight: 600; }
.rb-root .rb-alert.bad { background: #fdeeec; color: #8a2a1f; border: 1px solid #f3c9c3; }
.rb-root .rb-alert.ok { background: #e8f5ee; color: #14683f; border: 1px solid #bfe0cd; }
.rb-root .rb-alert ul { margin: 6px 0 0 18px; padding: 0; font-weight: 500; }
.rb-root .rb-mbar { display: none; }

/* thanks / payment pages */
.rb-root .rb-center { max-width: 820px; margin: 0 auto; }
.rb-root .rb-hero { text-align: center; padding: 34px 20px 26px; }
.rb-root .rb-hero .tick { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 16px; display: grid; place-items: center; font-size: 2.2rem; color: #fff; background: linear-gradient(135deg, var(--rb-green), var(--rb-deep)); box-shadow: 0 12px 30px rgba(0, 102, 65, .3); }
.rb-root .rb-hero .tick.warn { background: linear-gradient(135deg, var(--rb-gold), var(--rb-gold-d)); box-shadow: 0 12px 30px rgba(146, 102, 51, .3); }
.rb-root .rb-hero .tick.bad { background: linear-gradient(135deg, #d9534f, #a93226); }
.rb-root .rb-hero h1 { font-size: 2rem; font-weight: 800; }
.rb-root .rb-hero p { color: var(--rb-muted); font-size: 1.05rem; margin: 8px auto 0; max-width: 560px; }
.rb-root .rb-code { display: inline-block; margin-top: 12px; padding: 8px 18px; border-radius: 99px; background: var(--rb-cream); border: 1.5px dashed var(--rb-gold); font-weight: 800; letter-spacing: .08em; color: var(--rb-gold-d); font-size: 1.1rem; }
.rb-root .rb-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; }
.rb-root .rb-kv .k { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rb-muted); font-weight: 700; }
.rb-root .rb-kv .v { font-weight: 600; }
.rb-root .rb-pay-box { background: var(--rb-cream); border: 1.5px dashed var(--rb-gold); border-radius: 14px; padding: 18px 20px; white-space: pre-line; font-size: .98rem; }
.rb-root .rb-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.rb-root .rb-pill { display: inline-block; padding: .25rem .8rem; border-radius: 99px; font-weight: 700; font-size: .8rem; background: #fff1d6; color: var(--rb-warn); }
.rb-root .rb-pill.ok { background: #e1f4ea; color: var(--rb-ok); }
.rb-root .rb-pill.bad { background: #fdeeec; color: var(--rb-bad); }

@media (max-width: 1020px) {
    .rb-root .rb-grid { grid-template-columns: 1fr; }
    .rb-root .rb-sum { position: static; order: -1; }
    .rb-root .rb-when { grid-template-columns: 1fr; }
    .rb-root .rb-steps { grid-template-columns: repeat(2, 1fr); }
    .rb-root .rb-mbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: #fff; border-top: 1px solid var(--rb-line); box-shadow: 0 -8px 24px rgba(0, 0, 0, .1); padding: 10px 16px; gap: 14px; align-items: center; }
    .rb-root .rb-mbar .tot small { display: block; font-size: .72rem; color: var(--rb-muted); line-height: 1; }
    .rb-root .rb-mbar .tot strong { font-family: 'Inter Tight', sans-serif; font-size: 1.35rem; color: var(--rb-green); }
    .rb-root .rb-mbar .rb-btn { width: auto; flex: 1; padding: 13px 14px; font-size: 1rem; }
    .rb-root .rb-sum .rb-btn.main { display: none; }
}
@media (max-width: 600px) {
    .rb-root .rb-wrap { padding: 20px 14px 110px; }
    .rb-root .rb-card-h { padding: 16px 16px; }
    .rb-root .rb-card-b { padding: 18px 16px; }
    .rb-root .rb-row, .rb-root .rb-row.three, .rb-root .rb-kv { grid-template-columns: 1fr; }
    .rb-root .rb-card-h h2 { font-size: 1.15rem; }
    .rb-root .rb-steps { gap: 8px; }
    .rb-root .rb-stepbtn { padding: 10px; }
    .rb-root .rb-stepbtn small { display: none; }
    .rb-root .rb-pkgs { grid-template-columns: 1fr 1fr; gap: 10px; }
    .rb-root .rb-pkg .ds { display: none; }
    .rb-root .rb-hero h1 { font-size: 1.6rem; }
}

/* calendar must never overflow its column */
.rb-root .rb-cal-g { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.rb-root .rb-day { min-width: 0; width: 100%; padding: 0; }
.rb-root .rb-when { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.rb-root .rb-cal { min-width: 0; }

/* ---------- package details page ---------- */
.rb-root .rb-pd-img { aspect-ratio: 16 / 8.5; border-radius: 18px; background: var(--rb-soft) center / cover no-repeat; position: relative; box-shadow: var(--rb-shadow); margin-bottom: 22px; }
.rb-root .rb-pd-chip { position: absolute; left: 16px; top: 16px; background: rgba(18, 67, 50, .9); color: #fff; padding: .35rem .9rem; border-radius: 99px; font-weight: 700; font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; }
.rb-root .rb-pd-offer { position: absolute; right: 16px; top: 16px; background: #c0392b; color: #fff; padding: .35rem .9rem; border-radius: 99px; font-weight: 800; font-size: .85rem; }
.rb-root .rb-pd-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 20px; margin-bottom: 20px; }
.rb-root .rb-pd-head h1 { font-size: 2rem; font-weight: 800; }
.rb-root .rb-pd-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.rb-root .rb-pd-price .now { font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: 1.9rem; color: var(--rb-green); }
.rb-root .rb-pd-price del { color: var(--rb-muted); font-size: 1.05rem; }
.rb-root .rb-pd-price .unit { color: var(--rb-muted); font-weight: 500; }
.rb-root .rb-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 22px; }
.rb-root .rb-fact { display: flex; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--rb-line); border-radius: 14px; padding: 14px 16px; }
.rb-root .rb-fact i { flex: 0 0 42px; height: 42px; border-radius: 12px; background: var(--rb-cream); color: var(--rb-gold-d); display: grid; place-items: center; font-size: 1.05rem; }
.rb-root .rb-fact .k { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--rb-muted); font-weight: 700; }
.rb-root .rb-fact .v { font-weight: 600; line-height: 1.3; }
.rb-root .rb-prose { line-height: 1.85; font-size: 1.02rem; color: #33373d; }
.rb-root .rb-prose h1, .rb-root .rb-prose h2, .rb-root .rb-prose h3, .rb-root .rb-prose h4 { font-size: 1.15rem; font-weight: 700; margin: 18px 0 8px; }
.rb-root .rb-prose p { margin: 0 0 10px; }
.rb-root .rb-prose ul { list-style: none; padding: 0; margin: 0 0 12px; }
.rb-root .rb-prose ul li { position: relative; padding-left: 28px; margin-bottom: 6px; }
.rb-root .rb-prose ul li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free'; font-weight: 900; position: absolute; left: 0; top: 1px; color: var(--rb-green); font-size: .85rem; }
.rb-root .rb-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.rb-root .rb-how3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rb-root .rb-how3 > div { background: var(--rb-cream); border: 1px solid var(--rb-line); border-radius: 14px; padding: 16px; }
.rb-root .rb-how3 b { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--rb-gold); color: #fff; margin-bottom: 10px; }
.rb-root .rb-how3 .t { font-weight: 700; }
.rb-root .rb-how3 .s { font-size: .88rem; color: var(--rb-muted); }
@media (max-width: 700px) { .rb-root .rb-facts, .rb-root .rb-how3 { grid-template-columns: 1fr; } .rb-root .rb-pd-head h1 { font-size: 1.5rem; } .rb-root .rb-pd-img { aspect-ratio: 16 / 10; } }

/* mobile fixes (must come after the overrides above) */
@media (max-width: 1020px) {
    .rb-root .rb-when { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .rb-root .rb-sum { order: 0; position: static; }
    .rb-root .rb-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .rb-root .rb-guestrow .rb-num { width: 138px; }
    .rb-root .rb-chosen { grid-template-columns: 1fr 1fr; }
    .rb-root .rb-card-h .ok { display: none !important; }
    .rb-root .rb-pkg .more { font-size: .76rem; }
    .rb-root .rb-opt label { flex-wrap: wrap; }
    .rb-root .rb-pd-price .now { font-size: 1.6rem; }
    .rb-root .rb-cal { padding: 10px; }
    .rb-root .rb-wrap, .rb-root .rb-card, .rb-root .rb-grid > * { min-width: 0; }
}
.rb-root, .rb-root .rb-wrap { overflow-x: clip; }

/* ---- booking page, desktop: summary stays put, the steps scroll inside their own thin-scrollbar column ---- */
@media (min-width: 1021px) {
    .rb-root .rb-split { align-items: start; }
    .rb-root .rb-split > div:first-child {
        position: sticky; top: 92px; max-height: calc(100vh - 112px); overflow-y: auto; overflow-x: hidden;
        padding: 4px 12px 4px 4px; margin: -4px -12px -4px -4px;
        scrollbar-width: thin; scrollbar-color: var(--rb-gold) transparent;
    }
    .rb-root .rb-split > div:first-child::-webkit-scrollbar { width: 6px; }
    .rb-root .rb-split > div:first-child::-webkit-scrollbar-track { background: transparent; }
    .rb-root .rb-split > div:first-child::-webkit-scrollbar-thumb { background: var(--rb-gold); border-radius: 99px; }
    .rb-root .rb-split .rb-card { scroll-margin-top: 4px; }
    .rb-root .rb-split .rb-sum { position: sticky; top: 92px; max-height: calc(100vh - 112px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--rb-gold) transparent; }
    .rb-root .rb-split .rb-card:last-child { margin-bottom: 4px; }
}

/* final desktop layout: one viewport-high panel. Right summary never moves; left steps scroll inside (thin gold scrollbar). */
@media (min-width: 1021px) {
    .rb-root .rb-split { height: calc(100vh - 140px); min-height: 600px; align-items: stretch; }
    .rb-root .rb-split > div:first-child { position: static; height: 100%; max-height: none; overflow-y: auto; }
    .rb-root .rb-split .rb-sum { position: static; align-self: start; max-height: 100%; overflow-y: auto; }
    .rb-root .rb-split + .rb-mbar { display: none; }
}


/* the summary box never scrolls: compact it so it fits, and hide the extra trust lines on short screens */
@media (min-width: 1021px) {
    .rb-root .rb-split .rb-sum { overflow: visible; max-height: none; }
    .rb-root .rb-split .rb-sum-b { padding: 14px 18px; }
    .rb-root .rb-split .rb-sum-h { padding: 12px 18px; font-size: 1.02rem; }
    .rb-root .rb-split .rb-sum-pkg { padding-bottom: 10px; margin-bottom: 10px; }
    .rb-root .rb-split .rb-sum-pkg .img { flex-basis: 60px; height: 60px; }
    .rb-root .rb-split .rb-line { padding: 3px 0; font-size: .92rem; }
    .rb-root .rb-split .rb-total { padding-top: 10px; margin-top: 6px; }
    .rb-root .rb-split .rb-total .v { font-size: 1.5rem; }
    .rb-root .rb-split .rb-due { margin-top: 8px; padding: 9px 12px; }
    .rb-root .rb-split .rb-btn.main { margin-top: 12px !important; padding: 13px 16px; font-size: 1rem; }
    .rb-root .rb-split .rb-trust { margin-top: 10px; gap: 5px; font-size: .8rem; }
}
@media (min-width: 1021px) and (max-height: 860px) { .rb-root .rb-split .rb-trust { display: none; } }


/* advance choices: one row of boxes (20% / 30% / 40% / 50%) */
.rb-root #payOpts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.rb-root #payOpts .rb-opt label { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 3px; padding: 14px 14px 12px; min-height: 112px; height: 100%; }
.rb-root #payOpts .dot { position: absolute; right: 12px; top: 12px; flex: none; }
.rb-root #payOpts .pct { font-weight: 800; font-size: 1.05rem; padding-right: 30px; line-height: 1.25; }
.rb-root #payOpts .pct em { display: block; font-style: normal; font-weight: 600; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--rb-muted); }
.rb-root #payOpts .amt { margin: 4px 0 0; font-size: 1.4rem; }
.rb-root #payOpts .s { font-size: .8rem; color: var(--rb-muted); line-height: 1.3; margin-top: auto; padding-top: 4px; }
@media (max-width: 600px) { .rb-root #payOpts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .rb-root #payOpts .amt { font-size: 1.2rem; } }
.rb-root #payOpts .dot { width: 22px; height: 22px; flex: none; box-sizing: border-box; }
.rb-root #payOpts .pct { min-height: 2.6em; }


/* ---------- campaign landing page (/c/slug) ---------- */
.rb-root .cl-preview { background: #fff4de; color: #8a5a00; text-align: center; padding: 10px 14px; font-weight: 600; font-size: .9rem; }
.rb-root .cl-hero { background-size: cover; background-position: center; color: #fff; padding: 150px 20px 64px; min-height: 560px; display: flex; align-items: flex-end; }
.rb-root .cl-hero-in { max-width: 1240px; margin: 0 auto; width: 100%; padding: 0 0; }
.rb-root .cl-hero h1 { color: #fff; font-size: clamp(1.9rem, 4.8vw, 3.3rem); font-weight: 800; max-width: 800px; line-height: 1.08; letter-spacing: -.02em; }
.rb-root .cl-sub { color: rgba(255, 255, 255, .92); font-size: clamp(1rem, 1.8vw, 1.2rem); max-width: 680px; margin: 14px 0 0; }
.rb-root .cl-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--rb-gold); color: #fff; padding: .42rem 1.05rem; border-radius: 99px; font-weight: 800; font-size: .92rem; margin-bottom: 16px; box-shadow: 0 8px 20px rgba(0, 0, 0, .25); }
.rb-root .cl-price { margin-top: 20px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.rb-root .cl-price .from { color: rgba(255, 255, 255, .8); font-weight: 600; }
.rb-root .cl-price .now { font-family: 'Inter Tight', sans-serif; font-weight: 800; font-size: 2.2rem; color: #fff; }
.rb-root .cl-price .unit { color: rgba(255, 255, 255, .85); font-weight: 500; }
.rb-root .cl-code { background: rgba(255, 255, 255, .16); border: 1px dashed rgba(255, 255, 255, .6); padding: .2rem .8rem; border-radius: 99px; font-weight: 700; font-size: .85rem; }
.rb-root .cl-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.rb-root .cl-cta .rb-btn.ghost { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .85); }
.rb-root .cl-cta .rb-btn.ghost:hover { background: #fff; color: var(--rb-green); }
.rb-root .cl-wrap { padding-top: 34px; }
.rb-root .cl-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.rb-root .cl-list li { display: flex; gap: 14px; font-size: 1.08rem; font-weight: 500; line-height: 1.45; }
.rb-root .cl-list i { color: var(--rb-green); margin-top: 5px; font-size: 1.05rem; }
.rb-root .rb-landing .rb-sum, .rb-root.rb-landing .rb-sum { top: 100px; }
@media (max-width: 1020px) { .rb-root .cl-hero { padding: 120px 16px 40px; min-height: 500px; } .rb-root.rb-landing .rb-sum { order: 0; } }