/* Touch layouts share the same booking and tracking flows as desktop. */
.mobile-hero-art { display: none; }
.booking-first-hero .geo-kicker { display: inline-block; max-width: 100%; padding: 6px 11px; border-radius: 20px; background: #eaf1ff; color: #0965e9; font-size: 11px; letter-spacing: .5px; line-height: 1.5; }
.booking-first-hero .geo-copy h1 { font-size: clamp(36px,3.7vw,54px); }
.booking-first-hero .geo-copy h1 em { color: #438fff; font-style: normal; }
.booking-first-hero .hero-trust { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.booking-first-hero .hero-trust span, .booking-first-hero .hero-trust span:nth-child(3) { display: flex; align-items: flex-start; max-width: none; min-width: 0; }
.booking-first-hero .hero-trust b { min-width: 0; }
.booking-first-hero .hero-trust strong { display: block; color: #f0f5ff; font-size: 12px; line-height: 1.4; }
.booking-first-hero .hero-trust small { display: block; color: #b5c8de; font-size: 11px; line-height: 1.5; margin-top: 3px; }
.site-header { background: #fff; border-bottom: 1px solid #dce6f0; }
.site-header .brand { animation: none; }
.brand-logo { display: block; width: 216px; height: 84px; object-fit: contain; }
.site-header .desktop-nav a { color: #193653; }
.site-header .desktop-nav a:hover, .site-header .desktop-nav a.is-active { color: #066ee5; }
.site-header .language-picker { background: #f3f7fb; border-color: #d9e4ef; color: #173858; }
.site-header .language-picker select { color: #173858; }
.site-header .language-picker select option { background: #fff; color: #173858; }
.footer-logo { display: inline-flex; width: 246px; max-width: 100%; padding: 7px 12px; background: #fff; border-radius: 10px; }
.footer-logo .brand-logo { width: 100%; height: auto; }
body { min-width: 0; }
.request-drawer:not(.is-open) { visibility: hidden; pointer-events: none; }
.tracking-controls .selector label { flex: 1; min-width: 0; }
.tracking-controls .selector span { width: 100%; padding: 9px 10px; line-height: 1.4; text-align: center; }
.tracking-controls .selector label:focus-within { outline: 3px solid #52a2ff; outline-offset: 3px; border-radius: 8px; }
.tracking-controls .selector input:checked + span { color: #0869cb; }
html[dir=rtl] #reviewNext svg { transform: rotate(180deg); }
html[dir=rtl] #reviewPrev svg { transform: none; }

@media (max-width: 1024px) {
  input, select, textarea { font-size: 16px; }
  .booking-first-hero .console-fields .input-shell input,
  .booking-first-hero .console-fields .input-shell select { font-size: 16px; }
  .site-header { gap: 16px; padding-inline: 20px; }
  .site-header .desktop-nav { gap: 15px; }
}

@media (max-width: 780px) {
  html { scroll-padding-top: calc(var(--mobile-header-height,74px) + 18px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .page-width { width: calc(100% - 32px); }
  .site-header { position: fixed; height: auto; min-height: 78px; flex-wrap: wrap; padding: 7px max(16px, env(safe-area-inset-right)) 7px max(16px, env(safe-area-inset-left)); background: #fff; box-shadow: 0 3px 16px #1028400b; }
  .site-header .brand-logo { width: 158px; height: 62px; }
  .site-header .brand { min-width: 0; flex: 0 0 auto; max-width: 100%; }
  .site-header .brand-wordmark { white-space: nowrap; gap: 4px; flex-wrap: wrap; }
  .site-header .brand-wordmark strong { font-size: 26px; }
  .site-header .brand-wordmark small { font-size: 18px; letter-spacing: -.5px; }
  .header-actions { flex-shrink: 0; gap: 8px; }
  .site-header .language-picker { height: 44px; min-width: 49px; }
  .site-header .language-picker select { height: 44px; min-width: 43px; font-size: 14px; }
  .site-header .menu-button { width: 44px; height: 44px; }
  .site-header .menu-button { background: #f3f7fb; border-color: #d9e4ef; }
  .site-header .menu-button span { background: #173858; }
  .site-header .mobile-menu { top: calc(100% - 6px); inset-inline: 12px; max-height: calc(100dvh - var(--mobile-header-height,74px) - 14px); overflow-y: auto; overscroll-behavior: contain; padding: 10px; }
  .site-header .mobile-menu a { display: flex; align-items: center; min-height: 48px; font-size: 16px; }
  .site-header .mobile-cta { justify-content: center; }
  #booking, #tracking, #how, #coverage, #reviews { scroll-margin-top: 18px; }
  .booking-first-hero .hero-inner { width: calc(100% - 32px); min-width: 0; padding-top: calc(var(--mobile-header-height,74px) + 18px); gap: 18px; }
  .booking-first-hero .geo-copy { padding-inline: 2px; }
  .booking-first-hero .geo-copy h1, .booking-first-hero .geo-kicker { animation: none; }
  .booking-first-hero .geo-kicker { font-size: 10px; letter-spacing: 1.4px; line-height: 1.6; }
  .booking-first-hero .geo-copy h1 { font-size: clamp(26px, 6.9vw, 34px); line-height: 1.23; margin-top: 10px; }
  .booking-first-hero #booking { min-width: 0; padding: 23px 20px; scroll-margin-top: 18px; }
  .booking-first-hero #booking { border-radius: 16px; border-color: #ffffffb3; box-shadow: 0 14px 35px #020f2933; }
  .booking-first-hero .action-heading { margin-bottom: 20px; }
  .booking-first-hero .action-heading h2 { font-size: 25px; line-height: 1.25; }
  .booking-first-hero .action-heading p { font-size: 14px; line-height: 1.55; }
  .booking-first-hero .console-fields { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .booking-first-hero .console-fields .field { gap: 6px; }
  .booking-first-hero .console-fields .input-shell { min-width: 0; min-height: 52px; height: auto; }
  .booking-first-hero .console-fields .input-shell input,
  .booking-first-hero .console-fields .input-shell select { min-height: 50px; height: auto; font-size: 16px; line-height: 1.4; padding-block: 12px; }
  .booking-first-hero .console-fields .input-shell input[type=date] { display: block; width: 100%; appearance: none; -webkit-appearance: none; }
  input[type=date]::-webkit-date-and-time-value { text-align: start; min-height: 1.4em; }
  .booking-first-hero .console-submit { min-width: 0; padding: 14px 12px; white-space: normal; line-height: 1.4; }
  .booking-first-hero .console-form-note { font-size: 13px; color: #62758c; }
  .booking-first-hero .console-fields .error, .lookup-error { font-size: 13px; }
  .field, .input-shell, .action-card, .tracking-layout, .tracking-controls { min-width: 0; }
  .tracking-after-hero .tracking-card { padding: 25px 20px; }
  .tracking-after-hero .tracking-card { border-radius: 16px; border-color: #dde7f2; }
  .tracking-after-hero .tracking-copy p { font-size: 15px; }
  .tracking-controls .selector { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 5px; padding: 4px; }
  .tracking-controls .selector label { min-height: 48px; }
  .tracking-controls .selector span { display: grid; place-items: center; min-height: 48px; height: 100%; font-size: 14px; }
  .tracking-controls .large-input { grid-template-columns: minmax(0,1fr); }
  .tracking-controls .large-input input { letter-spacing: 0; font-weight: 500; }
  .tracking-controls .inline-track { padding: 13px; line-height: 1.4; white-space: normal; }
  .tracking-controls .field-hint { font-size: 13px; overflow-wrap: anywhere; }
  .tracking-controls .demo-link { min-height: 44px; font-size: 14px; }
  .result-head h3 { font-size: clamp(18px,5vw,22px); direction: ltr; unicode-bidi: isolate; overflow-wrap: anywhere; }
  .status-pill { white-space: normal; line-height: 1.45; }
  .result-meta { padding: 0; gap: 1px; }
  .result-meta > div { padding: 14px; }
  .result-meta span { font-size: 13px; }
  .result-meta strong { overflow-wrap: anywhere; text-overflow: clip; }
  .shipment-timeline::before { display: none; }
  .timeline-step { min-height: 56px; padding-block: 12px; }
  .timeline-step:after { height: 100%; top: 27px; }
  .timeline-step > span:last-child { line-height: 1.5; }
  .tracking-not-found > div { flex-direction: column; }
  .tracking-not-found button, .tracking-not-found a { min-height: 48px; white-space: normal; }
  .story-copy h2, .process-scene .center-heading h2, .reviews-heading h2 { font-size: clamp(28px,7.5vw,34px); }
  .story-copy > p, .coverage-scene .story-copy > p { font-size: 16px; }
  .port-tags { flex-wrap: wrap; }
  .city-options button { min-height: 44px; font-size: 14px; }
  .city-info p { font-size: 14px; }
  .process-cards article, .process-cards article:dir(rtl) { padding-inline: 60px 18px; min-width: 0; }
  .trust-card { padding-inline: 78px 18px; min-width: 0; }
  .trust-icon { inset-inline-start: 18px; }
  .trust-card p { font-size: 15px; }
  .reviews-heading p { font-size: 14px; }
  .reviews-carousel { grid-auto-columns: 90%; overscroll-behavior-x: contain; scroll-padding-inline: 2px; }
  .review-card { padding: 22px 20px; }
  .review-card .placeholder-badge { font-size: 12px; letter-spacing: .3px; }
  .review-card footer { flex-wrap: wrap; }
  .destination-content .hero-actions { flex-direction: column; align-items: stretch; }
  .destination-content .hero-actions a { width: 100%; min-height: 52px; flex: auto; font-size: 16px; white-space: normal; padding: 13px; }
  .footer-main nav a, .footer-languages button, .footer-bottom button { min-height: 44px; font-size: 14px; }
  .footer-languages { flex-wrap: wrap; gap: 8px 16px; }
  .footer-contact-link { min-height: 44px; font-size: 14px; }
  .footer-contact p { font-size: 14px; }
  .footer-bottom { padding-bottom: max(24px,env(safe-area-inset-bottom)); }
  .modal-backdrop { padding: max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom)); }
  .confirmation-modal, .review-modal, .policy-card { width: min(555px,100%); max-height: calc(100dvh - 24px); overscroll-behavior: contain; padding: 56px 20px 24px; border-radius: 16px; }
  .confirmation-modal .reference-box { min-width: 0; }
  .reference-box > strong { font-size: clamp(18px,5vw,24px); letter-spacing: .02em; direction: ltr; unicode-bidi: isolate; }
  .reference-box > div { flex-wrap: wrap; }
  .reference-box button { padding: 8px; }
  .reference-reminder { line-height: 1.65; }
  .confirmation-actions button { white-space: normal; padding: 13px; }
  .toast { max-width: calc(100% - 32px); width: max-content; bottom: max(16px,env(safe-area-inset-bottom)); text-align: center; }
  .request-drawer { height: 100dvh; overscroll-behavior: contain; }
  .drawer-header { padding-top: 64px; }
  .drawer-header h2 { font-size: 24px; overflow-wrap: anywhere; }
  .detail-grid span { font-size: 13px; }
  .detail-grid strong { font-size: 15px; overflow-wrap: anywhere; }
  .drawer-form .field-hint, .drawer-form .field > span:first-child { font-size: 14px; line-height: 1.5; }
  .admin-topbar { flex-wrap: wrap; }
  .stat-card span:last-child { font-size: 13px; }
  .admin-tabs button { min-height: 44px; font-size: 14px; }
  .search-box { min-height: 48px; flex-basis: auto; }
  .search-box input, .operations-toolbar select { font-size: 16px; }
  .request-row { grid-template-columns: minmax(0,1fr) 20px; gap: 10px; }
  .request-row strong, .request-row span { font-size: 14px; white-space: normal; overflow-wrap: anywhere; }
  .request-row small { font-size: 12px; }
  .request-row .request-route { display: block; grid-column: 1; }
  .request-row .row-arrow { grid-column: 2; grid-row: 1/4; }
  .review-admin-row { grid-template-columns: minmax(0,1fr); }
  .review-admin-row .review-copy, .review-admin-row .review-route { display: block; }
  .review-admin-row strong, .review-admin-row p { font-size: 14px; }
  .review-admin-row small { font-size: 12px; }
  .review-actions button { min-height: 44px; font-size: 14px; }
  html[dir=rtl] .booking-first-hero .geo-copy h1 { letter-spacing: 0; line-height: 1.5; }
  html[dir=rtl] .process-cards article { padding-inline: 60px 18px; }
  html[dir=rtl] .trust-card { padding-inline: 78px 18px; }
  html[dir=rtl] .trust-icon { right: 18px; left: auto; }
}

@media (max-width: 359px) {
  .site-header { padding-inline: 12px; gap: 8px; }
  .site-header .brand-wordmark strong { font-size: 24px; }
  .site-header .brand-wordmark small { font-size: 16px; }
  .site-header .brand-logo { width: 142px; height: 56px; }
  .header-actions { gap: 5px; }
  .site-header .language-picker svg { display: none; }
  .booking-first-hero #booking, .tracking-after-hero .tracking-card { padding-inline: 17px; }
  .booking-first-hero .action-heading h2 { font-size: 23px; }
  .tracking-controls .selector span { padding-inline: 5px; font-size: 13px; }
  .detail-grid { grid-template-columns: minmax(0,1fr); }
}

/* Compact, immersive port-and-road hero on phones. Desktop is unchanged. */
@media (max-width: 780px) {
  .site-header { min-height: 66px; padding-block: 6px; }
  .site-header .brand-logo { width: 132px; height: 52px; }
  .booking-first-hero .hero-inner { gap: 24px; padding-top: calc(var(--mobile-header-height,66px) + 20px); }
  .booking-first-hero .geo-copy { padding: 0; }
  .booking-first-hero .geo-kicker { font-size: 11px; letter-spacing: .2px; }
  .booking-first-hero .hero-trust { gap: 12px; margin-top: 22px; }
  .booking-first-hero .hero-trust span, .booking-first-hero .hero-trust span:nth-child(3) { flex-direction: column; gap: 7px; }
  .booking-first-hero .hero-trust strong { font-size: 12px; }
  .booking-first-hero .hero-trust small { font-size: 11px; }
  .booking-first-hero .geo-copy h1 { font-size: clamp(30px, 8.2vw, 42px); line-height: 1.12; letter-spacing: -1.2px; margin: 12px 0; }
  .booking-first-hero .geo-copy > p { display: block; max-width: 560px; margin: 0; font-size: 15px; line-height: 1.55; color: #c0d3e8; animation: none; }
  .booking-first-hero .mobile-hero-art { display: block; position: relative; width: calc(100% + 32px); height: clamp(205px, 63vw, 320px); margin: 8px -16px 0; overflow: hidden; isolation: isolate; background: #071c35; direction: ltr; }
  .mobile-hero-art picture, .mobile-hero-art img { display: block; width: 100%; height: 100%; }
  .mobile-hero-art img { object-fit: cover; object-position: center 60%; }
  .mobile-hero-art::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg,#071c35 0%,transparent 18%,transparent 88%,#071c35 100%); }
  .booking-first-hero .hero-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 10px; animation: none; }
  .booking-first-hero .geo-copy .hero-actions .primary-button.compact,
  .booking-first-hero .geo-copy .hero-actions .dark-outline-button { width: 100%; min-width: 0; min-height: 52px; padding: 10px 8px; font-size: 14px; line-height: 1.4; white-space: normal; text-align: center; justify-content: center; }
  .booking-first-hero .hero-actions .primary-button { background: linear-gradient(105deg,#178cfa,#0669e6); border-color: #479afb; }
  .booking-first-hero .hero-actions svg { width: 18px; flex: 0 0 18px; }
  .booking-first-hero #booking { order: 2; }
  html[dir=rtl] .booking-first-hero .geo-copy h1 { font-size: clamp(29px, 7.8vw, 40px); letter-spacing: 0; line-height: 1.4; }
}
@media (max-width: 359px) {
  .booking-first-hero .geo-copy .hero-actions .primary-button.compact,
  .booking-first-hero .geo-copy .hero-actions .dark-outline-button { font-size: 13px; }
  .booking-first-hero .hero-actions .primary-button svg { display: none; }
}

/* Direct MYLO support: safe-area spacing and a comfortable touch target. */
.mylo-whatsapp-float {position:fixed;inset-inline-end:22px;bottom:calc(20px + env(safe-area-inset-bottom));z-index:45;display:inline-flex;align-items:center;gap:10px;min-height:54px;padding:12px 18px;border:1px solid #ffffff55;border-radius:30px;background:#087c43;color:#fff;box-shadow:0 6px 24px #052f3033;text-decoration:none;font-size:14px;font-weight:650;line-height:1.3;}
.mylo-whatsapp-float svg {width:28px;height:28px;flex:none;}
.mylo-whatsapp-float:hover {background:#066637;}
.mylo-whatsapp-float:focus-visible {outline:3px solid #53afff;outline-offset:4px;}
body:has(.modal-backdrop:not([hidden])) .mylo-whatsapp-float,body:has(#adminView:not([hidden])) .mylo-whatsapp-float {display:none;}
.journey-footer {padding-bottom:90px;}
@media(max-width:780px){.mylo-whatsapp-float{inset-inline-end:max(12px,env(safe-area-inset-right));bottom:calc(12px + env(safe-area-inset-bottom));min-height:50px;padding:10px 14px;font-size:13px;max-width:calc(100vw - 24px);}body:has(input:focus,select:focus,textarea:focus,#mobileMenu.is-open) .mylo-whatsapp-float{display:none;}}
@media print{.mylo-whatsapp-float{display:none!important;}}