/* Shared calculator styles, scoped to .Calculator_Content. Calculator-specific styles go in each PHP template. */

/* Base */
.Calculator_Content {padding: 80px 20px; background: #f8f8f8; color: #090A0C;}
.Calculator_Content *, .Calculator_Content *::before, .Calculator_Content *::after {box-sizing: border-box;}
.Calculator_Content [hidden] {display: none !important;}
.Calculator_Content :where(p, h1, h2, h3, h4, ul, dl, dd) {margin: 0; padding: 0;}
.Calculator_Content ul {list-style: none;}

.Calculator {display: flex; max-width: 1120px; margin: 0 auto; background: #F9F9F9; border-radius: 20px; box-shadow: 0 2px 6px 0 rgba(27, 30, 46, 0.10); overflow: hidden;}


/* Left nav */
.Calculator_nav {width: 100%; max-width: 200px; padding-top: 40px; border-right: 1px solid #eef0f4; border-radius: 20px 0 0 20px; background: #fff; box-shadow: 5px 0 5px 0 rgba(0, 0, 0, 0.05);}
.Calculator_nav_link {display: flex; align-items: center; justify-content: space-between; min-height: 43px; padding: 11.3px 12px 11.3px 8px; border-left: 3px solid transparent; font-size: 14px; font-weight: 600; color: #282D34; text-decoration: none; transition: background-color .15s;}
.Calculator_nav_link:hover {background: #f5f8ff; color: #090A0C; text-decoration: none;}
.Calculator_nav_link.active {padding-left: 12px; border-left-color: #00F0FF; background: rgba(46, 248, 255, 0.05); color: #0A36C7;}


/* Main: header */
.Calculator_main {width: 100%; max-width: 480px; padding: 40px; background: #fff; box-shadow: 5px 0 5px 0 rgba(0, 0, 0, 0.05) inset;}
.Calculator_eyebrow {font-size: 20px; font-weight: 600; line-height: 1.2; color: #0A36C7;}
.Calculator_subtitle {display: none;}
.Calculator_title {margin-top: 3px; font-size: 50px; font-weight: 700; line-height: 1.08; letter-spacing: -1px; color: #000;}
.Calculator_desc {max-width: 420px; margin-top: 1px; font-size: 16px; line-height: 1.5; color: #292E38;}

.Calculator_switcher {display: none; position: relative; width: 100%;}
.Calculator_switcher_trigger {display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 40px; padding: 0 14px; border: 1px solid #3b414d; border-radius: 8px; background: transparent; font: inherit; font-size: 15px; font-weight: 600; color: #090A0C; text-align: left; cursor: pointer; transition: border-color .15s, background-color .15s;}
.Calculator_switcher_trigger::after {content: ""; flex: none; width: 8px; height: 8px; margin: -4px 2px 0 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s, margin .2s;}
.Calculator_switcher_trigger:hover {border-color: #0A36C7; background: #f5f8ff;}
.Calculator_switcher_trigger:focus-visible {outline: none; box-shadow: 0 0 0 3px rgba(10, 53, 200, .22);}
.Calculator_switcher.open .Calculator_switcher_trigger {border-color: #0A36C7; border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
.Calculator_switcher.open .Calculator_switcher_trigger::after {margin-top: 4px; transform: rotate(225deg);}
.Calculator_switcher_list {display: none; position: absolute; z-index: 30; top: 100%; left: 0; right: 0; margin-top: -1px; padding: 6px; border: 1px solid #0A36C7; border-radius: 0 0 8px 8px; background: #fff;}
.Calculator_switcher.open .Calculator_switcher_list {display: block;}
.Calculator_switcher_item {display: block; padding: 8px 10px; border-radius: 6px; font-size: 14px; line-height: 1.42; color: #282D34; text-decoration: none; transition: background-color .15s, color .15s;}
.Calculator_switcher_item:hover {background: #E8F1FF; color: #0A36C7; text-decoration: none;}
.Calculator_switcher_item.active {background: #E8F1FF; font-weight: 700; color: #0A36C7;}


/* Main: form */
.Calculator_form {margin-top: 51px;}
.Calculator_row {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;}
.Calculator_field {min-width: 0; margin-bottom: 20px;}
.Calculator_label {display: block; margin-bottom: 7px; font-size: 12px; font-weight: 400; line-height: 1.33; color: #090A0C;}
.Calculator_label.error {color: #ED3C60;}

.Calculator_control {display: flex; align-items: center; height: 45px; padding: 0 13px; background: transparent; border: 1px solid rgba(0, 0, 0, 0.60); border-radius: 8px; transition: border-color .15s, box-shadow .15s;}
.Calculator_control:focus-within {border-color: #0A36C7;}
.Calculator_control.error {border-color: #ED3C60; box-shadow: none; color: #ED3C60;}
.Calculator_control.error:focus-within {box-shadow: 0 0 0 3px rgba(208, 16, 58, .18);}
.Calculator_input {flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: 0; background: transparent; font: inherit; font-size: 14px; color: #090A0C; text-overflow: ellipsis; outline: none; box-shadow: none;}
.Calculator_input::placeholder {color: #2b303b; opacity: 1;}
.Calculator_unit {flex: none; margin-left: 7px; font-size: 14px; color: #2b303b;}

.Calculator_error {display: none; margin-top: 8px; font-size: 14px; line-height: 1.35; color: #ED3C60;}
.Calculator_error.visible {display: block;}

.Calculator_btn {display: block; width: 100%; height: 52px; border: 0; border-radius: 8px; font-size: 22px; font-weight: 600; line-height: 1.27; cursor: pointer; transition: background-color .15s;}
.Calculator_btn_primary {background: #0A36C7; color: #fff;}
.Calculator_btn_primary:hover {background: #082aa3;}
.Calculator_btn_primary.disabled, .Calculator_btn_primary.disabled:hover {background: #0A36C7; opacity: 0.45; cursor: not-allowed;}
.Calculator_reset {display: flex; align-items: baseline; gap: 8px; margin: 18px 0 0 auto; border: 0; background: none; opacity: 0.8; font-size: 14px; font-weight: 600; line-height: 1.42; color: #0A36C7; cursor: pointer;}
.Calculator_reset:hover {color: #082aa3;}


/* Main: Asset Class / Instrument dropdown */
.Calculator_Content .calc_dropdown {position: relative; width: 100%;}
.Calculator_Content .calc_dropdown_trigger {display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 45px; padding: 0 13px; border: 1px solid rgba(0, 0, 0, 0.60); border-radius: 8px; background: transparent; box-shadow: none; font-size: 14px; font-weight: 700; color: #090A0C; cursor: pointer; user-select: none; transition: border-color .15s, box-shadow .15s;}
.Calculator_Content .calc_dropdown_trigger:hover {border-color: #3b414d;}
.Calculator_Content .calc_dropdown_trigger.open {border-bottom-left-radius: 0; border-bottom-right-radius: 0;}
.Calculator_Content .calc_dropdown_trigger .trigger_text {flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.Calculator_Content .calc_dropdown_trigger .trigger_text.placeholder {color: #090A0C;}
.Calculator_Content .calc_dropdown_trigger .trigger_arrow {flex: none; width: 8px; height: 8px; margin: -4px 6px 0 0; border: 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s;}
.Calculator_Content .calc_dropdown_trigger.open .trigger_arrow {margin-top: 4px; transform: rotate(225deg);}

.Calculator_Content .calc_dropdown_panel {display: none; position: absolute; z-index: 30; top: 98%; left: 0; right: 0; min-width: 100%; max-height: none; padding: 10px; border: 1px solid rgba(0, 0, 0, 0.60); border-radius: 8px; border-top-left-radius: 0; border-top-right-radius: 0; background: #fff; box-shadow: none; overflow: hidden;}
.Calculator_Content .calc_dropdown_panel.open {display: block;}
.Calculator_Content .calc_dropdown_search {display: block; width: 100%; height: 26px; padding: 4px; margin-bottom: 8px; border: 1px solid rgba(0, 0, 0, 0.60); border-radius: 4px; background: #F4F5F6; font-size: 12px; line-height: 1.33; color: #7A8699; outline: none;}
.Calculator_Content .calc_dropdown_search::placeholder {color: #8b92a3;}
.Calculator_Content .calc_dropdown_list {display: flex; flex-direction: column; align-items: stretch; gap: 2px; max-height: 194px; margin-right: 0; overflow-y: auto;}
.Calculator_Content .calc_dropdown_list::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, .6);}
.Calculator_Content .calc_dropdown_item {padding: 4px; border-radius: 4px; font-size: 14px; line-height: 1.42; color: #282D34;}
.Calculator_Content .calc_dropdown_item:hover {background: #E8F1FF; color: #0A36C7;}
.Calculator_Content .calc_dropdown_item.active {background: #E8F1FF; font-weight: 700; color: #0A36C7;}
.Calculator_Content .calc_dropdown_item.hidden {display: none;}
.Calculator_Content .calc_dropdown_empty {padding: 10px 0 0; font-size: 12px; line-height: 1; color: #5f6675;}


/* Right info panel */
.Calculator_aside {display: flex; width: 100%; max-width: 440px; min-width: 0; padding: 20px; border-radius: 0 20px 20px 0; background: #fff;}
.Calculator_panel {display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: 20px; border-radius: 18px; background: #E8F1FF;}
.Calculator_panel_eyebrow {margin-top: 47px; font-size: 14px; font-weight: 600; line-height: 1.42; color: #282D34;}
.Calculator_panel_title {margin-top: 9px; font-size: 28px; font-weight: 600; line-height: 1.28; color: #0a36c7;}
.Calculator_panel_text {margin-top: 45px; margin-bottom: 15px; font-size: 16px; line-height: 1.5; color: #5C667A;}

.Calculator_rows {display: flex; flex-direction: column; gap: 17px; margin: 0 0 24px; padding-top: 20px; border-top: 1px solid #BDD1F0;}
.Calculator_rows > div {display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 2px 0 0; font-size: 14px; line-height: 1.42;}
.Calculator_rows dt {color: #5C667A;}
.Calculator_rows dd {font-size: 14px; line-height: 1; text-align: right; color: #090A0C;}
.Calculator_rows dd.strong {font-weight: 700;}

.Calculator_result {display: flex; flex-direction: column; gap: 10px; margin-top: 102px;}
.Calculator_result_label {margin: 0; font-size: 14px; font-weight: 600; line-height: 1.42; color: #282D34;}
.Calculator_result_value {margin: 0; font-size: 64px; font-weight: 700; line-height: 1.12; color: #0A36C7; overflow-wrap: anywhere;}
.Calculator_result_value.sm {font-size: 44px;}
.Calculator_result_value.xs {font-size: 32px;}
.Calculator_result_sub {margin: 0; font-size: 16px; line-height: 1.5; color: #282D34;}

.Calculator_box {display: flex; align-items: center; gap: 16px; margin-top: auto; padding: 22px; border: 1px solid #e91545; border-radius: 8px; background: #edeffb; color: #e91545;}
.Calculator_box svg {flex: none;}
.Calculator_box_label {font-size: 14px; line-height: 1.3;}
.Calculator_box_value {margin-top: 4px; font-size: 28px; font-weight: 600; line-height: 1.12; white-space: nowrap;}

.Calculator_disclaimer {display: flex; align-items: flex-start; gap: 9px; margin-top: auto; padding-top: 26px; color: #7A8699;}
.Calculator_box:not([hidden]) + .Calculator_disclaimer {margin-top: 0;}
.Calculator_disclaimer svg {flex: none; margin-top: 1px;}
.Calculator_disclaimer h4 {font-size: 12px; font-weight: 500; line-height: 1.1; color: #7A8699;}
.Calculator_disclaimer p {margin-top: 2px; font-size: 10px; line-height: 1.4; color: #7A8699;}

/* Panel states (data-tone / data-mode set by JS) */
.Calculator_panel[data-tone="danger"] .Calculator_panel_title {color: #c20d3d;}
.Calculator_panel_title:empty {display: none;}
.Calculator_panel[data-mode="limit"] .Calculator_panel_text {margin-top: 30px; font-size: 18px; font-weight: 500; line-height: 1.35; color: #c20d3d;}
.Calculator_panel[data-mode="limit"] .Calculator_rows {margin-top: 19px; padding-top: 10px; border-top-color: #090A0C;}
.Calculator_panel[data-mode="result"] .Calculator_panel_eyebrow,
.Calculator_panel[data-mode="result"] .Calculator_panel_title,
.Calculator_panel[data-mode="result"] .Calculator_panel_text {display: none;}
.Calculator_panel[data-mode="result"][data-tone="danger"] .Calculator_result_value {color: #d0103a;}
.Calculator_panel[data-mode="result"] .Calculator_rows {gap: 20px; margin: 40px 0 0; padding-top: 20px; border-top-color: #282D34;}


/* Responsive */
@media (max-width: 1440px) {
    .Calculator_title {margin-top: 2px;font-size: 44px;}
}
@media (max-width: 1100px) {
    .Calculator {display: grid; grid-template-columns: 200px minmax(0, 1fr);}
    .Calculator_nav {grid-row: 1 / span 2;}
    .Calculator_main {max-width: 100%;}
    .Calculator_aside {grid-column: 2; max-width: 100%; padding: 0 28px 28px; box-shadow: 5px 0 5px 0 rgba(0, 0, 0, 0.05) inset;}
    .Calculator_title {font-size: 44px;}
}

@media (max-width: 768px) {
    .Calculator_Content {padding: 60px 20px;}
    .Calculator {display: block; border-radius: 0; background: transparent; box-shadow: none; overflow: visible;}
    .Calculator_nav {display: none;}

    .Calculator_main {padding: 0; background: none; box-shadow: none;}
    .Calculator_eyebrow {font-size: 36px; font-weight: 700; line-height: 1.22; text-align: center; color: #090A0C;}
    .Calculator_subtitle {display: block; margin-top: 12px; font-size: 14px; line-height: 1.42; text-align: center; color: #7A8699;}
    .Calculator_switcher {display: block; margin-top: 16px;}
    .Calculator_title {margin-top: 40px; font-size: 36px; line-height: 1.22; text-align: center;}
    .Calculator_desc {max-width: none; margin-top: 12px; font-size: 14px; line-height: 1.42; text-align: center; color: #7A8699;}

    .Calculator_form {margin-top: 12px;}
    .Calculator_row {gap: 24px;}
    .Calculator_row_stack {grid-template-columns: 1fr; gap: 0;}
    .Calculator_row_stack .Calculator_field {margin-bottom: 12px;}
    .Calculator_row_stack .Calculator_field:last-child {margin-bottom: 24px;}
    .Calculator_field {margin-bottom: 24px;}
    .Calculator_label {margin-bottom: 12px; font-size: 13px;}
    .Calculator_control, .Calculator_Content .calc_dropdown_trigger {height: 44px; border-radius: 8px; font-size: 15px;}
    .Calculator_btn {font-size: 20px;margin-top: -2px;}
    .Calculator_reset {align-items: center; gap: 6px; margin: 24px -2px 0 auto;}

    .Calculator_aside {margin-top: 24px; padding: 0;}
    .Calculator_panel {padding: 20px; border-radius: 8px;}
    .Calculator_panel_eyebrow {margin-top: 24px; font-size: 15px;}
    .Calculator_panel_title {margin-top: 12px; font-size: 24px;}
    .Calculator_panel_text {margin-top: 12px; font-size: 15px;}
    .Calculator_panel[data-mode="limit"] .Calculator_panel_text {margin-top: 20px; font-size: 16px;}
    .Calculator_rows {gap: 10px; margin: 20px 0;}
    .Calculator_rows > div {font-size: 15px;}
    .Calculator_result {margin-top: 46px;}
    .Calculator_result_value.sm {font-size: clamp(30px, 10.5vw, 44px);}
    .Calculator_result_value.xs {font-size: clamp(24px, 8vw, 32px);}
    .Calculator_panel[data-mode="result"] .Calculator_rows {gap: 0; margin-top: 40px; padding-top: 11px;}
    .Calculator_panel[data-mode="result"] .Calculator_rows > div {padding: 8px 0; font-size: 14px;}
    .Calculator_box {gap: 18px; padding: 20px 22px; border-radius: 12px;}
    .Calculator_box svg {width: 36px; height: 36px;}
    .Calculator_box_value {margin-top: 2px; font-size: 24px;}
    .Calculator_disclaimer {padding-top: 40px;}
    .Calculator_disclaimer h4 {font-size: 14px;}
    .Calculator_disclaimer p {font-size: 12px; line-height: 1.3;}
}

@media (max-width: 450px) {
    .Calculator_Content {padding: 68px 20px 40px;}
    .Calculator_subtitle, .Calculator_desc {margin-top: 8px;}
    .Calculator_form {margin-top: 9px;}
    .Calculator_field {margin-bottom: 22px;}
    .Calculator_row_stack .Calculator_field {margin-bottom: 10px;}
    .Calculator_row_stack .Calculator_field:last-child {margin-bottom: 21px;}
    .Calculator_label {margin-bottom: 7px; font-size: 12px;}
    .Calculator_input, .Calculator_Content .calc_dropdown_trigger {font-size: 14px;}
    .Calculator_box {gap: 12px; padding: 16px; border-radius: 8px;}
}

@media (max-width: 390px) {
    .Calculator_box img {max-width: 44px;}
    .Calculator_box_label {font-size: 12px;}
    .Calculator_box_value {margin-top: 2px; font-size: 20px; white-space: unset;}
    .Calculator_btn {font-size: 18px;}
}

@media (max-width: 360px) {
    .Calculator_row {gap: 12px;}
    .Calculator_control {padding: 0 12px;}
    .Calculator_unit {margin-left: 6px; font-size: 13px;}
    .Calculator_eyebrow, .Calculator_title {font-size: 28px;}
    .Calculator_panel {padding: 20px 18px 18px;}
    .Calculator_result_value {font-size: 54px;}
    .Calculator_box {gap: 10px; padding: 16px;}
    .Calculator_box img {max-width: 40px;}
    .Calculator_box_value {font-size: 20px;}
}