/* ==========================================================================
   עמודי אטרקציה — מערכת העיצוב

   ---------------------------------------------------------------------------
   למה הקובץ הזה קיים:

   66 מתוך 91 עמודי האטרקציות הגיעו מוורדפרס עם גיליון סגנונות
   משלהם בתוך העמוד — עד 19,600 תווים לעמוד. הוא מגדיר צבעים
   קשיחים שאינם המותג: טורקיז ‎#00CED1‎, זהב ‎#FFD700‎, עגבנייה
   ‎#FF6347‎, אפור ‎#f8f9fa‎. הוא נטען אחרון ולכן ניצח את מערכת
   העיצוב שלנו בכל התנגשות.

   זו הסיבה שהעמודים נראו כמו האתר הישן: הם באמת היו האתר הישן.

   בנוסף הוא מרווח: ‎/טיול-אופנועי-ים-בפוקט‎ יצא 9,607 פיקסלים,
   12.5 מסכי גלילה, עבור 4,295 תווים בגוף. פיקסל וחצי לכל תו.

   הקובץ הזה מחליף אותו במלואו: אותו מבנה HTML בדיוק, אותן
   מחלקות, בטוקנים שלנו ובקצב אנכי הדוק.
   ---------------------------------------------------------------------------
*/

/* ---------------------------------------------------------------- הירו */

/*
 * ההירו הישן היה ‎70vh‎ עם אנימציית ‎fadeIn‎ ועם ‎:hover‎ שמגדיל
 * את הטקסט. שני שלישים ממסך ראשון עבור כותרת ומשפט.
 */
.legacy #te-main .hero {
  position: relative;
  display: grid;
  place-items: center;
  /*
   * רצועה, לא מסך.
   *
   * ‎38vh‎ נתן 334 פיקסלים מתוך 768 — כמעט חצי מהמסך הראשון
   * לכותרת, משפט וכפתור. אחרי שתצלום ההירו חזר להיראות זה
   * קרא כאילו התמונה היא העמוד.
   *
   * ‎26vh‎ עם תקרה של 300 משאיר את התצלום כרקע שמזהה את
   * המקום, ומכניס את תחילת התוכן למסך הראשון.
   */
  min-block-size: clamp(200px, 26vh, 300px);
  padding: var(--sp-6) var(--gutter);
  background-size: cover;
  background-position: center;
  text-align: center;
  isolation: isolate;
  animation: none;
}
.legacy #te-main .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(4, 24, 46, .5), rgba(4, 24, 46, .82));
}
.legacy #te-main .hero-content {
  max-inline-size: 44rem;
  display: grid;
  gap: var(--sp-3);
  transition: none;
}
.legacy #te-main .hero-content:hover .hero-description { transform: none; }
.legacy #te-main .hero h1 {
  margin: 0;
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(4, 24, 46, .5);
}
.legacy #te-main .hero-description {
  margin: 0;
  color: rgba(255, 255, 255, .9);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  text-wrap: balance;
  transition: none;
}

/* ------------------------------------------------------------- סקשנים */

/*
 * הרווח בין סקשנים היה כפול.
 *
 * ---------------------------------------------------------------------------
 * כל סקשן קיבל 36 פיקסלים ריפוד למעלה ו-36 למטה, ולכן בין שני
 * סקשנים סמוכים נפערו 72 פיקסלים — ועוד מרווח הכותרת מתחת.
 * בסקשן כמו "מה להביא?", שכל תוכנו 175 פיקסלים, הריפוד היה
 * 41 אחוז ממנו.
 *
 * ארבעה סקשנים קצרים ברצף — אטרקציות, מה להביא, מידע חשוב,
 * גלריה — נקראו כארבעה איים בים של לבן.
 *
 * כאן הריפוד הוא חצי מהרווח המכוון, כי שני שכנים תורמים לו
 * יחד. 24 ועוד 24 נותנים 48, שזה רווח שקורא כהפרדה ולא כחור.
 * ---------------------------------------------------------------------------
 */
.legacy #te-main .section,
.legacy #te-main .section-alt {
  padding-block: var(--section-pad);
}
.legacy #te-main .section-alt { background: var(--c-surface); }

.legacy #te-main .section-header {
  margin-block-end: var(--sp-4);
  text-align: center;
}
.legacy #te-main .section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  color: var(--text-strong);
  text-wrap: balance;
}
/* הקו מתחת לכותרת: סימן, לא פס */
.legacy #te-main .section-title::after {
  content: "";
  display: block;
  inline-size: 52px;
  block-size: 2px;
  margin: var(--sp-2) auto 0;
  background: var(--c-sea-500);
  border-radius: 2px;
  transform: none;
}
.legacy #te-main .section-title:hover::after { transform: none; }
.legacy #te-main .section-description {
  margin: var(--sp-2) auto 0;
  max-inline-size: 68ch;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}

/* --------------------------------------------------------- פתיח וטקסט */

.legacy #te-main .intro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: var(--sp-5);
  align-items: center;
}
.legacy #te-main .intro-content > h2 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}
.legacy #te-main .intro-content p {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
.legacy #te-main .intro-content p:last-child { margin-bottom: 0; }
.legacy #te-main .intro-image {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
}
.legacy #te-main .intro-image img {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 0;
  max-block-size: none;
}

/* ------------------------------------------------------ כרטיסי חבילה */

/*
 * זה הרכיב שהגולש בא בשבילו: מסלול, שעה, מה כלול ומחיר.
 * הוא מקבל את המשקל הוויזואלי, והוא היחיד בעמוד עם מסגרת
 * מודגשת.
 */
.legacy #te-main .package-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: var(--sp-4);
  margin-block: var(--sp-5);
}

.legacy #te-main .package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--c-surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: none;
  transition: border-color var(--dur-mid) var(--ease),
              transform var(--dur-mid) var(--ease);
}
.legacy #te-main .package-card:hover {
  border-color: var(--c-sea-400);
  transform: translateY(-2px);
  box-shadow: none;
}

/*
 * התג נמתח לרוחב מלא, ושני הכללים היו תקינים.
 *
 * ---------------------------------------------------------------------------
 * ‎.legacy .featured-badge‎ ב-legacy-skin קובע
 * ‎inset-inline-start: var(--sp-5)‎, והכלל כאן קובע
 * ‎inset-inline-end: var(--sp-3)‎. הקצאה היא לפי תכונה ולא לפי
 * כלל — הסגוליות הגבוהה יותר כאן דרסה רק את ה-‎end‎, וה-‎start‎
 * של הכלל הישן נשאר בתוקף.
 *
 * אלמנט ממוקם עם שני הקצוות נקבעים נמתח ביניהם. התוצאה: פס
 * זהב לרוחב הכרטיס במקום תווית בפינה.
 *
 * ‎inset-inline-start: auto‎ הוא התיקון. מי שדורס מיקום חייב
 * לדרוס את שני הקצוות, גם את זה שהוא לא מתכוון להשתמש בו.
 * ---------------------------------------------------------------------------
 */
.legacy #te-main .featured-badge {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-start: auto;
  inset-inline-end: var(--sp-3);
  z-index: 1;
  padding: 3px var(--sp-3);
  background: var(--c-gold-500);
  color: var(--c-navy-950);
  border-radius: 999px;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
}

.legacy #te-main .package-image {
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.legacy #te-main .package-image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  max-block-size: none;
  transition: transform var(--dur-slow) var(--ease);
}
.legacy #te-main .package-card:hover .package-image img { transform: scale(1.04); }

.legacy #te-main .package-content {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding: var(--sp-4);
  flex: 1;
}
.legacy #te-main .package-content > * { margin-block: 0; }

/*
 * ‼️ ‎.price-tag‎ בעמוד אטרקציה — כלל מקביל, לא הרחבת סלקטור.
 *
 * ‎check-wrapper-scope.js‎ מצא שב-‎/טיול-טרקטורונים-בקופנגן‎
 * יושב ‎<p class="price-tag">‎ עם "מחיר מתחיל מ־฿2,200 לרכב"
 * בתוך ההירו — **בלי שום עיצוב**. הכלל היחיד שמעצב אותו הוא
 * ‎.transfers-page .price-tag‎ ב-‎transfers.css‎, והעמוד הזה
 * אינו עמוד העברות.
 *
 * ‼️ הפתרון אינו להרחיב את הסלקטור הקיים ל-
 * ‎.transfers-page .price-tag, .price-tag‎, וגם לא להדביק
 * ‎.transfers-page‎ על עמוד אטרקציות. הראשון היה משנה את
 * ‎.price-tag‎ בכל מקום באתר, והשני היה גורר לעמוד את כל
 * שאר הכללים של משפחת ההעברות.
 *
 * כלל מקביל תחת ההיקף שלי בלבד. אותם ערכים, כי זה אותו
 * רכיב ויזואלי — שורת מחיר קצרה שלא נשברת באמצע.
 *
 * (הכלל נוסח לפי סעיף 10 ב-TEAM.md, אחרי ששלוש תקלות היום
 * היו רכיב שקיים ואין עליו עיצוב.)
 */
.legacy #te-main .price-tag {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--c-navy-800);
}

/*
 * ‼️ בלי ‎white-space: nowrap‎, בשונה מגרסת ההעברות.
 *
 * שם התווית קצרה ("מ־฿900"). כאן היא נושאת גם רשימת אזורי
 * איסוף — "הסעות חינם מ־Hadrin, Ban Kai, Bantai, Thong Sala" —
 * ו-‎nowrap‎ עליה היה גולש מהמסך בנייד במקום להישבר.
 */

/*
 * ‼️ הדריסה כאן חובה, ולא נוי.
 *
 * ב-legacy-patterns.css יש כלל גורף:
 *
 *   .legacy [class$="-badge"], [class$="-tag"], [class$="-label"],
 *   [class$="-category"], [class$="-type"]
 *     { display: inline-flex; white-space: nowrap; ... }
 *
 * כלומר **כל** מחלקה שנגמרת ב--type מעוצבת כתווית־גלולה.
 * אצל ‎.price-type‎ זו הכוונה — הוא באמת גלולה, עם ריפוד ומסגרת.
 * אצל ‎.package-type‎ לא: הוא כותרת ‎h3‎ של כרטיס.
 *
 * הכלל שמתחת דורס גופן, גודל וצבע — ולכן הכרטיס **נראה** תקין —
 * אבל הוא לא הצהיר על ‎white-space‎, וה-nowrap דלף. בסיאם נירמיט
 * כל שנים־עשר הכרטיסים הציגו "מופע וארוחת ערב, מושב" והמילה
 * שמבדילה ביניהם — Gold, Silver, Platinum — נחתכה מחוץ לכרטיס.
 * שנים־עשר כרטיסים עם אותה כותרת ומחירים שונים.
 *
 * זה לא נראה שבור בצילום מסך: הטקסט מיושר, הכרטיס שלם, והכותרת
 * פשוט **נגמרת**. תפסתי את זה רק במדידת ‎scrollWidth‎ מול
 * ‎clientWidth‎ (226 מול 177).
 */
.legacy #te-main .package-type {
  margin: 0;
  display: block;
  white-space: normal;
  overflow-wrap: anywhere;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text-strong);
}
.legacy #te-main .package-includes {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* המחיר: השורה שסורקים */
.legacy #te-main .package-price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-black);
  color: var(--c-navy-900);
  line-height: 1.1;
}
.legacy #te-main .package-currency {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.legacy #te-main .package-original {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-decoration: line-through;
}

/*
 * רשימת מה כלול.
 * היא הייתה שורות עם רקע אפור מתחלף; כאן היא סימני וי בלבד.
 */
.legacy #te-main .package-features {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.legacy #te-main .package-features li {
  position: relative;
  margin: 0;
  padding-inline-start: var(--sp-5);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: none;
}
.legacy #te-main .package-features li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: var(--c-sea-500);
  font-weight: var(--fw-bold);
}

/* ------------------------------------------------ כרטיסי מאפיין ורשימות */

.legacy #te-main .features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 244px), 1fr));
  gap: var(--sp-3);
}
.legacy #te-main .feature-card {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding: var(--sp-4);
  background: var(--c-surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: none;
}
.legacy #te-main .feature-card > * { margin-block: 0; }
.legacy #te-main .feature-icon {
  inline-size: 34px;
  block-size: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-sea-050);
  color: var(--c-sea-600);
  font-size: 15px;
}
.legacy #te-main .feature-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  line-height: var(--lh-snug);
}
.legacy #te-main .feature-card p {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  color: var(--text-body);
}

/*
 * שלוש רשימות שמתנהגות אותו דבר: מה כלול, מה להביא, מידע.
 * כולן פריטים קצרים, ולכן עמודות מאוזנות ולא רשת.
 */
.legacy #te-main .included-list,
.legacy #te-main .bring-list,
.legacy #te-main .info-list {
  columns: 2 260px;
  column-gap: var(--sp-6);
  margin-block: var(--sp-4);
  padding-inline-start: 0;
  list-style: none;
}
.legacy #te-main .included-list .list-item,
.legacy #te-main .bring-list .list-item,
.legacy #te-main .info-list .list-item,
.legacy #te-main .included-list li,
.legacy #te-main .bring-list li,
.legacy #te-main .info-list li {
  break-inside: avoid;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: var(--sp-2);
  align-items: start;
  margin: 0 0 var(--sp-2);
  padding: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  background: none;
}
.legacy #te-main .list-icon {
  inline-size: 22px;
  text-align: center;
  color: var(--c-sea-500);
  font-size: 13px;
  line-height: 1.5;
}

/* --------------------------------------------------------- טבלת מחירים */

.legacy #te-main .price-table-container {
  overflow-x: auto;
  margin-block: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--c-surface-raised);
}
.legacy #te-main .price-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--fs-xs);
}
.legacy #te-main .price-table th {
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-navy-800);
  color: var(--c-white);
  font-weight: var(--fw-semibold);
  text-align: start;
  white-space: nowrap;
}
.legacy #te-main .price-table td {
  padding: var(--sp-2) var(--sp-3);
  border-block-start: 1px solid var(--border);
  vertical-align: top;
}
.legacy #te-main .price-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--c-surface) 60%, transparent);
}

/* ------------------------------------------------------- תיבת מידע חשוב */

.legacy #te-main .important-notice {
  display: grid;
  gap: var(--sp-2);
  margin-block: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-gold-050);
  border: 0;
  border-inline-start: 3px solid var(--c-gold-500);
  border-radius: var(--r-md);
}
.legacy #te-main .important-notice h3 {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-gold-700);
}
.legacy #te-main .important-notice ul {
  display: grid;
  gap: var(--sp-1);
  margin: 0;
  padding-inline-start: var(--sp-4);
}
.legacy #te-main .important-notice li {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

/* ------------------------------------------------------------- גלריה */

.legacy #te-main .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--sp-2);
  margin-block: var(--sp-4);
}
.legacy #te-main .gallery-item {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
}
.legacy #te-main .gallery-item img {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 0;
  max-block-size: none;
}

/* ------------------------------------------------------------ כפתורים */

.legacy #te-main .book-button,
.legacy #te-main .btn-large {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-block-size: 44px;
  padding: var(--sp-2) var(--sp-5);
  background: var(--c-gold-500);
  color: var(--c-navy-950);
  border: 0;
  border-radius: 999px;
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background var(--dur-mid) var(--ease);
}
.legacy #te-main .book-button:hover,
.legacy #te-main .btn-large:hover {
  background: var(--c-gold-600);
  color: var(--c-navy-950);
}
/* בתוך כרטיס חבילה הכפתור נדחף לתחתית */
.legacy #te-main .package-content .book-button { margin-block-start: auto; }

@media (max-width: 560px) {
  .legacy #te-main .hero { min-block-size: clamp(220px, 32vh, 320px); }
  .legacy #te-main .included-list,
  .legacy #te-main .bring-list,
  .legacy #te-main .info-list { columns: 1; }
}

/* ==========================================================================
   צמצום — כרטיס המסלול
   --------------------------------------------------------------------------
   שני מסלולים בשורה על מסך רחב נותנים לכל כרטיס כ-600 פיקסל
   רוחב, ו-‎aspect-ratio: 16/10‎ הפך את זה לתצלום בגובה 375
   פיקסל. הסקשן כולו יצא 1,051 פיקסל לשני כרטיסים, והמחיר —
   השורה שבגללה הגולש הגיע — נדחף מתחת לקו המסך.

   התצלום נחתך בגובה קבוע. הוא עדיין מראה את האופנוע והים,
   והוא כבר לא הדבר הגדול ביותר בעמוד.
   ========================================================================== */
.legacy #te-main .package-image {
  max-block-size: 190px;
}

