/* Fluid Bartenders — Contact Leads
   Floating button + slide-in panel + inline form.
   All scoped under .fcl so it plays nice with any theme. */

.fcl{
  --fcl-bg:#ffffff;
  --fcl-ink:#1a1a1a;
  --fcl-ink-soft:#5f6773;
  --fcl-line:#ececec;
  --fcl-field:#fafafa;
  --fcl-accent:#1a1a1a;          /* near-black "ink" brand accent */
  --fcl-accent-ink:#ffffff;
  --fcl-brand:rgb(190,32,47);    /* Fluid Bartenders brand red */
  --fcl-brand-soft:rgba(190,32,47,.12);
  --fcl-danger:#d63638;
  --fcl-shadow:0 12px 40px rgba(20,20,40,.12);
  --fcl-shadow-h:0 18px 50px rgba(20,20,40,.18);
  --fcl-radius:18px;
  box-sizing:border-box;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* Brand-red highlights on every interactive accent (date/time pickers,
   selection, focus rings, buttons). */
.fcl input[type="date"],
.fcl input[type="time"],
.fcl input[type="number"]{accent-color:var(--fcl-brand);}
.fcl ::selection{background:var(--fcl-brand);color:#fff;}
.fcl ::-moz-selection{background:var(--fcl-brand);color:#fff;}
.fcl *,.fcl *::before,.fcl *::after{box-sizing:border-box;}

/* ---------- Floating widget container ---------- */
.fcl-floating{
  position:fixed;
  bottom:20px;
  z-index:99998;
}
.fcl-floating.fcl-left{left:20px;}
.fcl-floating.fcl-right{right:20px;}
/* When the floating pill is off, the container still hosts the popup but
   needs no position/size of its own. */
.fcl-floating.fcl-no-pill{
  position:static;
  width:0;height:0;
}

/* ---------- Trigger button ---------- */
.fcl-trigger{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--fcl-brand);
  color:#fff;
  border:none;
  padding:13px 20px;
  border-radius:999px;
  font:inherit;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(190,32,47,.32);
  transition:transform .25s ease,box-shadow .25s ease,opacity .25s ease;
}
.fcl-trigger:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(190,32,47,.42);}
.fcl-trigger:focus-visible{outline:3px solid var(--fcl-brand);outline-offset:3px;}
.fcl-trigger-icon{flex:none;}
.fcl-floating.is-open .fcl-trigger{opacity:0;pointer-events:none;transform:translateY(6px);}

/* ---------- Backdrop ---------- */
.fcl-backdrop{
  position:fixed;inset:0;
  background:rgba(15,17,21,.45);
  z-index:99997;
  opacity:0;
  transition:opacity .25s ease;
}
.fcl-floating.is-open .fcl-backdrop{
  opacity:1;
}

/* ---------- Panel ---------- */
.fcl-panel{
  position:absolute;
  bottom:0;
  width:min(430px,calc(100vw - 40px));
  max-height:calc(100vh - 60px);
  background:var(--fcl-bg);
  color:var(--fcl-ink);
  border-radius:var(--fcl-radius) var(--fcl-radius) 0 0;
  box-shadow:var(--fcl-shadow-h);
  display:flex;flex-direction:column;
  overflow:hidden;
  transform:translateY(110%);
  transition:transform .35s cubic-bezier(.22,1,.36,1);
  z-index:99999;
}
.fcl-floating.fcl-left .fcl-panel{left:0;}
.fcl-floating.fcl-right .fcl-panel{right:0;}
.fcl-floating.is-open .fcl-panel{transform:translateY(0);}

/* The hidden attribute should fully hide the panel before first open. */
.fcl-panel[hidden]{display:none;}
.fcl-floating.is-open .fcl-panel[hidden]{display:flex;}

/* ---------- Panel header ---------- */
.fcl-panel-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:18px 20px 14px;
  border-bottom:1px solid var(--fcl-line);
}
.fcl-panel-title{font-size:17px;font-weight:700;line-height:1.2;}
.fcl-panel-sub{font-size:13px;color:var(--fcl-ink-soft);margin-top:3px;}
.fcl-close{
  flex:none;
  width:34px;height:34px;border-radius:50%;
  border:none;background:#f1f2f4;color:var(--fcl-ink);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  padding:0;line-height:0;
  transition:background .2s ease;
}
/* Center the X glyph precisely inside its circle. */
.fcl-close svg{width:18px;height:18px;display:block;}
.fcl-close:hover{background:#e5e7ea;}
.fcl-close:focus-visible{outline:3px solid var(--fcl-accent);outline-offset:2px;}

/* ---------- Panel body (scrolls) ---------- */
.fcl-panel-body{padding:8px 20px 22px;overflow-y:auto;-webkit-overflow-scrolling:touch;}

/* ---------- Form ---------- */
.fcl-form{display:block;}
.fcl-fieldset{
  border:none;padding:12px 0 4px;margin:0;
}
.fcl-legend{
  display:block;width:100%;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fcl-ink-soft);
  padding-bottom:8px;margin-bottom:4px;
  border-bottom:1px solid var(--fcl-line);
}
.fcl-row{display:block;margin-bottom:12px;}
.fcl-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fcl-row-2 .fcl-field{margin-bottom:0;}

.fcl-field{display:block;}
.fcl-label{display:block;font-size:13px;font-weight:600;color:var(--fcl-ink);margin-bottom:5px;}
.fcl-req{color:var(--fcl-danger);}
/* High-specificity selectors beat theme rules like ".elementor input" or
   "body input" that would otherwise repaint our fields and hide typed text. */
