/* =================================================================
   SST B2B — Enrollment Code Redemption
   Design language: #f0c040 yellow accent, #080b12 dark bg,
   DM Sans body, JetBrains Mono for code inputs, border-radius: 2px.
   ================================================================= */

:root {
    --enroll-bg:            #080b12;
    --enroll-bg-elevated:   #12151f;
    --enroll-bg-input:      #080b12;
    --enroll-border:        #2a2d36;
    --enroll-border-focus:  #f0c040;
    --enroll-accent:        #f0c040;
    --enroll-accent-hover:  #d4a800;
    --enroll-text:          #f0f2f7;
    --enroll-text-muted:    #8890a4;
    --enroll-success-bg:    #1a2e1a;
    --enroll-success-text:  #4ade80;
    --enroll-error-bg:      #2a1a1a;
    --enroll-error-text:    #f87171;
    --enroll-warn-bg:       #2a2a1a;
    --enroll-warn-text:     #facc15;
    --enroll-radius:        2px;
    --enroll-font:          'DM Sans', system-ui, sans-serif;
    --enroll-mono:          'JetBrains Mono', 'Courier New', monospace;
}

/* =================================================================
   Homepage Entry Widget — .sst-enrollment-entry-widget
   Flex row: code input + Go button, dark background.
   ================================================================= */

.sst-enrollment-entry-widget {
    font-family: var(--enroll-font);
    background:  var(--enroll-bg);
    padding:     20px;
    border:      1px solid var(--enroll-border);
    border-radius: var(--enroll-radius);
    display:     inline-block;
    width:       100%;
    box-sizing:  border-box;
}

.sst-enrollment-entry-form {
    margin:  0;
    padding: 0;
}

