@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: 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: 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: 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: iransens;
	text-align: center;
	position: relative;
}


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


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

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

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

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

.wapp a {
	text-decoration: none;
}



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

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

.telegram1 h2 span {
	color: #FF3300;
	font-family: 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: iransens;
	font-size: 17px;
	direction: rtl;
	margin-top: -45px;
	text-decoration: none;
}
.needlog h2 span {
	color: #ff0000;
	font-family: iransensblod;
	text-decoration: none;
}
.needlog h3 {
	text-align: center;
	color: #ffffff;
	font-family: iransens;
	font-size: 17px;
	direction: ltr;
	margin-top: -20px;
	margin-left: -80px;
	text-decoration: none;
}
.needlog h3 span {
	color: #ff0000;
	font-family: iransensblod;
	text-decoration: none;
}











.sec-menu-box {
	margin: 50px 0;
	overflow: hidden;
}
.sec-menu-box h3 {
	text-align: center;
	font-family: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: iransens !important;
}
.slicknav_menu ul li a {
	color: #e6e6e6;
	font-family: 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: iransens;
  font-weight: 600;
}
.why-chose-box-layout1 .item-subtitle {
  font-size: 16px;
  color: #FF3333;
  font-family: 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: iransens;
  color: #525252;
}

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

.why-chose-box-layout1 .single-item li:after {
  font-size: 24px;
  font-family: 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: 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: iransens;
  font-weight: 600;
}
.why-chose-box-layout1z .item-subtitle {
  font-size: 16px;
  color: #FF3333;
  font-family: 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: iransens;
  color: #525252;
}

.why-chose-box-layout1z .single-item li:after {
  
  font-size: 24px;
  font-family: 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: 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: iransens;
  font-weight: 600;
}
.why-chose-box-layout1s .item-subtitle {
  font-size: 16px;
  color: #FF3333;
  font-family: 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: iransens;
  color: #525252;
}


.why-chose-box-layout1s .single-item li:after {
  
  font-size: 24px;
  font-family: 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: iransens;
  color: #858383;
}

.why-chose-box-layout1s .single-item li2:after {
  
  font-size: 24px;
  font-family: 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: 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: 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: 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: '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: '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: '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: '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: '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: '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: 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: '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: '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: 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: iransens;
	font-size: 14px;
    padding: 3px;
    border-radius: 30px;
    max-width: 300px; /* حداکثر عرض کادر */
    margin: 9px auto; /* قرار دادن کادر در مرکز */
    
}
.captcha-error {
    background-color: #f5434345;
    color: #c31f1fbd;
    font-family: 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: '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: 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: iransens;
    box-sizing: border-box;
}










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



   main-container {
            font-family: '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: '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: '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: '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: '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: '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: '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: '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: '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: 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: '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: '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: '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: '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: '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: '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: '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: '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: 'iransens', sans-serif;
    position: relative;
    direction: rtl; /* اطمینان از راست‌چین بودن کل کانتینر */
}

.testimonial-container h2 {
    font-family: '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: '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: 'iransens', sans-serif;
    border: 1px solid #f0f0f5;
}

.modern-checkout-form-container * {
    font-family: '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: '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: '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: '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: '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: '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: '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: '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: '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: 'iransens', sans-serif;
}

/* کارت اصلی گردونه شانس (بازطراحی شده برای تم روشن) */
.loyalty-card-v2 {
    font-family: '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: '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: '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: 'iransens', sans-serif;
}

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

/* استایل پاراگراف توضیحات */
.comeback-section p {
    font-family: '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: '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: '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: '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: '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: '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: '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: 'iransens', sans-serif;
}

.login-box h2 {
    margin-bottom: 25px;
    margin-top: 0px;
    font-family: '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: '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: '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: '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: '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: '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: '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: '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: '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: 'iransens', sans-serif;
}

.dashboard-card p {
    font-size: 14px;
    color: #6c757d;
    font-family: 'iransens', sans-serif;
    margin: 0 0 20px 0;
}

.status-card .remaining-days {
    font-size: 16px;
    font-weight: bold;
    color: #28a745;
    font-family: '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: '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: '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: '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: '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: 'iransens', sans-serif;
}
.modal-buttons .button.blue:hover {
    background-color: #0056b3;
}

/* استایل دکمه انصراف (خاکستری) */
#modal-cancel-btn {
    background-color: #6c757d;
    color: white;
    font-family: '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: '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: '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;
}

/* استایل مدرن برای گروه فرم (کادر ایمیل) */
.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: '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: '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: '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: '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: '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) --- */