@font-face {
    font-family: 'Raleway-font';
    src: url('../fonts/Raleway-Medium.woff') format('woff'),
    url('../fonts/Raleway-Medium.ttf')  format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'BarlowCondensed';
    src: url('../fonts/BarlowCondensed-Medium.woff') format('woff'),
    url('../fonts/BarlowCondensed-Medium.ttf')  format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Barlow-Medium';
    src: url('../fonts/Barlow-Medium.woff') format('woff'),
    url('../fonts/Barlow-Medium.ttf')  format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto-Black';
    src: url('../fonts/Roboto-Black.ttf')  format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Roboto-Regular';
    src: url('../fonts/Roboto-Regular.ttf')  format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto-Thin';
    src: url('../fonts/Roboto-Thin.ttf')  format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto-Medium';
    src: url('../fonts/Roboto-Medium.ttf')  format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Roboto-Light';
    src: url('../fonts/Roboto-Light.ttf')  format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    color: #2f4858;
}

.altalanos,
.deviza {
    font-family: 'Raleway', sans-serif !important;
}

.arak-title {
    font-size: 45px;
    font-family: 'Roboto-Black';
    color: #323F4B;
}

.arak-title-second {
    font-size: 33px;
    font-family: 'Roboto-Black';
    color: #323F4B;
}

.ajanlat-cim {
    text-align: center;
    font-size: 35px;
    font-weight: 700;
    color: #323F4B;
    font-family: 'Roboto-Black';
}


/*Section1 hero*/

#topButton {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #ff8c00;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 4px;
}

#topButton:hover {
    background-color: #555;
}

/* PRICING */
.pricing-col .pricing-row {
    border-top: 1px solid rgba(0,0,0,0.125);
    border-left: 1px solid rgba(0,0,0,0.125);
    border-right: 1px solid rgba(0,0,0,0.125);
    text-align: center;
}
.pricing-col .pricing-row:last-child {
    border-bottom: 1px solid rgba(0,0,0,0.125);
}

.pricing-title {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
}

.pricing-list-conatiner {
    text-align: center;
}

.pricing-list-conatiner .list-group {
    margin-top: -1px;
}

.pricing-col .pricing-row,
.pricing-col .list-group-item {
    padding: 0.5rem;
}

.pricing-row p {
    font-size: inherit;
}

#pricing .fa-times {
    color: #7e7d7d;
}

/*Page-header section*/
.container-header {
    margin: 10px 50px;
}

.arak-table-head {
    background: #4BBF73 !important;
    color: white;
    border-right: 1px solid white;
    font-family: 'Roboto-Black';
    font-size: 24px;
    letter-spacing: 1px;
    border-top: 1px #4BBF73 solid;
}

.arak-table td:first-child {
    background: #4BBF73;
    color: white;
    border-right: 1px solid black;
    font-family: 'Roboto-Medium';
    font-size: 20px;
    padding: 10px;
    letter-spacing: 1px;
}

.empty-td {
    background: #4BBF73 !important;
    border: 1px #4BBF73 solid !important;
}

/*Packages-top section*/
.packages-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

.ajanlat-cim {
    text-align: center;
}

input,
label {
    display: inline-block;
    vertical-align: middle;
    margin: 10px 0;
}

.price {
    margin: 10px;
}

.toggle-btn {
    font-weight: bold;
    margin: 10px;
    display:inline;
    vertical-align: middle;
    margin-bottom: -20px;
    font-size: 26px !important;
}

.sale {
    position: relative;
    bottom: 27px;
    right: 60px;
    width: 200px;
    color: red;
    font-size: 24px;
}

.sale-all {
    position: relative;
    bottom: 27px;
    right: 50px;
    width: 200px;
    color: red;
    font-size: 24px;
    text-align: center;
    line-height: 1;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
    margin-bottom: 13px;
    z-index: 3;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #4BBF73;
    -webkit-transition: 0.4s;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    transform: translate(0px, 0px);
    transition: 0.6s ease transform, 0.6s box-shadow;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: 0.4s;
    transition: 0.4s;
}

input:checked + .slider {
    background-color: #006400;
}

