/* 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;
  background:color-mix(in srgb, var(--cqp-dark,#090B4A) 86%, transparent);
  opacity:0; transition:opacity .25s ease;
}
@supports not (background: color-mix(in srgb, red 50%, blue)){
  .cqp-overlay{ background:rgba(9,11,74,.88) }
}
.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;
  background:#fff; border-radius:var(--cqp-radius,18px);
  box-shadow:0 40px 90px rgba(4,8,40,.5);
  overflow:hidden;
  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 ---------- */

/*
 * The head carries the modal's own top radius rather than relying on the
 * parent's overflow:hidden to clip it. A rounded container with a transform
 * on it leaves a one pixel light seam at each corner in most browsers, and on
 * a dark header against a white modal that seam reads as a white hairline.
 */
.cqp-head{
  background:linear-gradient(150deg, var(--cqp-dark,#090B4A), var(--cqp-primary,#1B1FA8));
  color:#fff; padding:26px 26px 22px; text-align:center; flex:none;
  border-radius:var(--cqp-radius,18px) var(--cqp-radius,18px) 0 0;
  margin:-1px -1px 0;            /* covers the seam the radius leaves behind */
}

/* The logo sits on white, because a brand mark drawn for a light header
   disappears on a dark one, and asking every client for a second file is how
   a popup ends up with no logo at all. */
.cqp-logo-box{
  display:inline-flex; align-items:center; justify-content:center;
  background:#fff; border-radius:10px; padding:10px 16px;
  margin:0 auto 14px; box-shadow:0 6px 18px rgba(4,8,40,.22);
  max-width:80%;
}
.cqp-logo{ height:38px; width:auto; margin:0; display:block }
.cqp-title{ margin:0 0 .4em; font-size:1.35rem; line-height:1.2; color:#fff; font-weight:800 }
.cqp-sub{ margin:0; font-size:.93rem; color:rgba(255,255,255,.82); line-height:1.5 }

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

/* ---------- 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 20px 18px }
  .cqp-logo{ height:32px }
  .cqp-title{ font-size:1.18rem }
  .cqp-body{ padding:18px 20px calc(20px + env(safe-area-inset-bottom)) }
}

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

/* Paint the modal itself in the brand blue so the rounded top corners can
   never show a white seam; the body brings its own white background. */
.cqp-modal{ background:#1D70DC; isolation:isolate }
.cqp-head{ margin:0; border-radius:0 }
.cqp-sub{ font-size:.84rem; max-width:44ch; margin-inline:auto }

/* DMC: header in the brand blue only (no dark navy) */
.cqp-head{ background:radial-gradient(520px 260px at 90% 0%,rgba(255,255,255,.22),transparent 60%),radial-gradient(420px 260px at 0% 100%,rgba(255,255,255,.12),transparent 58%),linear-gradient(165deg,#3E92F2 0%,#1D70DC 52%,#1660C4 100%) !important }

/* =====================================================================
   The quote form (popup and inline). Same structure as the official site.
   The !important rules are deliberate: pages built from the old site carry
   their own input styles (.dmc-qf input{width:100%}...), and the form has
   to look the same wherever it is dropped.
   ===================================================================== */
form.dqf[data-dqf]{font-family:inherit;color:#0B1F33;text-align:left;margin:0;padding:0;position:relative;display:block;width:100%}
form.dqf[data-dqf] *{box-sizing:border-box}
form.dqf[data-dqf] [hidden]{display:none!important}

/* Steps: Service, Home, Contact */
form.dqf[data-dqf] .dqf-prog{display:flex;list-style:none;margin:0 0 16px;padding:0}
form.dqf[data-dqf] .dqf-prog li{flex:1 1 0;display:flex;flex-direction:column;align-items:center;position:relative;margin:0;padding:0;font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#8A99A8;line-height:1.2;list-style:none}
form.dqf[data-dqf] .dqf-prog li:before{display:none}
form.dqf[data-dqf] .dqf-prog li span{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;border:2px solid #DDE5EC;font-size:.8rem;font-weight:800;letter-spacing:0;color:#8A99A8;position:relative;z-index:1;margin:0 0 5px;transition:background .25s,border-color .25s,color .25s}
form.dqf[data-dqf] .dqf-prog li:not(:first-child):after{content:"";position:absolute;top:13px;right:calc(50% + 18px);width:calc(100% - 36px);height:2px;background:#DDE5EC;z-index:0}
form.dqf[data-dqf] .dqf-prog li.is-on{color:#1D70DC}
form.dqf[data-dqf] .dqf-prog li.is-done{color:#D85F12}
form.dqf[data-dqf] .dqf-prog li.is-on span{background:linear-gradient(135deg,#3E92F2,#1D70DC 55%,#1660C4);border-color:#1D70DC;color:#fff;box-shadow:0 0 0 4px rgba(29,112,220,.16)}
form.dqf[data-dqf] .dqf-prog li.is-done span{background:linear-gradient(135deg,#F7883F,#F07020 55%,#D85F12);border-color:#F07020;color:#fff}
form.dqf[data-dqf] .dqf-prog li.is-on:after,form.dqf[data-dqf] .dqf-prog li.is-done:after{background:#F07020}
form.dqf[data-dqf] .dqf-step{display:none}
form.dqf[data-dqf] .dqf-step.is-on{display:block;animation:dqfIn .3s cubic-bezier(.22,1,.36,1)}
@keyframes dqfIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}

/* Fields */
form.dqf[data-dqf] .dqf-field{margin:0 0 12px;padding:0;position:relative}
form.dqf[data-dqf] .dqf-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
form.dqf[data-dqf] .dqf-in{display:block;width:100%!important;max-width:none!important;margin:0!important;min-height:48px;height:auto;padding:12px 14px!important;border:1.5px solid #DDE5EC!important;border-radius:10px!important;background-color:#F8FAFC!important;font-family:inherit!important;font-size:1rem!important;font-weight:500!important;line-height:1.35!important;color:#0B1F33!important;box-shadow:none!important;transition:border-color .2s,box-shadow .2s,background-color .2s;-webkit-appearance:none;appearance:none}
form.dqf[data-dqf] select.dqf-in{padding-right:40px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235B7183' stroke-width='2'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 15px center!important;cursor:pointer}
form.dqf[data-dqf] select.dqf-in.is-empty{color:#5B7183!important;font-weight:600!important}
form.dqf[data-dqf] select.dqf-in option{color:#0B1F33;font-weight:500}
form.dqf[data-dqf] .dqf-in::placeholder{color:#5B7183!important;font-weight:600!important;opacity:1!important}
form.dqf[data-dqf] textarea.dqf-in{min-height:76px;resize:vertical}
form.dqf[data-dqf] .dqf-in:focus{outline:0!important;border-color:#1D70DC!important;background-color:#fff!important;box-shadow:0 0 0 3px rgba(29,112,220,.18)!important}

/* Consent */
form.dqf[data-dqf] .dqf-consent{display:flex!important;gap:10px;align-items:flex-start;background:#fff;border:1px solid #DDE3E6;border-radius:8px;padding:10px 12px;margin:0!important;font-family:inherit!important;font-size:11px!important;line-height:1.5!important;font-weight:400!important;color:#4A5765!important;letter-spacing:0!important;text-transform:none!important;cursor:pointer}
form.dqf[data-dqf] .dqf-consent input{width:16px!important;height:16px!important;min-width:16px;min-height:0!important;margin:1px 0 0!important;padding:0!important;flex:none;accent-color:#1D70DC;cursor:pointer;-webkit-appearance:auto;appearance:auto}
form.dqf[data-dqf] .dqf-consent input:focus-visible{outline:2px solid #1D70DC;outline-offset:2px}
form.dqf[data-dqf] .dqf-consent a{color:#1D70DC;text-decoration:underline}
form.dqf[data-dqf] .dqf-sms{margin-top:-4px}
form.dqf[data-dqf] .dqf-legal{margin:10px 0 0!important;padding:0!important;font-size:11px!important;line-height:1.4!important;color:#6B7785!important;text-align:center;letter-spacing:0!important;text-transform:none!important}
form.dqf[data-dqf] .dqf-legal a{color:#1D70DC!important;text-decoration:underline}

/* Buttons */
form.dqf[data-dqf] .dqf-nav{display:flex;gap:10px;margin:4px 0 0;align-items:stretch}
form.dqf[data-dqf] .dqf-btn{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;width:auto;min-height:48px;margin:0;border:0;border-radius:999px;padding:14px 22px;font-family:inherit;font-size:.86rem;font-weight:800;letter-spacing:.06em;line-height:1.2;text-transform:uppercase;color:#fff!important;-webkit-text-fill-color:#fff;background:linear-gradient(135deg,#F7883F 0%,#F07020 55%,#D85F12 100%);text-shadow:0 1px 1px rgba(0,0,0,.12);cursor:pointer;box-shadow:0 10px 24px -6px rgba(240,112,32,.55);transition:transform .2s,box-shadow .2s}
form.dqf[data-dqf] .dqf-btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -6px rgba(240,112,32,.65)}
form.dqf[data-dqf] .dqf-btn:focus-visible{outline:3px solid rgba(29,112,220,.55);outline-offset:2px}
form.dqf[data-dqf] .dqf-back{flex:0 0 auto;min-width:92px;background:#fff;color:#5A6B7C!important;-webkit-text-fill-color:#5A6B7C;border:1.5px solid #DDE5EC;box-shadow:none;text-shadow:none}
form.dqf[data-dqf] .dqf-back:hover{border-color:#1D70DC;box-shadow:none}
form.dqf[data-dqf].is-busy .dqf-submit{opacity:.75;cursor:wait;transform:none}
form.dqf[data-dqf].is-busy .dqf-submit:after{content:"";width:16px;height:16px;margin-left:10px;border-radius:50%;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:dqfSpin .8s linear infinite}
@keyframes dqfSpin{to{transform:rotate(360deg)}}

/* Errors */
form.dqf[data-dqf] .dqf-fe{display:block;margin:5px 0 0;color:#C73B3B;font-size:.76rem;font-weight:600;line-height:1.35}
form.dqf[data-dqf] .is-bad .dqf-in{border-color:#E8A1A1!important;background-color:#FFF7F7!important}
form.dqf[data-dqf] .is-bad .dqf-consent{border-color:#E8A1A1;background:#FFF7F7}
form.dqf[data-dqf] .dqf-alert{margin:0 0 10px;padding:10px 14px;border-radius:10px;background:#FFF5F5;border:1.5px solid #F0C9C9;color:#C73B3B;font-size:.8rem;font-weight:600;line-height:1.45}

/* Sent */
form.dqf[data-dqf] .dqf-done{text-align:center;padding:22px 8px}
form.dqf[data-dqf] .dqf-done strong{display:block;font-size:1.15rem;margin:0 0 6px;color:#0B1F33}
form.dqf[data-dqf] .dqf-done span{display:block;font-size:.9rem;color:#4A5765}
form.dqf[data-dqf].is-sent .dqf-prog,form.dqf[data-dqf].is-sent .dqf-legal{display:none}

/* Honeypot: present in the DOM, never on screen. */
form.dqf[data-dqf] .dqf-hp{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important}

@media (max-width:520px){
  form.dqf[data-dqf] .dqf-2col{grid-template-columns:1fr}
  form.dqf[data-dqf] .dqf-prog{margin-bottom:14px}
  form.dqf[data-dqf] .dqf-btn{padding:13px 16px;font-size:.78rem;letter-spacing:.04em}
  form.dqf[data-dqf] .dqf-back{min-width:80px}
}
@media (prefers-reduced-motion:reduce){
  form.dqf[data-dqf] .dqf-step.is-on{animation:none}
  form.dqf[data-dqf] .dqf-btn{transition:none}
}