/**
 * Page Designer — Form (Contact) Block — frontend + canvas styles
 * v1.0.0 (introduced in PAGE_DESIGNER_VERSION 3.7.238)
 *
 * A simple, reliable contact form: Name, Email, Regarding, Details,
 * a Send button, an inline status line, and a self-contained
 * "thank you" success popup shown on a successful submit.
 *
 * STRICT ISOLATION
 * ----------------
 *   - Every selector is namespaced `.pd-blk-form*` — no overlap with
 *     any other block, tool, or panel (this is the BLOCK namespace; the
 *     dedicated settings panel uses a separate `.pd-form-pnl-*`
 *     namespace).
 *   - All colour comes from Global Theme `--pd-*` tokens (NOT the
 *     editor-only `--at-color-*` tokens, which don't exist on the
 *     published page). Neutral surfaces/borders are derived from
 *     `currentColor` so they adapt to light/dark page themes without
 *     hardcoding a value. Mirrors the quote.css convention.
 *   - The panel NEVER writes border / radius / background / box-shadow /
 *     padding / fonts to this block — those are owned by the Design and
 *     Typography panels. What ships here is the block's baseline chrome.
 */

/* ── Root container (the <form> itself) ─────────────────────────── */
.pd-blk-form {
    position: relative;
    margin: 20px auto;
    max-width: var(--pd-blk-form-maxw, 560px);
    color: inherit;
    font-family: inherit;
    box-sizing: border-box;
}
.pd-blk-form * { box-sizing: border-box; }

/* ── Whole-form alignment within its column ─────────────────────────
   Driven by data-pd-form-align (Form Settings → Alignment section).
   Exact-value selectors (0,0,2,0) beat the base .pd-blk-form rule
   (0,0,1,0) — no !important. An empty/absent value matches none of
   these and falls back to the centred base rule above. Only the
   horizontal margins are overridden, so the 20px top/bottom stays. */
.pd-blk-form[data-pd-form-align="left"]   { margin-left: 0;    margin-right: auto; }
.pd-blk-form[data-pd-form-align="center"] { margin-left: auto; margin-right: auto; }
.pd-blk-form[data-pd-form-align="right"]  { margin-left: auto; margin-right: 0; }
.pd-blk-form[data-pd-form-align="full"]   { margin-left: 0;    margin-right: 0; max-width: none; width: 100%; }

/* ── Field row ──────────────────────────────────────────────────── */
.pd-blk-form-row {
    margin: 0 0 var(--pd-blk-form-gap, 16px);
}
.pd-blk-form-row:last-of-type { margin-bottom: 0; }

/* ── Label — the text is its own element (.pd-blk-form-label-tx) so it
   can be edited & styled individually via the Text Editor panel, exactly
   like a Rich Text block. Defaults come from Global Theme > General Text;
   per-label overrides live on the element itself (id-keyed style rule). */
.pd-blk-form-label {
    display: block;
    margin: 0 0 6px;
    line-height: 1.3;
}
.pd-blk-form-label-tx {
    font-family: var(--pd-general-font, inherit);
    font-size: var(--pd-general-size, 16px);
    font-weight: var(--pd-general-weight, 600);
    color: var(--pd-general-color, inherit);
}
/* Required asterisk — theme accent, driven by the label's data-req flag
   (toggled by the Form Settings panel). A pseudo-element so it never
   interferes with editing the label text. */
.pd-blk-form-label[data-req="1"] .pd-blk-form-label-tx::after {
    content: " *";
    color: var(--pd-link-color, currentColor);
    font-weight: 700;
}

/* ── Field wrapper (positions the leading icon) ─────────────────── */
.pd-blk-form-field { position: relative; display: block; }

.pd-blk-form-ic {
    position: absolute;
    left: 12px;
    top: 13px;
    font-size: 14px;
    line-height: 1;
    color: color-mix(in srgb, currentColor 45%, transparent);
    pointer-events: none;
}
/* textarea icon sits at the top, not vertically centred */
.pd-blk-form-field-area .pd-blk-form-ic { top: 14px; }

