/* ==========================================================================
   Social Square Core Plugin Styles
   Minimal — mostly uses theme design tokens and components.
   Only includes styles specific to plugin-rendered UI.
   ========================================================================== */

/* Auth form page centering */
.ssc-auth-form {
    padding: var(--ss-spacing-2xl) var(--ss-spacing-md);
}

/* Step indicator transitions */
.ssc-step {
    transition: background var(--ss-transition-normal);
}

/* Niche selection chips in registration */
.ssc-form-step[data-step="3"] .ss-chip {
    transition: all var(--ss-transition-normal);
    border: var(--ss-border-hairline) solid var(--ss-border-default);
}

.ssc-form-step[data-step="3"] .ss-chip.ss-chip--active {
    background: var(--ss-primary-50);
    border-color: var(--ss-primary-500);
    color: var(--ss-primary-600);
}

/* Settings shortcode page */
.ssc-settings-page {
    max-width: 720px;
    margin: 0 auto;
}

/* Large modal variant (customize profile) */
.ss-modal--lg {
    max-width: 580px;
    width: 90vw;
}

.ssc-settings-section {
    background: var(--ss-card-bg);
    border: var(--ss-border-hairline) solid var(--ss-border-default);
    border-radius: var(--ss-radius-lg);
    padding: var(--ss-spacing-lg);
    margin-bottom: var(--ss-spacing-lg);
}

.ssc-settings-section__title {
    font-family: var(--ss-font-heading);
    font-size: var(--ss-type-h4);
    font-weight: var(--ss-weight-semibold);
    margin-bottom: var(--ss-spacing-lg);
    padding-bottom: var(--ss-spacing-md);
    border-bottom: var(--ss-border-hairline) solid var(--ss-border-subtle);
}