/* ==================================================================
   The Boss Digital Lead Qualifier — front-end styles
   Plain comparison-table style: dark background, thin grey borders,
   one tick/cross per row. No cards, no pills, no blue UI.

   Every colour below is a CSS custom property with a sane fallback
   value here, and the admin's chosen colours (Settings → Design &
   Colours) override these on :root via an inline <style> block the
   plugin attaches to this stylesheet's handle — so this file itself
   never needs editing to reskin the qualifier.

   NOTE ON SCOPING: the popup markup is moved to <body> at runtime by
   frontend.js (so it can't get clipped by a theme/page-builder section
   using overflow/transform). That means its selectors are written as
   standalone classes (.bdlq-modal, .bdlq-modal-close, etc.) rather
   than nested under .bdlq-qualify, since class selectors don't care
   about DOM ancestry but descendant-combinator selectors do. Custom
   properties live on :root for the same reason.
   ================================================================== */

:root{
  --bdlq-font-head: 'Sora', sans-serif;
  --bdlq-font-body: 'Inter', sans-serif;
  --bdlq-ease:      cubic-bezier(0.22, 1, 0.36, 1);

  /* Main section */
  --bdlq-section-bg: #0a0a0b;

  /* Table */
  --bdlq-table-bg:          #121214;
  --bdlq-table-border:      #29292f;
  --bdlq-table-header-bg:   #121214;
  --bdlq-table-header-text: #9a9aa1;
  --bdlq-question-text:     #f3f2ee;
  --bdlq-row-bg:            #121214;
  --bdlq-row-alt-bg:        #0e0e10;

  /* Yes / Tick */
  --bdlq-tick-default:      #5f5f66;
  --bdlq-tick-active:       #37c98d;
  --bdlq-tick-active-bg:    #173327;
  --bdlq-tick-active-border:#37c98d;

  /* No / Cross */
  --bdlq-cross-default:      #5f5f66;
  --bdlq-cross-active:       #e0645a;
  --bdlq-cross-active-bg:    #331e1c;
  --bdlq-cross-active-border:#e0645a;

  /* Verify button */
  --bdlq-btn-bg:           #37c98d;
  --bdlq-btn-text:         #0a0a0b;
  --bdlq-btn-border:       #37c98d;
  --bdlq-btn-hover-bg:     #29a876;
  --bdlq-btn-hover-text:   #0a0a0b;
  --bdlq-btn-hover-border: #29a876;

  /* Popup */
  --bdlq-popup-bg:               #121214;
  --bdlq-popup-border:           #29292f;
  --bdlq-popup-heading:          #f3f2ee;
  --bdlq-popup-text:             #9a9aa1;
  --bdlq-popup-overlay:          rgba(5,6,10,0.78);
  --bdlq-popup-close-color:      #9a9aa1;
  --bdlq-popup-close-bg:         #0a0a0b;
  --bdlq-popup-close-hover-color:#e0645a;
  --bdlq-popup-close-hover-bg:   #331e1c;

  /* Phone CTA */
  --bdlq-phone-bg:            #16261f;
  --bdlq-phone-text:          #f3f2ee;
  --bdlq-phone-border:        #37c98d;
  --bdlq-phone-hover-bg:      #1e3327;
  --bdlq-phone-hover-text:    #f3f2ee;
  --bdlq-phone-hover-border:  #37c98d;
}

.bdlq-qualify,
.bdlq-qualify *,
.bdlq-modal,
.bdlq-modal *{
  box-sizing:border-box;
}

/*
 * Defensive reset: some themes apply their own global styling to every
 * <button> and <a> on the site (often with !important, e.g. a "global
 * button colour" setting), which otherwise paints our tick/cross
 * controls, CTA, and popup links in the theme's colour instead of
 * ours. Strip inherited author styling back to the browser default
 * first, then our own rules below (which come later and are at least
 * as specific) re-apply our intended look on top.
 */
.bdlq-qualify button,
.bdlq-qualify a,
.bdlq-modal button,
.bdlq-modal a{
  all:revert;
  box-sizing:border-box;
}

.bdlq-qualify{
  position:relative;
  font-family:var(--bdlq-font-body);
  background:var(--bdlq-section-bg);
  padding:32px;
  overflow-x:hidden;
  max-width:100%;
}

.bdlq-wrap{
  max-width:1080px;
  margin:0 auto;
}

/* ============================================================
   TABLE
   ============================================================ */
.bdlq-table-wrap{
  border:1px solid var(--bdlq-table-border);
  border-radius:10px;
  overflow:hidden;
  background:var(--bdlq-table-bg);
}

