@font-face {
    font-family: "iransens";
    font-style: normal;
    font-weight: normal;
    src: url("fonts/IRANSansWeb.eot?#iefix") format("embedded-opentype"), url("fonts/IRANSansWeb.woff2") format("woff2"), url("fonts/IRANSansWeb.woff") format("woff"), url("fonts/IRANSansWeb.ttf") format("truetype"), url("fonts/IRANSansWeb.svg#svgFontName") format("svg");
}

@font-face {
    font-family: "iransensblod";
    font-style: bold;
    font-weight: bold;
    src: url("fonts/IRANSansWeb_Bold.eot?#iefix") format("embedded-opentype"), url("fonts/IRANSansWeb_Bold.woff2") format("woff2"), url("fonts/IRANSansWeb_Bold.woff") format("woff"), url("fonts/IRANSansWeb_Bold.ttf") format("truetype"), url("fonts/IRANSansWeb_Bold.svg#svgFontName") format("svg");
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body {
    height: auto;
    margin: 0;
    direction: rtl;
    background-color: #fdfdfd;
    /* یا هر رنگی که انتخاب کردی */
}

.clear {
    clear: both
}



.content {
    border-radius: 2px;
    background-color: #fff;
}

header {
    direction: rtl;
    float: right;
    padding: 30px 0;
    width: 100%;
}

.menue {
    background: #005d97;
    margin-right: 20px;
    box-shadow: 1px 1px 2px 1px #eae9e9;
    float: right;
    border-radius: 6px;
    margin-top: 5px;
}

header ul {
    margin-top: 0;
    float: right;
    margin-bottom: 0;
    padding: 15px 15px;
}

.menue li {
    float: right;
    list-style: none;
    text-align: center;
    margin-right: 0;
    margin-left: 10px;
    position: relative;
    padding-left: 15px;
    color: #c0c0c0;
    -webkit-transition: all 1s cubic-bezier(0.25, 0.1, 0.76, 0.04);
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}

.menue li:last-child:after {
    display: none;
}

.menue li:after {
    background: url(image/nav_line.png) no-repeat;
    content: " ";
    height: 90px;
    left: 0px;
    top: -10px;
    position: absolute;
    width: 1px;
}

.menue a {
    text-decoration: none;
}

.menue span {
    font-family: Vazirmatn, iransens;
    color: #ffffff;
    font-size: 15px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
}

.menue span:hover {
    font-family: Vazirmatn, iransens;
    color: #efec00;
    font-size: 15px;
}

.logo {
    display: flex;
    /* Flexbox برای وسط‌چینی عمودی */
    align-items: center;
    /* عمودی وسط‌چینی */
    float: left;
    margin-left: 20px;
    height: 40px;
    /* حذف ارتفاع ثابت */
}

.logo img {
    height: 60px;
    /* تنظیم ارتفاع استاندارد برای لوگو */
    width: auto;
    /* تنظیم خودکار عرض متناسب با ارتفاع */
    margin-top: 15px;
}


.slide {
    margin-top: 25px;
    margin-bottom: 20px;
}


.parent-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* وسط‌چین کردن افقی فرزندان */
    width: 100%;
}

.form-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* وسط‌چین کردن محتوای هر المان فرم */
    width: 100%;
    margin-bottom: 20px;
    font-size: 14px;
}

.chpm,
.chpms {
    width: 100%;
    padding: 10px;
    border-radius: 20px;
    background: #4c4c4c10;
    color: #576071;
    font-family: Vazirmatn, iransens;
}

.chpms {
    color: #f0656f;
    font-size: 14px;
    text-align: center;

}

.dot a {
    display: inline-block;
    width: 200px;
    text-align: center;
    padding: 11px;
    border-radius: 9px;
    background: #4CAF50;
    color: white;
    font-size: 16px;
    margin-bottom: 120px;
}



.filoff {
    background: #e3bf13bf;
    font-size: 13px;
    width: 95%;
    border-radius: 6px;
    color: black;
    font-family: Vazirmatn, iransens;
    text-align: center;
    position: relative;
}


.filoffc {
    background: #f0656f;
    font-size: 13px;
    width: 95%;
    border-radius: 6px;
    color: white;
    font-family: Vazirmatn, iransens;
    text-align: center;
    position: relative;
    padding: 01px;
}


.wapp {
    background: #ffd01ee0;
    font-size: 13px;
    width: 100%;
    border-radius: 6px;
    color: #333333;
    font-family: Vazirmatn, iransens;
    text-align: center;
    position: relative;
    padding: 01px;
}

.wapp span {
    color: #333333;
    font-family: Vazirmatn, iransensblod;
    text-decoration: none;
}

.wapp h2 {
    text-align: center;
    color: #ffffff;
    font-family: Vazirmatn, iransens;
    font-size: 14px;
    direction: rtl;
    text-decoration: none;
}

.wapp h2 span {
    color: #333333;
    font-family: Vazirmatn, iransensblod;
    text-decoration: none;
}

.wapp a {
    text-decoration: none;
}



.telegram1 {
    background: #333333;
    font-size: 15px;
    width: 100%;
    border-radius: 6px;
    color: white;
    font-family: Vazirmatn, iransensblod;
    text-align: center;
    position: relative;
    padding: 01px;
}

.telegram1 h2 {
    text-align: center;
    color: #ffffff;
    font-family: Vazirmatn, iransens;
    font-size: 15px;
    direction: rtl;
    text-decoration: none;
}

.telegram1 h2 span {
    color: #FF3300;
    font-family: Vazirmatn, iransensblod;
    text-decoration: none;
}

.telegram1 a {
    text-decoration: none;
}



.needlog {
    background-color: #000000;
    padding: 20px 0 5px;
    overflow: hidden;
}

.needlog a {
    text-decoration: none;
}

.needlog img {
    margin-top: 6px;
    margin-right: -12px;
}

.needlog h2 {
    text-align: center;
    color: #ffffff;
    font-family: Vazirmatn, iransens;
    font-size: 17px;
    direction: rtl;
    margin-top: -45px;
    text-decoration: none;
}

.needlog h2 span {
    color: #ff0000;
    font-family: Vazirmatn, iransensblod;
    text-decoration: none;
}

.needlog h3 {
    text-align: center;
    color: #ffffff;
    font-family: Vazirmatn, iransens;
    font-size: 17px;
    direction: ltr;
    margin-top: -20px;
    margin-left: -80px;
    text-decoration: none;
}

.needlog h3 span {
    color: #ff0000;
    font-family: Vazirmatn, iransensblod;
    text-decoration: none;
}











.sec-menu-box {
    margin: 50px 0;
    overflow: hidden;
}

.sec-menu-box h3 {
    text-align: center;
    font-family: Vazirmatn, iransens;
    color: #525252;
    font-size: 13px;
}

.sec-menu-box .row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.bg-conectiondl-one {
    background: #efefef;
    border: solid 4px #ecebeb;
    border-radius: 100px;
    color: #ff0000;
    height: 155px;
    margin: 0 auto 11px;
    padding-top: 55px;
    width: 155px;
}

.bg-conectiondl-one:hover {
    background: #ff0000;
    -moz-transform: rotate(360deg);
    -moz-transition: 600ms ease-in;
    -ms-transform: rotate(360deg);
    -ms-transition: 600ms ease-in;
    -webkit-transform: rotate(360deg);
    -webkit-transition: 600ms ease-in;
    -o-transform: rotate(360deg);
    -o-transition: 600ms ease-in;
}

.conectiondl-one {
    margin-left: 43px;
    margin-top: -13px;
    padding-top: 75px;
    background: url(image/jahan.png) no-repeat;
}

.bg-conectiondl-one:hover .conectiondl-one {
    background: url(image/jahan-hover.png) no-repeat;
}

.bg-conectiondl-two {
    background: #efefef;
    border: solid 4px #ecebeb;
    border-radius: 100px;
    color: #ff0000;
    height: 155px;
    margin: 0 auto 11px;
    padding-top: 55px;
    width: 155px;
}

.bg-conectiondl-two:hover {
    background: #ff0000;
    -moz-transform: rotate(360deg);
    -moz-transition: 600ms ease-in;
    -ms-transform: rotate(360deg);
    -ms-transition: 600ms ease-in;
    -webkit-transform: rotate(360deg);
    -webkit-transition: 600ms ease-in;
    -o-transform: rotate(360deg);
    -o-transition: 600ms ease-in;
}

.conectiondl-two {
    margin-left: 43px;
    margin-top: -17px;
    padding-top: 75px;
    background: url(image/poshtibani.png) no-repeat;
}

.bg-conectiondl-two:hover .conectiondl-two {
    background: url(image/poshtibani-hover.png) no-repeat;
}

.bg-conectiondl-teree {
    background: #efefef;
    border: solid 4px #ecebeb;
    border-radius: 100px;
    color: #ff0000;
    height: 155px;
    margin: 0 auto 11px;
    padding-top: 55px;
    width: 155px;
}

.bg-conectiondl-teree:hover {
    background: #ff0000;
    -moz-transform: rotate(360deg);
    -moz-transition: 600ms ease-in;
    -ms-transform: rotate(360deg);
    -ms-transition: 600ms ease-in;
    -webkit-transform: rotate(360deg);
    -webkit-transition: 600ms ease-in;
    -o-transform: rotate(360deg);
    -o-transition: 600ms ease-in;
}

.conectiondl-teree {
    margin-left: 43px;
    margin-top: -13px;
    padding-top: 75px;
    background: url(image/amoozesh.png) no-repeat;
}

.bg-conectiondl-teree:hover .conectiondl-teree {
    background: url(image/amoozesh-hover.png) no-repeat;
}

.bg-conectiondl-four {
    background: #efefef;
    border: solid 4px #ecebeb;
    border-radius: 100px;
    color: #ff0000;
    height: 155px;
    margin: 0 auto 11px;
    padding-top: 55px;
    width: 155px;
}

.bg-conectiondl-four:hover {
    background: #ff0000;
    -moz-transform: rotate(360deg);
    -moz-transition: 600ms ease-in;
    -ms-transform: rotate(360deg);
    -ms-transition: 600ms ease-in;
    -webkit-transform: rotate(360deg);
    -webkit-transition: 600ms ease-in;
    -o-transform: rotate(360deg);
    -o-transition: 600ms ease-in;
}

.conectiondl-four {
    margin-left: 43px;
    margin-top: -23px;
    padding-top: 95px;
    background: url(image/lamp.png) no-repeat;
}

.bg-conectiondl-four:hover .conectiondl-four {
    background: url(image/lamp-hover.png) no-repeat;
}

.conectiondl-four img {
    margin-right: 43px;
    margin-top: -25px;
}













.service-one-box ul {
    padding: 0;
    margin: 0;
}

.service-one-box ul li a {
    text-decoration: none;
}

.service-one-box li {
    float: right;
    list-style: none;
    position: relative;
    height: 370px;
    margin: 30px 0 15px;
    border-radius: 4px;
}

.service-one-box li:hover {}

.service-one-box li:hover .service-one-box-titr-btn {
    background-color: #000;
}

nav {
    background-color: #000000;
}

.service-one-box-titr-bg {
    height: 105px;
    width: 105px;
    background-color: #607d8b;
    border-radius: 70px;
    margin-right: 30%;
    margin-top: 15px;
    display: none;
}

.service-one-box li:hover .service-one-box-titr-bg {
    background-color: #2196f3;
}

.service-one-box-titr {
    height: 30px;
    width: 172px;
    background-color: #33333312;
    border-radius: 70px;
    /* margin-right: 30%; */
    Box-shadow: inset 2px 2px 4px #4c4c4c;
    /* text-align: center; */
    margin: 0 auto;
}

.service-one-box li:hover .service-one-box-titr {
    background-color: #cc0f0f;
    Box-shadow: inset 2px 2px 4px #8a1515;
}


.service-one-box-titr h2 {
    font-family: Vazirmatn, iransens;
    color: #525252;
    font-size: 16px;
    padding-top: 4px;
    margin-top: 17px;
    text-align: center;
}

.service-one-box-titr img {
    margin: 16px 26px -10px;
}

.serviceoff h2 {
    font-family: Vazirmatn, iransens;
    color: #666666;
    font-size: 12px;
    padding-top: 15px;
    text-align: center;
}

.serviceoff img {
    margin: 55px 0 20px;
}


.service-one-box-titr h3 {
    color: #000000;
    font-family: Vazirmatn, iransensblod;
    font-size: 25px;
    margin-top: 1px;
    /* text-align: center; */
    display: flex;
    /* text-align: center; */
    /* width: 160px; */
    position: relative;
    right: 20px;
}

.service-one-box-titr h3 span {
    font-family: Vazirmatn, iransens;
    font-size: 14px;
    float: right;
    padding-right: 8px;
    position: relative;
    top: 4px;
}

.service-one-box-titr-btn {
    background-color: #FF3300;
    width: 162px;
    height: 35px;
    border-radius: 10px;
    margin-right: 5px;
    margin-top: -12px;
}

.service-one-box-titr-btn h2 {
    font-family: Vazirmatn, iransens;
    color: #ffffff;
    font-size: 17px;
    margin-top: -21px;
    margin-right: 25px;
}


.service-one-box-titr-btn i {
    color: #ffffff;
    font-size: 23px;
    margin-right: 30px;
    margin-top: 5px;
}


.service-one-box-titr-btn1 {
    background-color: #555555;
    width: 158px;
    height: 34px;
    border-radius: 10px;
    margin-right: -30px;
    margin-top: -20px;
}



.service-one-box-titr-btn1 h2 {
    font-family: Vazirmatn, iransens;
    color: #ffffff;
    font-size: 17px;
    margin-top: -53px;
    margin-right: 25px;
}


.service-one-box-titr-btn1 i {
    color: #ffffff;
    font-size: 23px;
    margin-right: 30px;
    margin-top: 5px;
}


.service-two {
    background-color: #000000;
    height: 97px;
    width: 100%;
    margin-top: 530px;
}

.service-two p {
    color: #ffffff;
    font-family: Vazirmatn, iransens;
    font-size: 19px;
    text-align: center;
    padding-top: 35px;
}

.service-two-titr {
    background-color: #ff0000;
    width: 45%;
    height: 37px;
    border-radius: 10px;
    margin-right: 275px;
    margin-top: -133px;
}

.service-two-titr h2 {
    font-family: Vazirmatn, iransensblod;
    color: #ffffff;
    text-align: center;
    font-size: 18px;
    padding-top: 3px;
}

.service-two-titr h2 span {
    color: #000000;
}

.line-service {
    text-bottom: center;
    margin-bottom: -450px;
}

.map {
    padding-bottom: 30px;
    overflow: hidden;
    width: 100%;
    text-align: center;
}

footer {
    text-align: center;
}

.menuefooter {
    text-align: center;
    margin: 20px auto 0;
    max-width: 810px;
}

.menuefooter ul {
    max-width: 680px;
    margin: 0 auto;
}

.menuefooter ul li {
    float: right;
    list-style: none;
    padding-left: 30px;
}

.menuefooter ul li a {
    text-decoration: none;
    font-family: Vazirmatn, iransens;
    color: #525252;
}

.menuefooter ul li a:hover {
    color: #ff0000;
}

.menuefooter ul li:last-child:after {
    display: none;
}

#site-wide-footer {
    background: #222222;
    color: #dbdbdb;
    padding: 10px 0 0 0;
}

.footer-note h2 {
    font-family: 'Roya', Tahoma, Arial, Helvetica, sans-serif;
    font-size: 24px;
}

.footer-note p,
.copyright-content {
    font-family: "HNArabic", Tahoma, Arial, Helvetica, sans-serif;
    font-size: 13px;
    border-top: 1px solid #3C3C3C;
    margin-top: 25px;
    background-color: #171717;
    padding: 10px 0 10px 0;
    text-align: center;
}

.copyright {
    text-align: center;
    font-family: Vazirmatn, iransens;
    color: #525252;
    padding-top: 30px;
    width: 1020;
}

.copyright p {}

.copyright p a {
    text-decoration: none;
}

.copyright p a span {
    color: #ff0000;
}

.accessible {
    position: fixed;
    left: -9999px;
    top: auto;
    width: 5px;
    height: 5px;
    overflow: hidden;
}

.logo h1 {
    display: none;
}

img,
embed,
object,
video {
    max-width: 100%;
    width: auto\9;
    height: auto;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
}

.boxall {
    background: #333333;
    width: 100%;
    border-radius: 6px;
    color: #efefef;
    font-family: Vazirmatn, iransens;
    font-size: 14px;
    text-align: center;
    position: relative;
    padding: 24px 0 10px;
}

.servicetitle p {
    padding: 0;
    margin: 0;
}

.servicetitr {
    position: absolute;
    top: -16px;
    right: 0;
    left: 0;
}

.servicetitr h2 {
    color: white;
    background: orangered;
    max-width: 500px;
    text-align: center;
    margin: 0 auto;
    font-size: 20px;
    border-radius: 20px;
}

.service1,
.service2 {
    overflow: hidden;
    padding: 0px 0 40px;
}

.servicetitle p.onep {
    color: #00ffb4e3;
}

.servicetitle p.onep span {
    color: #43b3e6;
}

.servicetitle p.onep spang {
    color: #fef242;
}

.slicknav_menu {
    font-size: 16px;
    box-sizing: border-box;
    background: #000000;
    padding: 5px;
    position: relative;
    font-family: Vazirmatn, iransens !important;
}

.slicknav_menu ul li a {
    color: #e6e6e6;
    font-family: Vazirmatn, iransens !important;
}

.slicknav_menu {
    display: none;
}

@media screen and (max-width:988px) {

    /* #menu is the original menu */
    .slicknav_menu {
        display: block;
    }
}

.content {

    margin: 0 auto !important;
}

.telegram a {
    text-decoration: none;
    display: block;
    max-width: 420px;
    margin: 0 auto;
}


.needlog a {
    text-decoration: none;
    display: block;
    max-width: 420px;
    margin: 0 auto;
}


.conection-service {
    float: right !important;
}

.col-md-3.col-sm-6.text-center {
    float: right;
}

.col-md-13.col-sm-6.text-center {
    float: right;
}











/*------------------- 5.13 Why Choose Us -------------------*/
.why-chose-wrap-layout1 {
    padding: 0 0 2rem;
}

.why-chose-wrap-layout2 {
    padding: 0 0 2rem;
}

.why-chose-wrap-layout3 {
    padding: 12rem 0;
}

.why-chose-wrap-layout4 {
    padding: 12rem 0 5.5rem;
}

.why-chose-box-layout1 {
    padding-right: 1rem;
}

@media only screen and (max-width: 991px) {
    .why-chose-box-layout1 {
        padding-right: 0;
    }
}

.why-chose-box-layout1 .item-title {
    font-size: 20px;
    color: #525252;
    font-family: Vazirmatn, iransens;
    font-weight: 600;
}

.why-chose-box-layout1 .item-subtitle {
    font-size: 16px;
    color: #FF3333;
    font-family: Vazirmatn, iransens;
    font-weight: 500;
    margin-bottom: 30px;
}

.why-chose-box-layout1 .single-item li {
    font-size: 13px;
    margin-bottom: 15px;
    padding-right: 10px;
    position: relative;
    font-family: Vazirmatn, iransens;
    color: #525252;
}

.why-chose-box-layout1 .single-item li2 {
    margin-bottom: 15px;
    padding-right: 10px;
    position: relative;
    font-size: 11px;
    font-family: Vazirmatn, iransens;
    color: #525252;
}

.why-chose-box-layout1 .single-item li:after {
    font-size: 24px;
    font-family: Vazirmatn, iransens;
    color: red;
    font-weight: 600;
    position: absolute;
    top: 2px;
    right: 0;
}

.why-chose-box-layout2 .item-img {
    animation: bouncebubble infinite 5000ms;
}

