/* =====================================================================
   FloatingEnquiryWidget — "Enquire" capsule (desktop popover, mobile
   bottom sheet). Built on main.css tokens. Markup: includes/floating-enquiry.php.

   Layering (main.css): header 900 · utility bar / mobile nav 950 ·
   login overlay 1000 / panel 1001. The closed capsule sits below the
   header and every drawer; the open mobile sheet sits above the header
   but below the mobile nav and the login dialog.
   ===================================================================== */
:root {
  --z-enquiry: 890;
  --z-enquiry-sheet: 940;
  --fe-gap: 28px;
  --fe-ease: cubic-bezier(.2, .7, .2, 1);
}

.fe[hidden] { display: none !important; }
.fe { position: fixed; right: var(--fe-gap); bottom: calc(var(--fe-gap) + env(safe-area-inset-bottom, 0px)); z-index: var(--z-enquiry); font-family: var(--font-sans); }
.fe.is-open { z-index: var(--z-enquiry-sheet); }

/* ---- Trigger capsule ---- */
.fe-trigger {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 8px 0 18px;
  border-radius: 999px; border: 1px solid rgba(250, 249, 245, 0.14);
  background: linear-gradient(180deg, #11322c, var(--ink));
  color: #fff; font-size: 0.94rem; font-weight: 600; letter-spacing: 0.005em; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 12px 30px -12px rgba(10, 33, 29, 0.55), 0 2px 6px rgba(10, 33, 29, 0.12);
  transition: transform 200ms var(--fe-ease), box-shadow 200ms var(--fe-ease), background 200ms var(--fe-ease);
}
.fe-trigger:hover { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 18px 36px -14px rgba(10, 33, 29, 0.6), 0 3px 8px rgba(10, 33, 29, 0.14); }
.fe-trigger:focus-visible { outline: 2px solid var(--teal-300); outline-offset: 3px; }

.fe-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-300); flex-shrink: 0; }
.fe-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid rgba(109, 213, 205, 0.55); animation: fe-pulse 3.2s ease-out infinite; }
@keyframes fe-pulse { 0% { transform: scale(0.6); opacity: 0.9; } 70%, 100% { transform: scale(1.5); opacity: 0; } }

/* Label: full contextual wording on desktop, compact "Enquire" on phones
   (the bottom sheet then shows the full contextual title). */
