/* Citricus Quote Popup — overlay, modal, three-step form.
   Colours arrive as custom properties set inline by the plugin, so one
   stylesheet serves every client without a rebuild. */

/* An explicit display value on any element beats the [hidden] attribute, which
   is how an empty badge ends up on screen as a stray orange pill. Win it back
   once, for everything inside the popup. */
.cqp-overlay [hidden]{ display:none !important }

.cqp-overlay{
  position:fixed; inset:0; z-index:2147483000;
  display:none; align-items:center; justify-content:center;
  padding:16px; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  /* Near-black, never the brand colour: the modal has to pop, not blend. */
  background:rgba(8,12,20,.8);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; transition:opacity .25s ease;
}
.cqp-overlay.is-open{ display:flex }
.cqp-overlay.is-visible{ opacity:1 }

.cqp-modal{
  position:relative; width:100%; max-width:var(--cqp-width,620px); margin:auto;
  max-height:calc(100dvh - 32px);
  display:flex; flex-direction:column;
  /* The modal itself is painted in the head colour and the body paints white
     on top, so the anti-aliased edge of the rounded corners never shows a
     white hairline beside the gradient head. */
  background:var(--cqp-dark,#090B4A); border-radius:var(--cqp-radius,18px);
  box-shadow:0 40px 90px rgba(0,0,0,.55);
  overflow:hidden; isolation:isolate;
  -webkit-mask-image:-webkit-radial-gradient(#fff,#000);
  transform:translateY(14px) scale(.98);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
  font-family:inherit;
}
.cqp-overlay.is-visible .cqp-modal{ transform:none }

.cqp-close{
  position:absolute; top:12px; right:12px; z-index:5;
  width:40px; height:40px; border:0; border-radius:50%;
  background:rgba(255,255,255,.18); color:#fff;
  font-size:22px; line-height:1; cursor:pointer;
  transition:background .2s ease;
}
.cqp-close:hover{ background:rgba(255,255,255,.34) }

/* ---------- Head ---------- */
.cqp-head{
  background:linear-gradient(150deg, var(--cqp-dark,#090B4A), var(--cqp-primary,#1B1FA8));
  color:#fff; padding:26px 52px 22px; text-align:center; flex:none;
}
.cqp-logo{ height:88px; width:88px; border-radius:50%; object-fit:cover; margin:0 auto 14px; display:block }
.cqp-title{ margin:0 0 .35em; font-size:1.9rem; line-height:1.15; color:#fff; font-weight:800; letter-spacing:-.01em }
.cqp-sub{ margin:0; font-size:1rem; color:rgba(255,255,255,.9); line-height:1.5 }
.cqp-badge{
  display:inline-block; margin:12px 0 0; padding:.3rem .8rem; border-radius:999px;
  background:var(--cqp-accent,#F5A524); color:var(--cqp-dark,#090B4A);
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
}

/* ---------- Body ---------- */
.cqp-body{ padding:0 26px 24px; overflow-y:auto; flex:1; background:#fff }

/* ---------- Stepper ---------- */
.cqp-stepper{ padding:18px 0 4px; margin-bottom:14px }
.cqp-stepper-label{ margin:0 0 10px; font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#6B7A90 }
.cqp-stepper-label b{ color:var(--cqp-dark,#090B4A) }
.cqp-stepper-list{ list-style:none; margin:0 0 14px; padding:0; display:flex; justify-content:space-between; position:relative }
.cqp-stepper-list::before{ content:''; position:absolute; left:16%; right:16%; top:17px; height:2px; background:#DCE3EC; z-index:0 }
.cqp-stepper-list li{ position:relative; z-index:1; flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center }
.cqp-stepper-dot{
  width:36px; height:36px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:2px solid #DCE3EC; color:#8A97A8;
  font-size:.9rem; font-weight:800; transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.cqp-stepper-txt{ font-size:.8rem; font-weight:600; color:#8A97A8; line-height:1.2 }
.cqp-stepper-list li.is-on .cqp-stepper-dot{ background:var(--cqp-dark,#090B4A); border-color:var(--cqp-dark,#090B4A); color:#fff; box-shadow:0 0 0 4px rgba(6,169,254,.18) }
.cqp-stepper-list li.is-on .cqp-stepper-txt{ color:var(--cqp-dark,#090B4A); font-weight:800 }
.cqp-stepper-list li.is-done .cqp-stepper-dot{ background:var(--cqp-accent,#F5A524); border-color:var(--cqp-accent,#F5A524); color:#fff }
.cqp-stepper-list li.is-done .cqp-stepper-dot::before{ content:'\2713'; font-size:.95rem }
.cqp-stepper-list li.is-done .cqp-stepper-dot{ font-size:0 }
.cqp-stepper-list li.is-done .cqp-stepper-txt{ color:#4A5268 }

.cqp-prog{ height:5px; background:#E2E6F0; border-radius:999px; margin:0; overflow:hidden }
.cqp-prog span{ display:block; height:100%; background:linear-gradient(90deg,var(--cqp-dark,#090B4A),var(--cqp-accent,#F5A524)); transition:width .3s ease }

.cqp-step{ display:none; border:0; padding:0; margin:0; min-inline-size:0 }
.cqp-step.is-on{ display:block }
.cqp-legend{ font-weight:800; font-size:1.02rem; padding:0; margin:0 0 14px; color:var(--cqp-dark,#090B4A) }

.cqp-field{ margin-bottom:14px; display:flex; flex-direction:column; gap:.3rem }
.cqp-field label{ font-size:.86rem; font-weight:700; color:#0B1020 }
.cqp-req{ color:#D64545 }
.cqp-hint{ display:block; font-weight:400; font-size:.78rem; color:#767E93 }

.cqp-row{ display:grid; gap:14px }
@media (min-width:520px){ .cqp-row{ grid-template-columns:1fr 1fr } }

.cqp-body input[type=text],
.cqp-body input[type=tel],
.cqp-body input[type=email],
.cqp-body select,
.cqp-body textarea{
  width:100%; font:inherit; font-size:1rem;   /* 16px keeps iOS from zooming */
  padding:.72rem .85rem; min-height:48px;
  color:#0B1020; background:#fff;
  border:1.5px solid #E2E6F0; border-radius:10px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.cqp-body textarea{ min-height:88px; resize:vertical }
.cqp-body input:focus, .cqp-body select:focus, .cqp-body textarea:focus{
  outline:none; border-color:var(--cqp-primary,#1B1FA8);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cqp-primary,#1B1FA8) 18%, transparent);
}
.cqp-body .is-bad{ border-color:#D64545 }

.cqp-err{ margin:0 0 12px; color:#D64545; font-size:.86rem; font-weight:600 }

.cqp-nav{ display:flex; gap:10px; margin-top:18px }
.cqp-nav button{
  flex:1; min-height:50px; padding:.8rem 1.2rem;
  border:0; border-radius:999px; cursor:pointer;
  font:inherit; font-size:1rem; font-weight:700;
  transition:filter .15s ease, transform .1s ease;
}
.cqp-nav button:active{ transform:translateY(1px) }
.cqp-next, .cqp-send{ background:linear-gradient(135deg,#0B5E6B 0%,#13899A 100%); color:#fff; position:relative; overflow:hidden; isolation:isolate }
.cqp-next::after, .cqp-send::after{ content:""; position:absolute; top:0; left:0; width:60%; height:100%; background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.45) 50%,transparent 100%); transform:skewX(-20deg) translateX(-230%); pointer-events:none; z-index:1 }
.cqp-next:hover::after, .cqp-send:hover::after{ transform:skewX(-20deg) translateX(360%); transition:transform .75s ease }
.cqp-next:hover, .cqp-send:hover{ filter:brightness(1.06) }
.cqp-prev{ flex:0 0 34%; background:#F7F8FC; color:#4A5268 }
.cqp-prev:hover{ background:#EEF0FF }
.cqp-send[disabled]{ opacity:.6; cursor:progress }

.cqp-fine{ margin:12px 0 0; font-size:.76rem; color:#767E93; text-align:center }

/* Honeypot: present in the DOM, never on screen. */
.cqp-hp{ position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden }

/* ---------- Success ---------- */
.cqp-done{ text-align:center; padding:34px 6px 18px }
.cqp-tick{
  width:64px; height:64px; margin:0 auto 16px; border-radius:50%;
  display:grid; place-items:center;
  background:#0E9F6E; color:#fff;
}
.cqp-done h3{ margin:0 0 .5em; font-size:1.25rem; color:var(--cqp-dark,#090B4A) }
.cqp-done p{ margin:0; color:#4A5268; font-size:.96rem; line-height:1.6 }

/* ---------- Small screens ---------- */
@media (max-width:520px){
  .cqp-overlay{ padding:0; align-items:flex-end }
  .cqp-modal{
    max-width:none; max-height:94dvh;
    border-radius:var(--cqp-radius,18px) var(--cqp-radius,18px) 0 0;
  }
  .cqp-head{ padding:22px 46px 18px }
  .cqp-title{ font-size:1.4rem }
  .cqp-stepper-txt{ font-size:.7rem }
  .cqp-stepper-dot{ width:30px; height:30px; font-size:.8rem }
  .cqp-stepper-list::before{ top:14px }
  .cqp-body{ padding:0 20px calc(20px + env(safe-area-inset-bottom)) }
  .cqp-nav{ position:sticky; bottom:0; background:#fff; padding-bottom:8px }
}

@media (prefers-reduced-motion:reduce){
  .cqp-overlay, .cqp-modal, .cqp-prog span, .cqp-nav button{ transition:none }
}

.cqp-consent{display:flex;gap:.5rem;align-items:flex-start;font-size:.74rem;line-height:1.45;color:#56708A;margin:.25rem 0 .75rem}
.cqp-consent input{margin-top:.2rem;flex:none}