/* Umrah Online Taxi blocks: additions to the concept 16 components (concept16.css loads first).
   Colours come from the concept 16 tokens on :root (--navy, --blue, --line ...). The theme may
   redefine the tokens; it should not need to restyle the components. Regions use :where() so a theme
   rule of ordinary specificity wins. */

/* Resets the concept relied on globally, scoped to our blocks only. */
:where(.uot-block) :where(ul, ol) { list-style: none; margin: 0; padding: 0; }
:where(.uot-block) :where(p, figure, blockquote) { margin: 0; }
:where(.uot-block) :where(h1, h2, h3) { margin: 0; line-height: 1.2; letter-spacing: -0.01em; }
:where(.uot-block) :where(img) { display: block; max-width: 100%; height: auto; }
:where(.uot-block) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.uot-block) { font-family: var(--font); }
:where(.uot-block) *, :where(.uot-block) *::before, :where(.uot-block) *::after { box-sizing: border-box; }

/* Latin runs inside Arabic keep their order. An element is required: unicode-bidi does not apply to text nodes. */
.uotc-ltr { unicode-bidi: isolate; direction: ltr; }
/* An Arabic amount ("250 ريال"): isolated, in the Arabic reading order. */
.uotc-amt { unicode-bidi: isolate; display: inline; font-size: inherit; color: inherit; font-weight: inherit; }
.ride-price .uotc-ltr, .sum-item .uotc-ltr, .rev-by .uotc-ltr, .mbar-info .uotc-ltr, .fleet-from .uotc-ltr {
  display: inline; font-size: inherit; color: inherit; font-weight: inherit;
}

/* Currency estimate next to a SAR fare. */
.uotc-approx { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.uotc-approx[hidden] { display: none; }
.fleet-from .uotc-approx { margin-top: 2px; }
td .uotc-approx { font-size: 12px; font-weight: 400; }
.sum-item .uotc-approx { margin-top: 2px; font-size: 12px; }

.uotc-cur { display: inline-flex; align-items: center; gap: var(--space-2); font-size: 14px; }
.uotc-cur label { color: var(--muted); }
.uotc-cur select {
  min-height: 44px; padding: 0 30px 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355627A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 14px;
  color: var(--text); font-weight: 600; appearance: none; -webkit-appearance: none; max-width: 100%;
}
.band .uotc-cur label { color: var(--on-navy); }
.band .uotc-cur select { border-color: rgb(255 255 255 / 0.35); }
.uotc-cur-table, .uotc-cur-inline { margin-bottom: var(--space-3); }

/* Hero heading stays white on the navy band whatever colour the theme gives headings. */
.uotc-booking .hero-copy :where(h1, h2) { color: var(--white); }

/* Booking search: the date field button looks like the other fields. */
.uotc-booking .band-foot { flex-wrap: wrap; }
.band-video[src$=".jpg"], img.band-video { object-fit: cover; }
.uotc-booking .mbar .btn { white-space: nowrap; }
.ride-season { margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: var(--blue-soft); color: var(--navy); font-size: 12px; font-weight: 600; display: inline-block; }
.uotc-season-notes, .uotc-season-note { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--blue-soft); color: var(--navy); font-size: 14px; font-weight: 500; }
.ride-note { margin-top: var(--space-1); font-size: 12.5px; color: var(--muted); }
.sb-places .field[hidden] { display: none; }
.sb-places:has(.field[hidden]) { grid-template-columns: 1fr; }
a.ride-btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }

/* Fare table. */
.uotc-fare-table { display: grid; gap: var(--space-5); }
.uotc-ft-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.uotc-ft-scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.uotc-ft { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 14px; }
.uotc-ft caption { padding: var(--space-4); text-align: start; font-size: 18px; font-weight: 700; color: var(--navy); caption-side: top; }
.uotc-ft th, .uotc-ft td { padding: var(--space-3); border-top: 1px solid var(--line-soft); text-align: start; vertical-align: top; }
.uotc-ft thead th { background: var(--cloud); font-size: 13px; font-weight: 600; color: var(--navy); }
.uotc-ft thead th small { display: block; font-weight: 400; color: var(--muted); }
.uotc-ft tbody th { font-weight: 600; min-width: 220px; position: sticky; inset-inline-start: 0; background: var(--white); }
.uotc-ft tbody th a { color: var(--navy); text-decoration: none; }
.uotc-ft tbody th a:hover { text-decoration: underline; }
.uotc-ft tbody th small { display: block; margin-top: 2px; font-weight: 400; font-size: 12.5px; color: var(--muted); }
.uotc-ft td span { font-weight: 600; white-space: nowrap; }
.uotc-ft-notes { display: grid; gap: var(--space-1); font-size: 14px; color: var(--muted); }

