:root{
    --bg:#f1f4fb;
    --modal-bg:#ffffff;
    --accent:#1f2937;
    --muted:#9aa3b2;
    --error:#ff4d4f;
    --input-bg:#f7f9fc;
    --border:#e6e9ef;
    --primary:#111827;
    --outline:#4f9cff;
}
/* Overlay + modal shell */
.overlay{
    position:fixed;
    inset:0;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(13,27,62,0.12);
    padding:20px;
    z-index:1000;
}
.modal{
    width:100%;
    max-width:530px;
    background:#f6f5fb; /* pale card background to match screenshot */
    border-radius:12px;
    box-shadow:0 12px 30px rgba(16,24,40,0.06);
    padding:34px;
    box-sizing:border-box;
    border:4px solid #cfe0ff;
    display:flex;
    flex-direction:column;
}
/* Header */
.modal h2{
    margin:0;
    font-size:24px;
    color:var(--accent);
    text-align:center;
    font-weight:700;
    padding-top:6px;
}
.modal .modal-subtitle{
    margin:8px 0 16px 0;
    font-size:13px;
    color:var(--muted);
    text-align:center;
}
/* Form layout */
.form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:24px 12px;
    margin-top: 32px;
}
.full{ grid-column:1 / -1; }
label{ font-size:12px; color:var(--muted); display:block; margin-bottom:6px; }
input[type="text"], input[type="tel"], input[type="url"], textarea{
    width:100%;
    padding:12px 14px;
    font-size:14px;
    border-radius:10px;
    border:1px solid #eef0f3;
    background:#ffffff;
    box-sizing:border-box;
    outline:none;
    transition:box-shadow .12s, border-color .12s, transform .06s;
    height:48px;
}
input::placeholder, textarea::placeholder{ color:#c7cbd1; }
textarea{ min-height:100px; height:auto; padding-top:12px; padding-bottom:12px; resize:vertical; }
.input-focus, input:focus, textarea:focus{
    border-color:var(--outline);
    box-shadow:0 8px 24px rgba(79,156,255,0.12);
    transform:translateY(-1px);
}
.error{
    border-color:var(--error) !important;
    box-shadow:0 6px 18px rgba(255,77,79,0.08);
    background:#fff5f6;
}
.error-text{ color:var(--error); font-size:12px; margin-top:6px; display:block; }
/* Consent / checkbox */
.consent{
    display:block;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--muted);
    margin:12px 0 48px 0;
    justify-content: center;
    
}
.consent input[type="checkbox"]{ width:16px; height:16px; }
.consent a{ color:#3b82f6; text-decoration:none; }
/* Inner wrapper for consent checkbox + label */
.consent-row{
    display:flex;
    align-items:center;
    gap:8px;
    justify-content:flex-start;
}
.consent-row label{ margin:0; display:inline-block; vertical-align:middle; }
.consent-row input[type="checkbox"]{ display:inline-block; vertical-align:middle; margin:0; }
/* Footer note */
.footer-note{ margin-top:8px; font-size:12px; color:var(--muted); text-align:center; }
/* Buttons */
.actions{ display:flex; align-items:center; justify-content:flex-start; gap:12px; margin-top:8px; }
.close-btn{ background:transparent; border:0; color:var(--muted); cursor:pointer; font-size:14px; padding:6px 8px; }
.submit-primary{
    margin-top:12px;
    width:100%;
    padding:14px 16px;
    height:48px;
    background:#111827;
    color:#fff;
    border-radius:8px;
    border:0;
    font-weight:700;
    font-size: 16px;
    cursor:pointer;
    box-shadow:0 6px 12px rgba(15,23,42,0.12);
}
.field-small{ font-size:13px; }
@media (max-width:480px){
    .modal{ padding:16px; max-width:420px; }
    .form-grid{ gap:10px; grid-template-columns:1fr; }
    input[type="text"], input[type="tel"], input[type="url"]{ height:46px; }
}


/* Success message shown inside modal after submit */
.success-message{
    display:none;
    background:#ecfdf5;
    color:#065f46;
    border:1px solid #a7f3d0;
    padding:10px 12px;
    border-radius:8px;
    text-align:center;
    font-weight:600;
    box-shadow:0 6px 18px rgba(6,95,70,0.06);
    opacity:0;
    transform:translateY(-6px);
    transition:opacity .28s ease, transform .28s ease;
    margin-bottom:12px;
}
.success-message.show{
    display:block;
    opacity:1;
    transform:translateY(0);
}

/* Position global success message above modal overlay */
.success-message{
    position:fixed;
    top:24px;
    left:50%;
    transform:translateX(-50%) translateY(-6px);
    width:min(640px,90%);
    z-index:12000;
}
.success-message.show{
    transform:translateX(-50%) translateY(0);
}

/* Disable browser red highlighting for invalid required controls inside modal;
   we use our own inline error text instead */
.overlay input:required:invalid,
.overlay textarea:required:invalid,
.overlay input:required:invalid:focus,
.overlay textarea:required:invalid:focus {
    box-shadow: none !important;
    outline: none !important;
    border-color: #eef0f3 !important;
}