/* TheWedLink marriage biodata: six luxury templates on a fixed A4 page (794 x 1123 px), scaled to fit the screen. */
.bd-frame { position: relative; width: 100%; overflow: hidden; border-radius: 4px; box-shadow: 0 0 0 1px rgba(46,14,26,.12), 0 34px 70px -30px rgba(46,14,26,.55); background: #fff; }
.bd-frame .bd { position: absolute; top: 0; left: 0; transform-origin: 0 0; }
.bd-snap { position: fixed; left: -10000px; top: 0; width: 794px; height: 1123px; }

.bd {
  --acc: #B9606F; --ink: #4A3438; --label: #8F7479; --paper: #FFFBFA; --line: rgba(201,114,127,.35);
  --fh: 'Cormorant Garamond', 'Noto Serif Malayalam', 'Noto Serif Devanagari', 'Noto Serif Gurmukhi', 'Amiri', Georgia, serif;
  --ft: 'DM Sans', 'Noto Sans Malayalam', 'Noto Serif Malayalam', 'Noto Serif Devanagari', 'Noto Serif Tamil', 'Noto Serif Kannada', 'Noto Serif Telugu', 'Noto Serif Gurmukhi', 'Amiri', Arial, sans-serif;
  width: 794px; height: 1123px; position: relative; overflow: hidden; color: var(--ink); font-family: var(--ft);
  font-size: 16.5px; line-height: 1.5; -webkit-font-smoothing: antialiased; box-sizing: border-box; background: var(--paper);
}
.bd *, .bd *::before, .bd *::after { box-sizing: border-box; }
/* one thin border, nothing else */
.bd-in { position: absolute; top: 34px; right: 34px; bottom: 34px; left: 34px; padding: 46px 58px 40px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); }
.bd.has-strip .bd-in { bottom: 62px; }

.bd-hd { text-align: center; }
.bd-top { margin: 0 0 10px; font-size: .82em; letter-spacing: .08em; color: var(--label); }
.bd[lang=ar] .bd-top { font-family: 'Amiri', serif; font-size: 1.1em; letter-spacing: 0; }
.bd-title { margin: 0; font-family: var(--ft); font-weight: 500; font-size: .86em; letter-spacing: .32em; text-transform: uppercase; color: var(--acc); }
.bd-rule { display: block; width: 44px; height: 1px; background: var(--acc); margin: 14px auto 22px; }

.bd-head { display: flex; gap: 28px; align-items: center; margin-bottom: 6px; }
.bd-photo { flex: none; width: 150px; height: 190px; border-radius: 3px; overflow: hidden; }
.bd-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd-headtxt { flex: 1; min-width: 0; }
.bd-name { margin: 0 0 10px; font-family: var(--fh); font-weight: 600; font-size: 2.5em; line-height: 1.05; color: var(--ink); letter-spacing: .01em; }
.bd:not(.has-photo) .bd-name { text-align: center; }
.bd table { width: 100%; border-collapse: collapse; }
.bd th { text-align: left; font-weight: 400; width: 38%; padding: 2.5px 14px 2.5px 0; vertical-align: top; color: var(--label); font-size: .92em; }
.bd td { padding: 2.5px 0; vertical-align: top; overflow-wrap: anywhere; }
.bd-sec { margin-top: 16px; }
.bd-sec h3 { margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line); font-family: var(--ft); font-weight: 600; font-size: .74em; letter-spacing: .22em; text-transform: uppercase; color: var(--acc); }
.bd-para p { margin: 0; }

