/*
 * The "submit a gradient" form. Moved out of the child theme's style.css.
 * Loaded by the [gradient_submit] shortcode.
 */

/* ─── Submit form ────────────────────────────────────────── */
#gs-form-wrap {
    max-width: 600px;
    margin: 0 auto;
    padding: 48px 24px 100px;
}

/* The title is the page hero now (tgc_page_hero in submit.php). */
.tg-hero #gs-form-wrap { padding-top: 0; }
.tg-hero #gs-form-wrap .tg-info-hero { margin-bottom: 28px; }

.gs-sub { font-size: 15px; color: #6E6E78; margin: 0 0 36px; line-height: 1.6; }

.gs-preview-box {
    width: 100%;
    height: 130px;
    border-radius: 24px;
    margin-bottom: 28px;
    transition: background 0.3s;
    background: linear-gradient(135deg, #E0E0E0, #C8C8C8);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.gs-field { margin-bottom: 18px; }

.gs-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #444;
    margin-bottom: 6px;
    letter-spacing: 0.02em;
}

.gs-field input,
.gs-field select,
.gs-field textarea {
    width: 100%;
    padding: 10px 14px;
    border-radius: 18px;
    border: 1.5px solid #E8E8E8;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.12s, box-shadow 0.12s;
    color: #111;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.gs-field input:focus,
.gs-field select:focus,
.gs-field textarea:focus {
    border-color: #111;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

.gs-field textarea { resize: vertical; min-height: 80px; }

.gs-colors { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.gs-color-input label { font-size: 12px; font-weight: 600; color: #444; display: block; margin-bottom: 6px; }
.gs-color-swatch { width: 100%; height: 34px; border-radius: 14px; border: 1.5px solid #E8E8E8; cursor: pointer; display: block; margin-bottom: 6px; }
.gs-color-input input[type=text] { width: 100%; padding: 8px 10px; border-radius: 999px; border: 1.5px solid #E8E8E8; font-size: 12px; font-family: 'SF Mono', 'Fira Code', monospace; color: #111; box-sizing: border-box; }

.gs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.gs-submit {
    width: 100%;
    padding: 13px;
    border-radius: 999px;
    border: none;
    background: #0A0A0A;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, transform 0.12s;
    margin-top: 8px;
    letter-spacing: -0.01em;
}

.gs-submit:hover { background: #333; transform: translateY(-1px); }
.gs-hint { font-size: 11px; color: #6E6E78; margin-top: 5px; }
.gs-errors { background: #FFF0F0; border: 1px solid #FED7D7; border-radius: 16px; padding: 12px 16px; margin-bottom: 20px; color: #C53030; font-size: 13px; }
.gs-req { color: #E55; margin-left: 2px; }

.gs-success {
    text-align: center;
    padding: 60px 24px;
    background: #F0FDF4;
    border-radius: 24px;
    border: 1px solid #BBF7D0;
}

.gs-success h2 { font-size: 22px; font-weight: 700; color: #166534; margin: 0 0 8px; }
.gs-success p { color: #15803D; font-size: 14px; margin: 0; }

/* Honeypot: off-screen, not display:none, which some bots skip. */
.gs-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }