/* =========================================================================
   style.css — પેઢીનામું ઓટોમેશન સિસ્ટમ (સંપૂર્ણ મોબાઇલ રિસ્પોન્સિવ અને ઓપ્ટિમાઇઝ્ડ)
   ========================================================================= */

/* 🔤 Noto Sans Gujarati — એકમાત્ર ફોન્ટ (Google Fonts પરથી લોડ), Shruti/OS-fallback
   fonts કાઢી નાખ્યા છે જેથી બધા device (Windows/Mac/Linux/mobile) પર text ના
   character-width/line-height સરખા જ રહે — print margin/layout પણ સરખું જ આવે. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Gujarati:wght@400;500;700&display=swap');

/* બધા એલિમેન્ટ્સ માટે box-sizing */
*, *::before, *::after { box-sizing: border-box; }

/* 📐 દરેક પાનાનું (1,2,3,4) ટોપ-માર્જિન — બધા 6mm ડિફોલ્ટ */
:root {
    --page1-margin-top: 10mm;
    --page2-margin-top: 10mm;
    --page3-margin-top: 10mm;
    --page4-margin-top: 10mm;
    --page5-margin-top: 10mm;
    /* 🌲 ફક્ત વારસાઈ સોગંદનામા પાનાં (page5) ના family tree માટે અલગ માર્જિન */
    --page5-tree-margin-top: 5px;
    --page5-tree-margin-bottom: 10px;
}