@media only screen and (max-width: 991px) {
    .why-chose-box-layout2 {
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 991px) {
    .why-chose-box-layout3 {
        margin-bottom: 30px;
    }
}

.why-chose-box-layout4 .item-title {
    font-weight: 600;
    color: #111111;
    margin-bottom: 25px;
}

.why-chose-box-layout5 {
    width: 100%;
    display: flex;
}

@media only screen and (max-width: 1199px) {
    .why-chose-box-layout5 {
        display: block;
        text-align: center;
    }
}

.why-chose-box-layout5 .single-item {
    width: 50%;
}

@media only screen and (max-width: 1199px) {
    .why-chose-box-layout5 .single-item {
        width: 100%;
    }

    .why-chose-box-layout5 .single-item .item-img {
        margin-bottom: 30px;
    }
}

.why-chose-box-layout5 .single-item .item-content .item-subtitle {
    margin-bottom: 5px;
}

.why-chose-box-layout5 .single-item .item-content .item-title {
    font-weight: 500;
    color: #111111;
}

.why-chose-box-layout5 .single-item .item-content .counter-box {
    display: flex;
    margin-top: 40px;
}

@media only screen and (max-width: 1199px) {
    .why-chose-box-layout5 .single-item .item-content .counter-box {
        justify-content: center;
    }
}

.why-chose-box-layout5 .single-item .item-content .counter-box .single-count {
    margin-left: 12rem;
    position: relative;
}

@media only screen and (max-width: 767px) {
    .why-chose-box-layout5 .single-item .item-content .counter-box .single-count {
        margin-right: 8rem;
    }
}

.why-chose-box-layout5 .single-item .item-content .counter-box .single-count:after {
    content: "";
    height: 85px;
    width: 1px;
    background-color: #dadada;
    position: absolute;
    top: 50%;
    left: -6rem;
    transform: translateY(-50%);
}

@media only screen and (max-width: 767px) {
    .why-chose-box-layout5 .single-item .item-content .counter-box .single-count:after {
        right: -5rem;
    }
}

.why-chose-box-layout5 .single-item .item-content .counter-box .single-count:last-child {
    margin-right: 0;
}

.why-chose-box-layout5 .single-item .item-content .counter-box .single-count:last-child:after {
    display: none;
}

.why-chose-box-layout5 .single-item .item-content .counter-box .single-count .count-number {
    font-size: 48px;
    color: #ff5b17;
    font-weight: 700;
    margin-bottom: 18px;
}

@media only screen and (max-width: 767px) {
    .why-chose-box-layout5 .single-item .item-content .counter-box .single-count .count-number {
        font-size: 36px;
    }
}

.why-chose-box-layout5 .single-item-left {
    padding-right: calc((100% - 1550px) / 2);
}

@media only screen and (max-width: 1199px) {
    .why-chose-box-layout5 .single-item-left {
        padding-left: 0;
    }
}

.why-chose-box-layout5 .single-item-right {
    padding-left: calc((100% - 1200px) / 2);
    padding-right: 5rem;
    padding-top: 2rem;
}

@media only screen and (max-width: 1259px) {
    .why-chose-box-layout5 .single-item-right {
        padding-right: calc((100% - 1110px) / 2);
    }
}

@media only screen and (max-width: 1199px) {
    .why-chose-box-layout5 .single-item-right {
        padding-left: 0;
        padding-right: 0;
    }
}

.why-chose-box-layout6 {
    margin-bottom: 6.5rem;
}

.why-chose-box-layout6 .item-img {
    text-align: center;
}

.why-chose-box-layout6 .item-content .item-title {
    font-weight: 500;
    color: #111111;
}

.why-chose-box-layout6 .item-content .item-list li {
    position: relative;
    margin-bottom: 10px;
    padding-right: 35px;
    color: #111111;
    font-weight: 600;
}

.why-chose-box-layout6 .item-content .item-list li:last-child {
    margin-bottom: 0;
}

.why-chose-box-layout6 .item-content .item-list li:after {
    content: "\f00c";
    font-family: Vazirmatn, iransens;
    font-size: 20px;
    font-weight: 600;
    color: #ff7116;
    position: absolute;
    top: 0;
    right: 0;
}



/*------------------- khodam -------------------*/

.mean-container .mean-bar {
    background: transparent !important;
    float: none;
    padding: 0 !important;
    position: fixed !important;
    top: 0;
    z-index: 7;
}

.mean-container .mean-bar:after {
    content: "";
    clear: both;
    display: block;
}

.mean-container .mean-bar a.logo-mobile-menu {
    width: 100%;
    background-color: rgba(222, 222, 222, 0.95);
    box-sizing: border-box;
}

.mean-container .mean-bar .mobile-menu-nav-back {
    padding-left: 15px;
    border-bottom: 1px solid #b2b2b2;
    position: relative;
    text-align: center;
    height: 50px;
    display: flex;
    align-items: center;
}

.mean-container .mean-bar .mobile-menu-nav-back:before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    background-color: rgba(248, 248, 248, 0.95);
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
}

.mean-container .mean-nav {
    float: none !important;
    background: transparent !important;
}

.mean-container .mean-nav>ul {
    overflow-y: scroll;
    height: 100vh;
}

.mean-container .mean-nav>ul:after {
    content: '';
    display: block;
    clear: both;
}

.mean-container .mean-nav>ul>li>a {
    font-size: 14px;
    color: #111111;
    font-weight: 700;
    background-color: #ebebeb;
    transition: all 0.5s ease-out;
}

.mean-container .mean-nav>ul>li>a:hover {
    color: #07249e;
}

.mean-container .mean-nav>ul>li:hover>a {
    color: #07249e;
    background-color: #ffffff;
}

.mean-container .mean-nav>ul>li li a {
    color: #111111;
    opacity: 1;
    font-weight: 600;
    padding: 0.5em 10%;
    font-size: 14px;
}

.mean-container .mean-nav>ul>li li a:hover {
    background-color: #ffffff;
}

.mean-container .mean-nav>ul>li a.mean-expand {
    background-color: transparent;
    margin-top: 0;
    height: 20px;
    line-height: 27px;
    width: 100%;
    text-align: left;
    font-size: 14px;
    padding: 12px 12px 12px 20px !important;
}

.mean-container .mean-nav>ul>li a.mean-expand:hover {
    background-color: transparent;
}

.mean-container a.meanmenu-reveal {
    float: none !important;
    position: absolute;
    top: 0;
    transition: unset;
    padding: 16px 22px 12px;
}

.mean-container #wrapper {
    padding-top: 50px;
}


/*------------------- khodam-2 -------------------*/



.why-chose-wrap-layout1z {
    padding: 0 0 2rem;
}

.why-chose-wrap-layout2z {
    padding: 0 0 2rem;
}

.why-chose-box-layout1z {
    padding-right: 1rem;
}

@media only screen and (max-width: 991px) {
    .why-chose-box-layout1z {
        padding-right: 0;
    }
}

.why-chose-box-layout1z .item-title {
    font-size: 20px;
    color: #525252;
    font-family: Vazirmatn, iransens;
    font-weight: 600;
}

.why-chose-box-layout1z .item-subtitle {
    font-size: 16px;
    color: #FF3333;
    font-family: Vazirmatn, iransens;
    font-weight: 500;
    margin-bottom: 30px;
}

.why-chose-box-layout1z .single-item li {
    font-size: 13px;
    margin-bottom: 5px;
    padding-right: 10px;
    position: relative;
    font-family: Vazirmatn, iransens;
    color: #525252;
}

.why-chose-box-layout1z .single-item li:after {

    font-size: 24px;
    font-family: Vazirmatn, iransens;
    color: red;
    font-weight: 600;
    position: absolute;
    top: 2px;
    right: 0;
}


.why-chose-box-layout2z .item-img {
    animation: bouncebubble infinite 5000ms;
}

@media only screen and (max-width: 991px) {
    .why-chose-box-layout2z {
        margin-bottom: 30px;
    }
}