/* free version: a red strip along the bottom */
.bd-strip { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; height: 34px; display: flex; align-items: center; justify-content: center;
  background: #C0152F; color: #fff; font: 700 14px/1 Arial, Helvetica, sans-serif; letter-spacing: .08em; }

/* colour accents only */
.bd-royal   { --acc: #B9606F; --line: rgba(201,114,127,.35); --paper: #FFFBFA; }
.bd-emerald { --acc: #4E8F73; --line: rgba(78,143,115,.35); --paper: #FBFEFC; --label: #6E8279; --ink: #33403A; }
.bd-ivory   { --acc: #A9824B; --line: rgba(169,130,75,.4); --paper: #FFFCF6; --label: #8C7A62; }
.bd-khalsa  { --acc: #C8704F; --line: rgba(200,112,79,.35); --paper: #FFFAF7; --label: #8F7468; }
.bd-kasavu  { --acc: #A98A35; --line: rgba(169,138,53,.45); --paper: #FFFDF6; --label: #8C7A62; }
.bd-kasavu .bd-in { border-left: 3px double var(--acc); border-right: 3px double var(--acc); }
.bd-noir    { --acc: #C27A86; --line: rgba(194,122,134,.35); --paper: #FFF7F8; }


/* religious symbol (optional) */
.bd-sym { display: block; width: 26px; height: 26px; margin: 0 auto 8px; color: var(--acc); }
.bd-sym-t { width: auto; height: auto; font-size: 1.7em; line-height: 1; font-family: 'Noto Serif Devanagari', 'Noto Serif Gurmukhi', serif; text-align: center; margin: 0 0 6px; }

/* layout: left aligned with a thin accent bar */
.bd-l-left .bd-in { border: 0; border-left: 3px solid var(--acc); padding-left: 52px; }
.bd-l-left .bd-hd { text-align: left; }
.bd-l-left .bd-sym { margin-left: 0; }
.bd-l-left .bd-sym-t { text-align: left; }
.bd-l-left .bd-rule { margin-left: 0; }
.bd-l-left:not(.has-photo) .bd-name { text-align: left; }

/* layout: two columns of sections */
.bd-l-cols .bd-in { display: block; column-count: 2; column-gap: 40px; column-fill: balance; }
.bd-l-cols .bd-hd, .bd-l-cols .bd-head { column-span: all; }
.bd-l-cols .bd-sec { break-inside: avoid; margin-top: 0; margin-bottom: 16px; }
.bd-l-cols .bd-head { margin-bottom: 20px; }
.bd-l-cols th { width: 44%; }
.bd-l-cols .bd-in { padding-top: 46px; }

/* layout: double hairline frame with corner marks */
.bd-l-frame .bd-in { border: 3px double var(--acc); top: 40px; right: 40px; bottom: 40px; left: 40px; }
.bd-l-frame.has-strip .bd-in { bottom: 66px; }
.bd-l-frame .bd-tick { position: absolute; width: 14px; height: 14px; border-color: var(--acc); border-style: solid; border-width: 0; }
.bd-l-frame .bd-tick.tl { top: 8px; left: 8px; border-top-width: 1px; border-left-width: 1px; }
.bd-l-frame .bd-tick.tr { top: 8px; right: 8px; border-top-width: 1px; border-right-width: 1px; }
.bd-l-frame .bd-tick.bl { bottom: 8px; left: 8px; border-bottom-width: 1px; border-left-width: 1px; }
.bd-l-frame .bd-tick.br { bottom: 8px; right: 8px; border-bottom-width: 1px; border-right-width: 1px; }
.bd-l-frame .bd-sec h3 { text-align: center; border-bottom: 0; padding-bottom: 0; }
.bd-l-frame .bd-sec h3::after { content: ''; display: block; width: 28px; height: 1px; background: var(--acc); margin: 6px auto 0; }

.lay-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.lay-pick label { cursor: pointer; display: grid; gap: 6px; text-align: center; font-weight: 600; font-size: .85rem; }
.lay-pick input { position: absolute; opacity: 0; pointer-events: none; }
.lay-pick i { display: block; aspect-ratio: 210 / 297; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1px var(--line); position: relative; overflow: hidden; }
.lay-pick input:checked + i { outline: 3px solid var(--kumkum); outline-offset: 4px; }
.lay-pick i::before, .lay-pick i::after { content: ''; position: absolute; background: #C9BFB8; }
.lay-center::before { left: 30%; right: 30%; top: 14%; height: 3px; } .lay-center::after { left: 16%; right: 16%; top: 30%; height: 50%; background: repeating-linear-gradient(#E2DAD4 0 2px, transparent 2px 9px) !important; }
.lay-left { border-left: 4px solid #C9727F; } .lay-left::before { left: 14%; width: 40%; top: 14%; height: 3px; } .lay-left::after { left: 14%; right: 14%; top: 30%; height: 50%; background: repeating-linear-gradient(#E2DAD4 0 2px, transparent 2px 9px) !important; }
.lay-cols::before { left: 30%; right: 30%; top: 14%; height: 3px; } .lay-cols::after { left: 12%; right: 12%; top: 30%; height: 50%; background: repeating-linear-gradient(90deg, transparent 0 46%, #fff 46% 54%, transparent 54%), repeating-linear-gradient(#E2DAD4 0 2px, transparent 2px 9px) !important; }
.lay-frame { box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 8px #C9727F, inset 0 0 0 10px #fff, 0 0 0 1px var(--line) !important; } .lay-frame::before { left: 30%; right: 30%; top: 16%; height: 3px; } .lay-frame::after { left: 20%; right: 20%; top: 32%; height: 46%; background: repeating-linear-gradient(#E2DAD4 0 2px, transparent 2px 9px) !important; }

/* ---------- biodata pages ---------- */
.bio-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 40px; align-items: start; padding: 10px 0 80px; }
.bio-layout > * { min-width: 0; }
.bio-preview { position: sticky; top: 84px; }
.bio-preview p { font-size: .9rem; color: var(--plum-2); margin-top: 10px; text-align: center; }
.bio-form .card { margin-bottom: 16px; }
.bio-form .card h2 { font-size: 1.35rem; margin-bottom: 14px; }
.tpl-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tpl-pick label { cursor: pointer; display: grid; gap: 6px; text-align: center; font-weight: 600; font-size: .9rem; }
.tpl-pick input { position: absolute; opacity: 0; pointer-events: none; }
.tpl-pick i { display: block; aspect-ratio: 210 / 297; border-radius: 6px; box-shadow: 0 0 0 1px var(--line); }
.tpl-pick input:checked + i { box-shadow: 0 0 0 3px var(--kumkum); }
.tpl-pick input:focus-visible + i { outline: 3px solid var(--turmeric); outline-offset: 3px; }
.tpl-royal, .tpl-emerald, .tpl-ivory, .tpl-khalsa, .tpl-kasavu, .tpl-noir { background: #fff; box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 6px var(--sw), 0 0 0 1px var(--line); position: relative; }
.tpl-royal::after, .tpl-emerald::after, .tpl-ivory::after, .tpl-khalsa::after, .tpl-kasavu::after, .tpl-noir::after { content: ''; position: absolute; left: 30%; right: 30%; top: 22%; height: 2px; background: var(--sw); }
.tpl-royal { --sw: #B9606F; } .tpl-emerald { --sw: #4E8F73; } .tpl-ivory { --sw: #A9824B; } .tpl-khalsa { --sw: #C8704F; } .tpl-kasavu { --sw: #A98A35; } .tpl-noir { --sw: #C27A86; }
.tpl-pick { grid-template-columns: repeat(3, 1fr) !important; gap: 18px 14px; }
.tpl-pick input:checked + i { outline: 3px solid var(--kumkum); outline-offset: 7px; }
.rel-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.rel-pick label { cursor: pointer; }
.rel-pick input { position: absolute; opacity: 0; pointer-events: none; }
.rel-pick span { display: inline-block; padding: 9px 16px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px var(--line); font-weight: 600; font-size: .95rem; }
.rel-pick input:checked + span { background: var(--rosegold, #C9727F); color: #fff; box-shadow: none; }
.rel-pick input:focus-visible + span { outline: 3px solid var(--turmeric); outline-offset: 2px; }
.bio-form .field[hidden] { display: none; }
.photo-row { display: flex; gap: 14px; align-items: center; }
.photo-row img { width: 72px; height: 90px; object-fit: cover; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); }
.extra-row { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: 10px; align-items: end; margin-bottom: 10px; }
.extra-row .field { margin: 0; }
.extra-row .x { width: 44px; height: 50px; border-radius: 12px; border: 0; background: var(--rose-2); color: var(--plum); font-size: 1.3rem; cursor: pointer; }
.bio-actions { display: grid; gap: 12px; }
.bio-actions .btn { width: 100%; }
.price-line { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.price-line b { font-family: var(--display); font-size: 1.8rem; }
.bio-mobile-bar { display: none; }
@media (max-width: 900px) {
  .bio-layout { grid-template-columns: 1fr; }
  .bio-form .bio-preview-inline { display: block; }
  .bio-preview { position: static; order: -1; }
  .bio-layout.edit .bio-preview { display: none; }
  .tpl-pick { grid-template-columns: repeat(4, 1fr); }
  .extra-row { grid-template-columns: 1fr 1fr auto; }
  .bio-mobile-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255,248,244,.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); }
  .bio-mobile-bar .btn { flex: 1; min-height: 46px; }
}

/* guide + format links under the biodata form */
.bio-guide { padding-top: 10px; }
.guide-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; }
.guide-grid h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 14px; }
.guide-list { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; color: var(--plum); }
.guide-list li::marker { color: var(--kumkum); }
.formats { background: #fff; border-radius: var(--r-lg); padding: 22px; box-shadow: 0 0 0 1px var(--line); display: grid; gap: 4px; }
.formats h2 { font-size: 1.4rem; margin-bottom: 8px; }
.formats a { color: var(--plum); text-decoration: none; padding: 8px 12px; border-radius: 10px; font-weight: 500; }
.formats a:hover { background: var(--rose-2); }
.formats a[aria-current=page] { background: var(--rose-2); color: var(--kumkum-d); font-weight: 600; }
@media (max-width: 900px) { .guide-grid { grid-template-columns: 1fr; } }

/* change the look on the download page */
.look-card .lay-pick { grid-template-columns: repeat(4, 1fr); }
.look-card .tpl-pick { grid-template-columns: repeat(6, 1fr) !important; gap: 10px; }
.look-card .tpl-pick label { font-size: .78rem; }
.sym-toggle { display: inline-flex; gap: 8px; align-items: center; margin-top: 16px; font-weight: 500; font-size: .95rem; cursor: pointer; }
.sym-toggle input { width: 18px; height: 18px; accent-color: var(--kumkum); }
.note-saved { min-height: 1.3em; margin-top: 8px; font-size: .88rem; color: var(--leaf); }
@media (max-width: 600px) { .look-card .tpl-pick { grid-template-columns: repeat(3, 1fr) !important; } .look-card .lay-pick { gap: 8px; } }