/**
 * PrimeForms – Theme presets
 *
 * Each preset sets CSS custom properties on `.pf-form-wrap`.
 * Inline styles injected by Renderer.php override these for per-form custom values.
 *
 * Custom properties consumed by prime-forms.css:
 *   --pf-primary        Main accent / button background
 *   --pf-primary-hover  Hover shade of --pf-primary
 *   --pf-bg             Form / input background
 *   --pf-text           Body text colour
 *   --pf-border         Input border colour
 *   --pf-radius         Border-radius for inputs & buttons (px value)
 *   --pf-font           Font-family stack (empty = inherit)
 */

/* ── Default (WordPress blue) ────────────────────────────────────────────── */

.pf-form-wrap {
    --pf-primary:       #0073aa;
    --pf-primary-hover: #005a87;
    --pf-bg:            #ffffff;
    --pf-text:          #1a1a1a;
    --pf-border:        #cccccc;
    --pf-radius:        8px;
    --pf-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    --pf-font-size:     1rem;
}

/* ── Minimal (neutral mono) ──────────────────────────────────────────────── */

.pf-theme--minimal {
    --pf-primary:       #374151;
    --pf-primary-hover: #1f2937;
    --pf-bg:            #fafafa;
    --pf-text:          #111827;
    --pf-border:        #d1d5db;
    --pf-radius:        3px;
}

/* ── Bold (vivid purple) ─────────────────────────────────────────────────── */

.pf-theme--bold {
    --pf-primary:       #7c3aed;
    --pf-primary-hover: #5b21b6;
    --pf-bg:            #ffffff;
    --pf-text:          #111827;
    --pf-border:        #c4b5fd;
    --pf-radius:        6px;
}

/* ── Rounded (friendly teal) ─────────────────────────────────────────────── */

.pf-theme--rounded {
    --pf-primary:       #0d9488;
    --pf-primary-hover: #0f766e;
    --pf-bg:            #f0fdfa;
    --pf-text:          #134e4a;
    --pf-border:        #99f6e4;
    --pf-radius:        999px;
}

/* ── Dark ────────────────────────────────────────────────────────────────── */

.pf-theme--dark {
    --pf-primary:       #3b82f6;
    --pf-primary-hover: #2563eb;
    --pf-bg:            #1f2937;
    --pf-text:          #f9fafb;
    --pf-border:        #4b5563;
    --pf-radius:        5px;
}

/* Force dark bg on the card itself (the !important rule in prime-forms.css
   now respects var(--pf-bg), so these ensure the card background is dark too) */
.pf-theme--dark.pf-form-wrap,
.pf-form-wrap.pf-theme--dark {
    background: #1f2937 !important;
    border-color: #374151 !important;
    box-shadow: 0 1px 6px rgba(0,0,0,.4) !important;
}

/* ── Sunset (warm coral) ─────────────────────────────────────────────────── */

.pf-theme--sunset {
    --pf-primary:       #f97316;
    --pf-primary-hover: #ea580c;
    --pf-bg:            #fffbf7;
    --pf-text:          #431407;
    --pf-border:        #fed7aa;
    --pf-radius:        10px;
}

/* ── Forest (earthy green) ───────────────────────────────────────────────── */

.pf-theme--forest {
    --pf-primary:       #16a34a;
    --pf-primary-hover: #15803d;
    --pf-bg:            #f0fdf4;
    --pf-text:          #14532d;
    --pf-border:        #86efac;
    --pf-radius:        6px;
}

/* ── Ocean (navy + sky) ──────────────────────────────────────────────────── */

.pf-theme--ocean {
    --pf-primary:       #0ea5e9;
    --pf-primary-hover: #0284c7;
    --pf-bg:            #f0f9ff;
    --pf-text:          #0c4a6e;
    --pf-border:        #7dd3fc;
    --pf-radius:        8px;
}

/* ── Rose (blush pink) ───────────────────────────────────────────────────── */

.pf-theme--rose {
    --pf-primary:       #e11d48;
    --pf-primary-hover: #be123c;
    --pf-bg:            #fff1f2;
    --pf-text:          #4c0519;
    --pf-border:        #fda4af;
    --pf-radius:        12px;
}

/* ── Slate (cool corporate) ──────────────────────────────────────────────── */

.pf-theme--slate {
    --pf-primary:       #475569;
    --pf-primary-hover: #334155;
    --pf-bg:            #f8fafc;
    --pf-text:          #0f172a;
    --pf-border:        #cbd5e1;
    --pf-radius:        4px;
}

/* ── Midnight (indigo dark) ──────────────────────────────────────────────── */

.pf-theme--midnight {
    --pf-primary:       #818cf8;
    --pf-primary-hover: #a5b4fc;
    --pf-bg:            #1e1b4b;
    --pf-text:          #e0e7ff;
    --pf-border:        #4338ca;
    --pf-radius:        8px;
}

.pf-theme--midnight.pf-form-wrap,
.pf-form-wrap.pf-theme--midnight {
    background: #1e1b4b !important;
    border-color: #3730a3 !important;
    box-shadow: 0 0 0 1px #3730a3, 0 4px 24px rgba(67,56,202,.35) !important;
}

