/*
 * Onboarding quiz styles.
 *
 * All colors, spacing, radii, and typography reference tokens.css custom
 * properties. No hardcoded design values.
 *
 * @package Soofos
 */

/* -----------------------------------------------------------------------
 * Quiz container
 * --------------------------------------------------------------------- */
.soofos-quiz {
    max-width: 760px;
    margin: 0 auto;
    background: var(--soofos-white);
    border: 1px solid var(--soofos-border-card);
    border-radius: var(--soofos-radius-lg);
    box-shadow: var(--soofos-shadow-card);
    font-family: var(--soofos-font-family);
    overflow: hidden;
}

/* -----------------------------------------------------------------------
 * Brand header
 * --------------------------------------------------------------------- */
.soofos-quiz__brand {
    display: inline-flex;
    align-items: center;
    padding: var(--soofos-space-lg) var(--soofos-space-2xl) 0;
}

.soofos-quiz__brandmark {
    display: block;
    width: auto;
    height: 30px;
}

.soofos-quiz__brand:focus-visible {
    outline: 2px solid var(--soofos-primary);
    outline-offset: 4px;
    border-radius: 4px;
}

/* -----------------------------------------------------------------------
 * Progress chrome
 * --------------------------------------------------------------------- */
.soofos-quiz__progress {
    display: flex;
    align-items: center;
    gap: var(--soofos-space-lg);
    padding: var(--soofos-space-xl) var(--soofos-space-2xl) 0;
}

.soofos-quiz__back {
    width: 32px;
    height: 32px;
    flex: none;
    border: 1.5px solid var(--soofos-border-input);
    border-radius: 50%;
    background: var(--soofos-white);
    font-size: 15px;
    color: var(--soofos-text-muted);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.soofos-quiz__back:hover {
    border-color: var(--soofos-primary);
    background: var(--soofos-blue-tint);
}

.soofos-quiz__bar-track {
    flex: 1;
    height: 8px;
    background: var(--soofos-border-card);
    border-radius: 99px;
    overflow: hidden;
}

.soofos-quiz__bar-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--soofos-primary), var(--soofos-primary-hover-on-navy));
    border-radius: 99px;
    transition: width 0.35s ease;
}

.soofos-quiz__step-label {
    font-size: 12px;
    font-weight: var(--soofos-font-weight-extrabold);
    color: var(--soofos-text-muted-2);
    white-space: nowrap;
}

/* -----------------------------------------------------------------------
 * Steps
 * --------------------------------------------------------------------- */
.soofos-quiz__step {
    min-height: 430px;
    padding: var(--soofos-space-2xl) var(--soofos-space-3xl) var(--soofos-space-3xl);
    box-sizing: border-box;
    display: none;
}

.soofos-quiz__heading {
    font-size: 24px;
    font-weight: var(--soofos-font-weight-black);
    color: var(--soofos-ink);
    margin: 0;
}

.soofos-quiz__sub {
    font-size: 14px;
    color: var(--soofos-text-muted);
    margin: var(--soofos-space-xs) 0 var(--soofos-space-xl);
}

/* -----------------------------------------------------------------------
 * Step 0: Goal grid
 * --------------------------------------------------------------------- */
.soofos-quiz__goal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--soofos-space-lg);
}

.soofos-quiz__goal-card {
    display: flex;
    align-items: center;
    gap: var(--soofos-space-lg);
    padding: var(--soofos-space-xl) var(--soofos-space-2xl);
    border: 2px solid var(--soofos-border-input);
    border-radius: var(--soofos-radius-md);
    background: var(--soofos-white);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.soofos-quiz__goal-card:hover,
.soofos-quiz__goal-card.is-selected {
    border-color: var(--soofos-primary);
    background: var(--soofos-blue-tint);
}

.soofos-quiz__goal-emoji {
    font-size: 26px;
    line-height: 1;
}

.soofos-quiz__goal-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.soofos-quiz__goal-title {
    font-weight: var(--soofos-font-weight-black);
    font-size: 15px;
    color: var(--soofos-ink);
}

.soofos-quiz__goal-desc {
    font-weight: var(--soofos-font-weight-semibold);
    font-size: 12.5px;
    color: var(--soofos-text-muted-2);
    margin-top: var(--soofos-space-xs);
}

/* -----------------------------------------------------------------------
 * Step 1: Topics chips
 * --------------------------------------------------------------------- */
.soofos-quiz__topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--soofos-space-sm);
}

.soofos-quiz__chip {
    display: flex;
    align-items: center;
    gap: var(--soofos-space-xs);
    padding: var(--soofos-space-md) var(--soofos-space-xl);
    border: 2px solid var(--soofos-border-input);
    background: var(--soofos-white);
    border-radius: var(--soofos-radius-pill);
    font-weight: var(--soofos-font-weight-semibold);
    font-size: 14px;
    color: var(--soofos-ink);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, font-weight 0.2s ease;
}