.bdlq-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.bdlq-table thead th{
  text-align:left;
  font-family:var(--bdlq-font-head);
  font-weight:600;
  font-size:12.5px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--bdlq-table-header-text) !important;
  padding:20px 24px;
  border-bottom:1px solid var(--bdlq-table-border);
  background:var(--bdlq-table-header-bg) !important;
}

.bdlq-th-req{ width:58%; }
.bdlq-th-answer{
  width:21%;
  text-align:center;
}

.bdlq-table tbody tr{
  border-bottom:1px solid var(--bdlq-table-border);
  background:var(--bdlq-row-bg);
  transition:background-color .15s var(--bdlq-ease);
}

.bdlq-table tbody tr:last-child{ border-bottom:none; }
.bdlq-table tbody tr:nth-child(even){ background:var(--bdlq-row-alt-bg); }

.bdlq-qualify:not(.bdlq-hover-off) .bdlq-table tbody tr:hover{ filter:brightness(1.08); }

.bdlq-req-cell{
  padding:18px 24px;
  font-size:14.5px;
  font-weight:500;
  color:var(--bdlq-question-text) !important;
  line-height:1.5;
  overflow-wrap:break-word;
  word-break:break-word;
  hyphens:auto;
}

.bdlq-answer-cell{
  padding:14px 12px;
  text-align:center;
  vertical-align:middle;
}

/*
 * The YES/NO controls: a small circular icon button whose ONLY job is
 * to show a tick or cross clearly. Every visual property here is
 * locked with !important and a scoped, multi-class selector so a
 * theme's global button skin (the classic symptom: everything turns
 * into a blue/cyan pill) can never bleed through.
 */
.bdlq-qualify .bdlq-table-wrap .bdlq-answer-btn{
  width:36px !important;
  height:36px !important;
  min-width:36px !important;
  border-radius:50% !important;
  border:1.5px solid var(--bdlq-table-border) !important;
  background:transparent !important;
  background-image:none !important;
  box-shadow:none !important;
  text-shadow:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  padding:0 !important;
  margin:0 !important;
  line-height:1 !important;
  -webkit-appearance:none !important;
  appearance:none !important;
  transition:border-color .18s var(--bdlq-ease), background-color .18s var(--bdlq-ease), transform .12s var(--bdlq-ease), opacity .18s var(--bdlq-ease);
}

.bdlq-qualify .bdlq-table-wrap .bdlq-answer-btn svg{
  width:15px !important;
  height:15px !important;
  fill:none !important;
  transition:stroke .18s var(--bdlq-ease);
}

.bdlq-qualify .bdlq-table-wrap .bdlq-answer-btn--yes svg{ stroke:var(--bdlq-tick-default) !important; }
.bdlq-qualify .bdlq-table-wrap .bdlq-answer-btn--no svg{ stroke:var(--bdlq-cross-default) !important; }

.bdlq-qualify:not(.bdlq-hover-off) .bdlq-table-wrap .bdlq-answer-btn:hover{ border-color:var(--bdlq-table-header-text) !important; }

.bdlq-qualify .bdlq-table-wrap .bdlq-answer-btn:active{ transform:scale(0.92); }

.bdlq-qualify .bdlq-table-wrap .bdlq-answer-btn:focus-visible{
  outline:2px solid var(--bdlq-table-header-text);
  outline-offset:2px;
}

.bdlq-qualify .bdlq-table-wrap .bdlq-answer-btn--yes.is-active{
  border-color:var(--bdlq-tick-active-border) !important;
  background:var(--bdlq-tick-active-bg) !important;
}
.bdlq-qualify .bdlq-table-wrap .bdlq-answer-btn--yes.is-active svg{ stroke:var(--bdlq-tick-active) !important; }

.bdlq-qualify .bdlq-table-wrap .bdlq-answer-btn--no.is-active{
  border-color:var(--bdlq-cross-active-border) !important;
  background:var(--bdlq-cross-active-bg) !important;
}
.bdlq-qualify .bdlq-table-wrap .bdlq-answer-btn--no.is-active svg{ stroke:var(--bdlq-cross-active) !important; }

.bdlq-row.is-answered .bdlq-req-cell{ color:var(--bdlq-question-text) !important; }

/* ============================================================
   CTA
   ============================================================ */
.bdlq-cta-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin-top:32px;
}

