/* ==========================================================================
   transfers.css — עמודי ההעברות
   ==========================================================================

   נטען אחרון, אחרי hotels.css.

   ‼️ סגוליות: לא דורסים את הכלל, דורסים את הטוקן.
   ‎legacy-patterns.css‎ מחזיק ‎.legacy #te-main .section.section‎ עם
   מחלקה כפולה — (0,4,0). ניסיון להדק ריפוד מול הכלל הזה עלה לאיגור
   שני סבבים. הכלל כבר קובע ‎var(--section-pad)‎, ולכן הריפוד כאן
   נשלט בהצבת הטוקן על ‎.transfers-page‎ ולא בכלל מתחרה.

   הצבעים הם טוקנים בלבד. הרדיוסים הם שלושת הקיימים.
   ========================================================================== */

.transfers-page {
  /* מהדק את הריווח בין הסקשנים בלי להתקרב ל-.section.section */
  --section-pad: clamp(var(--sp-5), 2.4vw, var(--sp-7));

  /* משטח כרטיס ההעברות. שמנת חמה, לא אפור קר — החלטת המותג */
  --tr-card: var(--c-surface-raised);
  --tr-line: var(--c-line);
}

/* --------------------------------------------------------------------------
   טיפוגרפיה משותפת
   -------------------------------------------------------------------------- */

.transfers-page h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-navy-900);
  margin-block: 0 var(--sp-3);
}

/* עמודת טקסט קריאה, מיושרת לקו הפתיחה של הרשת שלידה ולא ממורכזת */
.transfers-page .tr-lead {
  max-inline-size: 76ch;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-700);
  margin-block: 0 var(--sp-6);
}

/* --------------------------------------------------------------------------
   פתיח
   -------------------------------------------------------------------------- */

.tr-hero__grid {
  display: grid;
  gap: var(--sp-6);
}

/*
 * תמונת הפתיח.
 *
 * ‎grid-column: 1 / -1‎ — היא רצועה מלאה מעל שתי העמודות ולא
 * עמודה שלישית. ‎21/9‎ שומר אותה נמוכה כך שהכותרת והמחירים
 * נשארים מעל הקיפול גם בנייד.
 */
.tr-hero__media {
  grid-column: 1 / -1;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-sea-050);
}

.tr-hero__media img {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  display: block;
}

@media (max-width: 719px) {
  .tr-hero__media img { aspect-ratio: 16 / 9; }
}

.tr-hero__eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--c-sea-600);
  text-transform: uppercase;
  margin-block: 0 var(--sp-3);
}

/* מוצג רק בעמוד שה-strip הסיר ממנו את ה-h1 המקורי */
.tr-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  color: var(--c-navy-900);
  margin-block: 0 var(--sp-3);
}

.tr-hero__lede {
  max-inline-size: 60ch;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-700);
  margin-block: 0 var(--sp-5);
}

.tr-hero__points {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

/* שש עובדות בטור אחד הן חצי מסך. בשתי עמודות הן שלוש שורות. */
@media (min-width: 640px) {
  .tr-hero--cover .tr-hero__points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--sp-5);
  }
}

.tr-hero__points li {
  position: relative;
  padding-inline-start: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--c-ink-700);
}

/*
 * הסימן נבנה ב-CSS ולא נכתב בתוכן. וי טקסטואלי בתחילת צומת טקסט
 * נשבר באלגוריתם הדו-כיווני ומוצג בצד הלא נכון — ראה bidi-fix.js.
 */
.tr-hero__points li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.45em;
  inline-size: var(--sp-3);
  block-size: var(--sp-3);
  border-inline-start: 2px solid var(--c-sea-500);
  border-block-end: 2px solid var(--c-sea-500);
  transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   סוגי השירות ומה שכלול — ממוזג לפתיח

   היה סקשן טקסט באמצע עמוד האב: פסקה ושתי רשימות תבליטים. שי
   ביקש למזג אותו לכותרת. אלה ארבע אפשרויות לבחור מהן ושלוש
   עובדות על מה שכלול, ולכן הן עובדות טוב יותר כשורת בחירה עם
   אייקון מאשר כרשימה שצריך לקרוא.
   -------------------------------------------------------------------------- */

.tr-ico {
  inline-size: 20px;
  block-size: 20px;
  flex: 0 0 auto;
}

.tr-svc { margin-block-end: var(--sp-6); }

.tr-svc__grid {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.tr-svc__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  background: var(--tr-card);
  border: 1px solid var(--tr-line);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-navy-900);
}

.tr-svc__item .tr-ico { color: var(--c-sea-600); }

.tr-incl__title {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-500);
  margin-block: 0 var(--sp-3);
}

/* שורה אחת זורמת — אלה עובדות נלוות ולא בחירה, ולכן בלי מסגרת */
.tr-incl {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}

.tr-incl__item {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--c-ink-700);
}

.tr-incl__item .tr-ico { color: var(--c-gold-600); }

/* תיבת המסלולים המבוקשים — נייבי, כי היא המבטא היחיד בפתיח */
.tr-hero__quick {
  background: var(--c-navy-900);
  color: var(--c-white);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  box-shadow: var(--shadow-md);
}

/* --------------------------------------------------------------------------
   מפת המסלולים

   אותה שפה כמו ‎flight-route‎ בעמוד הטיסות: מוקד אחד, מניפת
   מסלולים, וכלי רכב שנע לאורכם. שם זה מטוס, כאן רכב — ובהעברות
   המסלול הוא המוצר עצמו, לא איור.

   המחירים במפה נקראים מאותו מחירון שבהמשך העמוד, ולכן לא ייתכן
   פער בין הפתיח לטבלה.
   -------------------------------------------------------------------------- */

.tr-map { margin-block-end: var(--sp-5); }

.tr-map__svg {
  inline-size: 100%;
  block-size: auto;
  display: block;
  overflow: visible;
}

/*
 * הכביש מצויר כקו מקווקו שזוחל.
 *
 * ‎stroke-dashoffset‎ ולא ‎transform‎: הקו נשאר במקומו והתנועה היא
 * של המקווקו בלבד, כך שאין ריצוד של הגיאומטריה בזום.
 */
.tr-map__road {
  stroke: var(--c-sea-400);
  stroke-width: 1.5;
  stroke-dasharray: 5 7;
  opacity: 0.55;
  animation: tr-road 2.4s linear infinite;
  animation-delay: calc(var(--i) * -0.6s);
}

@keyframes tr-road { to { stroke-dashoffset: -24; } }

.tr-map__stop {
  fill: var(--c-gold-500);
  stroke: var(--c-navy-900);
  stroke-width: 2;
}

.tr-map__label {
  fill: var(--c-white);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-bold);
}

.tr-map__price {
  fill: var(--c-gold-500);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--fw-bold);
}

.tr-map__hub-label {
  fill: var(--c-sea-200);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: var(--fw-semibold);
}

.tr-map__hub-dot { fill: var(--c-gold-500); }

/* הפעימה מסמנת את נקודת האיסוף — המקום שממנו הכל יוצא */
.tr-map__pulse {
  fill: var(--c-gold-500);
  opacity: 0.35;
  transform-origin: center;
  transform-box: fill-box;
  animation: tr-pulse 2.6s ease-out infinite;
}

@keyframes tr-pulse {
  0% { transform: scale(0.7); opacity: 0.45; }
  70% { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

.tr-map__car { color: var(--c-white); }

/*
 * ‎prefers-reduced-motion‎ אינו נימוס.
 *
 * ארבעה רכבים שנעים ברצף הם בדיוק מה שמפעיל מיגרנה או בחילה
 * אצל מי שהגדיר את ההעדפה. כאן הכל עוצר: הרכבים נעלמים, הכביש
 * מצויר מלא, והמידע נשאר — הוא ממילא כתוב ברשימה שלצד המפה.
 */
@media (prefers-reduced-motion: reduce) {
  .tr-map__road { animation: none; opacity: 0.7; }
  .tr-map__pulse { animation: none; opacity: 0.25; }
  .tr-map__car { display: none; }
}

/* במסך צר המפה מתכווצת לכלום — הרשימה שמתחתיה מספיקה */
@media (max-width: 719px) {
  .tr-map { display: none; }
}

.tr-hero__quick-title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-white);
  margin-block: 0 var(--sp-4);
}

.tr-hero__quick-note {
  font-size: var(--fs-2xs);
  color: var(--c-sea-200);
  margin-block: var(--sp-4) 0;
}

.tr-quick { list-style: none; margin: 0; padding: 0; }

.tr-quick__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-3);
  border-block-end: 1px solid rgb(255 255 255 / 0.12);
}
.tr-quick__item:last-child { border-block-end: 0; }

.tr-quick__route {
  font-size: var(--fs-sm);
  color: var(--c-white);
}

/* המחיר הוא הפעולה בתיבה הזו, ולכן הוא מקבל את הזהב */
.tr-quick__price {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-gold-500);
  white-space: nowrap;
}

@media (min-width: 900px) {
  .tr-hero__grid {
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
  }

  /*
   * ‼️ שלוש עמודות, והגובה נקבע לפי הגבוהה שבהן.
   *
   * בטור אחד הפתיח היה 1,051 פיקסל — סכום של טקסט ועוד כרטיסים
   * ועוד מפה. בשלוש עמודות הוא הגובה של האחת הארוכה מביניהן.
   * זה מה שהפך אותו ממסך וחצי למסך.
   */
  .tr-hero--cover .tr-hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(186px, 236px) minmax(190px, 280px);
    gap: var(--sp-6);
    align-items: start;
  }
}

/* --------------------------------------------------------------------------
   רשת היעדים

   ‼️ זו הרשת שהחליפה את מה שהיה בעמוד האב: שני כרטיסים ברשת
   שנבנתה לארבעה, כלומר חצי מסך ריק, ותוויות שנחתכו באמצע מילה
   כי הן היו ‎white-space:nowrap‎ ברוחב קבוע.

   ‎auto-fit‎ ולא מספר עמודות קשיח — הרשת מתאימה את עצמה למספר
   הכרטיסים בפועל, ולכן הוספת יעד חמישי לא תשבור אותה.
   -------------------------------------------------------------------------- */

.tr-dests__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.tr-dest {
  background: var(--tr-card);
  border: 1px solid var(--tr-line);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
}

/*
 * הכרטיס כולו הוא הקישור, ואין בתוכו ‎<a>‎ נוסף.
 * קישור מקונן מוצא החוצה על ידי הדפדפן והכרטיס מתפרק לתא ברשת —
 * זה מה שקרה לדף הבית, וזה כתוב ב-DESIGN-RULES.
 */
