/* 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;
  /* Neutral black rather than a tint of the brand brown. Brown over a brown
     site reads as a dimmer, not as a layer: the page behind stays legible and
     the modal never quite separates from it. Black at 72% puts the page out of
     focus and the panel forward, which is the whole job of an overlay. */
  background:rgba(0,0,0,.72);
  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;
  /* Transparent on purpose: a white background here is what paints the
     hairline along the rounded corners against the dark head. The head and
     body carry their own backgrounds instead. */
  background:transparent; border-radius:var(--cqp-radius,18px);
  box-shadow:0 40px 90px rgba(20,15,11,.5);
  overflow:hidden;
  isolation:isolate;  /* one clipping surface, no seam at the corners */
  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,#2A1F17), var(--cqp-primary,#5A4334));
  color:#fff; padding:26px 26px 22px; text-align:center; flex:none;
  /* No radius of its own. The modal clips the top corners already, and a
     second curve inside the first leaves a white hairline between them. */
  border-radius:0;
}
.cqp-logo{
  height:104px; width:104px; display:block; margin:0 auto 16px;
  background:var(--cqp-plate,#F7F2ED); padding:5px; border-radius:50%;
  object-fit:contain;
  box-shadow:0 8px 22px rgba(20,15,11,.32);
}
@media (max-width:420px){ .cqp-logo{ height:84px; width:84px } }
.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:.9rem; color:rgba(255,255,255,.82); line-height:1.5;
  text-wrap:balance;
}
.cqp-badge{
  display:inline-block; margin:12px 0 0; padding:.3rem .8rem; border-radius:999px;
  background:var(--cqp-accent,#C9C3BB); color:var(--cqp-dark,#2A1F17);
  font-size:.78rem; font-weight:700; letter-spacing:.02em;
}

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

/* ---------- Step indicator ---------- */

.cqp-steps{ margin:18px 0 20px }
.cqp-steps-count{
  margin:0 0 10px; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:#8B7D73; font-weight:700;
}
.cqp-steps-count b{ color:var(--cqp-primary,#5A4334) }

.cqp-steps-list{
  display:grid; grid-template-columns:repeat(3,1fr);
  list-style:none; margin:0 0 14px; padding:0; counter-reset:none;
}
.cqp-stepdot{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:6px;
  text-align:center; margin:0; min-width:0;
}
/* The connector runs from each dot to the next, behind the numbers. */
.cqp-stepdot::before{
  content:''; position:absolute; top:13px; left:50%; width:100%; height:2px;
  background:#E7DFD8; z-index:0;
}
.cqp-stepdot:last-child::before{ display:none }
.cqp-stepdot.is-done::before{ background:var(--cqp-primary,#5A4334) }

.cqp-stepdot-n{
  position:relative; z-index:1; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; flex:none;
  background:#fff; border:2px solid #E7DFD8; color:#8B7D73;
  font-size:.82rem; font-weight:800; line-height:1;
  transition:background-color .25s ease, border-color .25s ease, color .25s ease;
}
.cqp-stepdot-l{
  font-size:.72rem; font-weight:700; color:#8B7D73; line-height:1.25;
  transition:color .25s ease;
}

.cqp-stepdot.is-current .cqp-stepdot-n{
  background:var(--cqp-primary,#5A4334); border-color:var(--cqp-primary,#5A4334); color:#fff;
  box-shadow:0 0 0 4px rgba(90,67,52,.14);
}
.cqp-stepdot.is-current .cqp-stepdot-l{ color:var(--cqp-dark,#2A1F17) }

.cqp-stepdot.is-done .cqp-stepdot-n{
  background:var(--cqp-primary,#5A4334); border-color:var(--cqp-primary,#5A4334);
  color:transparent; /* the number is replaced by a tick */
}
.cqp-stepdot.is-done .cqp-stepdot-n::after{
  content:''; position:absolute; width:9px; height:5px;
  border-left:2.5px solid #fff; border-bottom:2.5px solid #fff;
  transform:rotate(-45deg) translateY(-1px);
}
.cqp-stepdot.is-done .cqp-stepdot-l{ color:var(--cqp-dark,#2A1F17) }
/* A finished step is clickable, so it should look it. */
.cqp-stepdot.is-done{ cursor:pointer }
.cqp-stepdot.is-done:hover .cqp-stepdot-n{ box-shadow:0 0 0 4px rgba(90,67,52,.14) }

@media (max-width:420px){
  .cqp-stepdot-l{ font-size:.66rem }
  .cqp-stepdot-n{ width:26px; height:26px }
  .cqp-stepdot::before{ top:12px }
}

.cqp-prog{ height:4px; background:#E7DFD8; border-radius:999px; overflow:hidden }
.cqp-prog span{ display:block; height:100%; background:var(--cqp-accent,#C9C3BB); 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,#2A1F17) }

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

.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:#241C16; background:#fff;
  border:1.5px solid #E7DFD8; border-radius:14px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.cqp-body textarea{ min-height:88px; resize:vertical; border-radius:16px }
.cqp-body input:focus, .cqp-body select:focus, .cqp-body textarea:focus{
  outline:none; border-color:var(--cqp-primary,#5A4334);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--cqp-primary,#5A4334) 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:var(--cqp-accent,#C9C3BB); color:var(--cqp-dark,#2A1F17) }
.cqp-next:hover, .cqp-send:hover{ filter:brightness(.94) }
.cqp-prev{ flex:0 0 34%; background:#F8F5F2; color:#5B5049 }
.cqp-prev:hover{ background:#F7F2ED }
.cqp-send[disabled]{ opacity:.6; cursor:progress }

.cqp-fine{ margin:12px 0 0; font-size:.76rem; color:#8B7D73; 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,#2A1F17) }
.cqp-done p{ margin:0; color:#5B5049; font-size:.96rem; line-height:1.6 }

/* ---------- Small screens ---------- */
@media (max-width:520px){
  /* A sheet flush to both edges looks like the browser chrome rather than a
     panel the site put there. Ten pixels of page either side is enough to
     read it as a card, and the bottom stays flush so it still behaves like a
     sheet that came up from the bottom of the screen. */
  .cqp-overlay{ padding:0 10px; 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:18px 18px 14px }
  .cqp-title{ font-size:1.12rem }
  /* The subtitle sells the form before it opens. Once it is open the visitor
     already decided, and on a phone that line costs a line of height at the
     top of a three-step form. */
  .cqp-sub{ display:none }
  .cqp-body{ padding:0 18px calc(18px + 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,
  .cqp-stepdot-n, .cqp-stepdot-l{ transition:none }
}

/* ---------- Inline placement ([citricus_quote_form]) ---------- */
.cqp-overlay.cqp-inline{
  position:static; inset:auto; z-index:auto; display:block; padding:0;
  overflow:visible; background:none; opacity:1;
}
.cqp-overlay.cqp-inline .cqp-modal{
  max-width:none; max-height:none; margin:0; transform:none;
  box-shadow:0 18px 50px rgba(42,31,23,.14);
  border:1px solid rgba(42,31,23,.08);
}
.cqp-overlay.cqp-inline .cqp-close{ display:none }
.cqp-overlay.cqp-inline .cqp-body{ overflow:visible }
.cqp-overlay.cqp-inline .cqp-head{ padding:24px 26px 20px }
.cqp-overlay.cqp-inline .cqp-logo{ height:72px; width:72px; margin-bottom:12px }
@media (max-width:520px){
  .cqp-overlay.cqp-inline{ padding:0 }
  .cqp-overlay.cqp-inline .cqp-modal{ border-radius:var(--cqp-radius,18px) }
  .cqp-overlay.cqp-inline .cqp-nav{ position:static }
}