/**
 * Sky GF Style - Form Style Presets
 *
 * Five complete, self-contained form skins selected via the widget's
 * "Form Style" dropdown. Every rule is scoped under
 * .sky-gf-form-wrapper.sky-gfs-preset-<name> and every custom class/var is
 * prefixed sky-gfs- so nothing can leak to or from the theme or other plugins.
 *
 * Theme fitting: each preset reads --sky-gfs-accent (overridable per-widget
 * via the "Accent Color" control) and inherits the theme's font-family, so a
 * single colour pick re-themes the whole preset to match the site.
 *
 * Loaded only on pages where a widget actually uses a preset
 * (conditional get_style_depends).
 *
 * @package Sky_GF_Style
 * @version 1.8.4
 */

/* ==========================================================================
   Shared preset foundation
   ========================================================================== */

.sky-gf-form-wrapper[class*="sky-gfs-preset-"] {
    --sky-gfs-accent: #2563eb;
    --sky-gfs-accent-contrast: #ffffff;
    --sky-gfs-text: #1f2937;
    --sky-gfs-muted: #6b7280;
    --sky-gfs-bg: transparent;
    --sky-gfs-field-bg: #ffffff;
    --sky-gfs-field-border: #d1d5db;
    --sky-gfs-radius: 8px;
    --sky-gfs-error: #dc2626;
    --sky-gfs-success: #16a34a;

    font-family: inherit;
    background: var(--sky-gfs-bg);
    color: var(--sky-gfs-text);
}

.sky-gf-form-wrapper[class*="sky-gfs-preset-"] .gform_title {
    color: var(--sky-gfs-text);
    font-family: inherit;
}

.sky-gf-form-wrapper[class*="sky-gfs-preset-"] .gform_description,
.sky-gf-form-wrapper[class*="sky-gfs-preset-"] .gfield_description {
    color: var(--sky-gfs-muted);
}

.sky-gf-form-wrapper[class*="sky-gfs-preset-"] .gfield_label,
.sky-gf-form-wrapper[class*="sky-gfs-preset-"] .gform-field-label {
    color: var(--sky-gfs-text);
    font-family: inherit;
}

.sky-gf-form-wrapper[class*="sky-gfs-preset-"] .ginput_container label {
    color: var(--sky-gfs-muted);
}

.sky-gf-form-wrapper[class*="sky-gfs-preset-"] .gfield_required {
    color: var(--sky-gfs-error);
}

.sky-gf-form-wrapper[class*="sky-gfs-preset-"] input[type="text"],
.sky-gf-form-wrapper[class*="sky-gfs-preset-"] input[type="email"],
.sky-gf-form-wrapper[class*="sky-gfs-preset-"] input[type="tel"],
.sky-gf-form-wrapper[class*="sky-gfs-preset-"] input[type="number"],
.sky-gf-form-wrapper[class*="sky-gfs-preset-"] input[type="password"],
.sky-gf-form-wrapper[class*="sky-gfs-preset-"] input[type="url"],
.sky-gf-form-wrapper[class*="sky-gfs-preset-"] input[type="date"],
.sky-gf-form-wrapper[class*="sky-gfs-preset-"] textarea,
.sky-gf-form-wrapper[class*="sky-gfs-preset-"] select {
    font-family: inherit !important;
    color: var(--sky-gfs-text) !important;
    background-color: var(--sky-gfs-field-bg) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    outline: none !important;
}

.sky-gf-form-wrapper[class*="sky-gfs-preset-"] input::placeholder,
.sky-gf-form-wrapper[class*="sky-gfs-preset-"] textarea::placeholder {
    color: var(--sky-gfs-muted);
    opacity: 0.8;
}

/* Choices (radio/checkbox) take the accent */
.sky-gf-form-wrapper[class*="sky-gfs-preset-"] input[type="radio"],
.sky-gf-form-wrapper[class*="sky-gfs-preset-"] input[type="checkbox"] {
    accent-color: var(--sky-gfs-accent);
}

.sky-gf-form-wrapper[class*="sky-gfs-preset-"] .gchoice label {
    color: var(--sky-gfs-text);
}