/*
 * סימן וי כפול.
 *
 * הרשימה הגיעה מוורדפרס עם ‎<i class="fas fa-check-circle">‎ בכל
 * שורה, וה-‎::before‎ כאן הוסיף ✓ משלו. התוצאה הייתה שני סימנים
 * זה לצד זה בכל אחת משש השורות בכל כרטיס.
 *
 * הווי של העיצוב נשאר, האייקון של וורדפרס יורד: הוא תלוי
 * ב-FontAwesome, והווי הוא תו רגיל שתמיד נטען.
 */
.legacy #te-main .package-features li > i,
.legacy #te-main .package-features li > svg { display: none; }

/*
 * שורת מסלולים לא מתרחבת בלי גבול.
 * שני כרטיסים ברוחב 700 פיקסל כל אחד הם שני שלטי חוצות, לא
 * רשת. הרוחב נעצר, והשורה נשארת ממורכזת.
 */
.legacy #te-main .package-options {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 420px));
  justify-content: center;
}

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

   מתחת ל-1080 פיקסל אין רוחב לשתי עמודות, והבורר חוזר למעלה
   ברוחב מלא — שם הוא ראשון, וזה גם הסדר הנכון בנייד.
   ========================================================================== */
.attr-split {
  display: grid;
  gap: var(--sp-5);
  padding-block: clamp(var(--sp-5), 2.2vw, var(--sp-7));
}
.attr-split__main > .section,
.attr-split__main > .section-alt {
  padding-block: 0;
  background: none;
}
.attr-split .booking { padding-block: 0; }
.attr-split .booking .container {
  max-inline-size: none;
  padding-inline: 0;
}

@media (min-width: 1080px) {
  .attr-split {
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: start;
    max-inline-size: var(--w-content);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  /*
   * הבורר ראשון ב-HTML ושני במסך.
   *
   * בלי המיקום המפורש הרשת מניחה אותו בטור הראשון — שהוא
   * בעברית הטור הימני — והמסלולים נדחסו ל-340 פיקסלים בשמאל.
   * בעמוד עברי התוכן נקרא מימין, והעמודה הצדדית היא השמאלית.
   *
   * ב-HTML הוא נשאר ראשון בכוונה: בנייד, שבו אין שתי עמודות,
   * הוא צריך להופיע לפני המסלולים.
   */
  /*
   * ‎grid-row: 1‎ על שניהם.
   *
   * בלעדיו המיקום האוטומטי אינו חוזר אחורה: הבורר, שהוא ראשון
   * ב-HTML ומוצב בטור השני, תפס את שורה 1, והמסלולים נדחפו
   * לשורה 2 — עמודה ריקה בגובה 665 פיקסלים לצד הבורר, והמחיר
   * ירד ל-1,586.
   */
  .attr-split__main { grid-column: 1; grid-row: 1; }
  .attr-split__side {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    /*
     * הכותרת של האתר דביקה ב-‎top: 0‎ בעצמה. בלי הקיזוז הזה
     * ראש הבורר נעלם מתחתיה בדיוק כשמתחילים לגלול.
     */
    inset-block-start: calc(var(--header-h, 66px) + var(--sp-4));
  }
  .attr-split__main > .section .container,
  .attr-split__main > .section-alt .container {
    max-inline-size: none;
    padding-inline: 0;
  }
  /* שתי עמודות של מסלולים בתוך עמודה אחת של עמוד */
  .legacy #te-main .attr-split__main .package-options {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    justify-content: stretch;
  }
}

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

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

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

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

.booking__inner {
  --w-ink: #f5f7fa;             /* טקסט ראשי */
  --w-ink-soft: rgba(245, 247, 250, .58);
  --w-line: rgba(255, 255, 255, .09);
  --w-fill: rgba(255, 255, 255, .045);
  /*
   * הזהב של האתר, לא הירוק של וואטסאפ.
   *
   * הירוק נבחר כי הפעולה עוברת בוואטסאפ, אבל הוא לא מופיע
   * באף מקום אחר באתר — לא בכפתורים, לא בכותרות, לא
   * בכרטיסים. כפתור בצבע שאין לו שום אח בעמוד נקרא כמו
   * פרסומת שהודבקה מבחוץ, לא כמו הפעולה של האתר.
   *
   * הזהב הוא צבע הפעולה של תאילנד אקספרס. הסימן של וואטסאפ
   * נשאר על הכפתור, והוא מה שאומר לאן זה הולך.
   */
  --w-accent: #f0a81a;

  position: relative;
  overflow: hidden;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  border-radius: 22px;
  color: var(--w-ink);

  /*
   * הרקע: גרפיט, ומעליו הילה אחת קרירה בפינה העליונה. הילה
   * אחת ולא שתיים — שתיים כבר נקראות כגרדיאנט מיותר.
   */
  background:
    radial-gradient(130% 80% at 88% -10%, rgba(240, 168, 26, .20), transparent 58%),
    linear-gradient(180deg, var(--c-navy-900) 0%, var(--c-navy-950) 100%);
  border: 1px solid var(--w-line);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, .06) inset,
    0 24px 60px -28px rgba(0, 0, 0, .85),
    0 2px 10px -4px rgba(0, 0, 0, .5);
}

/* קו אור לאורך הקצה העליון — מה שהופך מלבן כהה למשטח מוגבה */
.booking__inner::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 14%;
  block-size: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
}

/* ---------------------------------------------------------------- כותרת */

.booking__inner .booking__head {
  margin-block-end: var(--sp-4);
  text-align: start;
}
.booking__inner .booking__eyebrow {
  display: inline-block;
  margin-block-end: var(--sp-2);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: var(--fw-semibold);
  letter-spacing: .06em;
  color: var(--w-accent);
  background: rgba(240, 168, 26, .14);
  border: 1px solid rgba(240, 168, 26, .28);
  border-radius: 999px;
}
.booking__inner .booking__title {
  margin: 0;
  color: var(--w-ink);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  line-height: 1.15;
}
.booking__inner .booking__lede {
  margin-block-start: 6px;
  color: var(--w-ink-soft);
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
}

/* ------------------------------------------------------ הרשימה המקובצת */

.booking__inner .booking__form {
  display: block;
  grid-template-columns: none;
  gap: 0;
}

.booking__inner .booking__group {
  border-radius: 14px;
  background: var(--w-fill);
  border: 1px solid var(--w-line);
  overflow: hidden;
}

/*
 * שורה אחת: תווית מצד אחד, ערך מצד שני.
 *
 * ‎1fr auto‎ ולא ‎auto 1fr‎ — הערך הוא הדבר שמשתנה, ולכן הוא
 * מקבל את המקום שנשאר. שמות אטרקציות ארוכים, והם נחתכים
 * ב-‎text-overflow‎ במקום לשבור את השורה לשתיים.
 */
.booking__inner .booking__field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  padding: 11px var(--sp-3);
  min-block-size: 46px;
  border-block-start: 1px solid var(--w-line);
  transition: background var(--dur-fast) var(--ease);
}
.booking__inner .booking__field:first-child { border-block-start: 0; }
.booking__inner .booking__field:hover { background: rgba(255, 255, 255, .03); }
.booking__inner .booking__field[hidden] { display: none !important; }

.booking__inner .booking__label {
  margin: 0;
  color: var(--w-ink-soft);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

/*
 * השדה עצמו בלי מסגרת ובלי רקע: הוא כבר יושב בתוך שורה
 * שהמסגרת שלה היא קו ההפרדה. שדה ממוסגר בתוך שורה ממוסגרת
 * הוא קופסה בתוך קופסה.
 */
.booking__inner .booking__input {
  min-block-size: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--w-ink);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-align: end;
  text-overflow: ellipsis;
  appearance: none;
}
.booking__inner select.booking__input {
  background-image: none;
  padding-inline: 0;
  direction: rtl;
}
.booking__inner select.booking__input option { color: #10131a; background: #fff; }

.booking__inner input[type="number"].booking__input { text-align: end; }
.booking__inner input[type="date"].booking__input {
  color-scheme: dark;
  inline-size: 100%;
}

.booking__inner .booking__input:focus { outline: none; }
.booking__inner .booking__field:focus-within {
  background: rgba(240, 168, 26, .09);
  box-shadow: inset 0 0 0 1px rgba(240, 168, 26, .45);
}

/* ----------------------------------------------------------- הפעולה */

.booking__inner .booking__send {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-block-start: var(--sp-4);
  min-block-size: 50px;
  padding-inline: var(--sp-4);
  border-radius: 14px;
  background: linear-gradient(180deg, #f6b83a, #e09a0c);
  color: #2a1b00;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: -.01em;
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, .38) inset,
    0 10px 24px -12px rgba(240, 168, 26, .7);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.booking__inner .booking__send:hover {
  background: linear-gradient(180deg, #ffc451, #efa50e);
  color: #2a1b00;
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, .42) inset,
    0 14px 28px -12px rgba(240, 168, 26, .8);
}
.booking__inner .booking__send:active { transform: translateY(0); }
.booking__inner .booking__send i { font-size: 1.2em; }

.booking__inner .booking__note {
  margin: 0;
  margin-block-start: var(--sp-3);
  padding-block-start: var(--sp-3);
  border-block-start: 1px solid var(--w-line);
  color: var(--w-ink-soft);
  font-size: 11.5px;
  line-height: 1.5;
}

/*
 * במסך רחב הבורר צר ממילא. מתחת ל-1080 הוא ברוחב מלא, ואז
 * רשימה בת חמש שורות מלאות רוחב נראית מתוחה — הרוחב נעצר.
 */
@media (max-width: 1079px) {
  .booking__inner {
    max-inline-size: 520px;
    margin-inline: auto;
  }
}

/* ==========================================================================
   גלריה כפס נגלל
   --------------------------------------------------------------------------
   שמונה תצלומים ברשת הם 532 פיקסלים של גובה בתוך עמוד שכבר
   ארוך. בשורה אחת הם 260, והגרירה עצמה אומרת לגולש שיש עוד.

   סרגל הגלילה מוסתר — הוא הופיע כפס אפור עבה מתחת לתמונות —
   והניווט הוא שני כפתורים ומקלדת.
   ========================================================================== */
.legacy #te-main .rail { position: relative; }

.legacy #te-main .gallery--rail {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block-end: var(--sp-2);
  /* ריווח בקצוות כדי שהתצלום הראשון והאחרון לא ייחתכו בגבול */
  scroll-padding-inline: var(--sp-1);
}
.legacy #te-main .gallery--rail::-webkit-scrollbar { display: none; }

.legacy #te-main .gallery--rail > .gallery-item {
  flex: 0 0 clamp(200px, 26vw, 268px);
  scroll-snap-align: start;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
}
.legacy #te-main .gallery--rail > .gallery-item img {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 0;
  max-block-size: none;
}

.legacy #te-main .rail__nav {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  z-index: 2;
  inline-size: 40px;
  block-size: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--c-navy-900);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  border-radius: 999px;
  box-shadow: 0 6px 18px -8px rgba(4, 20, 38, 0.5);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.legacy #te-main .rail__nav:hover { background: #fff; }
.legacy #te-main .rail__nav--prev { inset-inline-start: calc(var(--sp-3) * -1); }
.legacy #te-main .rail__nav--next { inset-inline-end: calc(var(--sp-3) * -1); }
/* בקצה הפס אין לאן להמשיך, והכפתור אומר את זה במקום לשקר */
.legacy #te-main .rail__nav[disabled] { opacity: 0; pointer-events: none; }

@media (hover: none) {
  .legacy #te-main .rail__nav { display: none; }
}

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

   ‎--card-min‎ הוא אותו מספר שכרטיס האטרקציה משתמש בו, וכל
   הרשתות נגזרות ממנו.
   ========================================================================== */
.legacy #te-main { --card-min: 244px; }

/*
 * ‼️ ‎.package-options‎ הוסר מהקבוצה הזאת.
 *
 * הוא היה מקובץ כאן עם ‎.features-grid‎ ו-‎.info-grid‎ ומקבל
 * ‎--card-min: 244px‎ — רוחב שמתאים לתיבת טקסט ולא לכרטיס עם
 * תצלום 16:10 ורשימת תכונות.
 *
 * זו הייתה ההצהרה הרביעית על אותו מיכל בקובץ הזה. הרוחב האחיד
 * נקבע עכשיו במקום אחד, בסוף הקובץ.
 */
.legacy #te-main .features-grid,
.legacy #te-main .info-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min)), 1fr));
  gap: var(--sp-3);
}

/* ==========================================================================
   כרטיס מחיר
   --------------------------------------------------------------------------
   שלושה מבנים שונים מציגים את אותו דבר באתר: ‎.package-card‎
   (מסלול עם תצלום), ‎.price-card‎ (שם, מחיר, תיאור) ושורות
   בטבלה. הראשון עוצב, השני נשאר על ברירות המחדל של וורדפרס —
   שלושה מלבנים לבנים עם טקסט ממורכז וחצי מגובהם ריק.

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

.legacy #te-main .pricing-cards {
  --card-w: 300px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 232px), var(--card-w)));
  justify-content: center;
  gap: var(--sp-3);
  margin-block: var(--sp-4);
  /* מקום לתווית "הכי פופולרי" שיושבת על הקצה העליון */
  padding-block-start: 10px;
}

.legacy #te-main .price-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  margin: 0;
  padding: var(--sp-4);
  text-align: center;
  background: var(--c-surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: none;
  transition: border-color var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.legacy #te-main .price-card:hover {
  border-color: var(--c-sea-400);
  transform: translateY(-2px);
}

/*
 * המסלול המומלץ מסומן במסגרת זהב ולא ברקע צהוב.
 * רקע צהוב על כרטיס אחד מתוך שלושה קורא כאזהרה.
 */
.legacy #te-main .price-card.featured {
  border-color: var(--c-gold-500);
  box-shadow: 0 0 0 1px var(--c-gold-500) inset;
}

/*
 * התווית "הכי פופולרי" יושבת על הקצה ולא בתוך הזרימה.
 *
 * בזרימה היא הוסיפה שורה רביעית לכרטיס אחד מתוך שלושה, ושלושת
 * הכרטיסים הפסיקו להתחיל באותו גובה — השם של האמצעי ירד מתחת
 * לשם של השכנים, ומה שאמור להיות טבלת השוואה נראה מדורג.
 */
.legacy #te-main .price-card .featured-tag {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  translate: 50% -50%;
  z-index: 2;
  padding: 3px var(--sp-3);
  background: var(--c-gold-500);
  color: var(--c-navy-950);
  border-radius: 999px;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  white-space: nowrap;
}

.legacy #te-main .price-type {
  justify-self: center;
  margin: 0;
  padding: 4px var(--sp-3);
  background: var(--c-sea-050);
  color: var(--c-navy-900);
  border: 1px solid var(--c-sea-200);
  border-radius: 999px;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

/* המחיר — השורה שסורקים */
.legacy #te-main .price-amount {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: 1.05;
  color: var(--c-navy-900);
}
.legacy #te-main .price-currency {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

.legacy #te-main .price-period {
  display: block;
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--c-sea-600);
}
.legacy #te-main .price-description {
  margin: 0;
  padding-block-start: var(--sp-2);
  border-block-start: 1px solid var(--border);
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  color: var(--text-body);
  /* ‎balance‎ מונע שורה אחרונה של מילה אחת */
  text-wrap: pretty;

  /*
   * ‼️ **התיאור אינו נחתך.**
   *
   * שי צילם כרטיס בעמוד השוק הצף שבו המשפט נגמר ב-"…" באמצע
   * מילה, וכתב: *"לא ניתן לראות את המידע אולי להפוך את זה
   * ללחיץ בשביל לראות מידע נוסף שנפתח כמו פופאפ."*
   *
   * החיתוך מגיע מכלל גנרי ב-components.css על כל
   * ‎[class$="-card"] p‎ — ‎line-clamp: 3‎. הקובץ הזה של איגור,
   * ולכן הביטול כאן, בקובץ שלי, בסגוליות גבוהה יותר.
   *
   * ‼️ **ולמה ביטול ולא פופאפ:** מדדתי כמה זה באמת עולה.
   *   1440px — כרטיס אחד נחתך, הגובה המרבי 530 → 548 (‎+18‎)
   *   1100px — כרטיס אחד נחתך, אותו הפרש
   *    375px — **חמישה** נחתכים, 338 → 374 (‎+36‎)
   * ובכל האתר: 202 תיאורים ב-53 עמודים, והארוך ביותר 219
   * תווים — כלומר שורה אחת מעבר לשלוש הקיימות.
   *
   * פופאפ פותר מחסור במקום, וכאן אין מחסור: 18 פיקסלים
   * בדסקטופ, 36 בנייד שבו ממילא גוללים. הוא היה מוסיף רכיב
   * חדש, JS ומצב פתוח/סגור — ומסתיר מידע מאחורי קליק שאיש
   * לא מבטיח שילחץ עליו. **גוגל וקורא מסך רואים את הטקסט
   * בשני המקרים; הלקוח רואה אותו רק באחד.**
   *
   * ‼️ וזה גם בדיוק מה שכתבתי כאן למטה על ‎.feature-card p‎:
   * **כל מספר שורות קבוע יישבר באיזשהו רוחב**, כי הרוחב הוא
   * שקובע כמה תווים נכנסים בשורה. הרשת כבר משווה גבהים
   * בכל שורה, ולכן התוצאה אחידה בלי לקטוע משפט — בכל רוחב.
   *
   * הביטול עצמו נמצא בכלל הבא, ולא כאן. ‎ראה למה.‎
   */
}

