/* =========================================================
   PROJECT POPUP — shared across every page. Markup is injected by
   assets/js/popup.js (single source of truth); this file is just its
   styling, split out so it isn't duplicated inline on every page.
   ========================================================= */

/* ── Popup Overlay ── */
.pp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.82);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.pp-overlay.pp-open {
    opacity: 1;
    pointer-events: all;
}
.pp-modal {
    background: linear-gradient(160deg, #0d0d0d 0%, #111800 100%);
    border: 1px solid rgba(178,223,72,0.18);
    border-radius: 24px;
    width: min(780px, 94vw);
    max-height: 90vh;
    overflow-y: auto;
    padding: 48px 52px;
    position: relative;
    transform: translateY(40px) scale(0.97);
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
    scrollbar-width: thin;
    scrollbar-color: #B2DF48 #1a1a1a;
}
.pp-overlay.pp-open .pp-modal {
    transform: translateY(0) scale(1);
}
.pp-close {
    position: absolute;
    top: 20px;
    right: 24px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
    font-size: 22px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.2s;
}
.pp-close:hover { background: rgba(178,223,72,0.15); color: #B2DF48; }

/* ── Header ── */
.pp-header { margin-bottom: 32px; }
.pp-tag {
    font-size: 11px;
    letter-spacing: 2.5px;
    color: #B2DF48;
    font-weight: 600;
    font-family: 'Satoshi-Variable', sans-serif;
    text-transform: uppercase;
}
.pp-title {
    font-family: 'Morganite', sans-serif;
    font-size: 64px;
    line-height: 1;
    color: #fff;
    margin: 6px 0 8px;
    text-transform: uppercase;
}
.pp-accent { color: #B2DF48; font-style: italic; }
.pp-sub { color: rgba(255,255,255,0.45); font-size: 14px; font-family: 'Satoshi-Variable', sans-serif; }

/* ── Form Layout ── */
.pp-form { display: flex; flex-direction: column; gap: 20px; }
.pp-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pp-field { display: flex; flex-direction: column; gap: 8px; }
.pp-full { grid-column: 1 / -1; }
.pp-field label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    font-family: 'Satoshi-Variable', sans-serif;
}
.pp-field label span { color: #B2DF48; }
.pp-field input,
.pp-field select,
.pp-field textarea {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-family: 'Satoshi-Variable', sans-serif;
    padding: 13px 16px;
    outline: none;
    transition: border-color 0.2s;
    width: 100%;
}
.pp-field input::placeholder,
.pp-field textarea::placeholder { color: rgba(255,255,255,0.22); }
.pp-field input:focus,
.pp-field textarea:focus { border-color: #B2DF48; background: rgba(178,223,72,0.04); }
.pp-field textarea { resize: vertical; min-height: 110px; }

/* ── Budget Slider ── */
.pp-slider-wrap {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 14px 16px 12px;
}
.pp-slider-value {
    color: #B2DF48;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Satoshi-Variable', sans-serif;
    margin-bottom: 12px;
}
.pp-slider {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 2px;
    margin: 0;
    cursor: pointer;
    outline: none;
    background: linear-gradient(to right,
        #B2DF48 var(--pp-slider-pct, 0%),
        rgba(255,255,255,0.14) var(--pp-slider-pct, 0%));
}
.pp-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #B2DF48;
    border: 3px solid #0d0d0d;
    box-shadow: 0 0 0 1px rgba(178,223,72,0.5);
    cursor: pointer;
    transition: transform 0.15s;
}
.pp-slider::-webkit-slider-thumb:hover,
.pp-slider::-webkit-slider-thumb:active { transform: scale(1.2); }
.pp-slider::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.14);
}
.pp-slider::-moz-range-progress {
    height: 4px;
    border-radius: 2px;
    background: #B2DF48;
}
.pp-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #B2DF48;
    border: 3px solid #0d0d0d;
    box-shadow: 0 0 0 1px rgba(178,223,72,0.5);
    cursor: pointer;
    transition: transform 0.15s;
}
.pp-slider::-moz-range-thumb:hover,
.pp-slider::-moz-range-thumb:active { transform: scale(1.2); }
/* Absolutely positioned per-step instead of flex space-between: a native
   range thumb doesn't travel the track's full width — it's inset by half
   its own diameter (8px, thumb is 16px) at each end so it never overflows
   past the track — but space-between distributed labels edge-to-edge
   with no such inset, so the current step's label drifted further out of
   alignment with the actual thumb position the further it was from the
   ends. Each label's left offset here matches that exact 8px-inset
   thumb-travel formula; the two end labels stay anchored to the track's
   own edges (not inset) since centering them there would push their text
   past the slider's own bounds. */