input:focus + .slider {
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.havi-eves {
    margin: 0.8em;
    display: inline-block;
}
/*Packages section*/
.package-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.arak-2024-video iframe{
    width: 678px;
    height: 380px;
    border-radius: 25px;
}

.packages {
    margin: 0px;
    width: 300px;
    padding-bottom: 1.5em;
    height: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 0px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    flex-wrap: wrap;
    color: black;
    position:relative;
    transition: all .5s ease-in-out;
}

.packages-all {
    margin: 0px;
    width: 400px;
    padding-bottom: 1.5em;
    height: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 0px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    flex-wrap: wrap;
    color: black;
    position:relative;
    transition: all .5s ease-in-out;
}

.packages-hover:hover {
    /*transform: scale(1.1);*/
    z-index: 3;
}

.package-head {
    background: #4BBF73;
    width: 100%;
    height: 120px;
    font-size: 25px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    color: white;
}

.packages-decs {
    margin: 0px;
    width: 300px;
    padding-bottom: 1.5em;
    height: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 0px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    flex-wrap: wrap;
    color: black;
    position:relative;
    margin-bottom: 30px;
}

.packages-decs-all {
    margin: 0px;
    width: 400px;
    padding-bottom: 1.5em;
    height: 100%;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-radius: 0px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    flex-wrap: wrap;
    color: black;
    position:relative;
    margin-bottom: 30px;
}

.month-egyedi{
    margin-bottom: 48.5px;
}

.yearly-egyedi{
    margin-top: 17px;
    margin-bottom: 11.5px;
}

h1,
h2 {
    font-size: 2.2em;
}

.list {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.list li {
    font-size: 20px;
    list-style: none;
    border-bottom: 1px solid #f4f4f4;
    padding-inline-start: 0;
    border-width: 1px;
    padding: 10px;
}

.first {
    margin-top: 20px;
    border-top: 1px solid #000000;
}

.small-b {
    font-size: 20px;
    color: black;
    font-weight: 600;
}

.small-c {
    font-size: 20px;
    color: darkgrey;
}

.small-a {
    font-size: 20px;
}

.grey {
    color: darkgrey;
}

.koz {
    border-top: 1px solid #000000;
}

.list {
    width: 80%;
}

ol,
ul {
    padding: 0;
}

.button {
    padding: 10px 30px;
    text-decoration: none;
    font-size: 1.4em;
    margin: 15px 15px;
    border-radius: 10px;
    color: #f4f4f4;
    transition: all 0.3s ease 0s;
}

.button:hover {
    transform: scale(1.2);
    text-decoration: none;
    color: white;
}

.button1 {
    background-color: #f29126;
    text-decoration: none;
    color: white !important;
}


.dt-line {
    padding: 10px;
    font-family: 'Roboto-Medium';
    color: #323F4B;
}

.dt-line-v2 {
    padding: 22px 0;
    font-family: 'Roboto-Medium';
    color: #323F4B;
}
/* Details */
.details-header {
    background-color: #4BBF73;
    width: 100%;
    height: auto;
    color: white;
    font-family: 'Roboto-Black';
    letter-spacing: 1px;
    padding: 8px;
    margin: 0;
}

.smaller-szoveg {
    font-size: 17px;
}

.text-arak-regular {
    font-family: 'Roboto-Medium';
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    color: #323F4B;
    margin: 0 5%;
}

/*Colors*/

.narancs {
    background-color: #f29126 !important;
}

.piros {
    background-color: #d9534f !important;
}

.csak-adriana-div {
    position: absolute
}
.adriana-csak {
    color: white;
    background-color: #f29126;
    padding: 0px 5px 0px 5px;
    font-size: 19px;
}

.csak-adriana {
    position: relative;
    color: white;
    display: block;
    background-color: #f29126;
    text-align: center;
    height: 65px;
    width: 65px;
    border-radius: 50%;
    box-sizing: border-box;
    font-size: 0.6em;
    padding-top: 10px;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    transition: all 0.5s ease;
    left: 630px;
    bottom: 45px;
}

.adriana-egyedi {
    left: 194px;
    bottom: 60px;
}

/*Highlighted*/
.hot {
    position: absolute;
    top: -10px;
    background: #F80;
    color: #fff;
    text-transform: uppercase;
    z-index: 2;
    padding: 2px 5px;
    font-size: 18px;
    border-radius: 2px;
    font-weight: 700;
}

/*GYIK*/

.faq_area {
    position: relative;
    z-index: 1;
    margin-top: 100px;
    margin-bottom: 100px;
}

.gyik {
    text-align: left;
}


.browser-icons{
    width: 300px;
    display:inline-block;
    white-space:nowrap !important;
}

@media only screen and (max-width: 800px) {
    .arak-2024-video iframe {
        width: 550px;
        height: 300px;
        border-radius: 25px;
    }

    .arak-title {
        font-size: 41px;
    }

    .arak-title-second {
        font-size: 28px;
    }
}

@media only screen and (max-width: 575px) {
    .support-button p {
        font-size: 14px;
    }

    .support-button i {
        font-size: 1rem;
    }

    .support-button a {
        font-size: 13px;
    }

    .arak-2024-video iframe {
        width: 460px;
        height: 256px;
        border-radius: 25px;
    }
}

.support-button i {
    color: white;
    font-size: 1.25rem;
}

.support-button a {
    color: #4BBF73;
}


/*Tabla*/

.b-table-all {
    table-layout: fixed;
    width: 600px !important;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    right: 100px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    vertical-align: middle !important;
    font-size: 1.2em !important;
}

.table td, th {
    vertical-align: middle !important;
}

th {
    height: max-content !important;
}

.table td, th {
    vertical-align: middle !important;
    font-family: 'Roboto-Regular';
    font-size: 20px;
    color: #323E4A;
}

.arak-main-col {
    vertical-align: middle !important;
    font-family: 'Roboto-Medium' !important;
    font-size: 20px;
    color: #323E4A;
}


th {
    height: max-content !important;
}

.same-data-td,
.arak-table td:nth-child(4),
.arak-table td:nth-child(7) {
    border-right: 1px solid black;
}


.hide-button,
.reszletek-btn {
    background-color: transparent;
    color: #FC9431 !important;
    border-radius: 25px;
    font-family: 'Barlow' !important;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    padding: 10px 45px;
    border: 2px solid #FC9431!important;
    margin-left: 0px !important;
    text-decoration: none;
}
.reszletek-btn:hover {
    background: #FC9431;
    color: white !important;
}
.hide-button:hover {
    color: #FC9431 !important;
}

tbody > tr > td {
    text-align: center;
    border-left: 1px solid #b1b1b1;
    padding: 5px;
    vertical-align: center !important;
}

thead > tr > th,
tbody > tr > th {
    color: #505050;
    height: 74px !important;
    font-size: 0.8em;
}


.smaller-text{
    font-size: 0.8em;
}
.first-td {
    border: 1px #4BBF73 solid;
    background: #4BBF73 !important;
}

/*Media screen*/
@media screen and (max-width: 1633px) {
    .csak-adriana {
        position: relative;
        color: white;
        display: block;
        background-color: #f29126;
        text-align: center;
        height: 65px;
        width: 65px;
        border-radius: 50%;
        box-sizing: border-box;
        font-size: 0.5em;
        padding-top: 10px;
        text-transform: uppercase;
        letter-spacing: 0.13em;
        transition: all 0.5s ease;
        left: 185px;
        bottom: 80px;
    }

    .adriana-egyedi {
        left: 190px;
        bottom: 40px;
    }
}

@media screen and (max-width: 555px) {
    .sale {
        right: 65px;
    }

    .arak-title {
        font-size: 38px;
    }

    .arak-title-second {
        font-size: 24px;
    }
}

@media screen and (max-width: 445px) {
    .sale {
        right: 49px;
    }
}

input[type="checkbox"] + .szemelyre {

    padding: 11.6px;
}
a b {
    color: white;
}



/*FAQ*/
.accordion-item {
    padding-bottom: 20px;
}

.accordion-button {
    background-color: #f29126 !important;
    color: white !important;
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 600;
    font-size: 22px !important;
    line-height: 22px;
    letter-spacing: 1px;
}

.accordion-body {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 25px;
    color: #323F4B;
}

.accordion-button:after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
}

td b a{
    text-decoration: none !important;
}
.zold {
    background-color: #4BBF73 !important;
    text-decoration: none !important;
}

.rlb-con {
    text-size-adjust: 80%;
}


/*FOOTER AND HEADER*/
.navbar-collapse {
    vertical-align: bottom;
    padding-top: 20px;
}

.navbar-nav a {
    color: black !important;
    font-family: 'BarlowCondensed';
    font-size: 23px;
    padding-left: 20px !important;
    vertical-align: bottom;
}

.navbar-nav a:not(:first-child):before {
    content: "•";
    font-size: 25px;
    position: relative;
    right: 15px;
    color: #ff8c00;
}

.header-info{
    text-align: right;
    padding: 5px 10px 0px 0px;
    font-family: 'Barlow-Medium';
    color: #7B8794;
    font-size: 17px;
}

.header-info .tel {
    color: #7B8794 !important;
    text-decoration: none !important;
}

.header-gray-div {
    position: absolute;
}

.header-gray {
    position: relative;
    width: 300px;
    background-color: #404040;
    height: 6px;
}

/*Responsive header*/
.navbar-toggle
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {
    outline: none !important;
    box-shadow: none !important;
}

.navbar-light .navbar-toggler{
    border-color: white !important;
    color: white !important;
}

.navbar-toggler-icon {
    background-image: none !important;
}

.navbar-toggler-icon:focus,
.navbar-toggler-icon:active {
    outline: none !important;
    box-shadow: none !important;
}

.navbar-toggler-icon {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: 0.4s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
    transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px);
    transform: rotate(45deg) translate(-8px, -8px);
}

