/**
 * "Request a Quote" multi-step form (template_request_quote.php) — v2.
 * Added 2026-08-16, replaced 2026-08-16 with the split-panel redesign
 * approved via the Artifact mockup (live-updating trip summary panel +
 * icon-illustrated options). Only enqueued on the request-quote page
 * template (see admin/geocraft_functions.php), not site-wide.
 * Uses the --dt-* tokens from css/desert-tokens.css (loaded everywhere).
 */

/* .content_wrapper has no horizontal padding of its own in this theme
   (only .container_24/.grid_* provide gutters elsewhere) — this template
   deliberately skips that 960-grid system for a full-bleed focused flow,
   so .rq-shell needs no offsetting margin; it's already edge to edge. */
.rq-shell{
    display:grid;
    grid-template-columns:340px minmax(0,1fr);
}

/* ---------- summary panel ---------- */
.rq-summary{
    background:var(--dt-ink-950);
    color:var(--dt-cream);
    padding:40px 32px;
    position:sticky;
    top:0;
    align-self:start;
    min-height:600px;
    display:flex;
    flex-direction:column;
}
.rq-summary h2{
    font-family:'Fraunces',Georgia,serif;
    font-size:21px;
    color:var(--dt-paper-hi);
    margin:0 0 6px;
}
.rq-summary .sub{
    color:var(--dt-cream-dim);
    font-size:13.5px;
    margin:0 0 26px;
}
.rq-trip{display:flex;flex-direction:column;gap:2px;flex:1;}
.rq-trip-row{
    display:flex;align-items:flex-start;gap:12px;
    padding:12px 0;border-bottom:1px solid var(--dt-ink-line);
    opacity:.35;transition:opacity .3s ease;
}
.rq-trip-row.is-filled{opacity:1;}
.rq-trip-row svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--dt-terracotta-hi);}
.rq-trip-row .k{display:block;font-family:'Archivo',sans-serif;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--dt-cream-dim);}
.rq-trip-row .v{display:block;font-family:'Fraunces',serif;font-size:15px;color:var(--dt-paper-hi);margin-top:2px;}
.rq-dots{display:flex;gap:5px;margin-top:22px;}
.rq-dots i{width:100%;height:3px;border-radius:2px;background:var(--dt-ink-line);display:block;}
.rq-dots i.done{background:var(--dt-terracotta);}
.rq-summary-toggle{display:none;}

/* ---------- form panel ---------- */
.rq-form-panel{padding:clamp(28px,5vw,56px) clamp(20px,5vw,56px);}
.rq-topline{
    display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;
    font-family:'Archivo',sans-serif;font-size:12.5px;color:var(--dt-ink-800);opacity:.7;
}
.rq-topline b{color:var(--dt-terracotta);font-weight:700;}

.rq-success{
    background:var(--dt-paper-hi);border:1px solid var(--dt-paper-line);border-radius:var(--dt-radius);
    padding:36px 28px;text-align:center;max-width:560px;margin:40px auto;
}
.rq-success h2{font-family:'Fraunces',Georgia,serif;font-size:24px;color:var(--dt-ink-950);margin:0 0 10px;}
.rq-success p{color:var(--dt-ink-800);font-size:15px;max-width:44ch;margin:0 auto;}
.rq-error{
    background:#F7E6DC;border:1px solid #E0A084;color:#9A4B2E;border-radius:var(--dt-radius);
    padding:12px 16px;font-size:14px;margin-bottom:20px;max-width:560px;
}

.rq-step{display:none;max-width:560px;}
.rq-step.is-active{display:block;animation:rq-in .35s cubic-bezier(.2,.8,.2,1);}
@keyframes rq-in{from{opacity:0;transform:translateX(18px);}to{opacity:1;transform:translateX(0);}}
@media (prefers-reduced-motion:reduce){.rq-step.is-active{animation:none;}}
.rq-step .eyebrow{font-family:'Archivo',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dt-zellige);}
.rq-step h2{font-family:'Fraunces',Georgia,serif;font-size:clamp(22px,3.2vw,28px);margin:8px 0 24px;}