.tr-dest__link {
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  text-decoration: none;
  color: inherit;
  transition: box-shadow var(--dur-fast) var(--ease);
}

.tr-dest__link:hover { box-shadow: var(--shadow-md); }

.tr-dest__link:focus-visible {
  outline: 2px solid var(--c-sea-500);
  outline-offset: -2px;
}

/* היעד הנוכחי מסומן ואינו מקושר לעצמו */
.tr-dest--current {
  border-color: var(--c-gold-500);
  flex-direction: column;
}

.tr-dest__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-sea-050);
}

.tr-dest__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.tr-dest__media--none { background: var(--c-navy-800); }

.tr-dest__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
  /* דוחף את המחיר לתחתית כך שכל הכרטיסים מיישרים אותו לאותו קו */
  flex: 1 1 auto;
}

.tr-dest__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
}

/*
 * ‎nowrap‎ על התווית הוא מה שחתך את הטקסט באמצע מילה בעמוד
 * הישן. כאן הטקסט נשבר לשורות כרגיל.
 */
.tr-dest__blurb {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-700);
}

.tr-dest__price {
  margin-block-start: auto;
  padding-block-start: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-gold-700);
}

/* --------------------------------------------------------------------------
   למה דרכנו
   -------------------------------------------------------------------------- */

.tr-why__grid,
.tr-fleet__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.tr-why__card,
.tr-vehicle {
  background: var(--tr-card);
  border: 1px solid var(--tr-line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}

.tr-why__title,
.tr-vehicle__name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  margin-block: 0 var(--sp-2);
}

.tr-why__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-700);
  margin: 0;
}

/*
 * רשת שמשאירה כרטיס בודד בשורה אחרונה מתוקנת לפי מספר הכרטיסים
 * בפועל. ארבעה כרטיסים ברוחב שמכיל שלושה משאירים יתום.
 */
@media (min-width: 640px) and (max-width: 1099px) {
  .tr-why__grid:has(> :nth-child(4):last-child),
  .tr-fleet__grid:has(> :nth-child(4):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   צי הרכבים
   -------------------------------------------------------------------------- */

/*
 * תצלום הרכב.
 *
 * ‎contain‎ ולא ‎cover‎: אלה תצלומי מוצר על רקע בהיר, וחיתוך היה
 * קוטע את חרטום הרכב. הרקע התכלת מחליף את הלבן של התצלום כך
 * שהכרטיס נקרא כיחידה אחת.
 */
.tr-vehicle__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--c-sea-050);
  margin-block-end: var(--sp-3);
}

.tr-vehicle__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  display: block;
}

.tr-vehicle__badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-sea-600);
  background: var(--c-sea-050);
  border-radius: var(--r-sm);
  padding: var(--sp-1) var(--sp-2);
  margin-block-end: var(--sp-3);
}

.tr-vehicle__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--c-ink-700);
}

.tr-vehicle__facts li {
  padding-inline-start: var(--sp-4);
  position: relative;
}
.tr-vehicle__facts li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: var(--r-full);
  background: var(--c-sea-400);
}

/* --------------------------------------------------------------------------
   מחירון

   ‼️ זה הסקשן שבגללו הקובץ קיים. המחירון לא הוגש לגולש כלל.
   -------------------------------------------------------------------------- */

.tr-table-wrap {
  background: var(--tr-card);
  border: 1px solid var(--tr-line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.tr-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.tr-table thead th {
  background: var(--c-navy-900);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-align: start;
  padding: var(--sp-3) var(--sp-4);
  white-space: nowrap;
}

.tr-table tbody tr { border-block-start: 1px solid var(--tr-line); }
.tr-table tbody tr:first-child { border-block-start: 0; }

.tr-table__route {
  text-align: start;
  font-weight: var(--fw-medium);
  color: var(--c-navy-900);
  padding: var(--sp-3) var(--sp-4);
}

.tr-table__route-name { display: block; }

.tr-table__route-note {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  color: var(--c-ink-500);
  margin-block-start: var(--sp-1);
}

.tr-table__price {
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--c-navy-800);
  white-space: nowrap;
  text-align: start;
}

/* מסלול שאינו מוצע ברכב הזה — אפור, לא נקרא כמחיר */
.tr-table__price--none {
  color: var(--c-ink-400);
  font-weight: var(--fw-regular);
}

.tr-prices__pay {
  font-size: var(--fs-2xs);
  color: var(--c-ink-500);
  margin-block: var(--sp-3) 0;
}

/*
 * הערת שוליים למחירון — מה שאינו כלול.
 *
 * מודגשת יותר מהערת התשלום: זו תוספת שהלקוח ישלם בפועל, ומחיר
 * שאינו כולל משהו חייב לומר זאת במקום שבו קוראים את המחיר.
 */
.tr-prices__note {
  background: var(--c-gold-050);
  border-inline-start: 3px solid var(--c-gold-500);
  border-radius: var(--r-sm);
  padding: var(--sp-4);
  margin-block: var(--sp-4) 0;
  max-inline-size: 76ch;
}

.tr-prices__note-title {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-gold-700);
  margin-block: 0 var(--sp-2);
}

.tr-prices__extras {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-700);
}

.tr-prices__extras li {
  position: relative;
  padding-inline-start: var(--sp-4);
}

/* נקודה ולא וי: אלה תוספות תשלום, לא יתרונות */
.tr-prices__extras li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.62em;
  inline-size: 5px;
  block-size: 5px;
  border-radius: var(--r-full);
  background: var(--c-gold-600);
}

/*
 * בנייד הטבלה הופכת לכרטיסים.
 *
 * כל התנועה מובייל, וטבלה בת חמש עמודות בגלילה אופקית פשוט לא
 * נקראת בטלפון: הגולש רואה עמודה וחצי ולא יודע לאיזה רכב שייך
 * המספר. ‎data-label‎ נכתב על כל תא בבנייה ומחזיר את כותרת
 * העמודה לצד המחיר.
 */
@media (max-width: 719px) {
  .tr-table, .tr-table tbody, .tr-table tr { display: block; }
  .tr-table thead { display: none; }

  /*
   * ‼️ 27.9 — היה כאן חיתוך של 80% מכל מחיר בנייד, והשורש לא היה
   * כאן בקובץ. נמדד: tr-table-wrap 341 · table.scrollWidth 386 ·
   * ฿450 גלוי 7px מתוך 34. הפריט: susp-transfer-table-clipped-mobile
   * (אושר 2/2, בוריס ודנה).
   *
   * ההשערות שנפסלו במדידה: לא ריווח (padding 0 + margin 0 לא הזיזו
   * את ה-386), ולא פריסת טבלה אנונימית (כל האלמנטים כבר block/flex,
   * נמדד computed).
   *
   * ‼️ השורש: ‎mobile.css‎ מחזיק ‎.price-table > * { min-width:
   * max-content }‎ עד 700px — דפוס נכון לטבלה שנגללת בתוך עצמה,
   * והטבלה הזו נושאת ‎.price-table‎ בכוונה (זיהוי ב-section-order).
   * אבל כאן הכרטיסים לא אמורים להיגלל, וה-tbody נדחף לרוחב התוכן
   * (386) בתוך wrap של 341 עם overflow: hidden.
   *
   * הביטול שלהלן: (0,1,1) גובר על (0,1,0) בלי לגעת בקובץ של איגור.
   * אחרי התיקון נמדד: tbody 341 · scrollWidth 341 · כל מחיר 34/34.
   */
  .tr-table tbody { min-width: 0; }

  .tr-table tbody tr {
    padding: var(--sp-4);
    border-block-start: 1px solid var(--tr-line);
  }

  /*
   * שם היעד הוא הכותרת של הכרטיס ולכן הוא נושא את הנייבי.
   * בלי זה שלושת המחירים והיעד נראים כרשימה אחת רציפה, והעין לא
   * יודעת איפה נגמר יעד ומתחיל הבא.
   */
  .tr-table th.tr-table__route {
    display: block;
    margin: calc(var(--sp-4) * -1) calc(var(--sp-4) * -1) var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--c-navy-900);
    color: var(--c-white);
    border-start-start-radius: var(--r-sm);
    border-start-end-radius: var(--r-sm);
  }
  .tr-table th.tr-table__route .tr-table__route-note { color: var(--c-sea-200); }

  /*
   * ‎.tr-table td.tr-table__price‎ ולא ‎.tr-table__price‎ לבדו.
   *
   * ‎attractions.css‎ כבר מחזיק ‎.price-table td { display: block }‎
   * באותה שאילתת מדיה, והמחירון שלי נושא ‎.price-table‎ בכוונה כדי
   * שיזוהה ב-‎section-order‎. (0,1,1) שלהם ניצח את (0,1,0) שלי
   * והתווית נפלה לשורה נפרדת מהמחיר. (0,2,1) פותר בלי לגעת
   * בקובץ של איגור.
   */
  .tr-table td.tr-table__price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-1) 0;
  }

  .tr-table__price::before {
    content: attr(data-label);
    font-family: var(--font-body);
    font-size: var(--fs-2xs);
    font-weight: var(--fw-regular);
    color: var(--c-ink-500);
  }
}

/* --------------------------------------------------------------------------
   טופס ההזמנה
   -------------------------------------------------------------------------- */

.tr-booking__panel {
  background: var(--tr-card);
  border: 1px solid var(--tr-line);
  border-radius: var(--r-md);
  /* פדינג גדול יותר מכרטיס רגיל: זה הרכיב שמבקש פעולה */
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  box-shadow: var(--shadow-md);
  max-inline-size: 860px;
  position: relative;
  overflow: hidden;
}

/*
 * הפס הצבעוני העליון הוסר.
 *
 * ---------------------------------------------------------------------------
 * כאן ישב ‎linear-gradient(to left, gold, sea)‎ — פס בן שלושה
 * פיקסלים בראש הפאנל. הנימוק היה "הזהב שמור לפעולה", אבל גרדיאנט
 * משני צבעים אינו סימון של פעולה אלא קישוט, ושי כבר פסל בדיוק את
 * הדפוס הזה בהירו של עמוד המלון: "הקו הצבעוני למעלה לא קשור".
 *
 * מה שמסמן את הטופס כעת הוא הכותרת שלו ומשטח שקוף־כחלחל מאחוריה
 * — הבדל של חומר ולא של פס צבע.
 * ---------------------------------------------------------------------------
 */

.tr-booking__head { margin-block-end: var(--sp-5); }

