/*
 * ═══════════════════════════════════════════════════════════════════════
 * brandBerryHUB — LimeSurvey Theme CSS v1.1
 * Visual identity: Deep Purple + Muted Gold + Warm White
 * Typography: Playfair Display (serif headings) + Inter (body sans)
 * Geometry: Sharp corners, editorial refinement, no border-radius on cards
 * Compatible with LimeSurvey 6.16.x CE
 * ═══════════════════════════════════════════════════════════════════════
 */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap');

/* ─── CSS CUSTOM PROPERTIES — brandBerry Identity ─── */
:root {
    /* Core palette */
    --bb-deep-purple: #2D1B4E;
    --bb-accent-purple: #5B2D8E;
    --bb-light-purple: #7B4DB5;
    --bb-muted-gold: #C4A35A;
    --bb-gold-hover: #D4B76A;

    /* Neutrals */
    --bb-near-black: #1A1A2E;
    --bb-warm-white: #FAFAF8;
    --bb-light-lavender: #F3EDF9;
    --bb-mid-lavender: #E8DCF0;
    --bb-medium-gray: #888888;
    --bb-light-gray: #E8E8E8;
    --bb-white: #FFFFFF;

    /* Semantic */
    --bb-success: #2E7D5B;
    --bb-warning: #B8860B;
    --bb-danger: #A93226;
    --bb-info: #2C5F8A;

    /* Functional aliases */
    --bb-primary: var(--bb-deep-purple);
    --bb-accent: var(--bb-accent-purple);
    --bb-cta: var(--bb-muted-gold);
    --bb-bg: var(--bb-warm-white);
    --bb-surface: var(--bb-white);
    --bb-surface-alt: var(--bb-light-lavender);
    --bb-border: var(--bb-mid-lavender);
    --bb-border-light: var(--bb-light-gray);
    --bb-text: var(--bb-near-black);
    --bb-text-muted: var(--bb-medium-gray);

    /* Typography */
    --bb-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --bb-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Layout */
    --bb-container-max: clamp(600px, 85vw, 1100px);
    --bb-container-pad: clamp(16px, 3vw, 40px);

    /* Shadows — subtle, purple-tinted */
    --bb-shadow-xs: 0 1px 3px rgba(45, 27, 78, 0.04);
    --bb-shadow-sm: 0 2px 8px rgba(45, 27, 78, 0.06);
    --bb-shadow: 0 4px 20px rgba(45, 27, 78, 0.08);
    --bb-shadow-md: 0 12px 40px rgba(45, 27, 78, 0.10);
    --bb-shadow-lg: 0 16px 48px rgba(45, 27, 78, 0.12);
    --bb-shadow-focus: 0 0 0 3px rgba(91, 45, 142, 0.18);
    --bb-shadow-gold: 0 8px 30px rgba(196, 163, 90, 0.25);

    /* Transitions */
    --bb-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --bb-transition: 0.25s ease;
    --bb-transition-fast: 0.15s ease;
}

/* ─── GLOBAL BASE ─── */
body.brandberryhub {
    font-family: var(--bb-sans) !important;
    background: var(--bb-bg) !important;
    color: var(--bb-text) !important;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* ─── TOP NAV BAR ─── */
.brandberryhub #survey-nav {
    background: rgba(250, 250, 248, 0.97) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--bb-border-light);
    box-shadow: 0 1px 20px rgba(45, 27, 78, 0.04);
    padding: 2px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.brandberryhub .navbar-brand {
    font-family: var(--bb-sans);
    font-weight: 300;
    font-size: 20px;
    color: var(--bb-near-black) !important;
    letter-spacing: -0.3px;
}

.brandberryhub .navbar-brand strong {
    font-family: var(--bb-serif);
    font-weight: 700;
    color: var(--bb-deep-purple);
}

.brandberryhub .navbar-brand img {
    max-height: 70px;
    min-height: 40px;
    width: auto;
    height: auto;
}

/* ─── PROGRESS BAR ─── */
.brandberryhub .progress {
    height: 12px !important;
    background: var(--bb-light-lavender) !important;
    border-radius: 6px !important;
    overflow: hidden;
    margin: 0;
    border: 1px solid var(--bb-mid-lavender);
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.06);
}

