.calculators-section{scroll-margin-top:100px}.calculator-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:28px}.calculator-tab{appearance:none;border:1px solid rgba(74,112,32,.18);background:#fff;border-radius:22px;min-height:100px;padding:20px;text-align:left;display:flex;align-items:center;gap:14px;cursor:pointer;color:inherit;box-shadow:0 14px 40px rgba(31,45,29,.06);transition:.25s ease}.calculator-tab:hover,.calculator-tab.is-active{border-color:var(--accent,#69b900);transform:translateY(-2px);box-shadow:0 16px 42px rgba(80,140,20,.12)}.calculator-tab svg{width:36px;height:36px;fill:none;stroke:var(--accent,#69b900);stroke-width:2}.calculator-tab strong{display:block;font-size:1rem}.calculator-tab small{display:block;color:#778087;margin-top:4px}.calculator-output{margin-top:26px}.calculator-panel{border:1px solid rgba(74,112,32,.2);border-radius:26px;background:rgba(255,255,255,.96);padding:30px;box-shadow:0 20px 60px rgba(31,45,29,.08)}.calculator-copy{max-width:800px;margin-bottom:24px}.calculator-copy h3{font-size:clamp(1.5rem,2.5vw,2.1rem);margin:4px 0 8px}.calculator-kicker{text-transform:uppercase;letter-spacing:.16em;color:var(--accent,#69b900);font-size:.75rem;font-weight:800}.calculator-form{border-top:1px solid rgba(74,112,32,.12);padding-top:24px}.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.form-grid label{font-size:.85rem;font-weight:700;color:#313b40}.form-grid input,.form-grid select{width:100%;margin-top:8px;padding:13px 14px;border:1px solid #dce4d5;border-radius:12px;background:#fff;font:inherit;color:#263137;outline:none}.form-grid input:focus,.form-grid select:focus{border-color:var(--accent,#69b900);box-shadow:0 0 0 3px rgba(105,185,0,.1)}.calc-submit{margin-top:20px;border:1px solid var(--accent,#69b900);background:linear-gradient(135deg,var(--accent,#69b900),#4d9600);color:#fff;border-radius:13px;padding:14px 28px;font-weight:800;cursor:pointer}.calc-result{margin-top:26px}.result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.result-card{padding:18px;border:1px solid #e0e8d9;border-radius:16px;background:linear-gradient(135deg,#fff,#f7fbf2)}.result-card span{display:block;color:#718078;font-size:.82rem}.result-card strong{display:block;margin-top:7px;font-size:1.35rem;color:#263137}.result-table{overflow:auto;margin-top:18px}.result-table table{width:100%;border-collapse:collapse}.result-table th,.result-table td{padding:12px;border-bottom:1px solid #e4eadf;text-align:left}.result-table th{font-size:.78rem;color:#66736b;text-transform:uppercase}.calc-note{margin-top:18px;padding:16px 18px;border-left:3px solid var(--accent,#69b900);background:#f7fbf2;border-radius:8px;color:#59645e;line-height:1.6}.calc-loading,.calc-error{padding:22px;border-radius:14px;background:#f7fbf2}.calc-error{background:#fff2f2;color:#9c2f2f}@media(max-width:1000px){.calculator-tabs,.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.calculator-tabs,.form-grid,.result-grid{grid-template-columns:1fr}.calculator-panel{padding:20px}.calculator-tab{min-height:82px}}

/* =========================================================
   FEJLESZTÉS ALATT ÁLLÓ KALKULÁTOROK
   ========================================================= */

.calculator-roadmap-section {
    margin-top: 34px;
    scroll-margin-top: 100px;
}

.calculator-roadmap-panel {
    position: relative;
    overflow: hidden;
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid rgba(105, 185, 0, 0.26);
    border-radius: 26px;
    background:
        radial-gradient(circle at 100% 0%, rgba(105, 185, 0, 0.07), transparent 34%),
        linear-gradient(135deg, rgba(250, 253, 247, 0.98), rgba(246, 251, 241, 0.96));
    box-shadow: 0 20px 60px rgba(31, 45, 29, 0.06);
}

.calculator-roadmap-heading {
    max-width: 900px;
}

.calculator-roadmap-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 10px;
    color: var(--accent, #69b900);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.calculator-roadmap-kicker svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.calculator-roadmap-heading h2 {
    margin: 0;
    color: #263137;
    font-size: clamp(1.55rem, 3vw, 2.2rem);
    line-height: 1.15;
}

.calculator-roadmap-intro {
    max-width: 820px;
    margin: 12px 0 0;
    color: #66726c;
    line-height: 1.65;
}

.calculator-roadmap-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-top: 26px;
}

.calculator-roadmap-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 330px;
    padding: 22px;
    border: 1px solid rgba(74, 112, 32, 0.18);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 12px 34px rgba(31, 45, 29, 0.045);
}

.calculator-roadmap-card-head {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 82px;
}

.calculator-roadmap-icon {
    display: grid;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #f6faef, #edf5e4);
    color: #657069;
}