.bdlq-qualify .bdlq-cta-row .bdlq-cta{
  font-family:var(--bdlq-font-head) !important;
  font-weight:600 !important;
  font-size:15.5px !important;
  letter-spacing:0.01em;
  color:var(--bdlq-btn-text) !important;
  background:var(--bdlq-btn-bg) !important;
  background-image:none !important;
  border:1px solid var(--bdlq-btn-border) !important;
  border-radius:999px !important;
  box-shadow:none !important;
  padding:16px 34px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:10px;
  cursor:not-allowed;
  opacity:0.45;
  transition:opacity .3s var(--bdlq-ease), background-color .3s var(--bdlq-ease), border-color .3s var(--bdlq-ease), color .3s var(--bdlq-ease), box-shadow .3s var(--bdlq-ease);
}

.bdlq-cta svg{
  width:16px; height:16px;
  stroke:currentColor;
  transition:transform .25s var(--bdlq-ease);
}

.bdlq-qualify .bdlq-cta-row .bdlq-cta.is-ready{
  cursor:pointer;
  opacity:1;
  box-shadow:0 8px 30px -8px rgba(0,0,0,0.5) !important;
  animation:bdlq-cta-ready .5s var(--bdlq-ease);
}

.bdlq-qualify:not(.bdlq-hover-off) .bdlq-cta-row .bdlq-cta.is-ready:hover{
  background:var(--bdlq-btn-hover-bg) !important;
  color:var(--bdlq-btn-hover-text) !important;
  border-color:var(--bdlq-btn-hover-border) !important;
}
.bdlq-qualify:not(.bdlq-hover-off) .bdlq-cta-row .bdlq-cta.is-ready:hover svg{ transform:translateX(3px); }

.bdlq-cta[disabled]{ pointer-events:none; }

@keyframes bdlq-cta-ready{
  0%{ transform:scale(0.97); }
  60%{ transform:scale(1.015); }
  100%{ transform:scale(1); }
}

.bdlq-cta-hint{
  font-size:13px;
  color:var(--bdlq-table-header-text);
  min-height:16px;
}

.bdlq-cta-hint.is-error{ color:var(--bdlq-cross-active); }

/* ============================================================
   MODAL / POPUP
   ============================================================ */
.bdlq-modal-overlay{
  position:fixed;
  inset:0;
  background:var(--bdlq-popup-overlay);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:99999;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--bdlq-ease);
}

.bdlq-modal-overlay.is-open{
  opacity:1;
  pointer-events:auto;
}

.bdlq-modal{
  width:100%;
  max-width:430px;
  max-height:88vh;
  background:var(--bdlq-popup-bg) !important;
  border:1px solid var(--bdlq-popup-border);
  border-radius:20px;
  box-shadow:0 30px 80px -20px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.02);
  position:relative;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  transform:translateY(18px) scale(0.97);
  opacity:0;
  transition:transform .38s var(--bdlq-ease), opacity .32s var(--bdlq-ease);
  font-family:var(--bdlq-font-body);
}

/*
 * Content scrolls in its own inner box; the close button (a direct
 * child of .bdlq-modal, positioned relative to it) stays pinned in
 * the top-right corner no matter how tall the content is or how far
 * the visitor has scrolled — "close button must always remain
 * visible" holds on any viewport height, not just tall ones.
 */
.bdlq-modal-scroll{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:40px 32px 34px;
  text-align:center;
  min-height:0;
  flex:1 1 auto;
}

.bdlq-modal-overlay.is-open .bdlq-modal{
  transform:translateY(0) scale(1);
  opacity:1;
}

.bdlq-modal-close{
  position:absolute !important;
  top:16px !important; right:16px !important;
  width:34px !important; height:34px !important;
  border-radius:50% !important;
  border:1px solid var(--bdlq-popup-border) !important;
  background:var(--bdlq-popup-close-bg) !important;
  background-image:none !important;
  box-shadow:none !important;
  color:var(--bdlq-popup-close-color) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  cursor:pointer !important;
  padding:0 !important;
  transition:all .18s var(--bdlq-ease);
}
.bdlq-modal-overlay:not(.bdlq-hover-off) .bdlq-modal-close:hover{
  border-color:var(--bdlq-popup-close-hover-color) !important;
  background:var(--bdlq-popup-close-hover-bg) !important;
  color:var(--bdlq-popup-close-hover-color) !important;
  transform:scale(1.08) rotate(90deg);
}
.bdlq-modal-close svg{ width:14px; height:14px; stroke:currentColor !important; }

.bdlq-popup-logo{
  display:flex;
  justify-content:center;
  margin:0 0 22px;
}
.bdlq-popup-logo img{
  max-width:180px;
  max-height:64px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
}