.brandberryhub .progress-bar {
    background: linear-gradient(90deg, var(--bb-accent-purple) 0%, var(--bb-muted-gold) 100%) !important;
    border-radius: 6px !important;
    transition: width 0.6s var(--bb-ease) !important;
}

/* ─── CONTAINER ─── */
.brandberryhub #outerframeContainer {
    max-width: var(--bb-container-max);
    margin: 0 auto;
    padding: 0 var(--bb-container-pad);
}

.brandberryhub .survey-container,
.brandberryhub #limesurvey {
    max-width: var(--bb-container-max);
    margin: 0 auto;
}

/* ─── SURVEY WELCOME / TITLE ─── */
.brandberryhub .survey-welcome {
    text-align: left;
    padding: 16px 0 8px;
}

.brandberryhub .survey-welcome h2,
.brandberryhub .survey-name h2,
.brandberryhub h2.survey-name,
.brandberryhub .survey-welcome h1,
.brandberryhub .survey-welcome h3 {
    font-family: var(--bb-serif) !important;
    font-weight: 600;
    font-size: clamp(24px, 4vw, 36px);
    line-height: 1.25;
    letter-spacing: -0.5px;
    color: var(--bb-deep-purple);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--bb-mid-lavender);
}

/* Welcome text content */
.brandberryhub .survey-welcome p,
.brandberryhub .survey-description p,
.brandberryhub .survey-welcome div,
.brandberryhub .survey-description {
    font-family: var(--bb-sans) !important;
    font-size: 16px;
    font-weight: 400;
    color: var(--bb-text);
    line-height: 1.75;
    max-width: none;
    margin-bottom: 12px;
}

/* Bold/important text in welcome */
.brandberryhub .survey-welcome strong,
.brandberryhub .survey-welcome b {
    color: var(--bb-deep-purple);
    font-weight: 600;
}

/* Inline buttons in welcome text (the green "Next" LS inserts) */
.brandberryhub .survey-welcome .btn,
.brandberryhub .survey-welcome a.btn,
.brandberryhub .survey-welcome input[type="submit"],
.brandberryhub .survey-welcome button {
    background: var(--bb-muted-gold) !important;
    color: var(--bb-deep-purple) !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: var(--bb-sans) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 10px 24px !important;
    text-decoration: none !important;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
}

.brandberryhub .survey-welcome .btn:hover,
.brandberryhub .survey-welcome a.btn:hover {
    background: var(--bb-gold-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--bb-shadow-gold) !important;
}

/* Welcome page as card — consistent with question containers */
.brandberryhub .survey-welcome + .question-container,
.brandberryhub #outerframeContainer > article {
    /* No extra spacing needed */
}

/* ─── QUESTION GROUPS ─── */
.brandberryhub .group-name,
.brandberryhub .group-title {
    font-family: var(--bb-serif) !important;
    font-weight: 600 !important;
    font-size: clamp(20px, 2.8vw, 28px) !important;
    color: var(--bb-deep-purple) !important;
    letter-spacing: -0.3px;
    padding: 6px 0 4px !important;
    margin: 0 0 4px 0 !important;
    border: none !important;
    text-align: left !important;
    line-height: 1.3 !important;
}

.brandberryhub .group-description {
    font-family: var(--bb-sans) !important;
    font-size: 15px;
    font-weight: 300;
    color: var(--bb-text-muted);
    margin-bottom: 8px;
    line-height: 1.6;
}

/* ─── QUESTION CARD ─── */
.brandberryhub .question-container {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: 0;
    padding: 36px 40px;
    margin-bottom: 20px;
    box-shadow: none;
    transition: all var(--bb-transition);
    position: relative;
}

.brandberryhub .question-container:hover {
    border-color: var(--bb-accent-purple);
    box-shadow: var(--bb-shadow);
    transform: translateY(-3px);
}

.brandberryhub .question-container:focus-within {
    border-color: var(--bb-accent-purple);
    box-shadow: var(--bb-shadow), var(--bb-shadow-focus);
}

/* Focus mode */
.brandberryhub.bbh-focus-mode .question-container {
    opacity: 0.5;
    transition: all 0.35s ease;
}

