/* =========================================================================
   Fahrly — modern theme (Bootstrap 5 base, Airbnb-inspired visual style)
   Loaded AFTER materialize.css and bootstrap.css so these rules win.
   ========================================================================= */

/* BUG FIX: neither Materialize nor this theme ever set box-sizing
   anywhere, so inputs/buttons/cards using `width: 100%` (or filling a
   flex/grid cell) plus `padding` rendered WIDER than their container in
   the browser's default content-box model - the padding was added on
   top of the 100% width rather than eaten out of it. That's what caused
   things like the booking-card date input's placeholder text and the
   "Забронировать и оплатить" button spilling outside the sidebar
   column. One global reset fixes every element built this way at once,
   rather than patching each one individually. */
*, *::before, *::after { box-sizing: border-box; }
:root {
  --cs-accent: #FF385C;       /* Airbnb-style coral/pink accent */
  --cs-accent-dark: #E31C5F;
  --cs-ink: #222222;          /* near-black body text */
  --cs-ink-light: #6a6a6a;
  --cs-border: #ebebeb;
  --cs-bg: #ffffff;
  --cs-bg-soft: #f7f7f7;
  /* BUG FIX: my.php's own rating-confirmation page already referenced
     var(--cs-success) for its checkmark icon, but this variable was
     never actually defined anywhere in the theme - the icon was
     silently rendering with no intentional color at all rather than
     the green it was meant to have. Added here along with --cs-warning
     for the new .cs-status-page pattern below (booking_pay.php /
     booking_verify.php / card_add.php's own confirmation screens),
     which needed a genuine amber/pending color too. */
  --cs-success: #1e7e34;
  --cs-success-soft: #e8f5e9;
  --cs-warning: #b8860b;
  --cs-warning-soft: #fff8e1;
  --cs-radius-lg: 16px;
  --cs-radius-md: 12px;
  --cs-radius-sm: 8px;
  --cs-shadow-sm: 0 1px 2px rgba(0,0,0,.08);
  --cs-shadow-md: 0 6px 16px rgba(0,0,0,.12);
  --cs-shadow-hover: 0 10px 24px rgba(0,0,0,.16);
  --cs-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Shared "outcome" page pattern - a payment/verification confirmation,
   a pending-webhook notice, or a plain error message (card_add.php,
   booking_pay.php, booking_verify.php's own return/status screens all
   use this) - a centered, width-constrained card with a colored icon
   circle rather than a bare heading stretched across the full page
   width, which read as cramped/plain on these specific screens. */
.cs-status-page {
  max-width: 440px;
  margin: 48px auto;
  padding: 40px 32px;
  text-align: center;
  /* FEATURE: was bare text floating on the page background with
     nothing grounding it visually - wrapped in the same card
     treatment (border, radius, soft shadow) every other card on the
     site already uses, so a payment/verification outcome page reads
     as an intentional piece of UI rather than plain unstyled text. */
  background: var(--cs-bg);
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-sm);
}
.cs-status-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.75rem;
}
.cs-status-icon.is-success { background: var(--cs-success-soft); color: var(--cs-success); }
.cs-status-icon.is-pending { background: var(--cs-warning-soft); color: var(--cs-warning); }
.cs-status-icon.is-error   { background: #fdecea; color: #b3261e; }
.cs-status-page h4 {
  font-family: var(--cs-font);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--cs-ink);
  margin: 0 0 10px;
}
.cs-status-page p {
  font-family: var(--cs-font);
  color: var(--cs-ink-light);
  font-size: .95rem;
  line-height: 1.5;
  margin: 0 0 24px;
}
/* A button/link right after the heading (no <p> in between) still
   needs breathing room, not just the heading's own 10px bottom
   margin - the same visual gap a <p> would have provided either way. */
.cs-status-page h4 + .btn,
.cs-status-page h4 + a.btn {
  margin-top: 24px;
}
.cs-status-page .btn { min-width: 200px; }

html, body {
  font-family: var(--cs-font);
  color: var(--cs-ink);
  background: var(--cs-bg);
}

body { display: flex; min-height: 100vh; flex-direction: column; }
main { flex: 1 0 auto; }

a { color: var(--cs-ink); }
a:hover { color: var(--cs-accent); }

h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--cs-ink); letter-spacing: -0.02em; }