.calculator-roadmap-icon svg {
    width: 39px;
    height: 39px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.calculator-roadmap-card h3 {
    margin: 0;
    color: #29343a;
    font-size: 1.08rem;
    line-height: 1.35;
}

.calculator-roadmap-card > p {
    margin: 18px 0 0;
    color: #5d6963;
    line-height: 1.6;
}

.calculator-roadmap-warning {
    font-size: 0.82rem;
    color: #78827d !important;
}

.calculator-roadmap-card-footer {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px dashed rgba(91, 111, 76, 0.2);
}

.calculator-roadmap-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
    border-radius: 9px;
    background: #edf0ed;
    color: #69736e;
    font-size: 0.82rem;
    font-weight: 750;
}

.calculator-roadmap-status svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.calculator-roadmap-info {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-top: 22px;
    padding: 15px 17px;
    border: 1px solid rgba(74, 112, 32, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.72);
}

.calculator-roadmap-info svg {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--accent, #69b900);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.calculator-roadmap-info p {
    margin: 0;
    color: #5f6a65;
    line-height: 1.55;
}

@media (max-width: 1100px) {
    .calculator-roadmap-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .calculator-roadmap-section {
        margin-top: 24px;
    }

    .calculator-roadmap-panel {
        padding: 22px 18px;
        border-radius: 22px;
    }

    .calculator-roadmap-grid {
        grid-template-columns: 1fr;
    }

    .calculator-roadmap-card {
        min-height: auto;
    }

    .calculator-roadmap-card-head {
        min-height: 0;
    }

    .calculator-roadmap-info {
        align-items: flex-start;
    }
}


/* =========================================================
   KALKULÁTOROK MOBILOS JAVÍTÁSA – 2026-06
   ========================================================= */
.calculator-tabs,.calculator-output,.calculator-panel,.calculator-form,.form-grid,.result-grid,.calculator-roadmap-panel,.calculator-roadmap-grid,.calculator-roadmap-card{min-width:0;max-width:100%;box-sizing:border-box}
.calculator-panel input,.calculator-panel select,.calculator-panel button{max-width:100%;box-sizing:border-box}
.result-card strong,.calculator-roadmap-card h3,.calculator-roadmap-card p{overflow-wrap:anywhere}

@media(max-width:700px){
  .calculator-tabs{grid-template-columns:1fr;gap:10px;margin-top:20px}
  .calculator-tab{width:100%;min-height:72px;padding:14px 15px;border-radius:17px}
  .calculator-tab svg{width:31px;height:31px}
  .calculator-tab strong{font-size:.96rem}
  .calculator-tab small{font-size:.78rem}
  .calculator-output{margin-top:15px}
  .calculator-panel{width:100%;padding:18px 14px;border-radius:20px}
  .calculator-copy{margin-bottom:18px}
  .calculator-copy h3{font-size:1.45rem}
  .calculator-copy p{font-size:.92rem;line-height:1.55}
  .calculator-form{padding-top:18px}
  .form-grid{grid-template-columns:1fr;gap:13px}
  .form-grid label{min-width:0}
  .form-grid input,.form-grid select{min-width:0;padding:12px}
  .calc-submit{width:100%;min-height:46px;margin-top:16px}
  .result-grid{grid-template-columns:1fr;gap:10px}
  .result-card{padding:15px;border-radius:14px}
  .result-card strong{font-size:1.18rem}
  .result-table{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .result-table table{min-width:620px}
  .calc-note{padding:14px;font-size:.9rem}
  .calculator-roadmap-section{width:100%;margin-top:22px}
  .calculator-roadmap-panel{width:100%;padding:20px 14px;border-radius:20px}
  .calculator-roadmap-heading h2{font-size:1.65rem;overflow-wrap:anywhere}
  .calculator-roadmap-intro{font-size:.92rem;line-height:1.55}
  .calculator-roadmap-grid{grid-template-columns:1fr;gap:12px;margin-top:18px}
  .calculator-roadmap-card{width:100%;min-height:0;padding:17px 14px;border-radius:17px}
  .calculator-roadmap-card-head{align-items:flex-start;gap:12px;min-height:0}
  .calculator-roadmap-icon{flex-basis:52px;width:52px;height:52px}
  .calculator-roadmap-icon svg{width:31px;height:31px}
  .calculator-roadmap-card h3{font-size:1rem}
  .calculator-roadmap-card>p{margin-top:13px;font-size:.9rem;line-height:1.55}
  .calculator-roadmap-card-footer{padding-top:15px}
  .calculator-roadmap-info{gap:10px;padding:13px}
  .calculator-roadmap-info p{font-size:.86rem}
}

/* =========================================================
   OLDALSZÉLESSÉG JAVÍTÁS
   A kalkulátoros blokkok ugyanahhoz a központi szélességhez
   igazodnak, mint a fejléc, a hero és a felső kártyák.
   ========================================================= */
.calculators-section {
    width: 100%;
    max-width: var(--max, 1240px);
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 720px) {
    .calculators-section {
        width: 100%;
        max-width: 100%;
    }
}