/* ================================================================
   Catswell Website — Portal Booking Stylesheet
   Rebuilt on the real Catswell brand system (see style.css):
     Imperial Purple #582A59 · Sunglow Yellow #FFCD34 · Columbia Blue #C4E4D2
   Previously this file used its own disconnected indigo/orange palette,
   unrelated to the actual brand — every color below now derives from the
   real identity instead. Every selector name is unchanged from before, so
   nothing in the templates or JS needed to change to pick this up.
   ================================================================ */

/* ── Variables ── */
:root {
  --cw-primary:     #582A59;   /* Imperial Purple — was #5b6af0 (generic indigo) */
  --cw-primary-dk:  #431f43;   /* deeper purple for hover states */
  --cw-primary-tint:#f4eef5;   /* purple-tinted panel backgrounds, replaces cold blue-white */
  --cw-accent:      #FFCD34;   /* Sunglow Yellow — was #ff8a65 (generic orange) */
  --cw-accent-dk:   #e6b619;
  --cw-mint:        #C4E4D2;   /* Columbia Blue — soft secondary panels */
  --cw-mint-dk:      #7fb89a;
  --cw-blush:       #F8DDE4;   /* new: playful cat-spa accent for empty/cute states */
  --cw-blush-dk:    #e88ba1;
  --cw-success:     #43a047;
  --cw-teal:        #26a69a;
  --cw-soft-bg:     #FFFBF5;   /* warm cream — was #f8f9ff (cold blue-white) */
  --cw-card-radius: 18px;
  --cw-shadow:      0 6px 28px rgba(88,42,89,.10);
  --cw-shadow-lift: 0 12px 36px rgba(88,42,89,.16);
  --cw-font-display: 'Playfair Display', serif;
  --cw-font-body:    'Poppins', sans-serif;
}

/* ── Portal wrapper ── */
.catswell-portal {
  background: var(--cw-soft-bg);
  background-image:
    radial-gradient(circle at 8% 12%, rgba(255,205,52,.07) 0, transparent 45%),
    radial-gradient(circle at 94% 85%, rgba(196,228,210,.25) 0, transparent 40%);
  min-height: 100vh;
}

/* ── Hero Sections ──
   Same imperial-purple family throughout for brand cohesion, instead of
   each page having an unrelated color story (navy / violet / teal / navy). */