.bg-warning{
    background-color: #4BBF73 !important;
    letter-spacing: 1px;
}

.nav-footer-div {
    background-color: #323F4B;
}

.nav-footer {
    padding: 30px 0 30px 0;
}

.footer-div {
    background-color: #323F4B;
}

.footer-con {
    padding: 40px 0 40px 0;
}

.m-text {
    display: table-cell;
    padding-top: 15px;
    color: #c0c0c0;
    font-family: 'Barlow-Medium';
}

.footer {
    background-color: #323F4B;
    border-top: 1px solid rgb(192, 192, 192);
}

.footer-copy {
    padding: 20px 0 20px 0;
    color: #d6d6d6 !important;
}

.f-text {
    color: #d6d6d6 ;
    font-family: 'Barlow-Medium';
}

.ft a {
    color: white !important;
}

.footer-div a,
.impress a {
    color: #d6d6d6 !important;
    text-decoration: none;
}

.footer-div a:hover,
.impress a:hover {
    color: #ff8c00 !important;
}

@media only screen and (max-width: 991px) {
    #topButton {
        display: none;
        position: fixed;
        bottom: 10px;
        right: 10px;
        z-index: 3;
        font-size: 12px;
        border: none;
        outline: none;
        background-color: #ff8c00;
        color: white;
        cursor: pointer;
        padding: 15px;
        border-radius: 4px;
    }

    #topButton:hover {
        background-color: #555;
    }

    .ugyf{
        background-color: #404040;
    }
    .header-info{
        text-align: center;
        color: white !important;
        width: 100%;
    }

    .header-info .tel {
        color: white !important;
    }

    .header-info .hidden-header-info{
        display: none;
    }

    .navbar-nav a:before {
        content: "•";
        font-size: 25px;
        position: relative;
        right: 15px;
        color: #ff8c00;
    }

    .donwload-button {
        display: inline-block;
    }
}