/* Route fares row. */
.uotc-rf-head { align-items: center; }
.uotc-rf-head .uotc-cur { margin: 0; }
.uotc-rf-head .scroll-btns { margin-inline-start: auto; }
.uotc-rf-note { margin-top: var(--space-2); font-size: 14px; color: var(--muted); max-width: 90ch; }

/* Vehicle cards without a photo. */
.uotc-fleet-svg { display: grid; place-items: center; padding: var(--space-4); }
.uotc-fleet-svg .ride-pic { width: 80%; }
.uotc-fleet-card { display: flex; flex-direction: column; height: 100%; }

/* Reviews link. */
.uotc-rev-more { margin-top: var(--space-2); }

/* FAQ with any number of questions: rows follow the count printed on the block. */
.uotc-faq.faq { grid-template-rows: repeat(var(--faq-n, 7), auto) 1fr auto; }
.uotc-faq.faq::before { grid-row: 1 / var(--faq-end, 10); }
.uotc-faq .faq-a { grid-row: 1 / var(--faq-a-end, 9); }
.uotc-faq .faq-all, .uotc-faq .faq-help { grid-row: var(--faq-last, 9); }
.uotc-faq .faq-a ul, .uotc-faq .faq-a ol { margin-top: var(--space-3); padding-inline-start: 1.2em; list-style: disc; max-width: 60ch; font-size: 16px; }
.uotc-faq .faq-a .wp-block-buttons { margin-top: var(--space-4); }
@media (max-width: 767px) {
  .uotc-faq .faq-q { grid-row: auto !important; }
  .uotc-faq .faq-a ul, .uotc-faq .faq-a ol { font-size: 15px; color: var(--muted); }
}

/* Contact details. */
.uotc-contact-list { display: grid; gap: var(--space-3); }
.uotc-contact-inline .uotc-contact-list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.uotc-contact-list li { display: flex; align-items: flex-start; gap: var(--space-3); }
.uotc-contact-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue); }
.uotc-contact-body { display: grid; min-width: 0; }
.uotc-contact-label { font-size: 13px; color: var(--muted); }
.uotc-contact-value { font-weight: 600; overflow-wrap: anywhere; }
.uotc-contact-value a { color: var(--navy); text-decoration: none; }
.uotc-contact-value a:hover { text-decoration: underline; }