.tr-booking__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  margin-block: 0 var(--sp-2);
}

.tr-booking__sub {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-700);
  margin: 0;
  max-inline-size: 60ch;
}

/*
 * שלושה שלבים במקום טור אחד של 31 שדות.
 *
 * ‎fieldset‎ ולא ‎div‎: הקיבוץ אמיתי גם למקלדת ולקורא מסך, ולא רק
 * ויזואלי. הריסט נחוץ כי לדפדפן יש ריפוד וגבול משלו ל-fieldset.
 */
/*
 * הטופס מוצג כרשת אחת רציפה, בלי שלושה fieldset ממוספרים.
 *
 * הגרסה הקודמת חילקה אותו לשלושה שלבים עם כותרת וספרה בעיגול
 * לכל אחד. זה הוסיף שלוש כותרות, שלושה קווים מפרידים והרבה
 * אוויר — ועשה טופס קצר לטופס ארוך. שי ביקש לצמצם, וההפרדה
 * הוויזואלית הייתה מה שתפח, לא השדות.
 */

.tr-form__more {
  border: 1px solid var(--tr-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  padding: var(--sp-3) var(--sp-4);
  margin-block-start: var(--sp-4);
}

.tr-form__more-sum {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  cursor: pointer;
}

.tr-form__more-hint {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  color: var(--c-ink-500);
  margin-block-start: var(--sp-1);
}

.tr-form__more-body { margin-block-start: var(--sp-4); }

.tr-form__grid {
  display: grid;
  gap: var(--sp-3) var(--sp-4);
  margin-block-end: var(--sp-3);
}
.tr-form__grid:last-child { margin-block-end: 0; }

/*
 * ‼️ ‎[hidden]‎ חייב לנצח את ‎display‎ שנקבע במחלקה.
 *
 * כלל ברירת המחדל של הדפדפן הוא ‎[hidden]{display:none}‎ עם
 * סגוליות (0,1,0), וכל מחלקה שקובעת ‎display:grid‎ מנצחת אותו.
 * התוצאה: "נא לציין את מקום האיסוף באנגלית" ושני בלוקי פרטי
 * הטיסה הוצגו תמיד, במקום להיפתח רק כשבוחרים "אחר" או כשהמסלול
 * נוגע בשדה תעופה. נתפס בבדיקה בדפדפן; ב-HTML הוא נראה תקין,
 * כי התכונה ‎hidden‎ אכן כתובה שם.
 */
.tr-booking [hidden] { display: none; }

@media (min-width: 640px) {
  .tr-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-form__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   שלושת השלבים

   הטופס נקרא כמו קבלה שמתמלאת: שלב פתוח מציג שדות, שלב סגור מציג
   את מה שנבחר בו. אפשר לחזור לכל שלב בלחיצה על הכותרת — אקורדיון
   ולא אשף שכולא.
   -------------------------------------------------------------------------- */

.tr-step + .tr-step { margin-block-start: var(--sp-3); }

.tr-step__title { margin: 0; }

.tr-step__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  inline-size: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--tr-line);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: start;
  font-family: var(--font-display);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.tr-step__head:hover { border-color: var(--c-sea-400); }
.tr-step__head:focus-visible { outline: 2px solid var(--c-sea-500); outline-offset: 2px; }

.tr-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  inline-size: 28px;
  block-size: 28px;
  border-radius: var(--r-full);
  background: var(--c-navy-900);
  color: var(--c-white);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
}

.tr-step__label {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
}

/*
 * התקציר של שלב סגור.
 *
 * ‎min-width:0‎ עם ‎ellipsis‎ — מסלול ארוך לא דוחף את הכותרת
 * החוצה, הוא נחתך. הוא מידע משני; מה שחייב להישאר קריא הוא
 * המספר והכותרת.
 */
.tr-step__sum {
  min-inline-size: 0;
  flex: 1 1 auto;
  text-align: end;
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  color: var(--c-ink-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* השלב הפתוח מסומן בזהב — אותו קוד צבע כמו כל פעולה באתר */
.tr-step.is-open > .tr-step__title > .tr-step__head {
  background: var(--c-white);
  border-color: var(--c-gold-500);
}

.tr-step__body { padding: var(--sp-4) var(--sp-1) var(--sp-2); }

.tr-step__next { margin-block-start: var(--sp-5); }

@media (prefers-reduced-motion: reduce) {
  .tr-step__head { transition: none; }
}

/* --------------------------------------------------------------------------
   בורר סוג הנסיעה

   שתי אפשרויות בתפריט נפתח הן שלוש פעולות במקום אחת. כאן הן
   שני כפתורים, והבחירה נראית בלי לפתוח כלום.
   -------------------------------------------------------------------------- */

.tr-seg { border: 0; margin: 0 0 var(--sp-4); padding: 0; }

.tr-seg__legend {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-700);
  padding: 0;
  margin-block-end: var(--sp-2);
}

.tr-seg__opts {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--c-sea-050);
  border-radius: var(--r-full);
}

.tr-seg__opt { position: relative; }

/*
 * הרדיו עצמו אינו מוסתר ב-‎display:none‎.
 *
 * שדה נסתר כך יוצא ממסלול המקלדת לגמרי. ‎opacity:0‎ מעליו משאיר
 * אותו מיקודי, ו-‎:focus-visible‎ על האח מצייר את הטבעת.
 */
.tr-seg__opt input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.tr-seg__opt span {
  display: block;
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-full);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-ink-700);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}

.tr-seg__opt input:checked + span {
  background: var(--c-navy-900);
  color: var(--c-white);
}

.tr-seg__opt input:focus-visible + span {
  outline: 2px solid var(--c-sea-500);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   מוני הנוסעים
   -------------------------------------------------------------------------- */

.tr-form__counts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  margin-block-end: var(--sp-4);
}

.tr-count { margin: 0; }

.tr-count__label {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-700);
  margin-block-end: var(--sp-1);
}

.tr-count__box {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--tr-line);
  border-radius: var(--r-full);
  background: var(--c-white);
  overflow: hidden;
}

.tr-count__btn {
  inline-size: 44px;
  block-size: 46px;
  border: 0;
  background: transparent;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  cursor: pointer;
  line-height: 1;
}
.tr-count__btn:hover { background: var(--c-sea-050); }
.tr-count__btn:focus-visible { outline: 2px solid var(--c-sea-500); outline-offset: -2px; }

/* ‎readonly‎ ולא ‎disabled‎ — שדה מושבת אינו נשלח עם הטופס */
.tr-count__val {
  inline-size: 44px;
  border: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  background: transparent;
  /* מסתיר את חיצי המספר של הדפדפן — המונה הוא הממשק */
  -moz-appearance: textfield;
}
.tr-count__val::-webkit-outer-spin-button,
.tr-count__val::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --------------------------------------------------------------------------
   בחירת הרכב

   זו הבחירה שמשפיעה על המחיר, והיחידה שאי אפשר לעשות נכון בלי
   לראות מה מקבלים. התצלומים הם אותם תצלומים שבסקשן צי הרכבים.
   -------------------------------------------------------------------------- */

.tr-veh { border: 0; margin: 0 0 var(--sp-4); padding: 0; }

.tr-veh__legend {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-700);
  padding: 0;
  margin-block-end: var(--sp-2);
}

.tr-veh__grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.tr-veh__opt { position: relative; display: block; }

.tr-veh__opt input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

.tr-veh__card {
  display: block;
  border: 2px solid var(--tr-line);
  border-radius: var(--r-md);
  background: var(--c-white);
  padding: var(--sp-2);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}

.tr-veh__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--c-sea-050);
}
.tr-veh__media img { inline-size: 100%; block-size: 100%; object-fit: contain; display: block; }

.tr-veh__name {
  display: block;
  padding: var(--sp-2) var(--sp-1) 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  text-align: center;
}

.tr-veh__opt input:checked + .tr-veh__card {
  border-color: var(--c-gold-500);
  box-shadow: var(--shadow-md);
}

.tr-veh__opt input:focus-visible + .tr-veh__card {
  outline: 2px solid var(--c-sea-500);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .tr-seg__opt span,
  .tr-veh__card { transition: none; }
}

/* המיכל מחזיק את ה-gap, ולכן לשדה עצמו אין margin */
.tr-field { margin: 0; }

.tr-field__label {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-700);
  margin-block-end: var(--sp-1);
}

.tr-field__req { color: var(--c-danger); }

.tr-field__input {
  inline-size: 100%;
  /* min ולא גובה סופי: תוכן ארוך גולש ונחתך בגובה קשיח */
  min-block-size: 48px;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-body);
  /* 16px מונע מ-iOS להגדיל את העמוד בפוקוס על שדה */
  font-size: 16px;
  color: var(--c-ink-900);
  background: var(--c-white);
  border: 1px solid var(--tr-line);
  border-radius: var(--r-sm);
}

.tr-field__input:hover { border-color: var(--c-sea-400); }

.tr-field__input:focus-visible {
  outline: 2px solid var(--c-sea-500);
  outline-offset: 1px;
  border-color: var(--c-sea-500);
}

/*
 * שדה שמולא מקבל סימון עדין.
 *
 * ‎:valid:not(:placeholder-shown)‎ אינו עובד על ‎select‎, ולכן
 * הסימון הוא על שדה לא ריק בלבד. הוא מאפשר לגולש לסרוק את
 * הטופס ולראות מה נשאר, בלי לקרוא כל תווית מחדש.
 */
.tr-field__input:not(:placeholder-shown):not([value=""]) { border-color: var(--c-sea-200); }

/*
 * ‼️ שורת המלון אינה תיבה.
 *
 * ---------------------------------------------------------------------------
 * כאן היה רקע, ריפוד ופינות מעוגלות, וגם ציון הוסיף לה מסגרת
 * בשכבה שלו. שתי השכבות יחד ציירו מלבן ברוחב מלא שבתוכו שדה
 * אחד ברוחב חצי — כלומר חצי מלבן ריק לגמרי. זה מה ששי ראה
 * כשכתב "עדיין גדול ומגושם", והוא צדק.
 *
 * השדה הזה אינו קבוצה ואינו שלב. הוא שדה אחד שנפתח לפי המסלול,
 * ולכן הוא נראה כמו כל שדה אחר בטופס. ‎.tr-form__flight‎ ו-
 * ‎.tr-form__more‎ כן נשארו בתיבה — אלה באמת קבוצות נפרדות
 * שנפתחות ונסגרות.
 * ---------------------------------------------------------------------------
 */

textarea.tr-field__input { min-block-size: 96px; resize: vertical; }