.brandberryhub.bbh-focus-mode .question-container:focus-within,
.brandberryhub.bbh-focus-mode .question-container.bbh-active {
    opacity: 1;
    border-color: var(--bb-accent-purple);
    box-shadow: var(--bb-shadow-md), var(--bb-shadow-focus);
    transform: translateY(-4px);
}

/* FIX 13: in all-in-one format the JS does not call initFocusMode, so the dimming
   class is absent. This is a defensive net: if .bbh-focus-mode is ever present together
   with .bbh-all-in-one, neutralise the dimming and the translateY shift that contributes
   to the up/down bounce on tall array questions. Every question stays fully visible. */
.brandberryhub.bbh-all-in-one .question-container,
.brandberryhub.bbh-all-in-one.bbh-focus-mode .question-container,
.brandberryhub.bbh-all-in-one.bbh-focus-mode .question-container:focus-within,
.brandberryhub.bbh-all-in-one.bbh-focus-mode .question-container.bbh-active {
    opacity: 1 !important;
    transform: none !important;
}

/* Question number */
.brandberryhub .question-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bb-deep-purple);
    color: var(--bb-white);
    font-family: var(--bb-serif);
    font-weight: 700;
    font-size: 14px;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    margin-right: 12px;
    flex-shrink: 0;
}

/* Question title */
.brandberryhub .question-text {
    font-family: var(--bb-serif) !important;
    font-weight: 600;
    font-size: clamp(17px, 2.5vw, 21px);
    line-height: 1.35;
    color: var(--bb-deep-purple);
    letter-spacing: -0.3px;
    margin-bottom: 6px;
}

.brandberryhub .question-text .asterisk {
    color: var(--bb-muted-gold);
    font-weight: 700;
    margin-left: 4px;
}

/* Help text */
.brandberryhub .question-help,
.brandberryhub .ls-questionhelp,
.brandberryhub .question-help-container {
    font-size: 14px;
    font-weight: 400;
    color: var(--bb-text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
    padding: 12px 16px;
    background: var(--bb-light-lavender);
    border-radius: 0;
    border-left: 4px solid var(--bb-accent-purple);
}

/* Tip / validation hint */
.brandberryhub .ls-question-message,
.brandberryhub .questionhelp {
    font-size: 13px;
    color: var(--bb-text-muted);
    margin-top: 6px;
}

/* ─── RADIO — Single Choice ─── */
.brandberryhub .radio-list,
.brandberryhub .list-unstyled {
    list-style: none;
    padding: 0;
    margin: 0;
}

.brandberryhub .radio-item label,
.brandberryhub .radio-list li label,
.brandberryhub .answer-item label {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border: 1px solid var(--bb-border);
    border-radius: 0;
    cursor: pointer;
    transition: all var(--bb-transition-fast);
    font-family: var(--bb-sans);
    font-size: 15px;
    font-weight: 400;
    color: var(--bb-text);
    background: var(--bb-surface);
    gap: 14px;
    user-select: none;
    margin-bottom: 6px;
}

.brandberryhub .radio-item label:hover,
.brandberryhub .answer-item label:hover {
    border-color: var(--bb-accent-purple);
    background: var(--bb-light-lavender);
    transform: translateX(4px);
}

/* Custom radio */
.brandberryhub input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--bb-mid-lavender);
    border-radius: 50%;
    flex-shrink: 0;
    transition: all var(--bb-transition-fast);
    position: relative;
    cursor: pointer;
    background: var(--bb-white);
}

.brandberryhub input[type="radio"]:checked {
    border-color: var(--bb-accent-purple);
}

.brandberryhub input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--bb-accent-purple);
    animation: bbh-scale-in 0.2s var(--bb-ease);
}

.brandberryhub .radio-item:has(input:checked) label,
.brandberryhub .answer-item:has(input:checked) label {
    border-color: var(--bb-accent-purple);
    background: var(--bb-light-lavender);
    font-weight: 500;
}

/* ─── CHECKBOX — Multiple Choice ─── */
.brandberryhub input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--bb-mid-lavender);
    border-radius: 3px;
    flex-shrink: 0;
    transition: all var(--bb-transition-fast);
    position: relative;
    cursor: pointer;
    background: var(--bb-white);
}

.brandberryhub input[type="checkbox"]:checked {
    border-color: var(--bb-accent-purple);
    background: var(--bb-accent-purple);
}