/*
 * ‼️ **הביטול חייב סגוליות גבוהה יותר, ולא רק סדר טעינה.**
 *
 * כתבתי אותו קודם בתוך ‎.legacy #te-main .price-description‎
 * ומדדתי — ‎line-clamp‎ נשאר 3. הכלל שלי היה שם בגיליון עם
 * הערך ‎none‎, ובכל זאת הפסיד.
 *
 * החשבון:
 *   legacy-patterns: ‎.legacy #te-main :is([class$="-card"]…) p‎
 *     ‎:is()‎ מקבל את הסגוליות של הארגומנט החזק שלו — סלקטור
 *     תכונה — ולכן ‎(1,3,1)‎.
 *   שלי:            ‎.legacy #te-main .price-description‎
 *     ‎(1,2,0)‎.
 *
 * זה בדיוק מה שתפס אותי בעבר: **סגוליות גבוהה יותר דורסת
 * החלטה של הבית, והדפדפן נראה תקין.** הכלל שלי היה בקובץ
 * שנטען אחרי — וסדר טעינה מכריע רק כששתי הסגוליות שוות.
 *
 * כאן ‎(1,4,1)‎: שני ‎:is()‎ של מחלקות ועוד ‎p.price-description‎.
 * גבוה מספיק כדי לנצח בלי להישען על סדר הקבצים, שעלול
 * להשתנות בלי שאדע.
 *
 * ‼️ **ורשימת המכלים נמדדה ולא נוחשה.** סרקתי את כל 391
 * העמודים ב-dist: 199 תיאורים יושבים ב-‎.package-options‎,
 * ו-**שלושה נוספים ב-‎.tab-content‎** — בעמוד איי קוראל
 * וראיה, שבו הכרטיסים בתוך לשוניות. בלי המדידה הם היו
 * נשארים חתוכים, ובדיקה בעמוד אחד לא הייתה מגלה את זה.
 */
.legacy #te-main :is(.pricing-cards, .package-options, .tab-content)
  :is(.package-card, .price-card) p.price-description {
  -webkit-line-clamp: none;
  line-clamp: none;
  display: block;
  overflow: visible;
}

/*
 * כרטיסי המחיר בעמודה הצרה.
 *
 * לצד הבורר נשארים כ-660 פיקסלים, ושלושה כרטיסים של 300
 * נשברו ל-2+1 — השלישי לבד בשורה, וההשוואה בין שלושת
 * המסלולים נקטעה.
 *
 * כאן הם צרים יותר ונשארים בשורה אחת. כרטיס מחיר מחזיק שם,
 * מספר ושתי שורות תיאור; הוא סובל 205 פיקסלים, וכרטיס
 * תצלום לא היה סובל.
 */
@media (min-width: 1080px) {
  .legacy #te-main .attr-split__main .pricing-cards {
    --card-w: 205px;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), var(--card-w)));
    gap: var(--sp-2);
  }
}

/* ==========================================================================
   הבורר המעוצב
   --------------------------------------------------------------------------
   שכבת תצוגה מעל ‎select‎ נייטיב. ה-‎select‎ נשאר מקור האמת
   ונשאר נגיש לקורא מסך; הוא רק יוצא מהתצוגה.

   ‎clip-path‎ ולא ‎display: none‎ — שדה שהוסר מהתצוגה לגמרי
   יוצא גם מסדר המיקוד ומטופס, ואז הודעת הוואטסאפ נבנית מערך
   שאין לו מקור.
   ========================================================================== */
.booking__inner .bsel { position: relative; min-inline-size: 0; }

.booking__inner .bsel__native {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.booking__inner .bsel__btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  inline-size: 100%;
  min-block-size: 0;
  padding: 0;
  background: none;
  border: 0;
  color: var(--w-ink);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-align: end;
  cursor: pointer;
  /* שם ארוך נחתך ולא שובר את השורה לשתיים */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.booking__inner .bsel__btn::after {
  content: "";
  flex: none;
  inline-size: 7px;
  block-size: 7px;
  margin-inline-start: 2px;
  border-inline-start: 1.5px solid var(--w-ink-soft);
  border-block-end: 1.5px solid var(--w-ink-soft);
  rotate: -45deg;
  translate: 0 -2px;
  transition: rotate var(--dur-fast) var(--ease);
}
.booking__inner .bsel__btn[aria-expanded="true"]::after {
  rotate: 135deg;
  translate: 0 1px;
}

/*
 * הפאנל יוצא מהשורה ומרחף מעליה.
 * הוא רחב מהשדה בכוונה: שמות אטרקציות ארוכים משמות שדות.
 */
.booking__inner .bsel__panel {
  position: absolute;
  inset-block-start: calc(100% + 10px);
  inset-inline: -8px;
  z-index: 30;
  max-block-size: 268px;
  overflow-y: auto;
  padding: 5px;
  background: #0a2138;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 14px;
  box-shadow: 0 24px 48px -18px rgba(0, 0, 0, .8);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.booking__inner .bsel__panel[hidden] { display: none; }

.booking__inner .bsel__opt {
  padding: 9px 10px;
  border-radius: 9px;
  color: rgba(245, 247, 250, .84);
  font-size: var(--fs-2xs);
  line-height: 1.35;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.booking__inner .bsel__opt:hover { background: rgba(255, 255, 255, .07); color: #fff; }

/*
 * הנבחר מסומן בזהב ובנקודה, לא בשורה כחולה של המערכת.
 * הנקודה בצד ההתחלה כדי שהשמות יישארו מיושרים זה מתחת לזה.
 */
.booking__inner .bsel__opt.is-on {
  background: rgba(240, 168, 26, .14);
  color: #fff;
  font-weight: var(--fw-semibold);
}
.booking__inner .bsel__opt.is-on::before {
  content: "";
  display: inline-block;
  inline-size: 5px;
  block-size: 5px;
  margin-inline-end: 7px;
  border-radius: 50%;
  background: var(--c-gold-500);
  translate: 0 -2px;
}

.booking__inner .bsel__panel::-webkit-scrollbar { inline-size: 6px; }
.booking__inner .bsel__panel::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .22);
  border-radius: 999px;
}

/*
 * השדה שמחזיק בורר חייב לתת לפאנל לצאת ממנו.
 * ‎overflow: hidden‎ על הקבוצה חתך אותו לגובה שורה אחת.
 */
.booking__inner .booking__group:has(.bsel__panel:not([hidden])) { overflow: visible; }
.booking__inner .booking__field:has(.bsel__panel:not([hidden])) { position: relative; z-index: 30; }

/* ==========================================================================
   מפת הסיפון
   --------------------------------------------------------------------------
   תרשים סכמטי של היאכטה עם אזורי הישיבה. הוא מצויר מאפס ואינו
   העתק של האיור של המתחם — ראה את ההערה ב-deck-map.js.

   הצבעים הם של האתר: נייבי לסיפון, תכלת אנדמן לבריכה, זהב
   לאזור הנבחר. בלי צל, בלי גרדיאנט, בלי אפקט — זה תרשים ולא
   איור.
   ========================================================================== */
.legacy #te-main .deck__stage {
  position: relative;
  margin-block: var(--sp-4);
}

.legacy #te-main .deck__svg {
  inline-size: 100%;
  block-size: auto;
  display: block;
  /* מתחת ל-560 פיקסלים הטקסט בתוך האזורים נהיה קטן מדי לקריאה */
  min-inline-size: 0;
}

.deck__hull {
  fill: var(--c-surface);
  stroke: var(--border);
  stroke-width: 2;
}
.deck__pool {
  fill: var(--c-sea-050);
  stroke: var(--c-sea-200);
  stroke-width: 2;
}
.deck__poolText,
.deck__bow {
  fill: var(--text-muted);
  font-family: var(--font-body);
  font-size: 15px;
  text-anchor: middle;
}
.deck__rail {
  stroke: var(--border);
  stroke-width: 2;
  stroke-dasharray: 3 7;
  stroke-linecap: round;
}

/* ------------------------------------------------------- אזור */

.deck__zone { cursor: pointer; }
.deck__zone rect {
  fill: var(--c-surface-raised);
  stroke: var(--border);
  stroke-width: 1.5;
  transition: fill var(--dur-fast) var(--ease), stroke var(--dur-fast) var(--ease);
}
.deck__zone text {
  fill: var(--c-navy-900);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: var(--fw-bold);
  text-anchor: middle;
  pointer-events: none;
}
.deck__zone .deck__zoneCap {
  fill: var(--text-muted);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: var(--fw-medium);
}

/* המומלץ מסומן בקו זהב גם לפני שנוגעים בו */
.deck__zone.is-featured rect {
  stroke: var(--c-gold-500);
  stroke-width: 2;
}

.deck__zone:hover rect,
.deck__zone.is-on rect {
  fill: var(--c-gold-500);
  stroke: var(--c-gold-600);
}
.deck__zone:hover text,
.deck__zone.is-on text { fill: var(--c-navy-950); }
.deck__zone:hover .deck__zoneCap,
.deck__zone.is-on .deck__zoneCap { fill: rgba(4, 24, 46, .72); }

.deck__zone:focus { outline: none; }
.deck__zone:focus-visible rect {
  stroke: var(--c-sea-500);
  stroke-width: 3;
}

/* ------------------------------------------------- כרטיס הריחוף */

/*
 * הכרטיס מרחף מעל המפה ואינו דוחף אותה.
 * כרטיס שמזיז את התרשים גורם לאזור לזוז מתחת לעכבר, והריחוף
 * מתחיל להבהב.
 */
.legacy #te-main .deck__card {
  position: absolute;
  inset-block-start: var(--sp-3);
  inset-inline-start: var(--sp-3);
  z-index: 3;
  inline-size: min(260px, 74%);
  background: var(--c-surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: 0 16px 38px -18px rgba(4, 24, 46, .45);
  pointer-events: none;
}
.legacy #te-main .deck__card[hidden] { display: none; }

.deck__cardMedia { aspect-ratio: 16 / 10; background: var(--c-surface); }
.deck__cardMedia img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}
.deck__cardBody { padding: var(--sp-3); display: grid; gap: 3px; }
.deck__cardTitle {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.deck__cardMeta {
  margin: 0;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}
.deck__cardPrice {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-black);
  color: var(--c-navy-900);
}

.legacy #te-main .deck__note {
  margin: 0;
  font-size: var(--fs-3xs);
  color: var(--text-muted);
  text-align: center;
}

/*
 * בנייד אין ריחוף, והכרטיס מוצג בנגיעה. הוא יורד מתחת למפה
 * במקום לרחף מעליה — על מסך צר הוא היה מכסה חצי מהסיפון.
 */
@media (max-width: 719px) {
  .legacy #te-main .deck__card {
    position: static;
    inline-size: 100%;
    margin-block-start: var(--sp-3);
  }
  .deck__zone text { font-size: 19px; }
  .deck__zone .deck__zoneCap { font-size: 16px; }
  .deck__poolText, .deck__bow { font-size: 19px; }
}

/* ==========================================================================
   טאבים של חבילות
   --------------------------------------------------------------------------
   ביונה ביץ׳ יש שלוש חבילות — אחה"צ, בוקר וכרטיס כניסה — ולכל
   אחת סוגי מושב ומחירים משלה. המבנה וה-JS היו תקינים לגמרי:
   שלושה ‎.pricing-tab‎ עם ‎data-tab‎, שלושה ‎.tab-content‎ עם
   מזהים תואמים, ומאזין שמחליף ‎.active‎.

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

   זה תיקון גנרי: כל עמוד עם ‎.pricing-tabs‎ מקבל טאבים עובדים.
   ========================================================================== */

.legacy #te-main .pricing-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-block: var(--sp-4);
  padding: 5px;
  background: var(--c-surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  /* בקר מקוטע: המסגרת עוטפת את כולם, והנבחר צף בתוכה */
  inline-size: fit-content;
  margin-inline: auto;
  max-inline-size: 100%;
}

.legacy #te-main .pricing-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 9px var(--sp-4);
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.legacy #te-main .pricing-tab:hover { color: var(--c-navy-900); background: rgba(7, 39, 66, .05); }

.legacy #te-main .pricing-tab.active {
  background: var(--c-navy-900);
  color: var(--c-white);
}
.legacy #te-main .pricing-tab.active i { color: var(--c-gold-400); }
.legacy #te-main .pricing-tab i { font-size: .95em; }

/*
 * ‼️ הכלל שבלעדיו הכל נשבר.
 * ‎.tab-content‎ ללא ‎active‎ אינו מוצג. בלי השורה הזו כל
 * הפאנלים גלויים בו-זמנית.
 */
.legacy #te-main .tab-content { display: none; }
.legacy #te-main .tab-content.active { display: block; }

/*
 * נייד: הטאבים נגללים בשורה אחת במקום להישבר לשלוש שורות.
 * שלושה טאבים עם שעות בתוכם לא נכנסים ל-375 פיקסלים.
 */
@media (max-width: 719px) {
  .legacy #te-main .pricing-tabs {
    inline-size: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
    border-radius: var(--r-md);
  }
  .legacy #te-main .pricing-tabs::-webkit-scrollbar { display: none; }
  .legacy #te-main .pricing-tab { flex: 0 0 auto; }
}

/* ---- מפת הסיפון: תיקוני קריאות ---- */

/*
 * שכבת מים מתחת לגוף.
 * בלעדיה המתאר קרא כמלבן מעוגל חיוור ולא כיאכטה. המים נותנים
 * לחרטום צורה, וההפרש בין שתי השכבות הוא מה שמצייר את הקו.
 */
.deck__water {
  fill: var(--c-sea-050);
  stroke: var(--c-sea-200);
  stroke-width: 1.5;
}
.legacy #te-main .deck__hull { stroke: var(--c-navy-800); stroke-width: 2.5; }

/*
 * הכרטיס עובר לצד הנגדי לאזור. ראה את ההערה ב-deck-map.js —
 * במיקום קבוע הוא כיסה את שלוש הקבנות.
 */
.legacy #te-main .deck__card[data-side="bow"] {
  inset-inline-start: auto;
  inset-inline-end: var(--sp-3);
}
.legacy #te-main .deck__card[data-side="stern"] {
  inset-inline-start: var(--sp-3);
  inset-inline-end: auto;
}

@media (max-width: 719px) {
  .legacy #te-main .deck__card[data-side="bow"],
  .legacy #te-main .deck__card[data-side="stern"] {
    inset-inline: auto;
  }
}

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

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

.legacy #te-main .hero-badge {
  justify-self: center;
  margin: 0 0 var(--sp-2);
  padding: 5px var(--sp-4);
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px;
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  backdrop-filter: blur(6px);
}

.legacy #te-main .hero-subtitle {
  margin: 0;
  color: rgba(255, 255, 255, .92);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  text-wrap: balance;
}

/* שורת היתרונות — אופקית, לא שלוש שורות מתחת לזו */
.legacy #te-main .hero-highlights {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-3);
  margin-block-start: var(--sp-2);
}
.legacy #te-main .hero-highlight {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px var(--sp-3);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 999px;
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.legacy #te-main .hero-highlight i { color: var(--c-gold-400); font-size: .95em; }

/* ------------------------------------------------ כפתורי ההירו */

.legacy #te-main .hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-block-start: var(--sp-3);
}

.legacy #te-main .cta-primary,
.legacy #te-main .cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-block-size: 48px;
  padding: 0 var(--sp-5);
  border-radius: var(--r-sm);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.legacy #te-main .cta-primary {
  background: var(--c-gold-500);
  color: var(--c-navy-950);
  box-shadow: 0 1px 0 0 rgba(255, 255, 255, .34) inset;
}
.legacy #te-main .cta-primary:hover {
  background: var(--c-gold-400, #ffc451);
  color: var(--c-navy-950);
  transform: translateY(-1px);
}

/* המשני שקוף עם מסגרת — הוא לא מתחרה בראשי */
.legacy #te-main .cta-secondary {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .34);
  color: #fff;
}
.legacy #te-main .cta-secondary:hover {
  background: rgba(255, 255, 255, .18);
  color: #fff;
  transform: translateY(-1px);
}

@media (max-width: 719px) {
  .legacy #te-main .hero-cta { flex-direction: column; align-items: stretch; }
  .legacy #te-main .cta-primary,
  .legacy #te-main .cta-secondary { justify-content: center; }
}

