/* ===== General Width/Spacing ===== */
:root {
  --brand: var(--main-color, #2f6e2f);
  --content-max: 1100px;
}

/* ===== Image + Text Container (No Overlap) ===== */
.top-image-container {
  display: grid;
  grid-template-areas: "media text";
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
  align-items: stretch;

  width: min(var(--content-max), 92vw);
  margin: 30px auto 10px;
/* קרמל חמים */
/* שוקולד כהה */
  background: radial-gradient(circle at 30% 20%, rgba(223,205,186,.18), rgba(255,255,255,.97) 60%);
  border-radius: 18px;
  overflow: hidden;
}

.top-image-container p{
    margin: 0;
}

/* Image – Fixed aspect ratio, no height:100% or scaling */
.top-image-container > img {
  display: block;
  width: 100%;
  min-height: 320px;
  object-position: center;
  transform: none !important;
  height: auto !important;
  aspect-ratio: auto !important;  /* אל תכריחי יחס 16:10 */
  object-fit: contain;
  border-radius: 18px;

}

/* Text */
.text_on_picture {
  grid-area: text;
  position: static !important;
  direction: rtl;
  padding: clamp(16px, 2.2vw, 24px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(180deg, rgba(184, 227, 172, 0.07), #fff 70%);
  border-inline-start: 6px solid var(--brand);
  color: #1d1d1d;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.6;
  text-align: center;
}

.text_on_picture h2 {
  margin: 0 0 8px;
  font-size: clamp(20px, 2.8vw, 28px);
  font-weight: 800;
}

/* Mobile */
@media (max-width: 860px) {
  .top-image-container {
    grid-template-columns: 1fr;
    grid-template-areas: "media" "text";
  }

  .top-image-container > img {
    aspect-ratio: 16 / 10;
    min-height: 220px;
  }

  .text_on_picture {
    border-inline-start: none;
    border-top: 6px solid var(--brand);
    padding: 18px;
  }
}


/* ===== Facts block (no <h2>) ===== */
.ride-facts{
  /* הגדרות כלליות */
  --content-max: 1100px;
  --brand: var(--main-color, #2f6e2f);

  direction: rtl;
  text-align: right;
  box-sizing: border-box;

  /* מרכוז ורוחב */
  max-width: var(--content-max);
  width: min(92vw, var(--content-max));
  margin: 0 auto 0px !important;

  padding: 16px;
  background: radial-gradient(circle at 30% 20%, rgba(223,205,186,.18), rgba(255,255,255,.97) 60%);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.10);

  /* פריסה דו-עמודתית */
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px 16px;

  /* ביטול כל הזחות ישנות */
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;

  /* למקרה שההורה הוא GRID/FLEX */
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  align-self: start !important;
  flex: 0 0 100% !important;
}

/* כותרת אוטומטית לפני הרשימה */
.ride-facts::before{
  /*content: "חשוב לקרוא לפני"; /* אפשר לשנות טקסט כאן */
  grid-column: 1 / -1;
  display: block;
  margin: 0 6px 10px;
  font-weight: 900;
  font-size: clamp(20px, 2.6vw, 28px);
  color: #111;
}

/* פריט בודד */
.ride-facts li{
  position: relative;
  padding: 14px;
  padding-inline-start: 42px;     /* מקום לאייקון בצד ימין ב-RTL */
  padding-inline-end: 14px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,.05);
  line-height: 1.65;
  transition: transform .08s ease, box-shadow .2s ease;
}

/* אייקון עגול */
.ride-facts li::before{
  content: "🐎"; /* אפשר להחליף ל-"✓"  */
  position: absolute;
  inset-inline-start: 12px;       /* ימין ב-RTL */
  top: 50%;
  transform: translateY(-50%);
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--main-bright);
  color: #fff;
  font-size: 13px; font-weight: 900;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--main-color) 20%, transparent);
}


/* הדגשת תווית בתוך פריט */
.ride-facts strong{ font-weight: 800; color: #111; }

/* מובייל: עמודה אחת */
@media (max-width: 700px){
  .ride-facts{ grid-template-columns: 1fr; padding: 14px; gap: 10px; }
  .ride-facts li{ padding: 12px; padding-inline-start: 40px; }
  .ride-facts li::before{ width: 20px; height: 20px; font-size: 12px; }
}


.ride-facts > li{
  list-style: none !important;        /* אם יש כלל גלובלי על LI */
}


/* רווח בין התמונה לפס החום (בעמודה של הטקסט) */
.top-image-container{
  column-gap: clamp(10px, 2vw, 20px); /* רק אופקי */
  row-gap: 0;
}
@media (max-width: 860px){
  .top-image-container{
    column-gap: 0;   /* במובייל אין צורך ברווח אופקי */
    row-gap: 20px;   /* רווח אנכי קטן בין התמונה לטקסט */
  }
}



/*בלוק של מדיניות החזרות*/
.cancellation-policy {
    border: black 2px solid;
    padding: 10px;
    font-family: Arial, sans-serif;
    line-height: 1.8;           /* ריווח בין שורות */
    color: #222;
    max-width: calc(100% - 40px);
    direction: rtl;
    margin: 20px auto;
    margin-top: 40px;
}

.cancellation-policy p {
    margin: 0 0 15px;
    font-size: 1.1rem;
    text-align: center;
    text-decoration: underline;
}

/*כותרת המדיניות*/
.cancellation-policy .section-title {
    font-weight: bold;
    text-align: center;
}

/*שורות המדיניות*/
.cancellation-policy ul {
    margin: 0;
    padding-right: 20px;
    list-style-type: disc;
}

/*הגדרת שורה ספציפית מהמדיניות*/
.cancellation-policy li {
    margin-bottom: 10px;
}

/*בלוק הטאבים של השעות והצגת התורים*/
#appointments-container{
    margin: 0;
}

/*כותרת מעל התורים המוצגים*/
.appointment_title{
    font-size: 2rem;
    font-weight: bold;
    color: var(--main-color);
    text-align: center;
    margin-top: 20px;
    margin-bottom: 35px;
    text-decoration: underline;
}

/*התורים המוצגים*/
.slot-btn{
    width:100%;
    padding:10px;
    border-radius:8px;
    background:var(--main-white);
    color: var(--main-muted);
    border: var(--main-border) 1px solid;
    cursor:pointer
}

/*ריחוף מעף התורים*/
.slot-btn:hover{background:var(--main-emerald)}

/*טאבים של כל הימים בשבוע*/
.date-strip{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:6px;
    margin:12px 0;
    scrollbar-width:thin
}

/*כל טאב בודד של יום בשבוע*/
.date-chip{
    border:1px solid #ddd;
    background:var(--main-bright);
    border-radius:999px;
    padding:8px 12px;
    cursor:pointer;
    white-space:nowrap;
    font-weight: bold;
}

/*כאשר נבחר יום בשבוע*/
.date-chip.active{
    background:var(--main-emerald);
    color:black;
    border-color:black;
}

/* הודעה כשאין תורים */
.no-appointments {
  color: #c00;
  font-weight: 600;
  text-align: center;
}

/*כל הטאבים של סוגי רכיבה זוגית*/
.variant-strip{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
    padding: 10px;
    max-width: 700px;
    border-radius: 12px;
}