/* Ensure key text remains readable on dark presets. */
.pf-theme--dark .pf-label,
.pf-theme--dark .pf-field-help,
.pf-theme--dark .pf-step-dot,
.pf-theme--dark .pf-step-dot__label,
.pf-theme--midnight .pf-label,
.pf-theme--midnight .pf-field-help,
.pf-theme--midnight .pf-step-dot,
.pf-theme--midnight .pf-step-dot__label {
    color: var(--pf-text) !important;
}

.pf-theme--dark .pf-input,
.pf-theme--midnight .pf-input {
    color: var(--pf-text) !important;
}

/* ── Spotlight ───────────────────────────────────────────────────────────── */
/*
   Mirrors the "Spotlight" success card — blue radial glow, cool gradient,
   deep navy text. Animated entry glow on the card border.
*/

.pf-theme--spotlight {
    --pf-primary:       #2563eb;
    --pf-primary-hover: #1d4ed8;
    --pf-bg:            #ffffff;
    --pf-text:          #0f172a;
    --pf-border:        #bfdbfe;
    --pf-radius:        12px;
}

.pf-theme--spotlight.pf-form-wrap,
.pf-form-wrap.pf-theme--spotlight {
    background: #ffffff !important;
    border: 1px solid #bfdbfe !important;
    box-shadow:
        0 0 0 4px rgba(37,99,235,.07),
        0 20px 40px rgba(30,64,175,.12) !important;
    border-radius: 20px !important;
    animation: pf-spotlight-pulse 4s ease-in-out infinite;
}

@keyframes pf-spotlight-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(37,99,235,.07), 0 20px 40px rgba(30,64,175,.12); }
    50%       { box-shadow: 0 0 0 6px rgba(37,99,235,.14), 0 20px 48px rgba(30,64,175,.20); }
}

/* ── Glass Glow ──────────────────────────────────────────────────────────── */
/*
   Mirrors the "Glass" success card — frosted-glass morphism, translucent
   gradient, inset highlight. Works best over a colourful page background.
*/

.pf-theme--glass {
    --pf-primary:       #8b5cf6;
    --pf-primary-hover: #7c3aed;
    --pf-bg:            rgba(255,255,255,0.62);
    --pf-text:          #0f172a;
    --pf-border:        rgba(255,255,255,0.58);
    --pf-radius:        16px;
}

.pf-theme--glass.pf-form-wrap,
.pf-form-wrap.pf-theme--glass {
    background:
        linear-gradient( 135deg, rgba(255,255,255,0.62) 0%, rgba(237,255,248,0.74) 55%, rgba(219,234,254,0.65) 100% ) !important;
    backdrop-filter: blur(18px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%) !important;
    border: 1px solid rgba(255,255,255,0.58) !important;
    box-shadow: 0 18px 32px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.6) !important;
    border-radius: 20px !important;
}

/* ── Apply CSS vars to components ────────────────────────────────────────── */

.pf-form-wrap .pf-input {
    background-color: var(--pf-bg);
    color:            var(--pf-text);
    border-color:     var(--pf-border);
    border-radius:    var(--pf-radius);
    font-family:      var(--pf-font);
    font-size:        var(--pf-font-size);
}

.pf-form-wrap .pf-input:focus {
    border-color: var(--pf-primary);
    box-shadow:   0 0 0 3px color-mix(in srgb, var(--pf-primary) 20%, transparent);
}

.pf-form-wrap .pf-submit {
    background-color: var(--pf-primary);
    border-radius:    var(--pf-radius);
    font-family:      var(--pf-font);
    font-size:        var(--pf-font-size);
}

.pf-form-wrap .pf-submit:hover:not(:disabled) {
    background-color: var(--pf-primary-hover);
}

.pf-form-wrap .pf-label {
    color:       var(--pf-text);
    font-family: var(--pf-font);
    font-size:   var(--pf-font-size);
}

.pf-form-wrap .pf-progress-bar {
    background: var(--pf-primary);
}

.pf-form-wrap .pf-step-dot.active {
    background: var(--pf-primary);
}

.pf-form-wrap .pf-btn-next {
    background:    var(--pf-primary);
    border-radius: var(--pf-radius);
}

.pf-form-wrap .pf-btn-next:hover {
    background: var(--pf-primary-hover);
}

/* ── Form-entry animations ───────────────────────────────────────────────── */

@keyframes pf-entry-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pf-entry-slide-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pf-entry-pop {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes pf-entry-float {
    0%   { opacity: 0; transform: translateY(14px); }
    60%  { opacity: 1; transform: translateY(-5px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes pf-entry-blur {
    from { opacity: 0; filter: blur(8px); }
    to   { opacity: 1; filter: blur(0); }
}

.pf-entry--fade      { animation: pf-entry-fade     0.45s ease both; }
.pf-entry--slide-up  { animation: pf-entry-slide-up  0.45s ease both; }
.pf-entry--pop       { animation: pf-entry-pop       0.4s  cubic-bezier(.34,1.36,.64,1) both; }
.pf-entry--float     { animation: pf-entry-float     0.6s  ease both; }
.pf-entry--blur      { animation: pf-entry-blur      0.5s  ease both; }