/* === VARIABLES (colors adapted to your site) === */
:root{
  --fnav-accent: #e54c2a;              /* rouge/orangé accent */
  --fnav-bg: rgba(255, 255, 255, 0.96);
  --fnav-text: #222;
  --fnav-muted: #aaa;
  --fnav-shadow: 0 8px 24px rgba(0,0,0,.12);
  --fnav-radius: 14px;
  --fnav-gap: 10px;
  --fnav-z: 10050;
}

/* Positionne le FAB et le panneau en haut à gauche */
/*.floating-nav{
  position: fixed;
  top: 30px;
  left: 10px;
  right: auto;
  bottom: auto;
  z-index: var(--fnav-z);
  display: grid;
  gap: var(--fnav-gap);
  align-items: start;
}*/

.floating-nav{
  position: fixed;
  bottom: 30px;
  left: 20px;
  right: auto;
  top: auto;
  z-index: var(--fnav-z);
  display: grid;
  gap: var(--fnav-gap);
  align-items: end; /* place le panneau au-dessus du bouton */
}

/* === BUTTON (FAB) === */
.fnav-fab{
  pointer-events:auto;
  background: var(--fnav-accent);
  color: #fff;
  width: 54px; height: 54px;
  border-radius: 50%;
  box-shadow: var(--fnav-shadow);
  transition: transform .2s ease, box-shadow .2s ease;
  border: 0; cursor: pointer;
}
.fnav-fab:hover{ transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,.18); }
.fnav-fab svg{ width:24px; height:24px; stroke:#fff; display:block; margin:auto; }

/* === PANEL (menu container) === */
.fnav-panel{
  /* position (sous le bouton en haut-gauche) */
  position: absolute;
  left: 0;
  top: 72px;
  right: auto;
  bottom: auto;

  pointer-events: auto;
  max-height: min(60vh, 520px);
  width: clamp(200px, 20vw, 260px);   /* panel étroit par défaut */
  overflow: hidden;

  /* style & organique */
  border: none;                        /* pas de bordure blanche */
  border-radius: 20px;                 /* coins doux */
  background: var(--fnav-bg);
  box-shadow: 0 12px 36px rgba(0,0,0,.2);
  backdrop-filter: blur(10px);

  /* animation d’ouverture */
  opacity: 0;
  transform: translateY(8px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
  visibility: hidden;
}


.fnav-panel{
  position: absolute;
  left: 0;
  bottom: 72px;    /* espace au-dessus du bouton */
  top: auto;
  right: auto;
}

.fnav-panel.open{ opacity:1; transform:translateY(0) scale(1); visibility:visible; }

/* petit “blob” organique */
.fnav-panel::before{
  content:"";
  position:absolute;
  top:-22px; left:-18px;
  width:120px; height:120px;
  background: radial-gradient(120px 120px at 60% 60%, rgba(229,76,42,.12), transparent 60%);
  filter: blur(2px);
  pointer-events:none;
}

/* === HEADER === */
.fnav-header{
  background: var(--fnav-accent);
  color:#fff;
  padding:12px 16px;
  font-weight:600;
  font-size:15px;
  border:none;
  border-radius:18px 18px 0 0;
  display:flex; align-items:center; justify-content:space-between;
}
.fnav-header span{ color:#fff; }
.fnav-close{ background:none; border:0; color:#fff; opacity:.9; font-size:16px; cursor:pointer; }
.fnav-close:hover{ opacity:1; }

/* === LIST === */
.fnav-list{ list-style:none; margin:0; padding:8px; overflow:auto; background-color: #f5f0e8; }
.fnav-list li{ list-style:none; }

/* === ITEMS === */
.fnav-item{
  display:flex; gap:10px; align-items:center;
  padding:8px 12px;
  color: var(--fnav-text);
  font-size:14px;
  border-radius:10px;                  /* arrondi discret */
  text-decoration:none;
  transition: background .2s ease, color .2s ease;
}
.fnav-item:hover{ background: rgba(229,76,42,.10); }
.fnav-item[aria-current="true"]{
  color: var(--fnav-accent);
  background: rgba(229,76,42,.12);
  font-weight:600;
  border-radius:10px;
}

/* enlever les points */
.fnav-dot{ display:none !important; }

/* === FOOTER === */
.fnav-footer{
  font-size:12px;
  padding:8px 12px;
  color:#666;
  border-top:1px solid rgba(0,0,0,.06);
  border-radius:0 0 20px 20px;
  background: linear-gradient(to bottom, rgba(255,255,255,.6), rgba(255,255,255,.85));
  display:flex; align-items:center; justify-content:space-between;
}

/* === PROGRESS BAR (right edge) === */
.fnav-progress{
  position: fixed;
  inset: 0 0 auto auto;
  width:3px;
  height:22vh;
  margin:12px;
  border-radius:999px;
  background:#eee;
  overflow:hidden;
  z-index: calc(var(--fnav-z) - 1);
}
.fnav-progress>span{
  display:block; width:100%; height:0%;
  background: var(--fnav-accent);
  transition: height .2s ease;
}

/* === FADE BUTTON ON IDLE (optional) === */
.floating-nav.idle .fnav-fab{ opacity:.75; }

/* === OFFSET FOR FIXED HEADER (Bridge/Qode) === */
section[id], [id].vc_row, [id].elementor-section{ scroll-margin-top: var(--anchor-offset, 110px); }

/* === RESPONSIVE WIDTHS === */
/* écrans moyens */
@media (min-width:1024px){
  .fnav-panel{ width: clamp(260px, 22vw, 160px); }
}
/* grands écrans */
@media (min-width:1440px){
  .fnav-panel{ width: clamp(300px, 24vw, 380px); }
}

/* === MOBILE: bottom sheet === */
@media (max-width:760px){
  .floating-nav{ inset:auto 16px 16px 16px; }   /* place le conteneur en bas */
  .fnav-panel{
    right:50%;
    left:auto;
    top:auto;
    bottom:84px;
    transform: translate(50%,8px) scale(.98);
    width:min(92vw, 360px);                      /* panel un peu plus étroit sur mobile */
  }
  .fnav-panel.open{ transform: translate(50%,0) scale(1); }
  html[lang="fa-IR"] .fnav-panel.open {transform: translateY(0) scale(1) !important;}
  .fnav-fab{ width:52px; height:52px; }
}