/* Form Maker — front-end styles. Pure CSS, no external deps. */

.fm-form {
    /* CSS variables set inline by PHP from the form's settings */
    --fm-accent: #7c1f1f;
    --fm-bg: #ffffff;
    --fm-bg-image: none;
    --fm-bg-size: cover;
    --fm-bg-repeat: no-repeat;
    --fm-text: #2a1010;
    --fm-label: var(--fm-accent);
    --fm-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fm-font-size: 15px;
    --fm-radius: 12px;
    --fm-padding: 30px;
    --fm-max-width: 720px;
    --fm-gutter: 14px;

    max-width: var(--fm-max-width);
    width: 100%;
    margin: 30px auto;
    padding: var(--fm-padding);
    background-color: var(--fm-bg);
    background-image: var(--fm-bg-image);
    background-size: var(--fm-bg-size);
    background-repeat: var(--fm-bg-repeat);
    background-position: center;
    border-top: 4px solid var(--fm-accent);
    border-radius: var(--fm-radius);
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
    font-family: var(--fm-font);
    font-size: var(--fm-font-size);
    color: var(--fm-text);
    box-sizing: border-box;
}
.fm-form * { box-sizing: border-box; }

.fm-form .fm-title {
    color: var(--fm-accent);
    margin: 0 0 18px;
    font-size: calc(var(--fm-font-size) + 12px);
}

/* ─── Flex grid for multi-column field rows ─────────────────────────────── */
.fm-form form { display: flex; flex-wrap: wrap; gap: var(--fm-gutter); }
.fm-form .fm-field { margin: 6px 0; flex-grow: 1; }
.fm-form .fm-field.fm-w-100 { flex: 1 1 100%; }
.fm-form .fm-field.fm-w-75  { flex: 1 1 calc(75% - var(--fm-gutter)); max-width: calc(75% - var(--fm-gutter)); }
.fm-form .fm-field.fm-w-66  { flex: 1 1 calc(66.66% - var(--fm-gutter)); max-width: calc(66.66% - var(--fm-gutter)); }
.fm-form .fm-field.fm-w-50  { flex: 1 1 calc(50% - var(--fm-gutter)); max-width: calc(50% - var(--fm-gutter)); }
.fm-form .fm-field.fm-w-33  { flex: 1 1 calc(33.33% - var(--fm-gutter)); max-width: calc(33.33% - var(--fm-gutter)); }
.fm-form .fm-field.fm-w-25  { flex: 1 1 calc(25% - var(--fm-gutter)); max-width: calc(25% - var(--fm-gutter)); }
.fm-form .fm-title, .fm-form .fm-submit-row, .fm-form .fm-summary-err, .fm-form .fm-heading, .fm-form .fm-html-block, .fm-form .fm-divider { flex: 1 1 100%; }

.fm-form .fm-field > label {
    display: block; margin-bottom: 6px; font-weight: 600;
    color: var(--fm-label); font-size: calc(var(--fm-font-size) - 1px);
}
.fm-form .fm-req { color: #c00; }

.fm-form input[type=text], .fm-form input[type=email], .fm-form input[type=tel],
.fm-form input[type=url], .fm-form input[type=number], .fm-form input[type=password],
.fm-form input[type=date], .fm-form input[type=time], .fm-form input[type=datetime-local],
.fm-form input[type=file], .fm-form select, .fm-form textarea {
    width: 100%; padding: 11px 13px; border: 1px solid #d0c0c0; border-radius: 6px;
    font: inherit; background: rgba(255,255,255,0.95); color: var(--fm-text);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.fm-form input:focus, .fm-form select:focus, .fm-form textarea:focus {
    outline: none; border-color: var(--fm-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--fm-accent) 18%, transparent);
}
.fm-form textarea { min-height: 110px; resize: vertical; }

.fm-form .fm-options { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.fm-form .fm-opt { display: flex; align-items: center; gap: 6px; font-weight: 400; color: var(--fm-text); cursor: pointer; }
.fm-form .fm-opt input { width: auto; }
.fm-form .fm-opt.fm-single { margin-top: 10px; }

.fm-form .fm-help { color: #888; font-size: calc(var(--fm-font-size) - 3px); margin-top: 4px; }
.fm-form .fm-error { color: #c00; font-size: calc(var(--fm-font-size) - 2px); margin-top: 4px; }
.fm-form .fm-summary-err { background: #fbeaea; border-left: 4px solid #c00; padding: 12px 14px; border-radius: 6px; margin-bottom: 16px; color: #6a0000; }
.fm-form .fm-success { background: #e6f7e9; border-left: 4px solid #2a7a2a; padding: 16px 18px; border-radius: 6px; color: #1a4a1a; font-size: 16px; }

.fm-form .fm-heading { color: var(--fm-accent); margin: 18px 0 6px; padding-bottom: 6px; border-bottom: 2px solid var(--fm-accent); }
.fm-form .fm-html-block { margin: 14px 0; color: var(--fm-text); }
.fm-form .fm-divider { border: 0; border-top: 1px solid color-mix(in srgb, var(--fm-accent) 20%, #ddd); margin: 18px 0; width: 100%; }

.fm-form .fm-submit-row { margin-top: 14px; }
.fm-form .fm-submit {
    background: var(--fm-accent); color: #fff; border: 0;
    padding: 13px 32px; border-radius: 6px; font-weight: 700;
    font-size: calc(var(--fm-font-size) + 1px); cursor: pointer;
    transition: filter 0.15s, transform 0.15s;
}
.fm-form .fm-submit:hover { filter: brightness(0.9); transform: translateY(-1px); }
.fm-form .fm-warn { background: #fff8dc; border-left: 4px solid #d4af37; padding: 14px; border-radius: 6px; color: #5a4a14; }

@media (max-width: 700px) {
    /* Collapse multi-column layout on mobile */
    .fm-form .fm-field { flex: 1 1 100% !important; max-width: 100% !important; }
    .fm-form { padding: 20px; margin: 16px 8px; }
}

/* Paragraph text and T&C styling */
.fm-form .fm-paragraph { color: var(--fm-text); line-height: 1.55; margin: 8px 0; }
.fm-form .fm-html-block a, .fm-form .fm-paragraph a, .fm-form .fm-terms a { color: var(--fm-accent); text-decoration: underline; }
.fm-form .fm-terms { padding: 10px 12px; background: rgba(0,0,0,0.03); border-radius: 6px; }
.fm-form .fm-terms span { line-height: 1.45; }