.tr-phone { display: flex; gap: var(--sp-2); }
.tr-phone__prefix { inline-size: 88px; flex: 0 0 auto; text-align: center; }
.tr-phone__num { flex: 1 1 auto; }

/*
 * פרטי הטיסה מקופלים.
 *
 * שמונה שדות שרלוונטיים רק כשהמסלול נוגע בשדה תעופה. ‎details‎
 * ולא ‎style.display‎: הוא נפתח גם בלי JS, ו-Ctrl+F של הדפדפן
 * מוצא את מה שבתוכו.
 */
.tr-form__flight {
  border: 1px solid var(--tr-line);
  border-radius: var(--r-sm);
  background: var(--c-sea-050);
  padding: var(--sp-4);
  margin-block-start: var(--sp-5);
}

.tr-form__flight-sum {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  cursor: pointer;
}

.tr-form__flight-hint {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  color: var(--c-ink-500);
  margin-block-start: var(--sp-1);
}

.tr-form__flight-body { margin-block-start: var(--sp-4); }

.tr-form__flight-title {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--c-ink-700);
  margin-block: 0 var(--sp-3);
}

.tr-form__foot { margin-block-start: var(--sp-6); }

.tr-form__note {
  font-size: var(--fs-2xs);
  color: var(--c-ink-500);
  text-align: center;
  margin-block: var(--sp-3) 0;
}

.tr-form__ok,
.tr-form__err {
  border-radius: var(--r-md);
  padding: var(--sp-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.tr-form__ok {
  background: var(--c-sea-050);
  border: 1px solid var(--c-sea-200);
  color: var(--c-ink-900);
}

.tr-form__ok-title,
.tr-form__err-title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  margin-block: 0 var(--sp-2);
}

.tr-form__ok-title { color: var(--c-sea-600); }

/*
 * הודעת הכישלון.
 *
 * ‼️ היא קיימת כי היא לא הייתה קיימת. הטופס המקורי הציג "נקלטה"
 * במקביל ל-fetch ובלע את השגיאה ל-console — ליד שנפל נעלם בלי
 * שאיש ידע. ראה הערת הבאג ב-transfer-pages.js.
 */
.tr-form__err {
  background: var(--c-gold-050);
  border: 1px solid var(--c-gold-200);
  color: var(--c-ink-900);
}
.tr-form__err-title { color: var(--c-gold-700); }
.tr-form__err .btn { margin-block-start: var(--sp-4); }

/* --------------------------------------------------------------------------
   תוכן ישן של עמוד פטאיה — תיקון מראה בלבד

   ‼️ העמוד הזה מחזיק 5,144 מילים שנכתבו ידנית והוא הנכס התוכני
   החזק ביותר בתחום ההעברות. ניסיון אחד למחוק ולבנות אותו מחדש
   בשפת המערכת עלה 43 יחידות תוכן, כולל שלוש פסקאות ה-SEO וכל
   הכותרות שמכילות "מפאטאיה" — האיות שבכתובת ובכותרת.

   לכן: אף מילה לא זזה. הסימון שלו נשאר כפי שהוא, והמראה מתוקן
   כאן בלבד.

   הוא כתוב בשפה משלו — ‎--primary‎, ‎--radius-lg‎, ‎--text-muted‎,
   ‎--shadow-hover‎ — שאינה קיימת ב-‎tokens.css‎, ולכן כל הצבעים
   שלו נפלו לברירת מחדל. הטוקנים החסרים ממופים כאן לטוקנים
   האמיתיים במקום להיכתב מחדש בעמוד.
   -------------------------------------------------------------------------- */

.transfers-page {
  --primary: var(--c-navy-900);
  --secondary: var(--c-sea-600);
  --accent-gold: var(--c-gold-500);
  --text-muted: var(--c-ink-500);
  --radius-lg: var(--r-md);
  --radius-md: var(--r-sm);
  --shadow-hover: var(--shadow-md);
  --bg-light: var(--c-surface);
}

/* הרשת בת ארבעת הכרטיסים של פטאיה — אותה שפה כמו הרשתות שלי */
.transfers-page .grid-4 {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.transfers-page .card {
  background: var(--tr-card);
  border: 1px solid var(--tr-line);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}

.transfers-page .card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  margin-block: 0 var(--sp-2);
}

.transfers-page .card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--c-ink-700);
}

.transfers-page .badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-sea-600);
  background: var(--c-sea-050);
  border-radius: var(--r-sm);
  padding: var(--sp-1) var(--sp-2);
  margin-block-end: var(--sp-3);
}

.transfers-page .vehicle-img-wrap {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-sm);
  margin-block-end: var(--sp-3);
  background: var(--c-sea-050);
}
.transfers-page .vehicle-img-wrap img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

/* המחירון הישן מקבל בדיוק את העיצוב של החדש, כולל כרטיסי הנייד */
.transfers-page .table-wrapper {
  background: var(--tr-card);
  border: 1px solid var(--tr-line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.transfers-page .table-wrapper table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.transfers-page .table-wrapper thead th {
  background: var(--c-navy-900);
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-align: start;
  padding: var(--sp-3) var(--sp-4);
}

.transfers-page .table-wrapper tbody tr { border-block-start: 1px solid var(--tr-line); }
.transfers-page .table-wrapper td { padding: var(--sp-3) var(--sp-4); text-align: start; }

.transfers-page .route-name { display: block; font-weight: var(--fw-medium); color: var(--c-navy-900); }
.transfers-page .route-note { display: block; font-size: var(--fs-2xs); color: var(--c-ink-500); margin-block-start: var(--sp-1); }

.transfers-page .price-tag {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--c-navy-800);
  white-space: nowrap;
}

.transfers-page .eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  color: var(--c-sea-600);
  text-transform: uppercase;
}

.transfers-page .hero-card {
  background: var(--c-navy-900);
  color: var(--c-white);
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.transfers-page .hero-card h3 { color: var(--c-white); }

.transfers-page .quick-grid { display: grid; gap: var(--sp-2); }
.transfers-page .quick-box {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  border-block-end: 1px solid rgb(255 255 255 / 0.12);
}
.transfers-page .quick-box span {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--c-gold-500);
}

.transfers-page .hero-grid { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .transfers-page .hero-grid { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); align-items: start; }
}

.transfers-page .hero-points { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-2); }

.transfers-page .btn-group { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/*
 * שמות בוטסטראפ בתוכן ישן. הם לא נכתבים בקוד חדש, אבל הם כתובים
 * בעמוד הזה, ומיפוי שלהם עדיף על עריכת התוכן.
 */
.transfers-page .btn-primary { background: var(--c-gold-500); color: var(--c-navy-950); }
.transfers-page .btn-secondary { background: var(--c-navy-800); color: var(--c-white); }

.transfers-page .faq-container {
  max-inline-size: 76ch;
  border: 1px solid var(--tr-line);
  border-radius: var(--r-md);
  background: var(--tr-card);
  overflow: hidden;
}
.transfers-page .faq-container details { border-block-start: 1px solid var(--tr-line); }
.transfers-page .faq-container details:first-child { border-block-start: 0; }
.transfers-page .faq-container summary {
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  cursor: pointer;
}
.transfers-page .faq-container details > p {
  padding: 0 var(--sp-5) var(--sp-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-700);
  margin: 0;
}

/*
 * פסקאות ה-SEO שנשמרו מהעמוד המקורי.
 *
 * 76ch הוא רוחב עמודת הטקסט הקריאה לפי DESIGN-RULES, והיא
 * מיושרת לאותו קו פתיחה כמו הרשתות שלידה ולא ממורכזת.
 */
.tr-seo__body {
  max-inline-size: 76ch;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-700);
}
.tr-seo__body p { margin-block: 0 var(--sp-4); }
.tr-seo__body p:last-child { margin-block-end: 0; }
.tr-seo__body strong { color: var(--c-navy-900); font-weight: var(--fw-semibold); }

.transfers-page .section-title h2 { margin-block-end: var(--sp-2); }

/* --------------------------------------------------------------------------
   סגירת העמוד
   -------------------------------------------------------------------------- */

.tr-cta__panel {
  background: var(--c-navy-900);
  color: var(--c-white);
  border-radius: var(--r-md);
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
}

.tr-cta__title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--c-white);
  margin-block: 0 var(--sp-3);
}

.tr-cta__text {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--c-sea-200);
  margin-block: 0 var(--sp-5);
}

.tr-cta__actions { justify-content: center; }

/* הוואטסאפ משני, ולכן קו בלבד — הזהב שמור לפעולה הראשית */
.tr-cta__wa { color: var(--c-white); }
.tr-cta__wa:hover { background: var(--c-white); color: var(--c-navy-900); }

/* --------------------------------------------------------------------------
   שאלות נפוצות
   -------------------------------------------------------------------------- */

.tr-faq__list {
  max-inline-size: 76ch;
  border: 1px solid var(--tr-line);
  border-radius: var(--r-md);
  background: var(--tr-card);
  overflow: hidden;
}

.tr-faq__item { border-block-start: 1px solid var(--tr-line); }
.tr-faq__item:first-child { border-block-start: 0; }

.tr-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--c-navy-900);
  cursor: pointer;
  list-style: none;
}
.tr-faq__q::-webkit-details-marker { display: none; }

/* החץ נבנה ב-CSS ולא נכתב בתוכן — פיסוק בקצה צומת טקסט נשבר ב-RTL */
.tr-faq__q::after {
  content: "";
  flex: 0 0 auto;
  inline-size: var(--sp-2);
  block-size: var(--sp-2);
  border-inline-end: 2px solid var(--c-sea-500);
  border-block-end: 2px solid var(--c-sea-500);
  transform: rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}
.tr-faq__item[open] .tr-faq__q::after { transform: rotate(-135deg); }

.tr-faq__a {
  padding: 0 var(--sp-5) var(--sp-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-700);
}
.tr-faq__a p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .tr-faq__q::after { transition: none; }
}

/* --------------------------------------------------------------------------
   פתיח־כיסוי — עמוד האב בלבד
   --------------------------------------------------------------------------
   ‼️ שי: "תכניס בתוך התמונה הראשית מתחת לכותרת הראשית".

   בעמודי היעד התמונה היא ‎figure‎ מעל הטקסט, כי שם היא מידע — זה
   הטרמינל שממנו אוספים. בעמוד האב היא רקע: הכותרת, פסקת השירותים,
   ארבע אפשרויות ההעברה, מה שכלול והכפתור יושבים כולם בתוכה, ומיד
   אחריהם "לאן אתם צריכים העברה?".

   הרקע הוא ‎background-image‎ ולא ‎<img>‎ כי כאן הוא באמת דקורטיבי:
   התוכן הוא העיקר. ה-‎alt‎ לא אובד — אותה תמונה נבחרת גם ל-‎og:image‎
   עם הטקסט החלופי שלה.

   השכבה הכהה אינה קישוט אלא תנאי לקריאוּת: טקסט לבן על תצלום בהיר
   נופל מתחת ליחס הניגודיות הנדרש.
   -------------------------------------------------------------------------- */