/* Quote form. */
.uotc-quote { max-width: 880px; }
.uotc-form { display: grid; gap: var(--space-5); }
.uotc-form[hidden], .uotc-quote-success[hidden] { display: none; }
.uotc-fs { margin: 0; padding: 0; border: 0; min-width: 0; }
.uotc-fs legend { padding: 0; margin-bottom: var(--space-3); font-size: 18px; font-weight: 700; color: var(--navy); }
.uotc-quote .uotc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.uotc-f { display: grid; gap: 6px; align-content: start; min-width: 0; }
.uotc-f[hidden] { display: none; }
.uotc-f-notes { grid-column: 1 / -1; }
.uotc-f label { font-size: 14px; font-weight: 600; color: var(--text); }
.uotc-req { color: var(--blue); }
.uotc-opt { font-weight: 400; color: var(--muted); }
.uotc-f input, .uotc-f select, .uotc-f textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); color: var(--text); font-size: 16px; text-align: start;
}
.uotc-f select { appearance: none; -webkit-appearance: none; padding-inline-end: 34px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355627A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; }
[dir="rtl"] .uotc-f select { background-position: left 10px center; }
.uotc-f .dp-input { cursor: pointer; caret-color: transparent; }
.uotc-f textarea { min-height: 120px; resize: vertical; }
.uotc-f input:focus-visible, .uotc-f select:focus-visible, .uotc-f textarea:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.uotc-hint { font-size: 13px; color: var(--muted); }
.uotc-err { font-size: 13px; font-weight: 600; color: #B42318; }
.uotc-err[hidden] { display: none; }
.uotc-f.has-error input, .uotc-f.has-error select, .uotc-f.has-error textarea { border-color: #B42318; }
.uotc-form-msg { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: #FDECEA; color: #8A1C12; font-weight: 600; }
.uotc-form-msg[hidden] { display: none; }
.uotc-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.uotc-form-note { font-size: 14px; color: var(--muted); max-width: 60ch; }
.uotc-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.uotc-quote-success { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-6); border: 1px solid var(--line); border-radius: var(--radius); background: var(--blue-soft); }
.uotc-quote-success:focus { outline: 2px solid var(--blue); outline-offset: 2px; }
.uotc-quote-success h3 { font-size: 22px; color: var(--navy); }
.uotc-ref strong { font-size: 18px; color: var(--navy); }
@media (max-width: 599px) {
  .uotc-quote .uotc-grid { grid-template-columns: 1fr; }
  .uotc-quote-success { padding: var(--space-4); }
}

/* WhatsApp button and language link. */
.uotc-wa-button .btn .ico { width: 20px; height: 20px; }
.uotc-lang-switch { font-weight: 600; text-decoration: none; }

/* Empty state, shown when data is missing. */
.uotc-empty { padding: var(--space-4); border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--muted); }

/* Package cards. */
.uotc-pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.uotc-pkg { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.uotc-pkg-pic { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.uotc-pkg-body { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; padding: var(--space-4); }
.uotc-pkg-body h3 { font-size: 18px; font-weight: 700; color: var(--navy); }
.uotc-pkg-body h3 a { color: inherit; text-decoration: none; }
.uotc-pkg-body h3 a:hover { text-decoration: underline; }
.uotc-pkg-summary { font-size: 14px; color: var(--muted); }
.uotc-pkg-legs { display: grid; gap: 2px; padding-inline-start: 1.3em !important; list-style: decimal !important; font-size: 14px; }
.uotc-pkg-from { font-size: 13px; color: var(--muted); }
.uotc-pkg-switch { font-size: 13px; font-weight: 600; }
.uotc-pkg-veh {
  min-height: 44px; padding: 0 30px 0 var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-sm); appearance: none; -webkit-appearance: none;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355627A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 14px;
  font-weight: 600; color: var(--text); max-width: 100%;
}
[dir="rtl"] .uotc-pkg-veh { padding: 0 var(--space-3) 0 30px; background-position: left 8px center; }
.uotc-pkg-price { margin-top: auto; padding-top: var(--space-2); }
.uotc-pkg-price strong, .uotc-pkgd-total strong { display: block; font-size: 24px; font-weight: 700; color: var(--text); }
.uotc-pkg-label { display: block; font-size: 13px; color: var(--muted); }
.uotc-pkg-save { font-size: 13px; font-weight: 600; color: #1a7f37; }
.uotc-pkg-save[hidden] { display: none; }
.uotc-pkg-act { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Package detail. */
.uotc-package-detail { display: grid; gap: var(--space-5); }
.uotc-pkgd-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.uotc-pkgd-head > label { font-weight: 600; }
.uotc-pkgd-head .uotc-cur { margin: 0; }
.uotc-timeline { display: grid; gap: 0; }
.uotc-timeline > li { display: grid; grid-template-columns: 40px 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-bottom: 1px solid var(--line-soft); position: relative; }
.uotc-tl-n { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--navy); color: var(--white); font-weight: 700; font-size: 14px; }
.uotc-tl-body h3 { font-size: 16px; font-weight: 600; }
.uotc-tl-body h3 a { color: var(--navy); text-decoration: none; }
.uotc-tl-body h3 a:hover { text-decoration: underline; }
.uotc-tl-meta { margin-top: 2px; font-size: 13px; color: var(--muted); }
.uotc-tl-fare { font-weight: 700; white-space: nowrap; }
.uotc-pkgd-total { padding: var(--space-4); border-radius: var(--radius); background: var(--cloud); }
.uotc-pkgd-prices { min-width: 520px; }
.uotc-pkgd-prices tr.is-current th, .uotc-pkgd-prices tr.is-current td { background: var(--blue-soft); }
.uotc-pkgd-prices small.uotc-pkg-save { display: block; }
.uotc-pkgd-h { font-size: 18px; font-weight: 700; color: var(--navy); }
.uotc-pkg-inc { display: grid; gap: var(--space-2); }
.uotc-pkg-inc li { display: flex; gap: var(--space-2); align-items: flex-start; }
.uotc-pkg-inc .ico { color: var(--blue); flex: none; margin-top: 2px; }
.uotc-pkgd-notes { display: grid; gap: var(--space-2); font-size: 14px; color: var(--muted); }
.uotc-pkgd-book { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 599px) {
  .uotc-timeline > li { grid-template-columns: 32px 1fr; }
  .uotc-tl-fare { grid-column: 2; }
}