body { font-family: 'Noto Sans Gujarati', sans-serif; margin: 0; background-color: #ffffff; }

/* --- ટોચનું મેનુ --- */
.site-menu {
    max-width: 1300px;
    margin: 0 auto 10px;
}
.site-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 10px;
}
.site-menu a {
    display: inline-block;
    padding: 7px 16px;
    background: #2c3e50;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 13.5px;
    border-radius: 5px;
    transition: background 0.15s;
}
.site-menu a:hover { background: #1a252f; }

/* --- વેબસાઈટ હેડિંગ (બ્રાન્ડ) --- */
.site-brand {
    max-width: 1300px;
    margin: 0 auto 20px;
    text-align: center;
    background: linear-gradient(140deg, #2c3e50, #34495e);
    border-radius: 8px;
    padding: 14px 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.15);
}
.site-brand h1 {
    margin: 0;
    color: #fff;
    font-size: 22px;
    letter-spacing: 0.5px;
}
.container { max-width: 1300px; margin:0 auto; background:aliceblue; padding:10px 25px 25px 25px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
h2, h3 { text-align: center; color: #333; margin-bottom: 15px; }
label { display: block; font-weight: bold; margin-bottom: 5px; }
input, select { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; }

/* --- રો અને લેઆઉટ સિસ્ટમ --- */
.row { display: flex; gap: 10px; margin-bottom: 10px; align-items: center; }

/* HTML ના ઇનલાઇન flex ને ઓવરરાઇડ કરવા માટે નવો સીએસએસ નિયમ */
.row > div {
    min-width: 0; 
}

.member-block { background: #fafafa; border: 1px solid #ddd; padding: 15px; margin-bottom: 10px; border-radius: 6px; position: relative; }

/* --- છૂટાછેડા/નિ:સંતાન "extra-dropdown" (custom button + panel) ---
   આ panel પહેલા position:absolute વગર હતું, એટલે open થાય ત્યારે એ
   normal document flow માં bese ને row/page ને પહોળું ધકેલી દેતું —
   એટલે જ મોબાઈલમાં "page motu thay" (zoom-in જેવું) લાગતું હતું. */
.extra-dropdown-toggle {
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #333;
    font-weight: normal;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
}
.extra-dropdown-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    min-width: 140px;
    max-width: 80vw;
    white-space: nowrap;
}
.extra-dropdown-panel label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: normal;
    margin-bottom: 6px;
    white-space: nowrap;
    cursor: pointer;
}
.extra-dropdown-panel label:last-child { margin-bottom: 0; }
.extra-dropdown-panel input[type="checkbox"] {
    width: auto;
    padding: 0;
    margin: 0;
}
.child-container { margin-left: 20px; padding-left: 15px; border-left: 2px dashed #3498db; margin-top: 10px; }

/* વારસદારનું ઉંમર/મરણ-તારીખ બોક્સ */
.m-age { flex: 1.4 !important; min-width: 110px; }

/* --- વારસદારની row ના field-boxes: container પહોળું થાય તેમ proportionally
   પહોળા થાય એ માટે (app2.js ના fixed px width/flex ને override કરે છે).
   ફક્ત 769px+ (ડેસ્કટોપ/ટેબ્લેટ) પર જ — મોબાઈલ પર row column બની જાય છે
   ને input/select પહેલેથી જ width:100% (full-width, stacked) રહે છે. */
@media screen and (min-width: 769px) {
    .row .m-rel { flex: 1.6 !important; width: auto !important; min-width: 130px; }
    .row .m-status { flex: 1 !important; width: auto !important; min-width: 100px; }
    .row .m-name { flex: 3 !important; min-width: 160px; }
    .row input[id^="custom-rel-"] { flex: 1.4 !important; width: auto !important; min-width: 110px; }
}

button { color: white; padding: 8px 15px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
.btn-primary { background-color: #2c3e50; width: 100%; font-size: 18px; margin-top: 20px; }
.btn-success { background-color: #27ae60; }
.btn-info { background-color: #2980b9; font-size: 12px; padding: 6px 10px; margin-top: 5px; }
.btn-insert { background-color: #16a085; font-size: 12px; padding: 6px 10px; flex: none; white-space: nowrap; }
.btn-danger { background-color: #c0392b; font-size: 12px; padding: 4px 8px; }

/* --- ઓફિશિયલ પ્રિન્ટ CSS --- */
#print-area { display: none; background: white; padding: 0px 35px 25px 35px; line-height: 2; font-size: 12pt; color: #000; max-width: 850px; margin: 0 auto; }
.header-text { text-align: center; font-weight: bold; margin-bottom: 16px; font-size: 13pt; line-height: 1.4; }
.p-text { text-align: justify; text-indent: 50px; margin: 9px 0; }

/* =========================================================================
   🌲 સુધારેલ ફેમિલી ટ્રી લેઆઉટ (ઓટોમેટિક કોમ્પેક્ટ એડજસ્ટમેન્ટ)
   ========================================================================= */
.tree { display: flex; flex-direction: column; align-items: center; margin: 0px 0 20px 0; width: 100%; }


.tree-svg-wrapper { width: 100%; display: flex; justify-content: center; }
.tree-svg {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: 0px auto 0 auto;
}
.tree-line { stroke: #000000; stroke-width: 1.5; }

.flex-space { display: flex; justify-content: space-between; margin-top: 16px; flex-wrap: wrap; gap: 15px; }





/* સ્પષ્ટ પેજ બ્રેક */
.page-break { page-break-before: always; break-before: page; border-top: 2px dashed #bbb; margin-top: 40px; padding-top: 25px; }

.panch-table { width: 100%; max-width: 750px; border-collapse: collapse; margin: 16px 0; font-size: 11pt; }
.panch-table th { border: 1px solid black; padding: 8px; text-align: left; background-color: #f2f2f2; }
.panch-table td { border: 1px solid black; padding: 12px; text-align: left; height: 25px; }

.photo-sign-wrapper { width: 100%; margin-top: 24px; clear: both;margin:10px 10px 10px 10px; }
.photo-block-left { display: inline-block; width: 55%; vertical-align: top;}
.sign-block-right { display: inline-block; width: 40%; text-align: right; font-weight: bold; line-height: 3; font-size: 11pt; float: right; }

.photo-section { display: flex; gap: 30px; margin-top: 8px; }
.panch-photo-box { width: 1.2in; height: 1.6in; border: 1px solid black; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 8pt; text-align: center; font-weight: bold; background: #fff; color: #555; }

@media print {
    @page { 
        size: A4; 
        margin: 0;                      /* 👈 @page margin badha OS/browser ma alag-alag vartan kare chhe,
                                            etle ahi 0 rakhi ne niche padding thi j margin control karyu chhe
                                            (padding badhe consistent j rahe chhe) */
    }
    .no-print { display: none; }
    /* 👈 vaastvik print margin ahi thi control thai chhe. Page 1 nu top-margin
       ahi thi (padding-top) male chhe. Horizontal/bottom margin badha page ma common. */
    #print-area { display: block !important; padding: var(--page1-margin-top, 6mm) 10mm 25px 10mm; max-width: none; }
    html, body { margin: 0 !important; padding: 0 !important; }  /* 👈 browser/OS na default body margin ne force-remove karyu */
    body { background: white; margin: 0; }

    /* 🐞 FIX: #print-area nu top padding ફક્ત આખા print-flow ni shરૂઆતમાં (page 1) j
       lagu pade chhe — page-break-before thi force thayેલા page 2/3/4 ni shરૂઆતમાં
       repeat nathi thatu, etle e pages top ma touch thata hata (0 margin dekhatu hatu).
       Have dareક page-break div ne potanu j top-padding aapyu chhe, etle dareક page
       nu top-margin alag-alag control thai shake. */
    .page-break { border-top: none; margin-top: 0; padding-top: 0; }
    .page-break.pb-page2 { padding-top: var(--page2-margin-top, 6mm); }
    .page-break.pb-page3 { padding-top: var(--page3-margin-top, 6mm); }
    .page-break.pb-page4 { padding-top: var(--page4-margin-top, 6mm); }
    .page-break.pb-page5 { padding-top: var(--page5-margin-top, 6mm); }

    /* 📄 પેજના ફોર્મ પેરેગ્રાફ વચ્ચેનું માર્જિન ઘટાડ્યું */
    .p-text { 
        margin: 4px 0 !important;       /* 👈 લખાણની ઉપર-નીચેની જગ્યા ૯px થી ઘટાડીને ૪px કરી */
    }

    /* 🌲 ટ્રીની આજુબાજુનું માર્જિન ઓછું કર્યું (ટ્રીના બોક્સમાં કોઈ છેડછાડ નહીં થાય) */
    .tree {
        margin: 5px 0 10px 0 !important; 
    }

    /* 🌲 ફક્ત વારસાઈ સોગંદનામા પાનાં (page5) પરના ટ્રી માટે અલગ માર્જિન —
       બાકીના પાનાં (page1/page3) ના .tree માર્જિનને અસર કર્યા વગર */
    .pb-page5 .tree.tree-va {
        margin: var(--page5-tree-margin-top, 5px) 0 var(--page5-tree-margin-bottom, 10px) 0 !important;
    }

    /* ✍️ વારસાઈ સોગંદનામા પાનાં (page5) ના તારીખ/સ્થળ અને બંને સહી-બ્લોક
       લખાણની નજીક લાવ્યા (પહેલા વધારે જગ્યા હતી) — page1/page4 ના એ જ
       ક્લાસના બ્લોકને અસર કર્યા વગર — જેથી આખું સોગંદનામુ એક પાનાં પર ફિટ થાય */
    .pb-page5 .va-place-date-stack {
        margin-top: 8px !important;
    }
    .pb-page5 .va-sign-caption {
        margin-top: 8px !important;
    }
    .pb-page5 .va-identify-line {
        margin-top: 2px !important;
    }
    .pb-page5 .va-identify-line .va-identify-spacer {
        margin-top: 2px !important;
    }

    /* ✍️ અરજદાર સહી, ફોટો અને અરજી નોટનો બ્લોક */
    .page1-sign-block {
        page-break-inside: avoid; 
        break-inside: avoid;
        margin-top: 4px !important;     /* 👈 ટ્રી પત્યા પછી સહી વચ્ચેની ખાલી જગ્યા ઘટાડી */
    }
}
/* --- વધારાની જરૂરિયાતો --- */
.page-wrapper { display: flex; justify-content: center; align-items: flex-start; gap: 20px; padding: 20px; }

.side-panel {
    width: 200px;
    min-height: 400px;
    background: white;
    border: 1px solid #e2e6ea;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.06);
    flex-shrink: 0;
    padding: 16px;
}

.side-panel-title {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 2px solid #2c3e50;
    color: #2c3e50;
    font-size: 15px;
    text-align: center;
}

.side-panel-links { list-style: none; margin: 0; padding: 0; }
.side-panel-links li { margin-bottom: 8px; }
.side-panel-links a {
    display: block;
    padding: 8px 10px;
    color: #2980b9;
    text-decoration: none;
    font-size: 13.5px;
    border-radius: 5px;
    background: #f4f7f6;
    transition: background 0.15s;
}
.side-panel-links a:hover { background: #e8f1f8; }

@media (max-width: 1200px) {
    .side-panel { display: none !important; }
}

.req-star { color: #c0392b; }
.required-legend { text-align: center; color: #666; font-size: 13px; margin: 4px 0 12px; }
.invalid-field { border-color: #c0392b !important; background-color: #fdecea !important; }
.village-hint { font-size: 11px; color: #777; margin-bottom: 4px; }
input[type="date"] { background: white; cursor: pointer; }

/* --- શરતો અને નિયમો પોપઅપ --- */
.tnc-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}

.tnc-box {
    background: white;
    max-width: 560px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 4px 25px rgba(0,0,0,0.3);
}

.tnc-text { text-align: justify; font-size: 14px; line-height: 1.5; margin: 10px 0 15px; }
.tnc-text p { margin: 0 0 10px; }

.tnc-checkbox-label { display: flex; align-items: flex-start; gap: 8px; font-weight: bold; margin-bottom: 15px; cursor: pointer; }
.tnc-checkbox-label input[type="checkbox"] { width: auto; margin-top: 3px; }
.tnc-actions { display: flex; gap: 10px; justify-content: flex-end; }
.tnc-actions button { flex: none; margin-top: 0; width: auto; }

.site-footer { text-align: center; margin-top: 25px; padding-top: 15px; border-top: 1px solid #eee; font-size: 13px; color: #888; }
.site-footer a { color: #2980b9; text-decoration: none; font-weight: bold; }
.site-footer a:hover { text-decoration: underline; }

@media print { .tnc-overlay { display: none !important; } }

.applicant-photo-box { width: 1in; height: 1.2in; border: 1px solid black; display: flex; align-items: center; justify-content: center; font-size: 9pt; font-weight: bold; color: #555; background: #fff; flex-shrink: 0; }
.place-blank { display: inline-block; min-width: 220px; font-weight: normal; }
.sign-place-date-stack { margin-top: 30px; font-weight: bold; font-size: 11pt; line-height: 3; }
.doc-photo-sign-row { display: flex; align-items: flex-end; justify-content: flex-start; gap: 20px; margin-top: 25px; flex-wrap: wrap; }

.page1-sign-block, .photo-sign-wrapper, .selfdecl-sign-row, .selfdecl-sign-name, .affidavit-sign-caption, .affidavit-sign-block, .affidavit-identify-line, .sign-place-date-stack, .doc-photo-sign-row, .flex-space, .panch-table tr, .header-text {
    page-break-inside: avoid; break-inside: avoid;
}
.header-text { page-break-after: avoid; break-after: avoid; }

@media print { p, .p-text { orphans: 3; widows: 3; } }

.doc-sign-col { text-align: right; font-weight: bold; line-height: 3; font-size: 11pt; min-width: 240px; }
.selfdecl-sign-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 25px; font-weight: bold; font-size: 11pt; flex-wrap: wrap; gap: 20px; }
.selfdecl-sign-name { text-align: right; font-weight: bold; font-size: 11pt; margin-top: 4px; }
.affidavit-sign-caption { text-align: right; font-weight: bold; font-size: 11pt; line-height: 4; margin-top:22px;}
.va-identify-spacer { margin-top: 6px; }
.spacer-top { margin-top: 50px; }

/* 🧾 મિલકત/જમીની વિગત ટેબલ — ખાતા નં./ગામ કોલમ (rowspan merged) મધ્યમાં/જાડા
   અક્ષરે, હેડરની પેટા-હરોળ (નવો/જૂનો) પણ મધ્યમાં, અને કોષોનું padding
   panch-table કરતાં ઓછું રાખ્યું જેથી આખું સોગંદનામુ એક પાનાં પર ફિટ થાય */
.milkat-print-table { margin: 8px 0 !important; }
.milkat-print-table th, .milkat-print-table td { text-align: center; padding: 5px 6px !important; }
.milkat-print-table td.mk-merge-cell { vertical-align: middle; font-weight: bold; }
.milkat-label-text { text-align: center; }
.doc-place-date-row .place-blank { border-bottom: none !important; }

/* 📱 મોબાઇલ માટે રિસ્પોન્સિવ લેઆઉટ */
@media screen and (max-width: 768px) {
    body {
        margin: 0;
        background-color: #ffffff;
        overflow-x: hidden;
    }

    .page-wrapper {
        padding: 10px;
    }

    .container {
        padding: 15px;
        width: 100% !important;
    }

    .row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        margin-bottom: 15px !important;
    }

    .row > div {
        flex: none !important;
        width: 100% !important;
    }

    input, select {
        padding: 10px !important;
        font-size: 16px !important; /* iOS Safari 16px+ pe select/input focus par page zoom karto nathi */
    }

    .site-brand {
        padding: 10px;
        margin-bottom: 15px;
    }

    .site-brand h1 {
        font-size: 18px;
    }

    .tnc-box {
        padding: 15px;
        max-height: 90vh;
    }

    .tnc-actions {
        flex-direction: column;
        gap: 8px;
    }

    .tnc-actions button {
        width: 100% !important;
    }

    .btn-primary {
        padding: 14px;
        font-size: 16px;
    }
}

@media print {
    .page1-sign-block {
        page-break-inside: avoid; /* પ્રિન્ટ કરતી વખતે આ બ્લોક વચ્ચેથી તૂટશે નહીં */
        break-inside: avoid;
        position: relative;
        bottom: 0;                /* પેજના તળિયે જાળવી રાખવા માટે */
        margin-top: 0px;         /* ઉપરના ફેમિલી ટ્રીથી થોડી જગ્યા રાખવા */
    }
}

/* સ્ક્રીન અને પ્રિન્ટ બંને માટે બેઝિક લેઆઉટ */
.page1-sign-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    margin-top: 0px;
}




/* નવી લાઈન તોડવા માટેનો સ્પેશિયલ ક્લાસ */
.custom-line-break {
    display: block !important;
    margin-top: 50px !important; /* આનાથી અંદાજે ૪ લાઈન જેટલી જગ્યા છૂટશે */
    content: "";
}

/* નવી લાઈન તોડવા માટેનો સ્પેશિયલ ક્લાસ */
.custom-line-break2 {
    display: block !important;
    margin-top: 30px !important; /* આનાથી અંદાજે 1 લાઈન જેટલી જગ્યા છૂટશે */
    content: "";
}


@media print {
    .page1-sign-block {
        page-break-inside: avoid; /* પ્રિન્ટ કરતી વખતે આ બ્લોક વચ્ચેથી તૂટશે નહીં */
        break-inside: avoid;
        position: relative;
        bottom: 0;                /* પેજના તળિયે જાળવી રાખવા માટે */
        margin-top: 15px;         /* ઉપરના ફેમિલી ટ્રીથી થોડી જગ્યા રાખવા */
    }
}

/* સ્ક્રીન અને પ્રિન્ટ બંને માટે બેઝિક લેઆઉટ */
.page1-sign-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    margin-top: 20px;
}

@media print {
    .page1-sign-block {
        page-break-inside: avoid; /* પ્રિન્ટ કરતી વખતે આ બ્લોક વચ્ચેથી તૂટશે નહીં */
        break-inside: avoid;
        position: relative;
        bottom: 0;                /* પેજના તળિયે જાળવી રાખવા માટે */
        margin-top: 15px;         /* ઉપરના ફેમિલી ટ્રીથી થોડી જગ્યા રાખવા */
    }
}

/* સ્ક્રીન અને પ્રિન્ટ બંને માટે બેઝિક લેઆઉટ */
.page1-sign-block {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    margin-top: 20px;
}



/* =========================================================================
   🧩 ફોર્મ સેક્શન — બધા એક જ પેજ પર, પણ દરેક દેખાવે અલગ "કાર્ડ" જેવું
   ક્રમ: હેતુ → સ્થળ → અરજદાર → ગુજરનાર → વારસદારોનું વૃક્ષ →
         (જાતિ, ફક્ત "જાતિ સોગંદનામુ" હેતુ પસંદ કરો ત્યારે જ) → જનરેટ
   section-nav.js ટોચે નાનું જમ્પ-મેનૂ બનાવે છે અને સ્ક્રોલ કરતી વખતે
   વર્તમાન સેક્શનને હાઇલાઇટ કરે છે — પણ કોઈ સેક્શન છુપાવતું નથી.
   ========================================================================= */
.form-section {
    background: #fff;
    border: 1px solid #e2e6ea;
    border-left: 4px solid #2c3e50;
    border-radius: 8px;
    padding: 16px 18px 18px;
    box-shadow: 0 0 6px rgba(0,0,0,0.05);
    margin-bottom: 20px;
    scroll-margin-top: 90px; /* સ્ટીકી નેવ નીચે જમ્પ કરે ત્યારે ટાઈટલ ઢંકાય નહીં */
}
.form-section .section-title { margin-top: 0; }
.form-section.section-caste { border-left-color: #16a085; }
.form-section.section-milkat { border-left-color: #8e44ad; }

/* ---------- મિલકત/જમીની વિગત — હરોળ (add/remove) ---------- */
/* 🆕 ખાતા-પ્રમાણે ટેબલ-જૂથ — દરેક ખાતા નં. માટે એક કાર્ડ, જેમાં ખાતા નં.
   એક જ વાર (ટોચ પર) અને નીચે તેની સર્વે-નંબરની હરોળો */
.milkat-table-block { background: #f4f0f9; border: 1px solid #8e44ad; padding: 15px; margin-bottom: 16px; border-radius: 8px; }
.milkat-table-header-row { display: flex; align-items: flex-end; gap: 15px; margin-bottom: 10px; }
.milkat-table-header-row > div { flex: 1; }
.milkat-rows { margin-top: 6px; }

.milkat-row { background: #fafafa; border: 1px solid #ddd; padding: 15px; margin-bottom: 10px; border-radius: 6px; position: relative; }
.milkat-row .row { margin-bottom: 0; }
.milkat-row .btn-danger { position: absolute; top: 8px; right: 8px; }
.form-section.section-generate { border-left-color: #27ae60; }

/* 📍 સરનામું (જિલ્લો/તાલુકો/ગામ) — અરજદાર સેક્શનની અંદર જ, હળવા divider સાથે અલગ દેખાય */
.address-subsection {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed #d5dbe0;
}
.subsection-title {
    margin: 0 0 10px;
    font-size: 13.5px;
    font-weight: bold;
    color: #5b6570;
    text-align: left;
    text-transform: none;
}

/* 📏 ટૂંકી કિંમતના ફિલ્ડ (ઉંમર, તારીખ, વર્ષ) — ડેસ્કટોપ પર આખી પહોળાઈ નહીં,
   મીડિયમ સાઈઝ (મોબાઇલ પર હજુ પણ 100% પહોળાઈ જ રહેશે, media query નીચે જુઓ) */
@media screen and (min-width: 769px) {
    #arajdarAge, #arajiDate, #maranDate, #ancestorYear {
        max-width: 220px;
    }
}

.section-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0 0 18px;
    padding: 10px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(0,0,0,0.08);
}

.section-nav-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    background: #eef1f4;
    color: #5b6570;
    font-size: 12.5px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.section-nav-item:hover { background: #e2e8ed; }
.section-nav-item.active { background: #2c3e50; color: #fff; }

.section-nav-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0,0,0,0.08);
    font-size: 11px;
}
.section-nav-item.active .section-nav-num { background: rgba(255,255,255,0.25); }

@media screen and (max-width: 768px) {
    .section-nav-label { display: none; }
    .section-nav-item { padding: 7px 10px; }
    .section-nav { top: 0; }
}

/* ટ્રી માટેનું અલગ કન્ટેનર */
.tree-container {
    width: 100%;
    /* તમારે જેટલી જગ્યા ફાળવવી હોય તેટલી height આપો (ઉદા. 220px અથવા 250px) */
    min-height: 220px; 
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    /* જો ટ્રી કન્ટેનરથી મોટું થાય તો પણ જગ્યા ફિક્સ જ રહેશે */
    page-break-inside: avoid;
}

.tree-svg-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tree-svg-wrapper svg {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
}