.portal-hero, .room-hero {
  background: linear-gradient(135deg, #2c1230 0%, #4a2350 55%, #582A59 100%);
}
.grooming-hero {
  background: linear-gradient(135deg, #3a1a3d 0%, #582A59 55%, #7a4a7c 100%);
}
.cataxi-hero {
  background: linear-gradient(135deg, #1f3a2e 0%, #2f5c47 55%, #3f7a5f 100%);
}
.checkout-hero {
  background: linear-gradient(135deg, #241129 0%, #3d1f42 55%, #582A59 100%);
}
.portal-hero .paw-icon {
  display: block;
  font-size: 3rem;
  margin-bottom: 0.5rem;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
}

/* ── Step Indicators — "Purrogress" paw trail ──
   Signature element: a cat's own paw-print trail through its booking
   journey, filling in with Sunglow Yellow as steps complete, rather than
   a generic numbered 1-2-3 tracker. */
.cw-steps {
  display: flex;
  justify-content: center;
  gap: 0;
  position: relative;
}
.cw-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 140px;
  font-size: 0.78rem;
  font-family: var(--cw-font-body);
  color: #b8a3ba;
  position: relative;
  text-align: center;
}
.cw-step::before {
  content: '';
  position: absolute;
  top: 19px;
  left: 50%;
  right: -50%;
  height: 3px;
  background: repeating-linear-gradient(90deg, #e4d7e5 0 6px, transparent 6px 11px);
  z-index: 0;
}
.cw-step:last-child::before { display: none; }
.cw-step span {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #e4d7e5;
  color: #b8a3ba;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
  transition: all .25s ease;
}
/* step number wrapped in .cw-step-num (see template) so it can be swapped
   cleanly for a paw print once a step is active/done, instead of the two
   overlapping (a plain text node can't be hidden independently otherwise) */
.cw-step.active span .cw-step-num,
.cw-step.done span .cw-step-num { display: none; }
.cw-step-num { font-style: normal; }
.cw-step.active span::before,
.cw-step.done span::before {
  content: '🐾';
  font-size: 1rem;
}
.cw-step.active {
  color: var(--cw-primary);
  font-weight: 600;
}
.cw-step.active span {
  background: var(--cw-accent);
  border-color: var(--cw-accent);
  color: #442600;
  box-shadow: 0 0 0 5px rgba(255,205,52,.22);
  transform: scale(1.08);
}
.cw-step.done {
  color: var(--cw-primary);
}
.cw-step.done span {
  background: var(--cw-primary);
  border-color: var(--cw-primary);
  color: #fff;
}
.cw-step.done::before {
  background: linear-gradient(90deg, var(--cw-accent), var(--cw-accent));
}

/* ── Panel (card) ── */
.cw-panel {
  background: #fff;
  border-radius: var(--cw-card-radius);
  box-shadow: var(--cw-shadow);
  padding: 2rem 2.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(88,42,89,.05);
}
.cw-panel-title {
  font-family: var(--cw-font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--cw-primary);
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--cw-primary-tint);
}
/* generic inner-content wrapper used by dynamically-rendered panels
   (payment return page, room-mode-choice, pet-assignment) — previously
   referenced in templates but never actually styled. */
.cw-panel-inner { font-family: var(--cw-font-body); }

/* ── Sticky summary sidebar ──
   New: solves "the page looks empty on wide screens" directly — a
   persistent running summary of what's been chosen so far, instead of a
   lone centered form column with acres of unused space either side. */
.cw-summary-sidebar {
  position: sticky;
  top: 1.5rem;
  background: linear-gradient(165deg, #fff 0%, var(--cw-primary-tint) 130%);
  border-radius: var(--cw-card-radius);
  box-shadow: var(--cw-shadow);
  border: 1px solid rgba(88,42,89,.06);
  padding: 1.75rem;
  overflow: hidden;
}
.cw-summary-sidebar::before {
  content: '🐾';
  position: absolute;
  font-size: 7rem;
  opacity: .05;
  right: -1rem;
  top: -1.5rem;
  transform: rotate(18deg);
  pointer-events: none;
}
.cw-summary-title {
  font-family: var(--cw-font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--cw-primary);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.cw-summary-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: #a893aa;
  font-size: .88rem;
}
.cw-summary-empty .cw-summary-empty-icon {
  font-size: 2.5rem;
  display: block;
  margin-bottom: .5rem;
  opacity: .5;
}
.cw-summary-row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .55rem 0;
  border-bottom: 1px dashed rgba(88,42,89,.12);
  font-size: .88rem;
}
.cw-summary-row:last-of-type { border-bottom: none; }
.cw-summary-row-label { color: #8a728c; }
.cw-summary-row-value { font-weight: 600; color: var(--cw-primary); text-align: right; }
.cw-summary-total {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid var(--cw-accent);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.cw-summary-total-label { font-family: var(--cw-font-display); font-size: 1rem; color: var(--cw-primary); }
.cw-summary-total-value { font-family: var(--cw-font-display); font-size: 1.6rem; font-weight: 700; color: var(--cw-primary); }
@media (max-width: 991px) {
  .cw-summary-sidebar { position: static; margin-top: 1.5rem; }
}

/* ── Buttons ── */
.cw-btn-primary {
  background: var(--cw-primary);
  border-color: var(--cw-primary);
  color: #fff;
  border-radius: 12px;
  padding: 0.65rem 1.6rem;
  font-weight: 600;
  font-family: var(--cw-font-body);
  transition: background .2s, transform .12s, box-shadow .2s;
}
.cw-btn-primary:hover {
  background: var(--cw-primary-dk);
  border-color: var(--cw-primary-dk);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(88,42,89,.28);
}
.cw-btn-success {
  background: var(--cw-success);
  border-color: var(--cw-success);
  color: #fff;
  border-radius: 12px;
  padding: 0.65rem 1.6rem;
  font-weight: 600;
  transition: transform .12s, box-shadow .2s;
}
.cw-btn-success:hover {
  background: #388e3c;
  border-color: #388e3c;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(67,160,71,.3);
}
.cw-btn-pay {
  background: linear-gradient(135deg, var(--cw-accent), #ffe08a);
  border: none;
  color: #442600;
  border-radius: 14px;
  font-weight: 700;
  font-family: var(--cw-font-body);
  padding: 0.9rem;
  font-size: 1.1rem;
  box-shadow: 0 4px 18px rgba(255,205,52,.4);
  transition: transform .15s, box-shadow .15s;
}
.cw-btn-pay:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,205,52,.5);
  color: #442600;
}
.cw-btn-checkout {
  background: linear-gradient(135deg, var(--cw-success), var(--cw-teal));
  border: none;
  color: #fff;
  border-radius: 14px;
  font-weight: 700;
  padding: 0.9rem;
  font-size: 1.1rem;
  box-shadow: 0 4px 18px rgba(38,166,154,.32);
  transition: transform .15s, box-shadow .15s;
}
.cw-btn-checkout:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(38,166,154,.42);
  color: #fff;
}
.cw-btn-checkout.disabled,
.cw-btn-checkout:disabled {
  background: #cbb8cc;
  box-shadow: none;
  opacity: 0.7;
  cursor: not-allowed;
}

/* ── Service Cards ── */
.cw-service-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--cw-primary-tint);
  border: 2px solid #e9dcea;
  border-radius: 14px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: border-color .2s, background .2s, box-shadow .2s, transform .15s;
  width: 100%;
  margin: 0;
}
.cw-service-card:hover {
  border-color: var(--cw-accent);
  background: #fdf6e3;
  transform: translateY(-2px);
}
.cw-service-card input:checked ~ div { color: var(--cw-primary); }
.cw-service-card:has(input:checked) {
  border-color: var(--cw-primary);
  background: #f4eef5;
  box-shadow: 0 3px 12px rgba(88,42,89,.18);
}
.cw-service-card img { border: 1px solid #e9dcea; border-radius: 10px; }

/* ── Addon Section ── */
.cw-addon-section {
  background: var(--cw-primary-tint);
  border-radius: 14px;
  padding: 1.25rem;
  border: 1px solid #e9dcea;
}

/* ── Advisory Alerts ── */
.cw-alert-soft-pink {
  background: linear-gradient(135deg, var(--cw-blush), #fef4f6);
  border-left: 4px solid var(--cw-blush-dk) !important;
  border-radius: 10px;
}
.cw-alert-success-soft {
  background: linear-gradient(135deg, #eaf7ec, #f1f8e9);
  border-left: 4px solid var(--cw-success) !important;
  border-radius: 10px;
}
.cw-alert-warning-soft {
  background: linear-gradient(135deg, #fff8e1, #fffde7);
  border-left: 4px solid var(--cw-accent) !important;
  border-radius: 10px;
}

/* ── Room Cards ── */
.cw-room-card {
  border: 2px solid #e9dcea;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s;
}
.cw-room-card:hover {
  border-color: var(--cw-accent);
  box-shadow: var(--cw-shadow-lift);
  transform: translateY(-4px);
}
.cw-room-card.selected {
  border-color: var(--cw-primary);
  background: var(--cw-primary-tint);
}
.cw-room-card .card-img-top { height: 160px; object-fit: cover; }
.cw-room-price {
  font-family: var(--cw-font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cw-primary);
}
.cw-badge-avail {
  background: #e5f5e6;
  color: var(--cw-success);
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 600;
}
.cw-badge-full {
  background: #fbe4e5;
  color: #c62828;
  border-radius: 20px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* ── Total Row ── */
.cw-total-row {
  background: linear-gradient(135deg, var(--cw-primary-tint), #ede1ee);
  border: 2px solid #d9c4da;
  border-radius: 12px;
}

/* ── Success Box ── */
.cw-success-box {
  background: linear-gradient(135deg, #eaf7ec, #f1f8e9);
  border: 2px solid #a5d6a7;
  border-radius: 16px;
  padding: 1.5rem 2rem;
  text-align: center;
}

/* ── CatTaxi Service Type Cards ── */
.cw-type-card {
  border: 2px solid #e9dcea;
  border-radius: 16px;
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  height: 100%;
}
.cw-service-type-card input:checked ~ .cw-type-card {
  border-color: var(--cw-primary);
  background: var(--cw-primary-tint);
  box-shadow: 0 4px 14px rgba(88,42,89,.18);
}
.cw-type-card:hover { border-color: var(--cw-accent); transform: translateY(-2px); }
.cw-type-icon { font-size: 2.5rem; }

/* ── QR Code Box ── */
.cw-qr-box {
  width: 100px;
  height: 100px;
  border: 2px solid #e9dcea;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.cw-qr-box canvas { display: block !important; }

/* ── Detail Grid (checkout) ── */
.cw-detail-grid { display: flex; flex-direction: column; gap: 0; }
.cw-detail-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px dashed rgba(88,42,89,.12);
}
.cw-detail-row:last-child { border-bottom: none; }
.cw-detail-label {
  color: #a893aa;
  font-size: 0.85rem;
  min-width: 120px;
}
.cw-detail-value { font-size: 0.95rem; text-align: right; font-weight: 500; }

/* ── Badges ── */
.cw-badge-room     { background: var(--cw-primary-tint); color: var(--cw-primary); }
.cw-badge-grooming { background: var(--cw-blush); color: #a13a54; }
.cw-badge-cataxi   { background: var(--cw-mint); color: #1f6b4a; }

/* ── Slot Card ── */
.cw-slot-card {
  border: 2px solid #e9dcea;
  border-radius: 12px;
  padding: 0.85rem;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
}
.cw-slot-card:hover  { border-color: var(--cw-accent); background: #fdf6e3; transform: translateY(-2px); }
.cw-slot-card.active { border-color: var(--cw-primary); background: var(--cw-primary-tint); }
.cw-slot-remaining {
  font-size: 0.75rem;
  color: var(--cw-success);
  font-weight: 600;
}

/* ── Checkout Actions ── */
.cw-checkout-actions { display: flex; flex-direction: column; gap: 0.5rem; }

/* ── Pricing Info ── */
.cw-pricing-info { background: var(--cw-primary-tint); border-radius: 10px; }

/* ── Spinner overlay ── */
.cw-loading {
  position: fixed; inset: 0;
  background: rgba(255,251,245,.85);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  flex-direction: column;
  gap: 1rem;
}
.cw-loading::before {
  content: '🐾';
  font-size: 2.5rem;
  animation: cw-paw-bounce 1s ease-in-out infinite;
}
@keyframes cw-paw-bounce {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50%      { transform: translateY(-14px) rotate(8deg); }
}

/* ── Empty / no-results state ──
   New: replaces bare "no rooms found" text with something a cat-hotel
   customer would actually enjoy landing on. */
.cw-empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: #a893aa;
}
.cw-empty-state .cw-empty-icon {
  font-size: 3.5rem;
  display: block;
  margin-bottom: .75rem;
}
.cw-empty-state h5 {
  color: var(--cw-primary);
  font-family: var(--cw-font-display);
  margin-bottom: .4rem;
}

/* ── Responsive ── */
@media (max-width: 576px) {
  .cw-panel { padding: 1.35rem; }
  .cw-steps { gap: 0; overflow-x: auto; }
}

/* ══ Room Portal Grid ══
   Single column, unconditionally — this grid now lives inside the
   narrower col-lg-8 content column (added alongside the summary sidebar),
   not the full page width it originally had. Previously tried a
   min-width:1400px exception to allow 2 columns on very wide screens, but
   even col-lg-8 on a 1400px+ viewport isn't wide enough for two of these
   horizontal cards (each needs a fixed 260px image column plus a fair
   amount of text) — confirmed by testing, cards were still visibly cut
   off. Horizontal cards are designed to fill one wide column well, so no
   multi-column mode is needed at all. */
#rooms_list.cw-rooms-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 1.5rem !important;
  width: 100%;
}

/* Horizontal card: image left (fixed 260px) · details right */
.cw-room-hcard {
  display: grid !important;
  grid-template-columns: 260px 1fr !important;
  border: 1px solid #e9dcea;
  border-radius: var(--cw-card-radius);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 3px 14px rgba(88,42,89,.08);
  transition: box-shadow .22s, transform .18s;
  min-height: 240px;
}
.cw-room-hcard:hover {
  box-shadow: var(--cw-shadow-lift);
  transform: translateY(-3px);
}
@media (max-width: 600px) {
  .cw-room-hcard { grid-template-columns: 1fr !important; }
  .cw-room-hcard-img { min-height: 180px !important; }
}

/* Left image column */
.cw-room-hcard-img {
  position: relative;
  overflow: hidden;
  background: var(--cw-primary-tint);
  min-height: 240px;
}
.cw-room-hcard-img .carousel,
.cw-room-hcard-img .carousel-inner,
.cw-room-hcard-img .carousel-item {
  height: 100%;
  min-height: 240px;
}
.cw-room-hcard-img .carousel-item img,
.cw-room-img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  display: block;
}
.cw-room-img-placeholder {
  width: 100%;
  min-height: 240px;
  background: var(--cw-primary-tint);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Availability badge overlaid on image */
.cw-room-img-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 10;
}
.cw-badge-avail {
  background: rgba(67,160,71,.9);
  color: #fff;
}
.cw-badge-low {
  background: rgba(230,124,20,.9);
  color: #fff;
}

/* Right details column */
.cw-room-hcard-body {
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Feature badges */
.cw-feature-badge {
  background: var(--cw-primary-tint);
  color: var(--cw-primary);
  border: 1px solid #d9c4da;
  font-weight: 500;
  font-size: .7rem;
  border-radius: 20px;
  padding: .15rem .6rem;
}

/* Availability bar */
.cw-avail-bar {
  height: 5px;
  background: #e9dcea;
  border-radius: 10px;
  overflow: hidden;
}
.cw-avail-bar-fill {
  height: 100%;
  border-radius: 10px;
  transition: width .4s;
  background: var(--cw-accent);
}

/* Stay total */
.cw-stay-total {
  background: var(--cw-primary-tint);
  border: 1px solid #e9dcea;
  border-radius: 10px;
}

/* ── Pet assignment cards (existing / new cat picker) ──
   Styling for the dynamically-rendered pet-slot cards from
   showPetAssignmentPanel() in portal_booking.js — those use plain
   Bootstrap `.card` markup, so this targets that structurally rather
   than requiring any JS/markup changes. */
#pet_slots_container .card {
  border: 2px solid #e9dcea;
  border-radius: 14px;
  transition: border-color .2s, box-shadow .2s;
}
#pet_slots_container .card:hover {
  border-color: var(--cw-accent);
  box-shadow: 0 3px 12px rgba(88,42,89,.1);
}
#pet_slots_container .btn-check:checked + .btn-outline-primary {
  background: var(--cw-primary);
  border-color: var(--cw-primary);
}
#pet_slots_container .btn-outline-primary {
  color: var(--cw-primary);
  border-color: var(--cw-primary);
}

/* ═══════════════════════════════════════════════════
   MULTI-SERVICE BOOKING BAR (homepage hero widget)
   ═══════════════════════════════════════════════════ */

.msb-shell {
  background: rgba(255,255,255,.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 20px;
  /* overflow: visible — DO NOT set hidden; it clips Bootstrap dropdowns */
  overflow: visible;
  max-width: 820px;
  margin: 0 auto;
  box-shadow: 0 8px 40px rgba(0,0,0,.25);
  position: relative;
  z-index: 100;  /* sit above hero overlay */
}

/* ── Tabs ── */
.msb-tabs {
  display: flex;
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,255,255,.1);
  /* rounded top corners to match shell (since shell no longer clips) */
  border-radius: 20px 20px 0 0;
  overflow: hidden;  /* only tabs row clips, not the whole shell */
}
.msb-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: .75rem .5rem;
  background: transparent;
  border: none;
  color: rgba(255,255,255,.65);
  cursor: pointer;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  transition: background .2s, color .2s;
  position: relative;
}
.msb-tab::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  transition: background .2s;
  border-radius: 3px 3px 0 0;
}
.msb-tab:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
}
.msb-tab--active {
  background: rgba(255,255,255,.1);
  color: #fff;
}
.msb-tab--active::after { background: #0dcaf0; }
.msb-tab-icon  { font-size: 1.3rem; line-height: 1; }
.msb-tab-label { line-height: 1; }

/* ── Body ── */
.msb-body {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: .75rem;
  padding: 1.25rem 1.5rem;
  /* rounded bottom corners to match shell */
  border-radius: 0 0 20px 20px;
  /* allow dropdowns to escape */
  overflow: visible;
  position: relative;
}

/* ── Fields ── */
.msb-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 120px;
}
.msb-field--date  { flex: 2; min-width: 200px; }
.msb-field--wide  { flex: 100%; }
.msb-field--counter { flex: 0 0 auto; min-width: 90px; }

.msb-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.7);
  margin: 0;
}