/* ── Controls (input / select / textarea) ───────────────────────── */
.pd-blk-form-input,
.pd-blk-form-select,
.pd-blk-form-textarea {
    width: 100%;
    display: block;
    padding: 11px 14px 11px 36px;
    font-family: inherit;
    font-size: var(--pd-general-size, 16px);
    line-height: 1.4;
    color: inherit;
    background: color-mix(in srgb, currentColor 4%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: var(--pd-blk-form-radius, 8px);
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    -webkit-appearance: none;
    appearance: none;
}
.pd-blk-form-textarea {
    min-height: 120px;
    padding-top: 11px;
    resize: vertical;
}
/* Native placeholder: on v2 forms it's a blank " " no-op that only drives
   :placeholder-shown (the visible hint is the .pd-blk-form-ph overlay below,
   so it can be edited & styled like a label). On legacy forms (pre-migration)
   it still carries real text — keep it dimmed for backward-compatibility. */
.pd-blk-form-input::placeholder,
.pd-blk-form-textarea::placeholder {
    color: color-mix(in srgb, currentColor 42%, transparent);
}

/* ── Placeholder overlay — a real, editable text element layered over the
   empty control. Auto-hides the instant the control holds a value (typed
   OR autofilled) via :placeholder-shown. Defaults to General Text; per-
   placeholder edits live on the element. Carries no name attribute, so it
   never submits, and never intercepts clicks on the live page. ───────── */
.pd-blk-form-ph {
    position: absolute;
    left: 36px;
    right: 14px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    pointer-events: none;
    font-family: var(--pd-general-font, inherit);
    font-size: var(--pd-general-size, 16px);
    line-height: 1.4;
    color: color-mix(in srgb, var(--pd-general-color, currentColor) 42%, transparent);
    overflow: hidden;
    white-space: nowrap;
    transition: opacity 0.12s ease;
}
.pd-blk-form-ph-area {
    top: 11px;
    bottom: auto;
    align-items: flex-start;
    white-space: normal;
}
.pd-blk-form-input:not(:placeholder-shown) ~ .pd-blk-form-ph,
.pd-blk-form-textarea:not(:placeholder-shown) ~ .pd-blk-form-ph {
    opacity: 0;
}
.pd-blk-form-input:focus,
.pd-blk-form-select:focus,
.pd-blk-form-textarea:focus {
    border-color: var(--pd-link-color, currentColor);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pd-link-color, currentColor) 22%, transparent);
    background: color-mix(in srgb, currentColor 2%, transparent);
}