/* ---- Buttons: pill-shaped, coral accent, subtle hover lift ---- */
.btn, .cs-btn, button.btn, a.btn {
  background: var(--cs-accent) !important;
  border: none;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  min-height: 46px;
  height: auto;
  line-height: 1.3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none !important;
  box-shadow: none !important;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover, .cs-btn:hover, button.btn:hover, a.btn:hover {
  background: var(--cs-accent-dark) !important;
  transform: translateY(-1px);
  box-shadow: var(--cs-shadow-md) !important;
}
.btn.black, .btn.red, button.btn.black, a.btn.black, a.btn.red {
  background: var(--cs-accent) !important;
}
.btn-outline, .cs-btn-outline, button.btn-outline, button.cs-btn-outline, a.btn-outline, a.cs-btn-outline {
  background: transparent !important;
  border: 1px solid var(--cs-ink) !important;
  color: var(--cs-ink) !important;
}
/* Destructive-action variant of the outline button (delete/revoke/
   cancel confirmations) - a CLASS instead of the inline
   `style="color:#b3261e;border-color:#b3261e"` this project used to
   repeat at every call site, which never actually took effect: the
   base outline rule above carries `!important`, and a non-important
   inline style cannot override an `!important` rule from an external
   stylesheet no matter how it's normally prioritized. Declared after
   the base rule with its own `!important` so it wins on equal
   specificity + source order instead. */
.cs-btn-danger, button.cs-btn-danger, a.cs-btn-danger {
  color: #b3261e !important;
  border-color: #b3261e !important;
}
.cs-btn-danger:hover, button.cs-btn-danger:hover, a.cs-btn-danger:hover {
  background: #fdecea !important;
}
.btn-floating {
  border-radius: 50% !important;
  background: var(--cs-bg) !important;
  color: var(--cs-accent) !important;
  box-shadow: var(--cs-shadow-sm) !important;
}
.btn-floating:hover { background: var(--cs-bg) !important; box-shadow: var(--cs-shadow-md) !important; }

/* ---- Navbar ---- */
.cs-navbar {
  background: var(--cs-bg);
  border-bottom: 1px solid var(--cs-border);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 1000;
  height: auto !important;
  line-height: normal !important;
}
/* LAYOUT FIX: Materialize's own `nav .brand-logo` rule is
   `position: absolute` by default (it only becomes flow-positioned with
   extra .left/.right/.center modifier classes, which this markup never
   had) - so the logo floated independently of everything else in the
   bar instead of sitting on the same baseline as the menu, causing the
   "logo/buttons slide out of place" look. The whole bar is now a plain
   flex row that Materialize's absolute positioning can't touch. */
.cs-navbar .nav-wrapper {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: auto !important;
  position: relative;
}
.cs-navbar .cs-logo {
  position: static !important;
  transform: none !important;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1.5rem;
  line-height: normal;
  color: var(--cs-accent) !important;
  letter-spacing: -0.03em;
}
.cs-navbar i.material-icons, .cs-navbar i.bi {
  height: auto !important;
  line-height: normal !important;
  display: inline-block !important;
}
.cs-navbar .nav-link {
  color: var(--cs-ink);
  font-weight: 500;
  padding: 10px 14px !important;
  border-radius: 999px;
}
.cs-navbar .nav-link:hover { background: var(--cs-bg-soft); }

/* Compact icon-only triggers (currency/language) + user avatar dropdown
   trigger - replaces what used to be a row of full-width pill buttons
   that didn't fit in the navbar. Shown at every width - per request,
   the hamburger/slide-out mobile menu was removed and this row is the
   one and only mobile menu now, so it must never be hidden. */
.cs-navbar ul.right {
  display: flex !important;
  align-items: center;
  gap: 4px;
  position: static !important;
  height: auto !important;
  margin: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cs-navbar .cs-icon-trigger, .cs-navbar .cs-user-trigger {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  color: var(--cs-ink) !important;
  position: relative;
  font-size: 1.1rem;
}
.cs-navbar .cs-icon-trigger:hover, .cs-navbar .cs-user-trigger:hover { background: var(--cs-bg-soft); }
.cs-navbar .cs-user-trigger img { border: 1px solid var(--cs-border); }
.cs-nav-dot {
  position: absolute; top: 2px; right: 2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--cs-accent); border: 2px solid #fff;
}
.cs-menu-badge {
  background: var(--cs-accent); color: #fff; font-size: .7rem;
  border-radius: 999px; padding: 1px 7px; margin-left: 6px;
}

/* Self-contained dropdown (no Materialize JS positioning involved) -
   the trigger and its menu share one relatively-positioned wrapper, so
   the menu is always anchored exactly under its own button. */
.cs-dropdown { position: relative; list-style: none; }
.cs-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: var(--cs-radius-sm);
  box-shadow: var(--cs-shadow-md);
  min-width: 180px;
  padding: 8px 0;
  z-index: 2000;
  list-style: none;
  margin: 0;
  line-height: normal;
}
.cs-dropdown-menu.cs-dropdown-menu-right { left: auto; right: 0; transform: none; }
.cs-dropdown.cs-open .cs-dropdown-menu { display: block; }
.cs-dropdown-menu li {
  list-style: none;
  float: none !important;
  padding: 0 !important;
  width: 100%;
}
.cs-dropdown-menu li > a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  color: var(--cs-ink) !important;
  white-space: nowrap;
}
.cs-dropdown-menu li > a:hover { background: var(--cs-bg-soft); }
.cs-dropdown-menu li > a i {
  color: var(--cs-ink-light);
  font-size: 1.05rem;
  display: inline-block !important;
  height: auto !important;
  line-height: normal !important;
}
.cs-dropdown-divider { height: 1px; background: var(--cs-border); margin: 6px 0; }

/* ---- Cards (listing cards, generic cards) ---- */
.cs-card, .card {
  border: none !important;
  border-radius: var(--cs-radius-lg) !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.cs-card:hover, .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--cs-shadow-hover) !important;
}
.cs-listing-card { position: relative; margin-bottom: 28px; }
.cs-listing-card .cs-photo {
  position: relative;
  border-radius: var(--cs-radius-lg);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--cs-bg-soft);
}
.cs-listing-card .cs-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.cs-listing-card:hover .cs-photo img { transform: scale(1.05); }
.cs-listing-card .cs-fav {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255,255,255,.85);
  border-radius: 50%;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--cs-shadow-sm);
  color: var(--cs-accent);
  text-decoration: none;
}
.cs-listing-card .cs-badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--cs-ink);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: .02em;
}
.cs-listing-card .cs-badge.cs-badge-top { background: var(--cs-accent); }
/* "Выделение цветом" (color-highlight promotion) - previously only got
   the same plain dark badge as any other status text, which didn't
   actually read as a distinct "highlighted with color" treatment the
   feature's own name promises. Gold/amber is deliberately a different
   hue from the pink accent used for "top" (--cs-accent), so the two
   promotion tiers stay visually distinguishable from each other even
   when a listing has both at once (the badge priority in
   render_car_card() shows "top" first when both are active - the ring
   below still applies regardless, so a color-highlighted top listing
   keeps its gold ring even while showing the pink top badge). */