/* ==========================================================================
   ‎.pricing-grid‎ — אותו כרטיס, שם מיכל אחר
   --------------------------------------------------------------------------
   עיצבתי ‎.pricing-cards‎ וניחשתי את השם מהזיכרון. המיכל ביונה
   ביץ׳ נקרא ‎.pricing-grid‎, והכרטיסים שם נשארו בלי עיצוב —
   מלבנים ארוכים במקום כרטיסים.

   זו הפעם השנייה שאותו ניחוש עולה לי סבב. שם מחלקה נבדק, לא
   נזכר.
   ========================================================================== */
.legacy #te-main .pricing-grid {
  --card-w: 272px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), var(--card-w)));
  justify-content: center;
  gap: var(--sp-3);
  margin-block: var(--sp-4);
  padding-block-start: 10px;
}

/* הכרטיס עצמו — תמונה למעלה, תוכן מתחת, כפתור בתחתית */
.legacy #te-main .pricing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--c-surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  text-align: center;
  transition: border-color var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.legacy #te-main .pricing-card:hover {
  border-color: var(--c-sea-400);
  transform: translateY(-2px);
}
.legacy #te-main .pricing-card.featured {
  border-color: var(--c-gold-500);
  box-shadow: 0 0 0 1px var(--c-gold-500) inset;
}

.legacy #te-main .pricing-image {
  aspect-ratio: 4 / 3;
  max-block-size: 168px;
  overflow: hidden;
  margin: 0;
}
.legacy #te-main .pricing-image img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
  max-block-size: none;
}

.legacy #te-main .pricing-card .card-content {
  display: grid;
  gap: var(--sp-2);
  align-content: start;
  padding: var(--sp-3);
  flex: 1;
}

.legacy #te-main .level-badge {
  position: absolute;
  inset-block-start: var(--sp-2);
  inset-inline-start: auto;
  inset-inline-end: var(--sp-2);
  z-index: 2;
  padding: 3px 10px;
  background: rgba(255, 255, 255, .92);
  color: var(--c-navy-900);
  border-radius: 999px;
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
}

.legacy #te-main .pricing-capacity {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}
.legacy #te-main .pricing-capacity i { color: var(--c-sea-500); }

.legacy #te-main .pricing-card .price,
.legacy #te-main .pricing-card [class*="amount"] {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: 1.05;
  color: var(--c-navy-900);
}

/* רשימת מה כלול — שורות קצרות, בלי רקע מתחלף */
.legacy #te-main .pricing-card ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: var(--sp-2) 0 0;
  list-style: none;
  border-block-start: 1px solid var(--border);
}
.legacy #te-main .pricing-card li {
  margin: 0;
  padding: 0;
  background: none;
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  color: var(--text-body);
}
.legacy #te-main .pricing-card li i { color: var(--c-sea-500); margin-inline-end: 5px; }

.legacy #te-main .pricing-card .book-button,
.legacy #te-main .pricing-card a[href*="wa.me"] {
  margin: auto var(--sp-3) var(--sp-3);
  min-block-size: 44px;
}

/* ---- מפת הסיפון: שתי קומות ---- */

/*
 * משטח קומה 2 בגוון כהה יותר.
 * שי ציין שלא רואים הפרדה בין הקומות. קו לבדו נקרא כקישוט —
 * שני משטחים בגוונים שונים נקראים כשתי רמות.
 */
/*
 * שלוש קומות, שלושה גוונים.
 *
 * שי שלח שרטוט מסומן בצבע: צהוב קומה 1, אדום קומה 2, ירוק
 * קומה 3. אני לא מעתיק את הצבעים שלו — הם סימון עבודה ולא
 * שפת עיצוב — אלא מתרגם אותם לשלוש דרגות של אותו גוון.
 *
 * ככל שעולים, המשטח בהיר יותר. זה נקרא כגובה ולא כקטגוריה.
 */
.deck__upper { fill: var(--c-sea-050); stroke: none; }
.deck__floor2 { fill: rgba(45, 190, 208, .09); stroke: none; }
.deck__floor3 { fill: rgba(45, 190, 208, .19); stroke: none; }
.deck__floor--3 { font-size: 13px; }
.deck__split {
  stroke: var(--c-navy-800);
  stroke-width: 2;
  stroke-dasharray: 6 5;
}
.deck__floor {
  fill: var(--c-navy-800);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  text-anchor: middle;
  letter-spacing: .04em;
}

/* ---- כרטיס מחיר: קיצור הגובה ---- */

/*
 * 272 רוחב על 522 גובה הוא מלבן ביחס 1:1.9, ושי צדק שזה נקרא
 * כרצועה ולא ככרטיס. הגובה התחלק כך: תצלום 152, רשימת מה כלול
 * 149, והשאר.
 *
 * התצלום מתקצר, והרשימה מוצגת בשורות צפופות יותר. שום פריט לא
 * מוסתר — רשימה שמקופלת מאחורי "עוד" מסתירה בדיוק את מה שהלקוח
 * משווה בין הכרטיסים.
 */
.legacy #te-main .pricing-image { max-block-size: 124px; aspect-ratio: 16 / 10; }

.legacy #te-main .pricing-card .card-content { gap: 6px; padding: var(--sp-3) var(--sp-3) var(--sp-2); }
.legacy #te-main .pricing-card ul { gap: 1px; }
.legacy #te-main .pricing-card li { font-size: var(--fs-3xs); line-height: 1.45; }
.legacy #te-main .pricing-type { margin: 0; font-size: var(--fs-sm); }
.legacy #te-main .pricing-card .price-credit { font-size: var(--fs-3xs); line-height: 1.4; }

/* ---- מפת הסיפון: אזור המסעדה ---- */

/*
 * המסעדה מסומנת כדי שהמפה תקרא כיאכטה ולא כרשת מלבנים, אבל
 * היא **אינה אזור למכירה** ולכן אין לה ריחוף ואין לה מחיר.
 */
.deck__dining {
  fill: var(--c-surface);
  stroke: var(--border);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
.deck__dining-t {
  fill: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  text-anchor: middle;
}

/* ---- מפת הסיפון: יחידות בתוך בלוק ---- */

/*
 * כל אזור מחולק ליחידות בפועל — שש מיטות בריכה, שלוש קבנות
 * בינוניות, ארבע ספות שקיעה. שי ביקש את זה, וזה לא קישוט:
 * לקוח שרואה בלוק אחד חושב שהוא קונה את כל האזור, ולקוח
 * שרואה שש מיטות מבין שהוא קונה אחת מהן.
 *
 * ‎.deck__band‎ הוא המשטח שמאגד אותן, ‎.deck__unit‎ היא היחידה.
 * הריחוף צובע את היחידות ומשאיר את המשטח בהיר, כך שרואים גם
 * מה נבחר וגם מכמה יחידות הוא מורכב.
 */
.deck__band {
  fill: var(--c-surface-raised);
  stroke: var(--border);
  stroke-width: 1.5;
  transition: fill var(--dur-fast) var(--ease), stroke var(--dur-fast) var(--ease);
}
.deck__unit {
  fill: var(--c-surface);
  stroke: var(--border);
  stroke-width: 1;
  transition: fill var(--dur-fast) var(--ease), stroke var(--dur-fast) var(--ease);
}

.deck__zone:hover .deck__band,
.deck__zone.is-on .deck__band {
  fill: rgba(240, 168, 26, .16);
  stroke: var(--c-gold-600);
}
.deck__zone:hover .deck__unit,
.deck__zone.is-on .deck__unit {
  fill: var(--c-gold-500);
  stroke: var(--c-gold-600);
}
.deck__zone.is-featured .deck__band { stroke: var(--c-gold-500); stroke-width: 2; }

/* התווית יושבת על המשטח, מעל היחידות */
.deck__zone text { font-size: 13.5px; }
.deck__zone .deck__zoneCap { font-size: 11.5px; }
.deck__zone:focus-visible .deck__band { stroke: var(--c-sea-500); stroke-width: 3; }

/* ---- תגית "הכי פופולרי" מול תגית הקומה ---- */

/*
 * שתיהן ישבו בפינה העליונה של אותו כרטיס ונדרסו זו על זו.
 * תגית הקומה היא נתון, והמומלץ הוא סימון — ולכן הנתון נשאר
 * במקומו והסימון עובר לפינה הנגדית.
 */
.legacy #te-main .pricing-card .featured-badge {
  inset-block-start: var(--sp-2);
  inset-inline-start: var(--sp-2);
  inset-inline-end: auto;
  z-index: 3;
}

/* ---- עמדת ה-DJ ---- */

/*
 * בתוך אזור המסעדה, בחלק הקרוב לבריכה. היא לא נמכרת ולכן אין
 * לה ריחוף — היא שם כדי שהמפה תתאר את הסיפון כפי שהוא.
 */
.deck__dj {
  fill: var(--c-navy-900);
  stroke: var(--c-navy-950);
  stroke-width: 1.5;
}
.deck__dj-t {
  fill: var(--c-gold-400, #ffc451);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  text-anchor: middle;
  letter-spacing: .06em;
}

/* ==========================================================================
   רצועת נתונים
   --------------------------------------------------------------------------
   ‎.stats-grid‎ עם ‎.stat-number‎ ו-‎.stat-label‎ לא עוצבו מעולם.
   התווית קיבלה שבב מכלל גנרי, המספר נשאר טקסט חשוף לצידה,
   ובין השניים נפער רווח שנראה כמו תקלה: "1,200" ואז מרחק ואז
   "מ״ר שטח יאכטה".

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

.legacy #te-main .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--sp-3);
  margin-block: var(--sp-4);
  padding: 0;
  list-style: none;
  max-inline-size: 860px;
  margin-inline: auto;
}

.legacy #te-main .stat-item {
  display: grid;
  gap: 2px;
  justify-items: center;
  margin: 0;
  padding: var(--sp-4) var(--sp-3);
  text-align: center;
  background: var(--c-surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
}

.legacy #te-main .stat-number {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  line-height: 1.05;
  color: var(--c-navy-900);
}

/*
 * התווית **לא** שבב. שבב הוא דבר שאפשר ללחוץ עליו או לסנן
 * לפיו, וזו שורת הסבר.
 */
.legacy #te-main .stat-label {
  display: block;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--text-muted);
  white-space: normal;
}


/* ==========================================================================
   כפתורי פעולה מחוץ להירו
   --------------------------------------------------------------------------
   ‎.cta-primary‎ ו-‎.cta-secondary‎ עוצבו עבור ההירו, שם הרקע
   כהה: המשני לבן־שקוף עם מסגרת לבנה. באותן מחלקות משתמש גם
   סקשן ה-CTA בתחתית העמוד, ושם הרקע בהיר — והכפתור המשני
   נעלם לגמרי. שי ראה "התקשרו ישירות" ולא ראה כפתור.

   הכלל למטה חל רק **מחוץ** להירו, ולכן ההירו נשאר כפי שהוא.
   ========================================================================== */
.legacy #te-main *:not(.hero):not(.hero-content) > .cta-secondary,
.legacy #te-main .section .cta-secondary {
  background: var(--c-surface-raised);
  border: 1px solid var(--border);
  color: var(--c-navy-900);
}
.legacy #te-main .section .cta-secondary:hover {
  background: var(--c-surface);
  border-color: var(--c-sea-400);
  color: var(--c-navy-950);
}

/*
 * שורת הכפתורים בסקשן ה-CTA.
 * ‎margin: 3rem 0‎ בשורה יצר 96 פיקסלים מעל ומתחת לשני
 * כפתורים. הסקשן כולו נראה כמו חור עם כפתור באמצע.
 */
.legacy #te-main .section [style*="text-align:center"]:has(> .cta-primary),
.legacy #te-main .section [style*="text-align: center"]:has(> .cta-primary) {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin: var(--sp-4) 0 0 !important;
}
.legacy #te-main .section .cta-primary,
.legacy #te-main .section .cta-secondary { margin: 0 !important; }

/*
 * ‎whatsapp-float‎ — שריד מוורדפרס.
 *
 * הוא נועד לרחף בפינה, אבל הוא יושב בתוך ‎.container‎ בזרימת
 * התוכן ובלי עיצוב — ולכן הוא מופיע ככפתור ריק שתלוי באמצע
 * העמוד, מתחת לביקורות. באתר כבר יש כפתור וואטסאפ מרחף
 * (‎.wa-float‎), וזה כפול.
 */
.legacy #te-main .whatsapp-float { display: none; }

/* ==========================================================================
   עמודי האטרקציות של המתחם בפטאיה

   עמוד לכל אטרקציה, כל אחד ממוקד בשאילתה שלו. ראה
   scripts/pattaya-activities.js.
   ========================================================================== */

.pa-intro h1 {
  margin: 0 0 var(--sp-3);
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
.pa-intro__lede {
  margin: 0;
  max-inline-size: 62ch;
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/*
 * "החל מ־" בראש העמוד.
 *
 * המספר הוא הדבר שמחפשים, ולכן הוא מקבל משקל ולא נקבר בפסקה.
 * הוא נגזר מהמחירון ולא מוקלד, כך שהוא לא יכול להתפצל ממנו.
 */
.pa-intro__from {
  display: inline-block;
  margin: var(--sp-5) 0 0;
  padding: .5em 1em;
  background: var(--c-gold-050, #fdf6e6);
  border: 1px solid var(--c-gold-500);
  border-radius: var(--r-full, 999px);
  font-size: var(--fs-sm);
  color: var(--text-strong);
}
.pa-intro__from b { font-size: var(--fs-lg); }

/*
 * ‼️ תצלום וגלריה בעמודי פעילויות פטאיה.
 *
 * כללי הגלריה של הבית חלים רק בתוך ".legacy #te-main", ועמודי
 * pattaya-activities אינם בתוכו. הגלריה קיבלה display:block
 * והתמונות נערמו אחת מתחת לשנייה בגודל מלא — בלי שום שגיאה.
 * כאן **אותן הצהרות בדיוק** (שורה ~534), בהיקף ".pa". לא רכיב חדש.
 *
 * ההירו חתוך ל-16:9 כי חלק מהתצלומים לאורך (נמר, סוס, קארט);
 * object-position מעט מעל האמצע, שם נמצאים הפנים והנושא.
 */
.pa .gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: var(--sp-2);
  margin-block: var(--sp-4);
}
.pa .gallery-item {
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
}
.pa .gallery-item img {
  inline-size: 100%;
  block-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 0;
  max-block-size: none;
}
.pa .pa-hero {
  margin: var(--sp-4) 0 0;
  border-radius: var(--r-md);
  overflow: hidden;
}
.pa .pa-hero img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center 35%;
  max-block-size: 460px;
}

.pa-price__note {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
/* המחיר המלא — נוכח אבל לא מתחרה במחיר שלנו */
.pa-price__was { color: var(--text-muted); }
.pa-price__was s { text-decoration-thickness: 1px; }

.pa-rules__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--sp-3);
  max-inline-size: 70ch;
}
.pa-rules__list li {
  position: relative;
  padding-inline-start: 1.5em;
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}
.pa-rules__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .62em;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  background: var(--c-sea-500);
}

/* ------------------------------------------------ אפשר לשלב באותו מתחם */

.pa-combine { background: var(--c-sea-050); }
.pa-combine__lede {
  margin: 0 0 var(--sp-6);
  max-inline-size: 66ch;
  color: var(--text-body);
  line-height: var(--lh-relaxed);
}

.pa-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
  gap: var(--sp-3);
}

.pa-chip {
  display: grid;
  gap: 2px;
  padding: var(--sp-4);
  background: var(--c-white);
  border: 1px solid var(--border);
  border-radius: var(--r-md, 12px);
  text-decoration: none;
  transition: border-color var(--dur-mid) var(--ease), transform var(--dur-mid) var(--ease);
}
.pa-chip:hover {
  border-color: var(--c-sea-500);
  transform: translateY(-2px);
}
.pa-chip__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
}
.pa-chip__from {
  font-size: var(--fs-xs);
  color: var(--c-gold-600, #a8740a);
  font-weight: var(--fw-semibold);
}

/* ==========================================================================
   כרטיס מחיר שאפשר לבחור — ראה scripts/ticket-picker.js
   ========================================================================== */

/*
 * הכרטיס הופך מ-‎<div>‎ ל-‎<button>‎, וזה מביא איתו ברירות מחדל
 * של דפדפן שצריך לנטרל: רקע אפור, מסגרת חרוטה, גופן מערכת,
 * וטקסט ממורכז לפי ‎text-align‎ של כפתור ולא של המסמך.
 *
 * ‎inherit‎ על הגופן ולא ‎var(--font-body)‎ — כך הכרטיס ממשיך
 * לרשת בדיוק את מה שהוא ירש כ-‎div‎, וההחלפה אינה משנה דבר
 * בתצוגה עד שנוגעים בה.
 */
.legacy #te-main button.price-card--pick {
  inline-size: 100%;
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  text-align: center;
  /* הכרטיס כבר מגדיר רקע, מסגרת, ריפוד ורדיוס — לא נדרסים כאן */
}

