.card-mobility-component-tariffs-component{max-width:1200px;margin:30px auto;border-radius:0 12px 12px 12px;.hidden{display:none !important}
.button-switch-tariff-subscription{display:flex;flex-direction:row;.tariff-tab,.subscription-tab{border-radius:16px 16px 0 0;font-style:normal;font-weight:700;gap:8px;padding:10px 24px;background:#F7F8FB;cursor:pointer;&.active{color:#d3135a;background:white}
}
}
.tariffs-container,.tab-content-subscription{display:flex;flex-direction:column;background:#FFF;.full-container-offer{display:flex;flex-direction:row;gap:24px;.container-image-offer{padding:36px 0 24px 24px;.images-container{.left-part{.left-part{min-width:386px;height:600px;background:#d3135a}
}
}
}
.tab-content-tariff{display:flex;flex-direction:column;padding:24px 24px 24px 0;width:100%;.single-offer{display:flex;flex-direction:column;.right-part{.container-off-top{margin-top:16px;border-radius:8px;//border:1px solid #272C34;border:1px solid #C2CDDD;padding:16px;background:#ffffff;.header-off-top{display:flex;flex-direction:row;justify-content:space-between;margin-bottom:8px;.ribbon-title{display:flex;flex-direction:column;gap:12px;width:100%;.ribbon{border-radius:50px;background:#f5c541;gap:8px;font-size:14px;padding:2px 8px;width:fit-content}
.ribbon-advantage{display:flex;gap:16px;.ribbon-adv-first{border-radius:50px;color:white;background:#0047cc;border:1px solid white;gap:8px;font-size:14px;padding:2px 8px;width:fit-content}
.ribbon-adv-second{border-radius:50px;color:#0047cc;background:white;border:1px solid #0047cc;gap:8px;font-size:14px;padding:2px 8px;width:fit-content}
}
.title{font-size:24px;font-weight:700;color:black;display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;.wrapper-title{display:flex;.radio-wrapper{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none;input[type="radio"]{display:none}
.radio-custom{width:22px;height:22px;border-radius:50%;border:2.5px solid #b0b8c9;background:#fff;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s;flex-shrink:0;&::after{content:'';width:8px;height:8px;border-radius:50%;background:#fff;opacity:0;transition:opacity .2s}
}
input[type="radio"]:checked+.radio-custom{background:#e8006f;border-color:#e8006f;&::after{opacity:1}
}
}
}
.description-only-close{display:flex;flex-direction:row;gap:8px;font-size:14px;font-weight:700;color:#131416;align-items:baseline;.textbeforeprice{.price{background:linear-gradient(90deg,#0047cc 0,#3b80ff 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:14px;font-style:normal;font-weight:700;line-height:14px}
}
.detailpricenadtitle{display:flex;gap:0;align-items:baseline;.titlepricead{background:linear-gradient(90deg,#0047cc 0,#3b80ff 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:24px;font-weight:700;line-height:24px}
.detailpricead{background:linear-gradient(90deg,#0047cc 0,#3b80ff 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:12px;font-weight:700;line-height:12px}
}
}
}
}
.switch{height:fit-content;display:flex;padding:4px;background:white;align-items:center;border-radius:4px;.left-switch,.right-switch{display:flex;gap:4px;color:#272C34;font-size:16px;border-radius:4px;padding:8px 12px;cursor:pointer;&.active{background:#d3135a;color:white;font-weight:700}
}
}
}
.description{color:#272c34;font-size:14px;//margin-bottom:16px}
.advantages{margin:16px auto;display:flex;gap:16px;justify-content:space-between;.ad{display:flex;flex-direction:row;gap:16px;width:100%;align-items:center;.single-advantage{display:flex;gap:8px;img{max-height:24px}
.text-single-advantage{color:#131416;font-size:14px;font-weight:700}
}
}
.price-advantage{display:flex;align-items:baseline;.title{font-size:24px;font-style:normal;font-weight:700;background:linear-gradient(90deg,#0047cc 0,#3b80ff 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:24px}
.detail{font-size:12px;font-style:normal;font-weight:700;background:linear-gradient(90deg,#0047cc 0,#3b80ff 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;line-height:16px}
}
}
.separator{border-top:solid 1px #c2cddd}
.body-off-bottom{.price-section{display:flex;margin:24px 0;gap:16px;justify-content:space-between;width:100%;.single-element{display:flex;flex-direction:column;gap:16px;width:100%;max-width:250px;.header{display:flex;flex-direction:column;gap:8px;.energy-title{font-weight:700;font-size:16px;display:flex;gap:4px;img{max-width:40px}
}
.energy-subtitle{font-weight:700;font-size:14px}
}
.body-wrapper-cmp{display:flex;background:linear-gradient(180deg,rgba(239,242,247,0.00) 0,#EFF2F7 100%);height:100%;flex-direction:column;justify-content:center;.body,.body-extra{display:flex;align-items:stretch;justify-content:space-between;flex-direction:column;.upper-body{display:flex;padding:0 12px 0 12px;align-items:center;justify-content:space-between;flex-direction:row;.left-part-body{display:flex;flex-direction:column;.time-slot{font-size:12px;font-weight:700}
.time{font-size:12px;font-weight:700}
}
.right-part-body{.price{-webkit-text-fill-color:transparent;background:-webkit-gradient(linear,left top,right top,from(#0047cc),to(#3b80ff));background:linear-gradient(90deg,#0047cc,#3b80ff);font-size:24px;font-weight:700;background-clip:text;line-height:24px}
.price-detail{-webkit-text-fill-color:transparent;background:-webkit-gradient(linear,left top,right top,from(#0047cc),to(#3b80ff));background:linear-gradient(90deg,#0047cc,#3b80ff);font-size:12px;font-weight:700;background-clip:text}
}
}
.lower-body{padding:0 12px 12px 12px;display:flex;justify-content:flex-end;align-items:baseline;.price-barred{font-size:16px;background:linear-gradient(90deg,#0047cc 0,#3b80ff 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:-1px;text-decoration-line:line-through}
.price-detail{background:linear-gradient(90deg,#0047cc 0,#1f6cf9 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:12px}
}
}
}
}
}
.extra-offer{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-end;padding:16px;border-radius:8px;background:#ffffff;//border:1px solid #272C34;border:1px solid #C2CDDD;.extra-offer-left{display:flex;flex-direction:column;gap:12px;.ribbon{border-radius:50px;border:1px solid #0047cc;color:#0047cc;padding:2px 8px;font-weight:400}
.title{.toggle-wrapper{display:inline-flex;align-items:center;cursor:pointer;user-select:none;input[type="checkbox"]{display:none}
.toggle-track{width:40px;height:24px;border-radius:100px;background:#b0b8c9;display:flex;align-items:center;padding:4px;transition:background .25s ease;box-sizing:border-box;.toggle-thumb{width:16px;height:16px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;margin-left:0;transition:margin-left .25s ease;flex-shrink:0;.toggle-check{width:10px;height:10px;opacity:0;transition:opacity .2s}
}
}
input[type="checkbox"]:checked+.toggle-track{background:#e8006f;.toggle-thumb{margin-left:calc(100% - 8px - 8px);.toggle-check{opacity:1}
}
}
}
.title-text{font-weight:700;font-size:18px}
}
}
.extra-offer-right{display:flex;align-items:baseline;.description{font-size:14px;font-weight:700;margin-right:12px}
.componed-price{.price{background:linear-gradient(90deg,#0047cc 0,#3b80ff 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:24px;font-weight:700}
.price-detail{background:linear-gradient(90deg,#0047cc 0,#3b80ff 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-size:12px;font-weight:700}
}
}
}
}
}
}
}
}
}
.button-open-modal{width:100%;border-radius:8px;background:#d3135a;color:white;cursor:pointer;text-align:center;margin-top:16px;padding:10px 0}
}
.legal-notes{font-size:12px;color:#272C34;.link-legal-notes{color:#d3135a}
}
}
@media(min-width:834px) and (max-width:1200px){.card-mobility-component-tariffs-component{max-width:84%;.tariffs-container,.tab-content-subscription{.container-image-offer{width:270px;.images-container{.left-part{img{width:270px}
}
}
}
.tab-content-tariff{.single-offer{.right-part{.container-off-top{.header-off-top{.ribbon-advantage{flex-direction:column !important;gap:8px !important}
.title{flex-direction:column !important;align-items:flex-start !important}
}
.body-off-bottom{.price-section{.single-element{.body-wrapper-cmp{.body,.body-extra{align-items:flex-start !important;justify-content:space-between !important;flex-direction:column !important;.upper-body{align-items:flex-start !important;flex-direction:column !important;gap:0 !important}
}
}
}
}
.extra-offer{flex-direction:column !important;align-items:flex-start !important;.extra-offer-left{.ribbon{font-weight:400 !important}
}
.extra-offer-right{display:flex;width:100%;justify-content:space-between;align-items:baseline}
}
}
}
}
}
}
}
}
}
@media(min-width:768px) and (max-width:833px){.card-mobility-component-tariffs-component{max-width:90%;.tariffs-container,.tab-content-subscription{padding:24px !important;.container-image-offer{display:none}
.tab-content-tariff{padding:0 !important;.single-offer{.right-part{.container-off-top{.header-off-top{.ribbon-advantage{flex-direction:column !important;gap:8px !important}
.title{flex-direction:column !important;align-items:flex-start !important}
}
.body-off-bottom{.price-section{.single-element{.body-wrapper-cmp{.body,.body-extra{align-items:flex-end !important;justify-content:space-between !important;flex-direction:column !important;.upper-body{gap:20px !important;align-items:flex-start !important;flex-direction:row !important}
}
}
}
}
.extra-offer{flex-direction:column !important;align-items:flex-start !important;.extra-offer-left{.ribbon{font-weight:400 !important}
}
.extra-offer-right{display:flex;width:100%;justify-content:space-between;align-items:baseline}
}
}
}
}
}
}
}
}
}
@media(max-width:768px){.button-switch-tariff-subscription{display:flex;flex-direction:row;.tariff-tab,.subscription-tab{font-size:14px}
}
.card-mobility-component-tariffs-component{max-width:90%;.tariffs-container,.tab-content-subscription{padding:16px !important;.container-image-offer{display:none}
.tab-content-tariff{padding:0 !important;.single-offer{.right-part{.container-off-top{.header-off-top{margin-bottom:16px !important;.ribbon-advantage{flex-direction:column !important;gap:8px !important}
.title{flex-direction:column !important;align-items:flex-start !important;.description-only-close{font-size:12px;align-items:center !important;.textbeforeprice{font-size:12px !important}
.detailpricenadtitle{min-width:100px}
}
}
}
.advantages{.ad{flex-direction:column !important;gap:0;align-items:flex-start !important}
.price-advantage{display:none}
}
.switch{margin-top:12px;height:fit-content;display:flex;padding:4px;background:white;align-items:center;border-radius:8px !important;justify-content:center;box-shadow:0 2px 8px 0 rgba(102,119,144,0.2);.left-switch,.right-switch{width:50%;display:flex;gap:4px;color:#272C34;font-size:14px !important;border-radius:4px;padding:3px 12px !important;align-items:center;&.active{background:#d3135a;color:white;font-weight:700}
}
}
.body-off-bottom{.price-section{flex-direction:column;.single-element{max-width:100% !important;.header{flex-direction:row !important;justify-content:space-between !important}
.body-wrapper-cmp{.body,.body-extra{align-items:flex-start !important;justify-content:space-between !important;flex-direction:column !important;.upper-body{align-items:flex-start !important;width:95%}
.lower-body{width:95%;text-align:end;margin-right:8px}
}
}
}
}
.extra-offer{flex-direction:column !important;align-items:flex-start !important;.extra-offer-left{.ribbon{font-size:12px;font-weight:700 !important}
}
.extra-offer-right{display:flex;width:100%;justify-content:space-between;align-items:flex-end;margin-top:8px;.description{font-size:12px;margin:0 !important}
.componed-price{display:flex;flex-direction:row;align-items:baseline}
}
}
}
}
}
.energy-title{width:61%;align-items:center}
.energy-subtitle{font-size:12px !important}
}
}
}
}
}
.container-off-top{border:1px solid #c2cddd}
.container-off-top.active-border{border:1px solid #272c34 !important;background:#f7f8fb !important}
.extra-offer.active-border{border:1px solid #272c34 !important;background:#f7f8fb !important}
@media screen and (min-width:576px){.read-more .content{display:flex;justify-content:space-between;align-items:center;gap:50px}
.footer-store{display:flex;align-items:center;gap:15px}
}
a.bottom-sheet__open.button-tariffs{text-decoration:none !important;display:block}
.legal-notes a{color:#d3135a}
.share-buttons{gap:20px}
.share-buttons a.share-google-play img,.share-buttons a.share-apple-store img{text-decoration:none}
.share-buttons a.share-google-play img,.share-buttons a.share-apple-store img{width:135px;height:auto}
img.qr-code-app{filter:drop-shadow(0 2px 8px #66779033);height:114px}
.container-image-offer{.images-container{height:100%;.left-part{height:100%;overflow:hidden;display:flex;justify-content:center;align-items:flex-start;border-radius:10px;}
&.no-selection .left-part img{height:100%}
}
}