/*טאב בודד לסוג רכיבה זוגית*/
.variant-strip .variant-chip{
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: white;
  padding: 8px 14px;
  border: 1px solid #ddd;
  border-radius: 999px;
  background: var(--main-bright);
  font-weight: bold;
  font-size: .95rem;
  cursor: pointer;
  transition: transform .08s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

/*כאשר נבחר סוג רכיבה זוגית*/
.variant-strip .variant-chip.active{
    background: var(--main-emerald);
    color: #000;
    border-color: #000;
}

/* וריאציה קומפקטית במסכים קטנים */
@media (max-width: 480px){
  .variant-strip{
    gap: 8px;
    padding: 6px;
  }
  .variant-strip .variant-chip{
    color: white;
    padding: 7px 12px;
    font-size: .9rem;
  }
}

/*לחצן ללוח שנה לקביעת תור*/
.fancy-date-picker{
  display:flex; gap:10px;
  align-items:center;
  justify-content:center;
  margin: 10px auto 14px;
  text-align: center;
}

.date-trigger{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px;
  border-radius:22px;
  border:1px solid #000;
  /* מסגרת גרדיאנט עדינה */
  background-color: var(--main-bright);
  color:#000;
  font-weight:700; font-size:15px;
  box-shadow: 0 6px 18px rgba(47,110,47,.12);
  cursor:pointer; transition: transform .05s, box-shadow .2s, filter .2s;
  justify-content: center;
}

.date-trigger:hover{
  box-shadow: 0 10px 24px rgba(47,110,47,.16);
  filter: saturate(1.05);
}
.date-trigger:active{
    background: var(--main-emerald);
    color: #000;
    border-color: #000;
}

/* יופיע אחרי בחירה/לחיצה */
.date-trigger.selected{
  background: var(--main-emerald);  /* או כל צבע שתבחרי */
  color: #000;
  border-color: #000;
  box-shadow: 0 10px 24px rgba(47,110,47,.16);
}

.date-trigger:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(47,110,47,.20), 0 8px 22px rgba(47,110,47,.16);
}

.date-trigger .icon{ font-size:18px; line-height:1; }

/* מסתיר את ה-input אבל משאיר נגישות למסך־קורא */
.visually-hidden-date{
  position:absolute !important;
  width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip: rect(0 0 0 0); white-space:nowrap; border:0;
}

/* הכפתור יישאר מודגש כל עוד הפוקוס בתוך העטיפה (הכפתור או ה-input) */
.fancy-date-picker:focus-within .date-trigger,
.date-trigger:focus {
  background: var(--main-emerald);
  color: #000;
  border-color: #000;
  box-shadow: 0 10px 24px rgba(47,110,47,.16);
}

/* צובע רק את האייקון */
.fancy-date-picker .fa-calendar-days{
  color: black;   /* החליפי לצבע שרוצה */
  font-size: 1.2em;               /* אופציונלי: הגדלת האייקון */
}

:root{
  --brown-900:#2C1B10;   /* כהה */
  --brown-700:#5C3A20;
  --brown-500:#8B5E34;
  --brown-300:#C49A6C;   /* בהיר */
  --cream:#FFF8F1;       /* רקע עדין */
  --header-bg:#EFE5CF;
}

/* פס כותרת */
.page-hero{
  background: linear-gradient(135deg, var(--brown-500), var(--brown-300));
  color:#fff;
  margin: 0 0 16px 0;
  border-radius: 0 0 18px 18px;
  box-shadow: 0 6px 16px rgba(0,0,0,.08) inset;
}
.page-hero__inner{
  padding: clamp(14px, 2.5vw, 28px) clamp(14px, 3vw, 32px);
}

/* הכותרת */
.page-hero__title{
  margin: 0;
  font-weight: 800;
  letter-spacing: .4px;
  line-height: 1.2;
  text-shadow: 0 1px 0 rgba(0,0,0,.14);
  font-size: clamp(28px, 4.2vw, 46px);
  text-align: right; /* RTL */
}

/* תת-כותרת (לא חובה) */
.page-hero__subtitle{
  margin: 6px 0 0;
  font-size: clamp(14px, 2.2vw, 18px);
  opacity: .95;
}

/* אם לא מולא page_title – לא להשאיר רווח ריק */
.page-hero__title:empty{ display:none; }

/* === מרכזת את כותרת ההזמנה ותת-הכותרת === */
.page-hero__inner{ text-align: center; }   /* גם הכותרת וגם תת-הכותרת במרכז */
.page-hero__title{ text-align: inherit; }  /* יורש center מהקונטיינר */
.page-hero__subtitle{ text-align: inherit; }


.page-hero{
  margin-top:0;
  color:#fff;
  border-radius:0 0 18px 18px;
  box-shadow:0 6px 16px rgba(0,0,0,.08) inset;
  /* שכבה 1: דהייה מרקע ההדר ל־transparent (22px)
     שכבה 2: הגרדיאנט החום הקיים */
  background:
    linear-gradient(to bottom, var(--header-bg), rgba(255,255,255,0) 22px),
    linear-gradient(135deg, var(--brown-500), var(--brown-300));
}