/*
 * מצב נבחר.
 *
 * הסימון הוא ‎aria-pressed="true"‎ ולא מחלקה, מסיבה אחת: זה
 * המצב שקורא מסך מכריז ממילא. מחלקה נפרדת הייתה מצב שני שאפשר
 * שישתבש מול הראשון — שניהם נכונים ורק אחד מהם נשמע.
 *
 * הזהב שמור לפעולה לפי מערכת העיצוב, ובחירה היא פעולה.
 */
.legacy #te-main button.price-card--pick[aria-pressed="true"] {
  border-color: var(--c-gold-500);
  box-shadow: 0 0 0 2px var(--c-gold-500), var(--shadow-md);
}

/*
 * הסימן עצמו — וי בפינת הפתיחה.
 *
 * ‎.price-card.featured‎ כבר תופס את הקצה העליון עם התווית
 * "הכי פופולרי", ולכן הסימן יושב בפינה ההפוכה ולא מתנגש בה.
 */
.legacy #te-main button.price-card--pick[aria-pressed="true"]::after {
  content: "✓";
  position: absolute;
  inset-block-start: var(--sp-2);
  inset-inline-start: var(--sp-2);
  inline-size: 22px;
  block-size: 22px;
  display: grid;
  place-items: center;
  border-radius: var(--r-full);
  background: var(--c-gold-500);
  color: var(--c-navy-950);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-black);
  line-height: 1;
}

/* מקלדת — הטבעת חייבת להיראות גם כשהכרטיס כבר נבחר */
.legacy #te-main button.price-card--pick:focus-visible {
  outline: 3px solid var(--c-sea-500);
  outline-offset: 2px;
}

/*
 * רמז שהכרטיס לחיץ, לפני שנוגעים בו.
 *
 * בלעדיו שלושה מלבנים נראים כתצוגה, וזו בדיוק הייתה התקלה:
 * הלקוח קרא אותם, החליט, ולא ידע שאפשר ללחוץ.
 */
.legacy #te-main button.price-card--pick:hover {
  border-color: var(--c-gold-500);
}

@media (hover: none) {
  /* במגע אין ריחוף, ולכן הרמז חייב להיות קבוע */
  .legacy #te-main button.price-card--pick::before {
    content: "בחירה";
    position: absolute;
    inset-block-end: var(--sp-2);
    inset-inline-end: var(--sp-3);
    font-size: var(--fs-3xs);
    font-weight: var(--fw-bold);
    color: var(--c-sea-600);
  }
  .legacy #te-main button.price-card--pick[aria-pressed="true"]::before {
    content: "נבחר";
    color: var(--c-gold-700);
  }
}

/* ==========================================================================
   נייד — שתי עמודות במקום אחת
   ========================================================================== */

/*
 * המדידה שהובילה לכאן.
 *
 * ---------------------------------------------------------------------------
 * ‎/טיול-אופנועי-ים-בפוקט‎ ב-375 פיקסלים: **15,884 פיקסל גובה,
 * כלומר 19.6 מסכים של גלילה.** זה מה שהלקוח תיאר כ"יותר מדי
 * גלילה", והמספר מאשר אותו.
 *
 * הסיבה אינה עודף תוכן — היא שכל רשת קורסת לעמודה אחת:
 *
 *   ‎.features-grid‎   8 כרטיסים × 211px  =  1,775px  (פעמיים בעמוד)
 *
 * כרטיס מאפיין הוא אייקון, כותרת ושתי שורות. ברוחב מלא של 343
 * פיקסלים הוא מקבל פי שניים מהשטח שהוא צריך, והמחיר הוא מסך
 * שלם לכל ארבעה כרטיסים.
 *
 * ---------------------------------------------------------------------------
 * למה הטוקן ולא הכלל
 *
 * ‎--card-min‎ כבר מזין את ‎features-grid‎, ‎info-grid‎
 * ו-‎package-options‎ גם יחד. דריסה שלו במיכל מטפלת בשלושתן
 * בשורה אחת, ובלי להתחרות בסגוליות של אף כלל קיים — בדיוק
 * הנוהל שנקבע ב-TEAM.md סעיף 5.
 *
 * 150px נבחר כך ששתי עמודות ייכנסו ב-343 פיקסלים עם המרווח
 * ביניהן, ולא יותר מכך: 170 היה נותן עמודה אחת בלבד במכשירים
 * צרים מ-375.
 *
 * ---------------------------------------------------------------------------
 * מה לא משתנה
 *
 * הדסקטופ. הדריסה יושבת כולה בתוך שאילתת מדיה, ומעל 560
 * פיקסלים ‎--card-min‎ נשאר 244 — הרשתות נראות בדיוק כפי שהן
 * נראות היום.
 */
@media (max-width: 560px) {
  .legacy #te-main { --card-min: 150px; }

  /*
   * הריפוד יורד יחד עם הרוחב.
   * ‎--sp-4‎ משני הצדדים בכרטיס של 165px משאיר 133px לטקסט —
   * צר מדי לעברית. ‎--sp-3‎ מחזיר 16 פיקסלים לתוכן.
   */
  .legacy #te-main .feature-card,
  .legacy #te-main .info-card {
    padding: var(--sp-3);
    gap: var(--sp-1);
  }

  /*
   * התיאור נחתך לשלוש שורות.
   *
   * בלי זה כרטיס אחד ארוך מותח את כל השורה שלו, ושתי העמודות
   * מאבדות את היתרון. ‎line-clamp‎ ולא חיתוך בבנייה: הטקסט
   * המלא נשאר ב-DOM לגוגל ולקורא מסך.
   */
  .legacy #te-main .feature-card p,
  .legacy #te-main .info-card p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    font-size: var(--fs-2xs);
    line-height: 1.5;
  }

  /* הכותרת מתקצרת בהתאם, כדי שלא תיקח שלוש שורות בעצמה */
  .legacy #te-main .feature-card h3,
  .legacy #te-main .feature-card h4,
  .legacy #te-main .info-card h3 {
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
  }

  /* האייקון קטן יחסית לכרטיס צר */
  .legacy #te-main .feature-icon {
    inline-size: 26px;
    block-size: 26px;
  }
}

/* ==========================================================================
   שני ליקויים שנראים כתקלה ולא כעיצוב
   ========================================================================== */

/*
 * 1. התיאור נחתך באמצע משפט.
 *
 * ---------------------------------------------------------------------------
 * מדדתי את ‎.features-grid‎ ב-976 פיקסלים: שמונה כרטיסים, כולם
 * בגובה 211, כל תיאור 95 פיקסלים — שלוש שורות. **שלושה מתוך
 * השמונה נחתכים.**
 *
 * והחיתוך שרירותי: תיאור בן 114 תווים נכנס, בן 116 נחתך.
 * ההפרש הוא שתי אותיות, והתוצאה על המסך היא "…" באמצע משפט —
 * שנקרא כטקסט שנשבר, לא כטקסט שקוצר בכוונה.
 *
 * ה-‎clamp: 3‎ מגיע מכלל גנרי על כל ‎[class$="-card"] p‎. הוא נכון
 * לכרטיס שבו אורכי הטקסט משתנים מאוד, ולא כאן: כל שמונת
 * התיאורים הם 104-127 תווים. שורה רביעית מכילה את כולם.
 *
 * העלות: 19 פיקסל לשורת כרטיסים, 38 לעמוד. תמורתם — אף משפט
 * לא נקטע. בנייד נשארות שלוש שורות, כי שם המקום באמת יקר.
 */
/*
 * תיקון שני, אחרי שהראשון נכשל.
 *
 * הגרסה הראשונה כאן העלתה את החיתוך מ-3 שורות ל-4. מדדתי ב-976
 * פיקסלים וקיבלתי אפס חיתוכים, ודיווחתי שתוקן.
 *
 * **זה היה שטחי.** ב-976 הרשת נותנת שלוש עמודות; ב-1162 היא
 * נותנת ארבע, הכרטיס יורד ל-254 פיקסלים, ושני תיאורים נחתכו שוב.
 * כל מספר שורות קבוע יישבר באיזשהו רוחב, כי הרוחב הוא זה שקובע
 * כמה תווים נכנסים בשורה. מדידה ברוחב אחד אינה מדידה.
 *
 * לכן אין כאן חיתוך בכלל. הרשת כבר משווה את גובה הכרטיסים בכל
 * שורה (‎align-items: stretch‎ הוא ברירת המחדל), כך שהתוצאה
 * אחידה בלי לקטוע אף משפט — בשום רוחב.
 *
 * הסיכון התאורטי הוא תיאור ארוך במיוחד שימתח שורה שלמה. נמדד:
 * שמונת התיאורים הם 104 עד 127 תווים. אין חריג.
 */
.legacy #te-main .feature-card p,
.legacy #te-main .info-card p {
  -webkit-line-clamp: none;
  line-clamp: none;
  display: block;
  overflow: visible;
}

/*
 * 2. "מה להביא" — נבדק ונדחה.
 *
 * ---------------------------------------------------------------------------
 * הרשימה בנויה על ‎columns: 248px 3‎, והיא נראית דלילה: 909
 * פיקסלים לרוחב עבור שמונה פריטים של מילה-שתיים, והעמודה
 * השלישית נגמרת מוקדם (3+3+2).
 *
 * ניסיתי להחליף אותה ברשת ‎auto-fit minmax(170px)‎. **מדדתי
 * בהזרקה לפני שבניתי, והתוצאה הייתה הפוכה:**
 *
 *     גובה הרשימה   138px  →  306px
 *     גובה הקופסה   195px  →  363px
 *
 * הסיבה: ב-‎columns‎ כל פריט תופס שורה אחת בת 24 פיקסלים.
 * בתא רשת ברוחב ~215 הטקסט של הפריט נשבר לשתי שורות, וכל
 * שורת רשת גדלה פי שלושה. ארבע עמודות במקום שלוש לא פיצו על כך.
 *
 * כלומר הקופסה נראית דלילה אבל היא **יעילה בגובה**, והחלפתה
 * הייתה מוסיפה 168 פיקסלים לעמוד שאנחנו מנסים לקצר. הכלל הוסר.
 *
 * אם יוחלט לטפל בזה בעתיד — הכיוון הוא להצר את **הקופסה**, לא
 * להוסיף עמודות: מיכל צר יותר לרשימה של פריטים קצרים.
 */

/* ==========================================================================
   כרטיס מאפיין — האייקון עולה לשורת הכותרת
   ========================================================================== */

/*
 * "סתם גדול ומלא רווח ומלא שטח מבוזבז" — וזה מדיד.
 *
 * ---------------------------------------------------------------------------
 * פירוק כרטיס בן 256 פיקסלים ברוחב 254:
 *
 *     ריפוד      16 + 16   =  32
 *     אייקון     34                ← שורה שלמה, לבדו
 *     מרווחים    8 × 2     =  16
 *     כותרת      32
 *     תיאור      118
 *
 * האייקון תופס **שורה משלו** ברוחב מלא של הכרטיס, ומתחתיו
 * מרווח. 42 פיקסלים — 16% מהכרטיס — עבור סמל דקורטיבי ברוחב
 * 34. זה מקור "השטח המבוזבז": לא הטקסט ולא הריפוד, אלא פריט
 * שנפרס כבלוק במקום כתו.
 *
 * ---------------------------------------------------------------------------
 * הפתרון: שתי עמודות, לא שתי שורות
 *
 * האייקון והכותרת עוברים לאותה שורה — אייקון מימין, כותרת
 * לצידו, תיאור מתחת לשניהם על כל הרוחב. זה גם חוסך את הגובה
 * וגם קורא נכון יותר: האייקון **מתאר את הכותרת**, ולכן מקומו
 * לידה ולא מעליה.
 *
 * ‎grid-template-areas‎ ולא ‎flex‎: התיאור חייב להימתח מתחת
 * לשתי העמודות, ולא להסתדר בטור השלישי.
 */
.legacy #te-main .feature-card,
.legacy #te-main .info-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon title"
    "body body";
  align-items: center;
  column-gap: var(--sp-2);
  row-gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
}

/*
 * ‼️ **הריפוד הוא מה שהפך את העיגול לאליפסה.**
 *
 * שי, 29.09.2026: "נראה שהלוגו לא נמצא במרכז העיגול זה בכוונה?
 * אם לא לתקן".
 *
 * מה שנמדד בדפדפן: העיגול יצא **32x30** ולא 30x30, והגליף
 * ישב מחוץ למרכז.
 *
 * המקור: ב-legacy-patterns.css יש כלל גורף —
 *   .legacy :is([class$="-card"], …) > :not(img):not([class*="image"])
 *   { padding: var(--sp-4) }
 * כלומר **כל ילד ישיר של כרטיס שאינו תמונה מקבל ריפוד של
 * תוכן**. ‎.feature-icon‎ הוא ילד ישיר של ‎.feature-card‎, ולכן
 * נתפס בו.
 *
 * ועם ‎box-sizing: border-box‎ הריפוד האופקי (16px משני הצדדים)
 * מסתכם ב-32 פיקסל — ולכן הרוחב **אינו יכול** לרדת ל-30
 * שהוגדר כאן. הגובה כן ירד. התוצאה אליפסה.
 *
 * ‼️ legacy-patterns.css הוא הקובץ של איגור ולא נגעתי בו.
 * ‎padding: 0‎ כאן הוא השלמה של הכלל של הרכיב שלי, והסגוליות
 * גבוהה יותר בזכות ה-id.
 */
.legacy #te-main .feature-card > .feature-icon,
.legacy #te-main .info-card > [class*="icon"] {
  grid-area: icon;
  inline-size: 30px;
  block-size: 30px;
  margin: 0;
  padding: 0;
  display: grid;
  place-items: center;
}
.legacy #te-main .feature-card > .feature-title,
.legacy #te-main .feature-card > h3,
.legacy #te-main .feature-card > h4,
.legacy #te-main .info-card > h3,
.legacy #te-main .info-card > h4 {
  grid-area: title;
  margin: 0;
  align-self: center;
}
.legacy #te-main .feature-card > p,
.legacy #te-main .info-card > p {
  grid-area: body;
  margin: 0;
}

/*
 * כותרת בת שתי מילים לא צריכה 32 פיקסלים של גובה שורה.
 * ‎--lh-snug‎ מהדק אותה בלי לפגוע בקריאות בעברית.
 */
.legacy #te-main .feature-card > .feature-title,
.legacy #te-main .feature-card > h3,
.legacy #te-main .info-card > h3 {
  line-height: var(--lh-snug);
}

/*
 * תצלום בתוך גוף התוכן.
 *
 * ---------------------------------------------------------------------------
 * 18 מתוך 25 עמודי האטרקציה בפוקט מחזיקים אפס תצלומים בגוף —
 * כולם יושבים ברצועת גלריה בתחתית, אחרי שהגולש כבר גלל דרך קיר
 * טקסט. תצלום של חוף באטוק שווה הרבה יותר ליד הפסקה שמתארת
 * אותו מאשר בקרוסלה בסוף.
 *
 * ‎figure‎ ולא ‎img‎ חשוף: הכיתוב הוא חלק מהמידע ולא קישוט,
 * והוא נקשר לתמונה גם בקורא מסך.
 *
 * ‎aspect-ratio‎ קבוע כדי שתצלומים בגדלים שונים לא ייצרו קפיצות
 * גובה שונות לאורך העמוד. ‎img-dimensions.js‎ ממלא ‎width‎
 * ו-‎height‎ ולכן אין קפיצת פריסה בטעינה.
 */
/*
 * תצלום בתוך גוף הכתבה.
 *
 * ---------------------------------------------------------------------------
 * הגרסה הראשונה נתנה לתצלום את כל רוחב העמודה. ב-16:9 זה יוצא
 * מסך שלם לכל תמונה, ארבע תמונות בעמוד הן ארבע גלילות מיותרות,
 * והתצלום מפסיק להיות איור לטקסט והופך לחוצץ שמפריד בין
 * פסקאות. שי ראה את זה מיד וקרא לזה "ענקיות" — בצדק.
 *
 * לכן: ברוחב מסך נוח התצלום **צף לצד הטקסט** והטקסט גולש סביבו.
 * הוא משלים את מה שכתוב במקום לעצור אותו, והעמוד מתקצר. מתחת
 * לזה אין מספיק רוחב לשתי עמודות, ואז הוא חוזר להיות בלוק —
 * אבל עם תקרת רוחב, כדי שלא יחזור להיות מסך שלם.
 * ------------------------------------------------------------------------- */
