/* Marriage Biodata Maker (/marriage-biodata-maker). Built on the site's existing dark-mode.css
   CSS variables (--bg-card, --text-primary, etc.), so this file needs no separate dark-mode
   block. Two class families live here:
   1. "mbm-" app-chrome classes: the wizard, gallery, form steps, preview panel, export bar.
   2. "mbm-layout-N" classes: the 18 structurally distinct document skeletons that the 100
      template configs pick from (see marriage-biodata-templates.js). Skeletons differ in real
      layout (grid areas, sidebar vs stacked, card vs timeline vs table), not just color -- color/
      font/border-motif/photo-shape are then layered on top via inline CSS variables per template. */

.mbm-wrap { max-width: 1320px; margin: 0 auto; padding: 0 16px; }

/* The site's fixed top header sits over page content with nothing pushing it down, so this page
   needs top clearance here. Two different fixed headers can render depending on the request's
   detected device (server-side, not a CSS breakpoint): .appHeader on mobile (56px) or
   #header.jrh-header-v2 on desktop (height:80px, from style.css, in its unscrolled state). 100px
   clears the taller of the two (80px + 20px breathing room) with margin to spare on mobile too. */
.mbm-heading { text-align: center; margin-bottom: 20px; padding-top: 100px; }
.mbm-heading h1 { font-size: 30px; font-weight: 800; color: var(--text-primary, #1e293b); margin: 6px 0 10px; }
.mbm-heading p { font-size: 15px; color: var(--text-secondary, #64748b); max-width: 62ch; margin: 0 auto 14px; }
.mbm-breadcrumb { font-size: 12.5px; color: var(--text-secondary, #64748b); }
.mbm-breadcrumb a { color: var(--primary-color, #2563eb); text-decoration: none; }
.mbm-breadcrumb a:hover { text-decoration: underline; }
.mbm-breadcrumb .sep { margin: 0 6px; }

/* ---- Language switcher ---- */
.mbm-lang-switch { display: inline-flex; border: 1px solid var(--border-color, #e2e8f0); border-radius: 999px; padding: 3px; background: var(--bg-card, #fff); margin: 6px auto 16px; }
.mbm-lang-btn { border: none; background: transparent; padding: 7px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 700; cursor: pointer; color: var(--text-secondary, #64748b); }
.mbm-lang-btn.is-active { background: linear-gradient(135deg, #be123c, #9d174d); color: #fff; }

/* ---- Privacy banner ---- */
.mbm-privacy-banner { display: flex; align-items: flex-start; gap: 10px; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.3); color: var(--text-primary, #1e293b); border-radius: 12px; padding: 12px 16px; font-size: 13px; margin: 0 0 20px; }
.mbm-privacy-banner i { color: #22c55e; margin-top: 2px; }
.mbm-demo-badge { display: inline-block; background: #f59e0b; color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 9px; border-radius: 999px; text-transform: uppercase; margin-left: 8px; vertical-align: middle; }

/* ---- Wizard progress (Role -> Language -> Template -> Form -> Export) ---- */
.mbm-wizard-nav { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.mbm-wizard-crumb { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-secondary, #64748b); padding: 6px 12px; border-radius: 999px; background: var(--bg-subtle, #f1f5f9); }
.mbm-wizard-crumb.is-active { background: linear-gradient(135deg, #be123c, #9d174d); color: #fff; }
.mbm-wizard-crumb.is-done { background: rgba(34,197,94,0.14); color: #16a34a; cursor: pointer; }

/* ---- Role selection (Bride / Groom) ---- */
.mbm-role-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 560px; margin: 30px auto; }
.mbm-role-card { background: var(--bg-card, #fff); border: 2px solid var(--border-color, #e2e8f0); border-radius: 18px; padding: 32px 20px; text-align: center; cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.mbm-role-card:hover { transform: translateY(-3px); border-color: #be123c; }
.mbm-role-card.is-selected { border-color: #be123c; background: rgba(190,18,60,0.06); }
.mbm-role-card .mbm-role-emoji { font-size: 46px; display: block; margin-bottom: 10px; }
.mbm-role-card h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text-primary, #1e293b); }

/* ---- Gallery toolbar ---- */
.mbm-gallery-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.mbm-search-box { position: relative; flex: 1; min-width: 200px; }
.mbm-search-box input { width: 100%; padding: 10px 14px 10px 36px; border-radius: 10px; border: 1px solid var(--border-color, #e2e8f0); background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); font-size: 13.5px; }
.mbm-search-box i { position: absolute; left: 13px; top: 11px; color: var(--text-secondary, #64748b); }
.mbm-filter-select { padding: 9px 12px; border-radius: 10px; border: 1px solid var(--border-color, #e2e8f0); background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); font-size: 13px; }
.mbm-chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.mbm-chip { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--border-color, #e2e8f0); background: var(--bg-subtle, #f8fafc); color: var(--text-secondary, #64748b); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.mbm-chip.is-active { background: linear-gradient(135deg, #be123c, #9d174d); color: #fff; border-color: transparent; }

/* ---- Gallery grid + cards (lightweight swatch thumbnails, NOT full renders) ---- */
.mbm-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; margin-bottom: 30px; }
.mbm-gallery-card { background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 14px; overflow: hidden; box-shadow: 0 6px 16px var(--shadow-color, rgba(15,23,42,0.06)); transition: transform .15s ease, box-shadow .15s ease; display: flex; flex-direction: column; }
.mbm-gallery-card:hover { transform: translateY(-3px); box-shadow: 0 14px 28px var(--shadow-color, rgba(15,23,42,0.12)); }
.mbm-gallery-thumb { height: 150px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mbm-gallery-thumb .thumb-photo-dot { width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.55); border: 2px solid rgba(255,255,255,0.9); position: absolute; }
.mbm-gallery-thumb .thumb-lines { position: absolute; left: 14%; right: 14%; height: 4px; background: rgba(255,255,255,0.5); border-radius: 2px; }
.mbm-gallery-thumb .thumb-motif { position: absolute; font-size: 20px; opacity: .55; color: #fff; }
.mbm-fav-btn { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.85); border: none; cursor: pointer; font-size: 14px; color: #be123c; z-index: 2; }
.mbm-gallery-page-badge { position: absolute; top: 8px; left: 8px; background: rgba(15,23,42,0.65); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; z-index: 2; }
.mbm-gallery-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mbm-gallery-body h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-primary, #1e293b); }
.mbm-gallery-meta { font-size: 11px; color: var(--text-secondary, #64748b); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.mbm-gallery-meta .mbm-tag { background: var(--bg-subtle, #f1f5f9); padding: 1px 7px; border-radius: 999px; }
.mbm-gallery-actions { display: flex; gap: 6px; margin-top: 8px; }
.mbm-gallery-actions button { flex: 1; }

/* ---- Buttons (shared) ---- */
.mbm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; border-radius: 10px; padding: 10px 18px; font-size: 13.5px; font-weight: 700; cursor: pointer; text-decoration: none; transition: transform .12s ease, opacity .12s ease; }
.mbm-btn:hover { transform: translateY(-1px); }
.mbm-btn-primary { background: linear-gradient(135deg, #be123c, #9d174d); color: #fff; box-shadow: 0 8px 18px rgba(157,23,77,0.3); }
.mbm-btn-outline { background: transparent; color: var(--text-primary, #1e293b); border: 1px solid var(--border-color, #e2e8f0); }
.mbm-btn-outline:hover { background: var(--hover-bg, #eff6ff); }
.mbm-btn-sm { padding: 7px 12px; font-size: 12px; }
.mbm-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ---- Modal (template preview / photo crop) ---- */
.mbm-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,0.6); z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.mbm-modal-overlay[hidden] { display: none; }
.mbm-modal { background: var(--bg-card, #fff); border-radius: 16px; max-width: 640px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 22px; position: relative; }
.mbm-modal-close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: none; background: var(--bg-subtle, #f1f5f9); color: var(--text-primary, #1e293b); font-size: 18px; cursor: pointer; }
.mbm-modal h3 { margin: 0 0 12px; color: var(--text-primary, #1e293b); }

/* ---- Photo cropper modal ---- */
.mbm-cropper-image-wrap { max-height: 55vh; overflow: hidden; background: #111; border-radius: 10px; }
.mbm-cropper-image-wrap img { display: block; max-width: 100%; }
.mbm-cropper-controls { display: flex; gap: 8px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.mbm-shape-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0; }
.mbm-shape-btn { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-color, #e2e8f0); background: var(--bg-subtle, #f8fafc); color: var(--text-secondary, #64748b); font-size: 12.5px; cursor: pointer; }
.mbm-shape-btn.is-active { background: linear-gradient(135deg, #be123c, #9d174d); color: #fff; border-color: transparent; }

/* ---- Background gallery (50 preset patterns + an upload tile) ---- */
.mbm-bg-gallery-hint { font-size: 11.5px; color: var(--text-secondary, #64748b); margin: 0 0 10px; }
.mbm-bg-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); gap: 7px; max-height: 320px; overflow-y: auto; padding: 4px; margin-bottom: 12px; border: 1px solid var(--border-color, #e2e8f0); border-radius: 10px; }
.mbm-bg-swatch { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; border: 2px solid var(--border-color, #e2e8f0); background-color: #fff; cursor: pointer; padding: 0; }
.mbm-bg-swatch:hover { border-color: var(--text-secondary, #94a3b8); }
.mbm-bg-swatch.is-active { border-color: #be123c; box-shadow: 0 0 0 2px rgba(190,18,60,0.25); }
.mbm-bg-swatch.is-active::after { content: '\2713'; position: absolute; top: 2px; right: 3px; font-size: 10px; color: #be123c; font-weight: 900; }
.mbm-bg-upload-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; border: 2px dashed var(--border-color, #e2e8f0); background: var(--bg-subtle, #f8fafc); color: var(--text-secondary, #64748b); cursor: pointer; font-size: 15px; }
.mbm-bg-upload-tile.is-active { border-color: #16a34a; border-style: solid; color: #16a34a; }
.mbm-bg-uploaded-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mbm-bg-uploaded-row img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border-color, #e2e8f0); }
.mbm-bg-uploaded-row span { font-size: 12px; color: var(--text-secondary, #64748b); flex: 1; }

/* ---- Builder: form | preview split ---- */
.mbm-builder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-items: start; }
.mbm-form-panel { min-width: 0; }
.mbm-preview-panel { min-width: 0; position: sticky; top: 16px; }
.mbm-mobile-tabs { display: none; gap: 6px; margin-bottom: 14px; }
.mbm-mobile-tabs button { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--border-color, #e2e8f0); background: var(--bg-card, #fff); color: var(--text-secondary, #64748b); font-weight: 700; font-size: 13px; cursor: pointer; }
.mbm-mobile-tabs button.is-active { background: linear-gradient(135deg, #be123c, #9d174d); color: #fff; border-color: transparent; }
.mbm-doc.is-compact { padding: 12mm 12mm; }
.mbm-doc.is-compact .doc-section { margin-bottom: 8px; }
.mbm-doc.is-compact .doc-fields { font-size: 11.5px; }

.mbm-steps-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.mbm-step-dot { flex: 1; min-width: 34px; text-align: center; padding: 8px 4px; border-radius: 8px; background: var(--bg-subtle, #f1f5f9); color: var(--text-secondary, #64748b); font-size: 11px; font-weight: 700; cursor: pointer; border: none; }
.mbm-step-dot.is-active { background: linear-gradient(135deg, #be123c, #9d174d); color: #fff; }
.mbm-step-dot.is-done { background: rgba(34,197,94,0.16); color: #16a34a; }

.mbm-form-card { background: var(--bg-card, #fff); border: 1px solid var(--border-color, #e2e8f0); border-radius: 16px; padding: 22px; box-shadow: 0 8px 20px var(--shadow-color, rgba(15,23,42,0.06)); }
.mbm-form-card h4 { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: var(--text-primary, #1e293b); }
.mbm-form-card .mbm-step-hint { font-size: 12.5px; color: var(--text-secondary, #64748b); margin: 0 0 16px; }

.mbm-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mbm-field { margin-bottom: 12px; }
.mbm-field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary, #64748b); margin-bottom: 5px; }
.mbm-field input, .mbm-field select, .mbm-field textarea { width: 100%; border: 1px solid var(--border-color, #e2e8f0); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; background: var(--bg-card, #fff); color: var(--text-primary, #1e293b); box-sizing: border-box; font-family: inherit; }
.mbm-field textarea { resize: vertical; min-height: 64px; }
.mbm-field input:focus, .mbm-field select:focus, .mbm-field textarea:focus { outline: none; border-color: #be123c; }

/* Quick-add suggestion chips shown under a few freeform fields (hobbies, about-me, partner
   expectations...) -- click toggles that term/sentence in and out of the field. */
.mbm-suggest-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.mbm-suggest-label { font-size: 11px; color: var(--text-secondary, #64748b); margin-right: 2px; }
.mbm-suggest-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border-color, #e2e8f0); background: var(--bg-subtle, #f8fafc); color: var(--text-secondary, #64748b); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.mbm-suggest-chip:hover { border-color: #be123c; color: #be123c; }
.mbm-suggest-chip.is-active { background: #be123c; border-color: #be123c; color: #fff; }
.mbm-suggest-row[data-suggest-mode="sentence"] .mbm-suggest-chip { border-radius: 8px; text-align: left; white-space: normal; max-width: 100%; }

.mbm-dynamic-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.mbm-dynamic-row { display: flex; gap: 8px; align-items: flex-end; }
.mbm-dynamic-row .mbm-field { flex: 1; margin-bottom: 0; }
.mbm-remove-row-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border-color, #e2e8f0); background: var(--bg-subtle, #f8fafc); color: #ef4444; cursor: pointer; flex-shrink: 0; }

.mbm-step-controls { display: flex; justify-content: space-between; gap: 10px; margin-top: 18px; }

/* ---- Photo upload dropzone ---- */
.mbm-photo-zone { border: 2px dashed var(--border-color, #e2e8f0); border-radius: 14px; padding: 22px; text-align: center; cursor: pointer; background: var(--bg-subtle, #f8fafc); margin-bottom: 14px; }
.mbm-photo-zone.is-dragover { border-color: #be123c; background: rgba(190,18,60,0.06); }
.mbm-photo-zone i { font-size: 26px; color: var(--text-secondary, #64748b); }
.mbm-photo-preview-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.mbm-photo-preview-row img { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border-color, #e2e8f0); }

/* ---- Customize panel ---- */
.mbm-color-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.mbm-color-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; }
.mbm-color-swatch.is-active { border-color: var(--text-primary, #1e293b); box-shadow: 0 0 0 2px var(--bg-card, #fff) inset; }
.mbm-section-toggle-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.mbm-section-toggle { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 8px; background: var(--bg-subtle, #f8fafc); border: 1px solid var(--border-color, #e2e8f0); cursor: grab; }
.mbm-section-toggle.is-dragging { opacity: .5; }
.mbm-section-toggle .drag-handle { cursor: grab; color: var(--text-secondary, #64748b); margin-right: 8px; }

/* ---- Export bar ---- */
.mbm-export-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.mbm-export-bar .mbm-btn { flex: 1; min-width: 110px; }

/* ---- Toast ---- */
.mbm-toast { position: fixed; right: 18px; bottom: 18px; z-index: 5000; max-width: 320px; padding: 13px 18px; border-radius: 12px; background: var(--bg-card, #1e293b); color: var(--text-primary, #fff); border: 1px solid var(--border-color, #334155); box-shadow: 0 12px 30px rgba(0,0,0,0.25); font-size: 13.5px; font-weight: 600; opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s ease; }
.mbm-toast.is-visible { opacity: 1; transform: translateY(0); }

/* =========================================================================
   BIODATA DOCUMENT (the actual rendered biodata). One shared DOM structure,
   restyled per template via inline CSS variables + a .mbm-layout-N class.
   ========================================================================= */
.mbm-doc-outer { background: #f1f5f9; border-radius: 14px; padding: 14px; overflow: auto; max-height: 78vh; }
.mbm-doc {
    --mbm-primary: #9d174d;
    --mbm-secondary: #fdf2f8;
    --mbm-accent: #d97706;
    --mbm-heading-font: 'Poppins', sans-serif;
    --mbm-body-font: 'Inter', sans-serif;
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    background: #fff;
    color: #1f2937;
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
    padding: 16mm 14mm;
    box-sizing: border-box;
    font-family: var(--mbm-body-font);
    position: relative;
}
.mbm-doc.is-landscape { width: 297mm; min-height: 210mm; }
.mbm-doc * { box-sizing: border-box; }
.mbm-doc .doc-title { font-family: var(--mbm-heading-font); color: var(--mbm-primary); text-align: center; font-size: 22px; font-weight: 800; margin: 0 0 4px; }
.mbm-doc .doc-subtitle { text-align: center; font-size: 12px; color: #6b7280; margin: 0 0 14px; }
.mbm-doc .doc-photo { display: block; margin: 0 auto 14px; object-fit: cover; background: #e5e7eb; border: 3px solid var(--mbm-primary); }
.mbm-doc .doc-photo.shape-circle { border-radius: 50%; width: 120px; height: 120px; }
.mbm-doc .doc-photo.shape-square { border-radius: 6px; width: 120px; height: 120px; }
.mbm-doc .doc-photo.shape-portrait { border-radius: 8px; width: 110px; height: 140px; }
.mbm-doc .doc-photo.shape-oval { border-radius: 50% / 40%; width: 130px; height: 150px; }
.mbm-doc .doc-photo.shape-passport { border-radius: 4px; width: 90px; height: 110px; }
.mbm-doc .doc-monogram {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mbm-primary);
    color: #fff;
    font-family: var(--mbm-heading-font);
    font-weight: 800;
    font-size: 24px;
    letter-spacing: .02em;
}
.mbm-doc .doc-section { margin-bottom: 14px; }
.mbm-doc .doc-section-title { font-family: var(--mbm-heading-font); color: var(--mbm-primary); font-size: 14px; font-weight: 700; margin: 0 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--mbm-secondary); text-transform: uppercase; letter-spacing: .03em; }
.mbm-doc .doc-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; font-size: 12.5px; }
.mbm-doc .doc-field { display: flex; gap: 6px; padding: 3px 0; }
.mbm-doc .doc-field .lbl { font-weight: 700; color: #374151; min-width: 40%; flex-shrink: 0; }
.mbm-doc .doc-field .val { color: #1f2937; }
.mbm-doc .doc-about { font-size: 12.5px; line-height: 1.6; color: #374151; }
.mbm-doc .doc-contact-warning { font-size: 10px; color: #b45309; text-align: center; margin-top: 10px; }
.mbm-doc .doc-demo-stamp { position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50%) rotate(-22deg); font-size: 46px; font-weight: 900; color: rgba(220,38,38,0.15); letter-spacing: .1em; pointer-events: none; z-index: 5; }
.mbm-doc .doc-footer-credit { text-align: center; font-size: 8.5px; color: #9ca3af; margin-top: 14px; letter-spacing: .02em; }

/* ---- Font-size modifiers ---- */
.mbm-doc.font-sm { font-size: 90%; }
.mbm-doc.font-sm .doc-title { font-size: 20px; }
.mbm-doc.font-lg { font-size: 112%; }
.mbm-doc.font-lg .doc-title { font-size: 25px; }

/* ---- Layout 1: centered-classic ---- */
.mbm-layout-1 .doc-header { text-align: center; }
.mbm-layout-1 .doc-photo { margin-top: 6px; }
.mbm-layout-1 .doc-body { display: block; }

/* ---- Layout 2: sidebar-left-photo ---- */
.mbm-layout-2 .doc-body { display: grid; grid-template-columns: 130px 1fr; gap: 18px; }
.mbm-layout-2 .doc-sidebar { background: var(--mbm-secondary); border-radius: 10px; padding: 12px; text-align: center; }
.mbm-layout-2 .doc-photo { margin: 0 auto 8px; }
.mbm-layout-2 .doc-header { text-align: left; margin-bottom: 10px; }

/* ---- Layout 3: sidebar-right-photo ---- */
.mbm-layout-3 .doc-body { display: grid; grid-template-columns: 1fr 130px; gap: 18px; }
.mbm-layout-3 .doc-sidebar { background: var(--mbm-secondary); border-radius: 10px; padding: 12px; text-align: center; order: 2; }
.mbm-layout-3 .doc-photo { margin: 0 auto 8px; }
.mbm-layout-3 .doc-main { order: 1; }
.mbm-layout-3 .doc-header { text-align: left; margin-bottom: 10px; }

/* ---- Layout 4: two-column-body (newspaper-lite) ---- */
.mbm-layout-4 .doc-header { text-align: center; position: relative; padding-right: 100px; }
.mbm-layout-4 .doc-photo { position: absolute; top: 0; right: 0; margin: 0; width: 84px; height: 84px; }
/* CSS Grid, not column-count -- html2canvas (PDF/JPG/PNG export) has weak/inconsistent support
   for multi-column reflow and can overlap or fail to split text into columns. A 2-up grid gives
   the same "two-column body" look with layout that's guaranteed to export exactly as shown,
   at the cost of the auto-balancing content-height reflow real multi-column would give. */
.mbm-layout-4 .doc-body { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row; gap: 0 20px; align-content: start; }
.mbm-layout-4 .doc-section { break-inside: avoid; }

/* ---- Layout 5: newspaper ---- */
.mbm-layout-5 .doc-header { text-align: center; border-top: 3px solid var(--mbm-primary); border-bottom: 3px solid var(--mbm-primary); padding: 8px 100px 8px 0; position: relative; }
.mbm-layout-5 .doc-title { font-size: 26px; letter-spacing: .05em; }
.mbm-layout-5 .doc-photo { position: absolute; right: 0; top: 4px; margin: 0; width: 78px; height: 90px; }
.mbm-layout-5 .doc-body { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row; gap: 0 22px; align-content: start; margin-top: 10px; }
.mbm-layout-5 .doc-section { break-inside: avoid; }
.mbm-layout-5 .doc-section-title { border-bottom: none; border-left: 4px solid var(--mbm-primary); padding-left: 8px; }

/* ---- Layout 6: card-sections ---- */
.mbm-layout-6 .doc-header { text-align: center; }
.mbm-layout-6 .doc-section { background: var(--mbm-secondary); border-radius: 10px; padding: 10px 14px; border: 1px solid rgba(0,0,0,0.05); }
.mbm-layout-6 .doc-section-title { border-bottom: none; }

/* ---- Layout 7: timeline ---- */
.mbm-layout-7 .doc-header { text-align: center; }
.mbm-layout-7 .doc-body { border-left: 3px solid var(--mbm-primary); padding-left: 18px; margin-left: 6px; }
.mbm-layout-7 .doc-section { position: relative; }
.mbm-layout-7 .doc-section::before { content: ''; position: absolute; left: -24px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--mbm-primary); }

/* ---- Layout 8: passport-compact ---- */
.mbm-layout-8 .doc-header { display: flex; justify-content: space-between; align-items: flex-start; border: 1px solid #d1d5db; padding: 10px; border-radius: 6px; }
.mbm-layout-8 .doc-photo { margin: 0; }
.mbm-layout-8 .doc-fields { border: 1px solid #e5e7eb; border-radius: 6px; padding: 8px; background: #fafafa; }
.mbm-layout-8 .doc-field { border-bottom: 1px dotted #d1d5db; }

/* ---- Layout 9: magazine-band ---- */
.mbm-layout-9 .doc-header { background: var(--mbm-primary); color: #fff; margin: -16mm -14mm 20px; padding: 24px 14mm 34px; text-align: center; position: relative; }
.mbm-layout-9 .doc-header .doc-title { color: #fff; }
.mbm-layout-9 .doc-header .doc-subtitle { color: rgba(255,255,255,0.85); }
.mbm-layout-9 .doc-photo { position: relative; margin: 0 auto -46px; border-color: #fff; }

/* ---- Layout 10: mandala-frame ---- */
.mbm-doc.mbm-layout-10 { border: 6px double var(--mbm-primary); }
.mbm-layout-10 .doc-header { text-align: center; }
.mbm-layout-10 .doc-body .doc-section { text-align: center; }
.mbm-layout-10 .doc-fields { justify-content: center; }
.mbm-layout-10 .doc-section-title::before, .mbm-layout-10 .doc-section-title::after { content: '❖'; color: var(--mbm-accent); margin: 0 8px; }

/* ---- Layout 11: minimal ---- */
.mbm-layout-11 .doc-header { text-align: left; }
.mbm-layout-11 .doc-photo { position: absolute; top: 16mm; right: 14mm; margin: 0; width: 70px; height: 70px; }
.mbm-layout-11 .doc-section-title { border-bottom: 1px solid #e5e7eb; text-transform: none; letter-spacing: 0; font-weight: 600; color: #374151; }
.mbm-layout-11 .doc-section { margin-bottom: 10px; }

/* ---- Layout 12: certificate-ornate ---- */
.mbm-doc.mbm-layout-12 { border: 3px solid var(--mbm-accent); outline: 1px solid var(--mbm-primary); outline-offset: -8px; }
.mbm-doc.mbm-layout-12::before, .mbm-doc.mbm-layout-12::after { position: absolute; font-size: 22px; color: var(--mbm-accent); opacity: .8; }
.mbm-doc.mbm-layout-12::before { content: '❁'; top: 6mm; left: 6mm; }
.mbm-doc.mbm-layout-12::after { content: '❁'; top: 6mm; right: 6mm; }
.mbm-layout-12 .doc-title { font-family: 'Playfair Display', serif; font-size: 26px; }
.mbm-layout-12 .doc-photo.shape-oval, .mbm-layout-12 .doc-photo { border-radius: 50%; border-width: 4px; border-color: var(--mbm-accent); }
.mbm-layout-12 .doc-section-title { text-align: center; letter-spacing: .12em; }

/* ---- Layout 13: profile-id-card ---- */
.mbm-layout-13 .doc-header { display: flex; align-items: center; gap: 14px; background: var(--mbm-secondary); border-radius: 12px; padding: 12px 16px; text-align: left; box-shadow: 0 3px 10px rgba(0,0,0,0.08); }
.mbm-layout-13 .doc-photo { margin: 0; flex-shrink: 0; width: 76px; height: 76px; }
.mbm-layout-13 .doc-title { text-align: left; }
.mbm-layout-13 .doc-subtitle { text-align: left; }

/* ---- Layout 14: invitation-scroll ---- */
.mbm-layout-14 .doc-header { text-align: center; border-radius: 40% 40% 8px 8px / 60px 60px 8px 8px; background: var(--mbm-secondary); padding: 20px 20px 14px; position: relative; }
.mbm-layout-14 .doc-photo { border-radius: 50%; border-width: 5px; border-style: double; }
.mbm-layout-14 .doc-section-title::before { content: '✿ '; color: var(--mbm-accent); }

/* ---- Layout 15: grid-table ---- */
.mbm-layout-15 .doc-body { display: grid; grid-template-columns: 100px 1fr; gap: 14px; }
.mbm-layout-15 .doc-sidebar { grid-row: span 3; }
.mbm-layout-15 .doc-photo { margin: 0; width: 100px; height: 100px; }
.mbm-layout-15 .doc-fields { border: 1px solid #e5e7eb; }
.mbm-layout-15 .doc-field { border: 1px solid #f1f5f9; padding: 4px 6px; }

/* ---- Layout 16: ribbon-tabs ---- */
.mbm-layout-16 .doc-header { text-align: center; }
.mbm-layout-16 .doc-section-title { display: inline-block; background: var(--mbm-primary); color: #fff; padding: 4px 16px 4px 10px; border-radius: 0 4px 4px 0; position: relative; border-bottom: none; }
.mbm-layout-16 .doc-section-title::after { content: ''; position: absolute; right: -8px; top: 0; border: 12px solid transparent; border-left-color: var(--mbm-primary); }

/* ---- Layout 17: family-focus ---- */
.mbm-layout-17 .doc-header { text-align: center; }
.mbm-layout-17 .doc-photo { width: 90px; height: 90px; position: absolute; top: 16mm; left: 14mm; margin: 0; }
.mbm-layout-17 .doc-section[data-section="family"] { order: -1; border: 2px solid var(--mbm-primary); border-radius: 8px; padding: 10px; }

/* ---- Layout 18: pattern-strip ---- */
.mbm-doc.mbm-layout-18 { padding-left: 26mm; }
.mbm-doc.mbm-layout-18::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 14mm; background: repeating-linear-gradient(45deg, var(--mbm-primary) 0 6px, var(--mbm-secondary) 6px 12px); }
.mbm-layout-18 .doc-photo { position: relative; z-index: 1; }

/* ---- Layout 19: sacred-border (dotted floral-corner frame, Om mark, inline photo) ---- */
.mbm-doc.mbm-layout-19 { border: 3px dotted var(--mbm-primary); padding-top: 22mm; }
.mbm-doc.mbm-layout-19::before, .mbm-doc.mbm-layout-19::after { position: absolute; font-size: 30px; color: var(--mbm-primary); opacity: .75; }
.mbm-doc.mbm-layout-19::before { content: '❁'; top: 5mm; left: 6mm; }
.mbm-doc.mbm-layout-19::after { content: '❁'; top: 5mm; right: 6mm; }
.mbm-layout-19 .doc-header { text-align: center; position: relative; padding-right: 100px; }
.mbm-layout-19 .doc-header::before { content: '॥ ॐ ॥'; display: block; font-size: 20px; color: var(--mbm-primary); margin-bottom: 6px; letter-spacing: .1em; }
.mbm-layout-19 .doc-photo { position: absolute; top: 20px; right: 0; margin: 0; width: 92px; height: 92px; }
.mbm-layout-19 .doc-section-title { text-align: left; border-bottom-style: dotted; }
.mbm-layout-19 .doc-section-title::before { content: '✱ '; color: var(--mbm-accent); }

/* ---- Layout 20: royal-mandala-dark (dark ground, gold mandala band, name banner) ---- */
.mbm-doc.mbm-layout-20 { background: #3f0d1c; color: #f3d9ad; }
.mbm-layout-20 .doc-header { position: relative; text-align: center; padding-top: 30px; padding-right: 110px; }
.mbm-layout-20 .doc-header::before {
    content: '';
    position: absolute;
    top: -16mm; left: -14mm; right: -14mm;
    height: 70px;
    /* repeating-radial-gradient, not conic-gradient -- html2canvas (used for PDF/JPG/PNG export)
       has no conic-gradient support and would silently render this band blank in exports. */
    background: repeating-radial-gradient(circle at 50% 0%, var(--mbm-accent) 0 2px, transparent 2px 9px);
    opacity: .35;
}
.mbm-layout-20 .doc-photo { position: absolute; top: 10px; right: 0; margin: 0; border-color: var(--mbm-accent); }
.mbm-layout-20 .doc-title { color: var(--mbm-accent); text-transform: uppercase; letter-spacing: .04em; display: inline-block; border-bottom: 2px solid var(--mbm-accent); padding-bottom: 6px; }
.mbm-layout-20 .doc-subtitle { color: #d9b98a; }
.mbm-layout-20 .doc-section-title { color: var(--mbm-accent); border-bottom-color: rgba(243,217,173,0.25); }
.mbm-layout-20 .doc-field .lbl, .mbm-layout-20 .doc-field .val, .mbm-layout-20 .doc-about { color: #f3d9ad; }
.mbm-layout-20 .doc-contact-warning { color: #e0b783; }

/* ---- Layout 21: temple-arch-garland (arch header, hanging toran-garland side strings,
   leaf/lotus corner accents, subtle paper-grain background) ---- */
.mbm-doc.mbm-layout-21 {
    padding-left: 22mm;
    padding-right: 22mm;
    background-color: #fdfaf3;
    background-image: radial-gradient(rgba(120,53,15,0.05) 0.6px, transparent 1px);
    background-size: 5px 5px;
}
.mbm-doc.mbm-layout-21::before, .mbm-doc.mbm-layout-21::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 14mm;
    background-image:
        radial-gradient(circle, #f59e0b 3.5px, transparent 4.5px),
        radial-gradient(circle, #ea580c 2px, transparent 3px),
        linear-gradient(180deg, rgba(22,163,74,0.5) 0, rgba(22,163,74,0.5) 1.5px, transparent 1.5px);
    background-size: 18px 18px, 18px 18px, 18px 18px;
    background-position: 0 0, 9px 9px, 0 0;
    background-repeat: repeat-y;
    opacity: .9;
}
.mbm-doc.mbm-layout-21::before { left: 2mm; }
.mbm-doc.mbm-layout-21::after { right: 2mm; }
.mbm-layout-21 .doc-body { position: relative; }
.mbm-layout-21 .doc-body::before, .mbm-layout-21 .doc-body::after { content: '🌿'; position: absolute; top: -6px; font-size: 22px; opacity: .85; z-index: 1; }
.mbm-layout-21 .doc-body::before { left: -8mm; }
.mbm-layout-21 .doc-body::after { right: -8mm; transform: scaleX(-1); }
.mbm-doc.mbm-layout-21 .doc-section:last-of-type { position: relative; }
.mbm-doc.mbm-layout-21 .doc-section:last-of-type::after { content: '🪷'; position: absolute; bottom: -18px; right: -4px; font-size: 20px; opacity: .8; }
.mbm-layout-21 .doc-header {
    text-align: center;
    background: var(--mbm-secondary);
    border-radius: 50% 50% 6px 6px / 34px 34px 6px 6px;
    padding: 18px 16px 14px;
    position: relative;
}
.mbm-layout-21 .doc-header::before { content: '॥ श्री गणेशाय नमः ॥'; display: block; font-size: 13px; color: var(--mbm-primary); margin-bottom: 8px; }
.mbm-layout-21 .doc-photo { border-width: 4px; border-style: double; }
.mbm-layout-21 .doc-section-title { color: var(--mbm-primary); }

/* ---- Layout 22: navy-arch-medallion (arch photo frame, medallion side dots, compact block) ---- */
.mbm-doc.mbm-layout-22 { background: #1e2a4a; color: #e8ecf5; }
.mbm-doc.mbm-layout-22::before, .mbm-doc.mbm-layout-22::after {
    content: '✦';
    position: absolute;
    top: 40%;
    font-size: 20px;
    color: var(--mbm-accent);
    opacity: .5;
}
.mbm-doc.mbm-layout-22::before { left: 6mm; }
.mbm-doc.mbm-layout-22::after { right: 6mm; }
.mbm-layout-22 .doc-header { text-align: center; background: var(--mbm-secondary); border-radius: 50% 50% 8px 8px / 40px 40px 8px 8px; padding: 20px 16px 16px; }
.mbm-layout-22 .doc-photo { border-radius: 50%; border-width: 3px; border-color: var(--mbm-accent); }
.mbm-layout-22 .doc-title { color: #1e2a4a; }
.mbm-layout-22 .doc-subtitle { color: #475569; }
.mbm-layout-22 .doc-section-title { color: var(--mbm-accent); border-bottom-color: rgba(232,236,245,0.25); }
.mbm-layout-22 .doc-field .lbl, .mbm-layout-22 .doc-field .val, .mbm-layout-22 .doc-about { color: #e8ecf5; }

/* ---- Chip-style fields shared by the vivid/modern layouts (23-27) -- turns plain "Label:
   Value" rows into small rounded stat-chips, which is most of what makes these read as
   distinctly modern rather than just a recolored version of the traditional layouts. ---- */
.mbm-layout-23 .doc-fields, .mbm-layout-24 .doc-fields, .mbm-layout-25 .doc-fields,
.mbm-layout-26 .doc-fields, .mbm-layout-27 .doc-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.mbm-layout-23 .doc-field, .mbm-layout-24 .doc-field, .mbm-layout-25 .doc-field,
.mbm-layout-26 .doc-field, .mbm-layout-27 .doc-field {
    flex-direction: column;
    gap: 1px;
    background: rgba(0,0,0,0.04);
    border-radius: 10px;
    padding: 6px 12px;
    min-width: 100px;
}
.mbm-layout-23 .doc-field .lbl, .mbm-layout-24 .doc-field .lbl, .mbm-layout-25 .doc-field .lbl,
.mbm-layout-26 .doc-field .lbl, .mbm-layout-27 .doc-field .lbl {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .65;
    font-weight: 700;
}
.mbm-layout-23 .doc-field .val, .mbm-layout-24 .doc-field .val, .mbm-layout-25 .doc-field .val,
.mbm-layout-26 .doc-field .val, .mbm-layout-27 .doc-field .val {
    font-size: 13px;
    font-weight: 700;
}
.mbm-layout-23 .doc-section-title, .mbm-layout-24 .doc-section-title, .mbm-layout-25 .doc-section-title,
.mbm-layout-26 .doc-section-title, .mbm-layout-27 .doc-section-title {
    display: inline-block;
    background: var(--mbm-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 4px 16px;
    font-size: 12px;
}

/* ---- Layout 23: gradient-hero (diagonal gradient banner, white card sections) ---- */
.mbm-layout-23 .doc-header {
    background: linear-gradient(135deg, var(--mbm-primary), var(--mbm-accent));
    color: #fff;
    margin: -16mm -14mm 30px;
    padding: 26px 14mm 40px;
    border-radius: 0 0 28px 28px;
    text-align: center;
}
.mbm-layout-23 .doc-header .doc-title { color: #fff; }
.mbm-layout-23 .doc-header .doc-subtitle { color: rgba(255,255,255,0.85); }
.mbm-layout-23 .doc-photo { margin: 0 auto -44px; border-color: #fff; box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
.mbm-layout-23 .doc-field { background: var(--mbm-secondary); }

/* ---- Layout 24: bento-grid (asymmetric card grid, each section its own tile) ---- */
.mbm-layout-24 .doc-header { text-align: center; background: var(--mbm-secondary); border-radius: 18px; padding: 16px; }
.mbm-layout-24 .doc-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mbm-layout-24 .doc-section {
    background: var(--mbm-secondary);
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.mbm-layout-24 .doc-section[data-section="lifestyle"], .mbm-layout-24 .doc-section[data-section="contact"] { grid-column: 1 / -1; }
.mbm-layout-24 .doc-section-title { background: var(--mbm-accent); }

/* ---- Layout 25: glass-card (colorful blurred blobs behind frosted-glass cards) ---- */
.mbm-doc.mbm-layout-25 {
    background:
        radial-gradient(circle at 12% 18%, var(--mbm-primary) 0%, transparent 38%),
        radial-gradient(circle at 88% 12%, var(--mbm-accent) 0%, transparent 38%),
        radial-gradient(circle at 50% 92%, var(--mbm-primary) 0%, transparent 42%),
        #f8fafc;
}
.mbm-layout-25 .doc-header, .mbm-layout-25 .doc-section {
    background: rgba(255,255,255,0.72);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 6px 18px rgba(15,23,42,0.08);
}
.mbm-layout-25 .doc-header { text-align: center; }
.mbm-layout-25 .doc-photo { box-shadow: 0 0 0 3px var(--mbm-accent), 0 0 0 6px var(--mbm-primary); }
.mbm-layout-25 .doc-field { background: rgba(255,255,255,0.5); }

/* ---- Layout 26: vivid-sidebar (saturated full-color sidebar, clean white content) ---- */
.mbm-layout-26 .doc-body { display: grid; grid-template-columns: 130px 1fr; gap: 18px; }
.mbm-layout-26 .doc-sidebar {
    background: linear-gradient(160deg, var(--mbm-primary), var(--mbm-accent));
    border-radius: 16px;
    padding: 14px;
    text-align: center;
}
.mbm-layout-26 .doc-photo { margin: 0 auto 8px; border-color: #fff; }
.mbm-layout-26 .doc-header { text-align: left; margin-bottom: 10px; }
.mbm-layout-26 .doc-field { background: var(--mbm-secondary); }

/* ---- Layout 27: neon-dark (near-black ground, glowing accent borders) ---- */
.mbm-doc.mbm-layout-27 { background: #0f0f1a; color: #e5e7eb; }
.mbm-layout-27 .doc-header { text-align: center; }
.mbm-layout-27 .doc-title { color: var(--mbm-accent); text-shadow: 0 0 12px var(--mbm-accent); }
.mbm-layout-27 .doc-subtitle { color: #9ca3af; }
.mbm-layout-27 .doc-photo { border-color: var(--mbm-accent); box-shadow: 0 0 16px var(--mbm-accent); }
.mbm-layout-27 .doc-section { border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 12px 14px; box-shadow: 0 0 10px rgba(0,0,0,0.4); }
.mbm-layout-27 .doc-section-title { background: transparent; color: var(--mbm-accent); box-shadow: 0 0 8px var(--mbm-accent) inset; border: 1px solid var(--mbm-accent); }
.mbm-layout-27 .doc-field { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); }
.mbm-layout-27 .doc-field .lbl { color: #9ca3af; }
.mbm-layout-27 .doc-field .val, .mbm-layout-27 .doc-about { color: #e5e7eb; }
.mbm-layout-27 .doc-contact-warning { color: #fca5a5; }

/* ---- Layout 28: divine-curve (gradient header with a big sweeping bottom curve, a devotional
   emblem badge, and photo overlapping the curve) ---- */
.mbm-layout-28 .doc-header {
    background: linear-gradient(135deg, var(--mbm-primary), var(--mbm-accent));
    color: #fff;
    margin: -16mm -14mm 34px;
    padding: 20px 14mm 46px;
    border-radius: 0 0 50% 50% / 0 0 40px 40px;
    text-align: center;
    position: relative;
}
.mbm-layout-28 .doc-header::before {
    content: var(--mbm-emblem, '🕉');
    display: inline-block;
    font-size: 30px;
    background: #fff;
    color: var(--mbm-primary);
    width: 52px;
    height: 52px;
    line-height: 52px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(255,255,255,0.35), 0 4px 14px rgba(0,0,0,0.25);
    margin-bottom: 10px;
}
.mbm-layout-28 .doc-header .doc-title { color: #fff; }
.mbm-layout-28 .doc-header .doc-subtitle { color: rgba(255,255,255,0.85); }
.mbm-layout-28 .doc-photo { margin: 0 auto -40px; border-color: #fff; position: relative; z-index: 2; }
.mbm-layout-28 .doc-section { background: var(--mbm-secondary); border-radius: 20px; padding: 12px 16px; }
.mbm-layout-28 .doc-section-title { display: inline-block; background: var(--mbm-primary); color: #fff; border-radius: 999px; padding: 4px 16px; border: none; }

/* ---- Layout 29: sacred-niche (arch niche with a devotional emblem and a scalloped curved
   bottom border along the whole page) ---- */
.mbm-layout-29 .doc-header {
    text-align: center;
    background: var(--mbm-secondary);
    border-radius: 50% 50% 10px 10px / 70px 70px 10px 10px;
    padding: 34px 16px 16px;
    position: relative;
    border: 2px solid var(--mbm-accent);
}
.mbm-layout-29 .doc-header::before {
    content: var(--mbm-emblem, '🪷');
    display: block;
    font-size: 36px;
    margin-bottom: 6px;
    /* text-shadow, not filter: drop-shadow -- html2canvas (PDF/JPG/PNG export) has unreliable
       support for the CSS Filter Effects module but handles text-shadow correctly since it's a
       much older, more basic property. */
    text-shadow: 0 0 5px var(--mbm-accent);
}
.mbm-layout-29 .doc-photo { border-color: var(--mbm-accent); }
.mbm-doc.mbm-layout-29 { padding-bottom: 24mm; }
.mbm-doc.mbm-layout-29::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 14mm;
    background: radial-gradient(circle at 10px 0, transparent 10px, var(--mbm-secondary) 10.5px) 0 0 / 20px 14mm repeat-x;
}
.mbm-layout-29 .doc-section-title { color: var(--mbm-primary); }

/* ---- Layout 30: photo-splash-profile (full-bleed photo banner with a wave/splash curve into a
   two-column body, bold overlaid serif name, and a solid-color contact footer bar) ---- */
.mbm-doc.mbm-layout-30 { border: 10px solid var(--mbm-primary); padding: 0; overflow: hidden; }
.mbm-layout-30 .doc-header {
    position: relative;
    height: 230px;
    margin: 0;
    padding: 0;
    text-align: left;
    background: var(--mbm-primary);
}
.mbm-layout-30 .doc-photo {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border: none !important;
    border-radius: 0 !important;
    margin: 0;
    z-index: 0;
}
.mbm-layout-30 .doc-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(0,0,0,0.62), rgba(0,0,0,0.1) 65%);
    z-index: 1;
}
.mbm-layout-30 .doc-header .doc-title, .mbm-layout-30 .doc-header .doc-subtitle {
    position: relative;
    z-index: 2;
    text-align: left;
    margin: 0;
    padding-left: 24px;
}
.mbm-layout-30 .doc-title {
    display: inline-block;
    color: #fff;
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 34px 24px 8px 0;
    margin-left: 24px;
    border-bottom: 2px solid var(--mbm-accent);
}
.mbm-layout-30 .doc-subtitle {
    color: rgba(255,255,255,0.9);
    text-transform: uppercase;
    letter-spacing: .2em;
    font-size: 11px;
    margin-top: 8px;
}
.mbm-layout-30 .doc-header::after {
    content: '';
    position: absolute;
    left: -12%;
    right: -12%;
    bottom: -34px;
    height: 68px;
    background: #fff;
    border-radius: 50%;
    z-index: 3;
}
.mbm-layout-30 .doc-body { padding: 20px 20px 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; position: relative; z-index: 4; }
.mbm-layout-30 .doc-section { margin-bottom: 16px; }
.mbm-layout-30 .doc-section-title { text-align: center; color: var(--mbm-accent); text-transform: uppercase; letter-spacing: .1em; border: none; background: none; padding: 0; }
.mbm-layout-30 .doc-section-title::before, .mbm-layout-30 .doc-section-title::after { content: '♥'; color: var(--mbm-accent); margin: 0 8px; font-size: 10px; }
.mbm-layout-30 .doc-field { border-bottom: 1px solid #e5e7eb; padding: 6px 0; }
.mbm-layout-30 .doc-section[data-section="contact"] {
    grid-column: 1 / -1;
    background: var(--mbm-accent);
    color: #fff;
    margin: 20px -20px -1px;
    padding: 14px 20px;
    text-align: center;
}
.mbm-layout-30 .doc-section[data-section="contact"] .doc-section-title { display: none; }
.mbm-layout-30 .doc-section[data-section="contact"] .doc-fields { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }
.mbm-layout-30 .doc-section[data-section="contact"] .doc-field { border: none; }
.mbm-layout-30 .doc-section[data-section="contact"] .lbl { display: none; }
.mbm-layout-30 .doc-section[data-section="contact"] .val { color: #fff; font-weight: 600; }
.mbm-layout-30 .doc-contact-warning { color: rgba(255,255,255,0.85); }

/* ---- Layout 31: toran-frame (watercolor wash + hanging toran garlands both sides + leaf
   fronds + a diya row at the bottom, on a textured paper background) ---- */
.mbm-doc.mbm-layout-31 {
    padding: 20mm 24mm;
    background-color: #faf6ec;
    background-image:
        radial-gradient(ellipse 60% 30% at 50% 0%, rgba(234,88,12,0.16), transparent 70%),
        radial-gradient(rgba(120,53,15,0.05) 0.6px, transparent 1px);
    background-size: 100% 100%, 5px 5px;
    background-repeat: no-repeat, repeat;
}
.mbm-doc.mbm-layout-31::before, .mbm-doc.mbm-layout-31::after {
    content: '';
    position: absolute;
    top: 0;
    height: 60mm;
    width: 13mm;
    background-image:
        radial-gradient(circle, #f59e0b 3px, transparent 4px),
        radial-gradient(circle, #ea580c 2px, transparent 3px);
    background-size: 16px 16px, 16px 16px;
    background-position: 0 0, 8px 8px;
    background-repeat: repeat-y;
    opacity: .88;
}
.mbm-doc.mbm-layout-31::before { left: 4mm; }
.mbm-doc.mbm-layout-31::after { right: 4mm; }
.mbm-layout-31 .doc-header { position: relative; text-align: center; }
.mbm-layout-31 .doc-header::before, .mbm-layout-31 .doc-header::after { content: '🌿'; position: absolute; top: -14px; font-size: 30px; }
.mbm-layout-31 .doc-header::before { left: 0; }
.mbm-layout-31 .doc-header::after { right: 0; transform: scaleX(-1); }
.mbm-layout-31 .doc-section-title { color: var(--mbm-primary); }
.mbm-doc.mbm-layout-31 { padding-bottom: 26mm; }
.mbm-doc.mbm-layout-31 .doc-body::after {
    content: '🪔    🌼    🪔';
    position: absolute;
    left: 0; right: 0; bottom: -20mm;
    text-align: center;
    font-size: 22px;
    letter-spacing: 10px;
    opacity: .9;
}
.mbm-layout-31 .doc-body { position: relative; }

/* ---- Layout 32: advance-letterhead (formal corporate-letterhead masthead: double-rule header,
   small-caps uppercase title, thin section rules, closing rule above contact -- plus a faint
   ring watermark for a premium security-paper feel) ---- */
.mbm-doc.mbm-layout-32 { background: #fff; }
.mbm-doc.mbm-layout-32::before {
    content: '';
    position: absolute;
    top: 45%; left: 50%;
    width: 150mm; height: 150mm;
    transform: translate(-50%, -50%);
    border: 3px solid var(--mbm-primary);
    border-radius: 50%;
    opacity: .05;
    pointer-events: none;
    z-index: 0;
}
.mbm-layout-32 .doc-header {
    position: relative;
    text-align: left;
    padding: 0 100px 14px 0;
    border-bottom: 4px solid var(--mbm-primary);
    margin-bottom: 6px;
    z-index: 1;
}
.mbm-layout-32 .doc-header::after { content: ''; position: absolute; left: 0; right: 100px; bottom: -7px; height: 1px; background: var(--mbm-accent); }
.mbm-layout-32 .doc-title { text-align: left; font-size: 23px; letter-spacing: .07em; text-transform: uppercase; color: var(--mbm-primary); }
.mbm-layout-32 .doc-subtitle { text-align: left; text-transform: uppercase; letter-spacing: .14em; font-size: 10.5px; color: var(--mbm-accent); font-weight: 700; }
.mbm-layout-32 .doc-photo { position: absolute; top: 0; right: 0; width: 80px; height: 80px; border-width: 2px; }
.mbm-layout-32 .doc-body { position: relative; z-index: 1; }
.mbm-layout-32 .doc-section-title { text-align: left; border-bottom: 1px solid #d1d5db; text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; color: #374151; font-weight: 700; }
.mbm-layout-32 .doc-fields { font-size: 12px; }
.mbm-layout-32 .doc-section[data-section="contact"] { margin-top: 18px; padding-top: 12px; border-top: 2px solid var(--mbm-primary); }
.mbm-layout-32 .doc-section[data-section="contact"] .doc-section-title { border-bottom: none; }

/* ---- Layout 33: color-bar-sections (thin double gold frame, small devotional mark, photo beside
   the name header, and full-width SOLID COLOR bar section headers -- white text on a colored
   band, distinct from every other layout's pill-badge/underline/ribbon treatments) ---- */
.mbm-doc.mbm-layout-33 { border: 3px double var(--mbm-accent); padding-top: 22mm; }
.mbm-layout-33 .doc-header { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; text-align: left; }
.mbm-layout-33 .doc-header::before {
    content: var(--mbm-emblem, '॥ श्री गणेशाय नमः ॥');
    flex: 1 0 100%;
    order: -1;
    text-align: center;
    font-size: 12px;
    color: var(--mbm-primary);
    margin-bottom: 6px;
}
.mbm-layout-33 .doc-photo { margin: 0; width: 78px; height: 78px; border-width: 2px; flex-shrink: 0; }
.mbm-layout-33 .doc-title, .mbm-layout-33 .doc-subtitle { text-align: left; margin: 0; }
.mbm-layout-33 .doc-section-title {
    display: block;
    background: var(--mbm-primary);
    color: #fff;
    text-align: left;
    padding: 6px 14px;
    border-bottom: none;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 3px;
    font-size: 13px;
}

/* ---- Background & border style modifiers (Customize panel "Background"/"Border" options).
   Deliberately placed AFTER every .mbm-layout-N rule above (several of which set their own
   `background`/`border` SHORTHAND, e.g. layouts 20/22/25/27) and marked !important on the
   specific sub-properties that must win, so a user's chosen background/border always applies
   on every one of the 30 layouts -- not just the ones that happen not to set their own
   background shorthand. Without this, the shorthand in a later-loaded layout rule would reset
   background-size/position/repeat back to their defaults even though background-image itself
   was already winning via inline style, causing the image to fail to "cover" on those layouts. ---- */
.mbm-doc.bg-dots { background-image: radial-gradient(rgba(0,0,0,0.08) 1px, transparent 1.5px) !important; background-size: 14px 14px !important; }
.mbm-doc.bg-lines { background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0 2px, transparent 2px 14px) !important; }
.mbm-doc.bg-paisley {
    background-image:
        radial-gradient(circle at 20% 20%, rgba(0,0,0,0.05) 0 6px, transparent 7px),
        radial-gradient(circle at 60% 60%, rgba(0,0,0,0.05) 0 6px, transparent 7px) !important;
    background-size: 60px 60px !important;
}
.mbm-doc.has-bg-image {
    background-size: cover, cover !important;
    background-position: center, center !important;
    background-repeat: no-repeat, no-repeat !important;
}
.mbm-doc.border-thin { border: 2px solid var(--mbm-primary) !important; }
.mbm-doc.border-medium { border: 6px solid var(--mbm-primary) !important; }
.mbm-doc.border-ornate { border: 3px dotted var(--mbm-primary) !important; outline: 1px solid var(--mbm-accent); outline-offset: -7px; }

/* ---- Print ---- */
@media print {
    body * { visibility: hidden; }
    .mbm-doc-outer, .mbm-doc-outer * { visibility: visible; }
    .mbm-doc-outer { position: absolute; left: 0; top: 0; max-height: none; overflow: visible; background: #fff; padding: 0; }
    .mbm-doc { box-shadow: none; margin: 0; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .mbm-role-card, .mbm-gallery-card, .mbm-btn, .mbm-toast { transition: none !important; }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .mbm-builder { grid-template-columns: 1fr; }
    .mbm-mobile-tabs { display: flex; }
    .mbm-form-panel { display: block; }
    .mbm-preview-panel { position: static; }
    .mbm-builder:not(.is-preview-mode) .mbm-preview-panel { display: none; }
    .mbm-builder.is-preview-mode .mbm-form-panel { display: none; }
    .mbm-doc-outer { max-height: 60vh; }
}
@media (max-width: 700px) {
    .mbm-heading h1 { font-size: 24px; }
    .mbm-field-grid { grid-template-columns: 1fr; }
    .mbm-role-grid { grid-template-columns: 1fr; }
    .mbm-gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
    /* Fixed (not sticky+negative-margin) so it always spans the true viewport width, regardless
       of how much padding any ancestor container happens to have -- a negative-margin "breakout"
       trick only lines up if every ancestor's padding matches exactly, which is fragile. */
    .mbm-wrap { padding-bottom: 74px; }
    .mbm-export-bar {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        background: var(--bg-primary, #fff);
        padding: 10px 16px;
        margin: 0;
        box-shadow: 0 -4px 12px var(--shadow-color, rgba(0,0,0,0.08));
        z-index: 50;
    }
}
@media (max-width: 480px) {
    .mbm-gallery-grid { grid-template-columns: 1fr 1fr; }
}