.rq-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:8px;}
.rq-options.rq-options--icons{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}
.rq-option{position:relative;}
.rq-option input{position:absolute;opacity:0;width:1px;height:1px;}
.rq-option label{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;
    min-height:56px;padding:16px 12px;border:1.5px solid var(--dt-paper-line);border-radius:var(--dt-radius);
    background:var(--dt-paper-hi);font-family:'Archivo',sans-serif;font-size:14px;font-weight:600;color:var(--dt-ink-950);
    cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease,transform .1s ease;
}
.rq-option label svg{width:22px;height:22px;color:var(--dt-terracotta);transition:color .15s ease;}
.rq-option input:checked + label{border-color:var(--dt-terracotta);background:var(--dt-terracotta);color:var(--dt-paper-hi);}
.rq-option input:checked + label svg{color:var(--dt-paper-hi);}
.rq-option label:active{transform:scale(.97);}
.rq-option input:focus-visible + label{outline:2.5px solid var(--dt-zellige);outline-offset:2px;}

.rq-field{margin-bottom:16px;}
.rq-field label{display:block;font-family:'Archivo',sans-serif;font-size:12.5px;font-weight:700;color:var(--dt-ink-800);margin-bottom:6px;}
.rq-field input[type="text"],
.rq-field input[type="email"],
.rq-field input[type="tel"],
.rq-field input[type="date"],
.rq-field input[type="number"],
.rq-field select{
    width:100%;box-sizing:border-box;height:48px;padding:0 14px;
    border:1.5px solid var(--dt-paper-line);border-radius:var(--dt-radius);background:var(--dt-paper-hi);
    font-family:'Archivo',sans-serif;font-size:15px;color:var(--dt-ink-950);
}
.rq-field input:focus,.rq-field select:focus{outline:2.5px solid var(--dt-zellige);outline-offset:1px;border-color:var(--dt-zellige);}
.rq-flex-row{display:flex;gap:14px;flex-wrap:wrap;}
.rq-flex-row .rq-field{flex:1 1 140px;}

.rq-stepper{display:flex;align-items:center;gap:16px;border:1.5px solid var(--dt-paper-line);border-radius:var(--dt-radius);background:var(--dt-paper-hi);padding:14px 18px;margin-bottom:12px;}
.rq-stepper .rq-stepper-label{flex:1;font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;color:var(--dt-ink-950);}
.rq-stepper .rq-stepper-sub{display:block;font-size:12px;color:var(--dt-ink-800);opacity:.6;font-weight:400;}
.rq-stepper button{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--dt-paper-line);background:var(--dt-paper);font-size:19px;line-height:1;color:var(--dt-terracotta);cursor:pointer;}
.rq-stepper button:hover{border-color:var(--dt-terracotta);}
.rq-stepper output{min-width:24px;text-align:center;font-family:'Archivo',sans-serif;font-weight:700;font-size:16px;}

.rq-flexible{display:flex;align-items:center;gap:8px;margin-top:14px;font-family:'Archivo',sans-serif;font-size:14px;color:var(--dt-ink-800);}

.rq-review{background:var(--dt-paper-hi);border:1px solid var(--dt-paper-line);border-radius:var(--dt-radius);padding:16px 18px;margin-bottom:20px;}
.rq-review .row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-family:'Archivo',sans-serif;font-size:13.5px;border-bottom:1px solid var(--dt-paper-line);}
.rq-review .row:last-child{border-bottom:none;}
.rq-review .row span:first-child{color:var(--dt-ink-800);opacity:.7;flex:none;}
.rq-review .row span:last-child{font-weight:700;font-family:'Fraunces',serif;text-align:right;}