@media only screen and (max-width: 480px) {
    .logo-brand {
        width: 85%;
    }

    .cookie-content {
        position: fixed;
        left: 0;
        width: 100%;
        padding: 20px;
        background-color:  rgba(0, 0, 0, 0.9);
        color: white;
        text-align: justify;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        z-index: 300;
        -webkit-transition: all 2s ease-in-out;
        -moz-transition: all 2s ease-in-out;
        -ms-transition: all 2s ease-in-out;
        -o-transition: all 2s ease-in-out;
        transition: all 2s ease-in-out;
    }

    .arak-title {
        font-size: 28px;
    }

    .arak-title-second {
        font-size: 20px;
    }

    .arak-2024-video iframe {
        width: 350px;
        height: 196px;
    }
}

@media only screen and (max-width: 360px) {
    .navbar-brand {
        margin-right: 0 !important;
    }
    .logo-brand {
        width: 80%;
    }

    .arak-2024-video iframe {
        width: 300px;
        height: 168px;
    }
}

/* COOKIE BOX */
.cookie-content {
    position: fixed;
    left: 20px;
    width: 370px;
    padding: 30px;
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    text-align: justify;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    z-index: 300;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}

.cookie-content a {
    color: lightblue;
}

.cookie-content button {
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 23px;
}

.cookie-content.cookie-hide {
    bottom: -300px;
}

.cookie-content.cookie-show {
    bottom: 20px;
}

.donwload-button {
    background-color: transparent;
    color: #FC9431;
    border-radius: 25px;
    width: 250px;
    margin: 20px 0 40px 0 !important;
    font-family: 'Barlow' !important;
    font-style: normal;
    font-weight: 500;
    font-size: 20px;
    padding: 10px 10px;
    border: 2px solid #FC9431!important;
    margin-left: 0px !important;
    text-decoration: none;
}

.donwload-button:hover {
    background-color:#FC9431!important;
    color: white;
}


/* =========================================================================
   ADRIANA ÁRAK OLDAL (v21, 2026. október 1-i díjszabás)
   Egyetlen díjszabás: a 2026. október 1-jétől hatályos árak.
   A cím feletti nézetváltóval: kalkulátor (alapértelmezett) vagy tételes árlista.
   Egy összefüggő, oszlopigazított táblázat. A V16 kalkulátor design-rendszere.
   A kalkulátort NEM módosítja.
   Csak az /arak/korlatlan_banki_teteles_csomagok oldal tölti be ezt a fájlt.
   A blokk a .arak2026 wrapperen belül él, hogy a Bootstrap-es fejléc és
   lábléc tipográfiája érintetlen maradjon.
   ========================================================================= */