.brandberryhub input[type="checkbox"]:checked::after {
    content: '✓';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    color: var(--bb-white);
    font-size: 13px;
    font-weight: 700;
    animation: bbh-scale-in 0.2s var(--bb-ease);
}

.brandberryhub .checkbox-item label,
.brandberryhub .checkbox-list li label {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border: 1px solid var(--bb-border);
    border-radius: 0;
    cursor: pointer;
    transition: all var(--bb-transition-fast);
    font-size: 15px;
    font-weight: 400;
    color: var(--bb-text);
    background: var(--bb-surface);
    gap: 14px;
    margin-bottom: 6px;
}

.brandberryhub .checkbox-item label:hover {
    border-color: var(--bb-accent-purple);
    background: var(--bb-light-lavender);
}

.brandberryhub .checkbox-item:has(input:checked) label {
    border-color: var(--bb-accent-purple);
    background: var(--bb-light-lavender);
}

/* ─── TEXT INPUTS ─── */
.brandberryhub input[type="text"],
.brandberryhub input[type="number"],
.brandberryhub input[type="email"],
.brandberryhub input[type="url"],
.brandberryhub input[type="tel"],
.brandberryhub input[type="date"],
.brandberryhub input[type="password"],
.brandberryhub .form-control {
    font-family: var(--bb-sans) !important;
    font-size: 15px;
    font-weight: 400;
    color: var(--bb-text);
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: 0;
    padding: 14px 18px;
    width: 100%;
    transition: all var(--bb-transition-fast);
    outline: none;
    box-shadow: none;
}

.brandberryhub input[type="text"]:focus,
.brandberryhub input[type="number"]:focus,
.brandberryhub input[type="email"]:focus,
.brandberryhub input[type="url"]:focus,
.brandberryhub input[type="tel"]:focus,
.brandberryhub input[type="date"]:focus,
.brandberryhub input[type="password"]:focus,
.brandberryhub .form-control:focus {
    border-color: var(--bb-muted-gold);
    box-shadow: var(--bb-shadow-focus);
}

.brandberryhub textarea.form-control {
    min-height: 120px;
    resize: vertical;
    line-height: 1.7;
}

.brandberryhub ::placeholder {
    color: rgba(136, 136, 136, 0.6);
    font-weight: 300;
}

/* ─── SELECT / DROPDOWN ─── */
.brandberryhub select,
.brandberryhub select.form-control,
.brandberryhub .form-select {
    font-family: var(--bb-sans) !important;
    font-size: 15px;
    color: var(--bb-text);
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: 0;
    padding: 14px 40px 14px 18px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235B2D8E' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    transition: all var(--bb-transition-fast);
}

.brandberryhub select:focus {
    border-color: var(--bb-muted-gold);
    box-shadow: var(--bb-shadow-focus);
}

/* ─── ARRAY / MATRIX ─── */
.brandberryhub table.question {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--bb-border);
    border-radius: 0;
    overflow: hidden;
}

.brandberryhub table.question thead th,
.brandberryhub table.question thead td {
    background: var(--bb-light-lavender);
    font-family: var(--bb-sans);
    font-weight: 600;
    font-size: 11px;
    color: var(--bb-accent-purple);
    text-transform: none;
    letter-spacing: 0.2px;
    padding: 10px 8px;
    border-bottom: 2px solid var(--bb-border);
    text-align: center;
    line-height: 1.3;
    word-break: normal;
}

.brandberryhub table.question thead th:first-child,
.brandberryhub table.question thead td:first-child {
    text-align: left;
    font-size: 13px;
    text-transform: none;
    letter-spacing: 0.3px;
    color: var(--bb-deep-purple);
}

.brandberryhub table.question tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid rgba(232, 220, 240, 0.5);
    text-align: center;
    font-size: 15px;
    color: var(--bb-text);
    transition: background-color var(--bb-transition-fast);
    vertical-align: middle;
}

.brandberryhub table.question tbody td:first-child {
    text-align: left;
    font-weight: 500;
    color: var(--bb-near-black);
}

.brandberryhub table.question tbody tr:hover td {
    background: var(--bb-light-lavender);
}

.brandberryhub table.question tbody tr:last-child td {
    border-bottom: none;
}