.fcl .fcl-input,
.fcl-form .fcl-input{
  width:100%;
  font-family:inherit;font-size:15px;font-weight:400;
  color:var(--fcl-ink) !important;
  background-color:var(--fcl-field);
  border:1px solid var(--fcl-line);
  border-radius:10px;
  padding:11px 13px;
  -webkit-appearance:none;appearance:none;
  transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.fcl .fcl-input::placeholder,
.fcl-form .fcl-input::placeholder{color:#9aa3b2;opacity:1;}
.fcl .fcl-input:focus,
.fcl-form .fcl-input:focus{
  outline:none;
  background-color:var(--fcl-focus-bg,#ffffff);
  border-color:var(--fcl-brand);
  box-shadow:0 0 0 3px var(--fcl-brand-soft);
  color:var(--fcl-ink) !important;
}
/* Make sure typed text stays visible even in the dark theme. */
.fcl select.fcl-input,
.fcl select.fcl-input option{color:var(--fcl-ink);background-color:var(--fcl-field);}
textarea.fcl-input{resize:vertical;min-height:72px;}

/* Browser autofill (Chrome/Edge/Safari) forces its own colors and ignores
   our custom properties — neutralize it so typed text stays readable. */
.fcl .fcl-input:-webkit-autofill,
.fcl .fcl-input:-webkit-autofill:hover,
.fcl .fcl-input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--fcl-ink);
  -webkit-box-shadow:0 0 0 1000px var(--fcl-field) inset;
  caret-color:var(--fcl-ink);
  transition:background-color 9999s ease-in-out 0s;
}

/* ---------- Actions ---------- */
.fcl-actions{margin-top:16px;}
.fcl-submit{
  width:100%;
  background:var(--fcl-brand);
  color:#fff;
  border:none;
  padding:14px 18px;
  border-radius:12px;
  font:inherit;font-size:15px;font-weight:700;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .2s ease,opacity .2s ease;
  box-shadow:0 8px 22px rgba(190,32,47,.32);
}
.fcl-submit:hover{transform:translateY(-1px);box-shadow:0 12px 28px rgba(190,32,47,.40);}
.fcl-submit:focus-visible{outline:3px solid var(--fcl-brand);outline-offset:3px;}
.fcl-submit:disabled{opacity:.6;cursor:progress;}

/* ---------- Inline message / success / error ---------- */
.fcl-msg{
  margin-top:14px;
  padding:12px 14px;
  border-radius:10px;
  font-size:14px;
}
.fcl-msg.fcl-ok{background:#ecfdf3;color:#05603a;border:1px solid #abefc6;}
.fcl-msg.fcl-err{background:#fef0f0;color:#8a1f1f;border:1px solid #f9c6c6;}
.fcl-msg:not([hidden]){display:block;}

/* Success state swaps the whole form body for a thank-you. */
.fcl-form.is-sent .fcl-fieldset,
.fcl-form.is-sent .fcl-actions,
.fcl-form.is-sent .fcl-captcha{display:none;}

/* ---------- hCaptcha ---------- */
.fcl-captcha{margin-top:14px;display:flex;justify-content:flex-start;}

/* ---------- Honeypot (hidden from humans, visible to bots) ---------- */
.fcl-hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px;height:1px;overflow:hidden;
}

/* ---------- Inline (shortcode) variant ---------- */
.fcl-inline{
  max-width:560px;margin:0 auto;padding:8px 0;
  background:var(--fcl-bg);color:var(--fcl-ink);
}
.fcl-inline .fcl-panel-head,
.fcl-inline .fcl-backdrop,
.fcl-inline .fcl-trigger{display:none;}

/* ---------- Custom open button (shortcode / Elementor class) ---------- */
.fcl-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--fcl-brand);
  color:#fff;
  border:none;
  padding:13px 24px;
  border-radius:12px;
  font:inherit;font-size:15px;font-weight:600;
  cursor:pointer;text-decoration:none;
  transition:transform .15s ease,box-shadow .2s ease,opacity .2s ease;
  box-shadow:0 8px 22px rgba(190,32,47,.32);
}
.fcl-btn:hover{transform:translateY(-1px);color:#fff;text-decoration:none;box-shadow:0 12px 28px rgba(190,32,47,.40);}
.fcl-btn:focus-visible{outline:3px solid var(--fcl-brand);outline-offset:3px;}

/* ---------- Dark mode (auto) ---------- */
@media (prefers-color-scheme: dark){
  .fcl{
    --fcl-bg:#171a21;
    --fcl-ink:#f3f5f8;
    --fcl-ink-soft:#a7b0bd;
    --fcl-line:#2a2f3a;
    --fcl-field:#21252f;
    --fcl-accent:#f3f5f8;
    --fcl-accent-ink:#171a21;
  }
  .fcl-close{background:#2a2f3a;color:#f3f5f8;}
  .fcl-close:hover{background:#353b48;}
  /* Keep the focus background dark instead of flashing white. */
  .fcl{--fcl-focus-bg:#2a2f3a;}
  .fcl-msg.fcl-ok{background:#0f2a1c;color:#7ee2a8;border-color:#1f5135;}
  .fcl-msg.fcl-err{background:#2a1414;color:#f5a3a3;border-color:#5a2424;}
}

/* ---------- Mobile ---------- */
@media (max-width:480px){
  .fcl-floating{bottom:0;left:0 !important;right:0 !important;}
  .fcl-floating.fcl-right{left:0;}
  .fcl-trigger{
    border-radius:0;
    width:100%;
    justify-content:center;
    padding:15px 20px;
  }
  .fcl-panel{
    width:100%;
    border-radius:var(--fcl-radius) var(--fcl-radius) 0 0;
    max-height:calc(100vh - 56px);
  }
  .fcl-row-2{grid-template-columns:1fr;}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .fcl *,
  .fcl *::before,
  .fcl *::after{
    transition-duration:.001ms !important;
    animation-duration:.001ms !important;
  }
}