/*
 * Support Group Registration – Branded Form Styles
 * The Mosaic Project of South Texas (TMPST)
 */

/* ─── CSS Custom Properties ─────────────────────────────────────────────── */
:root {
    --sgr-primary:        #6B4C9A;
    --sgr-primary-dark:   #553A7D;
    --sgr-accent:         #E8913A;
    --sgr-bg:             #FAF7FF;
    --sgr-text:           #2D2D3F;
    --sgr-success:        #4CAF50;
    --sgr-error:          #D32F2F;
    --sgr-border:         #E0D6F0;
    --sgr-shadow:         0 4px 24px rgba(107, 76, 154, 0.10);
    --sgr-radius:         12px;
    --sgr-radius-sm:      6px;
    --sgr-transition:     0.18s ease;
}

/* ─── Card Container ─────────────────────────────────────────────────────── */
.sgr-card {
    background:    var(--sgr-bg);
    border:        1px solid var(--sgr-border);
    border-radius: var(--sgr-radius);
    box-shadow:    var(--sgr-shadow);
    max-width:     640px;
    margin:        2rem auto;
    overflow:      hidden;
    font-family:   inherit;
    color:         var(--sgr-text);
}

/* ─── Card Header ────────────────────────────────────────────────────────── */
.sgr-card-header {
    background:  linear-gradient(135deg, var(--sgr-primary) 0%, var(--sgr-primary-dark) 100%);
    color:       #ffffff;
    padding:     1.5rem 1.75rem 1.25rem;
}

.sgr-card-header h3 {
    margin:      0 0 0.75rem;
    font-size:   1.35rem;
    font-weight: 700;
    line-height: 1.3;
    color:       #ffffff;
}

/* ─── Session Info ───────────────────────────────────────────────────────── */
.sgr-session-info {
    display:        flex;
    flex-direction: column;
    gap:            0.35rem;
    font-size:      0.9rem;
    opacity:        0.92;
    color:          #ffffff;
}

.sgr-session-info span {
    display:     flex;
    align-items: center;
    gap:         0.4rem;
}

/* ─── Spots Remaining Pill ───────────────────────────────────────────────── */
.sgr-spots {
    display:          inline-block;
    margin-top:       0.65rem;
    padding:          0.25rem 0.75rem;
    background:       rgba(255, 255, 255, 0.20);
    border:           1px solid rgba(255, 255, 255, 0.40);
    border-radius:    999px;
    font-size:        0.78rem;
    font-weight:      600;
    letter-spacing:   0.02em;
    color:            #ffffff;
}

.sgr-spots.sgr-spots-low {
    background: rgba(211, 47, 47, 0.25);
    border-color: rgba(211, 47, 47, 0.55);
    color: #ffe5e5;
}

/* ─── Card Body ──────────────────────────────────────────────────────────── */
.sgr-card-body {
    padding: 1.5rem 1.75rem 1.75rem;
}

/* ─── Form Layout ────────────────────────────────────────────────────────── */
.sgr-form-row {
    display: flex;
    gap:     1rem;
    margin-bottom: 1rem;
}

.sgr-form-col {
    flex:      1 1 0;
    min-width: 200px;
    display:   flex;
    flex-direction: column;
}

.sgr-form-col label {
    display:       block;
    font-weight:   700;
    font-size:     0.875rem;
    margin-bottom: 0.35rem;
    color:         var(--sgr-text);
}

.sgr-form-col input {
    width:         100%;
    padding:       0.55rem 0.75rem;
    border:        1.5px solid var(--sgr-border);
    border-radius: var(--sgr-radius-sm);
    background:    #ffffff;
    color:         var(--sgr-text);
    font-size:     0.95rem;
    line-height:   1.4;
    transition:    border-color var(--sgr-transition), box-shadow var(--sgr-transition);
    box-sizing:    border-box;
}

.sgr-form-col input:focus {
    outline:      none;
    border-color: var(--sgr-primary);
    box-shadow:   0 0 0 3px rgba(107, 76, 154, 0.18);
}

.sgr-form-col input::placeholder {
    color:   #a89ec0;
    opacity: 1;
}

/* ─── Form Note ──────────────────────────────────────────────────────────── */
.sgr-form-note {
    font-size:    0.78rem;
    font-style:   italic;
    color:        #7a6e8a;
    margin-top:   0.3rem;
    line-height:  1.5;
}

/* ─── Submit Button ──────────────────────────────────────────────────────── */
.sgr-submit-btn {
    display:         block;
    width:           100%;
    padding:         0.75rem 1rem;
    margin-top:      1.25rem;
    background:      linear-gradient(135deg, var(--sgr-primary) 0%, var(--sgr-primary-dark) 100%);
    color:           #ffffff;
    font-size:       1rem;
    font-weight:     700;
    letter-spacing:  0.03em;
    text-align:      center;
    border:          none;
    border-radius:   var(--sgr-radius-sm);
    cursor:          pointer;
    transition:      transform var(--sgr-transition), box-shadow var(--sgr-transition), background var(--sgr-transition);
    box-shadow:      0 2px 8px rgba(107, 76, 154, 0.25);
}

.sgr-submit-btn:hover,
.sgr-submit-btn:focus-visible {
    background:  linear-gradient(135deg, var(--sgr-primary-dark) 0%, #432e63 100%);
    transform:   translateY(-2px);
    box-shadow:  0 6px 18px rgba(107, 76, 154, 0.35);
    outline:     none;
}

.sgr-submit-btn:active {
    transform:  translateY(0);
    box-shadow: 0 2px 6px rgba(107, 76, 154, 0.20);
}

.sgr-submit-btn:disabled {
    opacity:    0.6;
    cursor:     not-allowed;
    transform:  none;
    box-shadow: none;
}

/* ─── Alert Cards ────────────────────────────────────────────────────────── */
.sgr-alert {
    padding:       0.9rem 1.1rem;
    border-radius: var(--sgr-radius-sm);
    border-left:   4px solid transparent;
    font-size:     0.92rem;
    line-height:   1.5;
    margin-bottom: 1rem;
}

.sgr-alert-success {
    background:  rgba(76, 175, 80, 0.10);
    border-color: var(--sgr-success);
    color:       #1b5e20;
}

.sgr-alert-error {
    background:  rgba(211, 47, 47, 0.08);
    border-color: var(--sgr-error);
    color:       #7f0000;
}

.sgr-alert-full {
    background:   rgba(107, 76, 154, 0.08);
    border-color: var(--sgr-primary);
    color:        var(--sgr-primary-dark);
    text-align:   center;
    font-weight:  600;
}

/* ─── Honeypot Fields (spam trap) ────────────────────────────────────────── */
.sgr-hp-1,
.sgr-hp-2 {
    position:   absolute;
    left:       -9999px;
    top:        -9999px;
    width:      1px;
    height:     1px;
    overflow:   hidden;
    opacity:    0;
    pointer-events: none;
    tab-index:  -1;
}

/* ─── Responsive: single column below 600px ─────────────────────────────── */
@media (max-width: 600px) {
    .sgr-card {
        margin:        1rem;
        border-radius: var(--sgr-radius-sm);
    }

    .sgr-card-header {
        padding: 1.1rem 1.1rem 1rem;
    }

    .sgr-card-header h3 {
        font-size: 1.15rem;
    }

    .sgr-card-body {
        padding: 1rem 1.1rem 1.25rem;
    }

    .sgr-form-row {
        flex-direction: column;
        gap:            0.75rem;
    }

    .sgr-form-col {
        min-width: 0;
    }
}