/* Sticky headers */
.brandberryhub .sticky thead th,
.brandberryhub .sticky thead td {
    position: sticky;
    top: 56px;
    z-index: 10;
}

/* Array text/number inputs */
.brandberryhub table.question input[type="text"],
.brandberryhub table.question input[type="number"] {
    padding: 8px 10px;
    font-size: 14px;
    min-width: 60px;
}

/* Dual scale separator */
.brandberryhub table.question td.dual_scale_separator {
    width: 2px;
    background: var(--bb-border);
    padding: 0;
}

.brandberryhub table.question thead td.header_separator {
    width: 2px;
    background: var(--bb-accent-purple);
    padding: 0;
}

/* Greyed answered rows */
.brandberryhub table.question tbody tr.ls-diplaymode-grey td {
    background: var(--bb-light-lavender);
    opacity: 0.6;
}

/* ─── RANKING ─── */
.brandberryhub .ranking-answers .rank-item,
.brandberryhub .sortable-item {
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: 0;
    padding: 14px 18px;
    margin-bottom: 6px;
    cursor: grab;
    transition: all var(--bb-transition-fast);
    display: flex;
    align-items: center;
    gap: 12px;
}

.brandberryhub .ranking-answers .rank-item:hover {
    border-color: var(--bb-accent-purple);
    box-shadow: var(--bb-shadow-sm);
}

.brandberryhub .ranking-answers .rank-item:active {
    cursor: grabbing;
    box-shadow: var(--bb-shadow-md);
}

/* ─── DATE PICKER ─── */
.brandberryhub .input-group-addon {
    background: var(--bb-light-lavender);
    border: 1px solid var(--bb-border);
    border-left: none;
    border-radius: 0;
    color: var(--bb-accent-purple);
}

/* ─── FILE UPLOAD ─── */
.brandberryhub .upload-question,
.brandberryhub .qq-upload-list {
    background: var(--bb-light-lavender);
    border: 2px dashed var(--bb-border);
    border-radius: 0;
    padding: 48px 24px;
    text-align: center;
    transition: all var(--bb-transition);
}

.brandberryhub .upload-question:hover {
    border-color: var(--bb-accent-purple);
    background: rgba(91, 45, 142, 0.04);
}

/* ─── SLIDER / RANGE ─── */
.brandberryhub input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    background: var(--bb-mid-lavender);
    border-radius: 0;
    outline: none;
}

.brandberryhub input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 3px;
    background: var(--bb-deep-purple);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(45, 27, 78, 0.3);
}

.brandberryhub input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    background: var(--bb-deep-purple);
    cursor: pointer;
    border: none;
}

/* ─── BUTTON GROUPS (Gender, Y/N, Boolean) ─── */
.brandberryhub .btn-group label.btn {
    font-family: var(--bb-sans);
    font-weight: 500;
    font-size: 14px;
    padding: 12px 24px;
    border: 1px solid var(--bb-border);
    background: var(--bb-surface);
    color: var(--bb-text);
    border-radius: 0;
    transition: all var(--bb-transition-fast);
    margin-right: 0;
    letter-spacing: 0.3px;
}

.brandberryhub .btn-group label.btn:hover {
    border-color: var(--bb-accent-purple);
    background: var(--bb-light-lavender);
}

.brandberryhub .btn-group label.btn.active,
.brandberryhub .btn-group label.btn:has(input:checked) {
    background: var(--bb-deep-purple) !important;
    color: var(--bb-white) !important;
    border-color: var(--bb-deep-purple) !important;
}

/* ─── "OTHER" FIELD ─── */
.brandberryhub .other-answer input[type="text"],
.brandberryhub .other input[type="text"] {
    margin-top: 8px;
    border-style: dashed;
    border-color: var(--bb-mid-lavender);
}

/* ─── NAVIGATION BUTTONS ─── */
.brandberryhub .navigator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--bb-border);
}

.brandberryhub .btn,
.brandberryhub button[type="submit"] {
    font-family: var(--bb-sans) !important;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.5px;
    border-radius: 0 !important;
    padding: 16px 36px !important;
    transition: all var(--bb-transition) !important;
    cursor: pointer;
    border: none;
    line-height: 1.3;
}

