/* =====================================================
   Product Select Quiz – Frontend CSS v1.1.6
   ===================================================== */

:root {
    --pq-primary:       #cea95b;
    --pq-primary-dark:  #a8833a;
    --pq-primary-light: #fdf6e8;
    --pq-text:          #1a1a1a;
    --pq-muted:         #666;
    --pq-border:        #e0e0e0;
    --pq-bg:            #f9f9f9;
    --pq-white:         #ffffff;
    --pq-success:       #2e7d32;
    --pq-danger:        #c62828;
    --pq-radius:        12px;
    --pq-shadow:        0 2px 16px rgba(0,0,0,0.08);
    --pq-font-head:     'Poppins', sans-serif;
    --pq-font-body:     'Lato', sans-serif;
}

.pq-wrapper { font-family:var(--pq-font-body); color:var(--pq-text); max-width:780px; margin:0 auto; padding:0 16px 40px; }

.pq-progress-bar-wrap { height:6px; background:var(--pq-border); border-radius:4px; overflow:hidden; margin-bottom:8px; }
.pq-progress-bar      { height:100%; background:linear-gradient(90deg,var(--pq-primary),#f5a623); border-radius:4px; transition:width .5s cubic-bezier(.4,0,.2,1); }
.pq-step-label        { font-size:13px; color:var(--pq-muted); margin-bottom:24px; }

.pq-breadcrumb-wrap { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.pq-breadcrumb-chip { display:inline-flex; align-items:center; gap:4px; background:var(--pq-primary-light); border:1px solid #f5c58a; color:var(--pq-primary-dark); font-size:13px; font-weight:600; padding:3px 10px; border-radius:20px; white-space:nowrap; }
.pq-breadcrumb-sep  { color:var(--pq-muted); font-size:14px; }
.pq-breadcrumb-icon { font-size:13px; color:#cea95b !important; }

.pq-question-card { background:var(--pq-white); border-radius:var(--pq-radius); box-shadow:var(--pq-shadow); padding:32px 28px 24px; animation:pqFadeUp .35s ease forwards; }
@keyframes pqFadeUp { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.pq-q-header { margin-bottom:24px; }
.pq-q-number { font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:var(--pq-primary); margin-bottom:8px; font-family:var(--pq-font-head); }
.pq-q-title  { font-family:var(--pq-font-head); font-size:22px; font-weight:700; line-height:1.3; margin:0 0 10px; }
.pq-q-desc   { font-size:14px; color:var(--pq-muted); margin:0; line-height:1.6; }
.pq-no-questions { color:var(--pq-muted); font-size:15px; padding:40px 0; text-align:center; }

.pq-answers    { display:flex; flex-direction:column; gap:10px; }
.pq-answer-btn { display:flex; align-items:center; gap:14px; background:var(--pq-bg); border:2px solid var(--pq-border); border-radius:var(--pq-radius); padding:14px 16px; cursor:pointer; text-align:left; transition:border-color .22s,background .22s,transform .22s; font-family:var(--pq-font-body); width:100%; }
.pq-answer-btn:hover       { border-color:var(--pq-primary); background:var(--pq-primary-light); transform:translateY(-1px); }
.pq-answer-btn.pq-selected { border-color:var(--pq-primary); background:var(--pq-primary-light); }
.pq-answer-btn.pq-selected .pq-ans-check { opacity:1; color:var(--pq-primary); }
.pq-ans-icon          { font-size:22px; flex-shrink:0; width:36px; text-align:center; display:flex; align-items:center; justify-content:center; }
.pq-ans-icon--emoji   { font-size:24px; }
.pq-ans-icon .fa,
.pq-ans-icon .fas,
.pq-ans-icon .far,
.pq-ans-icon .fab,
.pq-ans-icon .fal,
.pq-ans-icon .fad      { font-size:20px; color:#cea95b !important; }
.pq-ans-texts   { display:flex; flex-direction:column; flex:1; min-width:0; }
.pq-ans-label   { font-size:15px; font-weight:600; line-height:1.3; }
.pq-ans-sublabel { font-size:13px; color:var(--pq-muted); margin-top:2px; }
.pq-ans-check   { font-size:16px; opacity:0; transition:opacity .22s; flex-shrink:0; margin-left:auto; padding-left:8px; color:var(--pq-primary); }
.pq-ans-check .fa { font-size:16px; }

/* ── Inline answer description ── */
.pq-answer-wrap        { display:flex; flex-direction:column; gap:0; }
.pq-ans-description    {
    font-size:13px;
    color:var(--pq-muted);
    line-height:1.6;
    padding:8px 14px 10px 60px;
    background:var(--pq-bg);
    border:2px solid var(--pq-border);
    border-top:none;
    border-radius:0 0 var(--pq-radius) var(--pq-radius);
    margin-bottom:0;
}
.pq-answer-wrap .pq-answer-btn {
    border-radius:var(--pq-radius) var(--pq-radius) 0 0;
    border-bottom:1px solid var(--pq-border);
}
.pq-answer-wrap .pq-answer-btn:only-child,
.pq-answer-wrap:not(:has(.pq-ans-description)) .pq-answer-btn {
    border-radius:var(--pq-radius);
    border-bottom:2px solid var(--pq-border);
}
.pq-answer-wrap .pq-answer-btn.pq-selected + .pq-ans-description {
    border-color:var(--pq-primary);
    background:var(--pq-primary-light);
    color:var(--pq-primary-dark);
}
.pq-answer-wrap .pq-answer-btn.pq-selected {
    border-bottom-color:var(--pq-primary);
}

.pq-nav { margin-top:20px; }

.pq-btn-primary   { display:inline-block; background:var(--pq-primary); color:#fff !important; font-family:var(--pq-font-head); font-weight:600; font-size:14px; padding:11px 22px; border-radius:8px; border:none; cursor:pointer; text-decoration:none; transition:background .22s,transform .22s; white-space:nowrap; }
.pq-btn-primary:hover   { background:var(--pq-primary-dark); transform:translateY(-1px); text-decoration:none; color:#fff !important; }
.pq-btn-secondary { display:inline-block; background:transparent; color:var(--pq-muted) !important; font-family:var(--pq-font-body); font-size:14px; padding:10px 18px; border-radius:8px; border:2px solid var(--pq-border); cursor:pointer; text-decoration:none; transition:border-color .22s,color .22s; }
.pq-btn-secondary:hover { border-color:var(--pq-primary); color:var(--pq-primary) !important; text-decoration:none; }
.pq-btn-link { background:none; border:none; color:var(--pq-muted); font-size:14px; cursor:pointer; text-decoration:underline; padding:8px 0; display:block; margin:12px auto 0; }

.pq-results-header h2 { font-family:var(--pq-font-head); font-size:26px; font-weight:700; margin:0 0 8px; }
.pq-results-sub       { font-size:15px; color:var(--pq-muted); margin:0 0 20px; }

.pq-wifi-info          { font-size:14px; padding:12px 16px; border-radius:8px; margin-bottom:20px; line-height:1.6; }
.pq-wifi-info--tip     { background:#e8f5e9; border-left:4px solid #43a047; color:#1b5e20; }
.pq-wifi-info--neutral { background:#e3f2fd; border-left:4px solid #1e88e5; color:#0d47a1; }

.pq-products-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:20px; margin-bottom:28px; }
.pq-product-card  { background:var(--pq-white); border-radius:var(--pq-radius); box-shadow:var(--pq-shadow); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .22s,transform .22s; }
.pq-product-card:hover { box-shadow:0 6px 28px rgba(0,0,0,.12); transform:translateY(-2px); }
.pq-product-img-link { display:block; }
.pq-product-img  { width:100%; height:180px; object-fit:contain; padding:12px; background:#fafafa; display:block; }
.pq-product-body { padding:14px 16px 16px; display:flex; flex-direction:column; flex:1; }
.pq-badge         { display:inline-block; font-size:11px; font-weight:700; padding:3px 8px; border-radius:4px; margin-bottom:8px; text-transform:uppercase; letter-spacing:.5px; }
.pq-badge--wifi    { background:#e8f5e9; color:var(--pq-success); }
.pq-badge--gateway { background:#fff8e1; color:#e65100; }
.pq-badge--gateway a { color:inherit; text-decoration:underline; }
.pq-product-name  { font-family:var(--pq-font-head); font-size:15px; font-weight:700; margin:0 0 6px; line-height:1.3; }
.pq-product-name a { color:var(--pq-text); text-decoration:none; }
.pq-product-name a:hover { color:var(--pq-primary); }
.pq-product-desc  { font-size:13px; color:var(--pq-muted); margin:0 0 8px; line-height:1.5; flex:1; }
.pq-product-wifi-note { font-size:12px; color:#555; background:#f5f5f5; border-radius:6px; padding:7px 10px; margin-bottom:10px; line-height:1.5; }
.pq-product-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; }
.pq-product-price  { font-family:var(--pq-font-head); font-size:16px; font-weight:700; color:var(--pq-primary); }
.pq-product-btn    { font-size:13px; padding:8px 14px; }

.pq-restart-wrap { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:8px; }

.pq-no-result-box  { background:var(--pq-white); border-radius:var(--pq-radius); box-shadow:var(--pq-shadow); padding:40px 32px; text-align:center; max-width:500px; margin:0 auto; }
.pq-no-result-icon { font-size:52px; display:block; margin-bottom:16px; }
.pq-no-result-box h2 { font-family:var(--pq-font-head); font-size:22px; font-weight:700; margin:0 0 12px; }
.pq-no-result-box p  { font-size:15px; color:var(--pq-muted); margin:0 0 24px; line-height:1.6; }
.pq-contact-buttons  { display:flex; flex-direction:column; gap:10px; align-items:center; }
.pq-contact-buttons a { width:100%; max-width:320px; text-align:center; box-sizing:border-box; }
.pq-noresult-nav { display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:4px; }
.pq-noresult-nav .pq-btn-secondary { width:100%; max-width:320px; text-align:center; box-sizing:border-box; }
#pq-caldera-wrap { margin-bottom:20px; }

#pq-count-panel  { margin-top:16px; }
.pq-counter      { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:600; padding:6px 14px; border-radius:20px; border:1px solid; }
.pq-counter-ok   { background:#e8f5e9; border-color:#a5d6a7; color:var(--pq-success); }
.pq-counter-zero { background:#fce8e8; border-color:#ef9a9a; color:var(--pq-danger); }

.pq-loading, .pq-error { text-align:center; padding:40px 20px; font-size:16px; color:var(--pq-muted); }
.pq-error { color:var(--pq-danger); }

@media (max-width:600px) {
    .pq-question-card { padding:22px 16px 18px; }
    .pq-q-title       { font-size:18px; }
    .pq-products-grid { grid-template-columns:1fr; }
    .pq-product-footer { flex-direction:column; align-items:flex-start; }
    .pq-product-btn   { width:100%; text-align:center; }
    .pq-tooltip-content { right:auto; left:0; }
}

/* ── Loading state ── */
.pq-question-card.pq-loading-state {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

/* A kattintott gomb megtartja a kiválasztott stílust, de loading jelzőt kap */
.pq-answer-btn.pq-loading-btn {
    opacity: 1 !important;
    pointer-events: none;
    border-color: var(--pq-primary) !important;
    background: var(--pq-primary-light) !important;
}

/* A spinner ikon látható és animált legyen */
.pq-answer-btn.pq-loading-btn .pq-ans-check {
    opacity: 1 !important;
    color: var(--pq-primary);
}

/* Vissza gomb disabled állapot */
.pq-back-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* FA spinner animáció (ha a téma nem töltené be) */
@keyframes pq-fa-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.pq-ans-check .fa-spin {
    display: inline-block;
    animation: pq-fa-spin 0.8s linear infinite;
}