.cs-listing-card .cs-badge.cs-badge-color { background: #b8860b; }
/* Replaces an earlier, heavier attempt (a thick inset outline ring
   around the photo plus a gradient wash over the whole card) that read
   more like a discount sticker than a premium accent, and risked
   throwing off alignment with un-highlighted neighbours in the same
   flex row if it had ever needed padding/margin adjustments. A slim
   real border + soft matching-color glow on just the photo reads as
   "this one's a little special" without shouting, and doesn't touch
   the card's box model enough to disturb grid alignment at all. */
.cs-listing-card.cs-listing-card-highlighted .cs-photo {
  border: 2px solid #d4a017;
  box-shadow: 0 6px 18px rgba(212,160,23,.28);
}
.cs-listing-card .cs-title { font-weight: 700; margin-top: 10px; font-size: 1rem; }
.cs-listing-card .cs-sub { color: var(--cs-ink-light); font-size: .9rem; }
.cs-listing-card .cs-price { font-weight: 700; margin-top: 4px; }
.cs-listing-card .cs-price small { font-weight: 400; color: var(--cs-ink-light); }
.cs-listing-card a.cs-card-link { text-decoration: none; color: inherit; display: block; }

/* FEATURE: post-rental star ratings (migrations/021_ratings.sql).
   Filled/empty stars use the same gold accent as the highlight-color
   feature above, rather than introducing a THIRD accent color to the
   theme just for this - both already mean "something positive/notable
   about this listing" to a visitor, so sharing the color reads as
   consistent rather than coincidental. */
.cs-rating { display: inline-flex; align-items: center; gap: 6px; font-size: .9rem; }
.cs-rating .bi-star-fill { color: #d4a017; }
.cs-rating .bi-star { color: var(--cs-border); }
.cs-rating-empty { color: var(--cs-ink-light); font-size: .85rem; }
.cs-rating-count { color: var(--cs-ink-light); font-size: .85rem; }
.cs-rating-stars-inline .bi-star-fill { color: #d4a017; font-size: .8rem; }
.cs-rating-stars-inline .bi-star { color: var(--cs-border); font-size: .8rem; }

/* Star picker on the rating submission form (my.php?action=rate_order) -
   plain radio inputs under the hood (works with no JS at all, and
   submits normally like every other form on this site) but rendered as
   a row of clickable stars via the label-after-input + CSS
   general-sibling-selector trick: hovering/selecting a star visually
   fills every star UP TO AND INCLUDING it by matching all LATER
   sibling labels (since the stars are laid out 5-down-to-1 in the
   markup - see my.php::rate_order() - specifically so this "fill
   backwards toward 1" selector works with plain CSS). */
.cs-star-picker { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.cs-star-picker input { position: absolute; opacity: 0; width: 0; height: 0; }
.cs-star-picker label { font-size: 2rem; line-height: 1; cursor: pointer; color: var(--cs-border); transition: color .15s; }
.cs-star-picker input:checked ~ label,
.cs-star-picker label:hover,
.cs-star-picker label:hover ~ label { color: #d4a017; }
.cs-listing-card .cs-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cs-listing-card .cs-card-actions a, .cs-listing-card .cs-card-actions button {
  flex: 1 1 calc(50% - 4px);
  min-width: 100px;
  text-align: center;
  white-space: nowrap;
}

/* Flexbox grid for car listing cards (see render_car_card() in
   include/functions.php for why this isn't Materialize's .row/.col). */
.cs-cards-grid { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 10px; }
.cs-card-col { flex: 1 1 calc(33.333% - 16px); max-width: calc(33.333% - 16px); }
@media (max-width: 992px) { .cs-card-col { flex-basis: calc(50% - 12px); max-width: calc(50% - 12px); } }
@media (max-width: 600px) { .cs-card-col { flex-basis: 100%; max-width: 100%; } }

/* ---- Hero (home page) ---- */
.cs-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #3a3a3a; /* visible fallback while/if the photo doesn't load */
  border-radius: 0 0 var(--cs-radius-lg) var(--cs-radius-lg);
  padding: 110px 20px 90px;
  text-align: center;
  color: #fff;
  overflow: hidden;
}
.cs-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.25));
}
.cs-hero > * { position: relative; z-index: 1; }
.cs-hero h1 { color: #fff; font-size: 2.6rem; margin-bottom: .5rem; }
.cs-hero p.lead { color: #f2f2f2; font-size: 1.2rem; margin-bottom: 2rem; }
/* Outline buttons sitting directly on the hero's dark photo (e.g.
   "Случайный автомобиль"/"Рядом со мной" below the search bar) need a
   WHITE border+text, not the dark-ink outline style used everywhere
   else on this site's plain white backgrounds - the default
   .cs-btn-outline would be nearly invisible against a dark photo. This
   only ever mattered visually once .btn-outline/.cs-btn-outline started
   rendering as an actual transparent outline (see the button.btn vs
   .btn-outline specificity fix elsewhere in theme.css) - before that
   fix, EVERY outline button on the whole site (including these two)
   accidentally rendered as a solid filled pink button regardless of its
   class, which happened to still read fine against a dark photo purely
   by coincidence, not by design. */
.cs-hero .btn-outline, .cs-hero .cs-btn-outline,
.cs-hero button.btn-outline, .cs-hero button.cs-btn-outline,
.cs-hero a.btn-outline, .cs-hero a.cs-btn-outline {
  border-color: #fff !important;
  color: #fff !important;
}
.cs-hero .btn-outline:hover, .cs-hero .cs-btn-outline:hover,
.cs-hero button.btn-outline:hover, .cs-hero button.cs-btn-outline:hover,
.cs-hero a.btn-outline:hover, .cs-hero a.cs-btn-outline:hover {
  background: rgba(255,255,255,.15) !important;
}
.cs-search-bar {
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--cs-shadow-md);
  padding: 8px;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.cs-search-bar input {
  border: none; outline: none; flex: 1;
  padding: 12px 20px; font-size: 1rem; border-radius: 999px;
}
.cs-search-bar button {
  background: var(--cs-accent);
  color: #fff; border: none;
  width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* Airbnb-style segmented search pill: distinct labelled fields separated
   by thin dividers, ending in a circular search button. Each segment
   highlights independently on focus/hover, like Airbnb's own search bar. */
.cs-airbnb-search {
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--cs-shadow-md);
  padding: 6px;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
}
.cs-search-seg {
  flex: 1;
  min-width: 0;
  padding: 8px 24px;
  border-radius: 999px;
  text-align: left;
  cursor: text;
  transition: background .15s ease;
}
.cs-search-seg:hover, .cs-search-seg:focus-within { background: var(--cs-bg-soft); }
.cs-search-seg label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  color: var(--cs-ink);
  margin-bottom: 2px;
}
.cs-search-seg input {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  outline: none;
  width: 100%;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  font-size: .95rem;
  background: transparent;
  color: var(--cs-ink);
}
.cs-search-seg input:focus {
  border: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.cs-search-seg input::placeholder { color: var(--cs-ink-light); }
.cs-search-divider {
  width: 1px;
  background: var(--cs-border);
  margin: 10px 0;
  flex-shrink: 0;
}
.cs-search-btn {
  background: var(--cs-accent);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  transition: background .15s ease, transform .15s ease;
}
.cs-search-btn:hover { background: var(--cs-accent-dark); transform: scale(1.05); }

@media (max-width: 600px) {
  .cs-airbnb-search { flex-direction: column; border-radius: var(--cs-radius-lg); padding: 10px; }
  .cs-search-divider { width: auto; height: 1px; margin: 2px 12px; }
  .cs-search-seg { padding: 8px 14px; }
  .cs-search-btn { width: 100%; border-radius: 999px; margin-top: 6px; gap: 8px; }
  .cs-search-btn::after { content: "Поиск"; font-weight: 600; margin-left: 8px; }
}

/* ---- Section headers ---- */
.cs-section-title { font-size: 1.6rem; margin: 40px 0 20px; }

/* ---- Forms ---- */
.cs-form-card {
  max-width: 460px;
  margin: 50px auto;
  padding: 36px;
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-md);
  border: 1px solid var(--cs-border);
}
.cs-form-card h4 { text-align: center; margin-bottom: 24px; }
.form-control, input[type=text].cs-input, input[type=password].cs-input, input[type=email].cs-input {
  border-radius: var(--cs-radius-sm) !important;
  border: 1px solid var(--cs-border) !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
  height: auto !important;
}
.form-control:focus { border-color: var(--cs-ink) !important; }

/* BUG FIX: Materialize has its own rule specifically for
   `input[type=number]` (and date/tel/search/etc.) that forces
   `box-sizing: content-box` - higher specificity (type + attribute
   selector) than the universal `box-sizing: border-box` reset above, so
   it won that fight specifically for number inputs. Combined with
   `width: 100%` (also set by that same Materialize rule) and this
   theme's own padding, the element computed wider than its grid/flex
   cell in content-box mode, which is what made price/number fields
   render squashed into a sliver instead of filling their field like
   every other input next to them. */
input.form-control, input.cs-input {
  box-sizing: border-box !important;
  width: 100% !important;
}

/* ---- Car detail page ---- */
.cs-detail-gallery { border-radius: var(--cs-radius-lg); overflow: hidden; }

/* BUG FIX: Materialize's own carousel CSS sets `width: 100%` on the
   slide's <img> but never a height or object-fit - the actual rendered
   height then comes from the photo's own natural aspect ratio, which
   rarely matches the carousel's fixed 400px container. Whatever
   overflows just gets clipped by the container's `overflow: hidden`
   wherever the browser happens to position it (default top-left), not
   intelligently scaled/centered - that's what made photos look
   randomly cropped (car wheels/roof cut off) instead of nicely
   filling the frame. object-fit: cover lets the browser do the
   cropping properly: scale to fill, then crop only the excess,
   centered. */
.carousel .carousel-item > img {
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.cs-listing-header { margin: 24px 0 16px; }

/* ---- about.php ---- */
.cs-about-hero {
  background: var(--cs-bg-soft);
  padding: 48px 0;
  text-align: center;
}
.cs-about-hero h2 { font-weight: 700; }
.cs-about-hero .container { display: flex; flex-direction: column; align-items: center; }

/* BUG FIX: the three cards used to just stack an <img> + a padded
   content <div> with the button as the last thing inside it - with no
   flex structure tying the button's position to the CARD's own height,
   a card with more description text (or a two-line heading) pushed its
   own button further down than its neighbours', so the three buttons
   never lined up with each other despite the cards themselves being
   equal height. Card body is now a flex column that stretches to fill
   the remaining card height, with the button pinned to the bottom via
   the auto top margin on the last flex child - button position no
   longer depends on how much text is above it. */
.cs-about-card { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.cs-about-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
}
.cs-about-card-body .btn { margin-top: 16px; align-self: flex-start; }
.cs-listing-header h3 { margin-bottom: 4px; }
.cs-host-card { border: 1px solid var(--cs-border); }
.cs-facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  padding: 18px;
}
.cs-fact { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.cs-fact i { font-size: 1.3rem; color: var(--cs-accent); }
.cs-booking-card {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  box-shadow: var(--cs-shadow-md);
  padding: 24px;
}
.cs-booking-card .cs-price-big { font-size: 1.4rem; font-weight: 700; }

/* ---- Airbnb-style clickable price breakdown ("receipt") ---- */
/* BUG FIX: this button was showing a teal background bar (Materialize's
   own default button styling bleeding through - Materialize's classic
   theme color is a distinctive teal/green, and this element doesn't
   carry Materialize's own `.btn` class for `.cs-receipt-toggle` to
   cleanly out-specificity) despite `background: none` already being
   set here - !important added specifically to guarantee this stays
   transparent regardless of which other stylesheet's rule ends up
   matching this element first. */
.cs-receipt-toggle {
  background: none !important; border: none !important; padding: 0; margin-top: 10px;
  color: var(--cs-ink); text-align: left; width: 100%;
  cursor: pointer; font-size: .95rem;
}
.cs-receipt-toggle u { color: var(--cs-ink-light); text-decoration-color: var(--cs-ink-light); }
.cs-receipt {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  padding: 12px 14px;
  margin-top: 8px;
  font-size: .9rem;
}
.cs-receipt-row { display: flex; justify-content: space-between; padding: 4px 0; color: var(--cs-ink-light); }
.cs-receipt-total { border-top: 1px solid var(--cs-border); margin-top: 4px; padding-top: 8px; font-weight: 700; color: var(--cs-ink); }

/* ---- Admin finance analytics (admin.php::finance_list/payouts) ---- */
.cs-analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.cs-analytics-number { font-size: 1.6rem; font-weight: 700; margin-top: 4px; }

/* ---- Admin pricing form (admin.php::pricing) ---- */
.cs-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

/* ---- Settings page (my.php::settings) ---- */
.cs-settings-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin-top: 8px;
}
.cs-settings-nav {
  flex: 0 0 220px;
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cs-settings-nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--cs-radius-sm);
  color: var(--cs-ink);
  text-decoration: none;
  font-weight: 500;
}
.cs-settings-nav a:hover { background: var(--cs-bg-soft); }
.cs-settings-nav i { color: var(--cs-ink-light); }
.cs-settings-content { flex: 1; min-width: 0; }
.cs-settings-section {
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: 24px;
  margin-bottom: 24px;
  scroll-margin-top: 90px;
}
.cs-settings-section h5 { margin-bottom: 4px; }
.cs-settings-section .cs-sub { margin-bottom: 20px; }
.cs-settings-row { display: flex; gap: 24px; padding: 4px 0; }
.cs-settings-row-label { flex: 0 0 160px; font-weight: 600; color: var(--cs-ink-light); font-size: .92rem; padding-top: 8px; }
.cs-settings-row-control { flex: 1; min-width: 0; }
.cs-settings-divider { height: 1px; background: var(--cs-border); margin: 16px 0; }

/* Avatar picker (settings.php's own #profile section) - replaces the
   native OS file-picker button (which looks and sizes itself
   completely differently across browsers, and sat awkwardly next to
   a separate pill-styled Save button) with a single, self-contained
   control: click the avatar itself to choose a new photo, which
   submits automatically the moment a file is picked - no separate
   Save button needed for this one specific action. */
.cs-avatar-form { display: inline-block; }
.cs-avatar-picker {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 50%;
}
.cs-avatar-picker-img {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1px solid var(--cs-border);
}
.cs-avatar-picker-badge {
  position: absolute;
  right: -2px; bottom: -2px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--cs-accent);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  border: 2px solid var(--cs-bg);
}
.cs-avatar-picker:hover .cs-avatar-picker-badge { background: var(--cs-accent-dark); }