:root{
  --orange:#FB9332; --orange-2:#F07F12; --orange-dark:#D86F08;
  --orange-soft:#FFF1E0; --orange-line:#FCD9AE;
  --ink:#2B3138; --muted:#737B83; --line:#E7E9EC;
  --slate:#313D49; --slate-soft:#EEF1F4;
  --grey:#AEB6BE; --grey-soft:#F4F5F7;
  --green:#2C7A5B; --green-soft:#E7F4EE;
  --bg:#FFFFFF; --bg-2:#FBFAF9; --page:#F4EFE5;
  --shadow:0 1px 2px rgba(43,49,56,.04),0 10px 30px rgba(43,49,56,.07);
  --shadow-lg:0 2px 6px rgba(43,49,56,.06),0 22px 50px rgba(43,49,56,.12);
  --r:16px; --r-sm:11px;
}
.arak2026 *{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
.arak2026{
  background:var(--page); color:var(--ink);
  font-family:"Roboto",system-ui,Arial,sans-serif; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1000px; margin:0 auto; padding:0 clamp(16px,4vw,28px) 72px}

/* ---------- KALKULÁTOR IFRAME ---------- */
.calc-slot{margin:0 auto; padding:0}
.kalk-frame{width:100%; border:none; display:block; min-height:640px; background:transparent}

/* ---------- ELSZÁMOLÁSI MÓD KAPCSOLÓ (sticky) ---------- */
.modebar{position:sticky; top:0; z-index:30; background:#fff; text-align:center; padding:14px 0 12px; margin-top:clamp(18px,2.4vw,26px)}
/* kitapadt állapotban a sáv háttere marad a zóna fehérje (nem átlátszó, hogy a táblázat
   ne látszódjon át), de keret és árnyék nélkül */
.modebar.stuck{background:#fff; box-shadow:none}
.modebar.stuck .seg{border-color:transparent; box-shadow:none}
/* lekerekített szögletes forma (ovális helyett 12/9 px sarok), hogy a nézetváltó
   formanyelvét kövesse; a színek változatlanok */
.seg{display:inline-flex; background:var(--grey-soft); border:1px solid var(--line); border-radius:12px; padding:5px; box-shadow:var(--shadow); gap:4px; max-width:100%; flex-wrap:wrap; justify-content:center}
.seg button{font:inherit; font-weight:700; font-size:14px; color:var(--muted); border:none; background:transparent; padding:10px 18px; border-radius:9px; cursor:pointer; transition:.16s; white-space:nowrap; display:flex; flex-direction:column; align-items:center; gap:1px; line-height:1.15}
.seg button .t{font-size:14px; font-weight:800; color:inherit; line-height:1.2}
.seg button .sub{font-size:11px; font-weight:600; color:var(--grey)}
.seg button:hover{color:var(--ink)}
.seg button.on{background:#fff; color:var(--orange-dark); box-shadow:var(--shadow)}
.seg button .sub.g{color:var(--green); font-weight:700}
/* mondatonként tagolt jegyzet, nincs csúnya sortörés */
.mode-note{margin:12px auto 0; max-width:70ch; display:flex; flex-direction:column; gap:2px}
.mode-note .line{font-size:13.5px; color:var(--muted); line-height:1.45}
.mode-note .line b{color:var(--ink); font-weight:700}
.mode-note .save{color:var(--green); font-weight:700}

/* ---------- ÁRTÁBLÁZAT ---------- */
/* A keret, az árnyék és a lekerekítés a külső dobozon van, hogy a belső doboz vághasson
   (clip-path) anélkül, hogy scroll-konténerré válna, és elrontaná a sticky fejlécet. */
.ptable-frame{margin-top:10px; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:0 4px 14px rgba(43,49,56,.09), 0 26px 56px rgba(43,49,56,.17)}
.ptable-wrap{border-radius:var(--r); overflow-x:auto; -webkit-overflow-scrolling:touch}
table.ptable{width:100%; min-width:660px; table-layout:fixed; border-collapse:collapse; font-feature-settings:"tnum" 1}
.ptable th,.ptable td{text-align:center; vertical-align:middle}
.ptable .rowlabel{text-align:left}

/* fejléc */
.ptable thead th{padding:0; border-bottom:1px solid var(--line); vertical-align:top; background:#fff}
.ptable thead .corner{background:#fff; position:sticky; left:0; z-index:14; width:200px; min-width:160px; vertical-align:top}
/* A csomagnév-sor a kapcsolósáv alá tapad (--mbh = a sáv mért magassága, JS állítja).
   Csak 720px felett: ott a táblázat kifér, így a .ptable-wrap nem kell hogy scroll-konténer
   legyen. Alatta a vízszintes görgetés fontosabb, és egy scroll-konténerben a sticky a
   dobozhoz tapadna, nem a laphoz (az overflow-y:clip sem segít: auto mellett hidden lesz). */
@media(min-width:720px){
  /* clip-path vág, de nem lesz scroll-konténer: a sarkok lekerekítve maradnak, a sticky
     fejléc mégis a laphoz tapad. A cellákra így nem kell lekerekítés, tehát kitapadva
     nincs kivágott sarok, amiben átlátszana a mögötte futó táblázat. */
  .ptable-wrap{overflow:visible; clip-path:inset(0 round var(--r))}
  /* 2px-szel a kapcsolósáv alá csúszik, hogy törtpixeles nagyításnál se legyen rés */
  .ptable thead th{position:sticky; top:calc(var(--mbh,100px) - 2px); z-index:12}
}
/* Mobilon nincs tapadás: sem a kapcsolósáv, sem a fejléc. A szürke elválasztó sorok
   szövege viszont a látható sávban marad, mint a bal oldali címkeoszlop: a cella a
   táblázat teljes szélességét fedi, a benne lévő doboz a görgetéssel szemben tapad. */
@media(max-width:719px){
  .modebar{position:static}
  /* left:16px = a cella bal paddingja, vagyis pontosan a szöveg kiindulási helye –
     így görgetéskor egy pixelt sem mozdul, nem "beugrik" a bal szélre */
  .subhead td > .sh-in{position:sticky; left:16px; display:block; width:calc(var(--tvw,100vw) - 32px)}
}
/* csak a csomag neve kerül a világos narancs sávba (a címkeoszlop marad fehér) */
.head-cell{padding:14px 16px 16px; border-left:1px solid var(--orange-line); background:var(--orange-soft); position:relative}
.head-cell.feat{box-shadow:inset 0 3px 0 var(--orange); background:#FFE7C9} /* a kiemelt csomag telítettebb tónust kap */
.ribbon-slot{height:20px; margin-bottom:7px} /* minden oszlopban azonos, hogy a számok egy vonalba essenek */
.h-ribbon{display:inline-block; background:var(--orange); color:#fff; font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 10px; border-radius:999px; line-height:1.2}
/* A fejléc négy sávra bomlik: [narancs] csomag neve, majd külön-külön sorban
   a díj + fizetési mód, a "Kinek ajánljuk?", végül a Megrendelem gomb. */
/* 1. a csomag neve: a cégszám a hangsúly, a "céges csomag" halkan alatta */
.h-name{font-weight:900; font-size:clamp(22px,2.7vw,29px); color:var(--ink); letter-spacing:-.015em; line-height:1.08}
.h-name .npkg{display:block; font-size:.45em; font-weight:700; color:var(--muted); letter-spacing:.02em; line-height:1.3; margin-top:3px}
/* 2. a csomag díja, saját (fehér) sorban */
.pricecell{padding:12px 14px}
.h-price{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:0 4px}
.h-price .amt{font-weight:900; font-size:clamp(18px,2.1vw,23px); line-height:1.1; letter-spacing:-.01em; color:var(--ink)}
.h-price .cur{font-size:12px; font-weight:700; color:var(--muted)}
.pu-inline{font-size:11px; color:var(--muted); font-weight:500}
.h-sub{font-size:11.5px; color:var(--muted); margin-top:4px; line-height:1.4}
/* 3. "Kinek ajánljuk?" sor, saját cellákban (a sorok magasságát a táblázat igazítja) */
.whocell{padding:12px 14px}
.h-fit{font-size:12px; line-height:1.4; color:var(--slate); text-align:center}
.h-fit b{font-weight:800; color:var(--ink)}
.h-fit .plus{color:var(--orange-dark); font-weight:800}
.h-fit .note{display:block; color:var(--muted); margin-top:3px}
/* diszkrét gomb a narancs sávban: mivel a fejléc sticky, görgetés közben is elérhető */
.h-cta-mini{display:inline-block; margin-top:10px; font:inherit; font-weight:700; font-size:12px; line-height:1.2;
  color:var(--orange-dark); background:#fff; border:1.5px solid var(--orange-line); border-radius:7px;
  padding:6px 14px; text-decoration:none; transition:.15s}
.h-cta-mini:hover{background:var(--orange); border-color:var(--orange); color:#fff}
/* 4. gomb-sor */
.ctacell{padding:14px 12px 16px}
.h-cta{display:inline-block; font:inherit; font-weight:700; font-size:13px; color:#fff; background:var(--orange); border:none; border-radius:8px; padding:9px 16px; cursor:pointer; text-decoration:none; transition:.15s; box-shadow:0 6px 14px rgba(251,147,50,.26)}
.h-cta:hover{background:var(--orange-2)}

/* első oszlop sticky (a fejléc sarokcellája fentebb kap magasabb z-indexet, ezért nincs itt) */
.ptable tbody .rowlabel{position:sticky; left:0; background:#fff; z-index:1}
.ptable tbody tr.d:nth-child(even) .rowlabel{background:#fff}

/* szekció-alcím sorok */
.subhead td{background:var(--slate-soft); color:var(--slate); text-align:left; padding:10px 16px; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
/* a magyarázat külön sorba kerül, mert egész mondat, nem néhány szó */
.subhead td small{display:block; font-weight:500; text-transform:none; letter-spacing:0; color:var(--muted); font-size:11.5px; line-height:1.5; margin-top:3px; max-width:100ch}

/* adatsorok, kompakt */
.ptable tbody tr.d{border-top:1px solid var(--line)}
.ptable tbody tr.d:nth-child(even){background:#fff}
.rowlabel{padding:10px 16px}
.rl-t{font-weight:700; font-size:13.5px; line-height:1.3}
.rl-d{font-size:11.5px; color:var(--muted); margin-top:1px; line-height:1.3}
.pcell{padding:11px 12px; border-left:1px solid var(--line)}
.pv{font-weight:800; font-size:15px; color:var(--ink)}
.pv.word{font-weight:800; font-size:13px; color:var(--green)}
.pv.txt{font-weight:600; font-size:12.5px; color:var(--ink)}
.pu{display:block; font-size:11px; color:var(--muted); font-weight:500; margin-top:1px}
/* kétszintes sor (cégek, felhasználók): a főérték és az alsó érték közti térköz kisebb,
   mint a sorok közötti, és nincs köztük vonal – a sorokat csak a sorhatár választja el */
.duo .pu{margin-top:5px}
.duo .rl-d{margin-top:5px}
.scroll-hint{display:none; font-size:12px; color:var(--muted); text-align:center; margin-top:8px}
@media(max-width:680px){ .scroll-hint{display:block} .ptable thead .corner{min-width:128px; width:128px} }

/* ---------- SZEKCIÓ-CÍMKE ---------- */
.section-label{display:flex; align-items:center; gap:12px; margin:clamp(32px,4vw,44px) 0 16px; color:var(--muted); font-size:12.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase}
.section-label::after{content:""; flex:1; height:1px; background:var(--line)}
.section-label .n{flex:none; width:24px; height:24px; border-radius:50%; background:var(--orange-soft); color:var(--orange-dark); display:grid; place-items:center; font-size:12px; font-weight:900}
/* a címhez tartozó halk kiegészítés, nem verzálban */
.section-label small{text-transform:none; letter-spacing:0; font-weight:500; font-size:12.5px; color:var(--grey)}
.section-label small::before{content:"– "}

/* ---------- OPCIONÁLIS TOVÁBBI SZOLGÁLTATÁSOK ---------- */
.extras{background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:0 4px 14px rgba(43,49,56,.09), 0 26px 56px rgba(43,49,56,.17); overflow:hidden}
.ex-row{display:grid; grid-template-columns:1.7fr 1fr; gap:16px; padding:14px 20px; border-top:1px solid var(--line); align-items:center}
.ex-row:first-child{border-top:none}
.ex-l .et{font-weight:700; font-size:14px}
.ex-l .ed{font-size:12px; color:var(--muted); margin-top:2px; line-height:1.45}
.ex-r{text-align:right; font-weight:800; font-size:15px; font-feature-settings:"tnum" 1}
.ex-r small{display:block; font-weight:500; font-size:11.5px; color:var(--muted); margin-top:2px}
@media(max-width:560px){ .ex-row{grid-template-columns:1fr; gap:6px} .ex-r{text-align:left} }

/* ---------- GYIK ---------- */
.faq{background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:0 4px 14px rgba(43,49,56,.09), 0 26px 56px rgba(43,49,56,.17); overflow:hidden}
.faq details{border-top:1px solid var(--line)}
.faq details:first-child{border-top:none}
.faq summary{list-style:none; cursor:pointer; padding:15px 20px; font-weight:700; font-size:14.5px; color:var(--ink); display:flex; justify-content:space-between; align-items:center; gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .chev{flex:none; width:18px; height:18px; color:var(--orange-2); transition:transform .2s}
.faq details[open] summary .chev{transform:rotate(180deg)}
.faq .ans{padding:0 20px 16px; font-size:13.5px; color:var(--muted); line-height:1.6}
.faq .ans a{color:var(--orange-2); text-decoration:underline; text-underline-offset:2px}
.faq .ans ul{margin:10px 0 0; padding-left:20px}
.faq .ans li{margin:6px 0}
.faq .ans li b{color:var(--ink); font-weight:700}

/* ---------- LÁBJEGYZET ---------- */
.legal{margin-top:clamp(24px,3vw,34px); font-size:12px; color:var(--muted); line-height:1.6; text-align:center; max-width:74ch; margin-left:auto; margin-right:auto}
.legal a{color:var(--orange-2); text-decoration:underline; text-underline-offset:2px}
.legal b{color:var(--ink); font-weight:700}
.afa-note{font-size:12.5px; color:var(--muted); text-align:center; margin-top:12px}

/* ---------- FEHÉR ÁR-ZÓNA + ÖSSZECSUKHATÓ ÁRLISTA ---------- */
.price-zone{background:#fff; border-top:1px solid var(--line); padding-top:clamp(22px,3.5vw,40px)}
/* fejezetcím: elválasztja az árlistát a fölötte lévő kalkulátortól */
/* egy sorban fut: nincs szélességkorlát, és 720px felett tiltjuk a tördelést */
.pl-title{font-weight:900; font-size:clamp(20px,3vw,32px); line-height:1.15; letter-spacing:-.015em;
  color:var(--ink); text-align:center; margin:0 auto clamp(14px,2vw,20px)}
@media(min-width:720px){ .pl-title{white-space:nowrap} }

/* ---------- KALKULÁTOR CTA a GYIK-válaszban ---------- */
.faq .ans a.calc-cta{display:inline-flex; align-items:center; gap:7px; margin-top:12px; font-weight:700; font-size:13px;
  color:#fff; background:var(--orange); padding:9px 15px; border-radius:8px; text-decoration:none; box-shadow:0 6px 14px rgba(251,147,50,.26); transition:.15s}
.faq .ans a.calc-cta:hover{background:var(--orange-2)}
.faq .ans a.calc-cta svg{width:16px; height:16px; flex:none}

/* ---------- KALKULÁTOR CTA a táblázat alatt ---------- */
.calc-band{text-align:center; margin-top:clamp(22px,3vw,30px)}
.calc-band-btn{display:inline-flex; align-items:center; gap:9px; font-weight:700; font-size:15px; color:var(--orange-dark);
  background:var(--orange-soft); border:1.5px solid var(--orange-line); border-radius:var(--r-sm); padding:13px 24px; text-decoration:none; transition:.15s}
.calc-band-btn:hover{background:#FFE7C9; border-color:var(--orange)}
.calc-band-btn svg{width:18px; height:18px; flex:none}

/* ---------- EGYEDI AJÁNLAT (halk, csak akinek nem passzol) ---------- */
.custom-note{max-width:640px; margin:clamp(16px,2.2vw,24px) auto 0; text-align:center; font-size:13.5px; color:var(--muted); line-height:1.6}
.custom-note a{color:var(--orange-2); font-weight:700; text-decoration:underline; text-underline-offset:2px}

/* ---------- ZÁRÓ MEGRENDELEM ---------- */
.closing{text-align:center; margin-top:clamp(30px,4vw,44px)}
.closing-lead{font-weight:800; font-size:clamp(18px,2.4vw,24px); color:var(--ink); margin:0 0 14px}
.closing-cta{display:inline-block; font-weight:700; font-size:16px; color:#fff; background:var(--orange); border-radius:var(--r-sm);
  padding:15px 34px; text-decoration:none; box-shadow:0 12px 24px rgba(251,147,50,.32); transition:transform .12s, background .15s}
.closing-cta:hover{background:var(--orange-2); transform:translateY(-1px)}

/* ---------- KALKULÁTOR SZEKCIÓ ---------- */
.calc-section{margin-top:clamp(34px,4.6vw,56px)}

/* ---------- NÉZETVÁLTÓ (v21): kalkulátor / árlista ---------- */
.viewbar{text-align:center; margin:0 0 clamp(14px,2vw,20px)}
/* kompakt, lekerekített téglalap; az aktív fül narancs */
.viewseg{display:inline-flex; gap:3px; padding:3px; background:var(--grey-soft);
  border:1px solid var(--line); border-radius:10px}
.viewseg button{font:inherit; font-weight:700; font-size:13.5px; line-height:1.2; color:var(--muted);
  background:transparent; border:none; border-radius:8px; padding:7px 16px; cursor:pointer;
  white-space:nowrap; transition:background .15s, color .15s}
.viewseg button:hover{color:var(--ink)}
.viewseg button.on{background:var(--orange); color:#fff; box-shadow:0 4px 10px rgba(251,147,50,.28)}
.viewseg button.on:hover{background:var(--orange-2); color:#fff}
.view[hidden]{display:none}
.head[hidden]{display:none}
/* a kalkulátor nézet főcíme: a kalkulátorban használt tipográfia, változatlanul */
.calc-hero{text-align:center; margin:clamp(10px,1.6vw,20px) auto 0; max-width:780px}
.calc-hero h1{font-weight:900; font-size:clamp(28px,5vw,50px); line-height:1.1; letter-spacing:-.01em; margin:0 auto; max-width:22ch}
.calc-hero .l1{display:block; color:var(--orange-2)}
.calc-hero .l2{display:block; font-weight:700; color:var(--ink); margin-top:6px}
.calc-hero .l2 .u{font-style:italic; text-decoration:underline; text-decoration-thickness:4px; text-underline-offset:5px; text-decoration-color:var(--orange)}
/* a nézeten belül a kalkulátor már a lap tetején van, nem kell nagy felső térköz */
#view-kalkulator .calc-section{margin-top:clamp(8px,1.2vw,14px)}
/* a kalkulátor a fehér zónán belül ül, ezért kártyaként keretezzük */
#view-kalkulator .calc-slot{border-radius:var(--r); overflow:hidden; box-shadow:0 4px 14px rgba(43,49,56,.09), 0 26px 56px rgba(43,49,56,.17)}

/* aktív fizetési mód egysoros magyarázata a kapcsoló alatt */
.mode-note{text-align:center}
.mode-note .line{margin:0}

/* a táblázat alatt: mettől érvényesek a díjak */
.tariff-valid{text-align:center; font-size:12.5px; color:var(--muted); margin:10px 0 0}