/******* GENERAL *******/
[type=button]:focus {
    border: 0;
    background: #ffffff;
    color: #0f172a;
}
/******* CALCULATOR *******/
.calculator {
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 720px;
    margin: 0 auto 40px;
}
.calculator-bottom {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 24px;
    align-items: stretch;
    margin-top: 18px;
}

/******* TABS *******/
.calculator-plans-tabs {
    display:flex;
    gap:10px;
    margin-bottom:12px;
}
.calculator-plan-tab {
    flex: 1 1 0;
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 16px;
    border-radius:10px;
    background:#fff;
    border:2px solid #e8eef7;
    box-shadow: 0 2px 10px rgba(15,23,42,.06);
    cursor:pointer;
    text-align:left;
    transition: border-color .15s, background .15s, transform .1s;
}
.calculator-plan-tab:hover {
    background: #DFE8FB;
    color: #111827;
    transform: translateY(-1px);
}
.calculator-plan-tab.is-active{
    border: 2px solid #00CF93;
    background: #71E58E;
}
.calculator-plan-icon{
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.calculator-plan-icon img{
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    display:block;
}
.calculator-plan-text {
    display:flex;
    flex-direction:column;
    gap:2px;
}
.calculator-plan-name {
    font-weight:700;
    font-size:14px;
    color:#000000;
}
.calculator-plan-sub {
    font-size:12px;
    color:#000000;
}

/******* CARD *******/
.calculator-card {
    background: #F0F6F6;
    border-radius: 12px;
    padding: 30px;
}
.calculator-card-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.calculator-card-box {
    background: #ffffff;
    border-radius: 12px;
    padding: 24px;
    min-width: 150px;
    text-align: center;
    box-shadow: 0 6px 14px #15202211;
}
.calculator-card-value {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 4px;
}
.calculator-card-label {
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/******* SLIDER *******/
.calculator-slider-row input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: transparent;
    outline: none;
    margin: 0;
}
.calculator-slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance:none;
    appearance:none;
    width:22px;
    height:22px;
    border-radius:50%;
    background:#00CF93;
    cursor:pointer;
    box-shadow:0 0 0 2px #00cf94a9;
    border:none;
}
.calculator-slider-row input[type="range"]::-moz-range-thumb{
    width:22px;
    height:22px;
    border-radius:50%;
    background:#00CF93;
    cursor:pointer;
    box-shadow:0 0 0 2px #00cf94a9;
    border:none;
}
.calculator-slider-scale {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #000000;
    margin-top: 8px;
    font-weight: 600;
}

/******* ADDONS *******/
.calculator-addons {
    background: #F0F6F6;
    border-radius: 14px;
    padding: 18px;
}
.calculator-addons-title {
    font-weight: 800;
    font-size: 18px;
    margin: 0 0 14px 0;
    color: #0f172a;
}
.calculator-addons-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.calculator-addon {
    border: 0;
    background: #ffffff;
    padding: 12px 14px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    color: #0f172a;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s, background .12s, box-shadow .12s, outline .12s;
}
.calculator-addon:hover {
    background: #DFE8FB;
    color: #111827;
    transform: translateY(-1px);
}
.calculator-addon.is-active,
.calculator-addon.is-included {
    background: #71E58E;
    border: 2px solid #00CF93;
    box-shadow: 0 6px 16px rgba(0, 207, 147, 0.18);
}

/******* MULTI-ADDONS *******/
.calculator-multi-addons {
    margin-top: 18px;
    background: #F0F6F6;
    border-radius: 14px;
    padding: 18px;
}
.calculator-multi-addons-title {
    font-weight: 800;
    font-size: 18px;
    margin: 0 0 14px 0;
    color: #0f172a;
}
.calculator-multi-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

/******* SUMMARY *******/
.calculator-addons-column,
.calculator-summary-column {
    align-self: stretch;
    height: 100%;
    min-height: 0;
}
.calculator-summary-card{
    height: 100%;
    display: flex;
    flex-direction: column;
    background:#fff;
    border-radius:14px;
    padding:20px 20px 0 20px;
    border:1px solid #e8eef7;
    box-shadow: 0 10px 30px rgba(15,23,42,.06);
}
.calculator-summary-title{
    margin:0 0 18px 0;
    font-size:26px;
    font-weight:900;
    color:#0f172a;
}
.calculator-summary-row{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
    padding:5px 0;
}
.calculator-summary-label{
    font-weight:800;
    color:#0f172a;
    font-size:14px;
}
.calculator-summary-value{
    color:#0f172a;
    font-size:14px;
    text-align:right;
    white-space:nowrap;
}
.calculator-summary-sep{
    height:1px;
    background:#e5e7eb;
    margin:14px 0;
}
.calculator-summary-total .calculator-summary-label{
    font-weight:900;
}
.calculator-summary-total .calculator-summary-value{
    font-weight:400;
}
.calculator-summary-note {
    font-size:9px;
    color:#000000;
    line-height:1.4;
    margin-top: auto;
}
#summary-items .calculator-summary-row{
    padding:8px 0;
}

/******* FOOTER *******/
.calculator-footer {
    font-size:0.9em;
    color:#ffffff;
    margin-top:10px;
    text-align: right;
}

/******* RESPONSIVE *******/
@media (max-width: 980px){
    .calculator-bottom{ grid-template-columns:1fr; }
}
@media (max-width: 600px) {
    .calculator-plans-tabs{ flex-direction:column; }
    .calculator-plan-tab{ width:100%; }
    .calculator-multi-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .calculator-card-inner { flex-direction: column; }
    .calculator-card-box { width: 100%; }
    .calculator-plans-tabs { flex-wrap: wrap; }
}
@media (max-width: 480px) {
    .calculator-multi-options { grid-template-columns: 1fr; }
    .calculator-addons-list { grid-template-columns: 1fr; }
}