/* A short input paired with its own "save/change" button, grouped as
   ONE tight unit rather than the row's own full width (settings.php's
   own birthday/email rows) - display:inline-flex sizes itself to
   content instead of stretching to fill the row, which is what left
   the button looking disconnected, sitting far from its input with a
   large empty gap after it, on any row wider than the input+button
   pairing itself (almost always, on a normal desktop viewport). */
.cs-inline-form { display: inline-flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.cs-inline-form .cs-input { width: 220px; max-width: 100%; }

/* Dashboard's own welcome banner (my.php's own default view) - the
   avatar+greeting used to sit right at the very top of the page, with
   only a small margin-bottom and NO margin-top at all, leaving it
   crammed immediately below the site's own navbar with barely any
   breathing room - especially noticeable for an already fully-
   verified visitor, since the conditional activation banners
   (activator_menu()) that would otherwise appear above it are gone
   entirely once email/phone are both confirmed. */
.cs-welcome-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--cs-border);
}
.cs-welcome-avatar {
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--cs-border);
}


@media (max-width: 768px) {
  .cs-settings-layout { flex-direction: column; }
  .cs-settings-nav { position: static; flex-direction: row; flex-wrap: wrap; width: 100%; }
  .cs-settings-row { flex-direction: column; gap: 8px; }
  .cs-settings-row-label { flex: none; padding-top: 0; }
}

