/* ═══════════════════════════════════════════════════════════
   FCUTZ — Apple Tahoe Liquid Glass Button (vanilla port)
   Architecture :
   - .glass-btn          → coque : position, taille, cursor, transitions
   - .glass-btn-lens     → ENFANT vide injecté par glass-filter.js :
                           backdrop-filter SVG + box-shadow Apple Tahoe
   - .glass-btn::after   → gradient de lumière haute (reflet de surface)
   - .glass-btn > *      → contenu texte/icônes au-dessus (z-index:10)
   ═══════════════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────────────────── */
.glass-btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  color: #F5F0E6;
  background: transparent;
  transition: transform 120ms cubic-bezier(.4,0,.2,1);
  -webkit-tap-highlight-color: transparent;
}

/* ── Lens : élément vide portant l'effet liquid glass ─────── */
.glass-btn-lens {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;

  /* Couleur de base neutre — surchargée par les variantes */
  background-color: rgba(255, 255, 255, 0.05);

  /* Chrome/Edge : displacement map SVG + blur + saturation       */
  /* Safari/iOS  : blur + saturation uniquement (dégradé gracieux) */
  backdrop-filter:          blur(12px) url(#fcutz-liquid-glass) saturate(160%);
  -webkit-backdrop-filter:  blur(12px) saturate(160%);

  /* Stack Apple Tahoe — reflets intérieurs + ombre portée ────── */
  box-shadow:
    /* Bord lumineux global */
    inset 0 0 0 1px rgba(255,255,255,.10),
    /* Reflet haut-gauche */
    inset  1.8px  3px   0px -2px rgba(255,255,255,.90),
    /* Reflet bas-droite */
    inset -2px   -2px   0px -2px rgba(255,255,255,.80),
    /* Lueur diffuse haute */
    inset -3px   -8px   1px -6px rgba(255,255,255,.60),
    /* Ombre interne légère */
    inset -0.3px -1px   4px  0px rgba(0,0,0,.12),
    inset -1.5px  2.5px 0px -2px rgba(0,0,0,.20),
    inset  0px    3px   4px -2px rgba(0,0,0,.20),
    inset  2px   -6.5px 1px -4px rgba(0,0,0,.10),
    /* Ombre portée */
    0px 1px  5px  0px rgba(0,0,0,.18),
    0px 6px  16px 0px rgba(0,0,0,.14);

  transition:
    background-color 300ms cubic-bezier(.4,0,.2,1),
    box-shadow       300ms cubic-bezier(.4,0,.2,1);
}

/* ── Gradient de surface (reflet supérieur) ───────────────── */
.glass-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.18) 0%,
    rgba(255,255,255,.05) 45%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Contenu au-dessus de tout ────────────────────────────── */
.glass-btn > *:not(.glass-btn-lens) {
  position: relative;
  z-index: 10;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* ── Variante or (booking) ────────────────────────────────── */
.glass-btn.glass-btn--gold .glass-btn-lens {
  background-color: rgba(200, 168, 90, .12);
  box-shadow:
    inset 0 0 0 1px rgba(200,168,90,.30),
    inset  1.8px  3px   0px -2px rgba(255,255,255,.85),
    inset -2px   -2px   0px -2px rgba(255,255,255,.75),
    inset -3px   -8px   1px -6px rgba(255,255,255,.55),
    inset -0.3px -1px   4px  0px rgba(0,0,0,.12),
    inset -1.5px  2.5px 0px -2px rgba(0,0,0,.18),
    inset  0px    3px   4px -2px rgba(0,0,0,.18),
    inset  2px   -6.5px 1px -4px rgba(0,0,0,.08),
    0px 1px  5px  0px rgba(200,168,90,.20),
    0px 6px  20px 0px rgba(200,168,90,.15);
}

/* ── Variante violet (dashboard) ──────────────────────────── */
.glass-btn.glass-btn--violet .glass-btn-lens {
  background-color: rgba(167, 139, 250, .10);
  box-shadow:
    inset 0 0 0 1px rgba(167,139,250,.30),
    inset  1.8px  3px   0px -2px rgba(255,255,255,.85),
    inset -2px   -2px   0px -2px rgba(255,255,255,.75),
    inset -3px   -8px   1px -6px rgba(255,255,255,.55),
    inset -0.3px -1px   4px  0px rgba(0,0,0,.12),
    inset -1.5px  2.5px 0px -2px rgba(0,0,0,.18),
    inset  0px    3px   4px -2px rgba(0,0,0,.18),
    inset  2px   -6.5px 1px -4px rgba(0,0,0,.08),
    0px 1px  5px  0px rgba(109,40,217,.18),
    0px 6px  20px 0px rgba(109,40,217,.14);
}

/* ── États interactifs ────────────────────────────────────── */
@media (hover: hover) {
  .glass-btn:not(:disabled):hover {
    transform: scale(1.03) translateY(-1px);
  }
  .glass-btn.glass-btn--gold:not(:disabled):hover .glass-btn-lens {
    background-color: rgba(200, 168, 90, .18);
    box-shadow:
      inset 0 0 0 1px rgba(200,168,90,.40),
      inset  1.8px  3px   0px -2px rgba(255,255,255,.92),
      inset -2px   -2px   0px -2px rgba(255,255,255,.82),
      inset -3px   -8px   1px -6px rgba(255,255,255,.62),
      inset -0.3px -1px   4px  0px rgba(0,0,0,.10),
      inset -1.5px  2.5px 0px -2px rgba(0,0,0,.16),
      inset  0px    3px   4px -2px rgba(0,0,0,.16),
      inset  2px   -6.5px 1px -4px rgba(0,0,0,.07),
      0px 2px  8px  0px rgba(200,168,90,.30),
      0px 8px  28px 0px rgba(200,168,90,.22);
  }
  .glass-btn.glass-btn--violet:not(:disabled):hover .glass-btn-lens {
    background-color: rgba(167, 139, 250, .16);
    box-shadow:
      inset 0 0 0 1px rgba(167,139,250,.40),
      inset  1.8px  3px   0px -2px rgba(255,255,255,.92),
      inset -2px   -2px   0px -2px rgba(255,255,255,.82),
      inset -3px   -8px   1px -6px rgba(255,255,255,.62),
      inset -0.3px -1px   4px  0px rgba(0,0,0,.10),
      inset -1.5px  2.5px 0px -2px rgba(0,0,0,.16),
      inset  0px    3px   4px -2px rgba(0,0,0,.16),
      inset  2px   -6.5px 1px -4px rgba(0,0,0,.07),
      0px 2px  8px  0px rgba(109,40,217,.28),
      0px 8px  28px 0px rgba(109,40,217,.20);
  }
}

.glass-btn:not(:disabled):active {
  transform: scale(0.96);
  transition-duration: 60ms;
}

.glass-btn:focus-visible {
  outline: 2px solid rgba(255,255,255,.5);
  outline-offset: 3px;
}

.glass-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* ── Tailles ──────────────────────────────────────────────── */
.glass-btn.glass-btn--sm { padding: 7px 14px; font-size: 12px; border-radius: 10px; }
.glass-btn.glass-btn--lg { padding: 13px 28px; font-size: 15px; border-radius: 18px; }