.gradient-accent {
    background: -webkit-gradient(linear, left top, right top, from(#ff5252), to(#fa1111));
    background: -webkit-linear-gradient(left, #ff5252, #fa1111);
    background: -o-linear-gradient(left, #ff5252, #fa1111);
    background: linear-gradient(to right, #ff5252, #fa1111);
}

.btn-fill {
    position: relative;
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    color: #ffffff;
    font-family: Vazirmatn, iransens;
    padding: 12px 20px;
    border-radius: 4px;
    margin-top: 16px;
    z-index: 1;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.btn-fill i {
    margin-right: 20px;
}

.btn-fill:after {
    content: "";
    height: 100%;
    width: 0;
    background: -webkit-gradient(linear, left top, right top, from(#fa1111), to(#ff5252));
    background: -webkit-linear-gradient(left, #fa1111, #ff5252);
    background: -o-linear-gradient(left, #fa1111, #ff5252);
    background: linear-gradient(to right, #fa1111, #ff5252);
    border-radius: 4px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.btn-fill:hover {
    color: #ffffff;
}

.btn-fill:hover:after {
    visibility: visible;
    opacity: 1;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .btn-fill {
        padding: 12px 20px;
    }
}






/*------------------- khodam-3 page servers -------------------*/



.why-chose-wrap-layout1s {
    padding: 0 0 2rem;
}

.why-chose-wrap-layout2s {
    padding: 0 0 2rem;
}

.why-chose-box-layout1s {
    padding-right: 1rem;
}

@media only screen and (max-width: 991px) {
    .why-chose-box-layout1s {
        padding-right: 0;
    }
}

.why-chose-box-layout1s .item-title {
    font-size: 13px;
    color: #0091ff;
    font-family: Vazirmatn, iransens;
    font-weight: 600;
}

.why-chose-box-layout1s .item-subtitle {
    font-size: 16px;
    color: #FF3333;
    font-family: Vazirmatn, iransens;
    font-weight: 500;
    margin-bottom: 30px;
}

.why-chose-box-layout1s .single-item li {
    margin-bottom: 5px;
    padding-right: 0px;
    position: relative;
    font-size: 13px;
    font-family: Vazirmatn, iransens;
    color: #525252;
}


.why-chose-box-layout1s .single-item li:after {

    font-size: 24px;
    font-family: Vazirmatn, iransens;
    color: red;
    font-weight: 600;
    position: absolute;
    top: 2px;
    right: 0;
}


.why-chose-box-layout1s .single-item li2 {
    margin-bottom: 5px;
    padding-right: 0px;
    position: relative;
    font-size: 12px;
    font-family: Vazirmatn, iransens;
    color: #858383;
}

.why-chose-box-layout1s .single-item li2:after {

    font-size: 24px;
    font-family: Vazirmatn, iransens;
    color: red;
    font-weight: 600;
    position: absolute;
    top: 2px;
    right: 0;
}




.why-chose-box-layout2s .item-img {
    animation: bouncebubble infinite 5000ms;
}

@media only screen and (max-width: 991px) {
    .why-chose-box-layout2z {
        margin-bottom: 30px;
    }
}




.gradient-accents {
    background: -webkit-gradient(linear, left top, right top, from(#ff5252), to(#fa1111));
    background: -webkit-linear-gradient(left, #ff5252, #fa1111);
    background: -o-linear-gradient(left, #ff5252, #fa1111);
    background: linear-gradient(to right, #ff0000, #fa111173);

}

.btn-fills {
    position: relative;
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    color: #ffffff;
    font-family: Vazirmatn, iransens;
    padding: 12px 20px;
    border-radius: 4px;
    margin-top: 16px;
    right: 10%;
    z-index: 1;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.btn-fills i {
    margin-right: 20px;
}

.btn-fills:after {
    content: "";
    height: 100%;
    width: 0;
    background: -webkit-gradient(linear, left top, right top, from(#ff5252), to(#fa1111));
    background: -webkit-linear-gradient(left, #ff5252, #fa1111);
    background: -o-linear-gradient(left, #ff5252, #fa1111);
    background: linear-gradient(to right, #ff5252, #fa1111);
    border-radius: 4px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.btn-fills:hover {
    color: #ffffff;
}

.btn-fills:hover:after {
    visibility: visible;
    opacity: 1;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .btn-fills {
        padding: 12px 20px;
    }
}





.gradient-accentss {
    background: -webkit-gradient(linear, left top, right top, from(#43ace6), to(#0f93f7));
    background: -webkit-linear-gradient(left, #43ace6, #0f93f7);
    background: -o-linear-gradient(left, #43ace6, #0f93f7);
    background: linear-gradient(to right, #43ace6, #0f93f7);

}

.btn-fills {
    position: relative;
    display: inline-block;
    text-decoration: none;
    font-weight: 500;
    font-size: 15px;
    color: #ffffff;
    font-family: Vazirmatn, iransens;
    padding: 12px 20px;
    border-radius: 4px;
    margin-top: 16px;
    right: 10%;
    z-index: 1;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.btn-fills i {
    margin-right: 20px;
}

.btn-fills:after {
    content: "";
    height: 100%;
    width: 0;
    background: -webkit-gradient(linear, left top, right top, from(#43ace6), to(#0f93f7));
    background: -webkit-linear-gradient(left, #43ace6, #0f93f7);
    background: -o-linear-gradient(left, #43ace6, #0f93f7);
    background: linear-gradient(to right, #43ace6, #0f93f7);
    border-radius: 4px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.btn-fills:hover {
    color: #ffffff;
}

.btn-fills:hover:after {
    visibility: visible;
    opacity: 1;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .btn-fills {
        padding: 12px 20px;
    }
}






/*------------------- دایره پشتیبانی پایین سایت -------------------*/


.support-circle {
    position: fixed;
    bottom: 20px;
    left: 20px;
    /* تغییر موقعیت از right به left */
    width: 60px;
    height: 60px;
    background-color: #007bff;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: Vazirmatn, iransens;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
    text-decoration: none;
    z-index: 9999;
    /* اضافه شدن z-index بالا برای نمایش در لایه بالاتر */
}

.support-circle:hover {
    transform: scale(1.1);
}


/* --- START: Fix for Support Circle Overlap on Mobile --- */

@media (max-width: 768px) {
    .support-circle {
        /*
         * این کد دایره پشتیبانی را به اندازه کافی به بالا منتقل می‌کند
         * تا دیگر زیر بنر تست رایگان قرار نگیرد.
        */
        bottom: 95px !important;
        transition: bottom 0.4s ease-out;
        /* انیمیشن نرم برای جابجایی */
    }
}

/* --- END: Fix for Support Circle Overlap on Mobile --- */


/*------------------- اموزش -------------------*/




/* حذف استایل پیش‌فرض لینک‌ها */
a {
    text-decoration: none;
    /* حذف خط زیر لینک‌ها */
    color: inherit;
    /* حفظ رنگ متن */
}

/* استایل برای مرکز آموزش */
.vpn-center {
    text-align: center;
    padding: 20px;
}

.vpn-center h2 {
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    /* اضافه کردن فاصله از پایین */
    margin-top: 150px;
    /* اضافه کردن فاصله از بالا */
}

.divider {
    width: 80px;
    /* طول خط */
    height: 3px;
    /* ضخامت خط */
    background-color: #ccc;
    /* رنگ خط */
    margin: 20px auto 50px auto;
    /* فاصله از بالا (20px) و پایین (10px) */
    border-radius: 5px;
    /* گوشه‌های گرد */
}




.vpn-center p {
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    font-size: 16px;
    color: #707070;
    margin-bottom: 20px;
}

/* استایل برای دکمه‌های تب‌ها */
.tab-container {
    margin-bottom: 40px;
}

.tab-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.tab-btn {
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    padding: 10px 20px;
    border-radius: 10px;
    border: none;
    background-color: #f0f0f0;
    margin: 0 10px;
    font-size: 16px;
    cursor: default;
}

.tab-btn.active {
    background: rgb(239, 68, 68, 1);
    /* گرادیانت مدرن قرمز */
    box-shadow: 0 8px 15px rgba(211, 47, 47, 0.20);
    /* سایه برجسته‌تر و مدرن‌تر */
    color: white;
}

/* استایل برای محتوای آموزش‌ها */
.content-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    /* اطمینان از ریسپانسیو شدن کادرها */
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 15px;
}

.content-box {
    display: flex;
    align-items: center;
    flex-direction: row;
    background-color: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    /* تنظیم عرض به 100% */
    max-width: 400px;
    /* حداکثر عرض برای دسکتاپ */
    margin: 10px;
    justify-content: flex-start;
}





/* تنظیم اندازه لوگو و فاصله بین لوگو و متن */
.content-box img {
    max-width: 30px;
    margin-right: 5px;
    /* فاصله بین لوگو و متن */
}

/* تنظیم متن داخل کادر */
.content-box p {
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    font-size: 14px;
    color: #576071;
    margin: 0;
    flex-grow: 1;
    /* متن فضای باقی‌مانده را پر کند */
    white-space: nowrap;
    /* جلوگیری از شکستن متن */
    overflow: hidden;
    /* جلوگیری از خارج شدن متن از کادر */
    text-overflow: ellipsis;
    /* اضافه کردن نقاط سه‌نقطه‌ای برای متن‌های طولانی */
}

/* استایل برای ریسپانسیو (نمایش مناسب در دستگاه‌های کوچک‌تر) */
@media (max-width: 768px) {
    .content-box {
        width: 100%;
        flex-direction: column;
        /* در دستگاه‌های کوچک، چینش عمودی شود */
        text-align: center;
        /* تنظیم مرکز کردن برای موبایل */
    }

    .content-box img {
        margin: 0 0 15px 0;
        /* تنظیم فاصله برای حالت عمودی */
    }
}






.blue-button {
    background-color: #007bff;
    /* رنگ آبی برای دکمه */
    color: white;
    border: none;
    border-radius: 20px;
    padding: 10px 20px;
    margin-top: 13px;
    cursor: pointer;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    font-size: 14px;
    transition: background-color 0.3s;
}

.blue-button:hover {
    background-color: #0056b3;
    /* تغییر رنگ با هوور */
}





.glass-button {
    border: 2px solid #007bff;
    /* کادر آبی */
    color: #007bff;
    background-color: transparent;
    border-radius: 20px;
    padding: 8px 16px;
    margin-top: 13px;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.glass-button:hover {
    background-color: #007bff;
    color: white;
}










/*-------------------صفحه بررسی مانده اعتبار -------------------*/


.form_center {
    text-align: center;
    line-height: 44px;
    background: #5760710a;
    margin-top: 120px;
    border-radius: 30px;
    border: 1px solid #fff;
    padding: 30px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}


/* تنظیمات کلی برای تمامی فیلدهای ورودی */
input[type="text1"] {
    width: 100%;
    /* پیش‌فرض برای موبایل: عرض کامل */
    padding: 12px 10px;
    margin: 8px 0;
    margin-top: 15px;
    display: inline-block;
    border-radius: 20px;
    border: 1px solid #ccc;
    font-family: Vazirmatn, iransens;
    box-sizing: border-box;
}

/* مخصوص فیلد کپچا با استفاده از نام یا placeholder */
input[name="sa-captchaText1"] {
    width: 53%;
    /* عرض ۶۰ درصد برای کپچا */
    margin: 10px 10px;
    /* قرار دادن کادر کپچا در وسط */
}

/* تنظیمات برای اندازه‌های بزرگ‌تر از موبایل (دسکتاپ) */
@media (min-width: 768px) {

    input[name="user_id"],
    input[name="user_email"] {
        width: 60%;
        /* عرض ۶۰ درصد برای فیلدهای کاربری و ایمیل در دسکتاپ */
    }
}


.nb_login {
    border: 2px solid #007bff;
    /* کادر آبی */
    color: #007bff;
    background-color: #43ace614;
    border-radius: 20px;
    padding: 12px 25px;
    margin-top: 13px;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.nb_login:hover {
    background-color: #007bff;
    color: white;
}

.imgcontainer img {
    border-radius: 50%;
}

.filus {
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    padding: 4px 0px;
    border-radius: 20px;
    border: none;
    background-color: #f0f0f0;
    margin: 25px 10px;
    font-size: 16px;
    cursor: default;
}

.filus.active {
    background: rgb(239, 68, 68, 1);
    /* گرادیانت مدرن قرمز */
    box-shadow: 0 8px 15px rgba(211, 47, 47, 0.20);
    /* سایه برجسته‌تر و مدرن‌تر */
    color: white;
    width: 30%;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 768px) {
    .filus.active {
        width: 70%;
    }
}


.credit-info-success {
    background-color: #36b33b33;
    color: #006b04eb;
    font-family: Vazirmatn, iransens;
    font-size: 14px;
    padding: 3px;
    border-radius: 30px;
    max-width: 300px;
    /* حداکثر عرض کادر */
    margin: 9px auto;
    /* قرار دادن کادر در مرکز */
}

.credit-info-error {
    background-color: #f5434345;
    color: #c31f1fbd;
    font-family: Vazirmatn, iransens;
    font-size: 14px;
    padding: 3px;
    border-radius: 30px;
    max-width: 300px;
    /* حداکثر عرض کادر */
    margin: 9px auto;
    /* قرار دادن کادر در مرکز */

}

.captcha-error {
    background-color: #f5434345;
    color: #c31f1fbd;
    font-family: Vazirmatn, iransens;
    font-size: 14px;
    padding: 18px;
    border-radius: 30px;
    max-width: 300px;
    margin: 30px 110px;
    text-align: center;
    display: inline-block;
    /* این کمک می‌کند پاراگراف و دکمه به درستی در یک خط قرار گیرند */
}









/*------------------- کادرهای ایمیل و تخفیف و کدهای پرفکت -------------------*/



/* تنظیمات فرم برای قرارگیری متن وسط و نمایش مناسب در موبایل و دسکتاپ */
.form-container,
.form-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.form-group {
    max-width: 50%;
    margin-bottom: 10px;
}

label {
    margin-left: 10px;
    font-size: 13px;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    text-align: right;
    direction: rtl;
    white-space: nowrap;
}

input[type="text"],
#img2 {
    width: 90%;
    padding: 8px;
    border-radius: 10px;
    border: 1px solid #ccc;
    font-family: Vazirmatn, iransens;
    box-sizing: border-box;
    font-size: 14px;
    margin-bottom: 10px;
}

#img2 {
    width: 50%;
    margin-left: 10px;
    direction: rtl;
}

input[type="submit"] {
    background: #4CAF50;
    color: white;
    padding: 12px;
    width: 200px;
    text-align: center;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    border: none;
    margin-top: 25px;
    margin-bottom: 130px;
}

/* تنظیمات جدید برای کادر و دکمه تخفیف */
.form-group {
    display: flex;
    flex-direction: row;
    align-items: baseline;
}

/* واکنش‌گرایی برای موبایل: تنظیم عرض کمتر */
@media (max-width: 768px) {
    .form-group {
        max-width: 100%;
    }
}










/*------------------ البته بخشی از استایل هم داخل خود فایل کال بک هست callback.tpl صفحه کادر تحویل سرور همان -------------------*/



/* تنظیمات کلی برای تمامی فیلدهای ورودی */
input[type="text2"] {
    width: 100%;
    /* پیش‌فرض برای موبایل: عرض کامل */
    padding: 12px 4px;
    margin-top: 3px;
    display: inline-block;
    border-radius: 20px;
    border: 1px solid #007bff;
    font-family: Vazirmatn, iransens;
    box-sizing: border-box;
}










/*------------------ کادر های جدید محصولات -------------------*/



main-container {
    font-family: 'Vazirmatn', 'IRANSans', sans-serif;
    direction: rtl;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 30vh;
    flex-wrap: wrap;
    width: 100%;
    padding: 20px 0px 0px;
}

.product-card {
    width: 20%;
    padding: 20px;
    margin: 10px;
    background-color: #ececec;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 4px 6px #4a4949e3;
    font-size: 1.2rem;
    color: #4a4949e3;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
    display: inline-block;
    vertical-align: top;
}

.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
    background-color: #ff2b2bd9;
}

/* استایل‌های مخصوص محصولات گلد */
.card-gold {
    background-color: #f8e9a0;
    /* رنگ زمینه طلایی */
    box-shadow: 0 4px 6px #bfa055;
    /* سایه با رنگ طلایی */
    color: #bfa055;
    /* رنگ متن برای محصولات گلد */
}

/* استایل‌های مخصوص محصولات آبی */
.card-blue {
    background-color: #a0daf8b0;
    /* رنگ زمینه طلایی */
    box-shadow: 0 4px 6px #55a5bf;
    /* سایه با رنگ طلایی */
    color: #bfa055;
    /* رنگ متن برای محصولات گلد */
}

.product-card .duration {
    font-size: 2.5rem;
    color: #4a4949b0;
    margin-bottom: 10px;
    font-family: 'iransens';
    display: inline;
}

.product-card .label {
    margin-bottom: 20px;
    font-family: 'iransens';
    display: inline;
    color: #4a4949b0;
    font-size: 15px;
}

.product-card .price {
    font-size: 1.4rem;
    font-weight: bold;
    font-family: 'iransens';
    color: #576071;
}

.product-card .price .old-price {
    text-decoration: line-through;
    font-size: 0.9rem;
    color: #b4b4b4;
    margin-right: 5px;
}

.product-card .gift-icon {
    display: inline-block;
    font-size: 43px;
    color: #ffb600;
    margin-bottom: 5px;
}

.fixed-ip-label {
    font-size: 12px;
    /* اندازه فونت کمی کوچکتر */
    color: #666666;
    display: flex;
    margin-top: 1px;
    margin-bottom: 20px;
    margin-right: 70px;
    font-family: 'iransens';
    gap: 2px;
    /* اضافه کردن فاصله بین ایموجی و متن */
}

.fixed-ip-label .icon {
    width: 16px;
    height: 16px;
}

@media (min-width: 769px) and (max-width: 1350px) {
    .product-card {
        width: 30%;
        /* یا اندازه مناسب دیگر برای این رزولوشن‌ها */
        margin: 1rem;
        /* فاصله بین کارت‌ها */
    }

    .fixed-ip-label {
        margin-right: 50px;
        /* تنظیم فاصله برای وسط قرار گرفتن بهتر */
    }
}

@media (max-width: 768px) {
    .product-card {
        width: 43%;
    }

    .fixed-ip-label {
        font-size: 11px;
        /* فونت متن کوچکتر برای موبایل */
        margin-right: 17px;
        /* فاصله کمتر برای موبایل */
    }
}

.small-text {
    font-size: 0.7rem;
    /* اندازه فونت کوچکتر */
    font-weight: normal;
    /* حالت معمولی برای وزن فونت */
    color: #576071;
}

.buy-button {
    background-color: orangered;
    color: #ffffff;
    border: none;
    padding: 8px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'iransens';
    font-size: 14px;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}

.buy-button:hover {
    background-color: #cc0000;
}


.buy-button-tg {
    background-color: #007bff;
    color: #ffffff;
    border: none;
    padding: 8px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'iransens';
    font-size: 14px;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}

.buy-button:hover {
    background-color: #00b9ff;
}


.buy-button-rial {
    background-color: #7ec223;
    color: #ffffff;
    border: none;
    padding: 8px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'iransens';
    font-size: 14px;
    margin-top: 15px;
    transition: background-color 0.3s ease;
}

.buy-button:hover {
    background-color: #00b9ff;
}











/*------------------ کادر تلگرام بالای سایت -------------------*/


/* --- کد CSS جدید برای بنر تلگرام (جایگزین کدهای .banner قبلی شود) --- */

.modern-telegram-banner {
    display: flex;
    /* چیدمان افقی با فلکس‌باکس */
    align-items: center;
    /* تراز عمودی در وسط */
    justify-content: space-between;
    /* توزیع یکنواخت فضا */
    background: linear-gradient(135deg, #0088cc 0%, #005f99 100%);
    /* گرادینت آبی شیک */
    color: #fff;
    padding: 25px 35px;
    /* پدینگ داخلی */
    border-radius: 15px;
    /* گوشه‌های گرد */
    box-shadow: 0 8px 20px rgba(0, 136, 204, 0.3);
    /* سایه جذاب */
    text-decoration: none;
    /* حذف خط زیر لینک */
    font-family: 'iransens', 'Vazirmatn', sans-serif;
    /* فونت (مطمئن شوید این فونت‌ها در سایت شما بارگذاری می‌شوند) */
    transition: all 0.3s ease-in-out;
    /* انیمیشن نرم برای هاور */
    margin: 30px 0;
    /* فاصله از بالا و پایین */
    cursor: pointer;
    /* نمایش نشانگر دست */
    text-align: right;
    /* اطمینان از راست‌چین بودن کلی */
}

.modern-telegram-banner:hover {
    transform: translateY(-5px) scale(1.02);
    /* کمی بالا بردن و بزرگ‌نمایی در هاور */
    box-shadow: 0 12px 25px rgba(0, 136, 204, 0.45);
    /* سایه قوی‌تر */
}

.modern-telegram-banner .icon-section {
    display: flex;
    align-items: center;
    margin-left: 25px;
    /* فاصله بخش آیکون از متن */
}

.modern-telegram-banner .icon-section .fab.fa-telegram-plane {
    font-size: 3.5em;
    /* اندازه آیکون تلگرام */
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.modern-telegram-banner .offer-icon {
    width: 35px;
    height: 35px;
    margin-right: -15px;
    /* کمی روی آیکون تلگرام بیاید */
    margin-bottom: -30px;
    /* پایین‌تر قرار گیرد */
    border: 2px solid white;
    border-radius: 50%;
    background-color: #ff4d4d;
    /* یک پس‌زمینه برای برجستگی */
    padding: 3px;
    animation: pulse-banner 1.5s infinite;
    /* انیمیشن چشمک‌زن */
    z-index: 2;
}

/* انیمیشن چشمک‌زن */
@keyframes pulse-banner {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 5px rgba(255, 77, 77, 0.5);
    }

    50% {
        transform: scale(1.2);
        box-shadow: 0 0 15px rgba(255, 77, 77, 1);
    }
}

.modern-telegram-banner .text-section {
    flex-grow: 1;
    /* اجازه می‌دهد این بخش فضا را پر کند */
    padding: 0 15px;
    /* کمی فاصله از اطراف */
}

.modern-telegram-banner .text-section h3 {
    margin: 0 0 8px 0;
    font-size: 1.2em;
    /* اندازه عنوان */
    font-weight: 700;
    /* ضخامت فونت */
}

.modern-telegram-banner .text-section p {
    margin: 0;
    font-size: 1em;
    /* اندازه متن توضیحات */
    opacity: 0.9;
}

.modern-telegram-banner .action-section {
    background-color: #fff;
    color: #0088cc;
    /* رنگ متن دکمه */
    padding: 12px 25px;
    border-radius: 50px;
    /* دکمه کپسولی */
    font-weight: bold;
    transition: all 0.3s ease;
    white-space: nowrap;
    /* جلوگیری از شکستن خط */
}

.modern-telegram-banner:hover .action-section {
    background-color: #f0f8ff;
    /* تغییر رنگ دکمه در هاور */
    transform: scale(1.05);
}

.modern-telegram-banner .action-section i {
    margin-right: 8px;
    /* فاصله آیکون فلش */
    transition: transform 0.3s ease;
}

.modern-telegram-banner:hover .action-section i {
    transform: translateX(-5px);
    /* حرکت فلش در هاور */
}

/* --- استایل برای نمایش بهتر در موبایل --- */
@media (max-width: 768px) {
    .modern-telegram-banner {
        flex-direction: column;
        /* چیدمان ستونی */
        text-align: center;
        /* همه چیز وسط‌چین */
        padding: 20px;
    }

    .modern-telegram-banner .icon-section {
        margin-left: 0;
        margin-bottom: 15px;
    }

    .modern-telegram-banner .icon-section .fab.fa-telegram-plane {
        font-size: 3em;
    }

    .modern-telegram-banner .text-section {
        margin-bottom: 20px;
    }

    .modern-telegram-banner .action-section {
        margin-right: 0;
    }
}

/* --- پایان کد CSS جدید --- */





















/*------------------  هدر بالای سایت -------------------*/


/* --- استایل بخش Hero - نسخه 3 (روشن، تمیز و مدرن) --- */

.hero-section-v3 {
    background-color: #ffffff;
    /* پس‌زمینه سفید */
    padding: 45px 2px;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    color: #333;
    /* رنگ متن اصلی تیره */
    position: relative;
    /* برای شکل‌های پس‌زمینه */
    overflow: hidden;
    border-bottom: 1px solid #e9ecef;
    /* جداکننده بسیار ملایم */
}

.hero-container-v3 {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    position: relative;
    /* برای اینکه روی شکل‌ها قرار بگیرد */
    z-index: 2;
}

.hero-text-content-v3 {
    flex: 1.2;
    /* کمی فضای بیشتر برای متن */
    text-align: right;
}

.hero-visual-content-v3 {
    flex: 0.8;
    /* فضای کمتر برای تصویر */
    text-align: center;
}

.hero-visual-content-v3 img {
    max-width: 50%;
    /* <<<< این خط را تغییر دهید */
    height: auto;
    /* max-height: 400px; */
    transition: transform 0.5s ease-in-out;
    display: block;
    /* برای اینکه margin auto کار کند */
    margin: -45px auto;
    /* تصویر را در ستون خودش وسط‌چین می‌کند */
}

.hero-visual-content-v3 img:hover {
    transform: scale(1.05) rotate(2deg);
}

.hero-tagline {
    display: inline-block;
    color: #007bff;
    /* رنگ شاخص (آبی) */
    font-size: 0.9em;
    font-weight: 600;
    margin-bottom: 15px;
    padding: 5px 15px;
    background-color: rgba(0, 123, 255, 0.1);
    /* پس‌زمینه بسیار روشن آبی */
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.hero-title-v3 {
    font-size: 2em;
    /* اندازه بسیار بزرگ */
    font-weight: 700;
    line-height: 1.55;
    margin-bottom: 25px;
    color: #3b454f;
    /* رنگ تیره برای عنوان */
    font-family: 'Vazirmatn', 'iransensblod', sans-serif;
}

.hero-title-v3 .highlight {
    color: #007bff;
    /* رنگ شاخص برای کلمه کلیدی */
}

.hero-description-v3 {
    font-size: 0.9em;
    line-height: 1.7;
    margin-bottom: 40px;
    color: #5a6268;
    /* خاکستری برای متن */
    max-width: 550px;
}

.hero-buttons-v3 {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Base styles for all buttons in this section */
.hero-cta-primary-v3,
.hero-cta-secondary-v3,
.hero-cta-fortune-v3 {
    /* Add the new class here for shared styles */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 0.9em;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
}

/* Icon styles for all buttons */
.hero-cta-primary-v3 i,
.hero-cta-secondary-v3 i,
.hero-cta-fortune-v3 i {
    margin-right: 8px;
    transition: transform 0.3s ease;
}

/* Primary button (Blue) */
.hero-cta-primary-v3 {
    background-color: #007bff;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.hero-cta-primary-v3:hover {
    background-color: #0056b3;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4);
}

.hero-cta-primary-v3:hover i {
    transform: translateX(-5px);
}

/* Secondary button (Indigo) */
.hero-cta-secondary-v3 {
    background-color: #4f46e5;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}

.hero-cta-secondary-v3:hover {
    background-color: #4338ca;
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4);
}

.hero-cta-secondary-v3:hover i {
    transform: translateX(-5px);
}

/* ------- ADDED: New Orange Button for Fortune Wheel ------- */
.hero-cta-fortune-v3 {
    background-color: #f18e04;
    /* Orange color */
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(230, 126, 34, 0.3);
}

.hero-cta-fortune-v3:hover {
    background-color: #d35400;
    /* Darker orange on hover */
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(230, 126, 34, 0.4);
}

.hero-cta-fortune-v3:hover i {
    transform: translateX(-5px);
}

/* فاصله‌گذاری برای آیکون جدید کادو */
.hero-cta-fortune-v3 .fa-gift {
    margin-right: 0;
    /* حذف فاصله پیش‌فرض */
    margin-left: 8px;
    /* ایجاد فاصله بعد از آیکون */
}

/* --- End of new styles --- */




/* --- شکل‌های پس‌زمینه (اختیاری) --- */
.hero-bg-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.08;
    /* بسیار محو */
    background-color: #007bff;
}

.shape1 {
    width: 200px;
    height: 200px;
    top: 10%;
    left: 5%;
    animation: float 6s ease-in-out infinite;
}

.shape2 {
    width: 100px;
    height: 100px;
    bottom: 15%;
    right: 10%;
    animation: float 8s ease-in-out infinite 1s;
}

.shape3 {
    width: 50px;
    height: 50px;
    top: 20%;
    right: 30%;
    background-color: #e67e22;
    /* رنگ متفاوت */
    animation: float 7s ease-in-out infinite 0.5s;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* --- واکنش‌گرایی برای Hero Section V3 --- */
@media (max-width: 992px) {
    .hero-title-v3 {
        font-size: 2em;
    }

    .hero-description-v3 {
        font-size: 1em;
    }
}

@media (max-width: 768px) {
    .hero-container-v3 {
        flex-direction: column-reverse;
        /* تصویر بالا، متن پایین */
        text-align: center;
    }

    .hero-text-content-v3 {
        text-align: center;
    }

    .hero-description-v3 {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-visual-content-v3 {
        margin-bottom: 40px;
    }

    .hero-buttons-v3 {
        flex-direction: column;
        /* Stack the button rows vertically */
        align-items: center;
        /* Center them */
    }

    .hero-buttons-row-top {
        justify-content: center;
        /* Ensure top buttons are centered */
    }

    .hero-title-v3 {
        font-size: 2em;
    }

    .shape1,
    .shape2,
    .shape3 {
        display: none;
    }

    /* مخفی کردن شکل‌ها در موبایل */
}





















/*------------------  چهارتا کادر اموزش و پشتیبانی و ... بالای سایت -------------------*/


/* --- استایل بخش لینک‌های ویژه حرفه‌ای و مدرن (جایگزین .modern-features-section) --- */

.professional-features-section {
    padding: 80px 20px;
    background-color: #f4f7f6;
    /* پس‌زمینه بسیار روشن و خنثی */
    /* برای افکت شیشه‌ای بهتر، می‌توانید از یک تصویر پس‌زمینه گرادینت یا طرح‌دار ملایم هم استفاده کنید */
    /* background-image: linear-gradient(to bottom right, #e0eafc, #cfdef3); */
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    position: relative;
}

.professional-features-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 35px;
    /* فاصله بیشتر بین کارت‌ها */
}

.pro-feature-card {
    background: rgba(255, 255, 255, 0.7);
    /* شیشه‌ای با شفافیت متوسط */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* برای Safari */
    border-radius: 20px;
    /* گوشه‌های گردتر */
    padding: 35px 25px;
    text-align: right;
    /* متن‌ها راست‌چین */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    /* transition نرم‌تر و جذاب‌تر */
    position: relative;
    overflow: hidden;
    /* برای نوار رنگی بالا */
    border: 1px solid rgba(220, 220, 220, 0.3);
}

.pro-feature-card::before {
    /* نوار رنگی بالا */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    /* ضخامت نوار */
    background-color: transparent;
    /* در حالت عادی شفاف */
    transition: background-color 0.3s ease;
}

.pro-feature-card.accent-blue::before {
    background-color: #007bff;
    /* رنگ آبی برای نوار */
}

.pro-feature-card.accent-red::before {
    background-color: #dc3545;
    /* رنگ قرمز برای نوار */
}


.pro-feature-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12);
}

.pro-feature-card a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.pro-feature-icon-area {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    /* گوشه‌های گرد برای نگه‌دارنده آیکون (نه کاملاً دایره) */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    transition: all 0.3s ease;
    color: #ffffff;
    /* رنگ آیکون سفید */
    align-self: flex-start;
    /* آیکون در ابتدای کارت (راست) */
}

.pro-feature-card.accent-blue .pro-feature-icon-area {
    background: linear-gradient(135deg, #007bff, #0056b3);
    /* گرادینت آبی */
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.3);
}

.pro-feature-card.accent-red .pro-feature-icon-area {
    background: linear-gradient(135deg, #dc3545, #c82333);
    /* گرادینت قرمز */
    box-shadow: 0 4px 10px rgba(220, 53, 69, 0.3);
}

.pro-feature-card:hover .pro-feature-icon-area {
    transform: scale(1.1) rotate(-5deg);
}

.pro-feature-icon-area i {
    font-size: 28px;
    /* اندازه آیکون Font Awesome */
}

.pro-feature-title {
    font-family: 'Vazirmatn', 'iransensblod', sans-serif;
    font-size: 1.3em;
    color: #3b454f;
    /* خاکستری پررنگ */
    margin-bottom: 12px;
    line-height: 1.4;
}

.pro-feature-description {
    font-size: 0.85em;
    color: #5a6268;
    /* خاکستری کمی روشن‌تر */
    line-height: 1.7;
    margin-bottom: 20px;
    flex-grow: 1;
    /* توضیحات فضای باقی‌مانده را پر کند */
}

.pro-feature-link {
    font-size: 0.9em;
    font-weight: 600;
    margin-top: auto;
    /* لینک را به پایین کارت هل می‌دهد */
    transition: color 0.3s ease;
    align-self: flex-start;
}

.pro-feature-card.accent-blue .pro-feature-link {
    color: #007bff;
}

.pro-feature-card.accent-red .pro-feature-link {
    color: #dc3545;
}


.pro-feature-link i {
    margin-right: 5px;
    transition: transform 0.3s ease;
}

.pro-feature-card:hover .pro-feature-link i {
    transform: translateX(-4px);
}


/* واکنش‌گرایی */
@media (max-width: 992px) {
    .professional-features-container {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 25px;
    }

    .pro-feature-card {
        padding: 30px 20px;
    }
}

@media (max-width: 576px) {
    .professional-features-container {
        grid-template-columns: repeat(2, 1fr);
        /* <<<< به این شکل تغییر دهید */
        gap: 15px;
        /* <<<< فاصله را کمی کمتر کردیم تا بهتر جا شوند */
    }

    .pro-feature-card {
        padding: 20px 15px;
        /* <<<< پدینگ داخلی کارت را کمی کمتر کردیم */
    }

    .pro-feature-icon-area {
        width: 55px;
        /* <<<< آیکون را کمی کوچک‌تر کردیم */
        height: 55px;
        margin-bottom: 15px;
    }

    .pro-feature-icon-area i {
        font-size: 22px;
    }

    .pro-feature-title {
        font-size: 1.1em;
        /* <<<< عنوان را کمی کوچک‌تر کردیم */
    }

    .pro-feature-description {
        font-size: 0.85em;
        /* <<<< توضیحات را کمی کوچک‌تر کردیم */
    }

    .pro-feature-link {
        font-size: 0.85em;
    }
}

















/*------------------  توضیحات سرویس ها وسط صفحه سایت -------------------*/



/* --- استایل بخش معرفی سرویس Private مدرن (نسخه اصلاح شده) --- */

body .modern-feature-focus-section {
    /* افزایش اولویت */
    padding: 60px 20px;
    /* کمی کاهش پدینگ بالا و پایین */
    background-color: #ffffff;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    overflow: hidden;
    border-top: 1px solid #e9ecef;
    /* اضافه کردن خط جداکننده در بالا */
    border-bottom: 1px solid #e9ecef;
    /* اضافه کردن خط جداکننده در پایین */
}

body .modern-feature-focus-section .container {
    /* اطمینان از اعمال بر کانتینر داخلی */
    max-width: 1140px;
    /* هماهنگی با بوت‌استرپ */
}

body .modern-feature-focus-section .row.align-items-center {
    /* اطمینان از اعمال بر ردیف */
    /* بوت استرپ باید این را مدیریت کند، اما برای اطمینان */
}

body .modern-feature-focus-section .feature-focus-image-wrapper {
    text-align: center;
    padding: 15px;
    position: relative;
}

body .modern-feature-focus-section .feature-focus-img {
    max-width: 80%;
    /* کمی کوچکتر برای فضای بیشتر */
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

body .modern-feature-focus-section .feature-focus-img:hover {
    transform: scale(1.02);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

body .modern-feature-focus-section .feature-focus-image-wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 85%;
    height: 85%;
    background-color: #007bff;
    opacity: 0.04;
    /* بسیار محو */
    border-radius: 25px;
    transform: translate(-50%, -50%) rotate(8deg);
    z-index: -1;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

body .modern-feature-focus-section .feature-focus-image-wrapper:hover::before {
    transform: translate(-50%, -50%) rotate(-2deg) scale(1.03);
    opacity: 0.06;
}

body .modern-feature-focus-section .feature-focus-content {
    padding: 15px;
    text-align: right;
}

body .modern-feature-focus-section .feature-focus-tagline {
    display: inline-block;
    color: #007bff;
    font-size: 0.85em;
    font-weight: 600;
    margin-bottom: 12px;
    background-color: rgba(0, 123, 255, 0.07);
    padding: 5px 15px;
    border-radius: 50px;
    /* کاملا گرد */
    letter-spacing: 0.5px;
}

body .modern-feature-focus-section .feature-focus-title {
    font-family: 'Vazirmatn', 'iransensblod', sans-serif;
    font-size: 2em;
    /* کمی کوچکتر برای هماهنگی بهتر */
    color: #3b454f;
    /* رنگ تیره‌تر و استانداردتر */
    margin-bottom: 15px;
    line-height: 1.45;
}

body .modern-feature-focus-section .feature-focus-title .highlight {
    color: #007bff;
}

body .modern-feature-focus-section .feature-focus-description {
    font-size: 1em;
    /* کمی کوچکتر */
    color: #495057;
    /* رنگ استانداردتر برای متن */
    line-height: 1.75;
    margin-bottom: 25px;
}

body .modern-feature-focus-section .feature-focus-list {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

body .modern-feature-focus-section .feature-focus-list li {
    display: flex;
    align-items: flex-start;
    font-size: 0.95em;
    color: #343a40;
    margin-bottom: 12px;
    text-align: right;
}

/* استایل برای بخش اول متن (bold) در لیست */
body .modern-feature-focus-section .feature-focus-list li strong {
    white-space: nowrap;
    /* جلوگیری از شکستن بخش اول متن */
    margin-left: 4px;
    /* فاصله کوچک بین بخش اول و ادامه متن */
}

body .modern-feature-focus-section .feature-focus-list .accent-icon {
    color: #007bff;
    font-size: 1.1em;
    margin-left: 8px;
    margin-top: 4px;
    flex-shrink: 0;
    line-height: 1;
}

body .modern-feature-focus-section .btn-primary-modern.feature-focus-cta {
    display: inline-flex;
    align-items: center;
    background-color: #007bff;
    color: #ffffff;
    padding: 10px 25px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 1em;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
}

body .modern-feature-focus-section .btn-primary-modern.feature-focus-cta:hover {
    background-color: #0056b3;
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 15px rgba(0, 86, 179, 0.3);
}

body .modern-feature-focus-section .btn-primary-modern.feature-focus-cta i {
    margin-right: 8px;
}

/* --- واکنش‌گرایی اصلاح شده --- */
@media (max-width: 991px) {

    /* برای تبلت و موبایل */
    body .modern-feature-focus-section .feature-focus-content,
    body .modern-feature-focus-section .feature-focus-image-wrapper {
        text-align: center;
        padding-left: 15px;
        padding-right: 15px;
    }

    body .modern-feature-focus-section .feature-focus-image-wrapper {
        margin-bottom: 30px;
    }

    body .modern-feature-focus-section .feature-focus-img {
        max-width: 70%;
    }

    body .modern-feature-focus-section .feature-focus-title {
        font-size: 1.8em;
    }

    body .modern-feature-focus-section .feature-focus-description {
        font-size: 0.95em;
    }

    body .modern-feature-focus-section .feature-focus-list {
        display: inline-block;
        text-align: right;
    }

    body .modern-feature-focus-section .feature-focus-list li {
        font-size: 0.9em;
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {

    /* تنظیمات دقیق‌تر برای موبایل */
    body .modern-feature-focus-section {
        padding: 40px 15px;
    }

    body .modern-feature-focus-section .feature-focus-img {
        max-width: 80%;
    }

    body .modern-feature-focus-section .feature-focus-title {
        font-size: 1.6em;
    }

    body .modern-feature-focus-section .feature-focus-description {
        font-size: 0.9em;
    }

    body .modern-feature-focus-section .feature-focus-list li {
        font-size: 0.85em;
        align-items: flex-start;
    }

    /* استایل اختصاصی برای بخش اول متن (bold) در موبایل‌های کوچک */
    body .modern-feature-focus-section .feature-focus-list li strong {
        /* white-space: nowrap; /* این خط از قبل در استایل پایه وجود دارد */
        /* ممکن است نیاز باشد کمی flex-basis یا min-width برای این بخش تعریف کنید */
        /* flex-shrink: 0; /* جلوگیری از کوچک شدن بیش از حد */
    }

    body .modern-feature-focus-section .feature-focus-list .accent-icon {
        font-size: 1em;
        margin-left: 6px;
        margin-top: 3px;
    }

    body .modern-feature-focus-section .btn-primary-modern.feature-focus-cta {
        width: 100%;
        justify-content: center;
        padding: 12px;
    }
}































/*------------------  کادر توضیحات بخش محصولات -------------------*/


/* --- استایل هدر مدرن برای بخش سرویس (جایگزین .boxall) --- */

.modern-service-header {
    text-align: center;
    padding: 15px 20px 20px;
    /* کاهش بیشتر پدینگ بالا و پایین */
    margin-bottom: -10px;
    /* کاهش فاصله از کارت‌های محصول */
    background-color: #ffffff;
    /* پس‌زمینه سفید */
    border-radius: 10px;
    /* گوشه‌های گرد کمی کمتر */
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05);
    /* سایه ظریف‌تر */
    border: 1px solid #f0f3f6;
    /* حاشیه بسیار ملایم */
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    position: relative;
    overflow: hidden;
}

/* المان تزئینی بالا */
.modern-service-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    /* کاهش عرض المان تزئینی */
    height: 3px;
    /* کاهش ارتفاع المان تزئینی */
    background-color: #007bff;
    border-radius: 0 0 3px 3px;
}

.modern-service-icon {
    display: inline-flex;
    width: 45px;
    /* کاهش اندازه آیکون */
    height: 45px;
    /* کاهش اندازه آیکون */
    background: linear-gradient(145deg, #007bff, #0056b3);
    color: #ffffff;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    /* کاهش اندازه فونت آیکون */
    margin-bottom: 10px;
    /* کاهش فاصله پایین آیکون */
    box-shadow: 0 3px 8px rgba(0, 123, 255, 0.2);
    transition: transform 0.3s ease;
}

.modern-service-header:hover .modern-service-icon {
    transform: translateY(-2px) scale(1.02);
}

.modern-service-title {
    font-family: 'Vazirmatn', 'iransensblod', sans-serif;
    font-size: 1.6em;
    /* کاهش اندازه عنوان */
    color: #3b454f;
    margin-bottom: 5px;
    /* کاهش فاصله پایین عنوان */
    margin-top: 5px;
}

.modern-service-title .vip-highlight {
    color: #007bff;
}

.modern-service-subtitle {
    font-size: 0.9em;
    /* کاهش اندازه توضیحات */
    color: #6c757d;
    line-height: 1.8;
    /* کاهش ارتفاع خط */
    max-width: 480px;
    /* محدود کردن عرض توضیحات */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;
}

/* واکنش‌گرایی برای هدر سرویس */
@media (max-width: 767px) {
    .modern-service-header {
        padding: 12px 15px 15px;
        margin-bottom: -10px;
    }

    .modern-service-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
        margin-bottom: 8px;
    }

    .modern-service-title {
        font-size: 1.4em;
    }

    .modern-service-subtitle {
        font-size: 0.85em;
    }
}





























/*------------------- کادر محصولات -------------------*/


/* new-style.css - UPDATED */
/* این استایل‌ها را در یک فایل جدید مثلا new-style.css قرار دهید
   و آن را بعد از فایل CSS موجود در <head> صفحه خود لینک کنید.
   یا محتوای آن را در یک تگ <style> در <head> قرار دهید.
   فونت‌های 'iransens' و 'iransensblod' باید در پروژه شما موجود و لود شده باشند.
*/



.service-one-boxs ul {
    padding: 0;
    margin: 0;
}

.service-one-boxs ul li a {
    text-decoration: none;
}

.service-one-boxs li {
    float: right;
    list-style: none;
    position: relative;
    height: 550px;
    margin: 50px 0 15px;
    border-radius: 4px;
}

.service-one-boxs li:hover {}

.service-one-boxs li:hover .service-one-box-titr-btns {
    background-color: #000;
}

nav {
    background-color: #000000;
}

.service-one-box-titr-bgs {
    height: 105px;
    width: 105px;
    background-color: #607d8b;
    border-radius: 70px;
    margin-right: 30%;
    margin-top: 15px;
    display: none;
}

.service-one-boxs li:hover .service-one-box-titr-bgs {
    background-color: #2196f3;
}

.service-one-box-titrs {
    height: 97px;
    width: 97px;
    background-color: #525252;
    border-radius: 70px;
    /* margin-right: 30%; */
    Box-shadow: inset 2px 2px 4px #4c4c4c;
    /* text-align: center; */
    margin: 0 auto;
}

.service-one-boxs li:hover .service-one-box-titrs {
    background-color: #cc0f0f;
    Box-shadow: inset 2px 2px 4px #8a1515;
}


.service-one-box-titrs h2 {
    font-family: Vazirmatn, iransens;
    color: #ffffff;
    font-size: 15px;
    padding-top: 35px;
    text-align: center;
}

.service-one-box-titrs img {
    margin: 55px 0 20px;
}

/* new-style.css - FINAL */
/* این استایل‌ها را در یک فایل جدید مثلا new-style.css قرار دهید
   و آن را بعد از فایل CSS موجود در <head> صفحه خود لینک کنید.
   یا محتوای آن را در یک تگ <style> در <head> قرار دهید.
   فونت‌های 'iransens' و 'iransensblod' باید در پروژه شما موجود و لود شده باشند.
*/

/* --- کانتینر برای کارت‌های محصول --- */
.product-cards-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
    padding: 25px 15px;
    direction: rtl;
    font-family: 'Vazirmatn', 'iransens', tahoma, sans-serif;
    background-color: #f8f9fa;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* --- استایل پایه کارت محصول جدید --- */
.new-product-card {
    background-color: #ffffff;
    border-radius: 16px;
    /* گردی بیشتر برای ظاهر مدرن */
    width: 280px;
    display: flex;
    flex-direction: column;
    text-align: center;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid #e9ecef;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    /* سایه نرم‌تر و مدرن‌تر */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.new-product-card:hover {
    transform: translateY(-8px);
    /* حرکت بیشتر در هاور */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    /* سایه برجسته‌تر */
    border-color: #dee2e6;
}

/* --- استایل کارت محصول هایلایت شده --- */
.new-product-card.new-card-highlight {
    border-color: #5856D6;
    /* بنفش مدرن اپل-مانند */
    box-shadow: 0 0 0 3.5px rgba(88, 86, 214, 0.3);
    /* افکت "glow" ملایم‌تر */
}

.new-product-card.new-card-highlight:hover {
    border-color: #4543BF;
    /* تیره‌تر در هاور */
    box-shadow: 0 0 0 4px rgba(69, 67, 191, 0.4), 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* برچسب "پیشنهاد ویژه" و Placeholder */
.new-product-card .highlight-tag-placeholder,
.new-product-card.new-card-highlight::after {
    content: 'پیشنهاد ویژه';
    display: block;
    position: absolute;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #5856D6;
    /* همان رنگ بنفش مدرن */
    color: white;
    padding: 7px 20px;
    /* پدینگ کمی بیشتر */
    font-size: 12.5px;
    font-weight: 500;
    border-radius: 0 0 12px 12px;
    /* گردی بیشتر و مدرن‌تر */
    z-index: 1;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    line-height: 1.3;
    /* تنظیم برای ارتفاع دقیق‌تر */
    height: 32px;
    /* ارتفاع ثابت برای برچسب و placeholder */
    box-sizing: border-box;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.new-product-card:not(.new-card-highlight) .highlight-tag-placeholder {
    content: '';
    background-color: transparent;
    color: transparent;
}

/* محتوای داخلی کارت */
.new-product-card .card-content {
    padding: 47px 20px 20px 20px;
    /* 47px = ارتفاع برچسب (32px) + فاصله (15px) */
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    /* این مهم است برای پر کردن فضا */
}

/* چیدمان افقی مدت و ماه */
.duration-line {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.35em;
    /* فاصله کمی بیشتر */
    margin-bottom: 5px;
    /* فاصله از لیبل پایینی */
}

.duration-line .duration,
.new-product-card .duration:not(span) {
    /* برای کارت نمایندگی */
    font-family: 'Vazirmatn', 'iransensblod', 'iransens', sans-serif;
    font-size: 40px;
    /* اندازه مناسب */
    color: #1c1c1e;
    /* رنگ مشکی اپل-مانند */
    line-height: 1;
    font-weight: 700;
    margin-bottom: 0;
}

.label-inline,
.new-product-card .label:not(.label-inline):not(.label-remaining) {
    /* برای کارت نمایندگی */
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    font-size: 15px;
    /* اندازه مناسب */
    color: #636366;
    /* خاکستری اپل-مانند */
    font-weight: 500;
    line-height: 1;
}

/* برای کارت‌هایی که فقط .duration و .label دارند (نه .duration-line) */
.new-product-card:not(:has(.duration-line)) .label {
    margin-bottom: 22px;
    /* حفظ فاصله قبلی */
}


.label-remaining {
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    font-size: 14px;
    /* کمی کوچکتر */
    color: #8e8e93;
    /* خاکستری روشن‌تر اپل-مانند */
    margin-top: 2px;
    /* فاصله کمتر از خط "۱ ماه" */
    margin-bottom: 20px;
    /* فاصله تا ویژگی‌ها */
    font-weight: 400;
    display: block;
    width: 100%;
    text-align: center;
}

.new-product-card .features {
    width: 100%;
    margin-bottom: auto;
    /* این باعث می‌شود بخش ویژگی‌ها فضای اضافی را پر کند و قیمت را به پایین هل دهد */
    text-align: right;
    padding-top: 15px;
    /* فاصله از بالای بخش ویژگی‌ها */
    padding-right: 10px;
    box-sizing: border-box;
}

.new-product-card .fixed-ip-label {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    color: #3a3a3c;
    /* خاکستری تیره‌تر اپل-مانند */
    margin-bottom: 10px;
    position: relative;
    padding-right: 26px;
}

.new-product-card .fixed-ip-label:last-child {
    margin-bottom: 0;
}

.new-product-card .fixed-ip-label::before {
    content: "";
    width: 18px;
    height: 18px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2334C759'%3E%3Cpath fill-rule='evenodd' d='M19.916 4.626a.75.75 0 01.208 1.04l-9 13.5a.75.75 0 01-1.154.114l-6-6a.75.75 0 011.06-1.06l5.353 5.353 8.493-12.739a.75.75 0 011.04-.208z' clip-rule='evenodd'/%3E%3C/svg%3E");
    /* سبز اپل-مانند */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.new-product-card .price {
    font-family: 'Vazirmatn', 'iransensblod', 'iransens', sans-serif;
    font-size: 28px;
    color: #1c1c1e;
    margin-top: 22px;
    /* فاصله از ویژگی‌ها */
    margin-bottom: 4px;
    /* فاصله تا دکمه‌ها */
    font-weight: 700;
    text-align: center;
}

.new-product-card .price .small-text {
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    font-size: 14px;
    font-weight: normal;
    color: #8e8e93;
    margin-right: 5px;
}

.new-product-card .card-buttons {
    padding: 0 20px 25px 20px;
    /* margin-top: auto; حذف شد چون .features حالا این کار را می‌کند */
    width: 100%;
    box-sizing: border-box;
}

.new-product-card .new-buy-button,
.new-product-card .new-buy-button-tg {
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    border: none;
    padding: 14px 15px;
    /* پدینگ کمی بیشتر برای ارتفاع */
    border-radius: 12px;
    /* گردی بیشتر و مدرن‌تر */
    font-size: 16px;
    /* کمی بزرگتر */
    font-weight: 500;
    /* وزن مناسب برای خوانایی */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    display: block;
    margin-bottom: 12px;
    color: white;
    text-shadow: none;
    /* حذف سایه متن برای ظاهر تمیزتر اپل-مانند */
    position: relative;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    /* سایه بسیار ظریف اولیه */
}

.new-product-card .new-buy-button:last-child,
.new-product-card .new-buy-button-tg:last-child {
    margin-bottom: 0;
}

.new-product-card .new-buy-button:hover,
.new-product-card .new-buy-button-tg:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
    /* روشن‌تر شدن در هاور */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.new-product-card .new-buy-button:active,
.new-product-card .new-buy-button-tg:active {
    transform: translateY(0px);
    filter: brightness(0.95);
    /* کمی تیره‌تر شدن در کلیک */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* دکمه "خرید با ارز" - نارنجی مدرن و زنده */
.new-product-card .new-buy-button {
    background-color: #FF9500;
    /* نارنجی استاندارد اپل */
}

/* دکمه "خرید از تلگرام" - آبی مدرن و زنده */
.new-product-card .new-buy-button-tg {
    background-color: #007AFF;
    /* آبی استاندارد اپل */
}

/* --- تنظیمات واکنش‌گرا برای موبایل --- */
@media (max-width: 767px) {
    .product-cards-container {
        gap: 12px;
        /* کمی بیشتر */
        padding: 20px 12px;
        /* کمی بیشتر */
    }

    .new-product-card {
        flex-basis: calc(50% - 6px);
        /* نصف gap جدید */
        width: calc(50% - 6px);
    }

    .new-product-card .highlight-tag-placeholder,
    .new-product-card.new-card-highlight::after {
        font-size: 10px;
        padding: 5px 12px;
        height: 28px;
        /* کمی بیشتر */
    }

    .new-product-card .card-content {
        padding-top: 42px;
        /* ارتفاع برچسب موبایل + فاصله */
    }

    .duration-line .duration,
    .new-product-card .duration:not(span) {
        font-size: 36px;
    }

    .label-inline,
    .new-product-card .label:not(.label-inline):not(.label-remaining) {
        font-size: 13px;
    }

    .label-remaining {
        font-size: 12px;
        margin-bottom: 15px;
    }

    .new-product-card .features {
        padding-top: 15px;
        margin-bottom: 15px;
    }

    .new-product-card .fixed-ip-label {
        font-size: 12px;
        margin-bottom: 6px;
        padding-right: 20px;
    }

    .new-product-card .fixed-ip-label::before {
        width: 14px;
        height: 14px;
    }

    .new-product-card .price {
        font-size: 22px;
        margin-top: 8px;
        margin-bottom: 2px;
    }

    .new-product-card .price .small-text {
        font-size: 11px;
    }

    .new-product-card .card-buttons {
        padding: 0 12px 20px 12px;
    }

    .new-product-card .new-buy-button,
    .new-product-card .new-buy-button-tg {
        padding: 11px 10px;
        font-size: 12px;
        border-radius: 10px;
        /* گردی بیشتر */
    }
}

/* فال‌بک برای gap در flexbox */
@supports not (gap: 1em) {
    .product-cards-container {
        margin: -10px;
    }

    .product-cards-container>.new-product-card {
        margin: 10px;
    }

    @media (max-width: 767px) {
        .product-cards-container {
            margin-right: -6px;
            margin-left: -6px;
        }

        .product-cards-container>.new-product-card {
            margin-right: 6px;
            margin-left: 6px;
        }
    }
}














/*------------------- نظرات -------------------*/



/* styles.css - UPDATED FOR TESTIMONIALS */

/* --- کانتینر اصلی دیدگاه‌ها --- */
.testimonial-container {
    background-color: #ffffff;
    /* پس‌زمینه سفید */
    border-radius: 16px;
    /* گردی مشابه کارت‌های محصول */
    padding: 25px 30px 30px 30px;
    /* پدینگ داخلی */
    width: 100%;
    max-width: 700px;
    /* حداکثر عرض برای خوانایی بهتر */
    margin: 40px auto;
    /* فاصله از بالا و پایین و وسط‌چین شدن */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.07);
    /* سایه ملایم و مدرن */
    border: 1px solid #e9ecef;
    /* حاشیه ظریف */
    text-align: center;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    position: relative;
    direction: rtl;
    /* اطمینان از راست‌چین بودن کل کانتینر */
}

.testimonial-container h2 {
    font-family: 'Vazirmatn', 'iransensblod', 'iransens', sans-serif;
    /* فونت ضخیم‌تر برای عنوان */
    font-size: 1.8em;
    /* اندازه فونت عنوان */
    color: #3b454f;
    /* رنگ تیره برای عنوان */
    margin-top: 0;
    /* حذف مارجین بالا اگر پدینگ کانتینر کافی است */
    margin-bottom: 25px;
    /* فاصله از محتوای دیدگاه */
    position: relative;
    padding-bottom: 10px;
}

/* خط تزئینی زیر عنوان */
.testimonial-container h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 3px;
    background-color: #5E5DF0;
    /* رنگ هایلایت اصلی (آبی-بنفش) */
    border-radius: 2px;
}

/* --- کادر محتوای دیدگاه --- */
.testimonial-content-box {
    background-color: #f8f9fa;
    /* پس‌زمینه کمی متفاوت برای خود دیدگاه */
    border: 1px solid #e9ecef;
    border-radius: 12px;
    /* گردی کمتر از کانتینر اصلی */
    padding: 25px;
    text-align: center;
    width: auto;
    /* عرض خودکار بر اساس محتوا، محدود شده توسط والد */
    margin: 0 auto 25px auto;
    /* فاصله از عنوان و نقاط */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
    /* اضافه کردن color به transition */
    min-height: 120px;
    /* حداقل ارتفاع برای جلوگیری از پرش */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#testimonial-name {
    color: #5E5DF0;
    /* رنگ هایلایت برای نام کاربر */
    font-family: 'Vazirmatn', 'iransensblod', 'iransens', sans-serif;
    /* فونت ضخیم‌تر */
    font-size: 1.1em;
    margin-bottom: 10px;
    /* فاصله از متن دیدگاه */
    display: block;
    transition: color 0.3s ease;
    /* افزودن transition برای تغییر رنگ نام */
}

#testimonial-text {
    color: #495057;
    /* رنگ خاکستری تیره‌تر برای متن */
    font-size: 1em;
    line-height: 1.7;
    /* ارتفاع خط مناسب برای خوانایی */
    margin: 0;
    transition: color 0.3s ease;
    /* افزودن transition برای تغییر رنگ متن */
}

/* استایل کلاس فعال (وقتی کاربر روی دکمه‌ها کلیک می‌کند یا دیدگاه تغییر می‌کند) */
/* این کلاس باید با جاوااسکریپت به testimonial-content-box اضافه شود */
.testimonial-active-box {
    background-color: #5E5DF0 !important;
    /* رنگ پس‌زمینه هایلایت */
    border-color: #5E5DF0 !important;
}

.testimonial-active-box #testimonial-name,
.testimonial-active-box #testimonial-text {
    color: #ffffff !important;
    /* رنگ متن سفید در حالت فعال */
}

/* --- نقاط ناوبری --- */
.testimonial-dots-box {
    margin-top: 20px;
    text-align: center;
}

.dot-box {
    height: 10px;
    /* اندازه کوچکتر و مدرن‌تر */
    width: 10px;
    margin: 0 6px;
    /* فاصله بیشتر بین نقاط */
    background-color: #ced4da;
    /* رنگ خاکستری روشن برای نقاط غیرفعال */
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.dot-box:hover {
    background-color: #adb5bd;
    /* کمی تیره‌تر در هاور */
    transform: scale(1.1);
}

.dot-box.active {
    background-color: #5E5DF0;
    /* رنگ هایلایت برای نقطه فعال */
    transform: scale(1.2);
    /* کمی بزرگتر برای تاکید */
    box-shadow: 0 0 8px rgba(94, 93, 240, 0.5);
    /* سایه ملایم برای نقطه فعال */
}

/* واکنش‌گرایی برای موبایل */
@media (max-width: 767px) {
    .testimonial-container {
        padding: 20px 15px;
        /* کاهش پدینگ افقی در موبایل */
        margin: 20px auto;
        /* کاهش مارجین بالا و پایین */
    }

    .testimonial-container h2 {
        font-size: 1.5em;
        margin-bottom: 20px;
    }

    .testimonial-content-box {
        padding: 20px;
        min-height: 100px;
    }

    #testimonial-name {
        font-size: 1em;
    }

    #testimonial-text {
        font-size: 0.9em;
    }

    .dot-box {
        height: 9px;
        width: 9px;
        margin: 0 4px;
    }
}





























/*------------------- صفحه پرداخت direct.tpl -------------------*/


/* modern-checkout-styles-v15.css */
/* این کد CSS را جایگزین محتوای فایل CSS قبلی صفحه پرداخت خود کنید */

/* --- تنظیمات کلی برای فرم پرداخت --- */
.modern-checkout-form-container {
    max-width: 780px;
    margin: 100px auto;
    padding: 30px 35px;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 12px 35px rgba(40, 40, 90, 0.08);
    direction: rtl;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    border: 1px solid #f0f0f5;
}

.modern-checkout-form-container * {
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    box-sizing: border-box;
}

/* --- استایل جدول اطلاعات محصول --- */
.modern-checkout-form-container table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 30px;
    font-size: 0.95em;
}

.modern-checkout-form-container th,
.modern-checkout-form-container td {
    padding: 15px;
    text-align: right;
    color: #4a5568;
    border-bottom: 1px solid #edf2f7;
}

.modern-checkout-form-container tr:last-child td {
    border-bottom: none;
}

.modern-checkout-form-container td:first-child {
    font-weight: 500;
    color: #2d3748;
    width: 150px;
    /* عرض برای دسکتاپ */
    background-color: transparent;
    white-space: nowrap;
}

.modern-checkout-form-container tr td:nth-child(2) {
    word-break: break-word;
}

.modern-checkout-form-container tr:nth-child(odd) td:first-child {
    background-color: #f9fafb;
}

.modern-checkout-form-container tr:nth-child(odd) td:not(:first-child) {
    background-color: #fdfdff;
}

.modern-checkout-form-container #total {
    font-weight: 600;
    color: #2d3748;
}

.modern-checkout-form-container #discount {
    font-weight: 600;
    color: #38A169;
}

/* --- استایل پیام‌ها --- */
.modern-checkout-form-container .filoffc {
    background-color: #FEF3C7;
    color: #9A6700;
    padding: 15px 20px;
    border-radius: 10px;
    margin-bottom: 30px;
    text-align: center;
    font-size: 0.98em;
    border: 1px solid #FDE68A;
    line-height: 1.6;
}


/* --- استایل پیام‌ها --- */
/* ... سایر استایل‌های پیام‌ها مانند .filoffc اینجا قرار دارند ... */

.modern-checkout-form-container #showMessage,
/* برای حالتی که فقط ID دارد */
#showMessage.error,
/* برای حالتی که کلاس error هم دارد و ممکن است خارج از کانتینر باشد */
.modern-checkout-form-container #showMessage.error

/* برای اطمینان بیشتر اگر داخل کانتینر است */
    {
    position: relative !important;
    /* لغو position:fixed و قرار دادن در جریان عادی فرم */
    top: auto !important;
    /* لغو top:0px */
    left: auto !important;
    /* لغو left:0px */
    width: 100% !important;
    /* عرض کامل نسبت به والدش (.modern-checkout-form-container) */
    max-width: 100%;
    /* برای اینکه از والدش بیرون نزند */
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 25px !important;
    /* فاصله از پایین */
    margin-top: 0 !important;
    /* اگر لازم است فاصله از بالا داشته باشد، تنظیم کنید */
    padding: 15px 20px !important;
    background: #FEE2E2 !important;
    /* رنگ پس‌زمینه قرمز روشن */
    color: #d41b1b !important;
    /* رنگ متن قرمز تیره */
    border: 1px solid #FECACA !important;
    border-radius: 10px !important;
    text-align: center !important;
    font-family: 'iransens';
    font-size: 0.8em !important;
    line-height: 1.6 !important;
    z-index: 10 !important;
    /* یک z-index مناسب اگر لازم باشد روی المان‌های دیگر قرار گیرد */
    opacity: 1 !important;
    /* لغو opacity:0.75 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    /* یک سایه ملایم */
    display: block !important;
    /* اطمینان از نمایش به صورت بلاک */
}

/* --- استایل فرم ورود اطلاعات --- */
.modern-checkout-form-container .form-container {
    margin-bottom: 10px;
}

.modern-checkout-form-container .form-group {
    display: flex;
    align-items: center;
    margin-bottom: 9px;
    position: relative;
}

.modern-checkout-form-container .form-group:last-child {
    margin-bottom: 0;
}

.modern-checkout-form-container input[type="text"].form {
    flex-grow: 1;
    padding: 8px 20px;
    border: 1px solid #007bff69;
    border-radius: 10px;
    font-size: 1em;
    color: #374151;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    background-color: #f9fafb;
}

.modern-checkout-form-container input[type="text"].form::placeholder {
    color: #9ca3af;
    opacity: 1;
}

.modern-checkout-form-container input[type="text"].form:focus {
    outline: none;
    border-color: #4F46E5;
    background-color: #ffffff;
    box-shadow: 0 0 0 3.5px rgba(79, 70, 229, 0.15);
}

.modern-checkout-form-container .form-group input#copun {
    flex-grow: 1;
    margin-left: 12px;
}

.modern-checkout-form-container .form-group a#check.button {
    white-space: nowrap;
    padding: 10px 18px;
    background-color: #4A5568;
    color: white;
    font-size: 0.9em;
    font-weight: 500;
    border-radius: 10px;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
    flex-shrink: 0;
}

.modern-checkout-form-container .form-group a#check.button:hover {
    background-color: #2D3748;
    transform: translateY(-1px);
}

.modern-checkout-form-container .form-group a#check.button:active {
    transform: translateY(0);
}

/* --- استایل بخش انتخاب درگاه پرداخت --- */
.modern-checkout-form-container .parent-container .form-item:nth-child(2) {
    background-color: #f7f8fc;
    padding: 25px 30px;
    border-radius: 12px;
    margin-bottom: 35px;
    border: 1px solid #e8edf3;
}

.modern-checkout-form-container .wapp {
    font-size: 1em;
    color: #4a5568;
    margin-bottom: 10px;
    text-align: center;
}

.modern-checkout-form-container .chpm {
    font-size: 1em;
    color: #3b454f;
    margin-bottom: 25px;
    text-align: center;
    font-weight: 500;
}

.modern-checkout-form-container .chpm br {
    display: none;
}

.modern-checkout-form-container .chpm input[type="radio"] {
    display: none;
}

/* Desktop styles for payment gateway labels */
.modern-checkout-form-container .chpm label.custom-control-label {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 10px;
    margin-top: 10px;
    border: 1.5px solid #d2d6dc;
    background-color: #ffffff;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: right;
    position: relative;
    color: #2d3748;
    font-size: 0.9em;
    float: none !important;
}

.modern-checkout-form-container .chpm label.custom-control-label:last-of-type {
    margin-bottom: 0;
}

.modern-checkout-form-container .chpm label.custom-control-label span.gateway-name {
    flex-grow: 1;
    /* padding-right برای دسکتاپ توسط margin-left ::before ایجاد می‌شود */
}

.modern-checkout-form-container .chpm label.custom-control-label::before {
    /* Outer circle - Desktop: on the right */
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e0;
    border-radius: 50%;
    background-color: #fff;
    transition: border-color 0.25s ease, background-color 0.25s ease;
    flex-shrink: 0;
    margin-left: 15px;
    /* فاصله بین دایره (راست) و متن (چپ) در دسکتاپ */
}

.modern-checkout-form-container .chpm label.custom-control-label::after {
    /* Inner dot - Desktop */
    content: '';
    position: absolute;
    top: 50%;
    right: calc(20px + (20px / 2) - (10px / 2));
    /* (padding-right لیبل + نصف عرض before) - نصف عرض after = 25px */
    transform: translateY(-50%) scale(0);
    width: 10px;
    height: 10px;
    background-color: #4F46E5;
    border-radius: 50%;
    transition: transform 0.25s ease;
}

.modern-checkout-form-container .chpm input[type="radio"]:checked+label.custom-control-label {
    border-color: #4F46E5;
    background-color: #f3f4ff;
    color: #3730a3;
    font-weight: 500;
}

.modern-checkout-form-container .chpm input[type="radio"]:checked+label.custom-control-label::before {
    border-color: #4F46E5;
    background-color: #4F46E5;
}

.modern-checkout-form-container .chpm input[type="radio"]:checked+label.custom-control-label::after {
    transform: translateY(-50%) scale(1);
}

.modern-checkout-form-container .chpm label.custom-control-label:hover {
    border-color: #6963f7;
    background-color: #fafaff;
}

/* --- استایل دکمه پرداخت نهایی --- */
.modern-checkout-form-container .form-item.dot a#submit.button.blue {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90%;
    padding: 16px 20px;
    background: linear-gradient(135deg, #007AFF, #005FEE);
    color: white;
    font-size: 1.25em;
    font-weight: 600;
    text-align: center;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 6px 18px rgba(0, 122, 255, 0.28);
    position: relative;
}

.modern-checkout-form-container .form-item.dot a#submit.button.blue:hover {
    background: linear-gradient(135deg, #006EE6, #0050D8);
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 8px 22px rgba(0, 122, 255, 0.38);
}

.modern-checkout-form-container .form-item.dot a#submit.button.blue:active {
    transform: translateY(0) scale(0.99);
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.25);
}

.modern-checkout-form-container #loader {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: spin 0.7s linear infinite;
    margin-left: 12px;
    vertical-align: middle;
}

.modern-checkout-form-container .form-item.dot a#submit.button.blue.loading #loader {
    display: inline-block;
}

.modern-checkout-form-container .form-item.dot a#submit.button.blue.loading .button-text {
    display: none;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* واکنش‌گرایی برای موبایل */
@media (max-width: 767px) {
    .modern-checkout-form-container {
        margin: 20px 10px;
        padding: 20px 15px;
    }

    .modern-checkout-form-container table {
        font-size: 0.9em;
    }

    .modern-checkout-form-container tr {
        display: flex;
        flex-wrap: nowrap;
        align-items: baseline;
        margin-bottom: 0;
        border: none;
        border-bottom: 1px solid #edf2f7;
        padding: 10px 0;
    }

    .modern-checkout-form-container tr:last-child {
        border-bottom: none;
    }

    .modern-checkout-form-container tr td {
        border-bottom: none;
        width: auto !important;
        display: block;
        padding: 2px 0;
    }

    .modern-checkout-form-container tr td:first-child {
        background-color: transparent;
        font-weight: 500;
        padding-left: 8px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .modern-checkout-form-container tr td:nth-child(2) {
        flex-grow: 1;
        padding-left: 5px;
        padding-right: 5px;
        font-size: 14px;
    }

    .modern-checkout-form-container .form-group {
        flex-direction: row;
        align-items: center;
    }

    .modern-checkout-form-container .form-group input#copun {
        width: auto;
        flex-grow: 1;
        margin-left: 10px;
        margin-bottom: 0;
        padding: 8px 15px;
        font-size: 0.95em;
    }

    .modern-checkout-form-container .form-group a#check.button {
        width: auto;
        flex-shrink: 0;
        padding: 13px 20px;
        font-size: 0.85em;
    }

    .modern-checkout-form-container .parent-container .form-item:nth-child(2) {
        padding: 20px 15px;
    }

    /* اصلاح چیدمان انتخاب درگاه در موبایل برای قرارگیری دایره در سمت راست */
    .modern-checkout-form-container .chpm label.custom-control-label {
        font-size: 0.9em;
        padding: 12px 15px;
        flex-direction: row;
        /* بازگشت به حالت پیش‌فرض فلکس برای RTL */
        justify-content: flex-start;
        /* شروع از راست */
    }

    .modern-checkout-form-container .chpm label.custom-control-label::before {
        margin-left: 8px;
        /* فاصله بین دایره (راست) و متن (چپ) */
        margin-right: 0;
        width: 18px;
        height: 18px;
        order: initial;
        /* ترتیب طبیعی (::before اول در کد، اول در نمایش راست) */
    }

    .modern-checkout-form-container .chpm label.custom-control-label span.gateway-name {
        padding-right: 0;
        /* حذف پدینگ راست اضافی */
    }

    .modern-checkout-form-container .chpm label.custom-control-label::after {
        /* موقعیت ::after نسبت به ::before که حالا در سمت راست متن است */
        right: calc(15px + 18px/2 - 8px/2);
        /* (padding-right لیبل + نصف عرض before) - نصف عرض after = 15 + 9 - 4 = 20px */
        left: auto;
        width: 8px;
        height: 8px;
    }

    .modern-checkout-form-container .form-item.dot a#submit.button.blue {
        font-size: 1.1em;
        padding: 15px;
    }

    .modern-checkout-form-container #loader {
        width: 18px;
        height: 18px;
    }
}














/*------------------- کادرهای تماس با ما و جیمیل بخش پرفکت مانی -------------------*/

/* CSS به‌روز شده برای ظاهر جدید - با حفظ کلاس‌های اصلی شما */

/* استایل کلی برای کانتینر اصلی بخش، مشابه کارت در نمونه جدید */
.boxallpm {
    background-color: #ffffff;
    /* پس‌زمینه سفید برای کارت */
    border-radius: 12px;
    /* گوشه‌های گردتر */
    padding: 30px 25px;
    /* پدینگ داخلی کارت */
    margin: 20px auto;
    /* برای وسط‌چین کردن کارت و فاصله از بالا و پایین */
    max-width: 700px;
    /* محدود کردن عرض کارت برای ظاهر بهتر در دسکتاپ */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    /* سایه ملایم مشابه نمونه جدید */
    text-align: center;
    direction: rtl;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    /* استفاده از فونت iransens */
    color: #333;
    /* رنگ متن پیش‌فرض تیره‌تر */
    position: relative;
    /* حفظ شده از کد شما */
    /* width: 100%;  max-width بهتر است */
    /* margin-top: -15px; ممکن است نیاز به تنظیم مجدد داشته باشد */
}

/* استایل عنوان داخل .boxallpm اگر از طریق تگ‌های داخلی HTML کنترل می‌شود */
/* برای مثال، اگر تگ h2 یا p برای عنوان استفاده شود، می‌توان در اینجا استایل داد */
.boxallpm .servicetitle .wapp {
    /* با فرض اینکه این ساختار برای عنوان اصلی است */
    font-size: 18px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.boxallpm .servicetitle {
    /* استایل کلی برای متن توضیحات */
    font-size: 15px;
    color: #555;
    line-height: 1.7;
    margin-bottom: 25px;
    /* فاصله از دکمه‌ها */
}

/* استایل برای متن "به صورت ریالی" با رنگ آبی جدید */
.boxallpm .servicetitle font[color='#ff0000'] {
    /* هدف قرار دادن تگ font قدیمی */
    color: #007bff !important;
    /* استفاده از important برای غلبه بر استایل font */
    font-weight: 600;
}

/* استایل برای متن "روش های بالا ساده و سریع می باشند" */
.boxallpm .servicetitle font[color='#4CAF50'] strong {
    color: #007bff !important;
    /* رنگ آبی مشابه نمونه جدید */
    font-weight: 500;
    display: block;
    /* برای اطمینان از اعمال مارجین بالا */
    margin-top: 20px;
}

/* چینش گروه دکمه‌ها */
.new-button-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    /* فاصله بین دکمه‌ها */
    flex-wrap: wrap;
    /* برای واکنش‌گرایی بهتر */
    /* margin-top: 50px;  این توسط .boxallpm و .servicetitle مدیریت می‌شود */
}

.new-button-group.kadrpm {
    margin-top: 10px;
    /* تنظیم مارجین با توجه به محتوای بالا */
    margin-bottom: 10px;
    /* تنظیم مارجین پایین */
}

/* کلاس‌های .kadrbuy دست نخورده باقی می‌مانند طبق درخواست */
.new-button-group.kadrbuy {
    margin-top: 30px;
    margin-bottom: 30px;
}

.new-button-group.kadrbuy a:nth-child(1),
.new-button-group.kadrbuy a:nth-child(2),
.new-button-group.kadrbuy a:nth-child(5) {
    border: 2px solid silver !important;
    background: #f8f8f8 !important;
    color: #333 !important;
}

.new-button-group.kadrbuy a:nth-child(3),
.new-button-group.kadrbuy a:nth-child(4) {
    border: 2px solid gold !important;
    background: #fffbea !important;
    color: #444 !important;
}

/* استایل مدرن دکمه‌ها با گرادیانت آبی (به‌روز شده برای مطابقت با نمونه جدید) */
.new-btn-style-2 {
    display: inline-flex;
    /* برای هم‌ترازی آیکون و متن */
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    color: #ffffff;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    padding: 12px 28px;
    /* پدینگ دکمه‌ها */
    border-radius: 8px;
    /* گوشه‌های گردتر و مدرن‌تر */
    margin: 5px;
    /* فاصله بین دکمه‌ها اگر gap کافی نباشد */
    background: linear-gradient(135deg, #007bff, #0056b3);
    /* گرادیانت آبی مشابه نمونه جدید */
    box-shadow: 0 5px 15px rgba(0, 123, 255, 0.25);
    /* سایه مدرن */
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 220px;
    /* حداقل عرض برای دکمه‌ها برای ظاهر بهتر */
}

.new-btn-style-2:hover {
    background: linear-gradient(135deg, #0056b3, #004085);
    /* تغییر گرادیانت در هاور */
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.35);
    transform: translateY(-2px);
    /* افکت شناور شدن */
}

.new-btn-style-2:focus,
.new-btn-style-2:active {
    /* ترکیب focus و active */
    transform: translateY(0px);
    box-shadow: 0 3px 10px rgba(0, 123, 255, 0.2);
}

/* استایل اختصاصی برای دکمه‌های kadrpm با ظاهر آبی جدید */
/* از آنجایی که .new-btn-style-2 اکنون استایل آبی دارد، این بخش ممکن است اضافی باشد مگر اینکه تفاوت‌های دیگری لازم باشد */
.new-btn-style-2.kadrpm {
    /* padding: 12px 28px; /* اگر نیاز به پدینگ متفاوت است */
    /* background: linear-gradient(135deg, #007bff, #0056b3); /* در حال حاضر توسط .new-btn-style-2 پوشش داده شده */
    /* box-shadow: 0 5px 15px rgba(0, 123, 255, 0.25); /* در حال حاضر توسط .new-btn-style-2 پوشش داده شده */
}

/* افزودن آیکون‌ها به دکمه‌های خاص با استفاده از before و SVG درون‌خطی */
/* دکمه تلگرام (با فرض اینکه لینک تلگرام در href وجود دارد) */
.new-btn-style-2[href*="t.me/perfectmx"]::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    /* در فارسی margin-left برای قرارگیری آیکون در سمت راست متن */
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='24px' height='24px'%3E%3Cpath d='M9.78 18.65l.28-4.23.02-.28-.22-.16c-.19-.14-3.06-2.2-2.3-2.62.75-.42 15.56-6.43 16.54-6.87.98-.44 1.41.04 1.18.73-.23.69-2.57 8.57-3.01 10.39-.44 1.82-1.42 2.16-2.5 1.3-.99-.78-1.83-1.35-2.91-2.13l-3.58 2.1c-.98.58-1.73.29-1.97-.52z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* دکمه جیمیل (با فرض اینکه تابع composeEmail در onclick وجود دارد) */
.new-btn-style-2[onclick*="composeEmail"]::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 8px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white' width='24px' height='24px'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* تنظیم چینش در صفحه‌های کوچک (موبایل) */
@media (max-width: 768px) {
    .boxallpm {
        padding: 20px 15px;
        /* پدینگ کمتر در موبایل */
        margin: 15px;
    }

    .boxallpm .servicetitle .wapp {
        font-size: 18px;
        /* کمی کوچک‌تر در موبایل */
    }

    .boxallpm .servicetitle {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .new-button-group {
        flex-direction: column;
        align-items: stretch;
        /* دکمه‌ها تمام عرض را بگیرند */
    }

    .new-btn-style-2 {
        margin: 8px 0;
        /* فاصله عمودی بین دکمه‌ها */
        width: 100%;
        /* دکمه‌ها تمام عرض والد خود را اشغال می‌کنند */
        min-width: unset;
        /* برداشتن حداقل عرض در موبایل */
    }

    .new-button-group a:last-child {
        /* برای حذف مارجین پایین از آخرین دکمه در حالت ستونی */
        margin-bottom: 0;
    }
}

/* استایل برای لینک اول تماس با ما تلگرام در بخش ساپورت - این کلاس در HTML شما استفاده نشده بود، دست نخورده باقی می‌ماند */
.first-btn {
    background: linear-gradient(135deg, #00bfff, #1e90ff);
    /* رنگ گرادیانت متفاوت (آبی ملایم) */
}


















/*------------------- صفحه انتخاب لوکیشن -------------------*/


/* General page styling - عمومی */
/* The body tag styling has been removed to avoid conflict with your existing style.css */
/* Font 'iransens' is now directly applied to relevant classes for this page. */

.page-container-location-selector {
    padding-top: 40px;
    /* فاصله از هدر کمی کمتر شد */
    padding-bottom: 60px;
    /* فاصله از فوتر کمی کمتر شد */
    text-align: right;
    /* راست چین برای فارسی */
    direction: rtl;
    /* جهت متن برای فارسی */
    background-color: #f4f7f6;
    /* یک پس زمینه خیلی روشن، مشابه بخش هایی از صفحه اصلی */
    min-height: 60vh;
    /* حداقل ارتفاع برای جلوگیری از چسبیدن فوتر */
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    /* اعمال فونت به کانتینر اصلی صفحه */
}

.location-selector-content-area {
    max-width: 1140px;
    /* عرض محتوای اصلی */
    margin: 0 auto;
    padding: 0 15px;
    /* پدینگ افقی کمی کمتر شد */
}

/* Title and Subtitle - عنوان و زیرعنوان */
.location-selector-header {
    text-align: center;
    margin-bottom: 40px;
    /* فاصله زیر عنوان اصلی کمی کمتر شد */
}

.location-selector-title {
    display: inline-block;
    color: #0855df;
    /* رنگ شاخص (آبی) */
    font-size: 1.3em;
    font-weight: bold;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    /* اطمینان از اعمال فونت */
    padding: 5px 15px;
    background-color: rgba(0, 123, 255, 0.1);
    /* پس‌زمینه بسیار روشن آبی */
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.location-selector-subtitle {
    font-size: 0.9em;
    /* اندازه فونت زیرعنوان کمی کوچکتر شد */
    color: #555;
    /* رنگ خاکستری برای زیرعنوان */
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    /* اطمینان از اعمال فونت */
}

/* Country selection grid - شبکه انتخاب کشور */
.country-selection-grid {
    display: grid;
    /* در صفحات بزرگتر، ستون‌ها کوچکتر و بیشتر می‌شوند */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    /* حداقل عرض ۲۰۰ پیکسل برای هر کارت */
    gap: 20px;
    /* فاصله بین کارت ها کمی کمتر شد */
    justify-content: center;
}

/* Country item card - کارت هر کشور */
.country-item-card {
    background-color: #ffffff;
    /* پس زمینه سفید برای کارت ها */
    border-radius: 12px;
    /* گوشه های گرد کمی کمتر شد */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    /* سایه ملایم تر */
    padding: 20px 15px;
    /* پدینگ داخلی کارت ها کمتر شد */
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    /* انیمیشن کمی سریعتر */
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #e8e8e8;
    /* بوردر کمی روشن تر */
}

.country-item-card:hover {
    transform: translateY(-7px);
    /* افکت هاور کمی کمتر شد */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    /* سایه هاور کمی کمتر */
}

/* Country flag - پرچم کشور */
.country-flag-image {
    width: 60px;
    /* اندازه پرچم کوچکتر شد */
    height: auto;
    margin-bottom: 15px;
    /* فاصله کمتر شد */
    border-radius: 6px;
    /* گوشه های گرد کمی کمتر شد */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Country name - نام کشور */
.country-name-text {
    font-size: 1.3em;
    /* اندازه فونت نام کشور کوچکتر شد */
    color: #3b454f;
    /* رنگ تیره برای نام کشور */
    font-weight: 600;
    /* ضخامت فونت */
    margin-bottom: 18px;
    /* فاصله کمتر شد */
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    /* اطمینان از اعمال فونت */
    display: flex;
    /* برای چیدمان نام و برچسب */
    flex-direction: column;
    /* برچسب زیر نام کشور */
    align-items: center;
    /* وسط چین کردن محتویات */
    gap: 5px;
    /* فاصله بین نام کشور و برچسب اگر زیر هم هستند */
}

/* Badge styling (Method 3) */
.duration-badge {
    display: inline-block;
    color: white;
    font-size: 0.7em;
    /* اندازه فونت کوچک برای برچسب */
    padding: 3px 7px;
    /* پدینگ داخلی برچسب */
    border-radius: 4px;
    /* گوشه‌های گرد برچسب */
    font-weight: normal;
    /* یا bold */
    line-height: 1.2;
    /* برای جلوگیری از ارتفاع اضافی و بهتر دیده شدن حروف فارسی */
    /* margin-top: 5px; */
    /* اگر برچسب زیر نام کشور است، gap در .country-name-text این کار را انجام می‌دهد */
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    /* اطمینان از فونت */
    /* text-transform: uppercase; */
    /* برای فارسی معمولا استفاده نمی‌شود */
}

/* Default badge color (اگر کلاسی برای رنگ خاص تعریف نشده باشد) */
.duration-badge {
    background-color: #6c757d;
    /* خاکستری به عنوان پیش‌فرض */
}

/* رنگ‌های مختلف برای برچسب‌ها (اختیاری) */
.duration-badge.badge-blue {
    background-color: #007bff;
    /* آبی */
}

.duration-badge.badge-green {
    background-color: #28a745;
    /* سبز */
}

.duration-badge.badge-orange {
    background-color: #fd7e14;
    /* نارنجی */
}

.duration-badge.badge-red {
    background-color: #dc3545;
    /* قرمز */
}


/* Selection button - دکمه انتخاب */
.btn-select-this-country {
    display: inline-block;
    background-color: #007bff;
    /* رنگ آبی اصلی سایت شما */
    color: #ffffff;
    /* رنگ متن سفید */
    padding: 10px 25px;
    /* پدینگ دکمه کمتر شد */
    border-radius: 6px;
    /* گوشه های گرد کمی کمتر شد */
    text-decoration: none;
    font-weight: bold;
    font-size: 0.9em;
    /* اندازه فونت دکمه کوچکتر شد */
    transition: background-color 0.2s ease, transform 0.15s ease;
    /* انیمیشن کمی سریعتر */
    border: none;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    /* برای اینکه پدینگ روی عرض تاثیر نگذارد */
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    /* اطمینان از اعمال فونت برای متن دکمه */
    margin-top: auto;
    /* برای اینکه دکمه همیشه پایین کارت باشد */
}

.btn-select-this-country:hover {
    background-color: #0056b3;
    /* رنگ آبی تیره تر در هاور */
    transform: scale(1.03);
    /* بزرگنمایی هاور کمی بیشتر */
}

/* Responsive adjustments - تنظیمات واکنشگرایی */

/* For tablets and medium screens - برای تبلت و صفحات متوسط */
@media (max-width: 992px) {
    .location-selector-title {
        font-size: 1.3em;
    }

    .country-selection-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        /* کارت‌ها در تبلت هم کوچکتر */
        gap: 18px;
    }

    .country-name-text {
        font-size: 1.2em;
        gap: 4px;
    }

    .duration-badge {
        font-size: 0.65em;
        padding: 2px 6px;
    }

    .btn-select-this-country {
        font-size: 0.85em;
        padding: 9px 20px;
    }
}

/* For small mobile screens - برای موبایل‌های کوچک */
@media (max-width: 768px) {
    .location-selector-content-area {
        padding: 0 10px;
        /* پدینگ کمتر در موبایل */
    }

    .location-selector-title {
        font-size: 1.2em;
    }

    .location-selector-subtitle {
        font-size: 0.85em;
        margin-bottom: 30px;
    }

    .country-selection-grid {
        /* نمایش ۲ کارت در هر ردیف در موبایل */
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        /* فاصله کمتر بین کارت‌ها در موبایل */
    }

    .country-item-card {
        padding: 15px 10px;
        /* پدینگ داخلی کمتر برای کارت‌های موبایل */
    }

    .country-flag-image {
        width: 50px;
        margin-bottom: 10px;
    }

    .country-name-text {
        font-size: 1.1em;
        /* نام کشور کوچکتر در موبایل */
        margin-bottom: 15px;
        /* فاصله اصلی نام تا دکمه */
        gap: 3px;
    }

    .duration-badge {
        font-size: 0.6em;
        padding: 2px 5px;
    }

    .btn-select-this-country {
        font-size: 0.8em;
        /* دکمه کوچکتر در موبایل */
        padding: 8px 15px;
    }
}

/* For very small mobile screens - برای موبایل‌های خیلی کوچک (اختیاری) */
@media (max-width: 480px) {
    .page-container-location-selector {
        padding-top: 30px;
        padding-bottom: 50px;
    }

    .location-selector-title {
        font-size: 1.1em;
    }

    .country-selection-grid {
        gap: 10px;
        /* فاصله باز هم کمتر */
    }

    .country-item-card {
        border-radius: 10px;
    }

    .country-name-text {
        font-size: 1em;
    }

    .duration-badge {
        font-size: 0.55em;
    }

    .btn-select-this-country {
        font-size: 0.75em;
    }
}















/*------------------- گردونه شانس -------------------*/


/* =========================================
 * کد CSS نهایی برای گردونه شانس
 * بازطراحی شده برای هماهنگی با تم روشن سایت
 * ========================================= */

/* تعریف متغیرهای رنگی برای تم جدید "پریمیوم روشن" */
:root {
    --premium-bg: #ffffff;
    /* پس‌زمینه سفید و تمیز */
    --premium-bg-gradient: linear-gradient(145deg, #fdfdff, #f7f8fc);
    /* گرادینت بسیار ملایم */
    --premium-border: #e8e6fc;
    /* حاشیه بنفش بسیار روشن، هماهنگ با سایت */
    --premium-shadow: rgba(90, 75, 222, 0.15);
    /* سایه ملایم بنفش */
    --premium-gold: #c59d00;
    /* طلایی تیره‌تر برای خوانایی بهتر روی پس‌زمینه روشن */
    --premium-text-dark: #343a40;
    /* رنگ متن اصلی تیره */
    --premium-text-light: #6c757d;
    /* رنگ متن ثانویه */
    --premium-brand-purple: #5a4bde;
    /* بنفش اصلی برند */
    --premium-button-bg: linear-gradient(45deg, #007bff, #5a4bde);
    /* گرادینت دکمه */
    --premium-button-hover: linear-gradient(45deg, #2894ff, #7365e6);
    /* گرادینت هاور دکمه */
}

/* کانتینر اصلی بخش */
.loyalty-section-wrapper {
    padding: 60px 10px;
    background-color: #f8f9fa;
    /* رنگ پس‌زمینه کلی صفحه */
    font-family: 'Vazirmatn', 'iransens', sans-serif;
}

/* کارت اصلی گردونه شانس (بازطراحی شده برای تم روشن) */
.loyalty-card-v2 {
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    position: relative;
    text-align: center;
    padding: 45px 30px 35px 30px;
    background: var(--premium-bg-gradient);
    border-radius: 24px;
    max-width: 450px;
    margin: 0 auto;
    border: 2px solid #e8e6fc;
    box-shadow: 0 10px 30px rgba(90, 75, 222, 0.15);
    ;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

.loyalty-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(90, 75, 222, 0.15);
}


/* برچسب "هدیه شما" با استایل هماهنگ */
.loyalty-card-tag {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #5a4bde;
    color: white;
    padding: 8px 35px;
    border-radius: 0 0 14px 14px;
    font-size: 0.95em;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(90, 75, 222, 0.3);
}

/* عنوان "جایزه وفاداری" */
.loyalty-title {
    font-size: 1.8em;
    font-weight: 700;
    color: #343a40;
    margin-bottom: 12px;
    margin-top: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.loyalty-title svg {
    stroke: #5a4bde;
    /* آیکون به رنگ بنفش برند */
}

/* زیرعنوان */
.loyalty-subtitle {
    font-size: 0.8em;
    color: #6c757d;
    line-height: 1.8;
    margin-bottom: 25px;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}

/* Style for the new reassurance text line */
.loyalty-reassurance {
    color: #e48500;
    font-size: 0.875rem;
    /* معادل 14px اگر فونت اصلی 16px باشد */
    font-weight: 500;
    /* کمی ضخیم‌تر از متن معمولی */
    margin-top: -8px;
    margin-bottom: 16px;
    /* فاصله از گردونه شانس پایینی */
    /*padding: 0 1rem; /* فاصله از طرفین برای نمایش بهتر در موبایل */
    text-align: center;
    line-height: 1.5;
    transition: color 0.3s ease;
}

.loyalty-reassurance:hover {
    color: #2c5282;
    /* تغییر رنگ در زمان بردن ماوس روی متن */
}

/* اسلات ماشین (بخش نمایش جایزه) */
.slot-window {
    height: 80px;
    width: 100%;
    background: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 25px;
}

.slot-pointer-frame {
    position: absolute;
    top: 50%;
    left: 5px;
    right: 5px;
    height: 80px;
    transform: translateY(-50%);
    border: 3px solid #007bff;
    border-radius: 10px;
    z-index: 3;
    background: transparent;
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.6), inset 0 0 15px rgba(0, 123, 255, 0.4);
    pointer-events: none;
}

.reel {
    transition: transform 4s cubic-bezier(0.2, 1, 0.3, 1);
}

.prize-item {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    font-weight: bold;
    color: #333;
}

.prize-item[data-prize-id="1"] {
    font-weight: bold;
    background: linear-gradient(135deg, #00d2ff, #8e2de2, #ff0000);
    background-size: 200% 200%;
    animation: shine 3s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #8e2de2;
    /* fallback */
}

@keyframes shine {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


.prize-item[data-prize-id="2"] {
    color: #198754;
}

.prize-item[data-prize-id="3"] {
    color: #0dcaf0;
}

.prize-item[data-prize-id="4"] {
    color: #ffc107;
}

.prize-item[data-prize-id="5"] {
    color: #6c757d;
}


/* گروه ورودی ایمیل و دکمه */
.loyalty-input-group {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* اینپوت ایمیل با استایل روشن */
.loyalty-input {
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    width: 100%;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #ced4da;
    font-size: 1em;
    text-align: center;
    box-sizing: border-box;
    transition: all 0.3s ease;
    background: #ffffff;
    color: #212529;
}

.loyalty-input::placeholder {
    color: #6c757d;
}

.loyalty-input:focus {
    border-color: #5a4bde;
    box-shadow: 0 0 0 4px rgba(90, 75, 222, 0.2);
    outline: none;
}

/* دکمه اصلی با ظاهر جدید */
.loyalty-button {
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    width: 100%;
    padding: 16px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(45deg, #007bff, #0056b3);
    color: white;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(66, 133, 244, 0.3);
    letter-spacing: 0.5px;
}

.loyalty-button:hover:not(:disabled) {
    background: var(--premium-button-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(90, 75, 222, 0.4);
}

.loyalty-button:disabled {
    background: #e9ecef;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    color: #6c757d;
}

/* بخش نمایش نتیجه */
.loyalty-result {
    margin-top: 20px;
    font-size: 1.1em;
    font-weight: 500;
    padding: 15px;
    border-radius: 10px;
    display: none;
    animation: fadeIn 0.5s;
}

.loyalty-result.success {
    background-color: #e8f9f3;
    color: #1abc9c;
    border: 1px solid #1abc9c;
}

.loyalty-result.error {
    background-color: #fbeae9;
    color: #e74c3c;
    border: 1px solid #e74c3c;
}

.loyalty-result.info {
    background-color: #e5e7eb;
    color: #374151;
    border: 1px solid #d1d5db;
}


@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
















/*------------------- کام بک -------------------*/

/* --- استایل‌های اختصاصی برای کادر بازگشت مشتری --- */

/* این کد فرض می‌کند که فونت 'iransens' از قبل در سایت شما 
   از طریق @font-face بارگذاری شده است.
*/

/* استایل اصلی کادر */
.comeback-section {
    max-width: 550px;
    margin: 50px auto;
    padding: 35px 40px;
    background-color: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    direction: rtl;
    transition: all 0.3s ease-in-out;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
}

/* استایل عنوان اصلی */
.comeback-section h3 {
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #343a40;
    margin-top: 0;
    margin-bottom: 15px;
}

/* استایل پاراگراف توضیحات */
.comeback-section p {
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    font-size: 1rem;
    color: #6c757d;
    line-height: 1.8;
    margin-bottom: 25px;
}

/* گروه ورودی ایمیل و دکمه */
.comeback-input-group {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* استایل فیلد ورودی ایمیل */
#comeback_email_input {
    flex-grow: 1;
    padding: 15px;
    border: 1px solid #ced4da;
    border-radius: 12px;
    text-align: right;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    font-size: 1rem;
    transition: all 0.3s ease;
    outline: none;
    width: 100%;
    /* برای چیدمان بهتر در موبایل */
    box-sizing: border-box;
    /* برای محاسبه درست اندازه */
}

/* استایل فیلد ورودی در حالت فوکوس */
#comeback_email_input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.15);
}

/* استایل دکمه */
#comeback_submit_button {
    padding: 15px 30px;
    border: none;
    background: linear-gradient(45deg, #007bff, #0056b3);
    color: white;
    border-radius: 12px;
    cursor: pointer;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.2);
    white-space: nowrap;
    /* **اصلاح کلیدی:** جلوگیری از شکستن متن دکمه */
}

/* افکت شناور شدن روی دکمه */
#comeback_submit_button:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(0, 123, 255, 0.3);
}

/* استایل دکمه وقتی غیرفعال است */
#comeback_submit_button:disabled {
    background: #6c757d;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* کانتینر اصلی پیام نتیجه */
.comeback-result-message {
    margin-top: 20px;
    font-weight: 500;
    padding: 15px;
    border-radius: 10px;
    font-size: 0.95rem;
    line-height: 1.7;
    border-width: 1px;
    border-style: solid;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
}

/* استایل پیام موفقیت (سبز) */
.comeback-result-message.success {
    background-color: #e6f9f0;
    color: #00874e;
    border-color: #a3e0c4;
}

/* استایل پیام خطا (قرمز) */
.comeback-result-message.error {
    background-color: #fdeeee;
    color: #d93025;
    border-color: #f7c5c1;
}

/* استایل پیام اطلاع‌رسانی (زرد/نارنجی) */
.comeback-result-message.info {
    background-color: #fff8e1;
    color: #e67e22;
    border-color: #ffecb3;
}


/* ------------------------------------------- */
/* --- کدهای واکنش‌گرا برای صفحه‌های کوچک --- */
/* ------------------------------------------- */
@media (max-width: 600px) {
    .comeback-section {
        /* ایجاد فاصله 15 پیکسلی از کناره‌های صفحه */
        margin-left: 15px;
        margin-right: 15px;

        /* کاهش پدینگ داخلی برای ایجاد فضای بیشتر */
        padding: 25px 20px;
    }

    /* چیدن عمودی آیتم‌ها برای خوانایی بهتر */
    .comeback-input-group {
        flex-direction: column;
        gap: 12px;
    }

    /* تمام عرض کردن دکمه */
    #comeback_submit_button {
        width: 100%;
    }
}








/*------------------- پنل کاربری -------------------*/


/* استایل پنل مشاهده کارت‌ها */
/* استایل مدرن و هماهنگ با ظاهر سایت برای صفحه کارت‌های من */

.user-cards-section {
    max-width: 95%;
    margin: 40px auto;
    background: #ffffff;
    padding: 40px;
    border-radius: 18px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    direction: rtl;
    text-align: center;
}

.user-cards-section h2 {
    font-size: 28px;
    font-weight: 700;
    color: #333;
    margin-bottom: 10px;
}

.user-cards-section .user-email {
    color: #666;
    margin-bottom: 20px;
    font-size: 15px;
}

.action-links {
    margin-bottom: 30px;
}

.action-links a {
    display: inline-block;
    margin: 0 5px;
    padding: 8px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: 0.3s ease;
}

.action-links .btn-back {
    background-color: #007bff;
}

.action-links .btn-back:hover {
    background-color: #0056b3;
}

.action-links .btn-logout {
    background-color: #dc3545;
}

.action-links .btn-logout:hover {
    background-color: #b02a37;
}

/* --- شروع استایل‌های صفحه کارت‌های من --- */

.cards-table-wrapper {
    width: 100%;
    overflow-x: auto;
    /* اسکرول افقی در موبایل برای جلوگیری از به هم ریختگی */
}

.cards-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 25px;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
}

.cards-table th,
.cards-table td {
    padding: 12px 15px;
    text-align: right;
    border-bottom: 1px solid #e2e8f0;
}

.cards-table th {
    background-color: #f8fafc;
    font-weight: 600;
    color: #475569;
    font-size: 0.9rem;
    text-transform: uppercase;
}

.cards-table tbody tr:last-of-type td {
    border-bottom: none;
}

.cards-table tbody tr:hover {
    background-color: #f1f5f9;
}

.cards-table td {
    font-size: 0.95rem;
    color: #334155;
}

.cards-table td code {
    font-family: monospace;
    background-color: #e2e8f0;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 0.9rem;
    direction: ltr;
    text-align: left;
    display: inline-block;
}

/* استایل برای ستون ایمیل گیرنده */
.recipient-email {
    font-weight: 500;
    color: #1d4ed8;
    font-size: 0.9rem;
}

.recipient-email .is-gift {
    font-size: 0.75rem;
    color: #16a34a;
    display: block;
}

/* --- شروع استایل فونت‌های تفکیک شده برای جدول کارت‌ها --- */

/* تنظیم فونت پیش‌فرض جدول */
.cards-table {
    font-family: 'Vazirmatn', 'iransens', sans-serif;
}

/* تنظیم فونت تاهوما برای سلول‌های حاوی عدد و کد */
.cards-table .font-numeric,
.cards-table td code {
    font-family: 'tahoma', sans-serif;
}

.prize-amount {
    color: #28a745;
    /* یک رنگ سبز زیبا */
    font-size: 0.9em;
    /* کمی کوچکتر از متن اصلی */
    font-weight: normal;
    /* برای جلوگیری از ضخیم بودن فونت */
}

/* --- پایان استایل فونت‌ها --- */






/* --- شروع استایل‌های صفحه ورود (نسخه نهایی) --- */

.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.login-box {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 400px;
    margin: 7vh auto 5vh auto;
    text-align: center;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
}

.login-box h2 {
    margin-bottom: 25px;
    margin-top: 0px;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    color: #3b454f;
}

.login-box .error-message {
    /* -- چیدمان و هم‌راستاسازی -- */
    display: flex;
    align-items: center;
    gap: 10px;
    /* فاصله بین آیکون و متن */

    /* -- رنگ‌بندی مدرن -- */
    color: #991b1b;
    /* قرمز تیره‌تر و خواناتر برای متن */
    background-color: #fee2e2;
    /* قرمز بسیار ملایم برای پس‌زمینه */

    /* -- ظاهر و فاصله گذاری -- */
    border-left: 5px solid #ef4444;
    /* یک نوار رنگی برای تاکید بیشتر */
    border-radius: 8px;
    /* حفظ گوشه‌های گرد */
    padding: 16px;
    /* فضای داخلی بیشتر */
    margin-bottom: 20px;

    /* -- فونت -- */
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    font-size: 13px;
    /* کمی بزرگتر برای خوانایی بهتر */
    font-weight: 500;
    /* وزن متوسط برای تاکید ملایم */

    /* -- افکت و انیمیشن -- */
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.15);
    /* سایه نرم برای ایجاد عمق */
    transition: all 0.3s ease-in-out;
    /* انیمیشن نرم برای نمایش */
}

/* افزودن آیکون هشدار با استفاده از псевдоэлемент */
.login-box .error-message::before {
    content: '⚠️';
    /* می‌توانید از SVG یا فونت آیکون هم استفاده کنید */
    font-size: 20px;
    line-height: 1;
}

.login-box input[type="email"],
.login-box input[type="text"],
.login-box input[type="number"] {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 0.8rem;
    text-align: center;
    direction: ltr;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
}

.login-box input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.login-box button {
    width: 100%;
    padding: 12px;
    border: none;
    background-color: #3b82f6;
    color: white;
    font-size: 1.1rem;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.login-box button:hover {
    background-color: #2563eb;
}

.math-captcha-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 10px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    direction: rtl;
}

.math-captcha-group label {
    font-family: 'tahoma', sans-serif;
    font-size: 1.2rem;
    font-weight: bold;
    color: #334155;
    margin: 0;
}

.math-captcha-group input {
    width: 95px !important;
    margin: 0px 9px 0px !important;
    padding: 7px 0px 13px !important;
    font-size: 1.1rem !important;
    font-weight: bold;
    font-family: 'tahoma', sans-serif !important;
}

.login-box .math-captcha-group input::placeholder {
    color: #a0aec0;
    font-size: 0.65rem;
    font-weight: 400;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
}

.return-home-btn {
    display: inline-block;
    margin-top: -10px;
    margin-bottom: 30px;
    padding: 10px 25px;
    background-color: #f97316;
    color: white;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    font-weight: bold;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
}

.return-home-btn:hover {
    background-color: #ea580c;
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .login-box {
        margin-top: 1vh;
        padding: 30px 20px;
    }
}

/* --- پایان استایل‌های صفحه ورود --- */







/*------------------- داشبورد جدید -------------------*/

/* --- اصلاح شد: اعمال استایل به کلاس های خودکار وردپرس --- */
body.page-template-panel-page-user-panel,
body.page-template-panel-page-add-credit {
    background-color: #f4f7fc;
}

.dashboard-wrapper {
    display: flex;
    direction: rtl;
}


/* =================================================================== */
/* >> شروع استایل نهایی و کامل پنل کاربری (نسخه روشن و مدرن) << */
/* =================================================================== */

/* --- ساختار کلی داشبورد --- */
.dashboard-wrapper {
    display: flex;
    background-color: #f7f8fc;
    /* پس‌زمینه اصلی محتوا */
    direction: rtl;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
}

/* --- استایل سایدبار مدرن (تم روشن) --- */
.dashboard-sidebar {
    width: 260px;
    background-color: #ffffff;
    /* پس‌زمینه سفید و یکپارچه */
    min-height: 100vh;
    border-left: 1px solid #eef2f9;
    /* خط جداکننده بسیار محو */
    padding: 20px;
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eef2f9;
}

.sidebar-header .logo-link img {
    max-width: 90px;
    height: auto;
}

/* بخش اطلاعات کاربر در سایدبار */
.sidebar-user-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 25px;
    text-align: center;
}

.sidebar-user-info .user-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(145deg, #4f87ff, #3b82f6);
    /* پس‌زمینه آبی گرادیانت */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.sidebar-user-info .user-avatar i {
    font-size: 32px;
    color: #ffffff;
}

.user-details .user-id {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    display: block;
    margin-bottom: 5px;
}

.user-details .user-wallet {
    font-size: 0.85rem;
    color: #64748b;
}

/* منوی اصلی سایدبار */
.dashboard-menu {
    flex-grow: 1;
}

.dashboard-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* >> اصلاح شد: چیدمان آیکون و متن منو << */
.dashboard-menu li a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* آیتم‌ها را به ابتدای فلکس (سمت راست در RTL) می‌چسباند */
    padding: 12px 15px;
    margin-bottom: 5px;
    text-decoration: none;
    color: #475569;
    font-size: 0.95rem;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    border-radius: 8px;
    transition: all 0.2s ease-in-out;
    font-weight: 500;
}

.dashboard-menu li a:hover {
    background-color: #f1f5f9;
    color: #1e293b;
}

.dashboard-menu li a.active {
    background-color: #3b82f6;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 5px 15px -3px rgba(59, 130, 246, 0.4);
}

.dashboard-menu li a i {
    margin-left: 12px;
    /* فاصله بین آیکون و متن */
    font-size: 16px;
    width: 20px;
    text-align: center;
    color: #9ca3af;
    transition: color 0.2s;
}

.dashboard-menu li a:hover i {
    color: #1e293b;
}

.dashboard-menu li a.active i {
    color: #ffffff;
}

/* --- استایل محتوای اصلی --- */
.dashboard-main {
    flex-grow: 1;
    padding: 30px;
}

.main-header {
    margin-bottom: 30px;
}

.main-header h1 {
    font-size: 2rem;
    font-weight: 800;
    color: #1a202e;
}

.main-header .breadcrumbs {
    color: #718096;
    font-size: 0.9rem;
}

.dashboard-grid {
    display: grid;
    gap: 25px;
}

.dashboard-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 20px -5px rgba(150, 150, 150, 0.1);
}

/* استایل‌های ریسپانسیو و منوی همبرگری */
.bfa-mobile-menu-toggle {
    display: none;
    background: #1e293b;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 20px;
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 1001;
}

.bfa-sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

@media (max-width: 992px) {
    .bfa-mobile-menu-toggle {
        display: block;
    }

    .dashboard-wrapper {
        display: block;
    }

    .dashboard-sidebar {
        background-color: #ffffff;
        position: fixed;
        top: 0;
        right: 0;
        width: 280px;
        height: 100%;
        transform: translateX(100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1000;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    }

    .bfa-sidebar-open .dashboard-sidebar {
        transform: translateX(0);
    }

    .bfa-sidebar-open .bfa-sidebar-overlay {
        display: block;
    }

    .dashboard-main {
        margin-right: 0;
        padding: 20px 15px;
    }
}

body.is-dashboard-panel .slicknav_menu {
    display: none !important;
}



/* --- محتوای اصلی --- */
.dashboard-main {
    flex: 1;
    padding: 30px;
}

.main-header {
    margin-bottom: 30px;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
}

.main-header h1 {
    font-size: 28px;
    color: #212529;
    margin: 0 0 5px 0;
}

.main-header .breadcrumbs {
    font-size: 14px;
    color: #6c757d;
}

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.dashboard-card {
    background-color: #ffffff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07);
    transition: all 0.3s ease;
}


/* افکت هاور فقط روی کارت‌های کوچک و تعاملی اعمال می‌شود.
  کلاس‌های .status-card, .info-card و... مربوط به داشبورد اصلی شما هستند.
*/
.dashboard-grid>.status-card:hover,
.dashboard-grid>.info-card:hover,
.dashboard-grid>.announcement-card:hover,
.dashboard-grid>.cta-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}


.dashboard-card h3 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #343a40;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
}

.dashboard-card p {
    font-size: 14px;
    color: #6c757d;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    margin: 0 0 20px 0;
}

.status-card .remaining-days {
    font-size: 16px;
    font-weight: bold;
    color: #28a745;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    margin-bottom: 20px;
}

.btn-renew,
.btn-main {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    transition: all 0.3s ease;
}

.btn-renew {
    background-color: #28a745;
    color: #fff;
}

.btn-renew:hover {
    background-color: #218838;
}

.btn-main {
    background-color: #007bff;
    color: #fff;
}

.btn-main:hover {
    background-color: #0056b3;
}

/* --- اصلاح نهایی برای حل مشکل تداخل با قالب اصلی --- */

/* این کد به قالب وردپرس می گوید که در صفحات پنل کاربری، 
  کادر اصلی محتوا را تمام عرض و بدون فاصله اضافی نمایش دهد
*/
body.page-template-panel-page-user-panel .content-area,
body.page-template-panel-page-add-credit .content-area,
body.page-template-panel-page-user-panel #primary,
body.page-template-panel-page-add-credit #primary,
body.page-template-panel-page-user-panel #main,
body.page-template-panel-page-add-credit #main,
body.page-template-panel-page-user-panel .site-content,
body.page-template-panel-page-add-credit .site-content {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

/* این کد تضمین می کند که کانتینر اصلی داشبورد ما
  از این فضای تمام عرض استفاده می کند
*/
.dashboard-wrapper {
    width: 100%;
}

/* رفع تداخل استایل عمومی nav با منوی داشبورد */
.dashboard-menu {
    background-color: transparent;
}










/* --- استایل های جدید برای بخش انتخاب روش پرداخت --- */

.payment-methods-container {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 20px;
    margin-top: 25px;
}

.payment-methods-container h4 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 16px;
    color: #333;
}

.payment-option {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    flex-wrap: wrap;
}

.payment-option:hover {
    border-color: #007bff;
    background-color: #e9f2ff;
}

.payment-option input[type="radio"] {
    margin-left: 10px;
}

.payment-option .custom-control-label {
    font-weight: 500;
    color: #495057;
    cursor: pointer;
    flex-grow: 1;
}

.payment-option .custom-control-label i {
    margin-left: 8px;
    color: #888;
}



/* --- فونت اصلی فقط برای فرم پرداخت و مودال‌ها --- */
.modern-checkout-form-container,
#confirmation-modal,
#general-message-modal {
    font-family: 'Vazirmatn', 'iransens', sans-serif;
}

/* --- استایل‌های یکپارچه برای تمام مودال‌ها --- */

/* 1. استایل پس‌زمینه (Overlay) */
#confirmation-modal-overlay,
#general-message-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    display: none;
    justify-content: center;
    align-items: center;
    direction: rtl;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

/* کلاس 'visible' برای نمایش مودال */
#confirmation-modal-overlay.visible,
#general-message-modal-overlay.visible {
    display: flex;
    opacity: 1;
}

/* 2. استایل کادر اصلی مودال */
#confirmation-modal,
#general-message-modal {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 450px;
    text-align: center;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    transform: translateY(-20px);
    opacity: 0;
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* انیمیشن ظاهر شدن کادر مودال */
#confirmation-modal-overlay.visible #confirmation-modal,
#general-message-modal-overlay.visible #general-message-modal {
    transform: translateY(0);
    opacity: 1;
}

/* 3. استایل محتوای متنی داخل مودال */
#confirmation-modal h4,
#general-message-modal h4 {
    margin-top: 0;
    margin-bottom: 15px;
    font-size: 20px;
    color: #333;
}

#confirmation-modal p,
#general-message-modal p {
    font-size: 15px;
    color: #555;
    margin-top: 0;
    margin-bottom: 25px;
    line-height: 1.6;
}

/* 4. استایل دکمه‌های مودال */
.modal-buttons {
    display: flex;
    justify-content: center;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    gap: 15px;
}

/* استایل پایه برای تمام دکمه‌های داخل مودال */
.modal-buttons .button {
    border: none;
    padding: 10px 25px;
    font-size: 15px;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

/* استایل دکمه‌های تایید (آبی) */
.modal-buttons .button.blue {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
}

.modal-buttons .button.blue:hover {
    background-color: #0056b3;
}

/* استایل دکمه انصراف (خاکستری) */
#modal-cancel-btn {
    background-color: #6c757d;
    color: white;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
}

#modal-cancel-btn:hover {
    background-color: #5a6268;
}

/* --- رفع مشکل بیرون زدن متن طولانی در گزینه‌های پرداخت --- */

.payment-option .custom-control-label {
    /* به لیبل اجازه می‌دهد تا فضای باقی‌مانده را پر کند */
    flex: 1;
    min-width: 0;
    /* برای جلوگیری از مشکلات مربوط به flexbox با محتوای طولانی */

    /* این ویژگی اصلی، به متن اجازه می‌دهد به خط بعدی برود */
    white-space: normal;

    /* برای خوانایی بهتر متن‌های چند خطی */
    line-height: 1.5;

    /* برای هم‌ترازی بهتر آیکون و متن در حالت چند خطی */
    align-self: center;
}

/* --- استایل برای انتقال پیام "موجودی کافی نیست" به خط بعد --- */


.insufficient-balance-small {
    /* این دستور باعث می‌شود این عنصر به تنهایی یک خط کامل را اشغال کند */
    flex-basis: 100%;

    /* ایجاد فاصله از سمت راست برای هم‌ترازی با متن لیبل بالایی */
    /* این مقدار را می‌توانید برای تنظیم دقیق‌تر، کم یا زیاد کنید */
    margin-right: 35px;
}






/* --- شروع استایل‌های بخش خرید برای دوستان --- */

.bfa-main-container,
.bfa-main-container * {
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    box-sizing: border-box;
}

.bfa-selection-container {
    padding: 10px 0;
}

.bfa-selection-container h4 {
    font-weight: 700;
    color: #334155;
    margin-bottom: 20px;
    font-size: 1.2rem;
    text-align: right;
}

.bfa-type-selector,
.bfa-product-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 35px;
}

.bfa-type-card,
.bfa-product-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    text-align: center;
    background-color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
}

.bfa-type-card:hover,
.bfa-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.07);
    border-color: #3b82f6;
}

.bfa-type-card.selected,
.bfa-product-card.selected {
    border-width: 2px;
    border-color: #3b82f6;
    background-color: #eff6ff;
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.1), 0 4px 6px -4px rgba(59, 130, 246, 0.1);
}

.bfa-type-card h4 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #1e293b;
    margin: 10px 0;
}

.bfa-product-card {
    padding: 15px;
    position: relative;
}

.bfa-product-card .bfa-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 10px;
}

.bfa-product-card .bfa-card-duration {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
}

.bfa-product-card .bfa-card-type-badge {
    background-color: #e0e7ff;
    color: #4338ca;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.bfa-product-card .bfa-card-features {
    font-size: 0.9rem;
    color: #64748b;
    margin-bottom: 20px;
    min-height: 25px;
    text-align: right;
}

.bfa-product-card .bfa-card-price {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e3a8a;
    text-align: left;
}

.bfa-product-card.selected::before {
    content: '✔';
    position: absolute;
    top: 12px;
    left: 12px;
    width: 24px;
    height: 24px;
    background-color: #3b82f6;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

#bfa-product-selector-container {
    display: none;
}

#bfa-submit-gift-purchase {
    background-color: #3b82f6;
    color: white;
    font-weight: bold;
    border-radius: 8px;
    padding: 12px 25px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    font-size: 1rem;
}

#bfa-submit-gift-purchase:hover {
    background-color: #2563eb;
}

#bfa-submit-gift-purchase:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
}

#bfa-gift-result-message {
    margin-top: 15px;
    font-weight: bold;
    padding: 12px;
    border-radius: 8px;
    display: none;
    text-align: center;
}

/* --- شروع استایل‌های جدید برای انتخاب کشور --- */

.bfa-country-selector {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 15px;
    margin-bottom: 35px;
}

.bfa-country-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.25s ease-in-out;
    background-color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.bfa-country-card:hover {
    transform: translateY(-4px);
    border-color: #3b82f6;
}

.bfa-country-card.selected {
    border-width: 2px;
    border-color: #3b82f6;
    background-color: #eff6ff;
}

.bfa-country-card img {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    border-radius: 50%;
    object-fit: cover;
}

.bfa-country-card span {
    font-weight: 600;
    font-size: 1rem;
    color: #1e293b;
}

#bfa-country-selector-container {
    display: none;
}


/* استایل متن توضیحی زیر کارت‌های VIP و Private */
.bfa-type-card p.bfa-type-description {
    font-size: 0.85rem;
    color: #475569;
    margin-top: 8px;
    line-height: 1.6;
    font-weight: 500;
}

/* --- پرچم‌های مینیاتوری در کارت نوع سرویس --- */
.bfa-type-flags {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.bfa-type-flags img {
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.bfa-type-flags img:hover {
    transform: scale(1.2);
}

/* استایل مدرن برای گروه فرم (کادر ایمیل) */
.dashboard-card .form-group {
    margin-bottom: 25px;
}

.dashboard-card .form-group label {
    display: block;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
    font-size: 1rem;
    text-align: right;
}

.dashboard-card .form-group .form-control {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background-color: #f8fafc;
    font-size: 1rem;
    color: #0f172a;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
}

.dashboard-card .form-group .form-control:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}




/* --- استایل دکمه‌های بخش کمبود موجودی --- */

.bfa-insufficient-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.bfa-action-btn {
    padding: 10px 22px;
    text-decoration: none !important;
    /* برای اطمینان از حذف خط زیر لینک */
    color: white !important;
    border-radius: 8px;
    font-weight: bold;
    font-size: 0.9rem;
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
}

.bfa-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.bfa-btn-blue {
    background-color: #3b82f6;
    /* آبی */
}

.bfa-btn-orange {
    background-color: #f97316;
    /* نارنجی */
}





/* --- شروع استایل‌های بهینه‌سازی پنل برای موبایل --- */

/* استفاده از مدیا کوئری برای اعمال استایل‌ها فقط در صفحات با عرض کمتر از 768 پیکسل */
@media (max-width: 768px) {

    /* ۱. کاهش حاشیه‌های اضافی در کل پنل */
    .dashboard-main {
        padding: 10px;
        /* کاهش پدینگ کلی محتوای اصلی */
    }

    .dashboard-card {
        padding: 15px;
        /* کاهش پدینگ داخلی کارت‌ها */
    }

    /* ۲. دو ستونه کردن کارت‌های انتخاب سرویس */
    .bfa-type-selector {
        grid-template-columns: repeat(2, 1fr);
        /* نمایش دو ستون مساوی */
        gap: 10px;
        /* کاهش فاصله بین کارت‌ها */
    }

    /* کاهش اندازه فونت‌ها برای جا شدن بهتر در کارت‌های کوچک‌تر */
    .bfa-type-card h4 {
        font-size: 1.1rem;
    }

    .bfa-type-card p.bfa-type-description {
        font-size: 0.75rem;
        line-height: 1.5;
    }

    /* دو ستونه کردن کارت‌های انتخاب کشور */
    .bfa-country-selector {
        grid-template-columns: repeat(2, 1fr);
    }

    /* دو ستونه کردن کارت‌های انتخاب پلن نهایی */
    .bfa-product-selector {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

/* دو ستونه کردن کارت‌های پلن نهایی در موبایل */
.bfa-product-selector {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.bfa-product-card h5 {
    font-size: 0.85rem;
}

.bfa-product-card .bfa-card-price {
    font-size: 1.1rem;
}


/* --- شروع استایل‌های صفحه کارت‌های من (فشرده و با جستجو) --- */

/* استایل فرم جستجو */
.bfa-search-form {
    margin-bottom: 25px;
    position: relative;
}

.bfa-search-input {
    width: 100%;
    height: 48px;
    padding: 10px 45px 10px 15px;
    /* فاصله برای آیکون در سمت راست */
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    font-size: 1rem;
    transition: all 0.2s ease-in-out;
}

.bfa-search-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.bfa-search-form .search-icon {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: #94a3b8;
}

.bfa-search-button {
    display: none;
    /* دکمه جستجو را مخفی می‌کنیم چون فرم با زدن Enter ارسال می‌شود */
}

/* استایل‌های فشرده‌سازی جدول */
.cards-table th,
.cards-table td {
    padding: 10px 12px;
    /* کاهش پدینگ سلول‌ها */
}

.cards-table th {
    font-size: 0.85rem;
}

.cards-table td {
    font-size: 0.75rem;
}

.cards-table td code {
    font-size: 0.70rem;
}

/* --- شروع استایل‌های بخش صفحه‌بندی --- */

.bfa-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 30px;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
}

.bfa-pagination a,
.bfa-pagination span {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #334155;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    font-size: 0.9rem;
    font-weight: 500;
}

.bfa-pagination a:hover {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

.bfa-pagination .current {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: white;
    font-weight: 700;
    cursor: default;
}

.bfa-pagination .dots {
    border: none;
    padding: 8px 5px;
}

/* --- پایان استایل‌ها --- */

/* --- تاریخه پرداخت ها --- */

.wallet-summary-box {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 30px;
}

.summary-item {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    text-align: center;
}

.summary-item-label {
    font-size: 14px;
    color: #6c757d;
    margin-bottom: 10px;
    display: block;
}

.summary-item-value {
    font-size: 24px;
    font-weight: bold;
    color: #212529;
}

.summary-item-value.balance {
    color: #198754;
    /* Green for balance */
}

.summary-item-value.total-deposits {
    color: #0d6efd;
    /* Blue for total deposits */
}

.cards-table tfoot {
    /* مخفی کردن بخش جمع کل قدیمی */
    display: none;
}

.bfa-pagination a,
.bfa-pagination span {
    transition: all 0.2s ease-in-out;
}

.bfa-pagination a:hover {
    background-color: #e9ecef;
    border-color: #ced4da;
    transform: translateY(-2px);
}

/* --- پایان استایل‌های بخش خرید برای دوستان --- */








/* --- START: REVISED Sticky Banner Styles (V3 with Delay) --- */

/* استایل پایه (برای موبایل - تمام عرض) */
.sticky-bottom-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #facc15;
    /* زرد مدرن و جذاب */
    color: #1f2937;
    /* خاکستری تیره برای متن */
    padding: 12px 15px;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Vazirmatn', 'iransens', sans-serif;
    direction: rtl;

    /* تغییرات برای انیمیشن و تاخیر در نمایش */
    opacity: 0;
    transform: translateY(150%);
    pointer-events: none;
    /* غیرقابل کلیک در حالت مخفی */
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease-out;
    /* انیمیشن نرم‌تر */
}

/* کلاس جدید برای نمایش بنر */
.sticky-bottom-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    /* قابل کلیک در حالت نمایش */
}

.sticky-bottom-banner .banner-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 15px;
    position: relative;
}

.sticky-bottom-banner .banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
}

.sticky-bottom-banner .banner-icon {
    font-size: 1.8rem;
    display: block;
}

.sticky-bottom-banner .banner-text {
    text-align: right;
}

.sticky-bottom-banner .banner-text h4 {
    margin: 0;
    font-family: 'Vazirmatn', 'iransensblod', sans-serif;
    font-size: 0.95rem;
    color: #3b454f;
    /* تیره‌تر برای کنتراست بهتر */
}

.sticky-bottom-banner .banner-text p {
    margin: 0;
    font-size: 0.8rem;
    color: #4b5563;
    display: none;
    /* در موبایل مخفی است */
}

.sticky-bottom-banner .banner-cta-btn {
    background-color: #1f2937;
    /* دکمه تیره مشابه نمونه */
    color: #fff;
    padding: 10px 18px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.3s ease, transform 0.2s ease;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.sticky-bottom-banner .banner-cta-btn i {
    font-size: 1rem;
}

.sticky-bottom-banner .banner-cta-btn:hover {
    background-color: #111827;
    /* تیره‌تر در هاور */
    transform: scale(1.05);
}

.sticky-bottom-banner .close-banner-btn {
    background: transparent;
    border: none;
    color: #4b5563;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: transform 0.3s ease, color 0.3s ease;
    position: absolute;
    top: -11px;
    left: -11px;
}

.sticky-bottom-banner .close-banner-btn:hover {
    transform: rotate(90deg);
    color: #111827;
}

/* استایل دسکتاپ (برای صفحات بزرگتر از 768 پیکسل) */
@media (min-width: 769px) {
    .sticky-bottom-banner {
        /* تبدیل به کارت در گوشه پایین-راست */
        width: auto;
        max-width: 420px;
        left: auto;
        /* حذف حالت تمام-عرض */
        right: 30px;
        bottom: 30px;
        border-radius: 16px;
        /* گردی بیشتر برای کارت */
        padding: 25px;
        flex-direction: column;
        align-items: flex-start;
        text-align: right;
    }

    .sticky-bottom-banner .banner-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .sticky-bottom-banner .banner-content {
        flex-direction: row;
        gap: 15px;
    }

    .sticky-bottom-banner .banner-icon {
        font-size: 2.2rem;
    }

    .sticky-bottom-banner .banner-text p {
        display: block;
        /* نمایش متن دوم در دسکتاپ */
    }

    .sticky-bottom-banner .banner-cta-btn {
        width: 100%;
        /* دکمه تمام عرض کارت شود */
        justify-content: center;
        /* محتوای دکمه وسط‌چین شود */
        padding: 12px;
        font-size: 1rem;
    }

    .sticky-bottom-banner .close-banner-btn {
        position: absolute;
        top: -15px;
        /* قرارگیری در داخل کارت */
        left: -11px;
        font-size: 1.3rem;
    }
}

/* --- END: REVISED Sticky Banner Styles (V3 with Delay) --- */



/* ================================================================== */
/* ---  بخش پریمیوم سرویس Private - All-in-One طلایی  --- */
/* ================================================================== */

/* --------- هدر سرویس Private --------- */
.private-premium-header {
    background: linear-gradient(135deg, #ffffff 0%, #fffdf5 50%, #fff9e6 100%) !important;
    border: 1px solid #f0e6c8 !important;
    box-shadow: 0 4px 20px rgba(200, 170, 80, 0.08) !important;
    position: relative;
    overflow: hidden;
}

.private-premium-header::before {
    background: linear-gradient(90deg, #D4A843, #F2D06B, #D4A843) !important;
    width: 60px !important;
    height: 3px !important;
}

.private-premium-header::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(212, 168, 67, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

/* آیکون Private */
.modern-service-icon.private-icon {
    background: linear-gradient(145deg, #D4A843, #B8860B) !important;
    box-shadow: 0 4px 12px rgba(212, 168, 67, 0.35) !important;
}

/* رنگ هایلایت Private - طلایی */
.modern-service-title .private-highlight {
    color: #C4952E;
}


/* --------- ردیف پرچم‌ها در هدر سرویس --------- */
.pricing-flags-v2 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
    margin-bottom: 5px;
    flex-wrap: wrap;
}

.pricing-flags-v2 img {
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    animation: flagFloat 3s ease-in-out infinite;
}

.pricing-flags-v2 img:nth-child(2) {
    animation-delay: 0.3s;
}

.pricing-flags-v2 img:nth-child(3) {
    animation-delay: 0.6s;
}

.pricing-flags-v2 img:nth-child(4) {
    animation-delay: 0.9s;
}

.pricing-flags-v2 img:nth-child(5) {
    animation-delay: 1.2s;
}

.pricing-flags-v2 img:nth-child(6) {
    animation-delay: 1.5s;
}

.pricing-flags-v2 img:nth-child(7) {
    animation-delay: 1.8s;
}

.pricing-flags-v2 img:hover {
    transform: translateY(-4px) scale(1.15);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

@keyframes flagFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-3px);
    }
}


/* --------- بج All-in-One --------- */
.private-allinone-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 8px 22px;
    background: linear-gradient(135deg, #D4A843 0%, #F2D06B 50%, #D4A843 100%);
    background-size: 200% 200%;
    color: #fff;
    font-family: 'Vazirmatn', 'iransensblod', 'iransens', sans-serif;
    font-size: 13px;
    font-weight: 600;
    border-radius: 25px;
    letter-spacing: 0.5px;
    box-shadow: 0 3px 12px rgba(212, 168, 67, 0.35);
    animation: shimmerBadge 3s ease-in-out infinite;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.private-allinone-badge i {
    font-size: 14px;
}

@keyframes shimmerBadge {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* --------- پرچم‌ها در Feature Focus --------- */
.feature-focus-flags {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 15px 0;
    flex-wrap: wrap;
}

.feature-focus-flags img {
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.feature-focus-flags img:hover {
    transform: scale(1.2) translateY(-2px);
}


/* --------- کارت‌های پریمیوم Private --------- */

/* تگ طلایی بالای کارت */
.private-premium-tag {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #C4952E 0%, #F2D06B 45%, #D4A843 55%, #C4952E 100%);
    background-size: 300% 100%;
    color: white;
    padding: 7px 22px;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 0 0 12px 12px;
    z-index: 2;
    font-family: 'Vazirmatn', 'iransensblod', 'iransens', sans-serif;
    line-height: 1.3;
    height: 32px;
    box-sizing: border-box;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3px 10px rgba(212, 168, 67, 0.3);
    animation: shimmerTag 4s ease-in-out infinite;
    white-space: nowrap;
}

.private-premium-tag i {
    margin-left: 4px;
    font-size: 11px;
}

@keyframes shimmerTag {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* حذف تگ بنفش پیش‌فرض برای کارت‌های Private */
.private-premium-card .highlight-tag-placeholder {
    display: none !important;
}

.private-premium-card.new-card-highlight::after {
    display: none !important;
}

/* بردر طلایی کارت Private */
.private-premium-card {
    border-color: #e8d5a3 !important;
    background: linear-gradient(180deg, #fffcf3 0%, #ffffff 30%) !important;
}

.private-premium-card:hover {
    border-color: #D4A843 !important;
    box-shadow: 0 8px 25px rgba(212, 168, 67, 0.15) !important;
}

/* کارت هایلایت Private - طلایی */
.private-premium-card.private-card-highlight {
    border-color: #D4A843 !important;
    box-shadow: 0 0 0 3.5px rgba(212, 168, 67, 0.25) !important;
}

.private-premium-card.private-card-highlight:hover {
    border-color: #C4952E !important;
    box-shadow: 0 0 0 4px rgba(196, 149, 46, 0.35), 0 10px 30px rgba(212, 168, 67, 0.15) !important;
}


/* --------- ردیف پرچم‌های مینیاتوری داخل کارت --------- */
.private-card-flags {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    margin: 8px 0 5px;
    flex-wrap: wrap;
}

.private-card-flags img {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.25s ease;
}

.private-card-flags img:hover {
    transform: scale(1.25) translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}


/* --------- واکنش‌گرایی موبایل --------- */
@media (max-width: 767px) {
    .pricing-flags-v2 {
        gap: 7px;
        margin-top: 12px;
    }

    .pricing-flags-v2 img {
        width: 26px !important;
        height: 26px !important;
    }

    .private-allinone-badge {
        font-size: 11px;
        padding: 6px 16px;
        margin-top: 10px;
    }

    .private-premium-tag {
        font-size: 10px;
        padding: 5px 14px;
        height: 28px;
    }

    .private-card-flags {
        gap: 3px;
        margin: 6px 0 3px;
    }

    .private-card-flags img {
        width: 18px;
        height: 18px;
        border-radius: 3px;
    }

    .feature-focus-flags {
        gap: 6px;
        margin: 10px 0;
    }

    .feature-focus-flags img {
        width: 24px !important;
        height: 24px !important;
    }
}

/* ================================================================== */
/* ---  پایان بخش پریمیوم Private  --- */
/* ================================================================== */