.legacy #te-main figure.attr-figure {
  margin: var(--sp-4) auto var(--sp-5);
  max-inline-size: 30rem;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-surface-raised);
  border: 1px solid var(--border);
}
@media (min-width: 900px) {
  .legacy #te-main figure.attr-figure {
    float: inline-end;
    inline-size: 44%;
    max-inline-size: 24rem;
    margin: var(--sp-1) 0 var(--sp-3) var(--sp-4);
  }
  /* הטקסט גולש סביב התצלום, אבל כותרת חדשה פותחת קטע חדש
     ולכן היא מתחילה מתחתיו ולא לצידו. */
  .legacy #te-main .attr-figure + h2,
  .legacy #te-main .attr-figure ~ h2,
  .legacy #te-main .attr-figure ~ h3 { clear: both; }
}
.legacy #te-main figure.attr-figure img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}
.legacy #te-main figure.attr-figure figcaption {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  color: var(--text-muted);
  /* פס מבטא בקצה הפתיחה, כמו בשאר הרכיבים שלנו */
  border-inline-start: 3px solid var(--c-sea-400);
}
@media (max-width: 560px) {
  .legacy #te-main figure.attr-figure {
    margin: var(--sp-3) 0 var(--sp-4);
  }
  .legacy #te-main figure.attr-figure img { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------------------------
 * "מה כלול / מה לא כלול" — פעילויות פטאיה
 *
 * שתי עמודות זו מול זו, כי הערך של הרכיב הוא בהשוואה ולא
 * ברשימה. הסימון הוא צבע ותו בפתח השורה ולא אייקון בתמונה:
 * הוא נטען מיד, הוא מתכוונן עם גודל הטקסט, והוא נשאר קריא
 * גם למי שגולש בניגודיות גבוהה.
 *
 * הסלקטור **אינו** מקודם ב-`.legacy #te-main`, בשונה מרוב
 * הקובץ הזה. עמודי הפעילות של פטאיה נבנים אצלנו ולא נשאבים
 * מוורדפרס, ולכן הם `main#main` בלי `.legacy` — והקידומת
 * הרגילה פשוט לא תופסת שם. הרכיב נבנה, נראה נכון במבנה, ולא
 * קיבל אף כלל עיצוב.
 * ------------------------------------------------------------------------ */
.pa-incl__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--sp-4);
}
.pa-incl__col {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-surface-raised);
  border: 1px solid var(--border);
  /* פס המבטא נושא את המשמעות; הצבע לבדו לא מספיק */
  border-inline-start: 4px solid var(--border);
}
.pa-incl__col--yes { border-inline-start-color: var(--c-sea-500); }
.pa-incl__col--no  { border-inline-start-color: var(--c-sand-500, #c9a227); }
.pa-incl__col h3 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-md);
}
.pa-incl__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pa-incl__col li {
  position: relative;
  padding-inline-start: 1.5em;
  margin-block-end: var(--sp-2);
  line-height: var(--lh-snug);
}
.pa-incl__col li::before {
  position: absolute;
  inset-inline-start: 0;
  font-weight: 700;
}
.pa-incl__col--yes li::before { content: "✓"; color: var(--c-sea-600, #0b6e7a); }
.pa-incl__col--no  li::before { content: "✕"; color: var(--text-muted); }

/* שעות הפעילות, מתחת לשתי העמודות של "מה כלול" */
.pa-incl__hours {
  margin-block-start: var(--sp-3);
  margin-block-end: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ---------------------------------------------------------------------------
 * הודעה שמשנה החלטה — עונה סגורה, שינוי מועד, תנאי שמבטל הזמנה.
 *
 * לא אזהרה אדומה ולא באנר שיווקי: פס מבטא ורקע מורם, ברמת בלטות
 * שאומרת "תקרא את זה לפני שתזמין" ולא "משהו השתבש".
 * ------------------------------------------------------------------------ */
.legacy #te-main .attr-notice,
.attr-notice {
  padding: var(--sp-4);
  border-radius: var(--r-md);
  background: var(--c-surface-raised);
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--c-sea-500);
}
.legacy #te-main .attr-notice > strong,
.attr-notice > strong {
  display: block;
  margin-block-end: var(--sp-2);
  font-size: var(--fs-md);
}
.legacy #te-main .attr-notice p:last-child,
.attr-notice p:last-child { margin-block-end: 0; }

/* ==========================================================================
   כרטיס כרטיסים — ‎.ticket-card‎
   --------------------------------------------------------------------------
   ‼️ הרכיב הזה לא היה מעוצב כלל.

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

   מבנית ‎.ticket-card‎ זהה ל-‎.package-card‎ — תמונה למעלה, תוכן
   מתחת, תג "הכי פופולרי" על הקצה — ולכן הוא מקבל את אותם כללים
   במקום סט חדש. הוספת סלקטור לכלל קיים היא גם פחות קוד וגם
   ערובה לכך שהשניים לא ייפרדו כששומרים אותם בעתיד.
   ========================================================================== */
.legacy #te-main .tickets-grid,
.legacy #te-main .ticket-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: var(--sp-4);
  margin-block: var(--sp-5);
}

.legacy #te-main .ticket-card {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--c-surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: none;
  transition: border-color var(--dur-mid) var(--ease),
              transform var(--dur-mid) var(--ease);
}
.legacy #te-main .ticket-card:hover {
  border-color: var(--c-sea-400);
  transform: translateY(-2px);
}

/* התמונה — יחס קבוע, כמו בכרטיס המסלול */
.legacy #te-main .ticket-card .ticket-image img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
  transition: transform var(--dur-mid) var(--ease);
}
.legacy #te-main .ticket-card:hover .ticket-image img { transform: scale(1.04); }

.legacy #te-main .ticket-card .ticket-content {
  display: grid;
  align-content: start;
  gap: var(--sp-2);
  padding: var(--sp-4);
}

.legacy #te-main .ticket-card .ticket-type,
.legacy #te-main .ticket-card .ticket-header {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 700;
}
.legacy #te-main .ticket-card .ticket-includes {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

/* המחיר — אותה בליטות כמו ב-‎.price-amount‎, כדי שהשורה תיסרק */
.legacy #te-main .ticket-card .ticket-price {
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--c-gold-600, #a8761a);
  line-height: 1.1;
}
.legacy #te-main .ticket-card .ticket-currency { font-size: var(--fs-md); }

/* מחיר מלא מחוק — אותו טיפול כמו ‎.price-was‎ */
.legacy #te-main .ticket-card .ticket-original {
  margin-inline-start: var(--sp-2);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: line-through;
}

/* ==========================================================================
   ‼️ גודל אחיד לכרטיס החבילה — בכל 35 העמודים
   --------------------------------------------------------------------------
   שי: "חלק מכרטיסי האטרקציות גדולים חלק קטנים… אי אפשר שבכל
   עמוד יהיה משהו אחר. אבל גם צריך להתחשב בזה שיכול להיות
   שבחלק מהעמודים יהיה יותר תוכן בכרטיס וחלק פחות."

   ---------------------------------------------------------------------
   מה שנמדד

   אותו רכיב ‎.package-card‎ יושב ב-35 עמודים בתוך **ארבעה מיכלים
   שונים**, ולכל אחד חוקי רשת משלו:

     .package-options   minmax(min(100%, 290px), 1fr)     נמתח
     .pricing-cards     minmax(min(100%, 232px), 300px)   מכווץ וממורכז
     .package-cards     —
     (בלי מחלקה)        —

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

   ‼️ ‎.pricing-cards‎ מעולם לא תוכנן לכרטיס הזה. הוא נכתב ל-
   ‎.price-card‎ — שם, מחיר ותיאור, בלי תצלום. להכניס לתוכו כרטיס
   עם יחס תמונה 16:10 ורשימת תכונות זה להכניס רכיב לרשת של רכיב
   אחר, והתוצאה נראית שבורה כי היא כן שבורה.

   ---------------------------------------------------------------------
   ההכרעה: הכרטיס קובע את הרשת, לא המיכל

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

   למה טווח סגור ‎(260–340)‎ ולא ‎1fr‎: עם ‎1fr‎ הכרטיס נמתח לפי
   כמה כרטיסים יש בעמוד, כלומר עמוד עם שניים נותן כרטיסים
   כפולים בגודלם מעמוד עם ארבעה. זה בדיוק מה ששי מתאר. תקרה
   קשיחה נותנת אותו רוחב בכל עמוד, וריכוז מטפל בשארית.

   ---------------------------------------------------------------------
   והאיזון שהוא ביקש

   אחידות **מסגרת**, לא אחידות **תוכן**:

     רוחב        זהה בכל עמוד            (260–340)
     תמונה       יחס 16:10 קבוע          לא נמתחת לפי הטקסט
     כותרת       עד שתי שורות            שם ארוך לא דוחף את הכל
     תכונות      חופשי                   כאן התוכן מותר להשתנות
     כפתור       תמיד בתחתית             ‎margin-block-start: auto‎

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

   וכל הכרטיסים באותה שורה יוצאים באותו גובה — ‎stretch‎ הוא
   ברירת המחדל של רשת, והכרטיס כבר ‎flex column‎.
   ========================================================================== */

.legacy #te-main .package-options,
.legacy #te-main .package-cards,
.legacy #te-main :is(.pricing-cards, .cards, .grid):has(> .package-card) {
  display: grid;
  /*
   * ‼️ רוחב קבוע, לא טווח.
   *
   * הגרסה הראשונה הייתה ‎minmax(260px, 340px)‎, ובעמוד מפוצל
   * (‎.attr-split__main‎ ברוחב 689) שני טורים של 340 ועוד מרווח
   * 16 יוצאים 696. **חסרו שבעה פיקסלים**, ו-‎auto-fit‎ ויתר על
   * הטור השני — שני כרטיסים נערמו זה על זה בזמן שיש מקום לשניהם.
   *
   * ועם ‎1fr‎ במקום תקרה הבעיה הפוכה: בעמוד רחב נכנסים חמישה
   * טורים של 275, וזה שוב רוחב אחר בעמוד אחר — בדיוק מה ששי
   * ביקש לסגור.
   *
   * 320 קבוע נכנס פעמיים ב-689 ושלוש פעמים ב-1120, והכרטיס יוצא
   * **בדיוק אותו רוחב בכל עמוד**. ‎min(100%, 320px)‎ מאפשר לו
   * להתכווץ במיכל צר יותר במקום לגלוש.
   */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 320px));
  justify-content: center;
  align-items: stretch;
  gap: var(--sp-4);
  margin-block: var(--sp-5);
  /* מקום לתווית "הכי פופולרי" שיושבת על הקצה העליון */
  padding-block-start: 10px;
}

/*
 * ‎--card-w‎ של ‎.pricing-cards‎ מנוטרל כשיש בו כרטיס חבילה.
 * בלי זה המשתנה הישן ממשיך להזין את ה-‎minmax‎ שלו.
 */
.legacy #te-main .pricing-cards:has(> .package-card) { --card-w: 320px; }

.legacy #te-main .package-card {
  block-size: 100%;
  min-inline-size: 0;
}

/* כותרת עד שתי שורות — שם ארוך לא מזיז את שאר הכרטיס */
.legacy #te-main .package-card :is(h3, .package-title) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-block-size: calc(2 * 1.25em);
}

/* התוכן נמתח, והכפתור נדחף לתחתית — זה מה שמיישר את השורה */
.legacy #te-main .package-card .package-content {
  flex: 1 1 auto;
  min-block-size: 0;
}
.legacy #te-main .package-card :is(.btn, .package-cta, a[href*="wa.me"]) {
  margin-block-start: auto;
}

/*
 * ‼️ מובייל: טור אחד ברוחב מלא.
 *
 * תקרה של 340 פיקסלים על מסך 375 משאירה שוליים לא אחידים משני
 * הצדדים אחרי הריפוד, והכרטיס נראה צף. מתחת ל-560 הכרטיס תופס
 * את הרוחב שיש.
 */
@media (max-width: 560px) {
  .legacy #te-main .package-options,
  .legacy #te-main .package-cards,
  .legacy #te-main :is(.pricing-cards, .cards, .grid):has(> .package-card) {
    grid-template-columns: 1fr;
  }
}

/*
 * ‼️ הקשר הפיצול — ‎.attr-split__main‎ — דורס בסגוליות גבוהה יותר.
 *
 * ‎/איי-סימילאן‎ המשיך לצאת 336 ולא 320 אחרי התיקון, ובדיקה
 * בדפדפן הראתה למה: בתוך ‎@media (min-width: 1080px)‎ יושב
 *
 *   .legacy #te-main .attr-split__main .package-options   (1,3,0)
 *
 * והכלל המאוחד שלי הוא ‎(1,2,0)‎. סגוליות גוברת על סדר, ושאילתת
 * מדיה אינה מוסיפה סגוליות — כלומר הכלל שלי לא היה יכול לנצח
 * שם לעולם, בלי קשר למיקומו בקובץ.
 *
 * ‼️ ועל ‎.pricing-cards‎ בתוך פיצול יש כלל שקובע ‎--card-w: 205px‎,
 * וההערה שמעליו כתובה מראש:
 *
 *   "הוא סובל 205 פיקסלים, וכרטיס תצלום לא היה סובל"
 *
 * מי שכתב אותו ידע בדיוק מה יקרה, ואז הוכנס לשם כרטיס תצלום.
 * ‎:has(> .package-card)‎ מפריד בין שני המקרים: כרטיס טקסט נשאר
 * על 205, כרטיס תצלום מקבל 320.
 */
@media (min-width: 1080px) {
  .legacy #te-main .attr-split__main .package-options,
  .legacy #te-main .attr-split__main .package-cards,
  .legacy #te-main .attr-split__main :is(.pricing-cards, .cards, .grid):has(> .package-card) {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 320px));
    justify-content: center;
    gap: var(--sp-4);
  }
}

/* ==========================================================================
   ‼️ בורר מסלול — הרכיב ששי הצביע עליו
   --------------------------------------------------------------------------
   שי, 24.9.2026, על ‎/איי-סימילאן‎:

     "יש 2 מסלולים, יש לייזי ויש רגיל (טיול מואחר ומוקדם יותר)
      ויש כפתורים (**שלא נראים טוב וצריך לסדר להם את העיצוב**)
      שמחליפים את מסלולי הטיול שהלקוח רואה"

   ---------------------------------------------------------------------
   מה נמדד

   ‎.tab-btn‎ קיים ב**עמוד אחד** באתר, ויש לו **אפס כללי CSS**.
   כלומר זה אינו רכיב שעוצב גרוע — זה שני ‎<button>‎ עירומים עם
   ברירת המחדל של הדפדפן, בתוך עמוד שכל השאר בו מעוצב.

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

   ---------------------------------------------------------------------
   ‼️ ולמה זה נכתב כרכיב ולא כתיקון לעמוד אחד

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

   לכן: מחלקות קיימות, עיצוב חדש. העמוד הקיים מקבל את העיצוב
   בלי לגעת ב-HTML שלו, ו-23 העמודים הבאים מקבלים אותו בחינם.
   ========================================================================== */

.legacy #te-main .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  justify-content: center;
  margin-block: var(--sp-5) var(--sp-4);
  padding-block-end: var(--sp-3);
  border-block-end: 1px solid var(--border);
}

.legacy #te-main .tab-btn {
  /*
   * יעד מגע 48 פיקסלים — אותו חוזה של כל כפתור באתר.
   * הגרסה הקודמת הייתה ברירת המחדל של הדפדפן, כלומר כ-21
   * פיקסלים גובה.
   */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 48px;
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--c-surface-raised);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}

.legacy #te-main .tab-btn:hover {
  border-color: var(--c-sea-400);
  color: var(--c-navy-900);
}

/*
 * ‼️ הנבחר נבדל בצבע **ובמשקל**, לא רק בצבע.
 *
 * בורר שמסמן את הפעיל בגוון בלבד אינו נגיש למי שאינו מבחין
 * בצבעים, והוא גם פחות ברור לכולם. הזהב הוא צבע הפעולה של
 * האתר, והוא כבר משמש בכפתור ההזמנה.
 */
.legacy #te-main .tab-btn.active,
.legacy #te-main .tab-btn[aria-selected="true"] {
  background: var(--c-gold-500);
  border-color: var(--c-gold-500);
  color: var(--c-navy-950);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.legacy #te-main .tab-btn:focus-visible {
  outline: 2px solid var(--c-sea-600);
  outline-offset: 2px;
}

/*
 * התוכן: מוסתר עד שנבחר.
 *
 * ‼️ ‎display: none‎ ולא ‎visibility‎ — תוכן מוסתר שתופס מקום
 * משאיר חור בעמוד, ותוכן שנשאר בזרימה נקרא על ידי קורא מסך
 * גם כשהוא לא נבחר.
 */
.legacy #te-main .tab-content { display: none; }
.legacy #te-main .tab-content.active { display: block; }

