/* ─────────────────────────────────────────────────────────
   PULLER Size Quiz — modal styles
   Matches existing brutalism palette in index.html
   ───────────────────────────────────────────────────────── */

.sq-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(26, 26, 26, 0.55);
    display: none;
    align-items: flex-start; justify-content: center;
    overflow-y: auto;
    padding: 16px;
    -webkit-overflow-scrolling: touch;
}
.sq-overlay.sq-open { display: flex; }
.sq-overlay.sq-open .sq-modal { animation: sq-pop 0.25s ease; }

@keyframes sq-pop {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.sq-modal {
    width: 100%; max-width: 540px;
    background: #FFFFFF;
    border: 2px solid #1A1A1A;
    border-radius: 20px;
    box-shadow: 8px 8px 0 #1A1A1A;
    padding: 28px 22px 22px;
    margin: auto 0;
    position: relative;
    font-family: 'Nunito', sans-serif;
}

@media (min-width: 640px) {
    .sq-modal { padding: 36px 36px 28px; }
}

/* Top bar — back arrow + close + progress */
.sq-topbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 18px; min-height: 28px;
}
.sq-back, .sq-close {
    background: none; border: none; cursor: pointer;
    font-family: 'Montserrat', sans-serif; font-weight: 900;
    font-size: 0.85rem; letter-spacing: 0.05em;
    color: #3D1A5E; padding: 4px 6px;
    text-transform: uppercase;
    visibility: visible;
}
.sq-back.sq-hidden { visibility: hidden; }
.sq-close { font-size: 1.5rem; line-height: 1; padding: 0 6px; }
.sq-close:hover { color: #7B2FBE; }
.sq-progress {
    display: flex; gap: 6px;
}
.sq-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #EDE0F7;
    transition: background 0.2s ease;
}
.sq-dot.sq-dot-active { background: #7B2FBE; }
.sq-dot.sq-dot-done { background: #3D1A5E; }

/* Step body */
.sq-step { display: none; }
.sq-step.sq-step-active { display: block; }

.sq-question {
    font-family: 'Montserrat', sans-serif; font-weight: 900;
    color: #1A1A1A; text-transform: none;
    font-size: clamp(1.4rem, 4vw, 1.85rem);
    line-height: 1.1; letter-spacing: -0.01em;
    margin-bottom: 6px;
    text-align: center;
}
.sq-helper {
    text-align: center; color: #666; font-size: 0.85rem;
    margin-bottom: 24px;
}

/* Inputs */
.sq-input {
    width: 100%;
    padding: 14px 16px;
    font-family: 'Nunito', sans-serif; font-weight: 300;
    font-size: 1.05rem; color: #1A1A1A;
    background: #FFFFFF;
    border: 2px solid #C9A8E8;
    border-radius: 12px;
    outline: none;
    transition: border-color 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.sq-input:focus { border-color: #7B2FBE; }
.sq-input::placeholder { color: #999; }
.sq-input.sq-input-error { border-color: #d33; }

.sq-input-error-msg {
    color: #d33; font-size: 0.8rem; margin-top: 6px;
    min-height: 18px;
}

select.sq-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='none' stroke='%237B2FBE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 7 6-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 44px;
}

/* Option list (radio buttons styled as cards) */
.sq-options { display: flex; flex-direction: column; gap: 10px; }
.sq-option {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border: 2px solid #C9A8E8;
    border-radius: 14px;
    background: #FFFFFF;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.sq-option:hover { border-color: #7B2FBE; background: #FAF5FE; }
.sq-option input[type="radio"] {
    width: 18px; height: 18px;
    accent-color: #7B2FBE; flex-shrink: 0; cursor: pointer;
}
.sq-option:has(input[type="radio"]:checked) {
    border-color: #7B2FBE;
    background: #EDE0F7;
}
.sq-option-label {
    font-family: 'Nunito', sans-serif; font-weight: 300;
    color: #1A1A1A; font-size: 1rem;
    line-height: 1.3;
}
.sq-option-label strong {
    font-family: 'Montserrat', sans-serif; font-weight: 900;
    color: #3D1A5E; display: block; margin-bottom: 2px;
    font-size: 1.05rem;
}
.sq-option-label .sq-option-hint {
    font-size: 0.8rem; color: #666; display: block;
}

/* CTAs */
.sq-actions {
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 22px;
}
.sq-cta {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%;
    padding: 16px 24px;
    font-family: 'Montserrat', sans-serif; font-weight: 900;
    font-size: 1rem; text-transform: uppercase;
    letter-spacing: 0.04em;
    border: 2px solid #1A1A1A;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sq-cta-primary {
    background: #2E8B3C; color: #FFFFFF;
    box-shadow: 4px 4px 0 #1A1A1A;
}
.sq-cta-primary:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #1A1A1A;
}
.sq-cta-primary:disabled {
    background: #BBB; cursor: not-allowed;
    transform: none; box-shadow: 4px 4px 0 #1A1A1A;
}
.sq-cta-secondary {
    background: #FFFFFF; color: #1A1A1A;
    box-shadow: 4px 4px 0 #1A1A1A;
}
.sq-cta-secondary:hover {
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 #1A1A1A;
}

/* Skip link */
.sq-skip-row {
    text-align: center; margin-top: 18px;
}
.sq-skip-link {
    background: none; border: none; cursor: pointer;
    color: #888; font-size: 0.82rem;
    text-decoration: underline; text-underline-offset: 2px;
    font-family: 'Nunito', sans-serif; font-weight: 300;
}
.sq-skip-link:hover { color: #1A1A1A; }

/* Result screen */
.sq-result {
    display: none;
    text-align: center;
}
.sq-result.sq-result-active { display: block; }

.sq-result-badge {
    display: inline-flex; align-items: center;
    padding: 8px 16px;
    background: #2E8B3C; color: #FFFFFF;
    font-family: 'Montserrat', sans-serif; font-weight: 900;
    font-size: 0.85rem; letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    margin-bottom: 14px;
}
.sq-result-badge.sq-result-warn { background: #C9302C; }
.sq-result-badge.sq-result-soft { background: #D4A017; color: #1A1A1A; }

.sq-result-headline {
    font-family: 'Montserrat', sans-serif; font-weight: 900;
    font-size: clamp(1.5rem, 4vw, 2rem);
    color: #1A1A1A; line-height: 1.1; letter-spacing: -0.01em;
    margin-bottom: 14px;
}
.sq-result-body {
    font-size: 1rem; color: #444; line-height: 1.5;
    margin-bottom: 12px;
}
.sq-result-reason {
    font-size: 0.95rem; color: #1A1A1A;
    background: #F5F0E8; padding: 14px 16px;
    border-left: 3px solid #7B2FBE;
    border-radius: 8px;
    text-align: left;
    margin: 18px 0;
}
.sq-result-email-hint {
    font-size: 0.85rem; color: #666;
    margin-top: 8px;
}

/* Tag for under-11lb edge case */
.sq-result-tiny-options {
    list-style: none; padding: 0;
    text-align: left; margin: 16px 0;
}
.sq-result-tiny-options li {
    padding: 10px 14px;
    background: #F5F0E8; border-radius: 10px;
    margin-bottom: 8px;
    font-size: 0.95rem;
}
.sq-result-tiny-options li strong {
    font-family: 'Montserrat', sans-serif; font-weight: 900;
    color: #3D1A5E;
}

/* MICRO waitlist trigger inside offer block */
.sq-micro-trigger {
    display: block;
    width: 100%; text-align: center;
    margin-top: 12px;
    background: none; border: none; cursor: pointer;
    color: #7B2FBE; font-size: 0.8rem;
    font-family: 'Nunito', sans-serif; font-weight: 300;
    text-decoration: underline; text-underline-offset: 2px;
    padding: 6px;
}
.sq-micro-trigger:hover { color: #3D1A5E; }

/* Toast (post waitlist signup) */
.sq-toast {
    position: fixed; left: 50%; bottom: 24px;
    transform: translateX(-50%) translateY(120%);
    background: #1A1A1A; color: #FFFFFF;
    padding: 14px 22px;
    border-radius: 12px;
    font-family: 'Montserrat', sans-serif; font-weight: 900;
    font-size: 0.9rem; letter-spacing: 0.02em;
    z-index: 10000;
    box-shadow: 4px 4px 0 #7B2FBE;
    transition: transform 0.35s ease;
    max-width: 90vw;
    text-align: center;
}
.sq-toast.sq-toast-show { transform: translateX(-50%) translateY(0); }

/* Searchable breed combobox (step 2) */
.sq-combobox { position: relative; }

.sq-combobox-list {
    position: absolute;
    top: calc(100% + 4px); left: 0; right: 0;
    background: #FFFFFF;
    border: 2px solid #1A1A1A;
    border-radius: 12px;
    max-height: 280px;
    overflow-y: auto;
    list-style: none;
    margin: 0; padding: 4px;
    box-shadow: 4px 4px 0 #1A1A1A;
    z-index: 10;
}

.sq-cb-item {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: background 0.1s ease;
}
.sq-cb-item:hover,
.sq-cb-item.sq-cb-on { background: #EDE0F7; }

.sq-cb-label {
    font-family: 'Nunito', sans-serif; font-weight: 300;
    font-size: 0.95rem; color: #1A1A1A;
}
.sq-cb-group {
    font-size: 0.7rem; color: #888;
    text-transform: uppercase; letter-spacing: 0.04em;
    font-family: 'Nunito', sans-serif; font-weight: 300;
}

.sq-cb-mark {
    background: #FFE066;
    padding: 0 2px; border-radius: 2px;
    color: #1A1A1A;
    font-weight: 600;
}

/* Fallback "I don't know" option — sticky top, distinct styling */
.sq-cb-fallback {
    background: #FFF7E6;
    border-left: 3px solid #D4A017;
    margin-bottom: 4px;
}
.sq-cb-fallback:hover,
.sq-cb-fallback.sq-cb-on { background: #FFE9B0; }
.sq-cb-fallback .sq-cb-label {
    font-style: italic;
    color: #6b4f0b;
}
.sq-cb-fallback .sq-cb-group {
    color: #8a7028;
    font-style: normal;
}

/* 10% OFF red badge inside two-line CTA */
.sq-cta-stack {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
}
.sq-cta-stack-line1 {
    display: block;
}
.sq-cta-discount-badge {
    display: inline-block;
    background: #C9302C;
    color: #FFFFFF;
    font-family: 'Montserrat', sans-serif; font-weight: 900;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    padding: 3px 10px;
    border-radius: 999px;
    text-transform: uppercase;
}

.sq-cb-empty {
    padding: 14px;
    color: #888; font-size: 0.88rem;
    text-align: center;
    font-style: italic;
}

/* Order summary card (multi-dog) */
.sq-order-summary {
    background: #F5F0E8;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 16px 0;
    font-family: 'Nunito', sans-serif;
}
.sq-order-summary-title {
    font-family: 'Montserrat', sans-serif; font-weight: 900;
    font-size: 0.78rem; letter-spacing: 0.06em;
    color: #3D1A5E;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1.5px dashed #C9A8E8;
}
.sq-order-row {
    display: flex; justify-content: space-between;
    align-items: flex-start;
    padding: 6px 0;
    font-size: 0.93rem;
    color: #1A1A1A;
    gap: 12px;
}
.sq-order-name {
    flex: 1;
    line-height: 1.35;
    text-align: left;
}
.sq-order-meta {
    display: block;
    font-size: 0.75rem;
    color: #2E8B3C;
    margin-top: 2px;
    font-weight: 600;
}
.sq-order-price {
    flex-shrink: 0;
    font-weight: 600;
    white-space: nowrap;
}
.sq-order-price-stack {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    white-space: nowrap;
}
.sq-order-price-was {
    font-size: 0.78rem;
    color: #999;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}
.sq-order-price-now {
    font-weight: 700;
    color: #1A1A1A;
}
.sq-order-total-row {
    border-top: 1.5px solid #1A1A1A;
    margin-top: 8px; padding-top: 10px;
    font-family: 'Montserrat', sans-serif; font-weight: 900;
    font-size: 1.05rem;
}

/* Add-on price breakdown card (legacy, primary single-dog) */
.sq-price-breakdown {
    background: #F5F0E8;
    border-radius: 10px;
    padding: 14px 16px;
    margin: 16px 0;
    font-family: 'Nunito', sans-serif;
}
.sq-price-row {
    display: flex; justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    font-size: 0.95rem;
    color: #1A1A1A;
}
.sq-price-row-discount { color: #2E8B3C; }
.sq-price-row-total {
    border-top: 1.5px solid #1A1A1A;
    margin-top: 6px; padding-top: 8px;
    font-family: 'Montserrat', sans-serif; font-weight: 900;
    font-size: 1.1rem;
}
.sq-cart-total-line {
    text-align: center; margin-top: 8px;
    font-size: 0.85rem; color: #666;
}
.sq-cart-total-line strong { color: #1A1A1A; }

/* Spinner-like loading state on submit (optional micro-detail) */
.sq-cta-primary.sq-loading {
    position: relative; color: transparent;
    pointer-events: none;
}
.sq-cta-primary.sq-loading::after {
    content: ''; position: absolute;
    width: 18px; height: 18px;
    top: 50%; left: 50%;
    margin: -9px 0 0 -9px;
    border: 2px solid #FFFFFF; border-right-color: transparent;
    border-radius: 50%;
    animation: sq-spin 0.7s linear infinite;
}
@keyframes sq-spin { to { transform: rotate(360deg); } }

/* ─────────────────────────────────────────────────────────
   Reasoning callout — sits between headline and order summary
   Renders BREED_MAP[breed].reason (or weight-based reason) with
   key terms bolded. See CTA_PRICING_RULES §7.
   ───────────────────────────────────────────────────────── */
.sq-reasoning {
    background: #FFF8E1;
    border-left: 4px solid #D4A017;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 18px;
    text-align: left;
}
.sq-reasoning-title {
    font-family: 'Montserrat', sans-serif; font-weight: 900;
    font-size: 0.72rem; letter-spacing: 0.1em;
    color: #8B6914;
    text-transform: uppercase;
    margin-bottom: 6px;
    display: flex; align-items: center; gap: 6px;
}
.sq-reasoning-title::before {
    content: '🤔';
    font-size: 0.9rem;
    line-height: 1;
}
.sq-reasoning-body {
    font-size: 0.85rem;
    color: #1A1A1A;
    line-height: 1.5;
}
.sq-reasoning-body strong {
    font-family: 'Montserrat', sans-serif; font-weight: 900;
}

/* Size-reference panel (V2) — image of full PULLER scale +
   lavender panel + "{Dog}'s pick · {SIZE}" chip + footnote.
   See CTA_PRICING_RULES (variant chosen). */
.sq-size-ref {
    margin-top: 22px;
    padding: 18px 14px 14px;
    background: #EDE0F7;
    border-radius: 14px;
    text-align: center;
}
.sq-size-ref-caption-row {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Nunito', sans-serif; font-weight: 700;
    color: #3D1A5E;
    font-size: 0.9rem;
    margin-bottom: 10px;
}
.sq-size-ref-chip {
    display: inline-block;
    background: #2E8B3C;
    color: #E0F0E4;
    font-family: 'Montserrat', sans-serif; font-weight: 900;
    font-size: 0.7rem; letter-spacing: 0.1em;
    padding: 4px 10px; border-radius: 999px;
    text-transform: uppercase;
}
.sq-size-ref img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    border: 1.5px solid #1A1A1A;
    box-shadow: 4px 4px 0 #1A1A1A;
    display: block;
}
.sq-size-ref-footnote {
    font-size: 0.74rem; color: #7B2FBE;
    margin-top: 8px;
    line-height: 1.4;
}