/* ═══════════════════════════════════════════════════════
   Contact Form by Pro Media Mogul — Frontend Styles v2
   Clean, card-based design matching CRM Online aesthetic
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Card Container ── */
.pmm-form-wrapper {
    max-width: 480px;
    margin: 30px auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

.pmm-form-wrapper *,
.pmm-form-wrapper *::before,
.pmm-form-wrapper *::after {
    box-sizing: border-box;
}

.pmm-form-card {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.07), 0 0 1px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* ── Header Area ── */
.pmm-form-card .pmm-form-header {
    text-align: center;
    padding: 28px 28px 20px;
    background: linear-gradient(180deg, #f6f8ff 0%, #ffffff 100%);
    border-bottom: 1px solid #f0f2f8;
}

.pmm-form-card .pmm-form-header img {
    max-width: 90px;
    max-height: 44px;
    display: block;
    margin: 0 auto 10px;
}

.pmm-form-card .pmm-form-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 10px;
    box-shadow: 0 3px 10px rgba(91, 74, 158, 0.18);
}

.pmm-form-card .pmm-form-header h2 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e;
    letter-spacing: -0.3px;
    line-height: 1.2;
}

.pmm-form-card .pmm-form-header p {
    margin: 0;
    font-size: 13px;
    color: #94a3b8;
    font-weight: 400;
}

/* ── Form Body ── */
.pmm-form-card .pmm-form-body {
    padding: 22px 28px 6px;
}

/* ── Field Groups ── */
.pmm-form-card .pmm-field-group {
    margin-bottom: 16px;
}

.pmm-form-card .pmm-field-group > label {
    display: block;
    font-weight: 500;
    font-size: 13px;
    color: #475569;
    margin-bottom: 4px;
}

.pmm-form-card .pmm-required {
    color: #ef4444;
    font-weight: 600;
}

/* ── Inputs — clean underline style ── */
.pmm-form-card .pmm-field-group input[type="text"],
.pmm-form-card .pmm-field-group input[type="email"],
.pmm-form-card .pmm-field-group input[type="tel"],
.pmm-form-card .pmm-field-group input[type="url"],
.pmm-form-card .pmm-field-group input[type="number"],
.pmm-form-card .pmm-field-group select,
.pmm-form-card .pmm-field-group textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #1e293b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.15s ease;
    outline: none;
}

.pmm-form-card .pmm-field-group input::placeholder,
.pmm-form-card .pmm-field-group textarea::placeholder {
    color: #94a3b8;
    font-weight: 400;
}

.pmm-form-card .pmm-field-group input:focus,
.pmm-form-card .pmm-field-group select:focus,
.pmm-form-card .pmm-field-group textarea:focus {
    background: #fff;
    border-color: var(--pmm-accent, #5b4a9e);
    box-shadow: 0 0 0 3px rgba(91, 74, 158, 0.06);
}

.pmm-form-card .pmm-field-group input.pmm-field-invalid,
.pmm-form-card .pmm-field-group textarea.pmm-field-invalid,
.pmm-form-card .pmm-field-group select.pmm-field-invalid {
    border-color: #ef4444;
    background: #fef2f2;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.06);
}

.pmm-form-card .pmm-field-group textarea {
    resize: vertical;
    min-height: 90px;
    line-height: 1.5;
}

.pmm-form-card .pmm-field-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.pmm-form-card .pmm-field-error {
    font-size: 11px;
    color: #ef4444;
    margin-top: 3px;
    min-height: 0;
    font-weight: 500;
}

/* ── Two-column row (for side-by-side fields) ── */
.pmm-form-card .pmm-field-row {
    display: flex;
    gap: 10px;
}
.pmm-form-card .pmm-field-row .pmm-field-group {
    flex: 1;
}

/* ── Checkbox ── */
.pmm-form-card .pmm-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 400 !important;
    cursor: pointer;
    font-size: 12px;
    color: #64748b;
    line-height: 1.4;
}

.pmm-form-card .pmm-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    margin-top: 1px;
    accent-color: var(--pmm-accent, #5b4a9e);
    flex-shrink: 0;
}

/* ── Dropzone ── */
.pmm-form-card .pmm-dropzone {
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    padding: 18px 14px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    background: #f8fafc;
}