.tr-hero--cover {
  position: relative;
  isolation: isolate;
  /* בנייד הכיסוי כבר גבוה בגלל שתי העמודות — ריווח מלא הופך אותו לריק */
  --section-pad: var(--sp-7);
  color: var(--c-white);
}

@media (min-width: 1100px) {
  .tr-hero--cover { --section-pad: var(--sp-9); }
}

/*
 * ‼️ הרקע נצבע ב-::before ולא על הסקשן עצמו.
 *
 * ל-.legacy #te-main .section יש background: var(--c-white) בסגסוגת
 * הקיצור, ובספציפיות (1,2,0) הוא מוחק כל background-image שייכתב
 * על .tr-hero--cover — הסקשן יצא לבן והטקסט הלבן נעלם בתוכו.
 *
 * הכלל ההוא אינו מתייחס ל-::before, ולכן שכבה נפרדת פותרת את זה
 * בלי להעלות ספציפיות ובלי !important — ובלי לגעת בקובץ של איגור.
 */
.tr-hero--cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(180deg, rgb(4 26 51 / 0.86) 0%, rgb(4 26 51 / 0.74) 45%, rgb(4 26 51 / 0.92) 100%),
    var(--tr-hero-img);
  background-size: cover;
  background-position: center;
}

.tr-hero--cover .tr-hero__eyebrow { color: var(--c-sea-200); }
.tr-hero--cover .tr-hero__title { color: var(--c-white); }
.tr-hero--cover .tr-hero__lede { color: var(--c-sea-050); }
.tr-hero--cover .tr-hero__points li { color: var(--c-sea-050); }
.tr-hero--cover .tr-hero__points li::before { color: var(--c-gold-500); }

/*
 * כרטיס השירותים — זכוכית מעל התצלום.
 *
 * לא נייבי מלא כמו תיבת המסלולים: על רקע נייבי כהה הוא היה נבלע
 * ונקרא כחור. שכבה לבנה שקופה משאירה את התצלום נוכח מאחוריו
 * ובכל זאת מפרידה אותו מהטקסט שלצדו.
 */
.tr-hero--cover {
  background: rgb(255 255 255 / 0.10);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  backdrop-filter: blur(10px);
}

.tr-svc__title {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--c-sea-200);
  margin-block: 0 var(--sp-3);
}

/*
 * עמודה אחת: הכרטיסים יושבים עכשיו בעמודה צרה משלהם ליד המפה,
 * לא ברוחב הטקסט. שתי עמודות שם היו מוחצות את שורת ההסבר.
 */
.tr-hero--cover .tr-svc__grid {
  grid-template-columns: 1fr;
  gap: var(--sp-2);
  margin-block-end: 0;
}

.tr-hero--cover .tr-svc__item {
  background: rgb(255 255 255 / 0.08);
  border-color: rgb(255 255 255 / 0.18);
  color: var(--c-white);
}

.tr-hero--cover .tr-svc__item .tr-ico { color: var(--c-sea-200); }

.tr-hero--cover .tr-incl__title { color: var(--c-sea-200); }

/* אנכי ולא זורם: בעמודה צרה שורה זורמת נשברת באמצע פריט */

/*
 * ‎backdrop-filter‎ אינו נתמך בכל מנוע. בלעדיו השקיפות הנמוכה
 * משאירה טקסט לבן על תצלום, ולכן שם הרקע אטום יותר.
 */
@supports not (backdrop-filter: blur(10px)) {
  .tr-hero--cover { background: rgb(4 26 51 / 0.72); }
}

/* --------------------------------------------------------------------------
   כרטיסי סוגי השירות — בתוך הכיסוי
   --------------------------------------------------------------------------
   ‼️ שי: "תגרום לריבועים האלו להיות יותר עתידיים, חוויית UX ברמה
   גבוהה".

   מה שהיה: ארבעה מלבנים זהים עם אייקון ושורה. מה שנוסף — ובסדר
   הזה, כי זה סדר החשיבות:

   1. שורת הסבר לכל כרטיס. זה השדרוג האמיתי: "העברות משותפות"
      לבד הוא שם, לא מידע.
   2. צ׳יפ עגול לאייקון, שמפריד אותו מהטקסט ונותן לכרטיס עוגן.
   3. קו מבטא בקצה הפנימי שנפתח בריחוף ובפוקוס.
   4. כניסה מדורגת לפי ‎--i‎, פעם אחת בטעינה.

   מה שלא נוסף: ריחוף שמרים את הכרטיס כמו כפתור. הכרטיסים האלה
   אינם קישורים, ואפקט שנראה לחיץ הוא הבטחה שלא מתקיימת.
   -------------------------------------------------------------------------- */

.tr-hero--cover .tr-svc__item {
  position: relative;
  overflow: hidden;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}

/* קו המבטא — בקצה הפנימי, ולכן inset-inline-start ולא left */
.tr-hero--cover .tr-svc__item::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 3px;
  background: linear-gradient(180deg, var(--c-sea-200), var(--c-gold-500));
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-fast) var(--ease);
}

.tr-hero--cover .tr-svc__item:hover { background: rgb(255 255 255 / 0.16); }
.tr-hero--cover .tr-svc__item:hover::before { transform: scaleY(1); }

.tr-svc__chip {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.20);
}

.tr-hero--cover .tr-svc__chip .tr-ico { color: var(--c-sea-200); }

.tr-svc__text { display: block; }

.tr-svc__label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.tr-svc__note {
  display: block;
  margin-block-start: var(--sp-1);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--c-sea-200);
}

/* כניסה מדורגת — פעם אחת, בלי לולאה שגונבת את העין מהטקסט */
@media (prefers-reduced-motion: no-preference) {
  .tr-hero--cover .tr-svc__item {
    animation: tr-svc-in 420ms both;
    animation-delay: calc(var(--i, 0) * 70ms + 120ms);
  }
  @keyframes tr-svc-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
}

/* --------------------------------------------------------------------------
   מפת הכיסוי הארצי
   --------------------------------------------------------------------------
   המקבילה בעמוד האב למפות המסלול שבעמודי היעד: שם מוקד אחד וארבעה
   יעדים בתוכו, כאן המדינה כולה וחמישה עמודים.

   ההדגשה ההדדית — ריחוף על פריט ברשימה מדליק את הנקודה במפה,
   וריחוף על נקודה מדליק את הפריט — נעשית ב-‎:has()‎ בלי שורת JS.
   -------------------------------------------------------------------------- */



/*
 * ‼️ אותה מלכודת כמו בפתיח־הכיסוי: ל-.legacy #te-main .section יש
 * background: var(--c-white) בספציפיות (1,2,0), והוא מוחק כל רקע
 * שייכתב על .tr-atlas — הסקשן יצא בצבע קרם והטקסט הלבן נעלם בו.
 *
 * שכבת ::before פותרת בלי להעלות ספציפיות, בלי !important ובלי
 * לגעת בקובץ של איגור. שווה לזכור לכל סקשן כהה שנוסיף כאן.
 */














/* כאן הריחוף מותר: זה קישור, וההזזה מבטיחה בדיוק מה שקורה */










/*
 * ‼️ הרוחב נקבע על המעטפת, לא על ה-SVG.
 *
 * ל-legacy-patterns יש .legacy svg { max-width: 100% !important },
 * ו-!important גובר על כל הצהרה רגילה — max-inline-size שכתבתי
 * על .tr-atlas__svg פשוט לא חל, והמפה נמתחה לרוחב העמודה.
 *
 * זו הפעם השלישית שכלל מ-legacy-patterns מבטל בשקט כלל שלי.
 * הקודמות היו background בספציפיות גבוהה; זו !important. הפתרון
 * הוא לא להתחרות: המעטפת מקבלת את הרוחב, וה-SVG ממלא אותה.
 */
.tr-hero__map {
  justify-self: center;
  align-self: start;
  inline-size: min(100%, 280px);
}

.tr-atlas__svg {
  inline-size: 100%;
  max-inline-size: 280px;
  block-size: auto;
  display: block;
  overflow: visible;
}