/*
 * ‼️ בלי JavaScript — הכול מוצג.
 *
 * אם הסקריפט לא נטען, ‎display: none‎ היה מסתיר את המחירים
 * לגמרי. זה גרוע מבורר שלא עובד: הגולש רואה עמוד בלי מחיר.
 *
 * ‎.js-tabs‎ נוספת על ידי הסקריפט עצמו, ולכן ההסתרה חלה רק
 * כשיש מי שיבטל אותה.
 */
.legacy #te-main .tab-content:not(.active) { display: none; }
html:not(.js-tabs) .legacy #te-main .tab-content { display: block; }

/*
 * ROUTE_SWITCH_SPAN
 * --------------------------------------------------------------------------
 * ‼️ **זו הסיבה האמיתית שהכרטיסים ירדו אחד מתחת לשני.**
 *
 * המבנה בפועל:
 *   .package-options   display:grid  (689px, שתי עמודות)
 *     └ .route-switch  ← **פריט רשת**, ולכן עמודה אחת: 360px
 *         └ .tab-content
 *             └ .package-card ×2
 *
 * ל-.route-switch לא היה CSS כלל. הוא ירש רוחב של עמודה אחת,
 * וכל מה שבתוכו נדחס ל-360 פיקסל — ולכן שתי עמודות לא נכנסו
 * גם אחרי שהלשונית עצמה קיבלה רשת.
 *
 * ‼️ הלקח: מדדתי קודם את הלשונית וראיתי display:block, והנחתי
 * שזו הבעיה. הבעיה הייתה **שכבה אחת מעל** — הרוחב הזמין, לא
 * סוג התצוגה. מדידת שרשרת ההורים היא שסגרה את זה.
 */
.legacy #te-main .package-options > .route-switch {
  grid-column: 1 / -1;
}

/*
 * TAB_CARD_GRID
 * --------------------------------------------------------------------------
 * ‼️ כרטיס בתוך לשונית קיבל בלוק ברוחב מלא, ולכן הכרטיסים ירדו
 * אחד מתחת לשני — בזמן שאותם כרטיסים בדיוק תחת .package-options
 * יושבים שניים בשורה. שי הצביע על ההבדל.
 *
 * הרשת כאן זהה לזו של .package-options, ובכוונה: אותו רכיב
 * אמור להיראות אותו דבר בלי קשר למי עוטף אותו.
 *
 * ‼️ :has(> .package-card) ולא .tab-content לבדה — המחלקה
 * משמשת גם לטפסי הזמנה, ורשת עליהם הייתה שוברת אותם.
 */
.legacy #te-main .tab-content.active:has(> .package-card) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: var(--sp-4);
  margin-block: var(--sp-5);
  justify-content: center;
}

/* בלי JavaScript כל הלשוניות פתוחות — והן צריכות אותה רשת */
html:not(.js-tabs) .legacy #te-main .tab-content:has(> .package-card) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: var(--sp-4);
  margin-block: var(--sp-5);
}

@media (max-width: 560px) {
  .legacy #te-main .tabs { gap: var(--sp-1); }
  .legacy #te-main .tab-btn {
    flex: 1 1 auto;
    padding-inline: var(--sp-3);
    font-size: var(--fs-sm);
  }
}

/* ==========================================================================
   ‼️ שתי תקלות ששי צילם בעמוד ספלאש ג'ונגל
   --------------------------------------------------------------------------
   שי, 24.9.2026: *"הטופס לא נגלל, הכרטיס לא במקום, עוד המון בעיות."*
   ========================================================================== */

/*
 * ‼️ 1. כרטיס בודד ברשת שתוכננה לרבים
 *
 * ‎.pricing-cards‎ ב-‎attr-split__main‎ מקבל
 * ‎repeat(auto-fit, minmax(min(100%,180px), 205px))‎ — נכון לחלוטין
 * לארבעה כרטיסים, ושובר עמוד עם אחד.
 *
 * מה שקורה בפועל: ‎auto-fit‎ יוצר מסילה אחת של 205 פיקסלים בתוך
 * עמודה של 689, והשאר לובן. **הכרטיס נראה כאילו נפל מהעמוד**,
 * וזה בדיוק מה שנראה בצילום.
 *
 * ‼️ ולמה זה לא נתפס: כל עמודי האטרקציות שבדקנו עד היום החזיקו
 * שניים עד עשרה כרטיסים. **מוצר עם סוג כרטיס אחד הוא מצב תקין
 * ונפוץ — 11 מתוך 81 העמודים** (מדידת בוריס) — והעיצוב מעולם לא
 * נבדק מולו.
 *
 * הרשת עצמה לא משתנה; רק כשיש **ילד יחיד** היא הופכת לטור אחד
 * במרכז, ברוחב שנראה כמו החלטה ולא כמו שארית.
 */
.pricing-cards:has(> :only-child),
.package-options:has(> :only-child),
.tickets-grid:has(> :only-child),
.ticket-options:has(> :only-child) {
  grid-template-columns: minmax(0, 360px);
  justify-content: center;
}

@media (min-width: 1080px) {
  .legacy #te-main .attr-split__main .pricing-cards:has(> :only-child) {
    /*
     * ‼️ סגוליות מפורשת, כי הכלל למעלה מפסיד.
     *
     * ‎.legacy #te-main .attr-split__main .pricing-cards‎ הוא (1,3,0)
     * ו-‎.pricing-cards:has(...)‎ הוא (0,2,0). שאילתת מדיה אינה
     * מוסיפה סגוליות — זו אותה מלכודת שעלתה לי סבב שלם היום על
     * תיקון רשת אחר.
     */
    grid-template-columns: minmax(0, 360px);
    justify-content: center;
  }
}

/*
 * ‼️ 2. הטופס הדביק שאי אפשר לגלול
 *
 * ‎.attr-split__side‎ הוא ‎position: sticky‎ עם קיזוז לכותרת. זה
 * עובד כל עוד הטופס **נמוך מהמסך**.
 *
 * כשהוא גבוה יותר — וטופס עם אטרקציה, כרטיס, מבוגרים, ילדים,
 * תאריך וכפתור הוא גבוה — **התחתית שלו יוצאת מהמסך ואין דרך
 * להגיע אליה.** הדבק מקבע את הראש, הגלילה מזיזה את העמוד ולא
 * את הטופס, וכפתור השליחה נשאר מתחת לקו.
 *
 * ‼️ הלקוח רואה טופס שאי אפשר לשלוח. זה לא פגם עיצובי — זו
 * המרה אבודה, על העמוד שכל תפקידו להמיר.
 *
 * התיקון: הצד עצמו מקבל גובה מרבי וגלילה משלו. כשהוא נמוך
 * מהמסך שום דבר לא משתנה.
 */
@media (min-width: 1080px) {
  .attr-split__side {
    max-block-size: calc(100dvh - var(--header-h, 66px) - var(--sp-6));
    overflow-y: auto;
    /*
     * ‎overscroll-behavior‎ מונע מהגלילה בתוך הטופס להמשיך ולגלול
     * את העמוד כשמגיעים לסוף — קפיצה שנקראת כתקלה.
     */
    overscroll-behavior: contain;

    /*
     * ‼️ הריפוד אינו קוסמטי — בלעדיו הצל נחתך לריבוע.
     *
     * **התיקון שלי יצר את התקלה הבאה.** שי צילם *"מתחת לטופס
     * וקצת בצד שלו צל, מים ריבועים שכנראה מוחזקים"* — והמקור הוא
     * ‎overflow-y: auto‎ שהוספתי בשורות שמעל.
     *
     * לכרטיס יש צל רך שיוצא ממנו:
     *
     *     0 24px 60px -28px rgba(0,0,0,.85)
     *
     * **מיכל שגולל חותך בגבול תיבת הריפוד שלו.** בלי ריפוד הצל
     * נקטע בדיוק בקצה — ומה שהיה מעבר רך נראה כמו מלבן אפור עם
     * שפה חדה. זה בדיוק מה שנראה בצילום.
     *
     * ‼️ וההכללה: **‎overflow‎ אינו רק גלילה. הוא גם מספריים.**
     * כל אלמנט שמקבל אותו מתחיל לחתוך צללים, טולטיפים ותפריטים
     * של צאצאיו — ואף אחד מהם לא זורק שגיאה. פתרתי בעיית גלילה
     * ויצרתי בעיית תצוגה, על אותו אלמנט, באותה שורה.
     *
     * הריפוד נותן לצל את המקום שהוא צריך בתוך תיבת החיתוך.
     */
    padding-block: 2px calc(var(--sp-6) + 24px);
    padding-inline: var(--sp-2);
    /* שומר מקום לפס הגלילה כדי שלא יקפוץ כשהתוכן גדל */
    scrollbar-gutter: stable;
  }
}

/*
 * ‼️ הכלל לכרטיס בודד — נכתב מחדש אחרי שדנה הוכיחה שהוא מפסיד.
 *
 * היא שאלה את הדפדפן מי מנצח וקיבלה:
 *
 *     מנצח   .legacy #te-main :is(.pricing-cards,…):has(> .package-card)
 *            repeat(auto-fit, minmax(min(100%,320px), 320px))    (1,3,0)
 *
 *     מפסיד  .pricing-cards:has(> :only-child)
 *            minmax(0, 360px)                                    (0,2,0)
 *
 * התוצאה בפועל: ‎grid-template-columns: 320px 0px 0px‎ — כרטיס
 * צמוד לקצה ולידו 370 פיקסל לבן.
 *
 * ‼️ ושתי טעויות שלי, לא אחת:
 *
 * **1. סגוליות.** ‎#te-main‎ קיים רק לאחד מהם, וזה מה שהכריע —
 * לא ‎:has()‎, שלוקח את הסגוליות של הארגומנט ושווה בשניהם.
 *
 * **2. הקשר שגוי.** תליתי את הגרסה הרחבה ב-‎.attr-split__main‎,
 * ודנה מדדה את שרשרת ההורים: **סקשן המחירים יושב מחוץ לפיצול**,
 * ישירות תחת ‎#te-main‎. הכלל לא הופיע כלל ברשימת התואמים.
 *
 * כלומר כתבתי שני כללים, אחד הפסיד והשני לא חל — **ושניהם נראו
 * נכונים בקריאה.** רק מדידה בדפדפן הראתה את זה.
 */
.legacy #te-main :is(.pricing-cards, .package-options, .package-cards,
                     .tickets-grid, .ticket-options):has(> :only-child) {
  grid-template-columns: minmax(0, 360px);
  justify-content: center;
}

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

/*
 * המשפט מעל הרשת — הוא זה שמונע את אי-ההבנה.
 *
 * בלעדיו לקוח שרואה ארבעה מחירים מניח שהוא בוחר בין ארבעה
 * טיולים. הוא בוחר בין ארבע דרכים להגיע לאותו טיול.
 */
.boat-lede {
  margin: 0 0 var(--sp-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
  text-align: center;
  max-inline-size: 58ch;
  margin-inline: auto;
}

.boat-note {
  margin: var(--sp-2) 0 0;
  padding-block-start: var(--sp-2);
  border-block-start: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  display: grid;
  gap: 2px;
  font-size: var(--fs-3xs);
  line-height: 1.45;
  text-align: start;
}

/*
 * ‼️ היתרון והמגבלה נבדלים בצבע ולא רק בסדר.
 *
 * שתי שורות אפורות זו מתחת לזו נקראות כמשפט אחד, והמגבלה
 * נבלעת. לקוח שלא קרא אותה הוא לקוח שיתלונן על הים הסוער.
 */
.boat-note__good {
  color: var(--text);
  font-weight: 500;
}

.boat-note__good::before {
  content: "✓ ";
  color: var(--gold, #d4a94a);
}

.boat-note__note {
  color: var(--text-muted);
}

.boat-note__note::before {
  content: "· ";
}

/* בכרטיס כהה הטקסט מתהפך יחד עם הכרטיס */
.price-card--pick .boat-note__good,
.booking__inner .boat-note__good { color: inherit; }

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

   --------------------------------------------------------------------------
   מה שמדדתי לפני שכתבתי — וזה מסביר למה שום דבר לא נראה אותו דבר

   על 69 עמודי מוצר:

       4 מחלקות כרטיס    package-card · price-card · pricing-card · ticket-card
       7 מכלים           pricing-cards · package-options · package-cards
                         pricing-grid · tickets-grid · ticket-options · routes-grid
       5 מבנים פנימיים   עם תמונה, בלי, עם מחיר מחוק, בלי מחיר

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

   --------------------------------------------------------------------------
   ‼️ למה לא לאחד שמות מחלקה במקום

   זו הייתה התשובה הנקייה, והיא מסוכנת: ארבע המחלקות מוזכרות
   ב-‎ticket-picker‎, ב-‎extract-tickets‎, ב-‎card-images‎, בסכמה
   ובשלושה מחוללים. שינוי שם דורש שכל אחד מהם ישתנה **באותה
   ריצה** — וכבר ראינו היום מה קורה כששלושה קבצים מחזיקים רשימה
   חלקית: כל אחד מדווח אפס בלי שגיאה.

   כאן ‎:is()‎ מאחד את ההתנהגות בלי לגעת בשמות. שם המחלקה נשאר
   מה שכל הכלים מכירים; מה שמשתנה הוא איך הוא נראה.

   --------------------------------------------------------------------------
   הסגוליות, והיא לא מקרית

   ‎.legacy #te-main‎ הוא (1,2,0), והכללים הישנים יושבים שם. כלל
   בלי ‎#te-main‎ מפסיד להם — זה קרה לי היום פעמיים באותו קובץ.
   הבלוק הזה נמצא **בסוף הקובץ** ובאותה סגוליות, ולכן הוא מכריע.
   ========================================================================== */

:root {
  /* ‼️ רוחב הכרטיס — מספר אחד, וכל השאר נגזר ממנו */
  --te-card-w: 320px;
  --te-card-media: 62%;      /* יחס גובה התצלום */
}

/* -------------------------------------------------- הרשת */

.legacy #te-main :is(.pricing-cards, .package-options, .package-cards,
                     .pricing-grid, .tickets-grid, .ticket-options, .routes-grid) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--te-card-w)), var(--te-card-w)));
  justify-content: center;
  gap: var(--sp-3);
  align-items: stretch;          /* כל הכרטיסים באותו גובה */
  padding: 0;
  margin-inline: auto;
  list-style: none;
}

/*
 * ‼️ כרטיס בודד — אותו רוחב, ממורכז.
 *
 * ‎auto-fit‎ עם פריט אחד יוצר מסילה אחת והשאר לובן. שי צילם
 * בדיוק את זה: כרטיס צמוד לקצה ולידו 370 פיקסל ריקים.
 */
.legacy #te-main :is(.pricing-cards, .package-options, .package-cards,
                     .pricing-grid, .tickets-grid, .ticket-options,
                     .routes-grid):has(> :only-child) {
  grid-template-columns: minmax(0, 360px);
}

/* -------------------------------------------------- הכרטיס */

.legacy #te-main :is(.price-card, .package-card, .pricing-card,
                     .ticket-card, .route-card) {
  /*
   * ‼️ ‎grid‎ ולא ‎block‎, ו-‎auto 1fr auto‎.
   *
   * זה מה שגורם ל**מחיר לשבת באותו גובה בכל הכרטיסים** גם כששם
   * אחד תופס שתי שורות ואחר שורה אחת. בלי זה המחירים מדלגים,
   * והעין קוראת רשת לא מיושרת כשבורה — גם כשכל כרטיס בנפרד תקין.
   */
  display: grid;
  grid-template-rows: auto 1fr auto;
  inline-size: 100%;
  min-inline-size: 0;
  box-sizing: border-box;

  background: var(--surface, #fff);
  border: 1px solid var(--line, #e6e1d8);
  border-radius: var(--r-lg, 14px);
  overflow: hidden;             /* התצלום נחתך לפינות */
  text-align: start;

  /* כפתור ודיב נראים זהה — ‎ticket-picker‎ ממיר חלק מהם */
  font: inherit;
  color: inherit;
  padding: 0;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.legacy #te-main :is(.price-card, .package-card, .pricing-card,
                     .ticket-card, .route-card):hover {
  transform: translateY(-2px);
  border-color: var(--gold, #d4a94a);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .35);
}

/* -------------------------------------------------- התצלום */

/*
 * ‼️ יחס קבוע, ומקום שמור גם כשאין תצלום.
 *
 * מדדתי: 228 כרטיסים עם תמונה ו-23 בלי. ברשת אחת זה אומר
 * שהתווית של חלקם מתחילה 200 פיקסל נמוך יותר — וזו הסיבה
 * המרכזית ש"הכרטיסים לא באותו מקום".
 */
.legacy #te-main :is(.price-card, .package-card, .pricing-card,
                     .ticket-card, .route-card) > img,
.legacy #te-main :is(.price-card, .package-card, .pricing-card,
                     .ticket-card, .route-card) :is(.card-media, .ticket-media, [class$="__media"]) {
  display: block;
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--surface-2, #f2efe9);
}

/* -------------------------------------------------- התוכן */

.legacy #te-main :is(.price-card, .package-card, .pricing-card,
                     .ticket-card, .route-card) > :is(div, p, span, h3, h4):not([class$="__media"]) {
  padding-inline: var(--sp-3);
}

