/* Casa da Arvore — CDA Member Application Web Form Styles
 *
 * Centered card on full-bleed nature photo — botanical editorial
 * Fonts: Fraunces (headings) + DM Sans (body)
 * Brand palette:
 *   Primary green:  #1E392A
 *   Surface:        #F0EDE4
 *   Surface-alt:    #F7F5EE
 *   Warm off-white: #DBCBB4
 *   Accent:         #966755
 *   Brand foreground: #F9F8F2
 */

/* Google Fonts — match website */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ============================================================
   FORCE LIGHT MODE — override Frappe CSS variables + dark theme
   ============================================================ */

body[data-path="inscricao/new"],
body[data-path="inscricao/new"] [data-theme="dark"],
body[data-path="inscricao/new"] [data-theme="light"] {
    --bg-color: transparent !important;
    --fg-color: #ffffff !important;
    --text-color: #1E392A !important;
    --text-light: #555555 !important;
    --text-muted: #966755 !important;
    --heading-color: #1E392A !important;
    --control-bg: #ffffff !important;
    --control-bg-on-gray: #F7F5EE !important;
    --navbar-bg: #1E392A !important;
    --card-bg: #ffffff !important;
    --modal-bg: #ffffff !important;
    --border-color: #DBCBB4 !important;
    --dark-border-color: #c4ad91 !important;
    --gray-50: #F7F5EE !important;
    --gray-100: #F0EDE4 !important;
    --gray-200: #DBCBB4 !important;
    --gray-300: #c4ad91 !important;
    --gray-400: #a89070 !important;
    --gray-500: #8a7560 !important;
    --gray-600: #6b5c4d !important;
    --gray-700: #4d4339 !important;
    --gray-800: #1E392A !important;
    --gray-900: #15291E !important;
    --subtle-accent: #F7F5EE !important;
    --subtle-fg: #F0EDE4 !important;
    --disabled-text-color: #8a7560 !important;
    --disabled-control-bg: #F7F5EE !important;
    --highlight-color: #F7F5EE !important;
    --popover-bg: #ffffff !important;
    --toast-bg: #ffffff !important;
    --awesomebar-focus-bg: #ffffff !important;
    --fg-hover-color: #F0EDE4 !important;
    --sidebar-select-color: #F0EDE4 !important;
    --placeholder-color: #aaa !important;
    --btn-default-bg: #F0EDE4 !important;
    --btn-default-hover-bg: #e8e2d6 !important;
    --scrollbar-thumb-color: #c4ad91 !important;
    --scrollbar-track-color: #DBCBB4 !important;
    color-scheme: light !important;
}

/* Force light on all page elements */
body[data-path="inscricao/new"],
body[data-path="inscricao/new"] .page-container,
.web-form-container,
.web-form-container *,
[data-web-form="cda-member-application"],
[data-web-form="cda-member-application"] * {
    color-scheme: light !important;
}

/* ============================================================
   FULL-BLEED BACKGROUND — forest photo
   ============================================================ */

html body[data-path="inscricao/new"],
html body.frappe-web[data-path="inscricao/new"],
html body[data-path="inscricao/new"][data-theme] {
    background: #F0EDE4 url('https://acda.org.br/images/form-bg.jpg') no-repeat center center fixed !important;
    background-size: cover !important;
    color: #1E392A !important;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

/* Dark overlay for readability */
html body[data-path="inscricao/new"]::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(30, 57, 42, 0.35);
    z-index: 0;
    pointer-events: none;
}

/* All wrapper elements transparent so bg shows through */
body[data-path="inscricao/new"] .page-container,
body[data-path="inscricao/new"] .main-section,
body[data-path="inscricao/new"] .container,
body[data-path="inscricao/new"] .web-form-wrapper,
body[data-path="inscricao/new"] .form-layout,
#page-cda-member-application,
[data-web-form="cda-member-application"],
body[data-path="inscricao/new"] .page_content,
body[data-path="inscricao/new"] .row {
    background: transparent !important;
    position: relative;
    z-index: 1;
}

/* ============================================================
   CENTERED CARD LAYOUT
   ============================================================ */