.tr-atlas__land {
  fill: rgb(46 156 176 / 0.14);
  stroke: var(--c-sea-200);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.tr-atlas__road {
  stroke: var(--c-sea-200);
  stroke-width: 1.4;
  stroke-opacity: 0.55;
  stroke-dasharray: 5 6;
  stroke-linecap: round;
}

.tr-atlas__halo {
  fill: var(--c-gold-500);
  opacity: 0.18;
}

.tr-atlas__dot {
  fill: var(--c-gold-500);
  stroke: var(--c-navy-950);
  stroke-width: 1.5;
  transition: fill var(--dur-fast) var(--ease), stroke var(--dur-fast) var(--ease), stroke-width var(--dur-fast) var(--ease);
}

/*
 * ‼️ direction: ltr הכרחי כאן.
 *
 * העמוד RTL, והכיוון יורש לתוך ה-SVG. text-anchor="start" נמדד
 * לפי כיוון הכתיבה, ולכן ברשת RTL הוא מצמיד את התווית לצד ההפוך
 * מזה שביקשתי — כל התוויות קפצו אל תוך היבשה. מחרוזות התוויות
 * הן עברית טהורה, ולכן הבידוד אינו משנה איך הן נקראות.
 */
.tr-atlas__pin {
  direction: ltr;
  unicode-bidi: isolate;
  fill: var(--c-white);
  font-family: var(--font-display);
  /* יחידות viewBox: ב-425 יחידות רוחב, 13 ירד ל-9 פיקסלים בפועל */
  font-size: 20px;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgb(4 24 46 / 0.9);
  stroke-width: 4.5;
  stroke-linejoin: round;
}

.tr-atlas__node--minor .tr-atlas__dot {
  fill: var(--c-sea-200);
  stroke: var(--c-navy-950);
  stroke-width: 1.2;
}

.tr-atlas__node--minor .tr-atlas__halo { fill: var(--c-sea-200); opacity: 0.3; }

.tr-atlas__car { color: var(--c-white); }

/*
 * ההדגשה ההדדית.
 *
 * ‎:has()‎ לא נתמך בכל מקום, ולכן היא קישוט בלבד: המידע עצמו כבר
 * מוצג ברשימה ובמפה. דפדפן שלא תומך מציג את שניהם במצב הרגיל.
 */


@media (prefers-reduced-motion: no-preference) {
  .tr-atlas__road {
    animation: tr-atlas-flow 2.4s linear infinite;
    animation-delay: calc(var(--i, 0) * -0.6s);
  }
  @keyframes tr-atlas-flow { to { stroke-dashoffset: -22; } }

  .tr-atlas__halo {
    transform-box: fill-box;
    transform-origin: center;
    animation: tr-atlas-pulse 3.2s ease-in-out infinite;
  }
  @keyframes tr-atlas-pulse {
    0%, 100% { transform: scale(0.88); }
    50% { transform: scale(1.14); }
  }

}

/* כשההעדפה היא פחות תנועה — הרכבים עוצרים במקום להיעלם */
@media (prefers-reduced-motion: reduce) {
  .tr-atlas__car { display: none; }
}

/* --------------------------------------------------------------------------
   רשימת הערים שמתחת לפתיח
   --------------------------------------------------------------------------
   הצהרת הכיסוי בטקסט. כל שם כאן הוא יעד שיש לו שורה במחירון של
   אחד העמודים — לא רשימת משאלות.

   ריחוף על שם מדליק את הנקודה שלו במפה, ב-‎:has()‎ ובלי שורת JS.
   זה מה שהופך את הרשימה לשימושית ולא לקישוט: היא עונה "איפה זה"
   ולא רק "מגיעים לשם". דפדפן בלי ‎:has()‎ מציג את שניהם רגיל.
   -------------------------------------------------------------------------- */

.tr-cover {
  margin-block-start: var(--sp-7);
  padding-block-start: var(--sp-5);
  border-block-start: 1px solid rgb(255 255 255 / 0.16);
}

.tr-cover__title {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-sea-200);
  margin-block: 0 var(--sp-3);
}

.tr-cover__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.tr-cover__city {
  padding: var(--sp-1) var(--sp-3);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: var(--r-full);
  background: rgb(255 255 255 / 0.06);
  font-size: var(--fs-xs);
  color: var(--c-sea-050);
  cursor: default;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.tr-cover__city:hover {
  background: rgb(255 255 255 / 0.14);
  border-color: var(--c-gold-500);
  color: var(--c-white);
}

.tr-hero--cover:has(.tr-cover__city[data-k="chiangmai"]:hover) .tr-atlas__node[data-k="chiangmai"] .tr-atlas__halo,
.tr-hero--cover:has(.tr-cover__city[data-k="bangkok"]:hover) .tr-atlas__node[data-k="bangkok"] .tr-atlas__halo,
.tr-hero--cover:has(.tr-cover__city[data-k="ayutthaya"]:hover) .tr-atlas__node[data-k="ayutthaya"] .tr-atlas__halo,
.tr-hero--cover:has(.tr-cover__city[data-k="kanchanaburi"]:hover) .tr-atlas__node[data-k="kanchanaburi"] .tr-atlas__halo,
.tr-hero--cover:has(.tr-cover__city[data-k="khaoyai"]:hover) .tr-atlas__node[data-k="khaoyai"] .tr-atlas__halo,
.tr-hero--cover:has(.tr-cover__city[data-k="huahin"]:hover) .tr-atlas__node[data-k="huahin"] .tr-atlas__halo,
.tr-hero--cover:has(.tr-cover__city[data-k="pattaya"]:hover) .tr-atlas__node[data-k="pattaya"] .tr-atlas__halo,
.tr-hero--cover:has(.tr-cover__city[data-k="rayong"]:hover) .tr-atlas__node[data-k="rayong"] .tr-atlas__halo,
.tr-hero--cover:has(.tr-cover__city[data-k="samet"]:hover) .tr-atlas__node[data-k="samet"] .tr-atlas__halo,
.tr-hero--cover:has(.tr-cover__city[data-k="chang"]:hover) .tr-atlas__node[data-k="chang"] .tr-atlas__halo,
.tr-hero--cover:has(.tr-cover__city[data-k="kood"]:hover) .tr-atlas__node[data-k="kood"] .tr-atlas__halo,
.tr-hero--cover:has(.tr-cover__city[data-k="samui"]:hover) .tr-atlas__node[data-k="samui"] .tr-atlas__halo,
.tr-hero--cover:has(.tr-cover__city[data-k="donsak"]:hover) .tr-atlas__node[data-k="donsak"] .tr-atlas__halo,
.tr-hero--cover:has(.tr-cover__city[data-k="phuket"]:hover) .tr-atlas__node[data-k="phuket"] .tr-atlas__halo,
.tr-hero--cover:has(.tr-cover__city[data-k="khaolak"]:hover) .tr-atlas__node[data-k="khaolak"] .tr-atlas__halo,
.tr-hero--cover:has(.tr-cover__city[data-k="khaosok"]:hover) .tr-atlas__node[data-k="khaosok"] .tr-atlas__halo,
.tr-hero--cover:has(.tr-cover__city[data-k="krabi"]:hover) .tr-atlas__node[data-k="krabi"] .tr-atlas__halo,
.tr-hero--cover:has(.tr-cover__city[data-k="lanta"]:hover) .tr-atlas__node[data-k="lanta"] .tr-atlas__halo {
  opacity: 0.55;
}

.tr-hero--cover:has(.tr-cover__city[data-k="chiangmai"]:hover) .tr-atlas__node[data-k="chiangmai"] .tr-atlas__dot,
.tr-hero--cover:has(.tr-cover__city[data-k="bangkok"]:hover) .tr-atlas__node[data-k="bangkok"] .tr-atlas__dot,
.tr-hero--cover:has(.tr-cover__city[data-k="ayutthaya"]:hover) .tr-atlas__node[data-k="ayutthaya"] .tr-atlas__dot,
.tr-hero--cover:has(.tr-cover__city[data-k="kanchanaburi"]:hover) .tr-atlas__node[data-k="kanchanaburi"] .tr-atlas__dot,
.tr-hero--cover:has(.tr-cover__city[data-k="khaoyai"]:hover) .tr-atlas__node[data-k="khaoyai"] .tr-atlas__dot,
.tr-hero--cover:has(.tr-cover__city[data-k="huahin"]:hover) .tr-atlas__node[data-k="huahin"] .tr-atlas__dot,
.tr-hero--cover:has(.tr-cover__city[data-k="pattaya"]:hover) .tr-atlas__node[data-k="pattaya"] .tr-atlas__dot,
.tr-hero--cover:has(.tr-cover__city[data-k="rayong"]:hover) .tr-atlas__node[data-k="rayong"] .tr-atlas__dot,
.tr-hero--cover:has(.tr-cover__city[data-k="samet"]:hover) .tr-atlas__node[data-k="samet"] .tr-atlas__dot,
.tr-hero--cover:has(.tr-cover__city[data-k="chang"]:hover) .tr-atlas__node[data-k="chang"] .tr-atlas__dot,
.tr-hero--cover:has(.tr-cover__city[data-k="kood"]:hover) .tr-atlas__node[data-k="kood"] .tr-atlas__dot,
.tr-hero--cover:has(.tr-cover__city[data-k="samui"]:hover) .tr-atlas__node[data-k="samui"] .tr-atlas__dot,
.tr-hero--cover:has(.tr-cover__city[data-k="donsak"]:hover) .tr-atlas__node[data-k="donsak"] .tr-atlas__dot,
.tr-hero--cover:has(.tr-cover__city[data-k="phuket"]:hover) .tr-atlas__node[data-k="phuket"] .tr-atlas__dot,
.tr-hero--cover:has(.tr-cover__city[data-k="khaolak"]:hover) .tr-atlas__node[data-k="khaolak"] .tr-atlas__dot,
.tr-hero--cover:has(.tr-cover__city[data-k="khaosok"]:hover) .tr-atlas__node[data-k="khaosok"] .tr-atlas__dot,
.tr-hero--cover:has(.tr-cover__city[data-k="krabi"]:hover) .tr-atlas__node[data-k="krabi"] .tr-atlas__dot,
.tr-hero--cover:has(.tr-cover__city[data-k="lanta"]:hover) .tr-atlas__node[data-k="lanta"] .tr-atlas__dot {
  fill: var(--c-white);
  stroke: var(--c-gold-500);
  stroke-width: 2.5;
}

@media (min-width: 900px) {
  .tr-cover__list { gap: var(--sp-2) var(--sp-3); }
}

/* --------------------------------------------------------------------------
   נייד: הפתיח מתקצר בלי לוותר על תוכן
   --------------------------------------------------------------------------
   שלוש העמודות שמקצרות את הפתיח בדסקטופ מתמוטטות לטור אחד בנייד,
   והגובה חוזר להיות הסכום שלהן. שני החשודים המרכזיים נמדדו:
   רצועת הערים תפסה 371 פיקסל (תשעה־עשר צ׳יפים שנשברו לשבע שורות)
   והמפה 379.

   הפתרון אינו הסתרה. הערים הופכות לשורת טקסט זורמת — אותם שמות,
   אותו ריחוף, רבע מהגובה — והמפה מצטמצמת לרוחב שעדיין קריא.
   -------------------------------------------------------------------------- */

@media (max-width: 639px) {
  .tr-cover__list {
    display: block;
    line-height: var(--lh-relaxed);
  }

  .tr-cover__city {
    display: inline;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: var(--fs-sm);
  }

  /* המפריד נבנה ב-CSS: נקודה אמצעית בתוך צומת טקסט עברי נשברת
     באלגוריתם הדו־כיווני ומוצגת בצד הלא נכון — ראה bidi-fix.js */
  .tr-cover__city:not(:last-child)::after {
    content: " · ";
    color: var(--c-sea-200);
    opacity: 0.6;
  }

  .tr-cover__city:hover { background: none; color: var(--c-gold-500); }

  .tr-hero__map { inline-size: min(100%, 220px); }
}

/* ==========================================================================
   טופס ההזמנה — שכבת העיצוב המתקדמת
   ==========================================================================

   שי ביקש שהטופס ייראה מתקדם יותר, ובצדק: עד כאן הוא היה שדות
   ברירת מחדל של הדפדפן בתוך מסגרת. שלוש בעיות אמיתיות היו בו, לא
   רק עניין של טעם:

   1. ‎<select>‎ נשאר ‎appearance: auto‎, כלומר הווידג׳ט של מערכת
      ההפעלה. בווינדוס הוא אפור ומרובע ובמק הוא משהו אחר לגמרי —
      אותו טופס נראה שונה בכל מחשב, ובאף אחד מהם הוא לא נראה
      כמונו. זה מה שנראה בצילום ששי שלח.

   2. ‎outline‎ קשיח בפוקוס מצויר מחוץ לתיבה ודוחף את מה שסביבו.
      טבעת ‎box-shadow‎ לא תופסת מקום בפריסה, ולכן שום דבר לא זז.

   3. השדות כולם לבנים על רקע לבן, ולכן אי אפשר לסרוק במבט מה
      נשאר למלא.

   הכללים כאן באים אחרי המקוריים ולכן גוברים עליהם. הם לא מוחקים
   את מה שקדם — מי שרוצה לחזור אחורה מוחק את הבלוק הזה ומקבל את
   הטופס הישן שלם.
   ========================================================================== */

/* --------------------------------------------------------------- הפאנל */

/*
 * משטח במקום מלבן.
 *
 * גרדיאנט עדין מאוד — שתי דרגות של אותו לבן — נותן לפאנל עומק בלי
 * להוסיף צבע. הצל רך ונמוך ולא כהה וגבוה: כרטיס שמרחף גבוה מדי
 * נראה כמו חלון קופץ, והטופס הזה הוא חלק מהעמוד.
 */
.tr-booking__panel {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--c-sea-050) 55%, var(--c-white)) 0,
      var(--c-white) 180px),
    var(--c-white);
  border: 1px solid color-mix(in srgb, var(--c-sea-200) 55%, transparent);
  border-radius: var(--r-lg);
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--c-navy-950) 6%, transparent),
    0 12px 32px -18px color-mix(in srgb, var(--c-navy-950) 42%, transparent);
}