.bdlq-verify-icon{
  width:56px; height:56px;
  border-radius:50%;
  background:var(--bdlq-tick-active-bg);
  border:1px solid var(--bdlq-tick-active-border);
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 22px;
}
.bdlq-verify-icon svg{ width:24px; height:24px; stroke:var(--bdlq-tick-active) !important; }

.bdlq-modal h3{
  font-family:var(--bdlq-font-head);
  font-weight:700;
  font-size:22px;
  margin:0 0 10px;
  color:var(--bdlq-popup-heading) !important;
}

.bdlq-modal-sub{
  font-size:14px;
  color:var(--bdlq-popup-text) !important;
  line-height:1.6;
  margin:0 0 28px;
}

/* Popup #1 — phone capture form */
.bdlq-form-group{
  text-align:left;
  margin-bottom:18px;
}

.bdlq-form-group label{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--bdlq-popup-text) !important;
  margin-bottom:8px;
  letter-spacing:0.01em;
}

.bdlq-form-group label .req{ color:var(--bdlq-cross-active); margin-left:2px; }

.bdlq-form-group input[type="tel"]{
  width:100%;
  background:var(--bdlq-table-bg) !important;
  border:1px solid var(--bdlq-popup-border) !important;
  border-radius:10px !important;
  padding:14px 16px !important;
  color:var(--bdlq-popup-heading) !important;
  font-family:var(--bdlq-font-body);
  font-size:16px;
  transition:border-color .18s var(--bdlq-ease);
}

.bdlq-form-group input[type="tel"]::placeholder{ color:var(--bdlq-popup-text); opacity:0.7; }

.bdlq-form-group input[type="tel"]:focus{
  outline:none;
  border-color:var(--bdlq-tick-active) !important;
}

/* Honeypot field — hidden from real visitors, out of the tab order. */
.bdlq-hp-field{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.bdlq-form-error{
  display:none;
  text-align:left;
  font-size:13px;
  color:var(--bdlq-cross-active);
  background:var(--bdlq-cross-active-bg);
  border:1px solid var(--bdlq-cross-active-border);
  border-radius:10px;
  padding:10px 14px;
  margin:0 0 16px;
}
.bdlq-form-error.is-visible{ display:block; }

.bdlq-submit{
  width:100% !important;
  font-family:var(--bdlq-font-head) !important;
  font-weight:600 !important;
  font-size:15.5px !important;
  color:var(--bdlq-btn-text) !important;
  background:var(--bdlq-btn-bg) !important;
  background-image:none !important;
  border:1px solid var(--bdlq-btn-border) !important;
  border-radius:999px !important;
  box-shadow:none !important;
  padding:15px 20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px;
  cursor:pointer !important;
  transition:background-color .2s var(--bdlq-ease), border-color .2s var(--bdlq-ease), opacity .2s var(--bdlq-ease);
}

.bdlq-submit svg{ width:15px; height:15px; stroke:currentColor; }

.bdlq-modal-overlay:not(.bdlq-hover-off) .bdlq-submit:hover{
  background:var(--bdlq-btn-hover-bg) !important;
  color:var(--bdlq-btn-hover-text) !important;
  border-color:var(--bdlq-btn-hover-border) !important;
}

.bdlq-submit[disabled]{ opacity:0.65; cursor:default !important; }

/* Premium phone CTA — a proper button-like contact block, not a bare link */
.bdlq-phone-block{
  border-top:1px solid var(--bdlq-popup-border);
  padding-top:24px;
}

.bdlq-phone-label{
  display:block;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--bdlq-popup-text) !important;
  margin-bottom:12px;
}