/* The main form container becomes a centered card */
.web-form-container,
[data-web-form="cda-member-application"] {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    max-width: 640px;
    margin: 48px auto;
    background: #F7F5EE;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35), 0 4px 16px rgba(0, 0, 0, 0.15);
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .web-form-container,
    [data-web-form="cda-member-application"] {
        margin: 16px;
        border-radius: 16px;
    }
}

/* Form body — cream card interior */
.web-form-container .web-form-body,
form.web-form {
    background: #F7F5EE !important;
    border: none !important;
    padding: 32px 36px !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    .web-form-container .web-form-body,
    form.web-form {
        padding: 24px 20px !important;
    }
}

/* ============================================================
   HEADER — compact dark green bar at top of card
   ============================================================ */

.web-form-header {
    background: #1E392A !important;
    border-radius: 0 !important;
    padding: 32px 36px 28px !important;
    margin: 0 !important;
    position: relative;
    text-align: center;
}

/* Subtle radial glow */
.web-form-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 100%, rgba(150,103,85,0.2) 0%, transparent 60%);
    pointer-events: none;
}

/* Dot pattern overlay — matches site footer */
.web-form-header::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23F9F8F2' fill-opacity='0.08' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
    pointer-events: none;
}

.web-form-header *,
.web-form-header h1,
.web-form-header .ellipsis,
.web-form-head *,
.web-form-header .introduction *,
.web-form-header p {
    color: #F9F8F2 !important;
}