.sst-enrollment-entry-row {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.sst-enrollment-entry-input {
    font-family:      var(--enroll-mono);
    font-size:        14px;
    color:            var(--enroll-text);
    background:       var(--enroll-bg-input);
    border:           1px solid var(--enroll-border);
    border-radius:    var(--enroll-radius);
    padding:          10px 14px;
    flex:             1 1 auto;
    min-width:        0;
    outline:          none;
    letter-spacing:   0.04em;
    transition:       border-color 0.15s;
    box-sizing:       border-box;
}

.sst-enrollment-entry-input::placeholder {
    color:   var(--enroll-text-muted);
    opacity: 1;
}

.sst-enrollment-entry-input:focus {
    border-color: var(--enroll-border-focus);
    box-shadow:   0 0 0 2px rgba(240, 192, 64, 0.15);
}

.sst-enrollment-entry-btn {
    font-family:      var(--enroll-font);
    font-size:        14px;
    font-weight:      700;
    color:            #080b12;
    background:       var(--enroll-accent);
    border:           none;
    border-radius:    var(--enroll-radius);
    padding:          10px 20px;
    cursor:           pointer;
    white-space:      nowrap;
    flex-shrink:      0;
    transition:       background 0.15s, opacity 0.15s;
}

.sst-enrollment-entry-btn:hover {
    background: var(--enroll-accent-hover);
}

.sst-enrollment-entry-btn:active {
    opacity: 0.85;
}

/* =================================================================
   Responsive: stack widget vertically under 600 px
   ================================================================= */

@media ( max-width: 600px ) {
    .sst-enrollment-entry-row {
        flex-direction: column;
        align-items:    stretch;
    }

    .sst-enrollment-entry-btn {
        width: 100%;
    }
}

/* =================================================================
   Redeem Page Container — .sst-enrollment-redeem
   Max-width 480px, centered, 32px padding.
   ================================================================= */

.sst-enrollment-redeem {
    font-family: var(--enroll-font);
    max-width:   480px;
    margin:      40px auto;
    padding:     32px;
    background:  var(--enroll-bg-elevated);
    border:      1px solid var(--enroll-border);
    border-radius: var(--enroll-radius);
    box-sizing:  border-box;
    color:       var(--enroll-text);
}

/* =================================================================
   Step containers — .sst-redeem-step
   ================================================================= */

.sst-redeem-step {
    /* Each step is shown/hidden by JS */
}

/* =================================================================
   Typography
   ================================================================= */

.sst-redeem-heading {
    font-family: var(--enroll-font);
    font-size:   22px;
    font-weight: 700;
    color:       var(--enroll-text);
    margin:      0 0 8px;
    letter-spacing: -0.01em;
}

.sst-redeem-subheading {
    font-size:  14px;
    color:      var(--enroll-text-muted);
    margin:     0 0 20px;
    line-height: 1.5;
}

/* =================================================================
   Form layout
   ================================================================= */

.sst-redeem-form-group {
    margin-bottom: 16px;
}

.sst-redeem-form-group label {
    display:       block;
    font-size:     13px;
    font-weight:   600;
    color:         var(--enroll-text-muted);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.sst-redeem-form-group label span[aria-hidden] {
    color: var(--enroll-accent);
}

.sst-redeem-form-row {
    display: flex;
    gap:     12px;
}

.sst-redeem-half {
    flex: 1 1 0;
    min-width: 0;
}

/* =================================================================
   Inputs — .sst-redeem-input
   ================================================================= */

.sst-redeem-input {
    font-family:   var(--enroll-font);
    font-size:     15px;
    color:         #fff;
    background:    var(--enroll-bg-input);
    border:        1px solid var(--enroll-border);
    border-radius: var(--enroll-radius);
    padding:       10px 14px;
    width:         100%;
    outline:       none;
    transition:    border-color 0.15s, box-shadow 0.15s;
    box-sizing:    border-box;
}

/* Code input gets monospace treatment */
#sst-redeem-code-input {
    font-family:   var(--enroll-mono);
    font-size:     14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sst-redeem-input::placeholder {
    color:   var(--enroll-text-muted);
    opacity: 1;
}

.sst-redeem-input:focus {
    border-color: var(--enroll-border-focus);
    box-shadow:   0 0 0 2px rgba(240, 192, 64, 0.12);
}

/* =================================================================
   Buttons — .sst-redeem-btn
   ================================================================= */

.sst-redeem-btn {
    font-family:   var(--enroll-font);
    font-size:     15px;
    font-weight:   700;
    border-radius: var(--enroll-radius);
    padding:       11px 24px;
    cursor:        pointer;
    border:        none;
    transition:    background 0.15s, opacity 0.15s;
    display:       inline-block;
    text-decoration: none;
    text-align:    center;
}

.sst-redeem-btn--primary {
    color:      #080b12;
    background: var(--enroll-accent);
    margin-top: 8px;
}

.sst-redeem-btn--primary:hover {
    background: var(--enroll-accent-hover);
    color:      #080b12;
}

.sst-redeem-btn--primary:disabled,
.sst-redeem-btn--primary[disabled] {
    opacity: 0.5;
    cursor:  not-allowed;
}

.sst-redeem-btn--full {
    display: block;
    width:   100%;
    box-sizing: border-box;
}

.sst-redeem-btn--ghost {
    color:      var(--enroll-text-muted);
    background: transparent;
    border:     1px solid var(--enroll-border);
    font-size:  13px;
    padding:    8px 16px;
    margin-top: 12px;
    display:    block;
    width:      100%;
    box-sizing: border-box;
    text-align: center;
}

.sst-redeem-btn--ghost:hover {
    color:        var(--enroll-text);
    border-color: var(--enroll-text-muted);
}

/* =================================================================
   Feedback elements — .sst-redeem-feedback
   ================================================================= */

.sst-redeem-feedback {
    font-size:   13px;
    margin-top:  6px;
    padding:     0;
    display:     none;  /* JS controls visibility */
    border-radius: var(--enroll-radius);
}

.sst-redeem-feedback--error {
    display:    block;
    color:      var(--enroll-error-text);
    background: var(--enroll-error-bg);
    padding:    8px 12px;
    border:     1px solid rgba(248, 113, 113, 0.25);
}

.sst-redeem-feedback--success {
    display:    block;
    color:      var(--enroll-success-text);
    background: var(--enroll-success-bg);
    padding:    8px 12px;
    border:     1px solid rgba(74, 222, 128, 0.25);
}

.sst-redeem-feedback--warn {
    display:    block;
    color:      var(--enroll-warn-text);
    background: var(--enroll-warn-bg);
    padding:    8px 12px;
    border:     1px solid rgba(250, 204, 21, 0.25);
}

/* =================================================================
   Form-level error banner — #sst-redeem-form-errors
   ================================================================= */

#sst-redeem-form-errors {
    font-size:    13px;
    color:        var(--enroll-error-text);
    background:   var(--enroll-error-bg);
    border:       1px solid rgba(248, 113, 113, 0.25);
    border-radius: var(--enroll-radius);
    padding:      10px 14px;
    margin-bottom: 12px;
}

/* =================================================================
   Course badge (step 2 header) — #sst-redeem-course-name
   ================================================================= */

.sst-redeem-course-badge {
    font-size:     13px;
    color:         var(--enroll-accent);
    background:    rgba(240, 192, 64, 0.08);
    border:        1px solid rgba(240, 192, 64, 0.2);
    border-radius: var(--enroll-radius);
    padding:       8px 12px;
    margin-bottom: 20px;
    display:       none;  /* shown by JS after validation */
}

/* =================================================================
   Success step — #sst-redeem-step-3
   ================================================================= */

.sst-redeem-step--success {
    text-align: center;
    padding:    16px 0;
}

.sst-redeem-success-icon {
    font-size:    48px;
    color:        var(--enroll-success-text);
    line-height:  1;
    margin-bottom: 12px;
}

.sst-redeem-success-course {
    font-size:    15px;
    font-weight:  600;
    color:        var(--enroll-accent);
    margin:       0 0 8px;
}

.sst-redeem-success-msg {
    font-size:    14px;
    color:        var(--enroll-text-muted);
    margin:       0 0 20px;
    line-height:  1.5;
}

/* =================================================================
   Responsive: single-column on narrow screens
   ================================================================= */

@media ( max-width: 520px ) {
    .sst-enrollment-redeem {
        margin:  20px 16px;
        padding: 24px 20px;
    }

    .sst-redeem-form-row {
        flex-direction: column;
        gap:            0;
    }
}