/* Submit button base */
.sky-gf-form-wrapper[class*="sky-gfs-preset-"] .gform_button,
.sky-gf-form-wrapper[class*="sky-gfs-preset-"] input[type="submit"],
.sky-gf-form-wrapper[class*="sky-gfs-preset-"] button[type="submit"],
.sky-gf-form-wrapper[class*="sky-gfs-preset-"] .gform_footer button {
    font-family: inherit !important;
    cursor: pointer;
    border: none !important;
    background-image: none !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, color 0.2s ease;
}

/* Validation + confirmation */
.sky-gf-form-wrapper[class*="sky-gfs-preset-"] .validation_message,
.sky-gf-form-wrapper[class*="sky-gfs-preset-"] .gfield_error .validation_message {
    color: var(--sky-gfs-error);
    background: transparent;
    border: none;
}

.sky-gf-form-wrapper[class*="sky-gfs-preset-"] .gfield_error input,
.sky-gf-form-wrapper[class*="sky-gfs-preset-"] .gfield_error textarea,
.sky-gf-form-wrapper[class*="sky-gfs-preset-"] .gfield_error select {
    border-color: var(--sky-gfs-error) !important;
}

.sky-gf-form-wrapper[class*="sky-gfs-preset-"] .gform_confirmation_message {
    color: var(--sky-gfs-success);
}

/* ==========================================================================
   Preset 1: Minimal Clean — underline fields, airy spacing
   ========================================================================== */

.sky-gf-form-wrapper.sky-gfs-preset-minimal {
    --sky-gfs-field-bg: transparent;
    --sky-gfs-radius: 0px;
}

.sky-gf-form-wrapper.sky-gfs-preset-minimal .gfield_label,
.sky-gf-form-wrapper.sky-gfs-preset-minimal .gform-field-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sky-gf-form-wrapper.sky-gfs-preset-minimal input[type="text"],
.sky-gf-form-wrapper.sky-gfs-preset-minimal input[type="email"],
.sky-gf-form-wrapper.sky-gfs-preset-minimal input[type="tel"],
.sky-gf-form-wrapper.sky-gfs-preset-minimal input[type="number"],
.sky-gf-form-wrapper.sky-gfs-preset-minimal input[type="password"],
.sky-gf-form-wrapper.sky-gfs-preset-minimal input[type="url"],
.sky-gf-form-wrapper.sky-gfs-preset-minimal input[type="date"],
.sky-gf-form-wrapper.sky-gfs-preset-minimal textarea,
.sky-gf-form-wrapper.sky-gfs-preset-minimal select {
    border: none !important;
    border-bottom: 2px solid var(--sky-gfs-field-border) !important;
    border-radius: 0 !important;
    padding: 10px 2px !important;
    box-shadow: none !important;
}

.sky-gf-form-wrapper.sky-gfs-preset-minimal input:focus,
.sky-gf-form-wrapper.sky-gfs-preset-minimal textarea:focus,
.sky-gf-form-wrapper.sky-gfs-preset-minimal select:focus {
    border-bottom-color: var(--sky-gfs-accent) !important;
}

.sky-gf-form-wrapper.sky-gfs-preset-minimal .gform_button,
.sky-gf-form-wrapper.sky-gfs-preset-minimal input[type="submit"],
.sky-gf-form-wrapper.sky-gfs-preset-minimal button[type="submit"],
.sky-gf-form-wrapper.sky-gfs-preset-minimal .gform_footer button {
    background-color: var(--sky-gfs-accent) !important;
    color: var(--sky-gfs-accent-contrast) !important;
    border-radius: 0 !important;
    padding: 14px 36px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 13px !important;
}

.sky-gf-form-wrapper.sky-gfs-preset-minimal .gform_button:hover,
.sky-gf-form-wrapper.sky-gfs-preset-minimal input[type="submit"]:hover,
.sky-gf-form-wrapper.sky-gfs-preset-minimal button[type="submit"]:hover,
.sky-gf-form-wrapper.sky-gfs-preset-minimal .gform_footer button:hover {
    opacity: 0.85;
}

/* ==========================================================================
   Preset 2: Modern Rounded — borderless filled fields, pill button
   ========================================================================== */

.sky-gf-form-wrapper.sky-gfs-preset-modern {
    --sky-gfs-field-bg: #f3f4f6;
    --sky-gfs-radius: 12px;
}

