/* --- КОНТЕЙНЕР --- */
.sh-sup-container {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: var(--space-5, 20px) 0;
    font-family: var(--font-family, system-ui, -apple-system, BlinkMacSystemFont, sans-serif) !important;
}

.sh-sup-container * { box-sizing: border-box; }

.sh-sup-row { margin-bottom: var(--space-5, 20px); }

/* --- СПІЛЬНИЙ СТИЛЬ (ВСЕ ЯК КНОПКА) --- */
.sh-sup-input,
.sh-sup-area,
.sh-sup-btn {
    width: 100%;
    padding: var(--space-5, 20px);
    
    font-family: var(--font-family, system-ui, -apple-system, BlinkMacSystemFont, sans-serif) !important;
    font-size: var(--font-size-base, 16px);
    font-weight: 600;
    
    /* КОЛІР: Суворо беремо змінну теми (як у кнопки) */
    background: var(--lg-surface-bg, var(--sh-pill-bg, var(--glass-bg))) !important;
    background-color: var(--lg-surface-bg, var(--sh-pill-bg, var(--glass-bg))) !important;
    color: var(--text-primary, var(--sh-text)) !important;
    border: 1px solid var(--lg-surface-border, var(--sh-menu-border, var(--border-subtle))) !important;
    
    /* ФОРМА */
    border-radius: var(--sh-ui-card-radius, var(--radius-2xl, 24px)) !important;
    
    /* Скидання браузерних стилів (щоб не було сірого фону) */
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    box-shadow: var(--lg-shadow-soft, var(--shadow-sm)), var(--lg-inner-highlight) !important;
    transition: all 0.2s ease;
}

/* --- ДОДАТКОВІ СТИЛІ ДЛЯ ПОЛІВ ВВОДУ --- */
.sh-sup-input:focus,
.sh-sup-area:focus {
    border-color: var(--text-primary, var(--sh-text)) !important; /* При кліку рамка кольору тексту */
    background: var(--lg-surface-bg, var(--sh-pill-bg, var(--glass-bg))) !important; /* Фон не змінюється */
}

.sh-sup-input:focus-visible,
.sh-sup-area:focus-visible,
.sh-sup-btn:focus-visible {
    outline: none;
    box-shadow: var(--lg-shadow-soft, var(--shadow-sm)), var(--lg-inner-highlight), var(--sh-ui-focus-ring) !important;
}

.sh-sup-btn:focus-visible {
    box-shadow: var(--lg-shadow-soft, var(--shadow-sm)), var(--lg-inner-highlight), var(--sh-3d-shadow, none), var(--sh-ui-focus-ring) !important;
}

/* Поля вводу без 3D тіні, але з кольором кнопки */
/* Якщо ви хочете, щоб вони виглядали трохи "вдавленими", розкоментуйте рядок нижче. 
   Але зараз я його прибрав, щоб колір був 1-в-1 як у кнопки. */
/* .sh-sup-input, .sh-sup-area { box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1) !important; } */

.sh-sup-area {
    min-height: 150px;
    resize: vertical;
}

/* --- СТИЛІ ДЛЯ КНОПКИ (Тінь назовні) --- */
.sh-sup-btn {
    font-weight: 800;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    text-align: center;
    /* Тільки у кнопки є 3D тінь знизу */
    box-shadow: var(--lg-shadow-soft, var(--shadow-sm)), var(--lg-inner-highlight), var(--sh-3d-shadow, none) !important;
}

.sh-sup-btn:active {
    transform: scale(var(--lg-press-scale, 0.98));
    box-shadow: var(--lg-shadow-soft, var(--shadow-sm)), var(--lg-inner-highlight) !important;
}

/* --- LOADER --- */
.sh-sup-loader {
    display: none;
    text-align: center;
    margin-top: 15px;
    font-weight: bold;
    color: var(--sh-text) !important;
    opacity: 0.7;
}

/* --- БЛОК УСПІХУ --- */
.sh-sup-success-wrap {
    text-align: center;
    padding: 40px;
    background: var(--lg-surface-bg, var(--sh-pill-bg, var(--glass-bg))) !important;
    color: var(--text-primary, var(--sh-text)) !important;
    border: 1px solid var(--lg-surface-border, var(--sh-menu-border, var(--border-subtle))) !important;
    border-radius: var(--sh-ui-card-radius, var(--radius-2xl, 24px)) !important;
    box-shadow: var(--lg-shadow-soft, var(--shadow-sm)), var(--lg-inner-highlight) !important;
}

.sh-sup-success-wrap img {
    max-width: 120px;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.sh-sup-success-wrap h3 {
    font-size: 24px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: normal;
    margin: 0 0 10px 0;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sh-sup-input,
    .sh-sup-area,
    .sh-sup-btn,
    .sh-sup-success-wrap {
        backdrop-filter: var(--lg-blur, blur(var(--glass-blur, 20px)));
        -webkit-backdrop-filter: var(--lg-blur, blur(var(--glass-blur, 20px)));
    }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sh-sup-input,
    .sh-sup-area,
    .sh-sup-btn,
    .sh-sup-success-wrap {
        background: var(--bg-surface-solid, #ffffff) !important;
    }
}