/* Quiz Builder — Frontend Player */

.qb-quiz-wrap { font-family: inherit; }

/* ── Player shell ────────────────────────────── */
.qb-player {
    --qb-primary:  #FCA95D;
    --qb-bg:       #171717;
    --qb-text:     #ffffff;
    background:    var(--qb-bg);
    color:         var(--qb-text);
    border-radius: 16px;
    overflow:      hidden;
    position:      relative;
    max-width:     680px;
    margin:        0 auto;
    box-shadow:    0 8px 40px rgba(0,0,0,.35);
}

/* ── Progress bar ────────────────────────────── */
.qb-progress-wrap {
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         20px 28px 0;
}
.qb-progress-bar {
    flex:            1;
    height:          5px;
    background:      rgba(255,255,255,.12);
    border-radius:   99px;
    overflow:        hidden;
}
.qb-progress-fill {
    height:          100%;
    background:      var(--qb-primary);
    border-radius:   99px;
    transition:      width .4s cubic-bezier(.4,0,.2,1);
}
.qb-progress-label { flex-shrink: 0; }
.qb-step-counter {
    font-size:  12px;
    color:      rgba(255,255,255,.45);
    font-weight: 600;
    letter-spacing: .03em;
    min-width:  38px;
    text-align: right;
}

/* ── Viewport (slide container) ──────────────── */
.qb-viewport {
    position:   relative;
    overflow:   hidden;
    min-height: 340px;
}

/* ── Step slide ──────────────────────────────── */
.qb-step {
    position:   absolute;
    inset:      0;
    display:    flex;
    flex-direction: column;
    opacity:    0;
    transform:  translateX(60px);
    transition: opacity .3s ease, transform .3s cubic-bezier(.4,0,.2,1);
    pointer-events: none;
}
.qb-step--enter-prev { transform: translateX(-60px); }
.qb-step--visible    { opacity: 1; transform: translateX(0); pointer-events: auto; }
.qb-step--leave-left  { opacity: 0; transform: translateX(-60px); pointer-events: none; transition: opacity .3s ease, transform .3s cubic-bezier(.4,0,.2,1); }
.qb-step--leave-right { opacity: 0; transform: translateX(60px);  pointer-events: none; transition: opacity .3s ease, transform .3s cubic-bezier(.4,0,.2,1); }

.qb-step__inner {
    padding: 28px 28px 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.qb-step__inner--contact { padding-top: 20px; }
.qb-step__inner--thanks  { align-items: center; justify-content: center; text-align: center; min-height: 300px; }

.qb-step__title {
    font-size:   22px;
    font-weight: 700;
    line-height: 1.3;
    margin:      0 0 8px;
    color:       var(--qb-text);
}
.qb-step__subtitle {
    font-size:  14px;
    color:      rgba(255,255,255,.5);
    margin:     0 0 20px;
    line-height: 1.5;
}

/* ── Choice answers ──────────────────────────── */
.qb-ans-grid {
    display:   flex;
    flex-direction: column;
    gap:       8px;
    flex:      1;
    margin-bottom: 0;
}
.qb-ans-grid--images {
    display:               grid;
    grid-template-columns: repeat(2,1fr);
    gap:                   10px;
}

.qb-ans {
    display:        flex;
    align-items:    center;
    gap:            12px;
    padding:        13px 16px;
    border:         1.5px solid rgba(255,255,255,.12);
    border-radius:  10px;
    background:     rgba(255,255,255,.04);
    color:          var(--qb-text);
    text-align:     left;
    cursor:         pointer;
    transition:     border-color .15s, background .15s, transform .1s;
    font-size:      15px;
    font-weight:    500;
    width:          100%;
}
.qb-ans:hover          { border-color: var(--qb-primary); background: rgba(252,169,93,.07); }
.qb-ans--selected      { border-color: var(--qb-primary); background: rgba(252,169,93,.13); }
.qb-ans:active         { transform: scale(.98); }

.qb-ans--with-img {
    flex-direction: column;
    padding:        12px;
    text-align:     center;
}
.qb-ans__img {
    width:         100%;
    height:        120px;
    object-fit:    cover;
    border-radius: 6px;
    display:       block;
    margin-bottom: 6px;
}
.qb-ans__text  { flex: 1; line-height: 1.4; }
.qb-ans__check {
    width:          20px;
    height:         20px;
    border:         2px solid rgba(255,255,255,.2);
    border-radius:  50%;
    flex-shrink:    0;
    transition:     border-color .15s, background .15s;
    position:       relative;
}
.qb-ans--selected .qb-ans__check {
    border-color: var(--qb-primary);
    background:   var(--qb-primary);
}
.qb-ans--selected .qb-ans__check::after {
    content:  '';
    position: absolute;
    inset:    3px;
    background: #111;
    border-radius: 50%;
}

/* ── Next button ─────────────────────────────── */
.qb-next-btn {
    display:       block;
    width:         100%;
    margin-top:    20px;
    padding:       14px 24px;
    background:    var(--qb-primary);
    color:         #111;
    font-size:     16px;
    font-weight:   700;
    border:        none;
    border-radius: 10px;
    cursor:        pointer;
    transition:    background .15s, transform .1s, opacity .2s;
    letter-spacing: .01em;
}
.qb-next-btn:hover  { background: color-mix(in srgb, var(--qb-primary) 85%, #fff); }
.qb-next-btn:active { transform: scale(.98); }
.qb-next-btn--submit { background: var(--qb-primary); }

/* ── Slider ──────────────────────────────────── */
.qb-slider-wrap { margin: 8px 0 20px; }

.qb-slider-value {
    font-size:   36px;
    font-weight: 800;
    color:       var(--qb-primary);
    text-align:  center;
    margin-bottom: 16px;
    letter-spacing: -.01em;
}
.qb-slider-num { font-variant-numeric: tabular-nums; }

.qb-slider {
    -webkit-appearance: none;
    width:      100%;
    height:     6px;
    border-radius: 99px;
    background: linear-gradient(
        to right,
        var(--qb-primary) 0%,
        var(--qb-primary) var(--qb-slider-pct, 50%),
        rgba(255,255,255,.15) var(--qb-slider-pct, 50%),
        rgba(255,255,255,.15) 100%
    );
    outline:    none;
    cursor:     pointer;
    --qb-slider-pct: 50%;
}
.qb-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width:        26px;
    height:       26px;
    border-radius: 50%;
    background:   var(--qb-primary);
    border:       3px solid var(--qb-bg);
    box-shadow:   0 2px 8px rgba(0,0,0,.35);
    cursor:       grab;
    transition:   transform .1s;
}
.qb-slider::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.15); }
.qb-slider::-moz-range-thumb {
    width:  26px; height: 26px;
    border-radius: 50%;
    background: var(--qb-primary);
    border: 3px solid var(--qb-bg);
    cursor: grab;
}