/* ---- Admin dashboard section cards (admin.php::menu) ---- */
.cs-admin-section h5 { margin-bottom: 12px; }
.cs-admin-links { display: flex; flex-direction: column; gap: 2px; }
.cs-admin-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: var(--cs-radius-sm);
  color: var(--cs-ink);
  text-decoration: none;
  font-weight: 500;
}
.cs-admin-links a:hover { background: var(--cs-bg-soft); }

/* ---- Catalog filter panel (cars.php) ---- */
.cs-filter-panel {
  display: none;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: 20px;
  margin-bottom: 20px;
}
.cs-filter-panel-open { display: block; }
.cs-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
}
@media (max-width: 600px) {
  .cs-filter-grid { grid-template-columns: 1fr 1fr; }
}

/* ---- Catalog header (title + filter/sort controls) ----
   Deliberately its own column-first layout, not a generic
   justify-content-between flex row: with a long heading AND several
   controls, that combination wrapped the controls right on top of the
   heading text instead of cleanly moving to a new line. */
.cs-catalog-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
}
.cs-catalog-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cs-sort-select { width: auto; min-width: 200px; }
@media (min-width: 700px) {
  .cs-catalog-header { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---- Photo editor (my.php::edit_photo) ---- */
.cs-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
}
.cs-photo-item {
  position: relative;
  width: 140px;
  height: 140px;
  border-radius: var(--cs-radius-md);
  overflow: hidden;
  cursor: grab;
  border: 2px solid transparent;
  background: var(--cs-bg-soft);
}
.cs-photo-item:first-child { border-color: var(--cs-accent); }
.cs-photo-item:first-child::after {
  content: "Обложка";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--cs-accent);
  color: #fff;
  font-size: .7rem;
  text-align: center;
  padding: 3px 0;
}
.cs-photo-item img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cs-photo-delete {
  position: absolute;
  top: 6px; right: 6px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.cs-photo-delete:hover { background: var(--cs-accent); }

/* ---- Custom city autocomplete dropdown (my.php::add_car) ---- */
.cs-city-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-sm);
  box-shadow: var(--cs-shadow-md);
  max-height: 280px;
  overflow-y: auto;
  margin-top: 4px;
}
.cs-city-suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  cursor: pointer;
}
.cs-city-suggestion:hover { background: var(--cs-bg-soft); }
.cs-city-suggestion-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: 6px; overflow: hidden; }
.cs-city-suggestion-icon svg { width: 100%; height: 100%; display: block; }
.cs-city-suggestion-name { font-weight: 600; font-size: .92rem; color: var(--cs-ink); }
.cs-city-suggestion-sub { font-size: .78rem; color: var(--cs-ink-light); }