.sky-gf-form-wrapper.sky-gfs-preset-modern .gfield_label,
.sky-gf-form-wrapper.sky-gfs-preset-modern .gform-field-label {
    font-weight: 600;
    font-size: 14px;
}

.sky-gf-form-wrapper.sky-gfs-preset-modern input[type="text"],
.sky-gf-form-wrapper.sky-gfs-preset-modern input[type="email"],
.sky-gf-form-wrapper.sky-gfs-preset-modern input[type="tel"],
.sky-gf-form-wrapper.sky-gfs-preset-modern input[type="number"],
.sky-gf-form-wrapper.sky-gfs-preset-modern input[type="password"],
.sky-gf-form-wrapper.sky-gfs-preset-modern input[type="url"],
.sky-gf-form-wrapper.sky-gfs-preset-modern input[type="date"],
.sky-gf-form-wrapper.sky-gfs-preset-modern textarea,
.sky-gf-form-wrapper.sky-gfs-preset-modern select {
    border: 2px solid transparent !important;
    border-radius: var(--sky-gfs-radius) !important;
    padding: 12px 16px !important;
    box-shadow: none !important;
}

.sky-gf-form-wrapper.sky-gfs-preset-modern input:focus,
.sky-gf-form-wrapper.sky-gfs-preset-modern textarea:focus,
.sky-gf-form-wrapper.sky-gfs-preset-modern select:focus {
    border-color: var(--sky-gfs-accent) !important;
    background-color: #ffffff !important;
}

.sky-gf-form-wrapper.sky-gfs-preset-modern .gform_button,
.sky-gf-form-wrapper.sky-gfs-preset-modern input[type="submit"],
.sky-gf-form-wrapper.sky-gfs-preset-modern button[type="submit"],
.sky-gf-form-wrapper.sky-gfs-preset-modern .gform_footer button {
    background-color: var(--sky-gfs-accent) !important;
    color: var(--sky-gfs-accent-contrast) !important;
    border-radius: 999px !important;
    padding: 14px 40px !important;
    font-weight: 600 !important;
}

.sky-gf-form-wrapper.sky-gfs-preset-modern .gform_button:hover,
.sky-gf-form-wrapper.sky-gfs-preset-modern input[type="submit"]:hover,
.sky-gf-form-wrapper.sky-gfs-preset-modern button[type="submit"]:hover,
.sky-gf-form-wrapper.sky-gfs-preset-modern .gform_footer button:hover {
    box-shadow: 0 6px 16px color-mix(in srgb, var(--sky-gfs-accent) 40%, transparent);
    transform: translateY(-1px);
}

/* ==========================================================================
   Preset 3: Outlined — transparent fields, crisp 2px borders
   ========================================================================== */

.sky-gf-form-wrapper.sky-gfs-preset-outline {
    --sky-gfs-field-bg: transparent;
    --sky-gfs-field-border: #9ca3af;
    --sky-gfs-radius: 8px;
}

.sky-gf-form-wrapper.sky-gfs-preset-outline .gfield_label,
.sky-gf-form-wrapper.sky-gfs-preset-outline .gform-field-label {
    font-weight: 500;
    font-size: 14px;
}

.sky-gf-form-wrapper.sky-gfs-preset-outline input[type="text"],
.sky-gf-form-wrapper.sky-gfs-preset-outline input[type="email"],
.sky-gf-form-wrapper.sky-gfs-preset-outline input[type="tel"],
.sky-gf-form-wrapper.sky-gfs-preset-outline input[type="number"],
.sky-gf-form-wrapper.sky-gfs-preset-outline input[type="password"],
.sky-gf-form-wrapper.sky-gfs-preset-outline input[type="url"],
.sky-gf-form-wrapper.sky-gfs-preset-outline input[type="date"],
.sky-gf-form-wrapper.sky-gfs-preset-outline textarea,
.sky-gf-form-wrapper.sky-gfs-preset-outline select {
    border: 2px solid var(--sky-gfs-field-border) !important;
    border-radius: var(--sky-gfs-radius) !important;
    padding: 11px 14px !important;
    box-shadow: none !important;
}