.qb-slider-minmax {
    display:         flex;
    justify-content: space-between;
    font-size:       12px;
    color:           rgba(255,255,255,.35);
    margin-top:      8px;
}

/* ── Text input ──────────────────────────────── */
.qb-text-input {
    width:         100%;
    background:    rgba(255,255,255,.06);
    border:        1.5px solid rgba(255,255,255,.12);
    border-radius: 10px;
    color:         var(--qb-text);
    padding:       14px 16px;
    font-size:     15px;
    resize:        vertical;
    box-sizing:    border-box;
    font-family:   inherit;
    transition:    border-color .15s;
    margin-bottom: 4px;
}
.qb-text-input:focus { outline: none; border-color: var(--qb-primary); }
.qb-text-input::placeholder { color: rgba(255,255,255,.25); }

/* ── Contact form ────────────────────────────── */
.qb-contact-form { display: flex; flex-direction: column; gap: 10px; flex: 1; }

.qb-contact-input {
    width:         100%;
    background:    rgba(255,255,255,.06);
    border:        1.5px solid rgba(255,255,255,.12);
    border-radius: 10px;
    color:         var(--qb-text);
    padding:       14px 16px;
    font-size:     15px;
    box-sizing:    border-box;
    font-family:   inherit;
    transition:    border-color .15s;
}
.qb-contact-input:focus   { outline: none; border-color: var(--qb-primary); }
.qb-contact-input::placeholder { color: rgba(255,255,255,.3); }

.qb-privacy {
    font-size:  11px;
    color:      rgba(255,255,255,.25);
    text-align: center;
    margin:     4px 0 0;
}

.qb-form-error {
    color:        #ff8888;
    font-size:    13px;
    padding:      8px 12px;
    background:   rgba(255,0,0,.08);
    border-radius: 6px;
    margin-bottom: 4px;
}

/* ── Thank you ───────────────────────────────── */
.qb-step--thanks { position: relative !important; pointer-events: auto !important; }

.qb-thanks-icon {
    width:         64px;
    height:        64px;
    border-radius: 50%;
    background:    var(--qb-primary);
    color:         #111;
    font-size:     30px;
    font-weight:   700;
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin:        0 auto 20px;
}
.qb-step__inner--thanks .qb-step__title   { font-size: 24px; margin-bottom: 10px; }
.qb-step__inner--thanks .qb-step__subtitle { font-size: 16px; color: rgba(255,255,255,.55); }

/* ── Responsive ──────────────────────────────── */
@media (max-width: 520px) {
    .qb-step__inner  { padding: 20px 18px 24px; }
    .qb-step__title  { font-size: 18px; }
    .qb-next-btn     { font-size: 15px; padding: 13px; }
    .qb-ans          { font-size: 14px; padding: 11px 13px; }
    .qb-ans-grid--images { grid-template-columns: 1fr 1fr; }
    .qb-slider-value { font-size: 28px; }
}