.legacy #te-main :is(.price-card, .package-card, .pricing-card,
                     .ticket-card, .route-card) :is([class$="-type"], [class$="-name"],
                     [class$="-title"], [class$="-header"], .price-type, .package-type, h3, h4) {
  margin: var(--sp-3) 0 var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
}

/*
 * שורת המחיר נדבקת לתחתית הכרטיס — זה מה ש-‎1fr‎ באמצע מאפשר.
 */
.legacy #te-main :is(.price-card, .package-card, .pricing-card,
                     .ticket-card, .route-card) :is(.price, .card-price, [class$="__price"], .ticket-price) {
  padding-block: var(--sp-2) var(--sp-3);
  text-align: center;
}

/*
 * ‼️ המחיר המבוטל לפני המחיר שמשלמים, תמיד.
 *
 * שי צילם כרטיס שבו הסדר היה הפוך ונקרא כאילו המחיר הגבוה הוא
 * מה שמשלמים. ‎order‎ כופה את הסדר בלי לגעת ב-HTML, ולכן הוא
 * עובד גם על המחוללים שכותבים אותו הפוך.
 */
.legacy #te-main :is(.price-card, .package-card, .pricing-card,
                     .ticket-card, .route-card) :is(.price, .card-price, [class$="__price"], .ticket-price) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--sp-1);
}

.legacy #te-main :is(.price-card, .package-card, .pricing-card,
                     .ticket-card, .route-card) :is(del, s, .price-was, .ticket-original, .package-was) {
  order: -1;
  opacity: .55;
  font-size: .85em;
}

/* ==========================================================================
   ‼️ טופס ההזמנה בנייד — השדות היו בגובה 18 פיקסל
   --------------------------------------------------------------------------
   מדדתי בדפדפן ברוחב 375:

       select.booking__input    גובה 18px · גופן 14px · ריפוד 0
       input.booking__input     גובה 18px

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

   ‼️ וגרוע מכך, גופן מתחת ל-16 פיקסל גורם ל-Safari ב-iPhone
   **להגדיל את כל העמוד** ברגע שנוגעים בשדה. הלקוח נוגע בתאריך,
   העמוד קופץ, והוא מאבד את המקום.

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

   --------------------------------------------------------------------------
   הגובה מגיע מ-‎min-block-size: 0‎ ו-‎padding: 0‎ למעלה, שנכתבו כדי
   שהשדה יישב צמוד לתווית בשורה אחת. זה נכון במסך רחב שבו השורה
   כולה גבוהה — ובנייד השורה מתכווצת והשדה איתה.
   ========================================================================== */

@media (max-width: 900px) {
  .booking__inner .booking__input,
  .booking__input {
    /*
     * ‼️ 16px בדיוק, לא פחות. זה הסף של iOS.
     * ‎max‎ שומר על גופן גדול יותר אם הוגדר במקום אחר.
     */
    font-size: max(16px, var(--fs-sm));
    min-block-size: 44px;
    padding-block: var(--sp-2);
  }

  /* השדה תופס את כל רוחב השורה — יעד מגע ולא פינה */
  .booking__inner .booking__field {
    align-items: center;
    min-block-size: 48px;
  }

  .booking__inner select.booking__input,
  .booking__inner input.booking__input {
    inline-size: 100%;
  }

  /*
   * כפתור השליחה — הדבר היחיד שחייב להיות בלתי אפשרי להחטיא.
   */
  .booking__inner .booking__send,
  .booking__send {
    min-block-size: 52px;
    font-size: max(16px, var(--fs-base));
  }
}

/* ==========================================================================
   טבלת השוואה בין אפשרויות — .boat-table
   --------------------------------------------------------------------------
   ‼️ שי ביקש שבטיול עם כמה סוגי סירות אפשר יהיה לראות את ההבדל
   בין האפשרויות. איגור הכריע טבלה ולא בורר, והנימוק שלו נכון:
   **בורר מסתיר.** הלקוח שמגיע לבחור סירה צריך לראות את ההבדל
   בלי ללחוץ — זו כל ההחלטה שלו.

   הטבלה נבנית ב-scripts/boat-table.js מהטקסט שכבר מודפס על
   הכרטיסים שמתחתיה, ולכן אין בה עובדה שאינה בעמוד.

   ‼️ העיצוב נשען על .price-table שכבר קיים (שורה 480) ולא
   מגדיר צבעים משלו. טבלה שנראית אחרת מכל טבלה אחרת באתר היא
   רכיב חמישי, וכבר יש חמישה אוצרות מילים לכרטיסי מחיר.
   ========================================================================== */

.legacy #te-main .boat-table {
  margin-block: var(--s-6, 1.5rem);
}

.legacy #te-main .boat-table > h3 {
  margin-block-end: var(--s-3, .75rem);
  font-size: 1.05rem;
}

/*
 * ‼️ גלילה אופקית ולא כיווץ.
 *
 * שש עמודות במסך טלפון הופכות כל תא לעמודה בת תו אחד — בדיוק
 * מה ששי צילם ב-/פוקט-פארק-מים-אנדמנדה וקרא לו "שבור לגמרי".
 * טבלה צרה מדי נגללת, לא נמעכת.
 */
.legacy #te-main .boat-table__grid {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.legacy #te-main .boat-table__grid th[scope="row"] {
  white-space: normal;
  min-inline-size: 11ch;
  font-weight: 600;
}

/* עמודת "הבדל במסלול" היא היחידה שמותר לה לשבור שורה */
.legacy #te-main .boat-table__grid td:nth-last-child(3) {
  white-space: normal;
  max-inline-size: 26ch;
}

.legacy #te-main .boat-table__note {
  margin-block-start: var(--s-2, .5rem);
  font-size: .8rem;
  opacity: .7;
}

/*
 * ‼️ .boat-table__grid מעצב את עצמו ואינו יורש מ-.price-table.
 *
 * נתתי לו קודם גם class="price-table" כדי לרשת עיצוב, ו-
 * extract-tickets קורא כל table.price-table כרשימת כרטיסים.
 * הטבלה הפכה למקור האמת של עצמה: ב-/איי-סימילאן היא ייצרה
 * שתי אפשרויות גנריות שדרסו שש אמיתיות, והבוררים ירדו 6→2.
 *
 * מחלקה משותפת היא גם חוזה עם מי שקורא אותה, לא רק עם מי
 * שמצייר אותה.
 */
.legacy #te-main .boat-table__grid {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.legacy #te-main .boat-table__grid th,
.legacy #te-main .boat-table__grid td {
  padding: var(--s-2, .5rem) var(--s-3, .75rem);
  border-block-end: 1px solid var(--c-line, rgba(7, 39, 66, .12));
  text-align: start;
}

.legacy #te-main .boat-table__grid thead th {
  font-weight: 700;
  background: var(--c-surface-2, rgba(7, 39, 66, .04));
  white-space: nowrap;
}

.legacy #te-main .boat-table__grid tbody tr:last-child th,
.legacy #te-main .boat-table__grid tbody tr:last-child td {
  border-block-end: 0;
}

/*
 * ‼️ צבע לטבלת ההשוואה — שי: *"מבחינת הטבלה חסר צבע וכו׳."*
 *
 * הגרסה הראשונה הייתה לבנה עם קו הפרדה אפור, והיא נבלעה בעמוד.
 * טבלה שנועדה להיות **נקודת ההכרעה** של הגולש לא יכולה להיראות
 * כמו הערת שוליים.
 *
 * הצבעים מהטוקנים של הבית ולא חדשים: כותרת בנייבי, פס זהב
 * מתחתיה, והשורות מפוספסות כדי שהעין תעקוב לאורך שורה בטבלה
 * של שש עמודות.
 */
.legacy #te-main .boat-table__grid thead th {
  background: var(--c-navy-900, #072742);
  color: #fff;
  border-block-end: 3px solid var(--c-gold-500, #f0a81a);
}

.legacy #te-main .boat-table__grid tbody tr:nth-child(even) {
  background: var(--c-navy-900, #072742);
  background: color-mix(in srgb, var(--c-navy-900, #072742) 4%, transparent);
}

/* עמודת השם — עוגן העין בכל שורה */
.legacy #te-main .boat-table__grid tbody th[scope="row"] {
  background: color-mix(in srgb, var(--c-navy-900, #072742) 8%, transparent);
  color: var(--c-navy-900, #072742);
}

/*
 * ‼️ תא "הבדל במסלול" שיש בו ערך — מודגש.
 *
 * זו העמודה היחידה בטבלה שברוב השורות ריקה, ולכן התא המלא
 * הוא בדיוק מה שהגולש מחפש. בלי הדגשה הוא נראה כמו עוד תא.
 */
.legacy #te-main .boat-table__grid td:not(:empty) mark,
.legacy #te-main .boat-table__grid .boat-table__route {
  display: inline-block;
  padding: .1em .5em;
  border-radius: .35em;
  background: color-mix(in srgb, var(--c-gold-500, #f0a81a) 22%, transparent);
  color: var(--c-navy-900, #072742);
  font-weight: 600;
}

/* שורת האפשרות שנבחרה בטופס — מסומנת גם בטבלה */
.legacy #te-main .boat-table__grid tbody tr[data-row-for][aria-current="true"] {
  outline: 2px solid var(--c-gold-500, #f0a81a);
  outline-offset: -2px;
}

/*
 * ‼️ פאנל הפרטים שמתחלף — .option-details
 *
 * שי: *"ברגע שאני לוחץ על הכרטיס כל המידע צריך להשתנות."*
 * הפאנל יושב בראש סקשן לוח הזמנים ומראה את שעת האיסוף,
 * הקיבולת ונקודת היציאה של **האפשרות שנבחרה** — במקום הטווח
 * המטושטש "07:30 - 10:30 (בהתאם לסוג הסירה)" שהיה שם.
 */
.legacy #te-main .option-details {
  margin-block: var(--s-4, 1rem);
  padding: var(--s-4, 1rem);
  border-radius: var(--r-3, .75rem);
  background: color-mix(in srgb, var(--c-navy-900, #072742) 5%, transparent);
  border-inline-start: 4px solid var(--c-gold-500, #f0a81a);
}

.legacy #te-main .option-details__lead {
  margin-block-end: var(--s-3, .75rem);
  font-size: .9rem;
}

.legacy #te-main .option-detail__title {
  margin-block-end: var(--s-2, .5rem);
  font-size: 1rem;
  color: var(--c-navy-900, #072742);
}

.legacy #te-main .option-detail__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--s-2, .5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.legacy #te-main .option-detail__list li {
  margin: 0;
  padding-inline-start: 0;
}

.legacy #te-main .option-detail__list i {
  color: var(--c-gold-600, #d08c0d);
  margin-inline-end: .35em;
}

/* ‼️ hidden חייב לנצח display:grid של הרשימה שמעליו */
.legacy #te-main [data-ticket-detail][hidden] { display: none; }

/* ==========================================================================
   לוח זמנים חי — .schedule-grid--live
   --------------------------------------------------------------------------
   ‼️ שי: *"יש חוסר במידע של הלוח זמנים נכון, ואין ליינטרי יפה
   כמו שרציתי."*

   הגרסה הראשונה שלי הוסיפה קופסה אפורה **מעל** הלוח והשאירה
   בתוכו את השורה "07:30 - 10:30 (בהתאם לסוג הסירה)". בצילום
   ששי שלח נראים שני זמנים סותרים במרחק שתי שורות. מידע נכון
   ליד מידע מטושטש גרוע משום מידע.

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

   ‼️ המחלקה ‎--live‎ מתווספת ב-option-details.js ורק כשההחלפה
   באמת קרתה. הכלל הבסיסי של ‎.schedule-grid‎ ב-legacy-skin.css
   (של איגור) אינו נדרס — הוא ממשיך לחול על כל שאר העמודים.
   ========================================================================== */

.legacy #te-main .schedule-note {
  margin-block-end: var(--s-4, 1rem);
  padding: var(--s-3, .75rem) var(--s-4, 1rem);
  border-inline-start: 4px solid var(--c-gold-500, #f0a81a);
  border-radius: var(--r-2, .5rem);
  background: color-mix(in srgb, var(--c-gold-500, #f0a81a) 10%, transparent);
  font-size: .9rem;
}

.legacy #te-main .schedule-grid--live {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0;
  position: relative;
  padding-inline-start: 0;
}

/* הקו האנכי של הציר */
.legacy #te-main .schedule-grid--live > * {
  position: relative;
  padding-block: var(--s-3, .75rem);
  border-block-end: 1px solid color-mix(in srgb, var(--c-navy-900, #072742) 8%, transparent);
}

.legacy #te-main .schedule-grid--live > *:nth-last-child(-n+2) {
  border-block-end: 0;
}

/* עמודת השעה — הנקודה והקו יוצאים ממנה */
.legacy #te-main .schedule-grid--live > .schedule-time {
  padding-inline-end: var(--s-5, 1.25rem);
  padding-inline-start: var(--s-5, 1.25rem);
  min-inline-size: 7.5em;
  color: var(--c-navy-900, #072742);
  font-variant-numeric: tabular-nums;
}

.legacy #te-main .schedule-grid--live > .schedule-time::before {
  content: "";
  position: absolute;
  inset-inline-start: .3em;
  inset-block: 0;
  inline-size: 2px;
  background: color-mix(in srgb, var(--c-navy-900, #072742) 14%, transparent);
}

.legacy #te-main .schedule-grid--live > .schedule-time::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: calc(var(--s-3, .75rem) + .35em);
  inline-size: .85em;
  block-size: .85em;
  border-radius: 50%;
  background: var(--c-gold-500, #f0a81a);
  box-shadow: 0 0 0 3px var(--c-bg, #fff);
}

/* הראשונה והאחרונה — הקו לא נמשך מעבר להן */
.legacy #te-main .schedule-grid--live > .schedule-time:first-child::before { inset-block-start: calc(var(--s-3, .75rem) + .35em); }
.legacy #te-main .schedule-grid--live > .schedule-time:nth-last-child(2)::before { inset-block-end: calc(100% - var(--s-3, .75rem) - 1.2em); }

/*
 * ‼️ שעת האיסוף המוחלפת — מודגשת.
 *
 * היא הערך היחיד בלוח שתלוי בבחירה, ולכן היא צריכה להיראות
 * כמשהו שהשתנה ולא כעוד שעה ברשימה.
 */
.legacy #te-main .schedule-grid--live [data-pickup-for] {
  display: inline-block;
  padding: .05em .45em;
  border-radius: .3em;
  background: color-mix(in srgb, var(--c-gold-500, #f0a81a) 24%, transparent);
}

.legacy #te-main .schedule-grid--live .schedule-extra {
  color: color-mix(in srgb, var(--c-navy-900, #072742) 65%, transparent);
  font-size: .92em;
}

.legacy #te-main [data-pickup-for][hidden] { display: none; }

@media (max-width: 560px) {
  .legacy #te-main .schedule-grid--live { grid-template-columns: 1fr; }
  .legacy #te-main .schedule-grid--live > .schedule-time { padding-block-end: 0; border-block-end: 0; }
}


/* ==========================================================================
   ONLY_CHILD_WRAPPER — ילד יחיד שהוא עוטף, ולא כרטיס
   --------------------------------------------------------------------------
   ‼️ שי, 28.09.2026: "למה התמונות בפורמט הזה הם אחד אחד ולא 2 2
   כמו בשאר הדברים?"

   הכלל שמעל — ‎:has(> :only-child)‎ → ‎minmax(0, 360px)‎ — קיים
   מסיבה טובה: **כרטיס בודד אסור שיימתח על רוחב העמוד.**

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

   ‼️ **נמדד לפני התיקון:** 2 עמודים עם העוטף, 4 עמודים עם
   כרטיס בודד אמיתי, 30 עם כמה כרטיסים. החריג כאן נוגע רק
   בשניים, ומשאיר את ארבעת המקרים שהכלל נועד להם כפי שהם.

   סגוליות: ‎.route-switch:only-child‎ בתוך ‎:has()‎ נותן (1,4,0)
   מול (1,3,0) של הכלל הכללי. לא נשענתי על סדר הטעינה.
   ========================================================================== */
.legacy #te-main :is(.pricing-cards, .package-options, .package-cards,
                     .pricing-grid, .tickets-grid, .ticket-options,
                     .routes-grid):has(> .route-switch:only-child) {
  grid-template-columns: 1fr;
  justify-content: stretch;
}

/* והעוטף עצמו נפרש על כל הרשת, כדי שהלשונית תקבל את הרוחב המלא */
.legacy #te-main .route-switch { grid-column: 1 / -1; width: 100%; }