/* styles.css (מלא ומעודכן לצבעי הלוגו + מרכז לוגו + לשוניות רחבות) */

/* ============================
   Bereshit – Global Styles
   ============================ */
:root{
  /* צבעי מותג – לפי הלוגו (גווני זהב/חום) */
  --brand:#c39b64;   /* זהב-ברונזה */
  --brand-2:#a5753a; /* חום כהה תואם */
  --text:#1f2937;
  --muted:#6b7280;
  --bg:#ffffff;
  --surface:#ffffff;
  --ring: rgba(140,106,60,.25);
  --radius:14px;
  --shadow: 0 6px 18px rgba(0,0,0,.07);
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  font-family:"Heebo","Rubik",Arial,system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--bg); color:var(--text); margin:0; line-height:1.6; direction:rtl
}

/* פס עליון */
.topbar{
  background:var(--brand-2); color:#fff; text-align:center; padding:8px 12px; font-weight:600
}

/* ============================
   Header (לוגו ממורכז מעל ניווט)
   ============================ */
.site-header{ background:#fff; border-bottom:1px solid #e5e7eb; padding-inline:0 }
.header-inner{
  width:100%; max-width:none; margin:0; padding-block:12px;
  padding-inline:16px;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:6px;                 /* קטן = קרוב יותר לסלוגן/לוגו */
  position:relative;
}
.brand{ display:inline-flex; align-items:center; text-decoration:none; margin:0 }
.logo{ height:150px; width:auto; display:block }
.nav-toggle{ display:none }

/* ============================
   Main nav + submenus
   ============================ */
.main-nav{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-evenly;     /* ריווח שווה בין כל הפריטים לאורך כל הרוחב */
  gap:0;
  padding-block:0;
  margin-top:-4px;
}
.main-nav > .nav-item{
  position:relative;
  flex:0 0 auto;                   /* לא מותח כל לשונית – מפזר לפי space-evenly */
}

/* לשוניות רחבות יותר (טקסט וכפתור) */
.navlink{
  appearance:none; border:none; background:transparent; color:var(--text);
  font-size:18px;                     /* היה 15px */
  font-weight:700;                    /* מודגש יותר */
  padding:12px 28px;                  /* מרחיב את הכפתור */
  letter-spacing:0.3px;               /* ריווח אותיות עדין */
  word-spacing:2px;                   /* ריווח מילים עדין */
  border-radius:12px; cursor:pointer; white-space:nowrap;
  text-align:center; width:100%;
  text-decoration:none;               /* בלי קו תחתון */
}
.navlink:focus,
.navlink:hover,
.navlink:visited{
  text-decoration:none;               /* בטוח שאין קו תחתון גם במצבים אחרים */
}

.navlink:hover{ background:#efefef }
.navlink.active{ background:var(--brand); color:#fff; box-shadow:0 6px 14px var(--ring) }
.has-submenu > .navlink .caret{ display:inline-block; transform:translateY(-1px); margin-inline-start:6px; font-size:12px }
.has-submenu > .navlink .caret::after{ content:"▾" }

.submenu{
  position:absolute; top:100%; right:0; min-width:240px; background:#fff; border:1px solid #e5e7eb;
  border-radius:12px; box-shadow:var(--shadow); padding:6px 0; display:none; z-index:1000;
}
.nav-item:hover .submenu,
.nav-item:focus-within .submenu,
.nav-item.open .submenu,
.has-submenu > .navlink[aria-expanded="true"] + .submenu{ display:block }

.subnavlink{
  width:100%; text-align:right; display:block; border:0; background:#fff; color:var(--text);
  font-weight:700; cursor:pointer; padding:12px 16px
}
.subnavlink + .subnavlink{ border-top:1px solid #f0f0f0 }
.subnavlink:hover{ background:#f7f7f7 }
.subnavlink.all{ background:#f6EFE6; color:var(--brand-2); font-weight:700 }
.subnavlink.all:hover{ filter:brightness(0.98) }

/* ============================
   Content
   ============================ */
.container{
  max-width:none;   /* בלי תקרת רוחב */
  width:100%;       /* תופס את כל המסך */
  margin:0;         /* בלי ריווח חיצוני */
  padding:0;        /* בלי ריווח פנימי כפוי */
}
.tabcontent{ display:none; background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; text-align:right }

h2{ margin-top:0; color:var(--brand) }
p{ color:var(--text) }
.muted{ color:var(--muted) }

/* ============================
   Buttons
   ============================ */
.button,button.primary{
  background:var(--brand); color:#fff; border:none; padding:10px 16px; border-radius:10px; cursor:pointer; font-weight:600;
  box-shadow:0 6px 14px var(--ring); transition:filter .15s, transform .08s
}
.button:hover,button.primary:hover{ filter:brightness(1.03) }
.button:active,button.primary:active{ transform:translateY(1px) }
.btn-outline{
  background:#fff; color:var(--brand); border:1px solid var(--brand); padding:10px 14px; border-radius:10px; cursor:pointer; font-weight:600;
  transition:background-color .15s,color .15s,transform .08s
}
.btn-outline:hover{ background:rgba(140,106,60,.06) }
.btn-outline:active{ transform:translateY(1px) }

/* ============================
   Hero
   ============================ */
.hero{ background:#fff; color:var(--text); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); text-align:center }
.hero .hero-title{ color:var(--brand) }
.hero .hero-sub{ color:var(--muted) }

/* ============================
   Products / Cards
   ============================ */
.home-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); margin-top:14px }
.product-card{ border-radius:var(--radius); box-shadow:var(--shadow); background:#fff; padding:14px; text-align:right; display:flex; flex-direction:column; gap:10px }
.product-card img{ width:100%; height:160px; object-fit:cover; border-radius:12px; background:#f3f3f3 }
.product-title{ font-weight:700 }
.price{ font-weight:700 }
.old-price{ color:var(--muted); text-decoration:line-through; font-weight:400; margin-inline-start:6px }
.tag{ font-size:12px; background:#f6efe6; color:var(--brand-2); border-radius:999px; padding:2px 8px }
.qty-group{ display:flex; gap:6px; align-items:center }
.qty-group input{ width:64px; padding:8px; border:1px solid #e5e7eb; border-radius:10px }

/* ============================
   Sliders
   ============================ */
.promo-slider, .testi-slider, .gallery{
  position:relative; overflow:hidden; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:16px
}
.promo-slide{ min-height:320px; display:flex; align-items:center; background-size:cover; background-position:center }
.promo-full{ border-radius:0; width:100%; margin:0 auto }

/* 🔽 הקטנת גובה הסליידר הראשי – במקום 70vh ענק */
.promo-full .promo-slide{
  min-height:clamp(320px,45vh,560px);
}

.promo-overlay{ position:relative; z-index:1; color:#fff; padding:22px; max-width:900px }
.promo-overlay.center{ text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:inherit }

/* טקסטי הירו (לפי בקשות קודמות) */
.promo-eyebrow{
  color:#ffffffc2;
  font-size:clamp(20px,1.6vw,24px);
  font-weight:700; opacity:1;
}
.promo-title{ margin:6px 0 6px; font-size:28px }
.promo-title.xl{
  font-size:clamp(32px,5vw,52px);
  color:#cd8b4e;  /* כהה יותר */
  font-weight:800;
}
.promo-text{ margin:0 0 12px }
.promo-text.lg{
  font-size:clamp(18px,2.2vw,22px);
  color:#ffffffee;
  font-weight:600;
}

.promo-slide::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,.15))
}
.slider-btn{ position:absolute; top:50%; transform:translateY(-50%); border:none; background:#fff; color:var(--text); box-shadow:var(--shadow); width:38px; height:38px; border-radius:999px; cursor:pointer; opacity:.9 }
.slider-btn.prev{ right:10px } .slider-btn.next{ left:10px }
.dots{ position:absolute; bottom:10px; left:0; right:0; display:flex; gap:6px; justify-content:center }
.dots button{ width:8px; height:8px; border-radius:999px; border:none; background:#e5e7eb; cursor:pointer }
.dots button.active{ background:var(--brand) }

/* ============================
   Gallery
   ============================ */
.gallery .slides{ position:relative }
.gallery .slide{ margin:0 }
.gallery img{ width:100%; display:block }
.gallery .dots{ bottom:10px }
.gallery-btn{ position:absolute; top:50%; transform:translateY(-50%); border:none; background:#fff; color:var(--text); box-shadow:var(--shadow); width:38px; height:38px; border-radius:999px; cursor:pointer; opacity:.9 }
.gallery-btn.prev{ right:10px } .gallery-btn.next{ left:10px }
/* =========================
   גלריית תמונות מתחת לסליידר
   ========================= */
.gallery-grid{
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
}

.gallery-item{
  position: relative;
  overflow: hidden;
  border-radius: 14px;            /* פינות מעוגלות כמו באתר */
  background: #000;
  box-shadow: var(--shadow);
}

/* מסגרת עדינה פנימית */
.gallery-item::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,.35);
  pointer-events: none;
}

/* התמונה עצמה */
.gallery-item img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .35s ease, filter .35s ease;
}

/* אפקט ריחוף עדין */
.gallery-item:hover img{
  transform: scale(1.05);
  filter: brightness(1.05);
}

/* ============================
   Testimonials
   ============================ */
.testi-slide{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; padding:16px }
.t-card{ background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); padding:16px; display:flex; flex-direction:column; gap:10px }
.t-head{ display:flex; gap:10px; align-items:center }
.t-avatar{ width:56px; height:56px; border-radius:999px; object-fit:cover }
.t-name{ font-weight:700 }
.t-meta{ font-size:14px }
.t-quote{ margin:6px 0 }
.t-stars{ color:#ffb703 }

/* ============================
   Footer
   ============================ */
footer.site-footer{ margin-top:28px; padding:22px 16px; background:#f7f7f7; border-top:1px solid #eee; text-align:center; color:var(--muted); border-radius:16px 16px 0 0 }
footer .footer-grid{ display:grid; gap:10px; justify-items:center }
footer .footer-title{ color:var(--text); font-weight:700 }
footer a{ color:var(--brand); text-decoration:none }
footer a:hover{ text-decoration:underline }

/* ===== CONTACT / FOOTER ===== */
/* ===== Footer ===== */
.footer {
  background: var(--surface, #fff);
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 32px 20px 40px;
}

/* ===== Footer Grid עדכון ===== */
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 0.7fr 1fr 1fr 0.7fr;
  grid-template-areas: "about nav hours contact map";
  gap: 24px;
  align-items: flex-start;
  direction: rtl;
}

.footer .col {
  text-align: right;
}

.col.map iframe {
  width: 100%;
  height: 320px;
  border: 0;
  border-radius: 12px;
  box-shadow: var(--shadow, 0 6px 18px rgba(0,0,0,.07));
}

/* טקסט */
.footer h3 {
  margin: 0 0 14px;
  font-weight: 700;
  color: var(--text, #222);
}
.footer p {
  margin: 0 0 16px;
  color: var(--muted, #555);
  line-height: 1.65;
}

/* רשימות – השארנו כאן רק את hours-list, כדי לא להתנגש עם הבלוק המעודכן של contact-list למטה */
.hours-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hours-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.hours-list li:last-child { border-bottom: 0; }
.hours-list li.closed b { color: #b91c1c; }
.hours-list span { color: var(--text, #222); }
.hours-list b { font-weight: 700; }

/* לוגו */
.brand-mark {
  display: block;
  max-width: 220px;
  margin: 10px 0 12px;
}

/* אייקונים */
.social {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 8px;
}
.social a {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  transition: transform .15s ease, background .15s ease;
}
.social a:hover {
  transform: translateY(-1px);
  background: #e5e7eb;
}

/* ===== ניווט מהיר בפוטר ===== */
.nav-col {
  text-align: right;
}

.nav-title {
  margin-bottom: 14px;
  font-weight: 700;
  color: var(--text, #1f2937);
}

.quick-nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.qbtn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 9999px;
  font-weight: 600;
  text-decoration: none;
  background: var(--brand, #c39b64);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.qbtn:hover {
  transform: translateY(-1px);
  background: var(--brand-2, #a5753a);
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
}

.qbtn:focus-visible {
  outline: 3px solid var(--ring, rgba(140,106,60,.25));
  outline-offset: 2px;
}

/* ===== רספונסיביות ===== */
@media (max-width: 1100px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "about nav"
      "hours contact"
      "map map";
  }
}

@media (max-width: 680px) {
  .footer-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "about"
      "nav"
      "hours"
      "contact"
      "map";
  }
  .quick-nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
  .qbtn {
    flex: 1 1 calc(50% - 10px);
    text-align: center;
  }
}

/* SVG icons in social (כפתורי סושיאל עגולים) */
.svg {
  width: 40px;
  height: 40px;
  display: inline-block;
  background-size: 400%; /* השארתי כפי שהיה אצלך */
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 100%;
  background-color: #ffffff; /* רקע עגול רך */
  transition: transform 0.80s ease, box-shadow 0.80s ease;
  margin-inline: 2px;
}

/* נתיבי האייקונים */
.svg.fb { background-image: url('assets/icons/facebook.png'); }
.svg.ig { background-image: url('assets/icons/instagram.png'); }
.svg.yt { background-image: url('assets/icons/youtube.png'); }

/* אפקט hover (השארתי את הגרסה הקלה) */
.svg:hover {
  transform: scale(1.15);
  opacity: 1;
}

/* יישור אייקון + טקסט בשורה אחת – זה הבלוק העדכני היחיד של contact-list */
.contact-list{
  list-style:none;
  margin:0; padding:0;
  direction: rtl;            /* עברית */
}
.contact-list li{
  display:flex;
  align-items:flex-start;     /* חשוב לשורות מרובות שורות */
  gap:12px;                   /* רווח בין האייקון לטקסט */
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,.06);
}
.contact-list li:last-child{ border-bottom:0; }

/* איקון – רוחב קבוע כדי שכל השורות יתחילו באותה נקודה */
.contact-list .ico{
  flex:0 0 28px;              /* רוחב קבוע לאיקון */
  font-size:22px;             /* גודל האייקון (שנה לפי טעם) */
  line-height:1;              /* שלא ייווצר רווח אנכי */
  text-align:center;
  margin-top:2px;             /* תיקון קטן ליישור אנכי */
}

/* הטקסט של כל שורה */
.contact-list .val{
  display:flex;
  flex-direction:column;      /* במיוחד לשתי שורות טלפונים */
  gap:4px;
}

/* קישורים */
.contact-list a{
  color:inherit;
  text-decoration:none;
}
.contact-list a:hover{ text-decoration:underline; }

/* ממורכזים ב־NAV כאשר ביקשת */
.nav-col {
  display: flex;
  flex-direction: column;
  align-items: center; /* ממרכז את כל התוכן */
  text-align: center;
}

.quick-nav {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center; /* ממרכז את הכפתורים */
}

.qbtn {
  display: inline-block;
  padding: 8px 18px;         /* קומפקטי */
  border-radius: 30px;
  font-weight: 600;
  font-size: 0.9rem;
  background: var(--brand, #c39b64);
  color: #fff;
  text-decoration: none;
  width: auto;               /* רוחב דינמי */
  min-width: 140px;          /* מינימום אסתטי */
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.qbtn:hover {
  transform: scale(1.05);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  background: var(--brand-2, #a5753a);
}

.contact-list .ico img {
  width: 22px;
  height: 22px;
  display: block;
}

/* === ABOUT בפוטר: לוגו וטקסט ממורכזים, גופן בינוני ומודגש === */
.footer .col.about{
  text-align:center;            /* מרכז את כל התוכן בעמודה */
}
.footer .col.about .brand-mark{
  display:block;
  margin:0 auto 12px;           /* ממורכז */
  max-width:300px;              /* הגדלה קלה של הלוגו (היה 220px) */
  width:100%;                   /* גורם לו להתרחב עד לגבול ה-max-width */
}
.footer .col.about p{
  font-size:1.05rem;            /* "אמצעי" */
  font-weight:700;              /* מודגש */
  line-height:1.7;
  margin:8px 0 0;
}
.footer .col.about .social{
  justify-content:center;       /* גם האייקונים במרכז */
}

/* ============================
   Testimonials (לקוחות ממליצות)
   ============================ */
.testimonials{
  background:#fffaf5;
  padding:60px 20px;
  text-align:center;
  border-top:1px solid rgba(0,0,0,0.05);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  margin-top:40px;
}

.testimonials .footer-title{
  color:var(--brand);
  font-size:2rem;
  font-weight:700;
  margin-bottom:40px;
}

/* מעטפת הסליידר וכפתורים */
#testi{ position:relative; }
#testi .testi-track{
  display:flex;
  gap:24px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding-bottom:8px;
  direction:ltr;                 /* גלילה טבעית ימינה/שמאלה */
}
/* הסתרת סרגל גלילה */
#testi .testi-track::-webkit-scrollbar{ display:none }
#testi .testi-track{ -ms-overflow-style:none; scrollbar-width:none }

/* כל כרטיס = שקופית */
#testi .t-card{
  flex:0 0 clamp(260px,28vw,360px);
  scroll-snap-align:center;
  background:#fff;
  border-radius:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  padding:20px;
  text-align:right;
  direction:rtl;                /* תוכן הכרטיס בעברית */
  transition:transform .25s ease;
}
#testi .t-card:hover{ transform:translateY(-4px) }

#testi .t-head{
  display:flex; align-items:center; gap:12px; margin-bottom:10px;
}
#testi .t-avatar{
  width:56px; height:56px; border-radius:50%; object-fit:cover;
  box-shadow:0 0 0 3px var(--brand, #c39b64);
}
#testi .t-name{ font-weight:700; color:var(--text) }
#testi .t-meta{ font-size:14px; color:var(--muted) }
#testi .t-stars{ color:#ffb703; font-size:1.1rem; margin-bottom:10px }
#testi .t-quote{ color:#333; font-style:italic; line-height:1.6 }

/* כפתורי ניווט */
#testi .testi-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px;
  border:0; border-radius:50%;
  background:#fff;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  cursor:pointer;
  font-size:28px; line-height:1; color:#333;
  display:flex; align-items:center; justify-content:center;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, opacity .2s;
  opacity: .95;
}
#testi .testi-btn:hover{ transform:translateY(-50%) scale(1.06); box-shadow:0 8px 18px rgba(0,0,0,.18); background:#fafafa; }
#testi .testi-btn:active{ transform:translateY(-50%) scale(0.98) }
#testi .testi-btn:focus-visible{ outline:3px solid var(--ring, rgba(140,106,60,.25)); outline-offset:2px }

/* RTL: הקודם מימין, הבא משמאל */
#testi .testi-btn.prev{ right:8px }
#testi .testi-btn.next{ left:8px }

@media (max-width:680px){
  .testimonials{ padding:40px 10px }
  #testi .t-card{ flex:0 0 240px }
  #testi .testi-btn{ width:36px; height:36px; font-size:24px }
}

/* =========================
   Treatment videos – וידאו בסקשני טיפולים
   ========================= */
.treatment .video-slot{
  width:100%;
  max-width:720px;
  margin:0 auto 1.5rem;
  border-radius:12px;
  overflow:hidden;
  background:#000;
}

/* למקרה שיהיו וידאו/אייפריים גם בלי inline-style בעתיד */
.treatment iframe,
.treatment video{
  display:block;
  width:100%;
  max-width:720px;
  margin:0 auto 1.5rem;
  border-radius:12px;
  background:#000;
  box-sizing:border-box;
}

/* =========================
   RF Video Fix – תיקון וידאו סקשן RF
   ========================= */

/* הגבלת הסקשן עצמו */
#rf-facial {
  max-width: 1000px;     /* רוחב הגיוני */
  margin: 0 auto;        /* מרכז את הסקשן */
  padding: 20px;
}

/* עוטף הוידאו */
#rf-facial .video-wrap {
  width: 100%;
  max-width: 720px;      /* לא יחרוג יותר מזה */
  margin: 24px auto;     /* מרכז אופקית */
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* הווידאו עצמו */
#rf-facial video {
  width: 100% !important;
  height: auto !important;
  max-height: 400px;
  display: block;
  object-fit: cover;
  border-radius: 16px;
}

/* ===== למה לבחור בנו ===== */

.why-us-section {
  background: #fffaf3;
  padding: 60px 20px;
  text-align: center;
}

.why-us-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.why-us-title {
  font-size: 2.1rem;
  color: var(--brand);
  margin-bottom: 10px;
}

.why-us-sub {
  color: var(--muted);
  margin-bottom: 40px;
  font-size: 1.05rem;
}

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.why-us-item {
  background: #fff;
  padding: 22px;
  border-radius: 16px;
  box-shadow: var(--shadow);
  text-align: right;
}

.why-us-item h3 {
  margin-top: 0;
  margin-bottom: 8px;
  color: var(--brand-2);
  font-size: 1.1rem;
}

.why-us-item p {
  margin: 0;
  color: var(--text);
  line-height: 1.6;
}

/* רספונסיבי */
@media (max-width: 600px) {
  .why-us-title {
    font-size: 1.6rem;
  }
}

/* === Responsive layout additions === */

/* מסכים בינוניים – קצת מצמצם רווחים וגודל לוגו/טקסט */
@media (max-width: 1024px) {
  .header-inner {
    padding-inline: 12px;
  }

  .logo {
    height: 130px;
  }

  .navlink {
    font-size: 16px;
    padding: 10px 18px;
  }

  .container {
    padding-inline: 16px;
  }
}

/* טאבלטים / מובייל רחב – תפריט נשבר לשתי שורות, גריד מצטמצם */
@media (max-width: 768px) {
  .header-inner {
    align-items: stretch;
    gap: 8px;
  }

  .brand {
    justify-content: center;
  }

  .logo {
    height: 120px;
  }

  .main-nav {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .main-nav > .nav-item {
    flex: 1 1 50%;
  }

  .navlink {
    font-size: 15px;
    padding: 9px 10px;
    white-space: normal; /* מאפשר ירידת שורה בכותרות ארוכות */
  }

  .container {
    padding-inline: 12px;
  }

  .hero {
    padding: 20px 14px;
  }

  .home-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-card {
    padding: 12px;
  }

  .testi-slide {
    grid-template-columns: 1fr;
  }

  .why-us-section {
    padding: 40px 16px;
  }
}

/* מובייל קטן – כפתורי ניווט ממורכזים (כולל חנות), כרטיס אחד בשורה, טקסטים קומפקטיים */
@media (max-width: 540px) {
  .header-inner {
    padding-inline: 10px;
  }

  .logo {
    height: 110px;
  }

  .main-nav {
    flex-direction: column;
    align-items: center;          /* מרכז את כל הכפתורים, כולל "חנות" */
  }

  .main-nav > .nav-item {
    flex: 0 0 auto;
  }

  .navlink {
    font-size: 14px;
    padding: 8px 16px;
    width: auto;                  /* לא תופס 100% רוחב */
    min-width: min(240px, 100%);  /* כפתור נוח במרכז גם בגלאקסי */
  }

  .container {
    padding-inline: 10px;
  }

  .home-grid {
    grid-template-columns: 1fr;
  }

  .promo-full .promo-slide {
    min-height: clamp(260px, 40vh, 420px);
  }

  .hero {
    padding: 18px 12px;
  }

  .product-card {
    padding: 10px;
  }

  .testimonials {
    padding-inline: 12px;
  }

  .why-us-section {
    padding: 32px 12px;
  }
}

/* =========================
   Booking popup – חלון הזמנת טיפול צף
   ========================= */

/* שכבת הרקע המוחשכת */
.booking-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: none;              /* מוסתרת כברירת מחדל */
  align-items: center;
  justify-content: center;
  padding: 12px;
  z-index: 2000;
}

/* כשהפאנל פתוח – הוסף class="booking-overlay is-open" ב-JS */
.booking-overlay.is-open {
  display: flex;
}

/* הקופסה של ההזמנה עצמה */
.booking-panel,
[data-booking-panel] {
  position: relative;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 14px 40px rgba(0,0,0,.28);
  max-width: 460px;
  width: 100%;
  max-height: 90vh;
  padding: 22px 20px 20px;
  overflow-y: auto;
}

/* כפתור X לסגירה (אם קיים) */
.booking-panel .booking-close {
  position: absolute;
  top: 10px;
  left: 10px;                 /* RTL – משמאל */
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 0;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* טיפה התאמות למובייל */
@media (max-width: 600px) {
  .booking-panel,
  [data-booking-panel] {
    max-width: 100%;
    border-radius: 14px;
    padding: 18px 14px 16px;
  }
}

/* =========================
   Booking form – עיצוב שדות ההזמנה
   ========================= */

.booking-panel h2,
.booking-panel h3 {
  margin: 0 0 14px;
  font-size: 1.3rem;
  color: var(--brand);
}

.booking-panel form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* תוויות */
.booking-panel label {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

/* שדות טקסט, תאריך, שעה וכו' */
.booking-panel input[type="text"],
.booking-panel input[type="tel"],
.booking-panel input[type="email"],
.booking-panel input[type="date"],
.booking-panel input[type="time"],
.booking-panel input[type="number"],
.booking-panel select,
.booking-panel textarea {
  width: 100%;
  font-family: inherit;
  font-size: 0.95rem;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: var(--text);
  box-sizing: border-box;
}

/* פוקוס נעים */
.booking-panel input[type="text"]:focus,
.booking-panel input[type="tel"]:focus,
.booking-panel input[type="email"]:focus,
.booking-panel input[type="date"]:focus,
.booking-panel input[type="time"]:focus,
.booking-panel input[type="number"]:focus,
.booking-panel select:focus,
.booking-panel textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 2px var(--ring);
  background: #ffffff;
}

/* טקסטאריאה */
.booking-panel textarea {
  min-height: 70px;
  resize: vertical;
}

/* שורת רדיואים (בסיסי / מורחב) – אם יש טקסט ביניהם */
.booking-panel .booking-radios {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-top: 4px;
}

/* אם אין div ייעודי – עדיין ניתן קצת מרווח לרדיואים */
.booking-panel input[type="radio"] {
  margin-inline-start: 2px;
  margin-inline-end: 4px;
}

/* כיתוב ליד הרדיואים */
.booking-panel .radio-label,
.booking-panel label span {
  font-weight: 500;
  font-size: 0.92rem;
}

/* שורת הסבר "התשלום מתבצע בכרטיס אשראי..." */
.booking-panel .booking-note {
  font-size: 0.9rem;
  color: var(--muted);
  margin-top: 4px;
}

/* כפתור אישור */
.booking-panel button,
.booking-panel input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  width: 100%;
  padding: 10px 16px;
  border-radius: 999px;
  border: none;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 6px 14px var(--ring);
  transition: transform .12s ease, box-shadow .12s ease, background .15s ease;
}

.booking-panel button:hover,
.booking-panel input[type="submit"]:hover {
  background: var(--brand-2);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

.booking-panel button:active,
.booking-panel input[type="submit"]:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

/* מרווח בין קבוצות שדות נפרדות במקרה שיש ברייקים */
.booking-panel .field-group {
  margin-top: 6px;
}

/* רספונסיביות לטופס במובייל */
@media (max-width: 480px) {
  .booking-panel label {
    font-size: 0.9rem;
  }
  .booking-panel input,
  .booking-panel select,
  .booking-panel textarea {
    font-size: 0.9rem;
  }
  .booking-panel button,
  .booking-panel input[type="submit"] {
    font-size: 0.95rem;
  }
}

/* =========================
   Booking Modal – עיצוב חלון ההזמנה (Luxury)
   ========================= */

.booking-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  justify-content:center;   /* ממרכז אופקית */
  align-items:center;       /* ממרכז אנכית */
  padding:24px;
  background:radial-gradient(circle at top, rgba(0,0,0,.55), rgba(0,0,0,.85));
}

.booking-modal.hidden{
  display:none;
}

/* שכבת רקע – רק בשביל קליק מחוץ לקופסה אם תרצה בעתיד */
.booking-backdrop{
  position:absolute;
  inset:0;
}

/* קופסת המודאל – מראה יוקרתי / glass */
.booking-dialog{
  position:relative;
  width:100%;
  max-width:520px;
  border-radius:24px;
  padding:26px 28px 22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(250,248,244,.98));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:
    0 22px 45px rgba(15,23,42,.55),
    0 0 0 1px rgba(195,155,100,.35);
  font-family:Heebo,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  z-index:1;
}

/* פס דק בראש – זהב */
.booking-dialog::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px;
  padding:1px;
  background:linear-gradient(135deg, #c39b64, #a5753a);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}

/* כפתור X */
.booking-close{
  position:absolute;
  top:12px;
  left:14px;
  width:30px;
  height:30px;
  border-radius:999px;
  border:0;
  background:rgba(255,255,255,.9);
  box-shadow:0 4px 12px rgba(15,23,42,.25);
  font-size:1.25rem;
  line-height:1;
  cursor:pointer;
  color:var(--muted,#6b7280);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s ease, transform .12s ease, box-shadow .12s ease;
}

.booking-close:hover{
  background:#fff;
  color:var(--text,#111827);
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(15,23,42,.35);
}

.booking-close:active{
  transform:translateY(0);
  box-shadow:0 4px 10px rgba(15,23,42,.25);
}

/* כותרת */
#bookingTitle{
  margin:0 0 4px;
  font-size:1.45rem;
  font-weight:700;
  letter-spacing:.02em;
  color:#111827;
}

/* קו דק מתחת לכותרת */
#bookingTitle + .booking-treatment{
  margin-top:10px;
}

/* סיכום הטיפול – כרטיס יוקרתי */
.booking-treatment{
  margin:0 0 18px;
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(
    90deg,
    rgba(195,155,100,.12),
    rgba(250,248,244,1)
  );
  border:1px solid rgba(195,155,100,.38);
  font-size:.95rem;
  line-height:1.6;
}

.booking-treatment span{
  font-weight:600;
}

/* טופס */
#bookingForm{
  margin-top:2px;
}

/* שורה בטופס */
.booking-row{
  margin-bottom:14px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* שתי עמודות – תאריך+שעה */
.booking-row.two-cols{
  flex-direction:row;
  gap:14px;
}

.booking-row.two-cols > div{
  flex:1;
}

/* לייבלים */
.booking-row label{
  font-size:.9rem;
  font-weight:600;
  color:#374151;
}

/* אינפוטים וטקסט־אזור */
.booking-row input[type="text"],
.booking-row input[type="tel"],
.booking-row input[type="date"],
.booking-row input[type="time"],
.booking-row textarea{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid #d1d5db;
  font-size:.95rem;
  outline:none;
  background:rgba(255,255,255,.96);
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background-color .15s ease,
    transform .08s ease;
}

.booking-row textarea{
  resize:vertical;
  min-height:70px;
}

.booking-row input:focus,
.booking-row textarea:focus{
  border-color:var(--brand,#c39b64);
  box-shadow:0 0 0 1px rgba(195,155,100,.35);
  transform:translateY(-1px);
}

/* משך הטיפול – צ׳יפים יוקרתיים */
.duration-options{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.duration-options label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 14px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:linear-gradient(135deg,#f9fafb,#f3f4f6);
  cursor:pointer;
  font-size:.9rem;
  transition:background .15s ease, border-color .15s ease, transform .08s ease;
}

.duration-options input[type="radio"]{
  accent-color:var(--brand,#c39b64);
}

.duration-options input[type="radio"]:checked + span{
  font-weight:600;
}

/* כפתור שליחה */
.booking-submit{
  width:100%;
  margin-top:10px;
  padding:13px 18px;
  border-radius:999px;
  border:0;
  background:linear-gradient(135deg, var(--brand,#c39b64), var(--brand-2,#a5753a));
  color:#fff;
  font-size:1rem;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 18px 35px rgba(165,117,58,.55);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.booking-submit:hover{
  filter:brightness(1.03);
  transform:translateY(-1px);
  box-shadow:0 22px 40px rgba(165,117,58,.65);
}

.booking-submit:active{
  transform:translateY(0);
  box-shadow:0 12px 24px rgba(165,117,58,.5);
}

/* מובייל */
@media (max-width:600px){
  .booking-modal{
    align-items:flex-start;
    padding:16px;
  }

  .booking-dialog{
    margin-top:40px;
    padding:22px 18px 18px;
    border-radius:20px;
  }

  .booking-row.two-cols{
    flex-direction:column;
    gap:10px;
  }
}

/* ============================
   Status Pages (Success / Cancel) – טקסט ממורכז יוקרתי
   ============================ */

body.cancel-page{
  min-height:100vh;
  margin:0;
  display:flex;
  align-items:center;          /* מרכז אנכי */
  justify-content:center;      /* מרכז אופקי */
  padding:24px 16px;
  background:
    radial-gradient(circle at top, #fffaf3 0, #f3f4f6 40%, #e5e7eb 100%);
  color:var(--text);
}

/* הקופסה של ההודעה (לדוגמה: "התשלום בוטל") */
.status-card{
  max-width:520px;
  width:100%;
  padding:28px 26px 24px;
  border-radius:24px;
  background:#ffffff;
  text-align:center;
  box-shadow:0 22px 45px rgba(15,23,42,.16);
  border:1px solid rgba(195,155,100,.5);
}

/* אייקון עיגול אלגנטי (אם תוסיף span עם class="status-icon") */
.status-icon{
  width:62px;
  height:62px;
  margin:0 auto 16px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle at 30% 20%, #fff7ea, #c39b64);
  color:#fff;
  font-size:30px;
  box-shadow:0 12px 24px rgba(195,155,100,.55);
}

/* כותרת */
.status-title{
  font-size:1.6rem;
  font-weight:700;
  margin:0 0 8px;
  color:#111827;
}

/* טקסט הסבר */
.status-text{
  margin:0 0 18px;
  font-size:1rem;
  line-height:1.7;
  color:#4b5563;
}

/* כפתור חזרה / קישור */
.status-actions{
  margin-top:4px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
}

.status-actions a,
.status-actions button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:9px 18px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-size:.95rem;
  font-weight:600;
  text-decoration:none;
}

.status-actions .primary{
  background:linear-gradient(135deg,var(--brand,#c39b64),var(--brand-2,#a5753a));
  color:#fff;
  box-shadow:0 10px 22px rgba(165,117,58,.5);
}

.status-actions .primary:hover{
  filter:brightness(1.03);
}

.status-actions .ghost{
  background:transparent;
  color:var(--brand-2,#a5753a);
}

/* מובייל קטן – קצת מצמצם */
@media (max-width:480px){
  .status-card{
    padding:22px 18px 20px;
    border-radius:20px;
  }
  .status-title{
    font-size:1.35rem;
  }
}

/* ===== מתגי שפה (דגלים) ===== */
.lang-switch {
  display: flex;
  gap: 8px;
  align-items: center;
}

.lang-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 32px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity .2s ease;
}

.lang-btn:hover {
  opacity: 1;
}

.lang-btn img {
  width: 32px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid #ccc;
  object-fit: cover;
}

/* שפה נוכחית - מודגש */
.lang-btn.active {
  opacity: 1;
  border: 2px solid var(--brand);
  border-radius: 6px;
}

/* התאמה לגלאקסי / מובייל קטן – דגלים במרכז ושבירת שורה נעימה */
@media (max-width: 540px) {
  .lang-switch {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .lang-btn {
    width: 28px;
    height: 20px;
  }
}

.why-slider {
  width: 100%;
  overflow: hidden;
  position: relative;
}
/* ===== WHY-US SLIDER (מבוסס makeSlider) ===== */
.why-us h2{
  text-align:center;
  margin-bottom:12px;
}

.why-slider {
  position: relative;
  width: 100%;
  margin-top: 8px;
  overflow: hidden;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--surface);
  padding: 12px 8px 20px;
  box-sizing: border-box;
}

/* המעטפת עם השקופיות (makeSlider דואג ל-position/opacity) */
.why-slider .slides {
  position: relative;
  min-height: 220px;
}

/* כרטיסים בסליידר מסודרים יפים ובמרכז */
.why-slider .t-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 4px 14px rgba(0,0,0,.04);
  padding: 12px 14px;
  text-align: center;
  align-items: center !important;
}

.why-slider .t-name,
.why-slider .t-meta{
  text-align:center;
}

/* חצים */
.why-slider .prev,
.why-slider .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, transform .2s ease;
  z-index: 5;
}

.why-slider .prev { inset-inline-start: 8px; }
.why-slider .next { inset-inline-end: 8px; }

.why-slider .prev:hover,
.why-slider .next:hover {
  background: var(--brand);
  transform: translateY(-50%) scale(1.05);
}

/* נקודות ניווט */
.why-slider .dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.why-slider .dots button {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: none;
  background: rgba(0,0,0,.16);
  cursor: pointer;
  padding: 0;
}

.why-slider .dots button.active {
  background: var(--brand);
  transform: scale(1.3);
}

/* מובייל – צפוף יותר */
@media (max-width: 768px) {
  .why-slider {
    padding-inline: 6px;
  }

  .why-slider .t-card {
    padding: 10px 12px;
  }

  .why-slider .prev,
  .why-slider .next {
    width: 30px;
    height: 30px;
    font-size: 16px;
  }
}
/* ===== Why-Us – Center CTA Button + Animation ===== */
#why-us .treatment.cta-row {
  justify-content: center !important;
  text-align: center;
  margin-top: 24px;
}

#why-us .treatment.cta-row .button {
  display: inline-block;
  margin-inline: auto;
  padding: 14px 34px;
  font-size: 1.15rem;
  font-weight: 600;
  background: var(--brand);
  color: #fff;
  border-radius: 14px;
  border: none;
  cursor: pointer;
  transition: 
      transform 0.25s ease,
      box-shadow 0.25s ease,
      background 0.25s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}

/* Hover animation—Elegant spa vibe */
#why-us .treatment.cta-row .button:hover {
  transform: translateY(-3px) scale(1.03);
  background: var(--brand-2);
  box-shadow: 0 10px 24px rgba(0,0,0,.17);
}