/* (רשות) ריווח פנימי אם חסר */
.page-hero__inner{
  padding: clamp(14px, 2.5vw, 28px) clamp(14px, 3vw, 32px);
}

/* ===== CTA על התמונה – טקסט גדול + אנימציה מושכת ===== */
.top-image-container > img { grid-area: media; z-index: 1; }
.text_on_picture          { grid-area: text; }

/* הכפתור עצמו */
.cta-on-image{
  grid-area: media;
  justify-self: center;
  align-self: end;
  margin-bottom: 14px;
  position: relative;
  z-index: 3;

  /* מידות + טיפוגרפיה: הטקסט ממלא ~80% מהכפתור */
  min-width: 240px;                 /* אפשר להגדיל/להקטין לפי הצורך */
  height: 56px;
  padding: 0 16px;                  /* שולי צד קטנים כדי שהטקסט יתפוס יותר מקום */
  display: inline-flex; align-items: center; justify-content: center;
  font-size: clamp(24px, 3.6vw, 32px);  /* ↑ זה מה שמגדיל את הכתב */
  line-height: 1; font-weight: 900; letter-spacing: .3px;
  text-decoration: none;
  cursor: pointer;

  /* Glassmorphism עדין (לא חום) */
  color: #111;
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
  backdrop-filter: blur(10px) saturate(1.12);
  -webkit-backdrop-filter: blur(10px) saturate(1.12);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 999px;
  box-shadow: 0 10px 24px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.65);

  /* אנימציית נשימה עדינה (מעודדת קליק) */
  animation: cta-breathe 1.8s ease-in-out infinite;
  will-change: transform, box-shadow;
  transition: transform .08s ease, box-shadow .2s ease, filter .2s ease, color .2s ease, background-color .2s ease;
}



/* מצבי אינטראקציה */
.cta-on-image:hover{
  filter: brightness(1.06);
  box-shadow: 0 14px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.72);
  animation-play-state: paused;     /* עוצר נשימה בזמן ריחוף כדי לא להציף */
}
.cta-on-image:active{
  transform: translateY(1px) scale(.995);
  color: var(--main-color, #2f6e2f);
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.74));
}
.cta-on-image:focus-visible{
  outline: 3px solid rgba(255,255,255,.95);
  outline-offset: 2px;
}

/* מובייל – מעט קומפקטי */
@media (max-width: 860px){
  .cta-on-image{
    min-width: 200px;
    height: 52px;
    font-size: clamp(18px, 4.8vw, 24px);
    margin-bottom: 10px;
  }
}

/* העדפת משתמש להפחתת תנועה */
@media (prefers-reduced-motion: reduce){
  .cta-on-image,
  .cta-on-image::before{ animation: none !important; }
}

/* ===== Keyframes ===== */
@keyframes cta-sheen{
  0%   { transform: translateX(-140%); }
  100% { transform: translateX(140%); }
}
@keyframes cta-breathe{
  0%,100% { transform: translateY(0) scale(1);   box-shadow: 0 10px 24px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.65); }
  50%     { transform: translateY(-1px) scale(1.02); box-shadow: 0 14px 28px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.7); }
}


.appointments-container {
    position: relative;
    min-height: 220px;
}

.appointments-loader {
    display: none;
    min-height: 220px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    text-align: center;
    color: var(--main-color);
    background: rgba(250, 247, 237, 0.75);
    border-radius: 16px;
}

.appointments-loader.show {
    display: flex;
}

.appointments-content.loading {
    display: none;
}

.spinner {
    width: 42px;
    height: 42px;
    border: 4px solid #e8dccb;
    border-top: 4px solid var(--main-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


  .hold-loader[hidden] {
    display: none !important;
  }

  .hold-loader {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.78);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }

  .hold-loader .spinner {
    width: 44px;
    height: 44px;
    border: 4px solid #ddd;
    border-top-color: #7b5a35;
    border-radius: 50%;
    animation: holdSpin 0.8s linear infinite;
  }

  .hold-loader p {
    margin: 0;
    font-size: 18px;
    color: #4f3720;
    font-weight: 600;
  }

  @keyframes holdSpin {
    to {
      transform: rotate(360deg);
    }
  }