/*!
 * Haramain Taxi — shared rate widget styles
 * Uses the same design tokens as the main site theme when present, with
 * safe fallbacks (green/gold brand palette) so this file also works
 * dropped into a page on its own.
 */
/* Two stacked rows — the 3 dropdowns get their own full-width row so their
 * text never gets squeezed (this used to be one 5-column row shared with
 * the price + button, which truncated long options like "Jeddah Airport"
 * down to a few characters on anything narrower than a very wide column). */
/* Pinned locally rather than assuming the theme sets a global border-box.
   Without it, `width:100%` + padding + border on the inner panels adds up
   to more than the card's content width and pushes a stray pixel or two
   past the viewport, which shows up as a horizontal scroll on a phone. */
.hrw-quote-mount,
.hr-quote-card,
.hr-quote-card * { box-sizing: border-box; }

.hr-quote-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow, 0 10px 30px rgba(11,93,67,0.12));
  padding: 26px;
}
.hr-quote-fields-row {
  display: grid;
  /* Vehicle names ("Toyota Camry / Hyundai Sonata") run longer than city
     names, so it gets a bigger share of the row. */
  grid-template-columns: 1fr 1fr 1.3fr;
  gap: 16px;
}
.hr-quote-field label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--muted, #5b6b78);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 6px;
}
.hr-quote-field select {
  width: 100%;
  padding: 12px 10px;
  border-radius: 9px;
  border: 1.5px solid #dfe6ea;
  font-size: .92rem;
  font-family: inherit;
  color: var(--ink, #152331);
  background: #fbfcfd;
  text-overflow: ellipsis;
}
.hr-quote-field select:focus { outline: none; border-color: var(--green, #0e7a5f); }
/* The fare is the payoff of the whole widget, so it gets its own centred
 * panel spanning the full card width — same treatment on desktop and
 * mobile — with the WhatsApp button centred beneath it. */
.hr-quote-result-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid #eef2f0;
}
.hr-quote-result {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%;
  text-align: center;
  align-items: center;
  background: linear-gradient(180deg, #f4f9f6 0%, #eaf4ef 100%);
  border: 1px solid #dcebe4;
  border-radius: 12px;
  padding: 16px 18px;
}
.hr-quote-result .hr-result-label {
  font-size: .74rem; font-weight: 700; color: var(--muted, #5b6b78);
  text-transform: uppercase; letter-spacing: .08em;
}
.hr-quote-result strong {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(2rem, 6vw, 2.75rem);
  color: var(--navy, #0b5d43);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  display: block;
}
/* Placeholder state (before pickup/drop-off/vehicle are all chosen) is
 * deliberately small, muted and normal-weight so it reads as a quiet
 * instruction rather than shouting a fake price at 2.75rem — JS swaps
 * this class off the moment a real fare is calculated. */
.hr-quote-result strong.hr-price-placeholder {
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  color: var(--muted, #5b6b78);
  line-height: 1.45;
  letter-spacing: normal;
}
/* Label is redundant next to the instruction text, so hide it while the
   placeholder is showing and reveal it once a real fare appears. Driven by
   a class the JS toggles rather than :has(), so it works identically on
   older mobile browsers that predate :has() support. */
.hr-quote-result.hr-result-empty { background: #fbfcfd; border-color: #e6ecea; }
.hr-quote-result.hr-result-empty .hr-result-label { display: none; }

.hr-quote-card .btn,
.hr-quote-card button[type="submit"] {
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 30px; border-radius: 10px; font-weight: 700; font-size: 1rem;
  background: var(--gold, #d4af37); color: #1c1200; border: none; cursor: pointer;
  flex-shrink: 0;
  width: 100%; max-width: 340px;
  box-shadow: 0 4px 12px rgba(212,175,55,.32);
  transition: background .18s ease, transform .18s ease;
}
.hr-quote-card button[type="submit"]:hover { background: var(--gold-light, #e6c563); transform: translateY(-1px); }

/* Tinted panel behind the calculator wherever [haramain_quote] is used on
 * its own (route pages, any page). On the homepage the section already
 * supplies its own band, so that copy is suppressed further down. */
.hrw-quote-mount {
  background: linear-gradient(180deg, #eaf4ef 0%, #f4f9f6 100%);
  border: 1px solid #dceae3;
  border-radius: 18px;
  padding: 22px;
}
@media (max-width: 560px) {
  .hrw-quote-mount { padding: 14px; border-radius: 14px; }
}

/* ---- Price table (desktop/tablet) ---- */
.hr-price-table-wrap {
  overflow-x: auto;
  background: #fff;
  border-radius: var(--radius, 14px);
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(11,93,67,0.10));
  margin-bottom: 20px;
}
table.hr-price-table { width: 100%; border-collapse: collapse; min-width: 560px; }
table.hr-price-table th, table.hr-price-table td { padding: 14px 18px; text-align: left; font-size: .92rem; }
table.hr-price-table thead th {
  background: var(--navy, #0b5d43); color: #fff;
  font-family: 'Poppins', system-ui, sans-serif; font-weight: 600;
}
table.hr-price-table .hr-th-sub { font-weight: 400; opacity: .75; font-size: .74rem; }
table.hr-price-table tbody tr:nth-child(even) { background: #f8fafb; }
table.hr-price-table tr.hr-cat-row td {
  background: rgba(212,175,55,.14); color: #8a6d10;
  font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  padding: 10px 18px;
}
table.hr-price-table td strong { color: var(--navy, #0b5d43); }
table.hr-price-table .hr-na { color: var(--muted, #99a7b1); }
.hr-pkg-heading {
  font-family: 'Poppins', system-ui, sans-serif; color: var(--navy, #0b5d43);
  font-size: 1.2rem; margin: 26px 0 12px;
}

/* ---- Price cards (mobile) ----
 * Same data as the table above, laid out as stacked cards with no
 * horizontal content — nothing for a host theme's overflow rules to clip,
 * so prices stay fully visible on any phone regardless of what wraps the
 * shortcode. Table and card list are mutually exclusive via media query. */
.hr-price-cards { display: none; margin-bottom: 20px; }
.hr-card-cat {
  font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: #8a6d10; background: rgba(212,175,55,.14);
  padding: 8px 14px; border-radius: 8px; margin: 14px 0 8px;
}
.hr-card-cat:first-child { margin-top: 0; }
.hr-price-card {
  background: #fff; border-radius: 12px; box-shadow: var(--shadow-sm, 0 4px 14px rgba(11,93,67,0.10));
  padding: 16px 18px; margin-bottom: 12px;
}
.hr-price-card-route {
  font-family: 'Poppins', system-ui, sans-serif; font-weight: 600; color: var(--navy, #0b5d43);
  font-size: .95rem; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed #e6ebee;
}
.hr-price-card-rows { display: flex; flex-direction: column; gap: 8px; }
.hr-price-card-row { display: flex; justify-content: space-between; align-items: center; font-size: .9rem; }
.hr-price-card-row span { color: var(--muted, #5b6b78); }
.hr-price-card-row strong { color: var(--navy, #0b5d43); font-family: 'Poppins', system-ui, sans-serif; }

@media (max-width: 640px) {
  .hr-price-table-wrap { display: none; }
  .hr-price-cards { display: block; }
}

/* ---- Fleet cards (vehicle photos + specs) ----
 * flexbox + flex-wrap + justify-content:center instead of a fixed 3-column
 * grid: [haramain_fleet] with all 3 vehicles fills a row edge-to-edge just
 * like before, but [haramain_fleet vehicles="staria,hiace"] (or any subset
 * that doesn't fill a full row) now CENTERS as a group instead of being
 * stuck against the left edge with dead space on the right — a fixed grid
 * has no item count awareness, flex-wrap naturally does. max-width caps
 * how wide a card can grow so a 1- or 2-vehicle row doesn't stretch cards
 * to an oversized, ungainly width. */
.hr-fleet-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-bottom: 20px; }
.hr-fleet-card {
  flex: 1 1 260px; max-width: 380px;
  background: #fff; border-radius: var(--radius, 14px); overflow: hidden;
  /* A real 1px border, not shadow alone. On a phone a soft shadow is
     nearly invisible, so a white card on a white/near-white section had no
     discernible edge -- the cards read as one undifferentiated block. */
  border: 1px solid #dbe6e1;
  box-shadow: var(--shadow-sm, 0 4px 14px rgba(11,93,67,0.10));
}
/* Photo box, clipped at ITS OWN edge (not just relying on the card's
   overflow:hidden) and the <img> pinned via position:absolute instead of
   flow-based height:100%. Many WordPress themes ship a global rule like
   "img{height:auto}" which, depending on CSS load order/specificity, can
   beat a flow-based height:100% + object-fit and make real (non-placeholder)
   photos render at their full natural size — bleeding down over the card
   text below. Absolute positioning with a fixed inset is immune to that:
   it doesn't care what height the image's intrinsic box would otherwise be.

   The box uses aspect-ratio (matched to the vehicle photos' actual 3:2
   shape) instead of a fixed height. A fixed height that doesn't match the
   photo's real proportions is what caused the empty side margins — with
   object-fit:contain the browser was correctly showing the WHOLE photo
   uncropped, it just had to letterbox it to fit a box shape that didn't
   match. Matching the box's shape to the photo's shape means it fills
   edge-to-edge with nothing cropped and no gaps, at any card width. Keep
   object-fit:contain (not cover) so a future photo at a different ratio
   degrades gracefully back to letterboxing instead of being cropped. */
.hr-fleet-media { aspect-ratio: 3 / 2 !important; height: auto !important; overflow: hidden !important; position: relative; background: #eef3f0; }
.hr-fleet-media img {
  position: absolute !important; inset: 0 !important;
  width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important;
  object-fit: contain !important; object-position: center !important;
  display: block !important; margin: 0 !important; border: 0 !important;
}
.hr-fleet-body { padding: 20px; }
.hr-fleet-body h3 {
  font-family: 'Poppins', system-ui, sans-serif; color: var(--navy, #0b5d43);
  font-size: 1.05rem; margin: 0 0 6px;
}
.hr-fleet-desc { color: var(--muted, #5b6b78); font-size: .88rem; margin: 0 0 12px; }
.hr-fleet-specs { list-style: none; margin: 0; padding: 0; font-size: .88rem; color: var(--muted, #5b6b78); }
.hr-fleet-specs li { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px dashed #e6ebee; }
.hr-fleet-specs li:first-child { border-top: none; }
.hr-fleet-specs strong { color: var(--navy, #0b5d43); }
.hr-fleet-book-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 16px; width: 100%; box-sizing: border-box;
  padding: 12px 16px; border-radius: 10px;
  background: #0e7a5f; color: #fff !important; text-decoration: none !important;
  font-weight: 600; font-size: .92rem; text-align: center;
  border: none; cursor: pointer;
}
.hr-fleet-book-btn:hover { background: #0a5c47; }

@media (max-width: 640px) {
  /* Below this width, force one full-width card per row rather than
     letting two very narrow cards squeeze onto a row. */
  .hr-fleet-card { flex-basis: 100%; max-width: 420px; }
}

@media (max-width: 860px) {
  .hr-quote-fields-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .hr-quote-card { padding: 20px; gap: 16px; }
  .hr-quote-fields-row { grid-template-columns: 1fr; }
  .hr-quote-result-row { flex-direction: column; align-items: stretch; }
  .hr-quote-card button[type="submit"] { width: 100%; }
}

/* =====================================================================
   RATE LIST  ([haramain_rate_list])
   Card-per-route layout. Each route carries its own labelled price tile
   per vehicle, so nothing depends on a column header that has scrolled
   off screen — the failure mode of the old wide table on a phone.
   ===================================================================== */
.hr-rate-list, .hr-rate-list * { box-sizing: border-box; }
.hr-rate-list { font-family: 'Inter', system-ui, sans-serif; }

/* ---- Vehicle legend ---- */
.hr-rl-legend {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  margin-bottom: 26px;
}
.hr-rl-legend-item {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #d5e2dc; border-radius: 12px; padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(11,93,67,.06);
}
.hr-rl-legend-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 1.35rem;
  background: linear-gradient(135deg, #0e7a5f, #0b5d43);
}
.hr-rl-legend-text { display: flex; flex-direction: column; min-width: 0; }
.hr-rl-legend-text strong {
  font-family: 'Poppins', system-ui, sans-serif; color: #0b5d43; font-size: .98rem; font-weight: 700;
}
.hr-rl-legend-text small { color: #6b7d75; font-size: .76rem; line-height: 1.35; }
.hr-rl-legend-spec { color: #0e7a5f; font-size: .76rem; font-weight: 700; margin-top: 2px; }

/* ---- Category quick-jump chips ---- */
.hr-rl-nav { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 30px; }
.hr-rl-nav a {
  display: inline-block; padding: 9px 17px; border-radius: 30px;
  background: #fff; border: 1.5px solid #cddfd7; color: #0b5d43;
  font-weight: 700; font-size: .84rem; text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.hr-rl-nav a:hover { background: #0b5d43; border-color: #0b5d43; color: #fff; }

/* ---- Category section ---- */
.hr-rl-cat {
  margin-bottom: 38px;
  /* Anchor targets clear the site's sticky header instead of hiding under it. */
  scroll-margin-top: 110px;
}
.hr-rl-cat-title {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  font-family: 'Poppins', system-ui, sans-serif; color: #0b5d43;
  font-size: clamp(1.15rem, 2.6vw, 1.45rem); font-weight: 700;
  margin: 0 0 6px; padding-bottom: 12px; border-bottom: 2px solid #e2ede8;
}
.hr-rl-cat-count {
  font-family: 'Inter', system-ui, sans-serif; font-size: .74rem; font-weight: 700;
  color: #0e7a5f; background: #eaf4ef; border-radius: 20px; padding: 4px 12px;
  text-transform: uppercase; letter-spacing: .04em;
}
.hr-rl-cat-note { color: #5b6b78; font-size: .9rem; line-height: 1.6; margin: 12px 0 0; }

/* ---- Route cards ---- */
.hr-rl-routes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 18px; margin-top: 20px;
}
.hr-rl-route {
  display: flex; flex-direction: column;
  background: #fff; border: 2px solid #cddfd7; border-radius: 16px; padding: 20px;
  box-shadow: 0 4px 14px rgba(11,93,67,.09);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.hr-rl-route:hover { border-color: #0e7a5f; box-shadow: 0 10px 24px rgba(11,93,67,.15); }
.hr-rl-route-head {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px;
  font-family: 'Poppins', system-ui, sans-serif; color: #0b5d43;
  font-size: 1rem; font-weight: 700; line-height: 1.4; margin: 0 0 16px;
  /* Reserve two lines so a route name that wraps doesn't push its price
     tiles out of line with the neighbouring cards in the same grid row. */
  min-height: 2.8em;
}
.hr-rl-arrow { color: #d4af37; font-weight: 700; }
.hr-rl-pkg-head { display: block; }

/* ---- Price tiles ---- */
.hr-rl-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hr-rl-price {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  background: linear-gradient(180deg, #f4f9f6 0%, #eaf4ef 100%);
  border: 1px solid #dcebe4; border-radius: 11px; padding: 12px 6px;
}
.hr-rl-veh {
  font-size: .74rem; font-weight: 700; color: #0b5d43; line-height: 1.25;
  text-transform: uppercase; letter-spacing: .02em;
}
.hr-rl-seats { font-size: .68rem; color: #7a8b83; }
.hr-rl-price strong {
  font-family: 'Poppins', system-ui, sans-serif; color: #0b5d43;
  font-size: clamp(.95rem, 2.3vw, 1.12rem); font-weight: 800; line-height: 1.2; margin-top: 3px;
}
.hr-rl-price-na { background: #fafbfb; border-color: #e8edeb; }
.hr-rl-price-na strong { color: #8b9a93; font-size: .82rem; font-weight: 700; }
.hr-rl-save {
  margin-top: 5px; font-size: .66rem; font-weight: 800; color: #7a5c00;
  background: #f6e6b8; border-radius: 20px; padding: 3px 9px; letter-spacing: .02em;
}

/* ---- Package leg list ---- */
.hr-rl-legs { margin: 0 0 16px; padding-left: 20px; color: #5b6b78; font-size: .86rem; line-height: 1.65; }
.hr-rl-legs li { margin-bottom: 3px; }

/* ---- Per-route book button ---- */
.hr-rl-book {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 16px; padding: 12px 20px; border-radius: 10px;
  background: #0b5d43; color: #fff !important; font-weight: 700; font-size: .88rem;
  text-decoration: none; box-shadow: 0 3px 9px rgba(11,93,67,.24);
  transition: background .18s ease, box-shadow .18s ease;
}
.hr-rl-book:hover { background: #0e7a5f; box-shadow: 0 6px 16px rgba(11,93,67,.32); }

@media (max-width: 900px) {
  .hr-rl-legend { grid-template-columns: 1fr; gap: 10px; }
  .hr-rl-legend-item { padding: 12px 14px; }
}
@media (max-width: 560px) {
  .hr-rl-routes { grid-template-columns: 1fr; gap: 14px; }
  .hr-rl-route { padding: 16px; border-radius: 14px; }
  .hr-rl-route-head { font-size: .95rem; margin-bottom: 14px; }
  .hr-rl-prices { gap: 7px; }
  .hr-rl-price { padding: 10px 3px; border-radius: 9px; }
  .hr-rl-veh { font-size: .66rem; letter-spacing: 0; }
  .hr-rl-seats { font-size: .62rem; }
  .hr-rl-save { font-size: .6rem; padding: 2px 6px; }
  .hr-rl-book { margin-top: 14px; width: 100%; }
  .hr-rl-cat { margin-bottom: 30px; scroll-margin-top: 90px; }
  .hr-rl-nav a { padding: 8px 14px; font-size: .8rem; }
}