/* Dinner Cruise Booking Engine — components. Theme-independent; colours via CSS variables. */
:root {
  --dcb-navy: #0B2239; --dcb-navy-2: #102A43; --dcb-ink: #071A2B; --dcb-gold: #C9A45C; --dcb-gold-2: #D4AF69;
  --dcb-bg: #F7F5F0; --dcb-line: #E6E1D6; --dcb-muted: #66707c; --dcb-ok: #1a7f52; --dcb-warn: #b7791f; --dcb-bad: #b42318;
  --dcb-r: 14px; --dcb-shadow: 0 10px 30px rgba(7, 26, 43, .08);
}
/* The `hidden` attribute must win over component display rules (e.g. .dcb-transfer { display: grid }). */
.dcb-widget [hidden], .dcb-search [hidden], .dcb-manage [hidden], .dcb-enquiry [hidden] { display: none !important; }
.dcb-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; padding: .85em 1.4em; border-radius: 999px; border: 1px solid transparent; font-weight: 600; text-decoration: none; cursor: pointer; line-height: 1.1; font-size: 1rem; transition: transform .15s ease, background .15s ease; }
.dcb-btn:hover { transform: translateY(-1px); }
.dcb-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.dcb-btn-gold { background: linear-gradient(135deg, var(--dcb-gold-2), var(--dcb-gold)); color: var(--dcb-ink); }
.dcb-btn-navy { background: var(--dcb-navy); color: #fff; }
.dcb-btn-outline { background: transparent; border-color: var(--dcb-navy); color: var(--dcb-navy); }
.dcb-btn-wa { background: #1fae54; color: #fff; }
.dcb-btn-sm { padding: .55em 1em; font-size: .9rem; }
.dcb-muted { color: var(--dcb-muted); }
.dcb-error { color: var(--dcb-bad); font-weight: 600; margin: .5rem 0; }
.dcb-panel { background: #fff; border: 1px solid var(--dcb-line); border-radius: var(--dcb-r); padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: var(--dcb-shadow); }
.dcb-center { text-align: center; }

/* ---------- booking widget ---------- */
.dcb-widget { background: #fff; border: 1px solid var(--dcb-line); border-radius: var(--dcb-r); box-shadow: var(--dcb-shadow); overflow: hidden; scroll-margin-top: 90px; }
.dcb-w-head { background: var(--dcb-navy); color: #fff; padding: 1.1rem 1.25rem; }
.dcb-from { display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap; }
.dcb-from span { color: #b9c4d2; font-size: .9rem; }
.dcb-from strong { font-size: 1.6rem; color: var(--dcb-gold-2); }
.dcb-from del { color: #8a98a8; }
.dcb-trust { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .8rem; color: #d7dee7; }
.dcb-trust li::before { content: "✓ "; color: var(--dcb-gold); }
.dcb-steps { padding: .5rem 1.25rem 1.25rem; }
.dcb-step { border-bottom: 1px solid var(--dcb-line); padding: 1rem 0; }
.dcb-step h4 { margin: 0 0 .75rem; font-size: 1rem; display: flex; align-items: center; gap: .55rem; color: var(--dcb-navy); }
.dcb-step h4 span { font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 700; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--dcb-navy); color: var(--dcb-gold-2); display: inline-grid; place-items: center; font-size: .8rem; }
.dcb-cal.loading { opacity: .5; }
.dcb-cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; }
.dcb-cal-head button { border: 1px solid var(--dcb-line); background: #fff; border-radius: 8px; width: 2.2rem; height: 2.2rem; cursor: pointer; font-size: 1.2rem; }
.dcb-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dcb-dow { text-align: center; font-size: .72rem; color: var(--dcb-muted); padding: .2rem 0; }
.dcb-day { aspect-ratio: 1 / 1; border: 1px solid var(--dcb-line); background: #fff; border-radius: 9px; cursor: pointer; font-weight: 600; color: var(--dcb-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; font-size: .9rem; }
.dcb-day small { font-size: .62rem; font-weight: 500; color: var(--dcb-muted); }
.dcb-day:disabled { background: #f4f3f0; color: #b8b8b8; cursor: default; border-color: transparent; }
.dcb-day.s-limited { border-color: #e7c785; }
.dcb-day.s-event { border-color: var(--dcb-gold); }
.dcb-day.s-sold_out { text-decoration: line-through; }
.dcb-day.sel { background: var(--dcb-navy); color: #fff; border-color: var(--dcb-navy); }
.dcb-day.sel small { color: var(--dcb-gold-2); }
.dcb-cal-legend { display: flex; gap: .6rem; font-size: .72rem; color: var(--dcb-muted); margin-top: .5rem; align-items: center; flex-wrap: wrap; }
.dcb-cal-legend span { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; border: 1px solid var(--dcb-line); }
.dcb-cal-legend .s-limited { border-color: #e7c785; } .dcb-cal-legend .s-sold_out { background: #f4f3f0; }
.dcb-slots { margin-top: .85rem; }
.dcb-slot-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.dcb-slot { border: 1px solid var(--dcb-line); border-radius: 10px; padding: .55rem .8rem; cursor: pointer; display: flex; flex-direction: column; min-width: 6.5rem; }
.dcb-slot input { position: absolute; opacity: 0; pointer-events: none; }
.dcb-slot small { color: var(--dcb-warn); font-size: .72rem; min-height: 1em; }
.dcb-slot.sel { border-color: var(--dcb-navy); box-shadow: inset 0 0 0 1px var(--dcb-navy); }
.dcb-stepper { display: flex; justify-content: space-between; align-items: center; padding: .45rem 0; }
.dcb-stepper small { display: block; color: var(--dcb-muted); font-size: .78rem; }
.dcb-qty { display: flex; align-items: center; gap: .6rem; }
.dcb-qty button { width: 2.3rem; height: 2.3rem; border-radius: 50%; border: 1px solid var(--dcb-line); background: #fff; font-size: 1.15rem; cursor: pointer; color: var(--dcb-navy); }
.dcb-qty output { min-width: 1.5rem; text-align: center; font-weight: 700; }
.dcb-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.dcb-toggle label { border: 1px solid var(--dcb-line); border-radius: 10px; padding: .7rem; cursor: pointer; }
.dcb-toggle input { position: absolute; opacity: 0; }
.dcb-toggle label:has(input:checked) { border-color: var(--dcb-navy); box-shadow: inset 0 0 0 1px var(--dcb-navy); background: #f8fafc; }
.dcb-toggle strong { display: block; font-size: .92rem; } .dcb-toggle small { color: var(--dcb-muted); font-size: .78rem; }
.dcb-toggle .dcb-disabled { opacity: .5; cursor: not-allowed; }
.dcb-transfer { display: grid; gap: .6rem; margin-top: .75rem; }
.dcb-transfer label, .dcb-enquiry label, .dcb-lookup label, .dcb-review-form label { display: grid; gap: .3rem; font-size: .85rem; font-weight: 600; color: var(--dcb-navy); }
.dcb-widget input[type=text], .dcb-widget input[type=date], .dcb-widget input[type=number], .dcb-widget select, .dcb-lookup input, .dcb-review-form input, .dcb-review-form textarea, .dcb-search-form input, .dcb-search-form select, .dcb-request textarea, .dcb-request select {
  width: 100%; border: 1px solid var(--dcb-line); border-radius: 10px; padding: .7rem .8rem; font: inherit; background: #fff; box-sizing: border-box; min-height: 44px; }
.dcb-note { color: var(--dcb-muted); font-size: .78rem; }
.dcb-summary { padding-top: 1rem; }
.dcb-sum-lines div { display: flex; justify-content: space-between; font-size: .9rem; padding: .2rem 0; color: #384656; }
.dcb-sum-lines .dcb-vat { color: var(--dcb-muted); font-size: .8rem; }
.dcb-sum-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--dcb-line); margin-top: .5rem; padding-top: .6rem; }
.dcb-sum-total strong { font-size: 1.35rem; color: var(--dcb-navy); }
.dcb-conv { color: var(--dcb-muted); font-weight: 500; font-size: .75rem; }
.dcb-book { width: 100%; margin-top: .85rem; font-size: 1.05rem; }
.dcb-secure { text-align: center; font-size: .78rem; color: var(--dcb-muted); margin: .6rem 0 0; }
.dcb-wa-help { display: block; text-align: center; padding: .8rem; border-top: 1px solid var(--dcb-line); color: #138a45; font-weight: 600; text-decoration: none; font-size: .9rem; }
.dcb-enquiry { padding: 1.25rem; display: grid; gap: .7rem; }

/* ---------- cards & grids ---------- */
.dcb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.5rem; }
.dcb-card-cruise { background: #fff; border: 1px solid var(--dcb-line); border-radius: var(--dcb-r); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; }
.dcb-card-cruise:hover { box-shadow: var(--dcb-shadow); transform: translateY(-3px); }
.dcb-card-img { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--dcb-navy); overflow: hidden; }
.dcb-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dcb-img-ph { position: absolute; inset: 0; background: radial-gradient(circle at 70% 20%, rgba(201, 164, 92, .35), transparent 40%), linear-gradient(160deg, #102A43, #071A2B); }
.dcb-badges { position: absolute; left: .75rem; top: .75rem; display: flex; gap: .35rem; flex-wrap: wrap; }
.dcb-badges span { background: rgba(7, 26, 43, .85); color: var(--dcb-gold-2); font-size: .72rem; font-weight: 700; padding: .3rem .6rem; border-radius: 999px; letter-spacing: .02em; }
.dcb-card-body { padding: 1rem 1.1rem 1.15rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.dcb-card-body h3 { margin: 0; font-size: 1.15rem; line-height: 1.25; } .dcb-card-body h3 a { color: var(--dcb-ink); text-decoration: none; }
.dcb-card-meta { margin: 0; color: var(--dcb-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.dcb-card-ex { margin: 0; color: #4b5866; font-size: .92rem; }
.dcb-card-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: auto; padding-top: .6rem; flex-wrap: wrap; }
.dcb-card-price { font-weight: 700; color: var(--dcb-navy); font-size: 1.1rem; } .dcb-card-price small { color: var(--dcb-muted); font-weight: 500; font-size: .75rem; }
.dcb-card-tag { margin: 0; font-size: .78rem; color: var(--dcb-ok); }
.dcb-rating { margin: 0; color: var(--dcb-gold); font-weight: 700; font-size: .9rem; }
.dcb-av { font-size: .75rem; font-weight: 700; padding: .2rem .5rem; border-radius: 6px; } .dcb-av.limited { background: #fff4de; color: var(--dcb-warn); } .dcb-av.no { background: #fde8e7; color: var(--dcb-bad); }

/* ---------- search ---------- */
.dcb-search-form { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: .6rem; align-items: end; background: #fff; padding: 1rem; border-radius: var(--dcb-r); box-shadow: var(--dcb-shadow); }
.dcb-search-form label span { display: block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--dcb-muted); margin-bottom: .25rem; }
.dcb-search-filters { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin: 1.5rem 0 1rem; }
.dcb-search-filters select { width: auto; min-width: 12rem; }
.dcb-results { margin-top: 1rem; }
@media (max-width: 760px) { .dcb-search-form { grid-template-columns: 1fr 1fr; } .dcb-search-form button { grid-column: 1 / -1; } }

/* ---------- confirmation / verify / manage ---------- */
.dcb-container { width: min(1180px, 100% - 2rem); margin-inline: auto; padding-block: clamp(2rem, 6vw, 4rem); }
.dcb-confirm, .dcb-verify { max-width: 760px; margin-inline: auto; text-align: center; }
.dcb-confirm-icon { width: 4.5rem; height: 4.5rem; border-radius: 50%; margin: 0 auto 1rem; display: grid; place-items: center; font-size: 2.2rem; font-weight: 700; background: #e7f6ee; color: var(--dcb-ok); }
.dcb-confirm.bad .dcb-confirm-icon, .dcb-verify.bad .dcb-confirm-icon { background: #fde8e7; color: var(--dcb-bad); }
.dcb-confirm.wait .dcb-confirm-icon { background: #fff4de; color: var(--dcb-warn); }
.dcb-lead { color: #4b5866; font-size: 1.05rem; }
.dcb-checks { list-style: none; padding: 0; margin: 1.5rem 0; text-align: left; border: 1px solid var(--dcb-line); border-radius: 12px; overflow: hidden; }
.dcb-checks li { display: flex; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--dcb-line); }
.dcb-checks li:last-child { border-bottom: 0; }
.dcb-checks li span { color: var(--dcb-muted); } .dcb-checks li span::before { content: "✓ "; color: var(--dcb-gold); }
.dcb-checks li strong { text-align: right; }
.dcb-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.dcb-account-cta { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--dcb-line); }
.dcb-manage { display: grid; gap: 1.5rem; max-width: 760px; margin-inline: auto; }
.dcb-lookup { display: grid; gap: .8rem; }
.dcb-request { display: grid; gap: .6rem; margin-top: 1.5rem; border-top: 1px solid var(--dcb-line); padding-top: 1rem; }
.dcb-badge { display: inline-block; background: #eef2f7; color: var(--dcb-navy); border-radius: 999px; padding: .2rem .7rem; font-size: .8rem; font-weight: 700; }
.dcb-acc-booking { display: flex; justify-content: space-between; gap: 1rem; border: 1px solid var(--dcb-line); border-radius: 12px; padding: 1rem; margin-bottom: .8rem; flex-wrap: wrap; }
.dcb-acc-actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }

/* ---------- reviews ---------- */
.dcb-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1.25rem; }
.dcb-review { margin: 0; background: #fff; border: 1px solid var(--dcb-line); border-radius: var(--dcb-r); padding: 1.25rem; }
.dcb-review-stars { color: var(--dcb-gold); font-size: 1.1rem; letter-spacing: .1em; } .dcb-review-stars span { color: #ddd; }
.dcb-review blockquote { margin: .6rem 0; font-style: italic; color: #384656; }
.dcb-review figcaption { font-size: .85rem; color: var(--dcb-muted); } .dcb-verified { color: var(--dcb-ok); font-weight: 600; }
.dcb-review-form { display: grid; gap: 1rem; }
.dcb-stars { border: 0; padding: 0; margin: 0; display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: .15rem; flex-wrap: wrap; }
.dcb-stars legend { width: 100%; font-weight: 600; color: var(--dcb-navy); margin-bottom: .2rem; }
.dcb-stars input { position: absolute; opacity: 0; } .dcb-stars label { font-size: 1.8rem; color: #d9d9d9; cursor: pointer; }
.dcb-stars input:checked ~ label, .dcb-stars label:hover, .dcb-stars label:hover ~ label { color: var(--dcb-gold); }

/* ---------- compare & tables ---------- */
.dcb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dcb-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--dcb-r); overflow: hidden; }
.dcb-table th, .dcb-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--dcb-line); text-align: left; vertical-align: top; }
.dcb-compare-table thead th { background: var(--dcb-navy); color: #fff; min-width: 180px; } .dcb-compare-table thead a { color: #fff; text-decoration: none; display: grid; gap: .5rem; }
.dcb-compare-table thead img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; }
.dcb-compare-table tbody th { color: var(--dcb-muted); font-weight: 600; white-space: nowrap; }
.dcb-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 1rem; }
.dcb-chips label { border: 1px solid var(--dcb-line); border-radius: 999px; padding: .4rem .8rem; background: #fff; cursor: pointer; font-size: .9rem; }
.dcb-compare-pick { margin-bottom: 1.5rem; }
.dcb-price-conv { color: var(--dcb-muted); font-size: .8em; font-weight: 500; }
@media (max-width: 600px) { .dcb-toggle { grid-template-columns: 1fr; } .dcb-checks li { flex-direction: column; gap: .15rem; } .dcb-checks li strong { text-align: left; } }
@media (prefers-reduced-motion: reduce) { .dcb-btn, .dcb-card-cruise { transition: none; } }