/* ---- Google sign-in button (login.php / reg.php) ---- */
.cs-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 24px;
  border: 1px solid var(--cs-border);
  border-radius: 999px;
  background: #fff;
  color: var(--cs-ink);
  font-weight: 600;
  text-decoration: none;
  margin-bottom: 16px;
}
.cs-google-btn:hover { background: var(--cs-bg-soft); color: var(--cs-ink); }
.cs-google-btn img { width: 18px; height: 18px; }
.cs-or-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--cs-ink-light);
  font-size: .85rem;
  margin: 4px 0 20px;
}
.cs-or-divider::before, .cs-or-divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--cs-border);
}
.cs-or-divider span { padding: 0 12px; }

/* ---- Multi-step form wizard (my.php::add_car/edit_car) ---- */
.cs-wizard-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
}
.cs-wizard-dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--cs-bg-soft); color: var(--cs-ink-light);
  font-weight: 700; font-size: .85rem;
  border: 2px solid transparent;
  flex-shrink: 0;
}
.cs-wizard-dot-active { background: var(--cs-accent); color: #fff; }
.cs-wizard-dot-done { background: #fff; color: var(--cs-accent); border-color: var(--cs-accent); }
.cs-wizard-line { width: 24px; height: 2px; background: var(--cs-border); flex-shrink: 0; }
.cs-step h5 { margin-bottom: 4px; }
.cs-step .cs-sub { margin-bottom: 20px; }
.cs-step-actions { display: flex; justify-content: space-between; margin-top: 28px; }

/* ---- Drag-and-drop photo dropzone ---- */
.cs-dropzone {
  border: 2px dashed var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: 30px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.cs-dropzone:hover, .cs-dropzone-active { border-color: var(--cs-accent); background: #fff8f8; }
.cs-dropzone i { font-size: 2.2rem; color: var(--cs-accent); }
.cs-dropzone-count { display: block; margin-top: 6px; font-size: .85rem; color: var(--cs-ink-light); }
.cs-dropzone-preview {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px;
}
.cs-dropzone-thumb {
  position: relative;
  width: 110px; height: 110px;
  border-radius: var(--cs-radius-md);
  overflow: hidden;
  background: var(--cs-bg-soft);
}
.cs-dropzone-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cs-dropzone-remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; border: none;
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.cs-dropzone-cover {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: rgba(0,0,0,.6); color: #fff;
  font-size: .68rem; text-align: center; padding: 2px 0;
}

/* ---- Inline booking calendar (CSCalendar widget) ---- */
.cs-calendar-months { display: flex; flex-direction: column; gap: 18px; }
.cs-calendar-month-title { font-weight: 700; margin-bottom: 8px; text-align: center; }
.cs-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cs-calendar-dow { text-align: center; font-size: .72rem; color: var(--cs-ink-light); font-weight: 600; padding-bottom: 4px; }
.cs-calendar-day {
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: .85rem;
  cursor: default;
}
.cs-calendar-day-blank { visibility: hidden; }
.cs-calendar-day-free { cursor: pointer; color: var(--cs-ink); }
.cs-calendar-day-free:hover { background: var(--cs-bg-soft); }
.cs-calendar-day-past { color: #d0d0d0; }
.cs-calendar-day-busy { color: #d0d0d0; text-decoration: line-through; background: var(--cs-bg-soft); }
.cs-calendar-day-selected { background: var(--cs-accent) !important; color: #fff !important; font-weight: 700; }
.cs-calendar-day-inrange { background: #ffe1e7; border-radius: 0; }
.cs-calendar-day-today { box-shadow: inset 0 0 0 2px var(--cs-accent); font-weight: 700; }
.cs-calendar-legend { display: flex; gap: 16px; margin-top: 14px; font-size: .78rem; color: var(--cs-ink-light); flex-wrap: wrap; }
.cs-cal-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }
.cs-cal-dot-free { background: #fff; border: 1px solid var(--cs-border); }
.cs-cal-dot-busy { background: var(--cs-bg-soft); border: 1px solid var(--cs-border); }
.cs-cal-dot-selected { background: var(--cs-accent); }

/* ---- Dashboard tiles (my.php default view) ----
   Deliberately NOT built on Materialize's .row/.col grid: those columns
   are float-based, and a tile with longer text (wrapping to two lines)
   made the following tiles fall into the uneven gaps instead of
   cleanly wrapping to a new line. Plain flexbox wrapping avoids that
   entirely regardless of how tall any one tile gets. */
.cs-tile-grid { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.cs-tile {
  flex: 1 1 200px;
  max-width: calc(25% - 12px);
  text-decoration: none;
  display: block;
}
@media (max-width: 992px) { .cs-tile { max-width: calc(33.333% - 11px); } }
@media (max-width: 600px) { .cs-tile { max-width: calc(50% - 8px); } }

/* ---- Trip / booking cards (my.php: order_list, order_add) ---- */
.cs-trip-card {
  display: flex;
  gap: 18px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-lg);
  padding: 16px;
  margin-bottom: 16px;
  transition: box-shadow .15s ease;
}
.cs-trip-card:hover { box-shadow: var(--cs-shadow-md); }
.cs-trip-photo { width: 160px; flex-shrink: 0; border-radius: var(--cs-radius-md); overflow: hidden; aspect-ratio: 4/3; background: var(--cs-bg-soft); }
.cs-trip-photo img { width: 100%; height: 100%; object-fit: cover; }
.cs-trip-body { flex: 1; min-width: 0; }
.cs-trip-dates { color: var(--cs-ink-light); margin-top: 6px; font-size: .92rem; }
.cs-trip-price { font-weight: 700; margin-top: 6px; font-size: 1.05rem; }
.cs-trip-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.cs-trip-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 600;
  padding: 4px 12px; border-radius: 999px;
  white-space: nowrap;
}
.cs-trip-status-paid { background: #e8f5e9; color: #1e7e34; }
.cs-trip-status-pending { background: #fff3e0; color: #b26a00; }
.cs-trip-status-cancelled { background: #fdecea; color: #b3261e; }

@media (max-width: 600px) {
  .cs-trip-card { flex-direction: column; }
  .cs-trip-photo { width: 100%; }
}

/* ---- Message inbox list (my.php::message) ---- */
.cs-message-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border-radius: var(--cs-radius-md);
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--cs-border);
}
.cs-message-row:hover { background: var(--cs-bg-soft); }
.cs-message-row-unread { background: #fff8f8; }
.cs-message-body { flex: 1; min-width: 0; }
.cs-message-name { font-weight: 700; }
.cs-message-car { font-size: .78rem; color: var(--cs-accent); margin-top: 1px; }
.cs-message-preview {
  color: var(--cs-ink-light);
  font-size: .9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Chat thread bubbles (user.php::message) ---- */
.cs-chat-car-context {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  color: var(--cs-accent);
  text-decoration: none;
  margin: -8px 0 14px;
}
.cs-chat-scroll {
  max-height: 55vh;
  overflow-y: auto;
  padding: 6px;
  display: flex;
  flex-direction: column;
}
.cs-chat-bubble-row { display: flex; margin-bottom: 10px; gap: 8px; align-items: flex-end; }
.cs-chat-bubble-row-mine { justify-content: flex-end; }
.cs-chat-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.cs-chat-bubble {
  max-width: 70%;
  background: var(--cs-bg-soft);
  color: var(--cs-ink);
  padding: 10px 14px;
  border-radius: var(--cs-radius-md);
  border-bottom-left-radius: 4px;
}
.cs-chat-bubble-mine {
  background: var(--cs-accent);
  color: #fff;
  border-bottom-left-radius: var(--cs-radius-md);
  border-bottom-right-radius: 4px;
}
.cs-chat-time {
  font-size: .7rem;
  opacity: .7;
  margin-top: 4px;
  text-align: right;
}

/* ---- Promotion duration picker (my.php::promote) ---- */
.cs-promo-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--cs-border);
  border-radius: var(--cs-radius-md);
  margin-bottom: 10px;
  color: var(--cs-ink);
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.cs-promo-option:hover { border-color: var(--cs-accent); background: #fff8f8; color: var(--cs-ink); }
.cs-promo-price { font-weight: 700; }

/* Same row style as .cs-promo-option above, but as a real <button>
   (not a link) for admin.php::promote() - the admin grants a duration
   for free with a single click on the row itself (no separate
   radio-then-submit step), matching the same one-click simplicity as
   the paid page's own duration rows. */
button.cs-promo-option {
  width: 100%;
  background: var(--cs-bg) !important;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
}
button.cs-promo-option:hover { background: #fff8f8 !important; }

/* Two-column layout for admin.php::promote() (top / color highlight) -
   the shared .cs-cards-grid/.cs-card-col pair elsewhere hardcodes a
   33%-per-column, 3-across grid, which leaves 2 cards looking cramped
   and narrow; this gives each of the 2 tiers roughly half the
   container's width instead, matching the wider layout used for the
   paid, user-facing equivalent of this same page. */
.cs-promo-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
  margin-top: 16px;
}
.cs-promo-columns h5 { text-align: center; font-size: 1.4rem; }

/* The left-hand column on the car detail page (gallery + author +
   booking box) stays in view while the visitor scrolls the specs /
   description / comments on the right, Airbnb PDP-style. */
@media (min-width: 993px) {
  .cs-detail-sticky-col { position: sticky; top: 90px; align-self: flex-start; }
}

/* ---- Footer ---- */
.cs-footer {
  background: var(--cs-bg-soft);
  border-top: 1px solid var(--cs-border);
  padding: 40px 0 20px;
  margin-top: 60px;
  color: var(--cs-ink-light);
}
.cs-footer h6 { font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cs-ink); margin-bottom: 14px; }
.cs-footer a { color: var(--cs-ink-light); text-decoration: none; display: block; margin-bottom: 8px; font-size: .92rem; }
.cs-footer a:hover { color: var(--cs-accent); text-decoration: underline; }
.cs-footer .cs-copyright { border-top: 1px solid var(--cs-border); margin-top: 24px; padding-top: 18px; font-size: .85rem; }

@media (max-width: 767px) {
  .cs-hero { padding: 70px 16px 60px; }
  .cs-hero h1 { font-size: 1.9rem; }
  .cs-booking-card { position: static; }
}

/* =========================================================================
   Minimal utility classes (Bootstrap-style names, hand-rolled here on
   purpose). Bootstrap's own CSS is intentionally NOT loaded on this site:
   its .container/.row/.col/.card/.btn definitions would collide with
   Materialize's own classes of the same name, which dozens of existing
   admin/my.php screens still depend on for their JS-driven behaviour
   (modals, dropdowns, selects, image zoom). Only the small set of utility
   classes actually used in the redesigned templates is defined below, so
   there is no framework clash.
   ========================================================================= */
.d-flex { display: flex; }
.justify-content-between { justify-content: space-between; }
.align-items-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }
.text-center { text-align: center; }
.w-100 { width: 100% !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .25rem !important; }
.mb-2 { margin-bottom: .5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mt-1 { margin-top: .25rem !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.d-block { display: block !important; }
.p-0 { padding: 0 !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }

.form-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }

.alert { border-radius: var(--cs-radius-sm); padding: 12px 16px; margin-bottom: 16px; font-size: .92rem; }
.alert-danger { background: #fdecea; color: #b3261e; border: 1px solid #f6c4bf; }
.alert-success { background: #e8f5e9; color: #1e7e34; border: 1px solid #c3e6cb; }

/* ------------------------------------------------------------------
   Pagination - overrides Materialize's dated square/pink defaults
   (see materialize.css's own .pagination rules) with rounded pill
   buttons matching the rest of this theme (--cs-* variables, same
   hover/shadow language as .cs-card and .cs-btn elsewhere).
   ------------------------------------------------------------------ */
.pagination { display: flex; justify-content: center; align-items: center; gap: 6px; list-style: none; padding: 0; margin: 24px 0; }
.pagination li { display: inline-flex; height: auto; border-radius: 999px; }
.pagination li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--cs-bg);
    border: 1px solid var(--cs-border);
    color: var(--cs-ink);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.pagination li a:hover { background: var(--cs-bg-soft); border-color: #d0d0d0; }
.pagination li a:active { transform: scale(.96); }
.pagination li a i { font-size: 1.3rem; }
.pagination li.active a { background: var(--cs-accent); border-color: var(--cs-accent); color: #fff; }
.pagination li.disabled a { background: transparent; border-color: var(--cs-border); color: #c7c7c7; cursor: default; pointer-events: none; }
.pagination li.pages ul li { display: inline-flex; float: none; }

/* ------------------------------------------------------------------
   Phone country picker (render_phone_country_picker() in functions.php)
   - a custom dropdown rather than a native <select>, since a native
   <option> can never render an <img> tag in any browser, and this one
   specifically needs real flag images (flagsapi.com via
   country_flag_img()), not just plain text.
   ------------------------------------------------------------------ */
.cs-phone-picker { position: relative; }
.cs-phone-picker-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    padding: 0 10px;
    background: var(--cs-bg);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-sm);
    cursor: pointer;
    font-size: .95rem;
    color: var(--cs-ink);
}
.cs-phone-picker-trigger:hover { border-color: #c7c7c7; }
.cs-phone-picker-trigger img { border-radius: 2px; }
.cs-phone-picker-trigger i { font-size: .8rem; color: var(--cs-ink-light); margin-left: 2px; }
.cs-phone-picker-list {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    width: 160px;
    max-height: 280px;
    overflow-y: auto;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: var(--cs-bg);
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-md);
    box-shadow: var(--cs-shadow-md);
}
.cs-phone-picker-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--cs-radius-sm);
    cursor: pointer;
    font-size: .9rem;
}
.cs-phone-picker-list li:hover, .cs-phone-picker-list li.cs-phone-picker-active { background: var(--cs-bg-soft); }
.cs-phone-picker-list li img { border-radius: 2px; flex-shrink: 0; }
.cs-phone-picker-list li.cs-phone-picker-divider {
    height: 1px;
    margin: 6px 4px;
    padding: 0;
    background: var(--cs-border);
    cursor: default;
    pointer-events: none;
}