/* Title */
.web-form-head h1,
.web-form-header h1,
.web-form-head .ellipsis {
    font-family: 'Fraunces', serif !important;
    font-size: 2em !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* Center the title */
.web-form-head,
.web-form-head h1,
.web-form-header h1,
.web-form-head .ellipsis,
.web-form-head > div {
    text-align: center !important;
    justify-content: center !important;
    display: block !important;
    width: 100% !important;
}

/* Subtitle */
.web-form-header .introduction p {
    font-family: 'DM Sans', sans-serif !important;
    color: #DBCBB4 !important;
    font-size: 0.95em !important;
}

.web-form-header .introduction {
    margin-bottom: 0;
}

/* Hide actions/indicators in header */
.web-form-header .web-form-actions,
.web-form-header .indicator-pill {
    display: none !important;
}

/* ============================================================
   FORM SECTIONS — dividers, not separate cards
   ============================================================ */

.web-form-container .form-section {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(219, 203, 180, 0.45) !important;
    border-radius: 0 !important;
    padding: 28px 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

.web-form-container .form-section:last-of-type {
    border-bottom: none !important;
}

.web-form-container .form-section:hover {
    box-shadow: none !important;
}

/* Section headings */
.web-form-container .section-head,
.web-form-container .web-form-body h6,
.web-form-container .form-section .section-head {
    font-family: 'Fraunces', serif !important;
    color: #1E392A !important;
    font-size: 1.4em;
    font-weight: 600;
    border-bottom: none;
    padding-bottom: 4px;
    margin-top: 0;
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

/* ============================================================
   FORM FIELDS — rounded pill inputs
   ============================================================ */

/* Labels */
.web-form-container .frappe-control .control-label,
.web-form-container label {
    font-family: 'DM Sans', sans-serif !important;
    font-weight: 500;
    color: #1E392A !important;
    font-size: 0.8em;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
}

/* Input fields — rounded */
.web-form-container .frappe-control input[type="text"],
.web-form-container .frappe-control input[type="email"],
.web-form-container .frappe-control input[type="date"],
.web-form-container .frappe-control input[type="number"],
.web-form-container .frappe-control select,
.web-form-container .frappe-control textarea,
.web-form-container .form-control {
    border: 1px solid #000000 !important;
    border-radius: 100px;
    padding: 12px 20px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.95em;
    color: #1E392A !important;
    background: #ffffff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Textarea — keep slightly rounded, not pill */
.web-form-container .frappe-control textarea {
    border-radius: 16px;
    padding: 14px 20px;
    min-height: 80px;
}

/* Focus state */
.web-form-container .frappe-control input:focus,
.web-form-container .frappe-control select:focus,
.web-form-container .frappe-control textarea:focus,
.web-form-container .form-control:focus {
    border-color: #1E392A !important;
    box-shadow: 0 0 0 3px rgba(30, 57, 42, 0.1) !important;
    outline: none;
}

/* Placeholder */
.web-form-container .form-control::placeholder {
    color: #aaa !important;
}

/* Select dropdowns — pill shape with custom arrow */
.web-form-container .frappe-control select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%231E392A' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-color: #fff !important;
    padding-right: 40px;
}

/* Selected value in dropdowns */
.web-form-container .frappe-control select,
.web-form-container select.form-control,
.web-form-container select.input-with-feedback {
    color: #1E392A !important;
    font-weight: 500;
}

/* Placeholder state */
.web-form-container .frappe-control select.placeholder-active,
.web-form-container select.placeholder-active {
    color: #aaa !important;
    font-weight: 400;
}

/* Option items */
.web-form-container select option {
    color: #1E392A !important;
    background: #fff !important;
    font-weight: 400;
}

.web-form-container select option[value=""] {
    color: #aaa !important;
}

/* ============================================================
   UNIFORM INPUT HEIGHT
   ============================================================ */

.web-form-container .frappe-control input[type="text"],
.web-form-container .frappe-control input[type="email"],
.web-form-container .frappe-control input[type="date"],
.web-form-container .frappe-control input[type="number"],
.web-form-container .frappe-control textarea,
.web-form-container .form-control {
    height: auto !important;
    min-height: 46px !important;
    line-height: 1.5 !important;
    padding: 12px 20px !important;
    box-sizing: border-box !important;
}

/* ============================================================
   NUCLEAR SELECT FIX
   ============================================================ */

body[data-path="inscricao/new"] select,
body[data-path="inscricao/new"] select.form-control,
body[data-path="inscricao/new"] select.input-with-feedback,
body[data-path="inscricao/new"] .frappe-control select,
body[data-path="inscricao/new"] .frappe-control[data-fieldtype="Select"] select,
body[data-path="inscricao/new"] .frappe-control[data-fieldtype="Select"] .form-control,
.web-form-container select,
[data-web-form] select {
    color: #1E392A !important;
    -webkit-text-fill-color: #1E392A !important;
    opacity: 1 !important;
    font-weight: 500 !important;
    overflow: visible !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    height: auto !important;
    min-height: 46px !important;
    line-height: 1.5 !important;
    padding: 12px 40px 12px 20px !important;
    box-sizing: border-box !important;
    font-size: 0.95em !important;
    border-radius: 100px;
}

body[data-path="inscricao/new"] select.placeholder-active,
body[data-path="inscricao/new"] .frappe-control select.placeholder-active {
    color: #aaa !important;
    -webkit-text-fill-color: #aaa !important;
    font-weight: 400 !important;
}

body[data-path="inscricao/new"] .frappe-control[data-fieldtype="Select"],
body[data-path="inscricao/new"] .frappe-control[data-fieldtype="Select"] .control-input-wrapper,
body[data-path="inscricao/new"] .frappe-control[data-fieldtype="Select"] .control-input {
    overflow: visible !important;
}

/* ============================================================
   CHECKBOX & RADIO
   ============================================================ */

.web-form-container .frappe-control.check .label-area,
.web-form-container .checkbox label {
    font-family: 'DM Sans', sans-serif !important;
    color: #555 !important;
    font-size: 0.9em;
}

.web-form-container .frappe-control input[type="checkbox"] {
    accent-color: #1E392A;
    width: 18px;
    height: 18px;
}

/* ============================================================
   BUTTONS — dark green pill
   ============================================================ */

/* Submit / primary */
.web-form-container .btn-primary,
.web-form-container .btn-primary-dark,
.web-form-container button[type="submit"],
.web-form-container .web-form-actions .btn-primary {
    background-color: #1E392A !important;
    border-color: #1E392A !important;
    color: #F9F8F2 !important;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 1.05em;
    padding: 16px 48px;
    border-radius: 100px;
    text-transform: none;
    letter-spacing: 0.02em;
    transition: all 0.25s ease;
    min-width: 200px;
}

.web-form-container .btn-primary:hover,
.web-form-container button[type="submit"]:hover,
.web-form-container .web-form-actions .btn-primary:hover {
    background-color: #2a5240 !important;
    border-color: #2a5240 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(30, 57, 42, 0.3);
}

.web-form-container .btn-primary:active,
.web-form-container button[type="submit"]:active {
    transform: translateY(0);
}

/* Submit area — no card, just centered */
form.web-form > .web-form-actions {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 24px 0 8px !important;
    text-align: center;
}

/* Attach / secondary button */
.web-form-container .btn-default,
.web-form-container .btn-sm {
    background-color: #ffffff !important;
    border-color: rgba(219, 203, 180, 0.7) !important;
    color: #1E392A !important;
    border-radius: 100px;
    font-family: 'DM Sans', sans-serif;
}

.web-form-container .btn-default:hover,
.web-form-container .btn-sm:hover {
    background-color: #F0EDE4 !important;
    border-color: #DBCBB4 !important;
}

/* ============================================================
   HELP TEXT, ERRORS, REQUIRED
   ============================================================ */

.web-form-container .help-block,
.web-form-container .frappe-control .help,
.web-form-container .text-muted {
    color: #966755 !important;
    font-size: 0.82em;
    font-family: 'DM Sans', sans-serif;
}

.web-form-container .reqd .control-label::after,
.web-form-container .has-error .control-label {
    color: #c0392b !important;
}

.web-form-container .has-error .form-control {
    border-color: #c0392b !important;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.1) !important;
}

/* ============================================================
   FILE UPLOAD
   ============================================================ */

.web-form-container .attached-file,
.web-form-container .file-upload-area {
    border: 2px dashed rgba(219, 203, 180, 0.6);
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    background: #ffffff !important;
    transition: border-color 0.2s;
}

.web-form-container .file-upload-area:hover {
    border-color: #966755;
}

/* Upload dialog — scoped to form page */
body[data-path="inscricao/new"] .file-uploader .config-area { display: none !important; }
body[data-path="inscricao/new"] .file-uploader .btn-crop { display: none !important; }
body[data-path="inscricao/new"] .modal-dialog .modal-footer .btn-secondary-dark,
body[data-path="inscricao/new"] .modal-dialog .modal-footer .btn-modal-secondary,
body[data-path="inscricao/new"] .modal-dialog .modal-footer .btn-secondary { display: none !important; }

body[data-path="inscricao/new"] .modal-content {
    background: #F7F5EE !important;
    color: #1E392A !important;
    border-radius: 16px !important;
}

body[data-path="inscricao/new"] .modal-header,
body[data-path="inscricao/new"] .modal-footer {
    background: #F7F5EE !important;
    border-color: rgba(219, 203, 180, 0.4) !important;
}

body[data-path="inscricao/new"] .modal-title {
    color: #1E392A !important;
    font-family: 'Fraunces', serif !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

.web-form-container .web-footer {
    font-family: 'DM Sans', sans-serif;
    color: #966755 !important;
    font-size: 0.8em;
    text-align: center;
    margin-top: 16px;
    padding-bottom: 8px;
}

/* ============================================================
   FRAPPE UI OVERRIDES
   ============================================================ */

.web-form-container .frappe-control,
.web-form-container .form-group {
    background: transparent !important;
    color: #1E392A !important;
}

.web-form-container .like-disabled-input,
.web-form-container .control-value {
    color: #1E392A !important;
    background: #F7F5EE !important;
    border-radius: 100px;
}

/* Page title */
.web-form-container h1,
.web-form-container .page-header h1 {
    color: #F9F8F2 !important;
    font-family: 'Fraunces', serif !important;
}

/* Links */
.web-form-container a {
    color: #966755 !important;
    transition: color 0.2s ease;
}
.web-form-container a:hover {
    color: #1E392A !important;
}

/* ============================================================
   HIDE NAVBAR / FOOTER
   ============================================================ */

body[data-path="inscricao/new"] .navbar,
body[data-path="inscricao/new"] .web-footer,
body[data-path="inscricao/new"] footer {
    display: none !important;
}

body.frappe-web[data-path="inscricao/new"] {
    padding-top: 0 !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
    .web-form-header {
        padding: 28px 20px 24px !important;
    }

    .web-form-head h1,
    .web-form-header h1,
    .web-form-head .ellipsis {
        font-size: 1.6em !important;
    }

    .web-form-container .form-section {
        padding: 20px 0 !important;
    }

    .web-form-container .btn-primary,
    .web-form-container button[type="submit"] {
        width: 100%;
        padding: 16px;
    }

    .web-form-container .frappe-control input[type="text"],
    .web-form-container .frappe-control input[type="email"],
    .web-form-container .frappe-control input[type="date"],
    .web-form-container .frappe-control input[type="number"],
    .web-form-container .frappe-control select,
    .web-form-container .form-control {
        font-size: 16px; /* Prevent iOS zoom */
    }
}

/* Fix iOS background-attachment: fixed */
@supports (-webkit-touch-callout: none) {
    html body[data-path="inscricao/new"],
    html body.frappe-web[data-path="inscricao/new"],
    html body[data-path="inscricao/new"][data-theme] {
        background-attachment: scroll !important;
    }
}

/* ============================================================
   NUCLEAR OVERRIDE — beats client_script injected <style> tag
   Loaded AFTER the inline style tag, so last-wins in cascade
   ============================================================ */

html body.frappe-web[data-path="inscricao/new"],
html body[data-path="inscricao/new"],
body[data-path="inscricao/new"] {
    background-image: url('https://acda.org.br/images/form-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-attachment: fixed !important;
    background-color: #1E392A !important;
}

html .web-form-container {
    max-width: 640px !important;
    margin: 48px auto !important;
    background: #F7F5EE !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 24px 80px rgba(0,0,0,0.35) !important;
}

html body .web-form-container form.web-form .web-form-body .form-section,
html body .web-form-container form .web-form-wrapper .form-layout .form-section.visible-section {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-bottom: 1px solid rgba(219,203,180,0.4) !important;
    border-radius: 0 !important;
    padding: 28px 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

html body .web-form-container form.web-form .web-form-body .form-section:last-of-type {
    border-bottom: none !important;
}

html body .web-form-container form.web-form > .web-form-actions,
html body .page_content .web-form-container form > .web-form-actions {
    background: transparent !important;
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 24px 0 8px !important;
    box-shadow: none !important;
    text-align: center;
}

html .web-form-container .web-form-body,
html body form.web-form {
    background: #F7F5EE !important;
    padding: 32px 36px !important;
    border: none !important;
    box-shadow: none !important;
}

html .web-form-header,
html body .web-form-header {
    background: #1E392A !important;
    border-radius: 0 !important;
    padding: 32px 36px 28px !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 36px !important;
    padding-right: 36px !important;
}

html .web-form-head h1.ellipsis,
html .web-form-head .ellipsis {
    white-space: normal !important;
    text-overflow: unset !important;
    overflow: visible !important;
}

/* ============================================================
   PATH A — CARD LAYOUT (added 2026-04-25)
   - Each .form-section becomes a discrete white card
   - Two-column grid for paired short fields on >=640px
   - Bigger primary CTA, low-emphasis secondary
   - Sticky progress hint above the form
   ============================================================ */

/* Outer container: slightly warmer cream so the inner cards pop */
html .web-form-container {
    background: #ECE7DA !important;
}

html .web-form-container .web-form-body {
    padding: 14px 18px 4px 18px !important;
}

/* CARDS — each section becomes a white surface with shadow */
html body .web-form-container form.web-form .web-form-body .form-section,
html body .web-form-container form .web-form-wrapper .form-layout .form-section.visible-section {
    background: #ffffff !important;
    border: none !important;
    border-bottom: none !important;
    border-radius: 18px !important;
    padding: 28px 28px !important;
    margin: 14px 0 !important;
    box-shadow: 0 2px 10px rgba(30, 57, 42, 0.06) !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

html body .web-form-container form.web-form .web-form-body .form-section:last-of-type {
    border-bottom: none !important;
}

/* Hidden sections collapse fully */
html body .web-form-container form.web-form .web-form-body .form-section.hide-control {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Card focus state — when any input inside is focused, lift the card */
html body .web-form-container .form-section:focus-within {
    box-shadow: 0 8px 28px rgba(30, 57, 42, 0.12) !important;
    transform: translateY(-1px);
}

/* Section heads — bigger, with a subtle accent rule under */
html body .web-form-container .section-head,
html body .web-form-container .form-section .section-head {
    font-family: 'Fraunces', serif !important;
    color: #1E392A !important;
    font-size: 1.45em !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    margin: 0 0 18px 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(150, 103, 85, 0.18) !important;
}

/* TWO-COLUMN GRID — paired short fields side-by-side on tablet+
 * NOTE: Frappe nests fields inside a <form> element under .form-column, so
 * the grid container has to be that inner <form>, not .form-column itself.
 */
@media (min-width: 640px) {
    .web-form-container .form-section .form-column {
        display: block !important;
    }
    .web-form-container .form-section .form-column > form {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 24px;
    }
    .web-form-container .form-section .form-column > form > * {
        grid-column: span 2; /* default: full width */
    }
    /* Half-width pairs: short identifying fields. Selectors match the same
     * descendant path as the default rule above so specificity is equal —
     * later-wins. !important added as a safety net against Frappe overrides. */
    .web-form-container .form-section .form-column > form > .frappe-control[data-fieldname="first_name"],
    .web-form-container .form-section .form-column > form > .frappe-control[data-fieldname="last_name"],
    .web-form-container .form-section .form-column > form > .frappe-control[data-fieldname="gender"],
    .web-form-container .form-section .form-column > form > .frappe-control[data-fieldname="date_of_birth"],
    .web-form-container .form-section .form-column > form > .frappe-control[data-fieldname="cpf"],
    .web-form-container .form-section .form-column > form > .frappe-control[data-fieldname="email"],
    .web-form-container .form-section .form-column > form > .frappe-control[data-fieldname="whatsapp"],
    .web-form-container .form-section .form-column > form > .frappe-control[data-fieldname="cep"],
    .web-form-container .form-section .form-column > form > .frappe-control[data-fieldname="state"],
    .web-form-container .form-section .form-column > form > .frappe-control[data-fieldname="city"],
    .web-form-container .form-section .form-column > form > .frappe-control[data-fieldname="prescribing_doctor_name"],
    .web-form-container .form-section .form-column > form > .frappe-control[data-fieldname="prescribing_doctor_crm"],
    .web-form-container .form-section .form-column > form > .frappe-control[data-fieldname="cid_code"],
    .web-form-container .form-section .form-column > form > .frappe-control[data-fieldname="other_association"],
    .web-form-container .form-section .form-column > form > .frappe-control[data-fieldname="other_association_name"],
    .web-form-container .form-section .form-column > form > .frappe-control[data-fieldname="referral_source"],
    .web-form-container .form-section .form-column > form > .frappe-control[data-fieldname="guardian_full_name"],
    .web-form-container .form-section .form-column > form > .frappe-control[data-fieldname="guardian_cpf"],
    .web-form-container .form-section .form-column > form > .frappe-control[data-fieldname="guardian_relationship"] {
        grid-column: span 1 !important;
    }
}

/* Tighten field top margins inside cards */
.web-form-container .form-section .frappe-control {
    margin-top: 14px;
}
.web-form-container .form-section .form-column > .frappe-control:first-child,
.web-form-container .form-section .form-column > .frappe-control:nth-child(2) {
    margin-top: 0;
}
.web-form-container .form-section .section-head + * .frappe-control {
    margin-top: 0;
}

/* PRIMARY CTA — full-width, prominent. Stack the secondary "Discard" below as a quiet text link.
 * Frappe wraps the actions in .web-form-footer > .web-form-actions > .left-area + .right-area.
 * We turn the .web-form-footer (or actions, whichever Frappe ships) into the card,
 * stack left/right areas vertically with the primary button on top, and force the
 * button to fill its container.
 */
html body form.web-form > .web-form-footer,
html body form.web-form > .web-form-actions {
    background: #ffffff !important;
    border-radius: 18px !important;
    box-shadow: 0 2px 10px rgba(30, 57, 42, 0.06) !important;
    padding: 24px 28px !important;
    margin: 14px 0 24px 0 !important;
}

html body .web-form-container .web-form-actions {
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 8px !important;
    align-items: stretch !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

html body .web-form-container .web-form-actions .left-area,
html body .web-form-container .web-form-actions .right-area {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    gap: 8px !important;
    margin: 0 !important;
}

html body .web-form-container .web-form-actions .btn-primary,
html body .web-form-container .web-form-actions .btn-primary-dark,
html body .web-form-container .web-form-actions button[type="submit"],
html body .web-form-container .web-form-actions .submit-btn {
    width: 100% !important;
    margin: 0 !important;
    padding: 18px 32px !important;
    font-size: 1.08em !important;
    min-width: 0 !important;
    box-shadow: 0 4px 14px rgba(30, 57, 42, 0.18) !important;
}

html body .web-form-container .web-form-actions .btn-default,
html body .web-form-container .web-form-actions .btn-sm.btn-default {
    background: transparent !important;
    border: none !important;
    color: rgba(30, 57, 42, 0.5) !important;
    text-decoration: underline;
    font-size: 0.85em !important;
    padding: 6px 12px !important;
    align-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

html body .web-form-container .web-form-actions .btn-default:hover {
    color: #1E392A !important;
    background: transparent !important;
}

/* PROGRESS HINT — small caption inside form-body, above first card */
.web-form-container .web-form-body::before {
    content: 'Cadastro Casa da Árvore · leva ~2 minutos';
    display: block;
    text-align: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.72em;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(30, 57, 42, 0.5);
    margin: 16px 0 4px 0;
    padding-top: 8px;
}

/* Mobile — collapse two-column grid back to single column */
@media (max-width: 639px) {
    html body .web-form-container form.web-form .web-form-body .form-section,
    html body .web-form-container form .web-form-wrapper .form-layout .form-section.visible-section {
        padding: 22px 20px !important;
        margin: 10px 0 !important;
        border-radius: 14px !important;
    }
    html body form.web-form > .web-form-actions {
        padding: 20px 18px !important;
        border-radius: 14px !important;
    }
    html body .web-form-container .section-head {
        font-size: 1.3em !important;
    }
}
/* ============================================================
   END PATH A
   ============================================================ */

/* ============================================================
   CONSENT GATE — disable submit until all three consents ticked
   The client_script toggles `data-consents-ok="0"|"1"` on the form,
   and toggles `disabled` on the submit button. CSS gives it the
   visual disabled state.
   ============================================================ */

html body .web-form-container .web-form-actions button[type="submit"][disabled],
html body .web-form-container .web-form-actions .btn-primary[disabled],
html body .web-form-container .web-form-actions .submit-btn[disabled] {
    background-color: #b8b3a8 !important;
    border-color: #b8b3a8 !important;
    color: #f9f8f2 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    opacity: 0.75 !important;
    transform: none !important;
}

html body .web-form-container .web-form-actions button[type="submit"][disabled]:hover,
html body .web-form-container .web-form-actions .btn-primary[disabled]:hover,
html body .web-form-container .web-form-actions .submit-btn[disabled]:hover {
    background-color: #b8b3a8 !important;
    border-color: #b8b3a8 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Tooltip-ish hint above the disabled button so users know why */
html body form.web-form > .web-form-footer[data-consents-ok="0"]::before {
    content: 'Marque os 3 consentimentos para enviar';
    display: block;
    text-align: center;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.78em;
    color: rgba(150, 103, 85, 0.85);
    margin: 0 0 12px 0;
    padding: 8px 12px;
    background: rgba(150, 103, 85, 0.07);
    border-radius: 8px;
    letter-spacing: 0.02em;
}