.sky-gf-form-wrapper.sky-gfs-preset-outline input:focus,
.sky-gf-form-wrapper.sky-gfs-preset-outline textarea:focus,
.sky-gf-form-wrapper.sky-gfs-preset-outline select:focus {
    border-color: var(--sky-gfs-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky-gfs-accent) 18%, transparent) !important;
}

.sky-gf-form-wrapper.sky-gfs-preset-outline .gform_button,
.sky-gf-form-wrapper.sky-gfs-preset-outline input[type="submit"],
.sky-gf-form-wrapper.sky-gfs-preset-outline button[type="submit"],
.sky-gf-form-wrapper.sky-gfs-preset-outline .gform_footer button {
    background-color: transparent !important;
    color: var(--sky-gfs-accent) !important;
    border: 2px solid var(--sky-gfs-accent) !important;
    border-radius: var(--sky-gfs-radius) !important;
    padding: 12px 36px !important;
    font-weight: 600 !important;
}

.sky-gf-form-wrapper.sky-gfs-preset-outline .gform_button:hover,
.sky-gf-form-wrapper.sky-gfs-preset-outline input[type="submit"]:hover,
.sky-gf-form-wrapper.sky-gfs-preset-outline button[type="submit"]:hover,
.sky-gf-form-wrapper.sky-gfs-preset-outline .gform_footer button:hover {
    background-color: var(--sky-gfs-accent) !important;
    color: var(--sky-gfs-accent-contrast) !important;
}

/* ==========================================================================
   Preset 4: Soft Card — elevated card, soft shadows, gentle radius
   ========================================================================== */

.sky-gf-form-wrapper.sky-gfs-preset-soft {
    --sky-gfs-bg: #ffffff;
    --sky-gfs-field-bg: #fafafa;
    --sky-gfs-field-border: #e5e7eb;
    --sky-gfs-radius: 10px;

    padding: 32px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(17, 24, 39, 0.08);
}

.sky-gf-form-wrapper.sky-gfs-preset-soft .gfield_label,
.sky-gf-form-wrapper.sky-gfs-preset-soft .gform-field-label {
    font-weight: 600;
    font-size: 14px;
}

.sky-gf-form-wrapper.sky-gfs-preset-soft input[type="text"],
.sky-gf-form-wrapper.sky-gfs-preset-soft input[type="email"],
.sky-gf-form-wrapper.sky-gfs-preset-soft input[type="tel"],
.sky-gf-form-wrapper.sky-gfs-preset-soft input[type="number"],
.sky-gf-form-wrapper.sky-gfs-preset-soft input[type="password"],
.sky-gf-form-wrapper.sky-gfs-preset-soft input[type="url"],
.sky-gf-form-wrapper.sky-gfs-preset-soft input[type="date"],
.sky-gf-form-wrapper.sky-gfs-preset-soft textarea,
.sky-gf-form-wrapper.sky-gfs-preset-soft select {
    border: 1px solid var(--sky-gfs-field-border) !important;
    border-radius: var(--sky-gfs-radius) !important;
    padding: 12px 14px !important;
    box-shadow: inset 0 1px 2px rgba(17, 24, 39, 0.04) !important;
}

.sky-gf-form-wrapper.sky-gfs-preset-soft input:focus,
.sky-gf-form-wrapper.sky-gfs-preset-soft textarea:focus,
.sky-gf-form-wrapper.sky-gfs-preset-soft select:focus {
    border-color: var(--sky-gfs-accent) !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--sky-gfs-accent) 12%, transparent) !important;
}

.sky-gf-form-wrapper.sky-gfs-preset-soft .gform_button,
.sky-gf-form-wrapper.sky-gfs-preset-soft input[type="submit"],
.sky-gf-form-wrapper.sky-gfs-preset-soft button[type="submit"],
.sky-gf-form-wrapper.sky-gfs-preset-soft .gform_footer button {
    background-color: var(--sky-gfs-accent) !important;
    color: var(--sky-gfs-accent-contrast) !important;
    border-radius: var(--sky-gfs-radius) !important;
    padding: 14px 36px !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--sky-gfs-accent) 35%, transparent);
}

