/* The customer site's layout (imravaan.com). Tokens and components come from
   portal/portal.css; this file adds the public header, the page frame, the car
   grid and the booking pieces. Mobile first; 375px is the baseline. */

.cx-wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .cx-wrap { padding: 0 24px; } }

.cx-header { background: var(--navy); color: #fff; }
.cx-header__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 60px; }
.cx-wordmark { color: #fff; font-size: 22px; text-decoration: none; }
.cx-nav { display: flex; align-items: center; gap: 14px; font-size: 14px; }
.cx-nav a { color: #D7E0EA; text-decoration: none; font-weight: 500; white-space: nowrap; }
.cx-nav a:hover { color: #fff; }
.cx-nav__cta { background: var(--brand); color: #fff !important; padding: 7px 12px; border-radius: 8px; }
@media (max-width: 420px) { .cx-nav { gap: 10px; font-size: 13px; } }

.cx-main { padding: 24px 0 48px; min-height: calc(100vh - 60px - 64px); }
.cx-footer { border-top: 1px solid var(--line); padding: 20px 0; font-size: 13px; color: var(--muted); }
.cx-footer a { color: var(--brand-dark); }

.cx-messages { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.cx-message { padding: 10px 14px; border-radius: 10px; font-size: 14px; background: var(--brand-wash); color: var(--navy); }
.cx-message--success { background: var(--ok-wash); color: var(--ok); }
.cx-message--error { background: var(--bad-wash); color: var(--bad); }

.cx-h1 { font-size: 26px; line-height: 1.2; font-weight: 700; color: var(--navy); margin: 0; }
.cx-lede { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.cx-section { margin-top: 24px; }
.cx-panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.cx-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.cx-row:last-child { border-bottom: 0; }
.cx-row dt { color: var(--muted); }
.cx-row dd { margin: 0; text-align: right; font-weight: 500; }
.cx-row--total dd, .cx-row--total dt { font-weight: 700; color: var(--navy); }
.cx-note { font-size: 13px; color: var(--muted); margin: 8px 0 0; }

/* Search and browse (screen #1) */
.cx-filters { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.cx-filters__main, .cx-filters__grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cx-filters__main, .cx-filters__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cx-filters__main { grid-template-columns: 2fr 1fr 1fr 1fr; } .cx-filters__grid { grid-template-columns: repeat(4, 1fr); } }
.cx-filters__more { margin-top: 12px; }
.cx-filters__more summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--brand-dark); }
.cx-filters__more[open] summary { margin-bottom: 12px; }
.cx-filters__actions { display: flex; align-items: center; gap: 16px; margin-top: 14px; }
.cx-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; color: var(--navy); }
.cx-field input, .cx-field select { width: 100%; }
.cx-check { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.cx-link { color: var(--brand-dark); font-weight: 500; }
.cx-note--bad { color: var(--bad); }
.cx-count { margin: 18px 0 10px; font-size: 14px; color: var(--muted); }

.cx-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .cx-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .cx-grid { grid-template-columns: repeat(3, 1fr); } }
.cx-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; color: inherit; text-decoration: none; }
.cx-card:hover { border-color: var(--line-strong); box-shadow: 0 4px 16px rgba(27, 42, 65, .08); }
.cx-card__photo { aspect-ratio: 4 / 3; background: var(--canvas); display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.cx-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cx-card__body { padding: 12px 14px 14px; }
.cx-card__title { margin: 0; font-weight: 600; font-size: 16px; }
.cx-card__meta, .cx-card__deposit { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.cx-card__price { margin: 8px 0 0; font-size: 15px; }
.cx-pager { display: flex; gap: 16px; justify-content: center; margin-top: 20px; font-size: 14px; }

/* Vehicle detail (screens #2, #3) */
.cx-crumb { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.cx-detail { display: grid; gap: 0 20px; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "book" "info"; }
.cx-detail__head { grid-area: head; }
.cx-detail__side { grid-area: book; margin-top: 20px; }
.cx-detail__info { grid-area: info; }
@media (min-width: 960px) {
  .cx-detail { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "head book" "info book"; align-items: start; }
  .cx-detail__side { position: sticky; top: 16px; margin-top: 0; }
}
/* Photos: a swipeable strip on a phone, a grid from tablet width. */
.cx-gallery { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.cx-gallery img { flex: 0 0 88%; scroll-snap-align: start; width: 88%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--canvas); display: block; }
@media (min-width: 640px) {
  .cx-gallery { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .cx-gallery img { width: 100%; }
  .cx-gallery img:first-child { grid-column: 1 / -1; }
}
.cx-gallery__empty { aspect-ratio: 16 / 9; border-radius: 12px; background: var(--canvas); display: flex; align-items: center; justify-content: center; color: var(--muted); }
.cx-book__rate { margin: 0; font-size: 18px; }
.cx-book__form { display: grid; gap: 10px; margin-top: 14px; }
.cx-quote { margin: 14px 0 0; }
.cx-bar { position: sticky; bottom: 0; margin: 16px -16px -48px; padding: 12px 16px; background: #fff; border-top: 1px solid var(--line); font-size: 14px; }
.cx-bar span { color: var(--muted); }
@media (min-width: 960px) { .cx-bar { display: none; } }

/* Bookings (pilot #135) */
.cx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cx-list__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: inherit; text-decoration: none; }
.cx-list__item .cx-note { display: block; margin-top: 2px; }
.cx-status { margin: 0; font-weight: 700; font-size: 17px; color: var(--navy); }
.cx-status--ok { color: var(--ok); }
.cx-status--bad { color: var(--bad); }
.cx-mono { font-variant-numeric: tabular-nums; letter-spacing: .02em; word-break: break-all; }
.cx-cancel summary { cursor: pointer; font-weight: 600; font-size: 14px; color: var(--bad); }