/* ═══════════════════════════════════════════════════════════
   Dwello cards - flat, Booking.com-style
   White surface · 1px light-grey border · 8px corners · no
   shadows · no lift/zoom on hover (border darkens slightly,
   title underlines). Loaded last on public pages.
   ═══════════════════════════════════════════════════════════ */

:root {
  --dw-card-border: #e7e7e7;
  --dw-card-border-hover: #c6c6c6;
  --dw-card-radius: 8px;
}

/* ── Base card ──────────────────────────────────────────── */
.card,
.card.border-0,
.card.shadow, .card.shadow-sm, .card.shadow-lg {
  background: #fff;
  border: 1px solid var(--dw-card-border) !important;
  border-radius: var(--dw-card-radius) !important;
  box-shadow: none !important;
}
.card.rounded-4, .card.rounded-3, .card.rounded-5 { border-radius: var(--dw-card-radius) !important; }
.card { overflow: hidden; transition: border-color .15s ease; }

/* Hover: no lift, no shadow - just a firmer border */
.card:hover, .card-hover:hover, .card.card-hover:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: var(--dw-card-border-hover) !important;
}

/* Images sit flush to the top edge; no zoom on hover */
.card .card-img-top { border-radius: 0; }
.card img { transition: none; }
.card:hover img, .card-hover:hover img, .card:hover .dw-card-media img { transform: none !important; }

/* Footer blends into the card */
.card .card-footer { background: #fff; border-top: 0; }

/* Title link behaves like Booking: underline on hover */
.card h3 a, .card h5 a, .card h6 a, .card .card-title a { text-decoration: none; }
.card:hover h3 a, .card:hover h5 a, .card:hover h6 a, .card:hover .card-title a { text-decoration: underline; text-underline-offset: 2px; }

/* Overlays on the image: flat, no drop-shadows */
.card .badge, .dw-verified-badge, .dw-save-btn, .btn-save-toggle { box-shadow: none !important; }
.dw-save-btn, .btn-save-toggle { background: #fff !important; }

/* ── Journey surfaces that act as cards ─────────────────── */
.dw-journey-card, .dw-tile, .dw-flow-card, .dw-crosslink,
.dw-choice, .dw-choice:hover,
.admin-table-card {
  box-shadow: none !important;
}
.dw-journey-card, .dw-tile, .dw-flow-card {
  border: 1px solid var(--dw-card-border) !important;
  border-radius: var(--dw-card-radius) !important;
}
.dw-journey-card:hover, .dw-tile:hover { transform: none !important; border-color: var(--dw-card-border-hover) !important; }
.dw-choice:hover { transform: none !important; }
.dw-journey-card:hover .dw-ico { transform: none !important; }

/* Selected choice keeps a clear (non-shadow) indicator */
.dw-choice.is-selected, .dw-choice[aria-pressed="true"] { box-shadow: none !important; border-color: var(--mc-primary) !important; }

/* Rounded "pill" photos & owner/listing tiles inside cards follow the same radius */
.dw-card-media { border-radius: 0; }
.dw-photo { border-radius: 6px; }

/* ── Other content panels (e.g. stay collections, info boxes) ─
   Flat like the cards. Dropdowns, modals and toasts keep their
   shadow because they float above the page. */
main .shadow-sm:not(.dropdown-menu):not(.modal-content):not(.dw-toast),
main .shadow:not(.dropdown-menu):not(.modal-content):not(.dw-toast),
main .shadow-lg:not(.dropdown-menu):not(.modal-content):not(.dw-toast) {
  box-shadow: none !important;
}
main .rounded-4.shadow-sm, main .rounded-4.shadow { border-radius: var(--dw-card-radius) !important; }

/* ═══ Page headers - compact and flat (replaces the tall wave banner site-wide) ═══
   Same markup (.page-hero) on ~25 pages; styled like Booking.com's page title band. */
.page-hero {
  background: var(--mc-primary) !important;
  padding: 28px 0 30px !important;
  min-height: 0 !important;
  border-bottom: 3px solid var(--mc-accent);
}
.page-hero::before, .page-hero::after { display: none !important; }
.page-hero .page-hero-wave { display: none !important; }
.page-hero .container { padding-top: 0 !important; padding-bottom: 0 !important; }
.page-hero h1, .page-hero .h1, .page-hero .h2 { font-size: clamp(1.45rem, 2.6vw, 1.9rem) !important; margin-bottom: 6px !important; letter-spacing: -0.02em; }
.page-hero .lead, .page-hero p { font-size: .98rem !important; line-height: 1.5; margin-bottom: 0; }
.page-hero .section-label { font-size: .82rem !important; margin-bottom: 4px !important; }
.page-hero .breadcrumb { margin-top: 10px !important; font-size: .82rem !important; }
.page-hero + section { padding-top: 28px !important; }
@media (max-width: 575.98px) { .page-hero { padding: 20px 0 22px !important; } }