.bdlq-contact-buttons{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.bdlq-phone-cta{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px;
  width:100%;
  background:var(--bdlq-phone-bg) !important;
  background-image:none !important;
  border:1px solid var(--bdlq-phone-border) !important;
  border-radius:14px !important;
  box-shadow:none !important;
  padding:16px 18px !important;
  text-decoration:none !important;
  transition:background-color .18s var(--bdlq-ease), transform .12s var(--bdlq-ease), border-color .18s var(--bdlq-ease), color .18s var(--bdlq-ease);
}

.bdlq-modal-overlay:not(.bdlq-hover-off) .bdlq-phone-cta:hover{
  background:var(--bdlq-phone-hover-bg) !important;
  border-color:var(--bdlq-phone-hover-border) !important;
}
.bdlq-modal-overlay:not(.bdlq-hover-off) .bdlq-phone-cta:hover .bdlq-phone-number{
  color:var(--bdlq-phone-hover-text) !important;
}
.bdlq-phone-cta:active{ transform:scale(0.98); }

.bdlq-phone-cta svg{
  width:18px; height:18px;
  stroke:var(--bdlq-tick-active) !important;
  fill:none;
  flex-shrink:0;
}

.bdlq-phone-number{
  font-family:var(--bdlq-font-head);
  font-size:19px;
  font-weight:700;
  color:var(--bdlq-phone-text) !important;
  letter-spacing:0.01em;
  transition:color .18s var(--bdlq-ease);
}

/*
 * WhatsApp CTA — uses WhatsApp's own recognisable brand green rather
 * than the plugin's admin-configurable accent colours, so the button
 * stays instantly identifiable as "the WhatsApp one" regardless of
 * whatever accent colour the site owner has chosen elsewhere.
 */
.bdlq-whatsapp-cta{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px;
  width:100%;
  background:rgba(37,211,102,0.12) !important;
  background-image:none !important;
  border:1px solid #25d366 !important;
  border-radius:14px !important;
  box-shadow:none !important;
  padding:16px 18px !important;
  text-decoration:none !important;
  transition:background-color .18s var(--bdlq-ease), transform .12s var(--bdlq-ease);
}

.bdlq-modal-overlay:not(.bdlq-hover-off) .bdlq-whatsapp-cta:hover{
  background:rgba(37,211,102,0.22) !important;
}
.bdlq-whatsapp-cta:active{ transform:scale(0.98); }

.bdlq-whatsapp-cta svg{
  width:19px; height:19px;
  color:#25d366;
  flex-shrink:0;
}

.bdlq-whatsapp-label{
  font-family:var(--bdlq-font-head);
  font-size:16px;
  font-weight:700;
  color:var(--bdlq-popup-heading) !important;
  letter-spacing:0.01em;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .bdlq-cta.is-ready{ animation:none; }
  .bdlq-answer-btn, .bdlq-cta, .bdlq-modal, .bdlq-modal-overlay, .bdlq-table tbody tr, .bdlq-modal-close{ transition:none; }
}

/* ============================================================
   RESPONSIVE
   Three tiers: desktop (default, >900px), tablet (601–900px),
   mobile (≤600px). Tick/cross buttons stay at their full 36px
   touch target at every tier — only spacing and type scale down.
   ============================================================ */

/* ---- Tablet ---- */
@media (max-width: 900px){
  .bdlq-qualify{ padding:26px 18px; }
  .bdlq-th-req{ width:54%; }
  .bdlq-th-answer{ width:23%; }
  .bdlq-req-cell{ padding:16px 14px; font-size:14px; }
  .bdlq-table thead th{ padding:16px 14px; font-size:11.5px; }
  .bdlq-popup-logo img{ max-width:165px; max-height:58px; }
}

/* ---- Mobile ---- */
@media (max-width: 600px){
  .bdlq-qualify{ padding:18px 10px; }

  .bdlq-th-req{ width:50%; }
  .bdlq-th-answer{ width:25%; }
  .bdlq-req-cell{ padding:14px 8px; font-size:12.5px; }
  .bdlq-table thead th{ padding:12px 8px; font-size:9.5px; letter-spacing:0.03em; }
  .bdlq-answer-cell{ padding:10px 6px; }

  .bdlq-cta-row{ margin-top:24px; }
  .bdlq-qualify .bdlq-cta-row .bdlq-cta{ width:100%; justify-content:center; padding:15px 20px !important; }

  .bdlq-modal{ max-width:100%; max-height:92vh; border-radius:16px; }
  .bdlq-modal-scroll{ padding:28px 20px 22px; }
  .bdlq-modal-close{ top:12px !important; right:12px !important; }

  .bdlq-popup-logo{ margin-bottom:18px; }
  .bdlq-popup-logo img{ max-width:150px; max-height:52px; }

  .bdlq-modal h3{ font-size:19px; }
  .bdlq-modal-sub{ font-size:13.5px; margin-bottom:22px; }

  .bdlq-form-group input[type="tel"]{ padding:13px 14px !important; }
  .bdlq-submit{ padding:14px 18px !important; }

  .bdlq-phone-number{ font-size:17px; }
  .bdlq-phone-cta{ padding:14px 16px !important; }
}

/* Very small phones (older/compact devices) */
@media (max-width: 360px){
  .bdlq-th-req{ width:46%; }
  .bdlq-th-answer{ width:27%; }
  .bdlq-req-cell{ padding:12px 6px; font-size:12px; }
}