/* ── Input ── */
.msb-input {
  width: 100%;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  color: #fff;
  font-size: .88rem;
  padding: .55rem .85rem;
  outline: none;
  transition: background .15s, border-color .15s;
}
.msb-input::placeholder { color: rgba(255,255,255,.5); }
.msb-input:focus {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.5);
}
/* dark text for date input (browser native) */
input[type="date"].msb-input { color-scheme: dark; }

/* ── Input with icon ── */
.msb-input-icon { position: relative; }
.msb-input-icon .msb-input { padding-right: 2rem; }
.msb-icon-svg {
  position: absolute;
  right: .65rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.5);
  pointer-events: none;
}

/* ── Dropdown button ── */
.msb-dropdown-btn {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dropdown menus inside the booking bar — ensure visibility above hero */
.msb-shell .dropdown-menu {
  z-index: 9999 !important;
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.2);
  min-width: 220px;
  padding: .5rem;
  /* Force display below the toggle button */
  margin-top: 4px !important;
}
.msb-shell .dropdown-menu .dropdown-item {
  font-size: .85rem;
  border-radius: 8px;
  color: #333;
  padding: .5rem .75rem;
}
.msb-shell .dropdown-menu .dropdown-item:hover {
  background: #f0f2ff;
  color: #3949ab;
}