.pp-slider-labels {
    position: relative;
    height: 14px;
    margin-top: 10px;
    font-size: 10px;
    letter-spacing: 0.5px;
    color: rgba(255,255,255,0.35);
    font-family: 'Satoshi-Variable', sans-serif;
}
.pp-slider-labels span { position: absolute; top: 0; white-space: nowrap; }
.pp-slider-labels span:nth-child(1) { left: 0; }
.pp-slider-labels span:nth-child(2) { left: calc(8px + (100% - 16px) * 1 / 6); transform: translateX(-50%); }
.pp-slider-labels span:nth-child(3) { left: calc(8px + (100% - 16px) * 2 / 6); transform: translateX(-50%); }
.pp-slider-labels span:nth-child(4) { left: calc(8px + (100% - 16px) * 3 / 6); transform: translateX(-50%); }
.pp-slider-labels span:nth-child(5) { left: calc(8px + (100% - 16px) * 4 / 6); transform: translateX(-50%); }
.pp-slider-labels span:nth-child(6) { left: calc(8px + (100% - 16px) * 5 / 6); transform: translateX(-50%); }
.pp-slider-labels span:nth-child(7) { right: 0; }

/* ── Email verification ── */
.pp-email-row { display: flex; gap: 8px; }
.pp-email-row input { flex: 1 1 auto; }
.pp-email-row input.pp-email-verified { border-color: #B2DF48; background: rgba(178,223,72,0.06); }
.pp-verify-btn,
.pp-verify-code-btn {
    flex: 0 0 auto;
    background: rgba(178,223,72,0.1);
    border: 1px solid rgba(178,223,72,0.4);
    color: #B2DF48;
    border-radius: 10px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Satoshi-Variable', sans-serif;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s, opacity 0.2s;
}
.pp-verify-btn:hover,
.pp-verify-code-btn:hover { background: rgba(178,223,72,0.2); }
.pp-verify-btn:disabled,
.pp-verify-code-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.pp-verify-code-row { display: flex; gap: 8px; margin-top: 4px; }
.pp-verify-code-row input {
    flex: 1 1 auto;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: #fff;
    font-size: 14px;
    font-family: 'Satoshi-Variable', sans-serif;
    padding: 13px 16px;
    outline: none;
    letter-spacing: 4px;
}
.pp-verify-code-row input:focus { border-color: #B2DF48; }
.pp-verify-status {
    display: block;
    font-size: 12px;
    font-family: 'Satoshi-Variable', sans-serif;
    color: rgba(255,255,255,0.4);
    min-height: 0;
}
.pp-verify-status:empty { display: none; }
.pp-verify-status.is-error { color: #FF6B6B; }
.pp-verify-status.is-success { color: #B2DF48; font-weight: 600; }

/* ── Service Chips / Budget & Timeline Pills ──
   .pp-pill-row is the same flex-wrap row as .pp-service-grid, just named
   for its own single-select (radio) fields rather than the multi-select
   (checkbox) service list — both use the identical .pp-chip pill. */
.pp-service-grid,
.pp-pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pp-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50px;
    padding: 8px 16px;
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Satoshi-Variable', sans-serif;
    user-select: none;
}
.pp-chip:hover { border-color: #B2DF48; color: #B2DF48; }
.pp-chip input[type="checkbox"],
.pp-chip input[type="radio"] { display: none; }
.pp-chip:has(input:checked) {
    background: rgba(178,223,72,0.12);
    border-color: #B2DF48;
    color: #B2DF48;
}

/* ── Validation ── */
.pp-error-msg {
    display: none;
    color: #FF6B6B;
    font-size: 12px;
    font-family: 'Satoshi-Variable', sans-serif;
    margin-top: 2px;
}
.pp-field.has-error .pp-error-msg { display: block; }
.pp-field.has-error input,
.pp-field.has-error select,
.pp-field.has-error textarea {
    border-color: #FF6B6B;
    background: rgba(255,107,107,0.05);
}
.pp-field.has-error .pp-service-grid {
    border: 1px solid #FF6B6B;
    border-radius: 14px;
    padding: 10px;
}

/* Honeypot — invisible to real visitors, present for bots that fill in
   every field they can find. Off-screen rather than display:none/
   visibility:hidden, since some bots skip fields hidden that way. */
.pp-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.pp-submit-error {
    display: block;
    color: #FF6B6B;
    font-size: 13px;
    font-family: 'Satoshi-Variable', sans-serif;
    min-height: 0;
}
.pp-submit-error:empty { display: none; }

/* ── Submit ──
   Every comparable property here matches .cta-btn (main.css, the header
   nav button) exactly — position, padding, gap, font-size, border-radius
   unit, transition timing, hover lift distance — not just the same
   colors. font-family/margin-top/align-self are the only additions,
   since .cta-btn relies on ambient context for those (a plain <button>
   injected into the popup form has neither). */
.pp-submit {
    position: relative;
    margin-top: 8px;
    background: transparent;
    color: #fff;
    border: 1px solid #B2DF48;
    border-radius: 50em;
    padding: 12px 22px;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Satoshi-Variable', sans-serif;
    cursor: pointer;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s ease, border-color 0.3s ease, opacity 0.2s ease;
    align-self: flex-start;
}
.pp-submit svg path { transition: fill 0.3s ease; }
.pp-submit:hover { transform: translateY(-1px); border-color: #C8F25C; }
.pp-submit:hover svg path { fill: #ffffff; }
.pp-submit:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

/* .cta-icon / .btn-glow-layer / .btn-inner-shadow.mini are shared,
   globally-styled classes (main.css) already used by .cta-btn elsewhere
   on the site — reused as-is here for their base look, but their hover-
   triggered states in main.css are scoped to ".cta-btn:hover ..." only,
   so those three rules need a ".pp-submit:hover ..." equivalent to fire
   on this button too. Mouse-follow --x/--y tracking for the glow is
   wired in popup.js itself, the same way main.js wires it for .cta-btn. */
.pp-submit:hover .cta-icon { transform: translateX(6px) scale(1.05); }
.pp-submit:hover .btn-glow-layer { opacity: 1; }
.pp-submit:hover .btn-inner-shadow.mini {
    box-shadow:
        inset 0 0 22px rgba(178, 223, 72, 0.85),
        inset 0 0 48px rgba(178, 223, 72, 0.6),
        inset 0 0 90px rgba(178, 223, 72, 0.35);
}

/* ── Success ── */
.pp-success {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 20px;
    gap: 16px;
}
.pp-success h3 { color: #fff; font-size: 28px; font-family: 'Morganite', sans-serif; text-transform: uppercase; }
.pp-success p { color: rgba(255,255,255,0.5); font-size: 14px; font-family: 'Satoshi-Variable', sans-serif; max-width: 340px; }

@media (max-width: 600px) {
    .pp-modal { padding: 32px 24px; }
    .pp-row { grid-template-columns: 1fr; }
    .pp-title { font-size: 44px; }
}