.fe-label-short { display: none; }
.fe-trigger-label { white-space: nowrap; }
.fe-trigger-icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 166, 157, 0.2); color: var(--teal-300); transition: background 200ms var(--fe-ease); }
.fe-trigger:hover .fe-trigger-icon { background: var(--orange-500); color: #fff; }
.fe-chev { transition: transform 220ms var(--fe-ease); transform-origin: 12px 12px; }
.fe.is-open .fe-chev { transform: rotate(180deg); }

/* ---- Panel (desktop popover) ---- */
.fe-panel {
  position: absolute; right: 0; bottom: calc(100% + 12px); width: 360px; max-width: calc(100vw - 32px);
  background: var(--paper); color: var(--ink); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 30px 60px -24px rgba(10, 33, 29, 0.35), 0 8px 18px -8px rgba(10, 33, 29, 0.12);
  overflow: hidden; transform-origin: 100% 100%;
  opacity: 0; transform: translateY(8px) scale(0.98); visibility: hidden; pointer-events: none;
  transition: opacity 200ms var(--fe-ease), transform 220ms var(--fe-ease), visibility 0s linear 220ms;
}
.fe.is-open .fe-panel { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }

.fe-grabber { display: none; }
.fe-head { position: relative; padding: 20px 56px 16px 22px; background: linear-gradient(160deg, var(--ink), #123a33); color: #fff; }
.fe-head::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--teal-500), var(--orange-500)); opacity: 0.9; }
.fe-eyebrow { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-300); }
.fe-title { margin-top: 6px; font-family: var(--font-serif); font-size: 1.24rem; font-weight: 500; line-height: 1.25; color: #fff; text-wrap: balance; }
.fe-desc { margin-top: 6px; font-size: 0.82rem; color: rgba(250, 249, 245, 0.7); }
.fe-x {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid rgba(250, 249, 245, 0.18); background: transparent; color: rgba(250, 249, 245, 0.8);
  cursor: pointer; transition: background 160ms, color 160ms;
}
.fe-x:hover { background: rgba(250, 249, 245, 0.1); color: #fff; }
.fe-x:focus-visible { outline: 2px solid var(--teal-300); outline-offset: 2px; }

.fe-list { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; }
.fe-action {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 14px;
  min-height: 60px; padding: 10px 12px; border-radius: 14px; color: var(--ink); text-decoration: none;
  transition: background 160ms var(--fe-ease);
}
.fe-action:hover { background: var(--teal-50); }
.fe-action:focus-visible { outline: 2px solid var(--teal-500); outline-offset: -2px; background: var(--teal-50); }
.fe-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; border: 1px solid var(--border); color: var(--teal-700); transition: border-color 160ms; }
.fe-icon-wa { color: #1f9d55; }
.fe-action:hover .fe-icon { border-color: var(--teal-100); }
.fe-text { display: flex; flex-direction: column; min-width: 0; }
.fe-text strong { font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
.fe-text span { font-size: 0.82rem; color: var(--text-muted); line-height: 1.35; }
.fe-text em { font-style: normal; margin-top: 3px; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.02em; color: var(--teal-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-go { color: var(--grey-400); transition: transform 160ms var(--fe-ease), color 160ms; }
.fe-action:hover .fe-go, .fe-action:focus-visible .fe-go { color: var(--teal-700); transform: translateX(3px); }

.fe-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px 16px; border-top: 1px solid var(--border); }
.fe-form-link { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; color: var(--teal-700); text-decoration: none; }
.fe-form-link svg { width: 14px; height: 14px; transition: transform 160ms var(--fe-ease); }
.fe-form-link:hover svg { transform: translateX(3px); }
.fe-form-link:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 3px; border-radius: 4px; }
.fe-close-btn { display: none; }

.fe-backdrop { display: none; }

/* ---- Mobile: compact capsule + bottom sheet ---- */
@media (max-width: 640px) {
  :root { --fe-gap: 16px; }
  .fe-trigger { height: 46px; padding: 0 6px 0 16px; font-size: 0.9rem; }
  .fe-label-full { display: none; }
  .fe-label-short { display: inline; }
  .fe-trigger-icon { width: 34px; height: 34px; }

  .fe-backdrop {
    display: block; position: fixed; inset: 0; z-index: 0;
    background: rgba(10, 33, 29, 0.5); opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 220ms var(--fe-ease), visibility 0s linear 220ms;
  }
  .fe.is-open .fe-backdrop { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }

  .fe-panel {
    position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: calc(100dvh - 48px); overflow-y: auto;
    z-index: 1; border-radius: 22px 22px 0 0; border-bottom: none;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%); opacity: 1; transform-origin: 50% 100%;
    transition: transform 280ms var(--fe-ease), visibility 0s linear 280ms;
  }
  .fe.is-open .fe-panel { transform: none; transition: transform 280ms var(--fe-ease), visibility 0s; }
  .fe-grabber { display: block; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 4px; background: rgba(250, 249, 245, 0.35); z-index: 1; }
  .fe-head { padding: 26px 60px 18px 20px; }
  .fe-title { font-size: 1.3rem; }
  .fe-list { padding: 10px; }
  .fe-action { min-height: 68px; }
  .fe-foot { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 16px 16px; }
  .fe-form-link { justify-content: center; padding: 8px 0; }
  .fe-close-btn {
    display: block; height: 48px; border-radius: 14px; border: 1px solid var(--border); background: #fff;
    font: 600 0.92rem var(--font-sans); color: var(--ink); cursor: pointer;
  }
  .fe-close-btn:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }
  .fe.is-open .fe-trigger { opacity: 0; pointer-events: none; }
}

html.fe-lock, html.fe-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .fe-dot::after { animation: none; display: none; }
  .fe-trigger, .fe-panel, .fe-backdrop, .fe-chev, .fe-go { transition: none !important; }
  .fe-trigger:hover { transform: none; }
}

@media print { .fe { display: none; } }