/* ── Assessment Quiz Builder – Frontend ── */
.aqb-wrap {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    max-width: 1340px;
    margin: 30px auto;
    background: #f4f1ee;
    padding: 20px;
    border-radius: 20px;
    position: relative;
}

/* ── Layout: sidebar height = content, not stretched ── */
.aqb-layout {
    display: flex;
    align-items: flex-start;   /* key: sidebar doesn't stretch */
    gap: 20px;
}

/* ── Sidebar ── */
.aqb-sidebar {
    width: 230px;
    flex-shrink: 0;
    background: #0d2a4a;
    border-radius: 16px;
    overflow: hidden;
    /* no align-self: stretch — height follows its own content */
}
.aqb-sidebar-item {
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    transition: background .15s, color .15s;
    line-height: 1.35;
    border-bottom: 1px solid rgba(255,255,255,0.18);  /* white divider */
}
.aqb-sidebar-item:last-child {
    border-bottom: none;
}
.aqb-sidebar-item:hover:not(.aqb-active) {
    color: #fff;
    background: rgba(255,255,255,0.07);
}
.aqb-sidebar-item.aqb-active {
    color: #fff !important;
    font-weight: 700;
}

/* ── Main panel ── */
.aqb-main {
    flex: 1;
    background: #fff;
    border-radius: 20px;
    padding: 40px 44px 36px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    min-height: 380px;
}

/* ── Category badge ── */
.aqb-cat-badge {
    display: inline-block;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 16px;
    border-radius: 50px;
    margin-bottom: 22px;
}

/* ── Question title ── */
.aqb-question-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    margin: 0 0 30px;
}

/* ── Answer buttons ── */
.aqb-answers-grid {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 30px;
}
.aqb-answer {
    display: inline-block;
    width: fit-content;
    max-width: 420px;
    text-align: left;
    padding: 11px 24px;
    border: 1.5px solid #ccc;
    border-radius: 50px;
    background: #fff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #444;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    font-family: inherit;
}
.aqb-answer:hover:not(.aqb-selected) {
    border-color: #aaa;
    background: #f8f8f8;
}
.aqb-answer.aqb-selected {
    font-weight: 600;
    color: #fff;
}

/* ── Footer ── */
.aqb-footer {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.aqb-counter {
    font-size: 14px;
    letter-spacing: 0.02em;
    color: #aaa;
    order: -1;
}
.aqb-next-btn {
    padding: 13px 30px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .07em;
    font-family: inherit;
    transition: opacity .15s, transform .1s;
}
.aqb-next-btn:not([disabled]):hover { opacity: .85; transform: translateY(-1px); }

/* ── Info panel ── */
.aqb-info-panel {
    width: 0;
    overflow: hidden;
    border-radius: 16px;
    flex-shrink: 0;
    flex-direction: column;
    gap: 14px;
    padding: 0;
    color: #fff;
    transition: width .3s ease, padding .3s ease;
    align-self: flex-start;  /* also doesn't stretch */
}
.aqb-layout.has-selection .aqb-info-panel {
    width: 520px !important;
    padding: 30px 28px;
}
.aqb-info-label {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.3;
    margin-bottom: 4px;
}
.aqb-info-text {
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.01em;
}

/* Learn More: white bg, colored text */
.aqb-learn-more-btn {
    display: inline-block;
    margin-top: 10px;
    padding: 11px 26px;
    background: #fff;
    border: 2px solid #fff;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    cursor: pointer;
    font-family: inherit;
    transition: opacity .15s;
    align-self: flex-start;
}
.aqb-learn-more-btn:hover { opacity: .88; }

/* ── Completed (inside .aqb-main) ── */
.aqb-completed-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 340px;
    padding: 20px;
}
.aqb-completed-icon {
    width: 72px; height: 72px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: 700;
    margin-bottom: 24px;
}
.aqb-completed-title { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; }
.aqb-completed-text  { font-size: 16px; color: #666; line-height: 1.65; margin: 0 0 32px; max-width: 480px; letter-spacing: 0.01em; }
.aqb-completed-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.aqb-download-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 32px; border-radius: 50px;
    color: #fff; text-decoration: none;
    font-size: 15px; font-weight: 700; letter-spacing: .05em;
    transition: opacity .15s, transform .1s;
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.aqb-download-btn::before { content: "⬇"; }
.aqb-download-btn:hover  { color:#fff; opacity:.88; transform:translateY(-1px); }
.aqb-restart-btn {
    padding: 12px 26px; border: 1.5px solid #ccc; border-radius: 50px;
    background: #fff; color: #666; font-size: 14px; cursor: pointer;
    font-family: inherit; transition: border-color .15s; letter-spacing: 0.02em;
}
.aqb-restart-btn:hover { border-color:#999; color:#333; }

/* ── Popup overlay — appended to <body> ── */
.aqb-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.aqb-popup-box {
    background: #fff;
    border-radius: 18px;
    padding: 44px 40px;
    max-width: 600px;
    width: 100%;
    position: relative;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 24px 70px rgba(0,0,0,.28);
}
.aqb-popup-close {
    position: absolute; top: 16px; right: 20px;
    background: none; border: none;
    font-size: 22px; cursor: pointer;
    font-weight: 700; padding: 4px 8px; line-height: 1;
    transition: opacity .15s;
}
.aqb-popup-close:hover { opacity: .6; }
.aqb-popup-content {
    font-size: 15px; line-height: 1.75;
    letter-spacing: 0.01em; color: #333;
}

/* ── Mobile ── */
@media (max-width: 900px) {
    .aqb-layout { flex-direction: column; }
    .aqb-sidebar { width: 100%; border-radius: 12px; }
    .aqb-sidebar-item { font-size: 13px; padding: 10px 14px; }
    .aqb-main { padding: 24px 20px; }
    .aqb-layout.has-selection .aqb-info-panel { width: 100% !important; }
}


/* ── Subcategory Title (Arik) ── */
.aqb-subcat-title {
    font-size: 13px; /* Più piccola (prima era 16px) */
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: -12px;
    margin-bottom: 6px; /* Avvicina la sottocategoria alla domanda */
}

/* ── Modifiche alla Domanda e Spaziature ── */
.aqb-question-title {
    line-height: 1.2 !important; /* Interlinea più stretta */
    margin-bottom: 16px !important; /* Meno spazio tra la domanda e i bottoni delle risposte */
}

/* Assicuriamoci che la griglia non aggiunga spazio extra sopra */
.aqb-answers-grid {
    margin-top: 0 !important;
}