.sky-gf-form-wrapper.sky-gfs-preset-soft .gform_button:hover,
.sky-gf-form-wrapper.sky-gfs-preset-soft input[type="submit"]:hover,
.sky-gf-form-wrapper.sky-gfs-preset-soft button[type="submit"]:hover,
.sky-gf-form-wrapper.sky-gfs-preset-soft .gform_footer button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--sky-gfs-accent) 45%, transparent);
}

/* ==========================================================================
   Preset 5: Dark Glass — dark translucent card, light text, accent glow
   ========================================================================== */

.sky-gf-form-wrapper.sky-gfs-preset-dark {
    --sky-gfs-accent: #6366f1;
    --sky-gfs-text: #f3f4f6;
    --sky-gfs-muted: #9ca3af;
    --sky-gfs-bg: rgba(17, 24, 39, 0.92);
    --sky-gfs-field-bg: rgba(255, 255, 255, 0.06);
    --sky-gfs-field-border: rgba(255, 255, 255, 0.15);
    --sky-gfs-radius: 10px;
    --sky-gfs-error: #f87171;
    --sky-gfs-success: #4ade80;

    padding: 32px;
    border-radius: 16px;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.sky-gf-form-wrapper.sky-gfs-preset-dark input[type="text"],
.sky-gf-form-wrapper.sky-gfs-preset-dark input[type="email"],
.sky-gf-form-wrapper.sky-gfs-preset-dark input[type="tel"],
.sky-gf-form-wrapper.sky-gfs-preset-dark input[type="number"],
.sky-gf-form-wrapper.sky-gfs-preset-dark input[type="password"],
.sky-gf-form-wrapper.sky-gfs-preset-dark input[type="url"],
.sky-gf-form-wrapper.sky-gfs-preset-dark input[type="date"],
.sky-gf-form-wrapper.sky-gfs-preset-dark textarea,
.sky-gf-form-wrapper.sky-gfs-preset-dark select {
    border: 1px solid var(--sky-gfs-field-border) !important;
    border-radius: var(--sky-gfs-radius) !important;
    padding: 12px 14px !important;
    box-shadow: none !important;
}

.sky-gf-form-wrapper.sky-gfs-preset-dark select option {
    color: #1f2937;
}

.sky-gf-form-wrapper.sky-gfs-preset-dark input:focus,
.sky-gf-form-wrapper.sky-gfs-preset-dark textarea:focus,
.sky-gf-form-wrapper.sky-gfs-preset-dark select:focus {
    border-color: var(--sky-gfs-accent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky-gfs-accent) 30%, transparent) !important;
}

.sky-gf-form-wrapper.sky-gfs-preset-dark .gform_button,
.sky-gf-form-wrapper.sky-gfs-preset-dark input[type="submit"],
.sky-gf-form-wrapper.sky-gfs-preset-dark button[type="submit"],
.sky-gf-form-wrapper.sky-gfs-preset-dark .gform_footer button {
    background-color: var(--sky-gfs-accent) !important;
    color: var(--sky-gfs-accent-contrast) !important;
    border-radius: var(--sky-gfs-radius) !important;
    padding: 14px 36px !important;
    font-weight: 600 !important;
}

.sky-gf-form-wrapper.sky-gfs-preset-dark .gform_button:hover,
.sky-gf-form-wrapper.sky-gfs-preset-dark input[type="submit"]:hover,
.sky-gf-form-wrapper.sky-gfs-preset-dark button[type="submit"]:hover,
.sky-gf-form-wrapper.sky-gfs-preset-dark .gform_footer button:hover {
    box-shadow: 0 0 24px color-mix(in srgb, var(--sky-gfs-accent) 60%, transparent);
}

.sky-gf-form-wrapper.sky-gfs-preset-dark .validation_error,
.sky-gf-form-wrapper.sky-gfs-preset-dark .gform_validation_errors {
    background-color: rgba(248, 113, 113, 0.1);
    border-color: var(--sky-gfs-error);
    color: var(--sky-gfs-error);
}

/* ==========================================================================
   Icon colour harmony — preset icons follow the muted tone
   ========================================================================== */

.sky-gf-form-wrapper[class*="sky-gfs-preset-"].sky-gf-icons-enabled .sky-gf-icon-wrap::before {
    background-color: var(--sky-gfs-muted) !important;
}