.rq-nav{display:flex;justify-content:space-between;align-items:center;margin-top:26px;max-width:560px;gap:12px;}
.rq-btn{font-family:'Archivo',sans-serif;font-weight:700;font-size:14.5px;border-radius:var(--dt-radius);padding:14px 24px;border:1.5px solid transparent;cursor:pointer;}
.rq-btn-primary{background:var(--dt-terracotta);color:var(--dt-paper-hi);margin-left:auto;}
.rq-btn-primary:hover{background:var(--dt-terracotta-hi);}
.rq-btn-ghost{background:transparent;border-color:var(--dt-paper-line);color:var(--dt-ink-800);}
.rq-btn-ghost:hover{border-color:var(--dt-terracotta);color:var(--dt-terracotta);}
.rq-btn:disabled{opacity:.4;cursor:not-allowed;}

.rq-hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}

/* No-JS fallback: the summary panel provides no value without live JS
   updates, so it's hidden entirely and every step stacks as one long,
   fully usable form instead. */
.rq-no-js .rq-summary,
.rq-no-js .rq-topline{display:none;}
.rq-no-js .rq-shell{grid-template-columns:1fr;}
.rq-no-js .rq-step{display:block;max-width:640px;margin:0 auto 36px;padding-bottom:36px;border-bottom:1px solid var(--dt-paper-line);}
.rq-no-js .rq-nav{display:none;}
.rq-no-js .rq-submit-row{display:flex !important;max-width:640px;margin:20px auto 0;justify-content:center;}

@media (max-width:900px){
    .rq-shell{grid-template-columns:1fr;}
    .rq-summary{position:static;min-height:auto;padding:16px clamp(20px,4vw,48px);}
    .rq-summary h2,.rq-summary .sub{display:none;}
    .rq-trip{max-height:0;overflow:hidden;transition:max-height .3s ease;}
    .rq-summary.is-open .rq-trip{max-height:600px;margin-top:14px;}
    .rq-summary-toggle{
        display:flex;justify-content:space-between;align-items:center;width:100%;
        background:none;border:none;color:var(--dt-cream);font-family:'Archivo',sans-serif;font-weight:700;
        font-size:13.5px;padding:4px 0;cursor:pointer;
    }
    .rq-form-panel{padding:26px clamp(18px,4vw,32px) 60px;}
}
@media (max-width:480px){
    .rq-options{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}
}

/* ---------- agency picker (step 10) ----------
   Added 2026-08-19. Compact cards in a responsive grid so a long agency
   list stays scannable; the cap is shown before it is reached rather
   than reported as an error afterwards. */
.rq-lede{
    max-width:60ch;
    color:var(--dt-ink-800);
    font-size:15px;
    margin:-14px 0 18px;
}
.rq-counter{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:16px;
    background:var(--dt-paper-hi);
    border:1px solid var(--dt-paper-line);
    border-radius:24px;
    padding:8px 15px;
    font-family:'Archivo',sans-serif;
    font-size:13.5px;
    font-weight:700;
}
.rq-counter.is-full{border-color:var(--dt-terracotta);color:var(--dt-terracotta);}
.rq-pips{display:flex;gap:4px;}
.rq-pips i{width:9px;height:9px;border-radius:50%;background:var(--dt-paper-line);display:block;}
.rq-pips i.on{background:var(--dt-terracotta);}