/* Primary — Muted Gold CTA (matches brandBerry website) */
.brandberryhub .btn-primary,
.brandberryhub .btn-lg.btn-primary,
.brandberryhub #ls-button-submit,
.brandberryhub .action--ls-button-submit {
    background: var(--bb-muted-gold) !important;
    color: var(--bb-deep-purple) !important;
    border: none !important;
}

.brandberryhub .btn-primary:hover,
.brandberryhub #ls-button-submit:hover {
    background: var(--bb-gold-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--bb-shadow-gold) !important;
}

/* Secondary (Previous) */
.brandberryhub .btn-default,
.brandberryhub .btn-secondary,
.brandberryhub #ls-button-previous {
    background: transparent !important;
    color: var(--bb-text) !important;
    border: 1px solid var(--bb-border) !important;
}

.brandberryhub .btn-default:hover,
.brandberryhub #ls-button-previous:hover {
    border-color: var(--bb-accent-purple) !important;
    color: var(--bb-accent-purple) !important;
    background: var(--bb-light-lavender) !important;
}

/* ─── ALERTS ─── */
.brandberryhub .alert {
    border-radius: 0;
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 400;
    border: none;
    margin-bottom: 16px;
}

.brandberryhub .alert-danger { background: #FCF0EF; color: #7A1B1B; border-left: 4px solid var(--bb-danger); }
.brandberryhub .alert-success { background: #EFF8F3; color: #1A5237; border-left: 4px solid var(--bb-success); }
.brandberryhub .alert-warning { background: #FDF8EE; color: #6B4E0C; border-left: 4px solid var(--bb-warning); }
.brandberryhub .alert-info { background: #EEF4FA; color: #1A3F5C; border-left: 4px solid var(--bb-info); }

/* Validation error */
.brandberryhub .question-container.has-error {
    border-color: var(--bb-danger);
    box-shadow: 0 0 0 3px rgba(169, 50, 38, 0.12);
}

.brandberryhub .text-danger, .brandberryhub .error {
    color: var(--bb-danger);
    font-size: 13px;
}

/* ─── COMPLETED PAGE ─── */
.brandberryhub .completed-text {
    text-align: center;
    padding: 80px 24px;
}

.brandberryhub .completed-text h2 {
    font-family: var(--bb-serif) !important;
    font-weight: 600;
    font-size: 36px;
    color: var(--bb-deep-purple);
    margin-bottom: 16px;
}

.brandberryhub .completed-text p {
    font-size: 18px;
    font-weight: 300;
    color: var(--bb-text-muted);
    line-height: 1.8;
}

/* ─── PRIVACY / DATA POLICY ─── */
.brandberryhub .data-policy-notice,
.brandberryhub #datasecurity_notice {
    font-size: 13px;
    color: var(--bb-text-muted);
    background: var(--bb-light-lavender);
    border-radius: 0;
    padding: 16px 20px;
    margin-top: 24px;
    line-height: 1.6;
    border-left: 4px solid var(--bb-accent-purple);
}

.brandberryhub .data-policy-notice a {
    color: var(--bb-accent-purple);
    text-decoration: none;
    font-weight: 600;
}

.brandberryhub .data-policy-notice a:hover {
    text-decoration: underline;
}

/* ─── ASSESSMENT ─── */
.brandberryhub .assessment {
    background: var(--bb-light-lavender);
    border-left: 4px solid var(--bb-accent-purple);
    padding: 36px 40px;
    margin: 24px 0;
}

/* ─── FOOTER ─── */
.brandberryhub footer,
.brandberryhub .survey-footer {
    text-align: center;
    padding: 24px 0;
    font-size: 13px;
    font-weight: 300;
    color: var(--bb-text-muted);
    border-top: 1px solid var(--bb-border);
    margin-top: 48px;
}

.brandberryhub footer a {
    color: var(--bb-accent-purple);
    text-decoration: none;
    font-weight: 500;
}

/* ─── SECTION-SPECIFIC LABELS (Gold accents, matching brand) ─── */
.brandberryhub .section-label,
.brandberryhub .ls-label-information {
    font-size: 12px;
    font-weight: 600;
    color: var(--bb-muted-gold);
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* ─── LINKS ─── */
.brandberryhub a {
    color: var(--bb-accent-purple);
    transition: color var(--bb-transition-fast);
}

.brandberryhub a:hover {
    color: var(--bb-deep-purple);
}

/* ─── ANIMATIONS ─── */
@keyframes bbh-scale-in {
    from { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

@keyframes bbh-fade-in-up {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.brandberryhub .question-container {
    animation: bbh-fade-in-up 0.5s var(--bb-ease) both;
}

.brandberryhub .question-container:nth-child(1) { animation-delay: 0.05s; }
.brandberryhub .question-container:nth-child(2) { animation-delay: 0.10s; }
.brandberryhub .question-container:nth-child(3) { animation-delay: 0.15s; }
.brandberryhub .question-container:nth-child(4) { animation-delay: 0.20s; }
.brandberryhub .question-container:nth-child(5) { animation-delay: 0.25s; }
.brandberryhub .question-container:nth-child(6) { animation-delay: 0.30s; }
.brandberryhub .question-container:nth-child(7) { animation-delay: 0.35s; }
.brandberryhub .question-container:nth-child(8) { animation-delay: 0.40s; }

/* ─── RESPONSIVE — TABLET ─── */
@media (max-width: 992px) {
    :root { --bb-container-max: 100%; --bb-container-pad: 20px; }
    .brandberryhub .question-container { padding: 28px 24px; }
    .brandberryhub table.question thead th { padding: 10px 8px; font-size: 11px; letter-spacing: 1px; }
    .brandberryhub table.question tbody td { padding: 10px 8px; }
}

/* ─── RESPONSIVE — MOBILE ─── */
@media (max-width: 576px) {
    :root { --bb-container-pad: 16px; }
    body.brandberryhub { font-size: 15px; }
    .brandberryhub .question-container { padding: 22px 18px; margin-bottom: 14px; }
    .brandberryhub .radio-item label,
    .brandberryhub .checkbox-item label,
    .brandberryhub .answer-item label { padding: 12px 14px; font-size: 14px; }
    .brandberryhub .navigator { flex-direction: column; gap: 10px; }
    .brandberryhub .navigator .btn { width: 100%; text-align: center; }

    /* Stack arrays on mobile */
    .brandberryhub table.question,
    .brandberryhub table.question thead,
    .brandberryhub table.question tbody,
    .brandberryhub table.question tr { display: block; width: 100%; }
    .brandberryhub table.question thead { position: absolute; top: -9999px; left: -9999px; }
    .brandberryhub table.question tbody tr {
        border: 1px solid var(--bb-border); margin-bottom: 10px; padding: 14px;
        display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
    }
    .brandberryhub table.question tbody td {
        border-bottom: none; padding: 4px 8px; text-align: left;
        display: inline-flex; align-items: center;
    }
    .brandberryhub table.question tbody td:first-child {
        width: 100%; font-weight: 600; padding-bottom: 8px;
        border-bottom: 1px solid var(--bb-border); margin-bottom: 4px;
    }
    .brandberryhub table.question tbody td:before {
        content: attr(data-title); font-size: 11px; font-weight: 600;
        color: var(--bb-muted-gold); text-transform: uppercase; letter-spacing: 1px; margin-right: 6px;
    }
    .brandberryhub .btn-group { flex-direction: column; width: 100%; }
    .brandberryhub .btn-group label.btn { margin-bottom: 6px; width: 100%; text-align: center; }

    /* FIX 20: mobile array — sub-question label full-width + bold (independent of table class) */
    .brandberryhub tbody th.answertext,
    .brandberryhub tbody td.answertext {
        display: block; width: 100%;
        font-weight: 700; color: var(--bb-deep-purple);
    }
    /* FIX 20: repeated main-question context — faded, light, non-bold, above each sub-question */
    .brandberryhub .bbh-mobile-qcontext {
        display: block; width: 100%;
        font-family: var(--bb-sans, sans-serif);
        font-weight: 400; font-style: normal;
        font-size: 11.5px; line-height: 1.35;
        color: var(--bb-medium-gray, #9A93A6); opacity: 0.72;
        text-transform: none; letter-spacing: 0;
        margin: 0 0 5px 0; padding: 0;
    }
}

/* ─── PRINT ─── */
@media print {
    .brandberryhub .question-container { break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
    .brandberryhub .navigator, .brandberryhub #survey-nav, .brandberryhub .progress { display: none !important; }
}