.pmm-form-card .pmm-dropzone:hover,
.pmm-form-card .pmm-dropzone.pmm-dragover {
    border-color: var(--pmm-accent, #5b4a9e);
    background: #f5f3ff;
}

.pmm-form-card .pmm-dropzone-icon {
    font-size: 22px;
    display: block;
    margin-bottom: 4px;
    opacity: 0.6;
}

.pmm-form-card .pmm-dropzone-message p {
    margin: 2px 0;
    font-size: 12px;
    color: #64748b;
}

.pmm-form-card .pmm-dropzone-message small {
    color: #94a3b8;
    font-size: 10px;
}

.pmm-form-card .pmm-dropzone-browse {
    color: var(--pmm-accent, #5b4a9e);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.pmm-form-card .pmm-file-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.pmm-form-card .pmm-file-list {
    margin-top: 6px;
}

.pmm-form-card .pmm-file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: #f1f5f9;
    border-radius: 6px;
    margin-bottom: 3px;
    font-size: 11px;
    border: 1px solid #e2e8f0;
}

.pmm-form-card .pmm-file-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #334155;
    font-weight: 500;
}

.pmm-form-card .pmm-file-item-size {
    color: #94a3b8;
    margin-left: 10px;
    font-size: 10px;
    flex-shrink: 0;
}

.pmm-form-card .pmm-file-hint {
    font-weight: 400;
    font-size: 10px;
    color: #94a3b8;
}

/* ── Submit Area ── */
.pmm-form-card .pmm-form-footer {
    padding: 2px 28px 24px;
}

.pmm-form-card .pmm-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.2px;
    box-shadow: 0 2px 10px rgba(91, 74, 158, 0.22);
}

.pmm-form-card .pmm-submit-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(91, 74, 158, 0.3);
    filter: brightness(1.05);
}

.pmm-form-card .pmm-submit-btn:active {
    transform: translateY(0);
}

.pmm-form-card .pmm-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ── Spinner ── */
.pmm-form-card .pmm-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: pmm-spin 0.6s linear infinite;
}

@keyframes pmm-spin {
    to { transform: rotate(360deg); }
}

/* ── Success Message ── */
.pmm-form-card .pmm-form-success {
    text-align: center;
    padding: 50px 28px;
}

.pmm-form-card .pmm-success-icon {
    width: 56px;
    height: 56px;
    line-height: 56px;
    font-size: 26px;
    color: #fff;
    background: linear-gradient(135deg, #22c55e, #4ade80);
    border-radius: 50%;
    display: inline-block;
    margin-bottom: 14px;
    animation: pmm-pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}

@keyframes pmm-pop {
    0% { transform: scale(0); opacity: 0; }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.pmm-form-card .pmm-form-success h3 {
    font-size: 17px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 4px;
}

.pmm-form-card .pmm-form-success p {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}

/* ── Error Message ── */
.pmm-form-card .pmm-form-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 8px 14px;
    color: #dc2626;
    font-size: 13px;
    margin: 0 28px 10px;
    font-weight: 500;
}

/* ── Branding ── */
.pmm-form-card .pmm-form-branding {
    text-align: center;
    padding: 10px;
    border-top: 1px solid #f1f5f9;
}

.pmm-form-card .pmm-form-branding small {
    font-size: 10px;
    color: #cbd5e1;
    letter-spacing: 0.3px;
}

.pmm-form-card .pmm-form-branding a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.2s;
}

.pmm-form-card .pmm-form-branding a:hover {
    color: var(--pmm-accent, #5b4a9e);
}

/* ── Responsive ── */
@media (max-width: 560px) {
    .pmm-form-wrapper {
        margin: 12px 10px;
        max-width: 100%;
    }
    .pmm-form-card .pmm-form-body,
    .pmm-form-card .pmm-form-footer {
        padding-left: 18px;
        padding-right: 18px;
    }
    .pmm-form-card .pmm-form-header {
        padding: 20px 18px 16px;
    }
    .pmm-form-card .pmm-field-row {
        flex-direction: column;
        gap: 0;
    }
}

/* ── POPIA consent ─────────────────────────────────────────────
   Deliberately understated: this sits between the last field and the
   submit button, and should read as fine print rather than compete
   with the form itself. */
.pmm-consent {
    padding: 14px 24px 4px;
}

.pmm-consent-row {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 12.5px;
    line-height: 1.5;
    color: #6b7280;
}

.pmm-consent-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    margin: 1px 0 0;
    accent-color: var(--pmm-accent, #5b4a9e);
    cursor: pointer;
}

.pmm-consent-text {
    flex: 1 1 auto;
}

.pmm-consent .pmm-terms-link {
    color: var(--pmm-accent, #5b4a9e);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.pmm-consent .pmm-terms-link:hover {
    text-decoration-thickness: 2px;
}

.pmm-consent .pmm-field-error {
    font-size: 12.5px;
    margin-top: 2px;
}

.pmm-consent input.pmm-field-invalid {
    outline: 2px solid #dc2626;
    outline-offset: 2px;
}

/* ── Terms modal ── */
.pmm-terms-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(17, 24, 39, 0.55);
}

.pmm-terms-modal[hidden] {
    display: none;
}

.pmm-terms-modal-inner {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: 80vh;
    overflow-y: auto;
    padding: 26px 28px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    font-size: 14px;
    line-height: 1.6;
    color: #374151;
}

.pmm-terms-modal-inner h3 {
    margin: 0 0 14px;
    font-size: 18px;
    color: #111827;
}

.pmm-terms-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    font-size: 24px;
    line-height: 1;
    color: #9ca3af;
    cursor: pointer;
}