.rq-agencies{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
    gap:11px;
}
.rq-ag{position:relative;}
.rq-ag input{position:absolute;opacity:0;width:1px;height:1px;}
.rq-ag label{
    display:flex;
    flex-direction:column;
    gap:8px;
    height:100%;
    padding:14px 15px;
    border:1.5px solid var(--dt-paper-line);
    border-radius:var(--dt-radius);
    background:var(--dt-paper-hi);
    cursor:pointer;
    transition:border-color .15s ease,background .15s ease,opacity .15s ease;
}
.rq-ag label:hover{border-color:var(--dt-terracotta);}
.rq-ag-head{display:flex;align-items:flex-start;gap:10px;}
.rq-ag-box{
    flex:none;
    width:22px;
    height:22px;
    border-radius:5px;
    border:2px solid var(--dt-paper-line);
    display:grid;
    place-items:center;
    margin-top:1px;
    transition:background .15s ease,border-color .15s ease;
}
.rq-ag-box svg{color:#fff;opacity:0;transition:opacity .15s ease;}
.rq-ag-name{
    flex:1;
    font-family:'Fraunces',Georgia,serif;
    font-weight:650;
    font-size:14.5px;
    line-height:1.25;
    color:var(--dt-ink-950);
}
.rq-ag input:checked + label{border-color:var(--dt-terracotta);background:#FCEFE2;}
.rq-ag input:checked + label .rq-ag-box{background:var(--dt-terracotta);border-color:var(--dt-terracotta);}
.rq-ag input:checked + label .rq-ag-box svg{opacity:1;}
.rq-ag input:focus-visible + label{outline:2.5px solid var(--dt-zellige);outline-offset:2px;}
.rq-ag-body{display:flex;flex-direction:column;gap:6px;flex:1;}
.rq-ag-where{
    display:flex;
    align-items:center;
    gap:5px;
    font-family:'Archivo',sans-serif;
    font-size:11.5px;
    font-weight:700;
    color:var(--dt-terracotta);
}
.rq-ag-desc{
    font-family:'Archivo',sans-serif;
    font-size:12.5px;
    line-height:1.45;
    color:var(--dt-ink-800);
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
/* Stars only when a listing really has reviews — five grey stars on every
   card would read as a broken widget, and worse, as a bad score. */
.rq-ag-rate{
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:auto;
    padding-top:4px;
    font-family:'Archivo',sans-serif;
    font-size:11.5px;
    color:var(--dt-ink-800);
}
.rq-stars{display:flex;gap:1px;}
.rq-star{color:var(--dt-paper-line);}
.rq-star.is-on{color:var(--dt-gold);}
.rq-norate{opacity:.6;font-style:italic;}
/* At the cap the remaining cards stop inviting a click. */
.rq-ag.is-blocked label{opacity:.42;cursor:not-allowed;}
.rq-ag.is-blocked label:hover{border-color:var(--dt-paper-line);}

.rq-empty{
    font-family:'Archivo',sans-serif;
    font-size:13.5px;
    color:var(--dt-ink-800);
    background:var(--dt-paper-hi);
    border:1px dashed var(--dt-paper-line);
    border-radius:var(--dt-radius);
    padding:16px;
    margin:0;
}
.rq-auto{
    display:flex;
    gap:12px;
    align-items:flex-start;
    margin-top:13px;
    padding:15px 18px;
    border:1.5px dashed var(--dt-paper-line);
    border-radius:var(--dt-radius);
    cursor:pointer;
    font-family:'Archivo',sans-serif;
}
.rq-auto input{width:18px;height:18px;accent-color:var(--dt-terracotta);margin-top:2px;flex:none;}
.rq-auto b{display:block;font-size:14.5px;}
.rq-auto span span{font-size:13px;color:var(--dt-ink-800);}
.rq-privacy{
    display:flex;
    gap:9px;
    margin-top:18px;
    padding:13px 16px;
    background:var(--dt-paper-hi);
    border-left:3px solid var(--dt-gold);
    border-radius:0 var(--dt-radius) var(--dt-radius) 0;
    font-family:'Archivo',sans-serif;
    font-size:13px;
    color:var(--dt-ink-800);
}
.rq-privacy svg{color:var(--dt-gold);flex:none;margin-top:2px;}

@media only screen and (max-width:560px){
    .rq-agencies{grid-template-columns:1fr;}
}

/* The agency step needs more room than the single-question steps: at
   560px the card grid collapses to one column and wastes the screen. */
.rq-step[data-field="agencies"]{max-width:1000px;}
.rq-step[data-field="agencies"] .rq-nav{max-width:1000px;}
.rq-step[data-field="agencies"] .rq-privacy,
.rq-step[data-field="agencies"] .rq-auto{max-width:1000px;}