/*
 * הכותרת מקבלת סימן משלה.
 *
 * קו זהב קצר מתחת לתחילת הכותרת, ולא פס לרוחב כל הפאנל. הוא מסמן
 * את נקודת ההתחלה של הקריאה — ובעברית זו הפינה הימנית, ולכן
 * ‎inset-inline-start‎ ולא ‎left‎.
 */
.tr-booking__title {
  position: relative;
  padding-block-end: var(--sp-3);
}

.tr-booking__title::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 40px;
  block-size: 3px;
  border-radius: var(--r-full);
  background: var(--c-gold-500);
}

/* --------------------------------------------------------------- שדות */

/*
 * תווית שקטה.
 *
 * קטנה, במרווח אותיות מעט פתוח ובאפור — היא מסמנת ולא מתחרה. מה
 * שצריך לקרוא הוא מה שהוקלד, לא איך קוראים לשדה.
 */
.tr-field__label {
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: var(--c-ink-500);
  margin-block-end: var(--sp-2);
}

.tr-field__req {
  color: var(--c-gold-600);
  font-weight: var(--fw-bold);
}

/*
 * השדה: משטח כחלחל שמתבהר בפוקוס.
 *
 * שדה ריק הוא משהו שצריך למלא, ולכן הוא אינו לבן כמו הרקע אלא
 * מסומן קלות. ברגע שנוגעים בו הוא נהיה לבן ונקי, והטבעת סביבו
 * אומרת איפה אנחנו. כך הטופס נסרק במבט אחד.
 */
.tr-field__input {
  min-block-size: 52px;
  padding-block: var(--sp-2);
  padding-inline: var(--sp-4);
  color: var(--c-navy-900);
  background-color: color-mix(in srgb, var(--c-sea-050) 60%, var(--c-white));
  border: 1px solid color-mix(in srgb, var(--c-sea-200) 70%, transparent);
  border-radius: var(--r-md);
  transition:
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease;
}

.tr-field__input::placeholder { color: var(--c-ink-400); }

.tr-field__input:hover {
  background-color: var(--c-white);
  border-color: var(--c-sea-400);
}

/*
 * ‎outline‎ מוחלף בטבעת.
 *
 * ‎outline: none‎ לבדו היה מוחק את סימן המקלדת ושובר נגישות.
 * ה-‎box-shadow‎ כאן הוא התחליף שלו, לא ביטולו: הוא נראה בבירור,
 * והוא אינו תופס מקום בפריסה ולכן השדה לא זז כשנכנסים אליו.
 */
.tr-field__input:focus,
.tr-field__input:focus-visible {
  outline: none;
  background-color: var(--c-white);
  border-color: var(--c-sea-500);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-sea-500) 16%, transparent);
}

/*
 * בורר שנראה כמו שאר השדות.
 *
 * ‎appearance: none‎ מסיר את הווידג׳ט של מערכת ההפעלה, והחץ מצויר
 * כאן כ-SVG מוטבע. המיקום הוא ‎left … center‎ כי הטופס עברי והחץ
 * צריך לשבת בקצה הסופי של השורה; ל-‎[dir="ltr"]‎ יש כלל משלו למטה.
 *
 * ‎background-color‎ ולא ‎background‎ בכל הכללים שנוגעים בבורר —
 * המקוצר מוחק את התמונה, והחץ היה נעלם בריחוף.
 */
select.tr-field__input {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: var(--sp-8);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%232F6F8F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: left var(--sp-4) center;
  cursor: pointer;
}

[dir="ltr"] select.tr-field__input {
  background-position: right var(--sp-4) center;
}

/*
 * אייקון התאריך והשעה.
 *
 * הדפדפן מצייר אותו אפור וקטן. כאן הוא מקבל כיס לחיצה גדול יותר —
 * בנייד הוא היעד האמיתי של האצבע, ולא השדה עצמו.
 */
.tr-field__input::-webkit-calendar-picker-indicator {
  padding: var(--sp-1);
  border-radius: var(--r-sm);
  cursor: pointer;
  opacity: 0.55;
  transition: opacity var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

.tr-field__input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  background-color: var(--c-sea-050);
}

.tr-field__hint {
  display: block;
  font-size: var(--fs-3xs);
  color: var(--c-ink-500);
  margin-block-start: var(--sp-1);
}

/* --------------------------------------------------- קבוצות ושלבים */

/*
 * ראש השלב.
 *
 * הספרה נכנסת לעיגול מלא, והשלב הפתוח מקבל אותה בזהב. זה הסימן
 * היחיד שנדרש: איפה אני עכשיו.
 */
.tr-step__head {
  padding: var(--sp-4);
  border: 1px solid color-mix(in srgb, var(--c-sea-200) 55%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-sea-050) 45%, var(--c-white));
  transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease;
}

.tr-step__num {
  display: grid;
  place-items: center;
  inline-size: 30px;
  block-size: 30px;
  flex: 0 0 auto;
  border-radius: var(--r-full);
  background: var(--c-white);
  border: 1px solid var(--c-sea-200);
  color: var(--c-sea-600);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease,
              border-color var(--dur-fast) ease;
}

.tr-step.is-open > .tr-step__title > .tr-step__head {
  background: var(--c-white);
  border-color: var(--c-sea-400);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--c-navy-950) 6%, transparent);
}

.tr-step.is-open > .tr-step__title > .tr-step__head .tr-step__num {
  background: var(--c-gold-500);
  border-color: var(--c-gold-600);
  color: var(--c-navy-950);
}

/*
 * בורר סוג הנסיעה: קבוצת גלולות.
 *
 * האפשרויות יושבות בתוך מסלול אחד ובוחרים ביניהן, במקום ארבעה
 * ריבועים שמרחפים כל אחד לעצמו. הנבחרת היא הכהה — ניגוד, ולא עוד
 * צבע.
 */
.tr-seg__opts {
  gap: var(--sp-1);
  padding: var(--sp-1);
  background: color-mix(in srgb, var(--c-sea-050) 70%, var(--c-white));
  border: 1px solid color-mix(in srgb, var(--c-sea-200) 55%, transparent);
  border-radius: var(--r-full);
}

.tr-seg__opt span {
  border: 0;
  border-radius: var(--r-full);
  background: transparent;
  color: var(--c-ink-700);
  transition: background var(--dur-fast) ease, color var(--dur-fast) ease;
}

.tr-seg__opt:hover span {
  background: color-mix(in srgb, var(--c-white) 80%, transparent);
}

.tr-seg__opt input:checked + span {
  background: var(--c-navy-900);
  color: var(--c-white);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--c-navy-950) 30%, transparent);
}

.tr-seg__opt input:focus-visible + span {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-sea-500) 30%, transparent);
}

/*
 * כרטיס הרכב הנבחר.
 *
 * הרמה קלה וטבעת דקה במקום מסגרת עבה. מסגרת עבה מזיזה את התוכן
 * שבפנים בפיקסל, וזה נראה כמו קפיצה.
 */
.tr-veh__card {
  border-radius: var(--r-md);
  transition: transform var(--dur-fast) ease, box-shadow var(--dur-fast) ease,
              border-color var(--dur-fast) ease;
}

.tr-veh__opt:hover .tr-veh__card { border-color: var(--c-sea-400); }

.tr-veh__opt input:checked + .tr-veh__card {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 2px var(--c-sea-500),
    0 10px 24px -14px color-mix(in srgb, var(--c-navy-950) 60%, transparent);
}

/* השורות הנפתחות — המשך של השדה שמעליהן, לא תיבה חדשה */
.tr-form__flight,
.tr-form__more {
  border: 1px solid color-mix(in srgb, var(--c-sea-200) 50%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-sea-050) 50%, var(--c-white));
}

/*
 * מי שכיבה אנימציות מקבל את אותו טופס בלי תנועה.
 * כל מה שלמעלה הוא מעברי צבע, ולכן ביטולם אינו גורע דבר.
 */
@media (prefers-reduced-motion: reduce) {
  .tr-field__input,
  .tr-step__head,
  .tr-step__num,
  .tr-seg__opt span,
  .tr-veh__card { transition: none; }

  .tr-veh__opt input:checked + .tr-veh__card { transform: none; }
}

/*
 * קידומת הטלפון אינה בורר עם חץ.
 *
 * היא תיבה ברוחב 88 פיקסלים, והריפוד של 40 פיקסלים שהחץ דורש
 * חנק את "‎+972‎" עד שכמעט לא נשאר לו מקום. אין כאן מה לפתוח,
 * ולכן אין צורך בחץ.
 */
.tr-phone__prefix {
  padding-inline: var(--sp-2);
  background-image: none;
  text-align: center;
}

