/* Load after the site's theme styles. All rules are scoped to this form.
   Block layout is the fallback. Flexbox uses margins instead of flex-gap. */
.natal-form, .natal-form * { box-sizing: border-box; }
.natal-form {
    width: 100%; max-width: 720px; margin: 24px auto; padding: 0;
    /* Изменение: рамка перенесена на fieldset, чтобы legend располагался на её верхнем крае. */
    border: 0; background: transparent; box-shadow: none;
    font: 16px/1.5 Arial, Helvetica, sans-serif;
    text-align: left; overflow-wrap: break-word;
    -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%;
}
.natal-form .nf-fieldset {
    min-width: 0; width: 100%; margin: 0; padding: 28px;
    border: 1px solid #dce4ea; border-radius: 16px;
    background: rgba(238, 238, 238, 0.9);
    box-shadow: 0 8px 32px rgba(31, 55, 75, .07);
}
.natal-form .nf-title {
    display: block; float: none; width: auto; max-width: 100%; margin: 0; padding: 0 8px;
    color: #203d51; font: bold 16px/1.25 Arial, Helvetica, sans-serif; padding-bottom: 25px;
    white-space: normal;
}
.natal-form .nf-intro { margin: 0 0 28px; color: #596b79; font-size: 15px; line-height: 1.5; }
.natal-form .nf-row { display: block; margin: 0 0 20px; }
.natal-form .nf-label { display: block; margin: 0 0 8px; font-size: 15px;  }
.natal-form .nf-control { min-width: 0; width: 100%; }
.natal-form input[type="text"], .natal-form select {
    display: block; width: 100%; max-width: 100%; min-width: 0;
    min-height: 40px; height: auto; margin: 0; padding: 10px 12px;
    border: 1px solid #aebdca; border-radius: 8px;
    background: #fff; color: #203442; box-shadow: none;
    font: normal 16px/1.4 Arial, Helvetica, sans-serif;
    -webkit-text-fill-color: #203442; opacity: 1;
}
/* Keep the native select arrow and platform picker. */
.natal-form select { padding-right: 4px; }
.natal-form .nf-parts { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -5px; }
.natal-form .nf-part { -webkit-flex: 1 1 80px; -ms-flex: 1 1 80px; flex: 1 1 80px; min-width: 0; margin: 5px; }
.natal-form .nf-month { -webkit-flex-basis: 130px; -ms-flex-preferred-size: 130px; flex-basis: 130px; }
/* Shared typography for field captions and city help text. */
.natal-form .nf-part label,
.natal-form .nf-city-search label,
.natal-form .nf-city-search .nf-field-hint,
.natal-form .nf-display-block .nf-display-hint {
    display: block; margin: 0 0 6px; color: #596b79;
    font: normal 12px/1.5 Arial, Helvetica, sans-serif;
    letter-spacing: normal; text-transform: none;
}
.natal-form .nf-city-search .nf-field-hint { margin: 8px 0 0; }
.natal-form button {
    min-height: 46px; height: auto; max-width: 100%; margin: 0; padding: 12px 16px;
    border: 1px solid transparent; border-radius: 8px; cursor: pointer;
    font: bold 14px/1.4 Arial, Helvetica, sans-serif;
    text-transform: none; text-shadow: none; white-space: normal;
    box-shadow: none; background-image: none; filter: none;
    -webkit-appearance: none; appearance: none;
}
.natal-form .nf-settings-toggle {
    display: block; width: 100%; background: #f1f6f9; color: #305c78; text-align: left;
    border-color: #dce6ed;
}
.natal-form .nf-settings-toggle:hover { background: #e7f0f6; }
.natal-form .nf-toggle-icon { display: inline-block; width: 20px; text-align: center; }
.natal-form .nf-settings-caption { display: block; margin-left: 24px; color: #596b79; font-size: 13px; font-weight: normal; }
.natal-form .nf-settings { margin-top: 20px; padding-top: 20px; border-top: 1px solid #e3eaf0; }
.natal-form .rzr9 { display: block; }
.natal-form .nf-check-row { margin: 0 0 8px; }
.natal-form .nf-check { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; min-height: 36px; cursor: pointer; }
.natal-form input[type="checkbox"] { -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 15px; height: 15px; margin: 0 10px 0 0; padding: 0; }
.natal-form .nf-help { display: inline-block; padding: 10px 0; margin-left: 30px; color: #24628c; text-decoration: underline; font-size: 14px; }
.natal-form .nf-actions { margin-top: 24px; margin-bottom: 26px; }
.natal-form .natal_button { width: 100%; background: #616161; color: #fff; }
.natal-form .natal_button:hover { background: #403c3c; color: #fff; }
.natal-form input:focus, .natal-form select:focus, .natal-form button:focus, .natal-form a:focus { outline: 3px solid #387fae; outline-offset: 3px; }
.natal-form [hidden] { display: none !important; }
@media (min-width: 600px) {
    .natal-form .nf-row { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; -ms-flex-align: center; align-items: center; }
    .natal-form .nf-label { -webkit-flex: 0 0 145px; -ms-flex: 0 0 145px; flex: 0 0 145px; margin: 0; padding: 10px 16px 10px 0; }
    .natal-form .nf-control { -webkit-flex: 1 1 260px; -ms-flex: 1 1 260px; flex: 1 1 260px; }
}
@media (max-width: 599px) {
    .natal-form { margin: 12px auto; padding: 0; }
    .natal-form .nf-fieldset { padding: 20px 16px; border-radius: 12px; }
    .natal-form .nf-title { font-size: 14px; padding-bottom: 25px; }
}
@media (forced-colors: active) {
    .natal-form button { border: 1px solid ButtonText; }
}

/* Location and coordinates: retain the IDs used by fetch_data_maps.js. */
.natal-form .nf-city-selects {
    display: -webkit-flex; display: -ms-flexbox; display: flex;
    -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
    margin: -5px -5px 10px;
}
.natal-form .nf-city-selects select {
    -webkit-flex: 1 1 140px; -ms-flex: 1 1 140px; flex: 1 1 140px;
    width: auto; min-width: 0; max-width: 100%; margin: 5px;
}
.natal-form .nf-city-search { font: inherit; }
.natal-form .nf-map-button {
    display: inline-block; position: static; visibility: visible; opacity: 1;
    margin-top: 12px; background: #f1f6f9; border-color: #aebdca; color: #305c78;
}
.natal-form .nf-map-button:hover { background: #e7f0f6; }
.natal-form .nf-coordinate-block { margin-bottom: 20px; }
.natal-form .nf-map-container { width: 100%; min-width: 0; margin: 12px 0 20px; }
.natal-form .nf-map { width: 100%; max-width: 100%; height: 360px; border: 1px solid #aebdca; border-radius: 8px; }
.natal-form .nf-map-actions { text-align: right; }
.natal-form .leaflet-coords-box {
    max-width: 230px; padding: 6px 8px; background: #fff; color: #263746;
    border: 1px solid #aebdca; border-radius: 4px; font: 12px/1.5 Arial, Helvetica, sans-serif;
}
.natal-form input.colorcity, .natal-form select.colorcity { color: #24751b; -webkit-text-fill-color: #24751b; }
/* jQuery UI's menu lives under body; scope with a dedicated class. */
.nf-city-autocomplete.ui-autocomplete {
    box-sizing: border-box; max-width: calc(100vw - 24px); max-height: 240px;
    overflow-x: hidden; overflow-y: auto; padding: 4px; border: 1px solid #aebdca;
    border-radius: 8px; background: #fff; color: #203442;
    font: 16px/1.4 Arial, Helvetica, sans-serif; z-index: 1100;
}
.nf-city-autocomplete .ui-menu-item a { display: block; min-height: 44px; padding: 10px; white-space: normal; overflow-wrap: break-word; }
.nf-city-autocomplete .ui-state-hover, .nf-city-autocomplete .ui-state-active { background: #e7f0f6; border-color: #aebdca; color: #203442; }
@media (max-width: 599px) {
    .natal-form .nf-map { height: 300px; }
    .natal-form .nf-map-button { width: 100%; }
    .natal-form .leaflet-coords-box { max-width: 180px; }
}


/* A simple vertical flow on phones avoids native-select flex sizing differences.
   Margins still work when jQuery toggles each select with show()/hide(). */
@media (max-width: 599px) {
    .natal-form .nf-city-selects { display: block; margin: 0; }
    .natal-form .nf-city-selects select {
        width: 100%; max-width: 100%; margin: 0 0 12px;
    }
}
.natal-form .nf-map-open-actions { text-align: right; }
.natal-form #open-map-btn { display: inline-block; width: auto; min-height: 46px; margin-left: 0; margin-right: 0; }
/* Optional separators: add nf-dividers to the form; remove it to disable. */
.natal-form.nf-dividers .nf-fieldset > .nf-row ~ .nf-row,
.natal-form.nf-dividers .nf-fieldset > .nf-coordinate-block {
    border-top: 1px solid #c8d2da; padding-top: 20px;
}
.natal-form.nf-dividers .nf-settings > .nf-row ~ .nf-row,
.natal-form.nf-dividers .nf-settings > .nf-row ~ .nf-check-row {
    border-top: 1px solid #c8d2da; padding-top: 16px;
}

/* The legacy script writes Search into value; give only that state a muted color. */
.natal-form input.nf-city-input.nf-city-search-value {
    color: #7b8792; -webkit-text-fill-color: #7b8792;
}

.natal-form .nf-unknown-time {
    display: -webkit-flex; display: -ms-flexbox; display: flex;
    -webkit-align-items: center; -ms-flex-align: center; align-items: center;
    min-height: 36px; margin-top: 6px; font: normal 13px/1.5 Arial, Helvetica, sans-serif;
    color: #596b79; cursor: pointer;
}
.natal-form .nf-unknown-time input { width: 16px; height: 16px; margin-right: 7px; }
.natal-form .nf-aspects-block, .natal-form .nf-planet-block { margin-bottom: 20px; }
.natal-form .nf-aspect-modes > label, .natal-form .nf-aspect-check {
    display: -webkit-flex; display: -ms-flexbox; display: flex;
    -webkit-align-items: center; -ms-flex-align: center; align-items: center;
    min-height: 36px; cursor: pointer; font: normal 13px/1.5 Arial, Helvetica, sans-serif;
}
.natal-form .nf-aspect-modes input[type="radio"] { width: 16px; height: 16px; margin: 0 10px 0 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; }
.natal-form .nf-custom-aspects { min-width: 0; margin: 12px 0 0; padding: 12px; border: 1px solid #c8d2da; border-radius: 8px; }
.natal-form .nf-custom-aspects legend { padding: 0 6px; font-size: 13px; }
/* Подблоки мажорных и минорных аспектов внутри «Своих аспектов». */
.natal-form .nf-aspect-group { min-width: 0; margin: 0; padding: 12px 0 0; border: 0; }
.natal-form .nf-aspect-group + .nf-aspect-group { margin-top: 16px; border-top: 1px solid #c8d2da; }
.natal-form .nf-aspect-row { display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 0 -4px 8px; }
.natal-form .nf-aspect-row:last-child { margin-bottom: 0; }
.natal-form .nf-aspect-check { -webkit-flex: 1 1 160px; -ms-flex: 1 1 160px; flex: 1 1 120px; min-width: 0; margin: 0 4px; }
.natal-form .nf-aspect-orb { -webkit-flex: 0 1 120px; -ms-flex: 0 1 120px; flex: 0 1 120px; min-width: 0; margin: 0 4px; }
.natal-form .nf-aspect-orb select { font-size: 13px; }
.natal-form .nf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.natal-form.nf-dividers .nf-aspects-block, .natal-form.nf-dividers .nf-planet-block { border-top: 1px solid #c8d2da; padding-top: 16px; }

.natal-form .nf-display-block { min-width: 0; margin: 0 0 20px; padding: 0; border: 0; }
.natal-form .nf-display-block legend { padding: 0; margin-bottom: 8px; font: 15px/1.5 Arial, Helvetica, sans-serif; }
.natal-form .nf-settings .nf-display-block .nf-check,
.natal-form .nf-settings .nf-display-block .nf-check > span,
.natal-form .nf-settings .nf-aspect-modes > label,
.natal-form .nf-settings .nf-aspect-modes > label > span {
    font: normal 13px/1.5 Arial, Helvetica, sans-serif;
}
.natal-form .nf-settings .nf-rulers select,
.natal-form .nf-settings .nf-rulers select option { font-size: 12px; }
.natal-form .nf-dispositors-row {
    display: -webkit-flex; display: -ms-flexbox; display: flex;
    -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
    -webkit-align-items: center; -ms-flex-align: center; align-items: center;
    margin: 4px -4px;
}
.natal-form .nf-dispositors-row > .nf-check { -webkit-flex: 0 1 145px; -ms-flex: 0 1 145px; flex: 0 1 145px; margin: 4px; }
.natal-form .nf-rulers { -webkit-flex: 1 1 300px; -ms-flex: 1 1 300px; flex: 1 1 300px; min-width: 0; margin: 4px; }
.natal-form .nf-display-block .nf-display-hint { margin: 0 0 10px; }
/* Изменение: подблок видимости точек использует общую flex-строку флажков. */
.natal-form .nf-point-display { min-width: 0; margin: 14px 0 0; padding: 12px 0 0; border: 0; border-top: 1px solid #c8d2da; }
/* Изменение: плюс/минус в квадратике для сворачиваемого подблока. */
/* Изменение: одинаковое оформление заголовков обоих сворачиваемых блоков. */
.natal-form .nf-settings details.nf-display-block > summary,
.natal-form .nf-settings details.nf-point-display > summary {
    display: flex; align-items: center; min-height: 36px;
    cursor: pointer; list-style: none; color: #305c78;
    font: bold 13px/1.5 Arial, Helvetica, sans-serif;
}
.natal-form .nf-display-block > summary::-webkit-details-marker,
.natal-form .nf-point-display > summary::-webkit-details-marker { display: none; }
/* Изменение: подавляем стандартный маркер также в браузерах с ::marker. */
.natal-form .nf-settings details.nf-display-block > summary::marker,
.natal-form .nf-settings details.nf-point-display > summary::marker { content: ''; font-size: 0; }
.natal-form .nf-point-toggle-icon {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 20px; width: 20px; height: 20px; margin-right: 10px;
    border: 1px solid #aebdca; border-radius: 4px; background: #f1f6f9;
    font: bold 18px/1 Arial, Helvetica, sans-serif;
}
/* Отступ под заголовком только у открытого блока. */
.natal-form .nf-settings details.nf-display-block[open] > summary,
.natal-form .nf-settings details.nf-point-display[open] > summary { margin-bottom: 10px; }
.natal-form .nf-point-toggle-icon::before { content: '+'; }
/* Изменение: прямые дочерние элементы — вложенный блок сохраняет свой плюс/минус. */
.natal-form .nf-display-block[open] > summary > .nf-point-toggle-icon::before,
.natal-form .nf-point-display[open] > summary > .nf-point-toggle-icon::before { content: '−'; }
.natal-form .nf-display-block > summary:focus-visible,
.natal-form .nf-point-display > summary:focus-visible { outline: 3px solid #387fae; outline-offset: 3px; }
.natal-form .nf-point-display[open] > .nf-display-options { margin-top: 8px; }
/* Изменение: Lilith и Lunar Nodes — отдельные строки, Mean/True справа. */
.natal-form .nf-point-mode-row {
    display: flex; flex-direction: row; flex-wrap: wrap; align-items: center;
    flex: 0 0 100%; width: 100%; min-width: 0; margin: 0; padding: 0 10px;
}
/* Изменение: размеры label из темы не должны раздвигать строки Mean/True. */
.natal-form .nf-settings .nf-point-mode-row > .nf-check { flex: 0 1 121px; width: 145px; min-width: 0; margin: 0; padding: 0; }
.natal-form .nf-point-modes { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; min-width: 0; }
.natal-form .nf-settings .nf-point-modes > label {
    display: inline-flex; flex: 0 0 auto; width: auto; align-items: center; min-height: 36px; margin: 0 14px 0 0; padding: 0;
    cursor: pointer; font: normal 12px/1.5 Arial, Helvetica, sans-serif;
}
.natal-form .nf-point-modes input[type="radio"] { flex: 0 0 auto; width: 15px; height: 15px; margin: 0 6px 0 0; }
/* === Orb format: отдельные стили подписи и радиокнопок === */
.natal-form .nf-settings .nf-orb-format {
    display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center;
    min-width: 0; margin-top: 12px;
    font: normal 13px/1.5 Arial, Helvetica, sans-serif;
}
.natal-form .nf-settings .nf-orb-format > .nf-orb-format-title {
    display: inline; flex: 0 0 auto; width: auto; margin: 0 10px 0 0;
    font: normal 13px/1.5 Arial, Helvetica, sans-serif;
}
.natal-form .nf-settings .nf-orb-format-options {
    display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; min-width: 0;
}
.natal-form .nf-settings .nf-orb-format-options > label {
    display: inline-flex; flex: 0 1 auto; align-items: center; width: auto; min-width: 0;
    min-height: 36px; margin: 0 10px 0 0; padding: 0; cursor: pointer;
    font: normal 13px/1.5 Arial, Helvetica, sans-serif;
}
.natal-form .nf-settings .nf-orb-format-options > label:last-child { margin-right: 0; }
.natal-form .nf-settings .nf-orb-format-options input[type="radio"] {
    flex: 0 0 15px; width: 15px; height: 15px; margin: 0 5px 0 0;
}
/* === Конец стилей Orb format === */
/* Изменение: на телефоне оставляем Mean/True справа, не выталкивая их за границы. */
@media (max-width: 399px) {
    .natal-form .nf-settings .nf-point-mode-row { flex-wrap: nowrap; }
    .natal-form .nf-settings .nf-point-mode-row > .nf-check {
        flex: 1 1 0; width: auto; padding-right: 8px; overflow-wrap: break-word;
    }
    .natal-form .nf-point-mode-row .nf-point-modes { flex: 0 0 auto; flex-wrap: nowrap; }
    .natal-form .nf-settings .nf-point-modes > label { margin-right: 8px; }
    .natal-form .nf-settings .nf-point-modes > label:last-child { margin-right: 0; }
}
/* Изменение: четыре флажка отображения идут в строку, пока хватает места. */
.natal-form .nf-settings .nf-display-block .nf-display-options {
    display: -webkit-flex; display: -ms-flexbox; display: flex;
    -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;
    -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
    margin: 0 -10px;
}
.natal-form .nf-settings .nf-display-block .nf-display-options > .nf-check {
    -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto;
    /* Изменение: не даём общим стилям label растягивать каждый флажок на всю строку. */
    width: auto;
    min-width: 0; max-width: calc(100% - 20px); margin: 0 10px;
}
.natal-form.nf-dividers .nf-display-block { border-top: 1px solid #c8d2da; padding-top: 16px; }

.natal-form .nf-planet-subtitle {
    margin: 16px 0 12px; padding-top: 16px; border-top: 1px solid #c8d2da;
    font: bold 14px/1.5 Arial, Helvetica, sans-serif; color: #263746;
}

/* Shared toolbar, outside the design-specific fieldset. */
.design-toolbar { display: flex; justify-content: flex-end; margin: 0 0 12px; }
.design-toolbar .design-switch { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font: normal 13px/1.5 Arial, Helvetica, sans-serif; color: #596b79; }
.design-toolbar .design-switch input.design-toggle { width: 18px; height: 18px; margin: 0 0 0 8px; cursor: pointer; }
.design-toolbar .design-toggle:focus { outline: 2px solid #387fae; outline-offset: 3px; }
.legacy-form { max-width: 720px; margin: 24px auto; padding: 12px; }
.legacy-form fieldset { min-width: 0; }