.pmm-terms-close:hover {
    background: #f3f4f6;
    color: #374151;
}

@media (max-width: 560px) {
    .pmm-consent {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* ── Theme armour ───────────────────────────────────────────────
   This plugin is dropped onto 62 different client sites, each with its
   own theme and page builder, and it has to look the same on all of
   them. Host themes style bare `input`/`textarea`/`select` globally and
   frequently win on load order or specificity — HelpBot's Kadence build
   paints every field with its own #DADADA, which made the form look
   broken on a live contact page.

   So: raise specificity with `body`, and force only the handful of
   properties that decide whether the control is legible. Everything
   decorative is left to the rules above, where a theme is welcome to
   have an opinion. Keep this list short — it is armour, not styling. */
body .pmm-form-wrapper .pmm-form-card .pmm-field-group input[type="text"],
body .pmm-form-wrapper .pmm-form-card .pmm-field-group input[type="email"],
body .pmm-form-wrapper .pmm-form-card .pmm-field-group input[type="tel"],
body .pmm-form-wrapper .pmm-form-card .pmm-field-group input[type="url"],
body .pmm-form-wrapper .pmm-form-card .pmm-field-group input[type="number"],
body .pmm-form-wrapper .pmm-form-card .pmm-field-group input[type="date"],
body .pmm-form-wrapper .pmm-form-card .pmm-field-group input[type="time"],
body .pmm-form-wrapper .pmm-form-card .pmm-field-group input[type="datetime-local"],
body .pmm-form-wrapper .pmm-form-card .pmm-field-group select,
body .pmm-form-wrapper .pmm-form-card .pmm-field-group textarea {
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    color: #1e293b !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

body .pmm-form-wrapper .pmm-form-card .pmm-field-group textarea {
    min-height: 90px !important;
    line-height: 1.5 !important;
}

body .pmm-form-wrapper .pmm-form-card .pmm-field-group input:focus,
body .pmm-form-wrapper .pmm-form-card .pmm-field-group select:focus,
body .pmm-form-wrapper .pmm-form-card .pmm-field-group textarea:focus {
    background-color: #fff !important;
    border-color: var(--pmm-accent, #5b4a9e) !important;
}

body .pmm-form-wrapper .pmm-form-card .pmm-field-group input.pmm-field-invalid,
body .pmm-form-wrapper .pmm-form-card .pmm-field-group textarea.pmm-field-invalid,
body .pmm-form-wrapper .pmm-form-card .pmm-field-group select.pmm-field-invalid {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
}

/* Labels sit above their field, never inline beside it. */
body .pmm-form-wrapper .pmm-form-card .pmm-field-group > label {
    display: block !important;
    width: auto !important;
    float: none !important;
    margin: 0 0 6px !important;
}

/* The header icon is a fixed square, not a stretched banner. */
body .pmm-form-wrapper .pmm-form-card .pmm-form-icon {
    display: inline-flex !important;
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    padding: 0 !important;
}

/* The consent tick keeps its own size whatever the theme does to checkboxes. */
body .pmm-form-wrapper .pmm-consent-row input[type="checkbox"] {
    width: 15px !important;
    max-width: 15px !important;
    height: 15px !important;
    display: inline-block !important;
    margin: 1px 0 0 !important;
    padding: 0 !important;
    background: none !important;
    border-radius: 3px !important;
}

body .pmm-form-wrapper .pmm-submit-btn {
    width: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ── Appearance tokens ──────────────────────────────────────────
   Everything the Appearance screen controls. PMM_Style emits these as
   custom properties on .pmm-form-wrapper, scoped there rather than on
   :root so we never collide with a client theme's own --accent or
   --radius. Each var carries the same fallback the rules above use, so
   the form still looks right if PMM_Style never runs.

   This block sits last and repeats the theme-armour !important flags,
   because these have to beat the host theme for the same reason the
   armour does — a client site that paints every input its own colour
   would otherwise silently ignore the colours chosen in the admin. */
.pmm-form-wrapper {
    max-width: var(--pmm-max-width, 480px) !important;
    background: var(--pmm-page-bg, transparent);
    font-family: var(--pmm-font, inherit);
    /* The base rule sets `margin: 30px auto`, which is right for a form sitting
       alone on a page and wrong for one placed in a column beside other
       content — the 30px pushes it out of line with whatever it sits next to.
       Tokenised so a site can zero it without changing the default anywhere. */
    margin-top: var(--pmm-margin-y, 30px) !important;
    margin-bottom: var(--pmm-margin-y, 30px) !important;
}

.pmm-form-wrapper .pmm-form-card {
    background: var(--pmm-card-bg, #ffffff) !important;
    border-radius: var(--pmm-card-radius, 14px) !important;
}

.pmm-form-wrapper .pmm-form-header {
    background: var(--pmm-header-bg, #fafbfc) !important;
}

.pmm-form-wrapper .pmm-form-header h2 { color: var(--pmm-heading, #0f172a) !important; }
.pmm-form-wrapper .pmm-form-header p  { color: var(--pmm-muted, #64748b) !important; }
.pmm-form-wrapper .pmm-field-group > label { color: var(--pmm-label, #334155) !important; }
.pmm-form-wrapper .pmm-consent-row { color: var(--pmm-muted, #64748b) !important; }
.pmm-form-wrapper .pmm-required { color: var(--pmm-error, #ef4444) !important; }
.pmm-form-wrapper .pmm-field-error { color: var(--pmm-error, #ef4444) !important; }
.pmm-form-wrapper .pmm-form-success h3 { color: var(--pmm-heading, #0f172a) !important; }
.pmm-form-wrapper .pmm-form-success p { color: var(--pmm-muted, #64748b) !important; }

body .pmm-form-wrapper .pmm-form-card .pmm-field-group input[type="text"],
body .pmm-form-wrapper .pmm-form-card .pmm-field-group input[type="email"],
body .pmm-form-wrapper .pmm-form-card .pmm-field-group input[type="tel"],
body .pmm-form-wrapper .pmm-form-card .pmm-field-group input[type="url"],
body .pmm-form-wrapper .pmm-form-card .pmm-field-group input[type="number"],
body .pmm-form-wrapper .pmm-form-card .pmm-field-group input[type="date"],
body .pmm-form-wrapper .pmm-form-card .pmm-field-group input[type="time"],
body .pmm-form-wrapper .pmm-form-card .pmm-field-group input[type="datetime-local"],
body .pmm-form-wrapper .pmm-form-card .pmm-field-group select,
body .pmm-form-wrapper .pmm-form-card .pmm-field-group textarea {
    background-color: var(--pmm-field-bg, #f8fafc) !important;
    border-color: var(--pmm-field-border, #e2e8f0) !important;
    color: var(--pmm-field-text, #1e293b) !important;
    border-radius: var(--pmm-radius, 8px) !important;
}

body .pmm-form-wrapper .pmm-form-card .pmm-field-group input:focus,
body .pmm-form-wrapper .pmm-form-card .pmm-field-group select:focus,
body .pmm-form-wrapper .pmm-form-card .pmm-field-group textarea:focus {
    border-color: var(--pmm-accent, #5b4a9e) !important;
}

body .pmm-form-wrapper .pmm-submit-btn {
    background: var(--pmm-accent, #5b4a9e) !important;
    color: var(--pmm-accent-text, #ffffff) !important;
    border-radius: var(--pmm-radius, 8px) !important;
}

.pmm-form-wrapper .pmm-form-icon { background: var(--pmm-accent, #5b4a9e) !important; }
.pmm-form-wrapper .pmm-success-icon { background: var(--pmm-accent, #5b4a9e) !important; }
.pmm-form-wrapper .pmm-terms-link { color: var(--pmm-accent, #5b4a9e) !important; }
.pmm-form-wrapper .pmm-consent-row input[type="checkbox"] { accent-color: var(--pmm-accent, #5b4a9e); }

/* A card with no background should not cast a shadow or draw a border. */
.pmm-form-wrapper .pmm-form-card { transition: none; }

/* ── Section headings ───────────────────────────────────────────
   Forms that ask about two different people ("your details", then
   "your child's details") need a visible break between them, or the
   rebuilt form reads as one long undifferentiated column. */
body .pmm-form-wrapper .pmm-form-card .pmm-section-heading {
    margin: 22px 0 12px !important;
    padding: 0 0 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: var(--pmm-heading, #0f172a) !important;
    border-bottom: 1px solid var(--pmm-field-border, #e2e8f0) !important;
    text-align: left !important;
}
body .pmm-form-wrapper .pmm-form-card .pmm-field-group:first-child + .pmm-section-heading,
body .pmm-form-wrapper .pmm-form-card .pmm-section-heading:first-child {
    margin-top: 4px !important;
}
body .pmm-form-wrapper .pmm-form-card .pmm-section-text {
    margin: 0 0 14px !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    color: var(--pmm-muted, #64748b) !important;
}

/* Anchor target for migrated forms — invisible, exists only so same-page
   links that pointed at the old embed still land in the right place. */
.pmm-anchor{display:block;height:0;overflow:hidden;scroll-margin-top:90px}
.pmm-terms-suffix{white-space:nowrap}