/* --------------------------------------------------------------------------
   לשונית הטיסות מתפנה מהטופס
   --------------------------------------------------------------------------
   ‼️ זה רכיב של איגור, ולכן הנגיעה בו מינימלית ככל האפשר.

   מה שנבדק: ברוחב 800, אחרי שאנימציית flight-tab-land מסתיימת,
   הלשונית יושבת ב-x 513–785 / y 450–532 ומכסה את "תאריך איסוף"
   ואת השדה שלה בשלב 1. ציון ראה את זה ראשון.

   ‎visibility‎ ולא ‎opacity/transform‎: את שתיהן האנימציה מנפישה,
   ואנימציה גוברת על הצהרה רגילה — כלל כזה פשוט לא היה חל.

   התכונה ‎data-tr-booking‎ נכתבת רק על ידי סקריפט טופס ההעברות,
   שקיים רק בעמודים שלי. בכל עמוד אחר הכלל הזה לא נורה אף פעם.
   -------------------------------------------------------------------------- */

html[data-tr-booking="1"] #flight-tab-wrap {
  visibility: hidden;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   בורר היעד — עמוד האב
   --------------------------------------------------------------------------
   שש אפשרויות. בורר מגזרי כמו של סוג הנסיעה נשבר בהן, ותפריט
   נפתח מסתיר את התשובה עד שפותחים אותו — וזו השאלה הראשונה
   שהטופס שואל, כלומר בדיוק זו שצריכה להיראות בלי פעולה.

   ‎radio‎ אמיתי מתחת לצ׳יפ: חץ ימינה ושמאלה עובדים, הבחירה נשמרת
   בשליחה, וקורא מסך מקבל קבוצה אחת עם שם.
   -------------------------------------------------------------------------- */

.tr-region {
  border: 0;
  margin: 0 0 var(--sp-4);
  padding: 0;
}

.tr-region__legend {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-700);
  margin-block-end: var(--sp-2);
  padding: 0;
}

.tr-region__opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.tr-region__opt input {
  position: absolute;
  opacity: 0;
  inline-size: 1px;
  block-size: 1px;
}

.tr-region__opt span {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--tr-line);
  border-radius: var(--r-full);
  background: var(--c-white);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--c-ink-700);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
}

.tr-region__opt:hover span { border-color: var(--c-sea-400); }

.tr-region__opt input:checked + span {
  background: var(--c-navy-900);
  border-color: var(--c-navy-900);
  color: var(--c-white);
}

/* הטבעת ב-box-shadow ולא ב-outline — כך היא לא דוחפת את השכנים */
.tr-region__opt input:focus-visible + span {
  box-shadow: 0 0 0 3px var(--c-sea-200);
}

/* בורר שממתין ליעד — נראה כמו מה שהוא, ולא כמו שדה שבור */
.tr-field__input:disabled {
  background: var(--c-sea-050);
  color: var(--c-ink-400);
  cursor: not-allowed;
}

/* ==========================================================================
   טופס ההזמנה — דחיסה
   ==========================================================================

   ‼️ שי, פעם שלישית: "וזה ענק עדיין".

   הפעם מדדתי כל תורם בנפרד במקום לנחש, וזה מה שיצא בשלב 1:
   גוף השלב 454 פיקסל, מתוכם שדה אחד 80 (תווית 20 + רווח 8 +
   תיבה 52), כותרת שלב 64, וריפוד פאנל 33.6 מכל צד.

   אף אחד מהמספרים האלה אינו גדול בפני עצמו. יחד הם טופס שתופס
   מסך. הדחיסה כאן היא ריווח בלבד — לא ירד אף שדה, אף תווית ואף
   הסבר, ולא נגעתי בצבעים, במסגרות ובטבעות הפוקוס של ציון.

   ‎font-size‎ של התיבות נשאר 16px בכוונה: מתחת לזה ספארי בנייד
   מזיז את המסך בכל מיקוד בשדה.
   ========================================================================== */

/* התיבה: 52 → 44 */
.tr-booking .tr-field__input {
  padding-block: var(--sp-2);
  line-height: var(--lh-tight);
}

/* התווית צמודה יותר לשדה שלה */
.tr-booking .tr-field__label { margin-block-end: var(--sp-1); }

.tr-booking .tr-field__hint { margin-block-start: var(--sp-1); }

/* הפאנל: 33.6 → 24 */
.tr-booking__panel { padding: var(--sp-5); }

/* כותרת שלב: 64 → 52 */
.tr-booking .tr-step__head { padding: var(--sp-3) var(--sp-4); }

.tr-booking .tr-step__body { padding: var(--sp-3) var(--sp-1) var(--sp-1); }

.tr-booking .tr-form__grid {
  gap: var(--sp-2) var(--sp-4);
  margin-block-end: var(--sp-2);
}

/* בורר סוג הנסיעה ובורר היעד — אותו טיפול */
.tr-booking .tr-seg { margin-block-end: var(--sp-3); }
.tr-booking .tr-seg__legend,
.tr-booking .tr-region__legend { margin-block-end: var(--sp-1); }
.tr-booking .tr-seg__opt span { padding-block: var(--sp-2); }

.tr-booking .tr-region { margin-block-end: var(--sp-3); }
.tr-booking .tr-region__opt span { padding: var(--sp-1) var(--sp-3); }

.tr-booking .tr-step__next { margin-block-start: var(--sp-3); }

/* בנייד כל פיקסל נחשב פעמיים — שם הפאנל צמוד לקצה */
@media (max-width: 639px) {
  .tr-booking__panel { padding: var(--sp-4) var(--sp-3); }
  .tr-booking .tr-step__head { padding: var(--sp-3); }
}

/* ==========================================================================
   התפריט הנפתח
   ==========================================================================

   ‼️ הרשימה של ‎<select>‎ מצוירת על ידי מערכת ההפעלה, לא על ידי
   הדפדפן. פס כחול, גופן מערכת ופינות חדות — ושום CSS לא נוגע בה.
   זו הסיבה שהתיבה הסגורה נראית כמונו והרשימה שנפתחת ממנה לא.

   הפתרון הוא רכיב משלנו: כפתור ורשימה שמשקפים ‎<select>‎ אמיתי
   שנשאר במסמך. ההתנהגות מלאה — מקלדת, ‎Escape‎, סגירה בלחיצה
   בחוץ — וגם בלי JS נשאר בורר עובד.
   ========================================================================== */

.tr-sel { position: relative; }

/*
 * ה-‎<select>‎ שקוף ולא מוסתר.
 *
 * ‎display:none‎ על שדה ‎required‎ מפיל את ולידציית הדפדפן בשקט:
 * Chrome זורק "invalid form control is not focusable" והטופס לא
 * נשלח. כך הוא נשאר ממוקד־יכול, וההודעה נצמדת למקום הנכון.
 */
.tr-sel__native {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  opacity: 0;
  pointer-events: none;
}

.tr-sel__btn {
  position: relative;
  z-index: 1;
  inline-size: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  min-block-size: 44px;
  border: 1px solid var(--c-sea-200);
  border-radius: var(--r-sm);
  background: var(--c-sea-050);
  font-family: inherit;
  font-size: var(--fs-md);
  line-height: var(--lh-tight);
  color: var(--c-ink-900);
  text-align: start;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}

/* החץ נבנה ב-CSS ולא נכתב בתוכן — כך הוא מתהפך בפתיחה בלי DOM נוסף */
.tr-sel__btn::after {
  content: "";
  inline-size: 10px;
  block-size: 10px;
  flex: 0 0 auto;
  /*
   * ‼️ תכונות פיזיות ולא לוגיות.
   *
   * חץ שמצביע למטה מצביע למטה בכל כיוון כתיבה. עם
   * border-inline-end בעמוד RTL הפינה נבנית מהצד השני, והסיבוב
   * של 45 מעלות הפך אותו לחץ שמצביע הצידה.
   */
  border-right: 2px solid var(--c-sea-600);
  border-bottom: 2px solid var(--c-sea-600);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur-fast) var(--ease);
}

.tr-sel.is-open .tr-sel__btn::after { transform: rotate(-135deg) translate(-3px, -3px); }

.tr-sel__btn:hover { border-color: var(--c-sea-400); background: var(--c-white); }

.tr-sel__btn:focus-visible {
  outline: none;
  border-color: var(--c-sea-600);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-sea-400) 40%, transparent);
}

.tr-sel__btn.is-placeholder { color: var(--c-ink-400); }

.tr-sel__btn:disabled {
  background: var(--c-sea-050);
  color: var(--c-ink-400);
  cursor: not-allowed;
}

.tr-sel__list {
  position: absolute;
  z-index: 20;
  inset-inline: 0;
  inset-block-start: calc(100% + 4px);
  max-block-size: 264px;
  overflow-y: auto;
  margin: 0;
  padding: var(--sp-1);
  list-style: none;
  border: 1px solid var(--c-sea-200);
  border-radius: var(--r-md);
  background: var(--c-white);
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--c-navy-950) 55%, transparent);
}

.tr-sel__opt {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--c-ink-700);
  cursor: pointer;
}

.tr-sel__opt:hover { background: var(--c-sea-050); }

.tr-sel__opt:focus-visible,
.tr-sel__opt:focus {
  outline: none;
  background: var(--c-sea-050);
  box-shadow: inset 0 0 0 2px var(--c-sea-400);
}

/* הנבחר מסומן בצבע ובמשקל, לא רק ברקע — רקע לבדו מתבלבל עם ריחוף */
.tr-sel__opt[aria-selected="true"] {
  background: var(--c-navy-900);
  color: var(--c-white);
  font-weight: var(--fw-semibold);
}

.tr-sel__opt.is-placeholder { color: var(--c-ink-400); }

.tr-sel__opt[aria-disabled="true"] {
  color: var(--c-ink-400);
  text-decoration: line-through;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .tr-sel__btn,
  .tr-sel__btn::after { transition: none; }
}

/* כותרת קבוצה ברשימה — טקסט, לא אפשרות */
.tr-sel__group {
  padding: var(--sp-3) var(--sp-3) var(--sp-1);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink-400);
}

.tr-sel__group:not(:first-child) {
  margin-block-start: var(--sp-2);
  border-block-start: 1px solid var(--tr-line);
}

/* שורת קישורי ההמשך מתחת לרשת היעדים */
.tr-dests__more {
  margin-block: var(--sp-5) 0;
  font-size: var(--fs-sm);
  color: var(--c-ink-500);
}

.tr-dests__more a {
  color: var(--c-sea-600);
  font-weight: var(--fw-semibold);
}

.tr-dests__more a:hover { color: var(--c-navy-900); }