/* Also ensure the field/dropdown wrapper doesn't clip */
.msb-field .dropdown,
.msb-field--wide .dropdown {
  position: relative;
}

/* ── Counter ── */
.msb-counter {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  overflow: hidden;
}
.msb-cnt-btn {
  width: 30px;
  height: 36px;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}
.msb-cnt-btn:hover { background: rgba(255,255,255,.12); }
.msb-cnt-val {
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: .9rem;
  font-weight: 700;
  line-height: 36px;
  min-width: 24px;
}

/* ── Trip type pills (CatTaxi) ── */
.msb-trip-types {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
.msb-trip-btn {
  padding: .4rem .85rem;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  color: rgba(255,255,255,.75);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
}
.msb-trip-btn:hover { background: rgba(255,255,255,.2); color: #fff; }
.msb-trip-btn.active {
  background: #0dcaf0;
  border-color: #0dcaf0;
  color: #000;
}

/* ── Info badge ── */
.msb-info-badge {
  width: 100%;
  font-size: .75rem;
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  padding: .4rem .85rem;
  margin: -.2rem 0;
}
.msb-info-badge--green { border-color: rgba(67,160,71,.5); background: rgba(67,160,71,.12); }
.msb-info-badge--teal  { border-color: rgba(38,166,154,.5); background: rgba(38,166,154,.12); }

/* ── CTA buttons ── */
.msb-cta {
  border: none;
  border-radius: 10px;
  padding: .6rem 1.4rem;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .5rem;
  white-space: nowrap;
  transition: filter .15s, transform .12s;
  align-self: flex-end;
  flex-shrink: 0;
}
.msb-cta:hover { filter: brightness(1.1); transform: translateY(-1px); }
.msb-cta--room   { background: #0dcaf0; color: #000; }
.msb-cta--groom  { background: #e91e63; color: #fff; }
.msb-cta--neuter { background: #43a047; color: #fff; }
.msb-cta--cataxi { background: #26a69a; color: #fff; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .msb-tabs     { flex-wrap: wrap; }
  .msb-tab      { flex: 1 1 50%; border-bottom: 1px solid rgba(255,255,255,.07); }
  .msb-body     { padding: 1rem; }
  .msb-field    { flex: 1 1 100%; }
  .msb-field--counter { flex: 1; }
  .msb-cta      { width: 100%; justify-content: center; }
}