/*--------------------------------------------------------------
 * Form G Plugin — Frontend Styles
 * Version: 1.0.0
 *
 * All visual values live in CSS custom properties so you can
 * override them from your theme without touching this file.
 * Just redefine the variables on `.fgp-wrapper` or `:root`.
 *------------------------------------------------------------*/

/* ── Design Tokens ────────────────────────────────────────── */
.fgp-wrapper {
    /* Surface colours */
    --fgp-bg:               #1c1c1e;
    --fgp-field-bg:         #2c2c2e;
    --fgp-field-bg-focus:   #3a3a3c;

    /* Borders */
    --fgp-border:           #3a3a3c;
    --fgp-border-focus:     #636366;
    --fgp-radius:           10px;
    --fgp-radius-btn:       10px;

    /* Typography */
    --fgp-text:             #f5f5f7;
    --fgp-text-muted:       #98989d;
    --fgp-placeholder:      #8e8e93;
    --fgp-font:             -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                            Helvetica, Arial, sans-serif;
    --fgp-font-size:        15px;

    /* Button */
    --fgp-btn-bg:           #3a3a3c;
    --fgp-btn-bg-hover:     #48484a;
    --fgp-btn-text:         #f5f5f7;
    --fgp-btn-shadow:       0 2px 8px rgba(0, 0, 0, 0.35);

    /* Feedback */
    --fgp-success:          #30d158;
    --fgp-error:            #ff453a;

    /* Spacing */
    --fgp-gap:              18px;
    --fgp-padding-x:        20px;
    --fgp-padding-y:        16px;

    /* Sizing */
    --fgp-max-width:        680px;
}

/* ── Wrapper ──────────────────────────────────────────────── */
.fgp-wrapper {
    font-family: var(--fgp-font);
    font-size:   var(--fgp-font-size);
    color:       var(--fgp-text);
    max-width:   var(--fgp-max-width);
    margin:      0 auto;
    padding:     24px 0;
    box-sizing:  border-box;
}

.fgp-wrapper *,
.fgp-wrapper *::before,
.fgp-wrapper *::after {
    box-sizing: inherit;
}

/* ── Screen-reader only labels ────────────────────────────── */
.fgp-sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0, 0, 0, 0);
    white-space: nowrap;
    border:     0;
}

/* ── Form layout ──────────────────────────────────────────── */
.fgp-form {
    display:        flex;
    flex-direction: column;
    gap:            var(--fgp-gap);
}

/* ── Fields ───────────────────────────────────────────────── */
.fgp-field input[type="text"],
.fgp-field input[type="email"],
.fgp-field input[type="tel"],
.fgp-field textarea {
    display:          block;
    width:            100%;
    padding:          var(--fgp-padding-y) var(--fgp-padding-x);
    background:       var(--fgp-field-bg);
    border:           1px solid var(--fgp-border);
    border-radius:    var(--fgp-radius);
    color:            var(--fgp-text);
    font-family:      var(--fgp-font);
    font-size:        var(--fgp-font-size);
    line-height:      1.5;
    outline:          none;
    transition:       background 0.2s ease,
                      border-color 0.25s ease,
                      box-shadow 0.25s ease;
    -webkit-appearance: none;
    appearance:        none;
}

.fgp-field input::placeholder,
.fgp-field textarea::placeholder {
    color:   var(--fgp-placeholder);
    opacity: 1;
}

/* Focus state */
.fgp-field input:focus,
.fgp-field textarea:focus {
    background:  var(--fgp-field-bg-focus);
    border-color: var(--fgp-border-focus);
    box-shadow:  0 0 0 3px rgba(99, 99, 102, 0.25);
}

/* Textarea */
.fgp-field textarea {
    resize:     vertical;
    min-height: 130px;
}

/* Validation highlight */
.fgp-field.fgp-field--invalid input,
.fgp-field.fgp-field--invalid textarea {
    border-color: var(--fgp-error);
    box-shadow:   0 0 0 3px rgba(255, 69, 58, 0.15);
}

/* ── Submit Button ────────────────────────────────────────── */
.fgp-btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              10px;
    width:            100%;
    padding:          var(--fgp-padding-y) var(--fgp-padding-x);
    background:       var(--fgp-btn-bg);
    color:            var(--fgp-btn-text);
    border:           1px solid var(--fgp-border);
    border-radius:    var(--fgp-radius-btn);
    font-family:      var(--fgp-font);
    font-size:        var(--fgp-font-size);
    font-weight:      600;
    letter-spacing:   0.02em;
    cursor:           pointer;
    box-shadow:       var(--fgp-btn-shadow);
    transition:       background 0.2s ease,
                      border-color 0.2s ease,
                      transform 0.1s ease;
    -webkit-appearance: none;
    appearance:        none;
}

.fgp-btn:hover {
    background:   var(--fgp-btn-bg-hover);
    border-color: var(--fgp-border-focus);
}

.fgp-btn:active {
    transform: scale(0.985);
}

/* Loading state */
.fgp-btn__loader {
    display: none;
}

.fgp-btn.is-loading {
    pointer-events: none;
    opacity: 0.72;
}

.fgp-btn.is-loading .fgp-btn__text {
    opacity: 0.5;
}

.fgp-btn.is-loading .fgp-btn__loader {
    display: inline-flex;
}

/* ── Response Messages ────────────────────────────────────── */
.fgp-response {
    margin-top: 4px;
    font-size:  14px;
    line-height: 1.5;
    min-height:  0;
}

.fgp-response:empty {
    display: none;
}

.fgp-response--success {
    color:      var(--fgp-success);
    padding:    14px var(--fgp-padding-x);
    background: rgba(48, 209, 88, 0.08);
    border:     1px solid rgba(48, 209, 88, 0.2);
    border-radius: var(--fgp-radius);
}

.fgp-response--error {
    color:      var(--fgp-error);
    padding:    14px var(--fgp-padding-x);
    background: rgba(255, 69, 58, 0.08);
    border:     1px solid rgba(255, 69, 58, 0.2);
    border-radius: var(--fgp-radius);
}

/* ── Honeypot (hidden from real users) ────────────────────── */
.fgp-hp {
    position: absolute;
    left:     -9999px;
    opacity:  0;
    height:   0;
    width:    0;
    overflow: hidden;
    tab-index: -1;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 480px) {
    .fgp-wrapper {
        --fgp-font-size: 16px;   /* Prevent iOS zoom */
        --fgp-padding-x: 16px;
        --fgp-padding-y: 14px;
        --fgp-gap:       14px;
        padding: 16px 0;
    }
}

/*--------------------------------------------------------------
 * LIGHT THEME OVERRIDE
 *
 * Add class .fgp-light to the wrapper, or override these
 * variables in your theme's CSS:
 *
 * .fgp-wrapper {
 *     --fgp-bg:          #ffffff;
 *     --fgp-field-bg:    #f5f5f7;
 *     ...
 * }
 *------------------------------------------------------------*/
.fgp-wrapper.fgp-light {
    --fgp-bg:            #ffffff;
    --fgp-field-bg:      #f5f5f7;
    --fgp-field-bg-focus:#eeeef0;
    --fgp-border:        #d1d1d6;
    --fgp-border-focus:  #8e8e93;
    --fgp-text:          #1c1c1e;
    --fgp-text-muted:    #636366;
    --fgp-placeholder:   #aeaeb2;
    --fgp-btn-bg:        #1c1c1e;
    --fgp-btn-bg-hover:  #2c2c2e;
    --fgp-btn-text:      #ffffff;
}