.soofos-quiz__chip:hover {
    border-color: var(--soofos-primary);
}

.soofos-quiz__chip.is-selected {
    border-color: var(--soofos-primary);
    background: var(--soofos-blue-fill);
    font-weight: var(--soofos-font-weight-black);
}

/* -----------------------------------------------------------------------
 * Step 2: Time grid
 * --------------------------------------------------------------------- */
.soofos-quiz__time-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--soofos-space-lg);
}

.soofos-quiz__time-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--soofos-space-xl) var(--soofos-space-2xl);
    border: 2px solid var(--soofos-border-input);
    border-radius: var(--soofos-radius-md);
    background: var(--soofos-white);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.soofos-quiz__time-card:hover,
.soofos-quiz__time-card.is-selected {
    border-color: var(--soofos-primary);
    background: var(--soofos-blue-tint);
}

.soofos-quiz__time-value {
    font-weight: var(--soofos-font-weight-black);
    font-size: 16px;
    color: var(--soofos-ink);
}

.soofos-quiz__time-pill {
    font-weight: var(--soofos-font-weight-bold);
    font-size: 12px;
    color: var(--soofos-text-muted-2);
    background: var(--soofos-bg-strip);
    border-radius: var(--soofos-radius-pill);
    padding: var(--soofos-space-xs) var(--soofos-space-md);
}

/* -----------------------------------------------------------------------
 * Streak callout
 * --------------------------------------------------------------------- */
.soofos-quiz__streak-callout {
    display: flex;
    align-items: center;
    gap: var(--soofos-space-sm);
    margin-top: var(--soofos-space-xl);
    background: var(--soofos-amber-fill-2);
    border-radius: var(--soofos-radius-md);
    padding: var(--soofos-space-md) var(--soofos-space-lg);
    font-size: 13px;
    color: var(--soofos-amber-text);
    font-weight: var(--soofos-font-weight-bold);
}

/* -----------------------------------------------------------------------
 * Step 3: Languages
 * --------------------------------------------------------------------- */
.soofos-quiz__languages {
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-sm);
    max-width: 420px;
}

.soofos-quiz__lang-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--soofos-space-lg) var(--soofos-space-2xl);
    border: 2px solid var(--soofos-border-input);
    background: var(--soofos-white);
    border-radius: var(--soofos-radius-md);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.soofos-quiz__lang-toggle:hover,
.soofos-quiz__lang-toggle.is-selected {
    border-color: var(--soofos-primary);
    background: var(--soofos-blue-fill);
}

.soofos-quiz__lang-name {
    font-weight: var(--soofos-font-weight-semibold);
    font-size: 15px;
    color: var(--soofos-ink);
}

.soofos-quiz__lang-toggle.is-selected .soofos-quiz__lang-name {
    font-weight: var(--soofos-font-weight-black);
}

.soofos-quiz__lang-count {
    font-weight: var(--soofos-font-weight-bold);
    font-size: 12px;
    color: var(--soofos-text-muted-2);
}

/* -----------------------------------------------------------------------
 * Actions (Continue button)
 * --------------------------------------------------------------------- */
.soofos-quiz__actions {
    margin-top: auto;
    display: flex;
    justify-content: flex-end;
    padding-top: var(--soofos-space-2xl);
}

.soofos-quiz__continue,
.soofos-quiz__primary-btn {
    padding: var(--soofos-space-lg) var(--soofos-space-2xl);
    border: none;
    border-radius: var(--soofos-radius-pill);
    background: var(--soofos-primary);
    color: var(--soofos-white);
    font-weight: var(--soofos-font-weight-black);
    font-size: 15px;
    font-family: var(--soofos-font-family);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.soofos-quiz__continue:hover,
.soofos-quiz__primary-btn:hover {
    background: var(--soofos-primary-hover);
}

.soofos-quiz__primary-btn:disabled {
    background: var(--soofos-text-faint);
    cursor: not-allowed;
}

/* -----------------------------------------------------------------------
 * Step 4: Account layout (split)
 * --------------------------------------------------------------------- */
.soofos-quiz__account-layout {
    display: flex;
    gap: var(--soofos-space-3xl);
}

.soofos-quiz__account-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-lg);
}

/* WC Social Login buttons wrapper (plugin renders its own markup) */
.soofos-quiz__social {
    width: 100%;
}

.soofos-quiz__social .wc-social-login {
    margin: 0;
    text-align: center;
}

/* Google button (disabled fallback when WC Social Login is inactive) */
.soofos-quiz__social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--soofos-space-sm);
    width: 100%;
    padding: var(--soofos-space-lg);
    border: 1.5px solid var(--soofos-border-input);
    border-radius: var(--soofos-radius-pill);
    background: var(--soofos-white);
    font-weight: var(--soofos-font-weight-extrabold);
    font-size: 14px;
    font-family: var(--soofos-font-family);
    color: var(--soofos-ink);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.soofos-quiz__social-btn--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.soofos-quiz__social-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--soofos-blue-fill);
    color: var(--soofos-text-link);
    font-weight: var(--soofos-font-weight-black);
    font-size: 12px;
    display: grid;
    place-items: center;
}

/* Divider */
.soofos-quiz__divider {
    display: flex;
    align-items: center;
    gap: var(--soofos-space-md);
    color: var(--soofos-text-faint);
    font-size: 12px;
    font-weight: var(--soofos-font-weight-bold);
}

.soofos-quiz__divider-line {
    flex: 1;
    height: 1px;
    background: var(--soofos-border-card);
}

/* Email + password form layout */
#quiz-account-form {
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-md);
}

.soofos-quiz__field {
    position: relative;
}

/* Shared input style (email + password) */
.soofos-quiz__input {
    width: 100%;
    box-sizing: border-box;
    padding: var(--soofos-space-lg) var(--soofos-space-2xl);
    border: 1.5px solid var(--soofos-border-input);
    border-radius: var(--soofos-radius-pill);
    font-weight: var(--soofos-font-weight-semibold);
    font-size: 14px;
    font-family: var(--soofos-font-family);
    color: var(--soofos-ink);
    outline: none;
    transition: border-color 0.2s ease;
}

.soofos-quiz__input:focus {
    border-color: var(--soofos-primary);
    box-shadow: var(--soofos-shadow-focus);
}

.soofos-quiz__input::placeholder {
    color: var(--soofos-text-muted-2);
}

/* Password field: reserve room for the show/hide toggle button */
.soofos-quiz__field--password .soofos-quiz__input {
    padding-right: 48px;
}

.soofos-quiz__password-toggle {
    position: absolute;
    top: 50%;
    right: var(--soofos-space-sm);
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    min-height: 0;
    border: none;
    border-radius: var(--soofos-radius-sm);
    background: transparent;
    color: var(--soofos-text-muted-2);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.soofos-quiz__password-toggle:hover {
    color: var(--soofos-primary);
    background: var(--soofos-blue-tint);
}

.soofos-quiz__password-toggle:focus-visible {
    outline: 2px solid var(--soofos-primary);
    outline-offset: 2px;
}

.soofos-quiz__password-toggle-icon--hide {
    display: none;
}

.soofos-quiz__password-toggle[aria-pressed="true"] .soofos-quiz__password-toggle-icon--show {
    display: none;
}

.soofos-quiz__password-toggle[aria-pressed="true"] .soofos-quiz__password-toggle-icon--hide {
    display: grid;
}

/* Privacy / terms line */
.soofos-quiz__privacy {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--soofos-text-muted-2);
}

.soofos-quiz__privacy a {
    color: var(--soofos-text-link);
    font-weight: var(--soofos-font-weight-semibold);
}

/* Screen reader only */
.soofos-quiz__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Status messages */
.soofos-quiz__status {
    font-size: 13px;
    font-weight: var(--soofos-font-weight-semibold);
    padding: var(--soofos-space-md) var(--soofos-space-lg);
    border-radius: var(--soofos-radius-sm);
    min-height: 1.5em;
}

.soofos-quiz__status--error {
    color: var(--red-danger);
    background: var(--red-fill);
}

.soofos-quiz__status--success {
    color: var(--soofos-green);
    background: var(--soofos-green-fill);
}

/* -----------------------------------------------------------------------
 * Plan summary (right column)
 * --------------------------------------------------------------------- */
.soofos-quiz__plan-summary {
    width: 230px;
    flex: none;
    background: var(--soofos-bg-warm);
    border: 1px solid var(--soofos-border-card);
    border-radius: var(--soofos-radius-md);
    padding: var(--soofos-space-lg) var(--soofos-space-2xl);
    height: fit-content;
}

.soofos-quiz__summary-title {
    font-size: 11px;
    font-weight: var(--soofos-font-weight-extrabold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--soofos-text-muted-2);
    margin: 0 0 var(--soofos-space-lg);
}

.soofos-quiz__summary-list {
    display: flex;
    flex-direction: column;
    gap: var(--soofos-space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.soofos-quiz__summary-item {
    display: flex;
    gap: var(--soofos-space-xs);
    font-size: 13px;
    color: var(--soofos-ink);
    font-weight: var(--soofos-font-weight-bold);
}

.soofos-quiz__summary-emoji {
    font-size: 16px;
    line-height: 1;
    flex: none;
}

/* -----------------------------------------------------------------------
 * Responsive: stack on narrow screens
 * --------------------------------------------------------------------- */
@media (max-width: 640px) {
    .soofos-quiz__goal-grid,
    .soofos-quiz__time-grid {
        grid-template-columns: 1fr;
    }

    .soofos-quiz__account-layout {
        flex-direction: column-reverse;
    }

    .soofos-quiz__plan-summary {
        width: 100%;
    }

    .soofos-quiz__step {
        padding: var(--soofos-space-2xl) var(--soofos-space-xl) var(--soofos-space-2xl);
    }
}