.offline-walkthrough-note{margin:14px 0;padding:14px 16px;border:1px solid color-mix(in srgb,var(--gold) 45%,var(--border));border-radius:12px;background:color-mix(in srgb,var(--gold) 8%,var(--card));font-size:13px;line-height:1.65}
.offline-preview{margin-top:18px}.offline-preview h3{margin:0 0 8px}.offline-preview-grid{display:grid;gap:16px;margin-top:18px}.offline-email{border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--card)}.offline-email-head{padding:16px 18px;background:var(--navy);color:white}.offline-email-head p{margin:5px 0 0;color:#dce7f1;font-size:12px}.offline-email-body{padding:18px}.offline-meta{display:grid;grid-template-columns:max-content 1fr;gap:7px 12px;font-size:13px;margin-bottom:16px}.offline-meta b{color:var(--muted)}.offline-table{width:100%;border-collapse:collapse;font-size:13px}.offline-table th,.offline-table td{padding:9px 10px;border:1px solid var(--border);text-align:start;vertical-align:top;white-space:pre-wrap}.offline-table th{width:34%;background:var(--secondary)}.offline-warning{padding:10px 12px;border-radius:9px;background:var(--secondary);font-size:12px;line-height:1.6}.offline-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}

/* Unified validation states */
[data-static-form] input:not([type="checkbox"]),[data-static-form] select,[data-static-form] textarea{font-family:"Cairo",Arial,sans-serif!important;font-size:16px!important;line-height:1.65;transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease}
[data-static-form] input[type="email"],[data-static-form] input[type="tel"],[data-static-form] input[type="date"],[data-static-form] input[type="time"]{direction:ltr;text-align:left}
[data-static-form] .field-required-pending{border-color:color-mix(in srgb,#b42318 30%,var(--border))!important;background:color-mix(in srgb,#b42318 1.5%,var(--bg))}
[data-static-form] .field-valid{border-color:color-mix(in srgb,#16803a 48%,var(--border))!important;background:color-mix(in srgb,#16803a 2%,var(--bg))}
[data-static-form] .field-invalid{border-color:#b42318!important;background:color-mix(in srgb,#b42318 3%,var(--bg))}
[data-static-form] .field-focused{box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 24%,transparent)!important}
[data-static-form] .field-error{font-family:"Cairo",Arial,sans-serif;font-size:13px;line-height:1.55;min-height:20px;margin-top:5px}
[data-static-form] .consent{padding:10px 12px;border:1px solid color-mix(in srgb,#b42318 22%,var(--border));border-radius:10px;background:color-mix(in srgb,#b42318 1.5%,var(--bg))}
[data-static-form] .consent.is-valid{border-color:color-mix(in srgb,#16803a 44%,var(--border));background:color-mix(in srgb,#16803a 2%,var(--bg))}
[data-static-form] .consent.has-error{border-color:#b42318;background:color-mix(in srgb,#b42318 3%,var(--bg))}

/* Offline CAPTCHA is the final field before actions */
.offline-captcha-field{margin-top:2px}.offline-captcha-title{display:block;font-size:13px;font-weight:700;margin-bottom:7px}.offline-captcha-layout{display:grid;grid-template-columns:auto 42px minmax(190px,1fr);gap:10px;align-items:end;padding:14px;border:1px solid color-mix(in srgb,#b42318 30%,var(--border));border-radius:10px;background:var(--bg)}.offline-captcha-layout canvas{display:block;max-width:100%;border:1px solid color-mix(in srgb,var(--navy) 22%,var(--border));border-radius:8px;background:#f2f5f8}.offline-captcha-refresh{width:42px;height:42px;border:1px solid var(--border);border-radius:9px;background:var(--secondary);color:var(--fg);font-size:23px;cursor:pointer}.offline-captcha-refresh:hover{border-color:var(--gold)}.offline-captcha-input{display:grid!important;gap:6px;font-size:12px;font-weight:700}.offline-captcha-input input{width:100%;min-height:42px;text-transform:uppercase;letter-spacing:.18em;font-family:"Cairo",Arial,sans-serif!important;font-size:17px!important;font-weight:700}.offline-captcha-field.is-valid .offline-captcha-layout{border-color:color-mix(in srgb,#16803a 48%,var(--border));background:color-mix(in srgb,#16803a 2%,var(--bg))}.offline-captcha-field.has-error .offline-captcha-layout{border-color:#b42318;background:color-mix(in srgb,#b42318 3%,var(--bg))}.offline-captcha-help{margin:6px 0 0;color:var(--muted);font-size:12px;line-height:1.55}

.form-action-buttons{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.form-actions .btn-secondary{border:1px solid var(--border);background:var(--secondary);color:var(--fg)}

/* ESSBC UI modal for internal navigation, privacy policy, and clear confirmation */
.essbc-form-modal[hidden]{display:none}.essbc-form-modal{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:20px}.essbc-form-modal-backdrop{position:absolute;inset:0;background:rgba(8,20,34,.66);backdrop-filter:blur(3px)}.essbc-form-modal-dialog{position:relative;width:min(520px,100%);max-height:88vh;display:flex;flex-direction:column;border:1px solid var(--border);border-radius:16px;background:var(--card);color:var(--fg);box-shadow:0 24px 80px rgba(0,0,0,.3);padding:26px}.essbc-form-modal.is-privacy .essbc-form-modal-dialog{width:min(820px,100%)}.essbc-form-modal-header{flex:0 0 auto}.essbc-form-modal-dialog h2{margin:0 34px 10px 0;font-family:var(--serif);font-size:24px}.essbc-form-modal-dialog p{margin:0;color:var(--muted);line-height:1.75}.essbc-form-modal-close{position:absolute;top:12px;right:14px;width:34px;height:34px;border:0;border-radius:50%;background:var(--secondary);color:var(--fg);font-size:24px;line-height:1;cursor:pointer}.essbc-form-modal-scroll{overflow-y:auto;margin:20px -5px 0 0;padding:0 10px 0 0}.essbc-form-modal-scroll section+section{margin-top:22px}.essbc-form-modal-scroll h3{margin:0 0 7px;font-size:16px}.essbc-form-modal-scroll p{font-size:14px}.essbc-form-modal-actions{flex:0 0 auto;display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:24px}.essbc-modal-open{overflow:hidden}
html[dir="rtl"] .essbc-form-modal-dialog h2{margin:0 0 10px 34px}html[dir="rtl"] .essbc-form-modal-close{right:auto;left:14px}html[dir="rtl"] .essbc-form-modal-scroll{margin:20px 0 0 -5px;padding:0 0 0 10px}

@media(min-width:900px){.offline-preview-grid{grid-template-columns:1.15fr .85fr}}
@media(max-width:720px){.offline-captcha-layout{grid-template-columns:1fr 42px}.offline-captcha-input{grid-column:1/-1}}
@media(max-width:640px){.form-actions{align-items:stretch;flex-direction:column}.form-action-buttons{width:100%}.form-action-buttons .btn{flex:1}.essbc-form-modal-actions{flex-direction:column-reverse}.essbc-form-modal-actions .btn{width:100%}}