/*
 * ShortU — Feature page styles
 * Shared by all /features/<slug>/ pages
 */

/* ── CSS Custom Properties (inherit from base-front.css :root) ─────────── */

/* ── Feature highlight card ───────────────────────────────────────────── */
.su-feature-highlight {
    border:        2px solid var(--su-color-border-soft);
    border-radius: var(--su-radius);
    padding:       24px 18px;
    transition:    border-color var(--su-transition), box-shadow var(--su-transition);
}

.su-feature-highlight:hover {
    border-color: var(--su-color-accent);
    box-shadow:   0 4px 16px var(--su-color-shadow-soft);
}

/* ── Plan badges ─────────────────────────────────────────────────────── */
.su-plan-badge {
    border-radius: var(--su-radius-sm);
    display:       inline-block;
    font-size:     0.72rem;
    font-weight:   700;
    letter-spacing: 0.04em;
    margin-top:    10px;
    padding:       3px 10px;
    text-transform: uppercase;
}

.su-plan-badge--free {
    background: #e8f5e9;
    color:      #2e7d32;
}

.su-plan-badge--starter {
    background: #fff3e0;
    color:      #e65100;
}

.su-plan-badge--pro {
    background: #ede7f6;
    color:      #4527a0;
}

/* ── Info card block ─────────────────────────────────────────────────── */
.su-feature-card {
    background:    var(--su-color-white);
    border:        1px solid var(--su-color-border);
    border-radius: var(--su-radius-lg);
    box-shadow:    0 2px 12px var(--su-color-shadow-soft);
    padding:       28px 32px;
}

.su-feature-card__title {
    color:       var(--su-color-primary);
    font-size:   2.5rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.su-feature-card__lead {
    color:     var(--su-color-text-muted);
    font-size: 1.5rem;
}

.su-feature-card__response-label {
    color:      var(--su-color-text-muted);
    font-size:  0.8rem;
    margin-top: 14px;
}

/* ── Code block ──────────────────────────────────────────────────────── */
.su-code-block {
    background:    #1a1a2e;
    border-radius: var(--su-radius);
    color:         #e0e0f0;
    font-size:     1.2rem;
    line-height:   1.6;
    margin:        12px 0 0;
    overflow-x:    auto;
    padding:       16px 20px;
    white-space:   pre;
}

.su-code-block--response {
    background: #0d1117;
    color:      #b9f0b9;
}

/* ── Inline code snippets ────────────────────────────────────────────── */
.su-code-inline {
    border-radius: var(--su-radius-sm);
    display:       inline-block;
    font-size:     0.88rem;
    padding:       4px 10px;
}

.su-code-inline--muted {
    background: #f0f0f5;
    color:      var(--su-color-text-muted);
}

.su-code-inline--brand {
    background: #eaf4ff;
    color:      var(--su-color-primary-mid, #2a1880);
}

/* ── Use-case list item ──────────────────────────────────────────────── */
.su-use-case-item {
    background:    var(--su-color-bg);
    border:        1px solid var(--su-color-border);
    border-radius: var(--su-radius);
    font-size:     0.93rem;
    padding:       14px 18px;
}

/* ── Stat number card ────────────────────────────────────────────────── */
.su-stat-card {
    border:        1px solid var(--su-color-border-soft);
    border-radius: var(--su-radius);
    padding:       24px 16px;
}

.su-stat-number {
    color:      var(--su-color-primary);
    font-size:  2.2rem;
    font-weight: 800;
    line-height: 1.1;
    margin:     8px 0 4px;
}

/* ── Uniform form fields (applies to .su-form class) ────────────────── */
.su-form .form-control,
.su-form input[type="text"],
.su-form input[type="email"],
.su-form input[type="url"],
.su-form input[type="tel"],
.su-form input[type="number"],
.su-form select,
.su-form textarea {
    background:    var(--su-color-white);
    border:        1px solid var(--su-color-border);
    border-radius: var(--su-radius);
    color:         var(--su-color-text);
    font-size:     1.2rem;
    padding:       12px 16px;
    transition:    border-color var(--su-transition), box-shadow var(--su-transition);
    width:         100%;
}

.su-form .form-control:focus,
.su-form input:focus,
.su-form select:focus,
.su-form textarea:focus {
    border-color: var(--su-color-accent);
    box-shadow:   0 0 0 3px rgba(250, 143, 119, 0.18);
    outline:      none;
}

.su-form .form-control.is-invalid,
.su-form input.is-invalid,
.su-form select.is-invalid {
    border-color: var(--su-color-danger);
}

.su-form label {
    color:       var(--su-color-text);
    font-size:   1.5rem;
    font-weight: 600;
    margin-bottom: 6px;
}

.su-form .su-form-group {
    margin-bottom: 18px;
}

.su-form .su-form-error {
    color:     var(--su-color-danger);
    font-size: 0.82rem;
    margin-top: 4px;
}

.su-form .su-form-help {
    color:     var(--su-color-text-muted);
    font-size: 0.82rem;
    margin-top: 4px;
}

/* ── Submit / CTA button ─────────────────────────────────────────────── */
.su-btn-submit {
    background:    var(--su-color-accent-orange);
    border:        none;
    border-radius: var(--su-radius);
    color:         var(--su-color-white);
    cursor:        pointer;
    font-size:     1.5rem;
    font-weight:   700;
    margin-top: 20px;
    padding:       12px 32px;
    transition:    background var(--su-transition);
}

.su-btn-submit:hover {
    background: var(--su-color-accent-hover);
}

/* ── Success / Error alert ───────────────────────────────────────────── */
.su-alert {
    border-radius: var(--su-radius);
    font-size:     0.93rem;
    margin-bottom: 20px;
    padding:       14px 18px;
}

.su-alert--success {
    background: #e8f5e9;
    border:     1px solid #a5d6a7;
    color:      #1b5e20;
}

.su-alert--error {
    background: #fdecea;
    border:     1px solid #f5a0a0;
    color:      #b71c1c;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .su-feature-card {
        padding: 20px 18px;
    }

    .su-stat-number {
        font-size: 1.7rem;
    }

    .su-code-block {
        font-size: 0.75rem;
    }
}