/* Select — custom caret drawn from the theme accent, no image asset */
.pd-blk-form-select {
    cursor: pointer;
    padding-right: 38px;
    background-image:
        linear-gradient(45deg,  transparent 50%, var(--pd-link-color, currentColor) 50%),
        linear-gradient(135deg, var(--pd-link-color, currentColor) 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 2px),
        calc(100% - 13px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* ── Date field (native calendar picker) ────────────────────────────
   Keeps the shared input chrome + the left theme icon. No placeholder
   overlay — the native control shows its own mm/dd/yyyy hint. The browser's
   calendar indicator stays visible on the right and opens the picker. */
.pd-blk-form-date { cursor: pointer; }
.pd-blk-form-date::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.15s;
}
.pd-blk-form-date:hover::-webkit-calendar-picker-indicator { opacity: 0.85; }

/* ── Hidden field (Form Settings → Hide) ─────────────────────────────
   On the PUBLISHED page the whole row is removed. The canvas keeps it
   visible (dimmed + badged) so the author can still toggle it — see the
   canvas-only block at the foot of this file. */
.pd-blk-form-row[data-pd-form-hidden="1"] { display: none; }

/* ── Invalid state (client-side validation) ─────────────────────── *
 * Semantic accessible red, overridable via --pd-blk-form-invalid.
 * This is block CONTENT (not panel chrome); the fallback mirrors the
 * hex-fallback convention used by the shipped quote block. */
.pd-blk-form-row-invalid .pd-blk-form-input,
.pd-blk-form-row-invalid .pd-blk-form-select,
.pd-blk-form-row-invalid .pd-blk-form-textarea {
    border-color: var(--pd-blk-form-invalid, #e5484d);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pd-blk-form-invalid, #e5484d) 18%, transparent);
}
.pd-blk-form-err {
    display: none;
    margin: 5px 0 0;
    font-size: calc(var(--pd-general-size, 16px) * 0.8125);
    color: var(--pd-blk-form-invalid, #e5484d);
}
.pd-blk-form-row-invalid .pd-blk-form-err { display: block; }

/* ── Honeypot (off-screen; bots fill it, humans never see it) ───── */
.pd-blk-form-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px; height: 1px;
    overflow: hidden;
    opacity: 0;
}

/* ── Submit button (Global Theme > Buttons) ─────────────────────── */
.pd-blk-form-actions {
    margin-top: var(--pd-blk-form-gap, 16px);
    text-align: left;
}
/* Submit-button alignment — driven by the panel's data-pd-form-btn-align
   attribute on the form root (matches the "full" rule below). */
.pd-blk-form[data-pd-form-btn-align="center"] .pd-blk-form-actions { text-align: center; }
.pd-blk-form[data-pd-form-btn-align="right"]  .pd-blk-form-actions { text-align: right; }
.pd-blk-form[data-pd-form-btn-align="full"]   .pd-blk-form-actions { text-align: left; }
.pd-blk-form-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 26px;
    font-family: var(--pd-btn-font, inherit);
    font-size: var(--pd-btn-size, 15px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--pd-btn-color, #ffffff);
    background: var(--pd-btn-bg, var(--pd-link-color, currentColor));
    border: none;
    border-radius: var(--pd-btn-radius, 8px);
    cursor: pointer;
    text-transform: var(--pd-btn-transform, none);
    transition: background 0.15s, opacity 0.15s, transform 0.05s;
}
.pd-blk-form-btn:hover {
    background: var(--pd-btn-hover-bg, color-mix(in srgb, var(--pd-btn-bg, var(--pd-link-color, #2d6cdf)) 86%, #000));
    color: var(--pd-btn-hover-color, var(--pd-btn-color, #ffffff));
}
.pd-blk-form-btn:active { transform: translateY(1px); }
.pd-blk-form[data-pd-form-btn-align="full"] .pd-blk-form-btn { width: 100%; }

/* Sending state — disable + spinner */
.pd-blk-form-btn[disabled] { opacity: 0.65; cursor: default; }
.pd-blk-form-spin {
    display: none;
    width: 15px; height: 15px;
    border: 2px solid color-mix(in srgb, var(--pd-btn-color, #ffffff) 35%, transparent);
    border-top-color: var(--pd-btn-color, #ffffff);
    border-radius: 50%;
    animation: pd-blk-form-spin 0.6s linear infinite;
}
.pd-blk-form-sending .pd-blk-form-spin { display: inline-block; }
@keyframes pd-blk-form-spin { to { transform: rotate(360deg); } }

/* ── Inline status line (errors that aren't field-specific) ─────── */
.pd-blk-form-status {
    display: none;
    margin: 12px 0 0;
    font-size: calc(var(--pd-general-size, 16px) * 0.875);
    line-height: 1.4;
}
.pd-blk-form-status-show { display: block; }
.pd-blk-form-status-error { color: var(--pd-blk-form-invalid, #e5484d); }

/* ── Success popup (self-contained — NOT the Modal block) ───────── */
.pd-blk-form-success {
    /* Full-page overlay (was position:absolute, which only covered the form's
       own box). Fixed + full viewport so the frosted backdrop blurs the WHOLE
       page behind the card, like the Modal block's overlay. No border-radius:
       a full-page scrim has square corners. */
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: color-mix(in srgb, currentColor 9%, transparent);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity 0.28s ease;
    z-index: 9998;
}
.pd-blk-form-success-on { display: flex; }
.pd-blk-form-success-in { opacity: 1; }
.pd-blk-form-success-card {
    text-align: center;
    max-width: 340px;
    /* Solid themed surface so the popup reads as a real card instead of
       showing the form through it. This is a FRONT-END element, so it themes
       from the Global Theme (--pd-*), NOT the admin theme (--at-color-*).
       --pd-color-bg is the page-background token the Modal block's dialog also
       uses — it pairs automatically with --pd-general-color text (set below)
       so contrast holds on light AND dark page themes. White fallback covers
       any page that hasn't emitted the token yet. The soft shadow gives
       elevation over the frosted backdrop. */
    background: var(--pd-form-success-bg, var(--pd-color-bg, #ffffff));
    padding: 32px 28px;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
    transform: translateY(8px) scale(0.98);
    transition: transform 0.28s ease;
}
.pd-blk-form-success-in .pd-blk-form-success-card { transform: translateY(0) scale(1); }
.pd-blk-form-success-badge {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    color: var(--pd-btn-color, #ffffff);
    background: var(--pd-form-success-icon, var(--pd-link-color, currentColor));
    box-shadow: 0 6px 20px color-mix(in srgb, var(--pd-form-success-icon, var(--pd-link-color, #2d6cdf)) 35%, transparent);
}
.pd-blk-form-success-title {
    margin: 0 0 8px;
    font-family: var(--pd-label-font, inherit);
    font-size: calc(var(--pd-general-size, 16px) * 1.35);
    font-weight: 700;
    color: var(--pd-form-success-text, var(--pd-general-color, inherit));
}
.pd-blk-form-success-msg {
    margin: 0 0 18px;
    font-size: var(--pd-general-size, 16px);
    line-height: 1.5;
    color: color-mix(in srgb, var(--pd-form-success-text, var(--pd-general-color, currentColor)) 78%, transparent);
}
.pd-blk-form-success-close {
    padding: 9px 22px;
    font-family: inherit;
    font-size: calc(var(--pd-general-size, 16px) * 0.9);
    font-weight: 600;
    /* The Button colour picker sets --pd-form-success-btn here; the border and
       hover below read currentColor, so they follow this colour automatically. */
    color: var(--pd-form-success-btn, inherit);
    background: transparent;
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: var(--pd-btn-radius, 8px);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.pd-blk-form-success-close:hover {
    background: color-mix(in srgb, currentColor 8%, transparent);
    border-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .pd-blk-form-btn { width: 100%; }
    .pd-blk-form-actions { text-align: center; }
}

/* =====================================================================
   CANVAS-ONLY chrome — scoped to [data-gjs-type="pd-form"].
   GrapesJS strips data-gjs-* at save, so none of this reaches the
   published page. Makes the whole block select as ONE unit (the inner
   controls are placeholders inside the editor) and never actually
   submits while editing.
   ===================================================================== */
[data-gjs-type="pd-form"] .pd-blk-form-input,
[data-gjs-type="pd-form"] .pd-blk-form-select,
[data-gjs-type="pd-form"] .pd-blk-form-textarea,
[data-gjs-type="pd-form"] .pd-blk-form-btn,
[data-gjs-type="pd-form"] .pd-blk-form-success-close {
    pointer-events: none;   /* clicks fall through to the block root for selection */
}

/* …EXCEPT the label text and placeholder overlay, which stay clickable so
   they can be selected and opened in the Text Editor (¶ toolbar button). */
[data-gjs-type="pd-form"] .pd-blk-form-label-tx,
[data-gjs-type="pd-form"] .pd-blk-form-ph {
    pointer-events: auto;
    cursor: text;
}

/* Hidden field on the canvas — the author must still see it to un-hide it,
   so it's dimmed and tagged "Hidden" instead of removed. Higher specificity
   (0,0,3,0) than the published display:none rule (0,0,2,0), so it wins on the
   canvas only; data-gjs-type is stripped at save, so the page still hides it. */
[data-gjs-type="pd-form"] .pd-blk-form-row[data-pd-form-hidden="1"] {
    display: block;
    position: relative;
    opacity: 0.45;
}
[data-gjs-type="pd-form"] .pd-blk-form-row[data-pd-form-hidden="1"]::after {
    content: "Hidden";
    position: absolute;
    top: 0;
    right: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    background: color-mix(in srgb, currentColor 55%, transparent);
    padding: 2px 7px;
    border-radius: 4px;
    pointer-events: none;
}