:root {
    --color: #fff;
    --color_hover: #fff;
    --bg_color: #fff;
    --tx_color_hover: #fff;
	--ark_navbar_bg:#fff;
	--ark_navbar_bg_d:#fff;
	--ark_navbar_color:#fff;
	--ark_old:#fff;
	--ark_navbar:#fff;
	--ark_button_color:#fff;
	--ark_button_bg:#fff;
	--ark_button_hover:#fff;
	--ark_Gradiant_bg:#fff;
}
@font-face{font-family:'FontAwesome';font-weight:normal;font-style:normal;src:url("fontawesome-webfont.ttf") format("truetype")}
@font-face{font-family:'BYekan';font-weight:normal;font-style:normal;src:url("BYekan.ttf") format("truetype")}
@font-face {font-family:'iransans';font-style: normal;src: url(IRANSansLight.ttf);}
@font-face {
    font-family: "iransans-fa-num";
    font-style: normal;
    font-weight: 700;
    src: url("font/IRANSansWeb_Bold.eot");
    src: url("font/IRANSansWeb_Bold.eot?#iefix") format("embedded-opentype"), url("font/IRANSansWeb_Bold.woff2") format("woff2"),
        url("font/IRANSansWeb_Bold.woff") format("woff"), url("font/IRANSansWeb_Bold.ttf") format("truetype");
}
@font-face {
    font-family: "iransans-fa-num";
    font-style: normal;
    font-weight: 500;
    src: url("font/IRANSansWeb_Medium.eot");
    src: url("font/IRANSansWeb_Medium.eot?#iefix") format("embedded-opentype"), url("font/IRANSansWeb_Medium.woff2") format("woff2"),
        url("font/IRANSansWeb_Medium.woff") format("woff"), url("font/IRANSansWeb_Medium.ttf") format("truetype");
}
@font-face {
    font-family: "iransans-fa-num";
    font-style: normal;
    font-weight: 300;
    src: url("font/IRANSansWeb_Light.eot");
    src: url("font/IRANSansWeb_Light.eot?#iefix") format("embedded-opentype"), url("font/IRANSansWeb_Light.woff2") format("woff2"),
        url("font/IRANSansWeb_Light.woff") format("woff"), url("font/IRANSansWeb_Light.ttf") format("truetype");
}
@font-face {
    font-family: "iransans-fa-num";
    font-style: normal;
    font-weight: 200;
    src: url("font/IRANSansWeb_UltraLight.eot");
    src: url("font/IRANSansWeb_UltraLight.eot?#iefix") format("embedded-opentype"), url("font/IRANSansWeb_UltraLight.woff2") format("woff2"),
        url("font/IRANSansWeb_UltraLight.woff") format("woff"), url("font/IRANSansWeb_UltraLight.ttf") format("truetype");
}
@font-face {
    font-family: "iransans-fa-num";
    font-style: normal;
    font-weight: 400;
    src: url("font/IRANSansWeb.eot");
    src: url("font/IRANSansWeb.eot?#iefix") format("embedded-opentype"), url("font/IRANSansWeb.woff2") format("woff2"),
        url("font/IRANSansWeb.woff") format("woff"), url("font/IRANSansWeb.ttf") format("truetype");
}
@font-face {
    font-family: "iransans-en-num";
    font-style: normal;
    font-weight: 900;
    src: url(font/IRANSansWeb_Black.eot);
    src: url("font/IRANSansWeb_Black.eot?#iefix") format("embedded-opentype"), url(font/IRANSansWeb_Black.woff2) format("woff2"),
        url(font/IRANSansWeb_Black.woff) format("woff"), url(font/IRANSansWeb_Black.ttf) format("truetype");
}
@font-face {
    font-family: "iransans-en-num";
    font-style: normal;
    font-weight: 700;
    src: url(IRANSansWeb_Bold.eot);
    src: url("font/IRANSansWeb_Bold.eot?#iefix") format("embedded-opentype"), url(font/IRANSansWeb_Bold.woff2) format("woff2"),
        url(font/IRANSansWeb_Bold.woff) format("woff"), url(font/IRANSansWeb_Bold.ttf) format("truetype");
}
@font-face {
    font-family: "iransans-en-num";
    font-style: normal;
    font-weight: 500;
    src: url(IRANSansWeb_Medium.eot);
    src: url("font/IRANSansWeb_Medium.eot?#iefix") format("embedded-opentype"), url(font/IRANSansWeb_Medium.woff2) format("woff2"),
        url(font/IRANSansWeb_Medium.woff) format("woff"), url(font/IRANSansWeb_Medium.ttf) format("truetype");
}
@font-face {
    font-family: "iransans-en-num";
    font-style: normal;
    font-weight: 300;
    src: url(IRANSansWeb_Light.eot);
    src: url("font/IRANSansWeb_Light.eot?#iefix") format("embedded-opentype"), url(font/IRANSansWeb_Light.woff2) format("woff2"),
        url(font/IRANSansWeb_Light.woff) format("woff"), url(font/IRANSansWeb_Light.ttf) format("truetype");
}

*{
	font-family:"iransans-fa-num";
		font-size:14px;
	
}
 
* {
    -webkit-overflow-scrolling:touch;
    overflow-scrolling:touch;
}
* {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
ul, li {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
*, *::before, *::after {
    box-sizing: border-box;
}
body{
	font-family:danaFaNum,tahoma,sans-serif;
	direction:rtl;
}
body.ltrModole
{
	font-family: 'tahoma',tahoma,sans-serif;
}
body.ltrModole {
    text-align: left;
	direction:ltr;
}
body.ltrModole .content-block {
	direction:ltr !important;
}
body {
    background-color: #e8e9ed;
}
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
    font-family: inherit;
}
*{
	scrollbar-width: none;
}
::-webkit-scrollbar {
    display: none;
	-ms-overflow-style: none;
}
 
footer {
    position: relative;
    text-align: center;
    overflow: hidden;
    padding-bottom: 80px;
}
.footer-menu{
	
}
.footer-menu a {
    color: var(--ark_navbar);
    margin: 0 12px;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
}
.footer-icons {
    margin: 20px 0;
}
.copyright {
    font-size: 13px;
    opacity: 0.8;
}
.fa{
    display: inline-block;
    font-family: 'FontAwesome' !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    font-size:1.5em;
}
.fas {
    font-family: 'Font Awesome 5 Pro';
    font-weight: 900;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}
.fa-user:before {
    content: "\f007";
}
.fa-phone:before {
    content: "\f095";
}
.fa-envelope:before {
    content: "\f0e0";
}
.fa-location-dot:before, .fa-map-marker-alt:before {
    content: "\f041";
}
.fa-retweet:before {
    content: "\f079";
}
#newAuthModal .modal-header .btn-close {
    border: 1px solid #ebedf0;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23242528'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    background-size: 12px auto;
    border-radius: 8px;
}
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.anShake{
	animation: shake 0.5s;
	animation-iteration-count: 2;
}

    .MuiContainer {
        max-width: 568px;
        margin: 0px auto;
        margin-top: 0px;
        margin-right: auto;
        margin-bottom: 0px;
        margin-left: auto;
        height: 100%;
		position:relative;
    }

.cart-icon {
    position: relative;
}
.cart-icon .count {
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    left: 4px;
    position: absolute;
    text-align: center;
    top: 13px;
    width: 22px;
}
.cart-icon .base-svg {
    fill: #ff504c;
    height: 34px;
    width: 36px;
    top: 4px;
    position: relative;
}

.fa{
    display: inline-block;
    font-family: 'FontAwesome' !important;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    font-size:1.5em;
}
.fi {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: fi !important;
    font-size: 16px;
    font-style: normal;
}
.fi-flight:before {
    content: "\E606";
}
@keyframes shimmer {
	0% {
		background-position: -1000px 0;
	}
	100% {
		background-position: 1000px 0;
	}
}
.banner-slider-loading .loadBanner {
    height: 140px;
    background: #fff;
    border-radius: 10px;
    animation: shimmer 1.5s infinite ease-in-out;
    background: linear-gradient(100deg, #f7f7f7 8%, #e9e9e9  18%, #f7f7f7 33%);
    background-size: 1000px 100%;
    flex-shrink: 0;
    overflow: hidden;
    margin: 10px 20px;
}
.story-container {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    -ms-overflow-style: none;
    padding: 10px;
    scroll-behavior: smooth;
    scrollbar-width: none;
    direction: rtl;
    padding-bottom: 0;
}
.loadImg {
    width: 80px;
    height: 80px;
    background: #fff;
    border-radius: 50%;
    animation: shimmer 1.5s infinite ease-in-out;
    background: linear-gradient(100deg, #f7f7f7 8%, #e9e9e9  18%, #f7f7f7 33%);
    background-size: 1000px 100%;
	flex-shrink: 0;
    overflow: hidden;
}
.loadCity {
    width: 100%;
    height: 30px;
    background: #fff;
    border-radius: 5px;
    animation: shimmer 1.5s infinite ease-in-out;
    background: linear-gradient(100deg, #f7f7f7 8%, #e9e9e9  18%, #f7f7f7 33%);
    background-size: 1000px 100%;
    overflow: hidden;
}
#datetList {
	display: flex;
    flex-direction: row;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 10px;
}
.LoadDateticket {
    width: 120px;
    height: 70px;
    background: #fff;
    border-radius: 5px;
    animation: shimmer 1.5s infinite ease-in-out;
    background: linear-gradient(100deg, #f7f7f7 8%, #e9e9e9  18%, #f7f7f7 33%);
    background-size: 1000px 100%;
    overflow: hidden;
    display: flex;
    align-items: flex-start;
    justify-content: center;
	flex-shrink: 0; 
	flex-direction: column;
	align-items: center;
	box-sizing: initial;
	cursor: pointer;
}

#voucherList .LoadDateticket {
    width: auto;
    margin: 5px;
    height: 150px;
    border-radius: 7px;
    border: 1px solid #e5e5e5;
}
.Dateticket {
    width: 75px;
    height: 70px;
    border-radius: 5px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    line-height: 23px;
    background: #eeeeee;
    border: 1px solid #d3d3d3;
    font-size: 11px;
}
.Dateticket span{
	font-size: inherit;
}
.productLoading {
    width: 120px;
    height: 160px;
    background: #fff;
    border-radius: 8px;
    animation: shimmer 1.5s infinite ease-in-out;
    background: linear-gradient(100deg, #f7f7f7 8%, #e9e9e9  18%, #f7f7f7 33%);
    background-size: 1000px 100%;
	flex-shrink: 0;
    overflow: hidden;
	margin:0px 10px;
}
.input-wrapper {
    position: relative;
    background-color: #e1e1e1;
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    margin: 10px 20px;
    padding-left: 30px;
    height: 50px;
}
.input-wrapper:before {
    content: "";
    background-image: url(../img/search-icon.svg);
    width: 22px;
    height: 22px;
    position: absolute;
    left: 8px;
    top: 10px;
}
.navbar .input-wrapper {
    position: relative !important;
    background-color: #e1e1e1 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    display: grid !important;
    margin: 0px 10px !important;
    padding-left: 30px !important;
	width: 100% !important;
    height: 40px !important;
}
.input-wrapper input {
    font-size: 20px;
    padding: 10px 20px;
    width: 400px;
    text-align: right;
    background: transparent;
    border: none;
}
  .placeholder-fake {
    position: absolute;
    right: 35px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #aaa;
    white-space: nowrap;
    pointer-events: none;
    display: flex;
    gap: 5px;
    z-index: 10;
  }
.placeholder-fake .searchLogo {
    height: 22px;
    position: relative;
    top: 13px;
}
  body.en .placeholder-fake{
	display: flex;
    left: 35px;
    right: 0;
    direction: ltr;
    text-align: left;
}
.word-container {
    position: relative;
    height: 24px;
    overflow: hidden;
    display: inline-block;
    min-width: 200px;
    color: var(--ark_navbar_bg);
    margin-top: -2px;
}
  .word-container span {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    transform: translateY(100%);
    transition: transform 0.5s ease, opacity 0.5s ease;
    white-space: nowrap;
  }
  body.en .word-container span{
	  right: auto;
	  left:0;
  }
  .word-container span.active {
    opacity: 1;
    transform: translateY(0);
    z-index: 2;
  }
#boxCategory .loadImg{
	border-radius:6px;
	width:50px;
	height:50px;
	position:relative;
	margin-bottom:0px;
}
#boxCategory .loadImg:before {
    content: "";
    width: 50px;
    height: 12px;
    border-radius: 6px;
    animation: shimmer 1.5s infinite ease-in-out;
    background: linear-gradient(100deg, #f7f7f7 8%, #eeeeee 18%, #f7f7f7 33%);
    background-size: 1000px 100%;
    overflow: hidden;
    display: inline-block;
    margin-top: 55px;
    position: absolute;
    z-index: 9;
}
#boxbanner .loadImg {
    border-radius: 6px;
    width: 80%;
    height: 100px;
}
#boxProduct .loadImg {
    border-radius: 6px;
    width: 25%;
    height: 100px;
    margin-bottom: 20px;
}
#boxProduct .loadImg:before {
    content: "";
    width: 25%;
    height: 12px;
    border-radius: 6px;
    animation: shimmer 1.5s infinite ease-in-out;
    background: linear-gradient(100deg, #f7f7f7 8%, #eeeeee 18%, #f7f7f7 33%);
    background-size: 1000px 100%;
    overflow: hidden;
    display: inline-block;
    margin-top: 105px;
    position: absolute;
    z-index: 9;
}

#boxProduct .headerBox {
    height: 21px !important;
    margin-bottom: 0px;
    margin-right: 10px;
    width: 60%;
}
#boxProduct .headerBox:before{display:none  !important;}
    @keyframes spinBorder {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
.story {
    position: relative;
    width: 80px;
    height: 90px;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.border-ring {
    width: 73px;
    height: 73px;
    border-radius: 50%;
    background: conic-gradient(#ccc 0deg, #ccc 360deg);
    z-index: 1;
    background: linear-gradient(to right, #d300c5, #ffc700, #ff214e);
}

.border-ring.active {
	animation: spinBorder 2s linear infinite;
	background: conic-gradient(#ff0055 0deg, #ffcc00 90deg, #00ccff 180deg, #00ff99 270deg, #ff0055 360deg);
}
.story .prf {
    position: absolute;
    z-index: 2;
    width: 66px;
    height: 66px;
    background: #fff;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    left: 3px;
    top: 3px;
    overflow: hidden;
    left: 7px;
    top: 3px;
    border: 3px solid #FFF;
}
.story .prf img{
	width:100%;
	height:100%;	
}
.story span {
    display: block;
    text-align: center;
    line-height: 24px;
    font-size: 10px;
}
.story-container-view {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0,0,0,0.9);
      z-index: 9999;
    }
    .story-content-view {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
      border-radius: 10px;
      background: #000;
	  direction:ltr;
	  
    }
    .story-image, .story-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .progress-bar {
      position: absolute;
      top: 10px;
      left: 10px;
      right: 10px;
      display: flex;
      gap: 5px;
      z-index: 10;
    }
    .progress-segment {
      flex: 1;
      height: 3px;
      background: rgba(255,255,255,0.3);
      overflow: hidden;
    }
    .progress-fill {
      height: 100%;
      background: white;
      width: 0%;
    }

    .click-area {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 50%;
      z-index: 5;
    }
    .left-click { left: 0; }
    .right-click { right: 0; }

    .user-info {
      position: absolute;
      top: 20px;
      left: 15px;
      z-index: 11;
      display: flex;
      align-items: center;
      gap: 10px;
	  top:20px;
    }
    .user-info img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 1px solid #fff;
    }
    .user-info span {
      font-size: 14px;
    }
	
.categoryItm {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.categoryItm .imgC {
    background: #f7f7f7;
    display: flex;
    padding: 5px;
    border-radius: 10px;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}
.categoryItm img{
	width: 32px;
	height: 32px;
}
.categoryItm span {
    font-size: 11px;
    display: block;
    text-align: center;
}
.boxSelectTY {
    background-color: #e8f3e9;
    background: linear-gradient(339deg, var(--ark_navbar_bg) 0%, var(--ark_navbar_bg_d) 100%);
    background-image: linear-gradient(to bottom, #2196F3, rgba(0, 0, 0, 0.1)), url(../img/World.png);
    height: 160px;
    background-size: 100% 100%;
    margin: 10px;
    border-radius: 5px;
    padding-top: 15px;
    direction: ltr;
    display: flex;
    align-content: flex-start;
}
.box {
    width: 100px;
    height: 140px;
    border-radius: 10px;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    z-index: 1;
    flex-direction: column;
    padding-bottom: 20px;
}
.boxSelect {
    position: relative;
    width: 60%;
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    overflow: visible;
}

.curve-line {
    position: absolute;
    top: -152px;
    left: 55px;
    right: 55px;
    height: 220px;
    pointer-events: none;
    z-index: 5;
    overflow: visible;
}

  .curve-line svg {
    width: 100%;
    height: 100%;
  }

  .curve-line path {
    stroke: #000;
    stroke-width: 1;
    fill: none;
    stroke-dasharray: 1 1;
  }

.circle {
    position: absolute;
    width: 16px;
    height: 16px;
    aspect-ratio: 1/1;
    border: 3px solid var(--ark_navbar_bg);
    border-radius: 50%;
    background: transparent;
    z-index: 2;
}

  .circle::after {
    content: '';
    width: 6px;
    height: 6px;
    background-color: white;
    border-radius: 50%;
  }

.boxSelect .box:first-child .circle {
    right: 10px;
  }
.boxSelect .box:nth-child(3) .circle {
   left:10px;
  }
.box .boxBL {
    background: #000;
    color: #fff;
    padding: 4px 10px;
    border-radius: 8px;
    position: absolute;
    top: 35px;
    text-align: center;
}
.flxY {
    height: 60px;
    text-align: center;
}
.flxY span:first-child {
    font-size: 16px;
    font-weight: bold;
    background: var(--ark_navbar_bg);
    padding: 0px 10px;
    line-height: 20px;
    margin-bottom: 0px;
    border-radius: 5px;
    height: 17px;
    display: inline-block;
    color: #fff;
}
.flxY span:last-child {
    font-size: 10px;
    text-align: center;
    display: block;
}

.boxSelectNoP {
    display: flex;
    justify-content: space-around;
    margin-top: 5px;
}
.boxSelectNoP svg,.boxSelectNoP img{
	width:36px;
	height:36px;
	
}
.boxSelectNoP div {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
    height: 80px;
    margin: 2px;
    border: 1px solid var(--ark_navbar_bg);
    justify-content: center;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px 3px;
	cursor:pointer;
}
.boxSelectNoP div.active{
    background: linear-gradient(339deg, var(--ark_navbar_bg) 0%, var(--ark_navbar_bg_d) 100%);
	color:#fff;
}
.boxSelectNoP div.active svg{
	fill:#fff;
}
.boxSelectNoP span {
    font-size: 11px;
    display: flex;
    text-align: center;
    height: 26px;
    padding: 0px 5px;
}
.boxS {
    display: flex;
    justify-content: space-between;
    padding: 5px 10px;
	gap:10px;
}

.input3 {
    width: 100%;
    border: 0;
    padding: 5px 10px;
    background-color: #e8f3e9 !important;
    outline: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    caret-color: inherit;
    border-radius: 8px;
    color: #30353a;
    font-size: inherit;
}
 
 .btn {
	font-size: .875rem;
	line-height: 1.25rem;
	letter-spacing: 0;
	text-align: center;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	border: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: background 500ms;
	padding-left: 12px;
	padding-right: 12px;
	max-width: 160px;
	height: 3rem;
}
.btn:hover{
	background: var(--ark_button_hover);
	
}
.btn-success {
    color: var(--ark_button_color);
    stroke: var(--ark_button_color);
    fill: var(--ark_button_color);
    border-color: #0969da;
    background: var(--ark_button_bg);
  
	  
	  
}
.btn:disabled{
    pointer-events: none;
    opacity: .65;
    color: rgb(255, 255, 255);
    font-weight: 500;
}
.btn-search {
    background: var(--ark_button_bg);
    color: var(--ark_button_color);
    border-radius: 5px !important;
    width: 100%;
    max-width: none !important;
}


.ticket {
    background: #fcfcfc;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
    padding: 20px;
    max-width: 700px;
    margin-right: 15px;
    margin-left: 15px;
    direction: ltr;
}

    .route {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      margin-bottom: 0px;
    }

    .airport {
      width: 100px;
      text-align: center;
    }

    .airport .code {
      font-size: 18px;
      font-weight: bold;
    }

    .airport .time {
      font-size: 14px;
      color: #555;
      margin-top: 5px;
    }

    .line {
      flex: 1;
      position: relative;
      margin: 0 10px;
    }

    .line hr {
      border: none;
      border-top: 2px dashed #ccc;
      margin: 0;
    }

.plane {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #fcfcfc;
    padding: 0 4px;
    height: 22px;
}
.plane svg {
    width: 20px;
    height: 20px;
    fill: #7d7d7d;
}
    .duration {
      text-align: center;
      font-size: 13px;
      color: #555;
      margin-top: 8px;
    }

.details {
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    direction: rtl;
}

    .details img {
      height: 30px;
      margin-right: 10px;
    }
 
.details .info {
    background: #f6f6f6;
    font-size: 14px;
    color: #333;
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0px;
    width: 100%;
    padding: 10px 5px;
}
 
.detail-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.detail-item svg {
  width: 18px;
  height: 18px;
  fill: #007acc;
}

.detail-value {
    background: #e0f0ff;
    color: #007acc;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    display: flex;
    align-items: center;
}
.detail-value svg{
	margin-left:4px;
}
.details .btn-buy {
  margin-right: auto;
  background: #28a745;
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  border: none;
  transition: 0.3s;
}

.details .btn-buy:hover {
  background: #218838;
}

.Price-item svg {
  width: 18px;
  height: 18px;
  fill: #007acc;
}
.Price-item {
    display: flex !important;
    align-items: center;
    padding: 5px 20px;
    margin-left: 5px;
    flex-direction: row-reverse;
}
.Price-item span {
    font-size: 12px;
}
.price-value {
    display: flex !important;
    align-items: center;
    color: var(--color_hover);
    font-weight: 600;
    font-size: 18px;
    margin-right: 5px;
    direction: rtl;
}
   /* ==== Skeleton Loader ==== */
    .skeleton {
      background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
      background-size: 400% 100%;
      animation: shimmer 1.5s infinite;
      border-radius: 6px;
    }
.skeleton-details {
      background: #f6f6f6;
      padding: 12px;
      border-radius: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
    }
    @keyframes shimmer {
      0% { background-position: 100% 0; }
      100% { background-position: -100% 0; }
    }

    .skeleton-ticket .code,
    .skeleton-ticket .time,
    .skeleton-ticket .duration,
    .skeleton-ticket .skeleton-box {
      height: 16px;
      margin-bottom: 10px;
    }

    .skeleton-ticket .skeleton-box {
      width: 100px;
    }

    .skeleton-ticket img {
      width: 40px;
      height: 30px;
      border-radius: 4px;
    }
	.skeleton-ticket {
      background: #fff;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      margin-bottom: 30px;
      padding: 20px;
      max-width: 700px;
      margin-right: auto;
      margin-left: auto;
    }

    .skeleton-route {
      display: flex;
      align-items: center;
      justify-content: space-between;
      position: relative;
      margin-bottom: 30px;
    }

    .skeleton-airport {
      width: 100px;
      text-align: center;
    }

.code, .time, .duration {
    height: 16px;
    margin: 8px auto;
    direction: rtl;
}
#ticketDate {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    -ms-overflow-style: none;
    padding: 10px;
    scroll-behavior: smooth;
    scrollbar-width: none;
	scroll-padding-right: 1.5rem;
}
#ticketDate .itmDate {
	display: flex;
	min-width: 90px;
	width: 90px;
	font-size: 14px;
	flex-direction: column;
	align-items: center;
	height: 57px;
	justify-content: center;
	border: 1px solid #5c601c;
	border-radius: 8px;
	padding: 5px 5px;
	flex-shrink: 0;
	scroll-snap-align: start;
	flex: 1 1 0%;
}
#ticketDate .itmDate span {
    display: block;
    font-weight: normal;
    font-size: 12px;
}
#ticketDate .itmDate.active {
	background: var(--ark_button_bg);
	color:var(--ark_button_color);
	
}
#ticketDate .itmDate:hover {
	background: var(--ark_button_hover);
	color:var(--ark_button_color);
	cursor:pointer;
}
.entry-content {
    padding: 10px;
    line-height: 30px;
}
.entry-content img{
	max-width:100%;
	display:block;
}
.entry-content h2 {
    font-size: 16px;
    font-weight: 700;
    color: #2d2d2d;
    margin-top: 20px;
    margin-bottom: 20px;
    line-height: 1.3;
}
.navbar {
    margin: 0px 0px;
    width: auto;
    left: 0px;
    right: 0px;
    border-radius: 0px;
}

.toggle{
 
}

#sections-root {
    margin: 0 auto;
}
.section {
    margin: 12px 0;
	margin-bottom:0px;
    border-radius: 0px;
    position: relative;
}
.section:nth-child(2){
	margin-top:0px !important;
}
.section:empty {
    margin:0 !important;
}
.section:has(> .SectionTitr) {
    padding-right: 44px;
    min-height: 250px;
}
.section:has(> .SectionTitr):empty {
    display:none !important;
}

.emptyDivSl {
    background: url(../img/emptybasket.png);
    background-size: 200px;
    background-repeat: no-repeat;
    background-position: center center;
    height: 250px;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;

}
.emptyDivSl em{
	font-size: 18px;
	color: var(--ark_button_bg);
	font-weight: bolder;
}
.section h3 {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: rgb(255, 255, 255);
    background-color: rgb(74, 144, 226);
    height: 100%;
    text-align: center;
    border-radius: 5px;
    writing-mode: vertical-rl;
    padding-right: 8px;
    padding-left: 8px;
    rotate: 180deg;
    position: absolute;
    right: 2px;
    width: 28px;
    margin: 0;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
	margin-right: 6px;
}
.section h2 {
    background: #fff !important;
    color: #000 !important;
    margin-bottom: 10px !important;
    padding-right: 10px !important;
}
.section:has(> .categoryTitr) {
    padding-right: 5px;
}
.useful-links a {
    display: inline-block;
    margin: 6px;
    padding: 8px 12px;
    background: #eef;
    border-radius: 6px;
    text-decoration: none;
    color: #036;
}

.brand {
    min-width: 70px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 6px;
}
.banner img {
    width: 100%;
    /* height: 160px; */
    object-fit: cover;
    border-radius: 6px;
    display: block;
}
.gridbanner {
    display: flex;
    overflow: hidden;
    border-radius: 6px;
}
.gridbanner img{
	
}
.hero-slider-container {
    position: relative;
    max-width: 100%;
    overflow: hidden;
    border-radius: 0px;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.1);
    max-height: 200px;
}
.hero-slider-container img {
    min-height: 0px;
    max-height: 100%;
    width: 100%;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.7s ease-in-out;
    border-radius: 0px;
	min-height: 220px;
}
.hero-slider-container img.active {
    display: block;
    opacity: 1;
    position: relative;
}
.slider-pagination {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    padding: 5px;
}
.slider-pagination span {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin: 0 5px;
    background: #757575;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.slider-pagination span.active {
    background: #ff6600;
    width: 38px;
    border-radius: 3px;
    height: 6px;
}
.boxPoroduct {
    background-color: #fff;
    position: relative;
    width: 12rem;
    min-width: 12rem;
    max-width: 12rem;
    padding: 5px 10px;
    margin-left: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    overflow: hidden;
    border: 1px solid #E4E7EB;
    border-radius: 5px;
	box-shadow: rgba(43, 47, 51, 0.1) 0px 3px 8px 4px;
}
.countdown {
    position: absolute;
    top: 5px;
    left: 50%;
    background: #d22c4e;
    color: #fff;
    padding: 3px 10px;
    font-size: 16px;
    border-radius: 5px;
    width: 120px;
    margin-left: -60px;
    height: 26px;
    direction: ltr;
}
.countdown i {
    background: #fff;
    color: #000;
    width: 25px;
    height: 19px;
    display: inline-block;
    text-align: center;
    font-style: normal;
    border-radius: 5px;
    margin: 0px 2px;
}
.countdown.expired {
    font-size: 12px;
    text-align: center;
    line-height: 22px;
    transform: rotate(-45deg);
    top: 18px;
    left: 30px;
}
.boxPoroduct .imgPicture {
    border-radius: 8px;
    padding: 5px;
    width: 9.5rem;
    height: 9.5rem;
    min-width: 9.5rem;
    min-height: 9.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 45px;
    box-shadow: rgba(43, 47, 51, 0.1) 0px 3px 8px 4px;
}
.boxPoroduct img,.product-card img {
    padding: var(--spacing-xxs);
    padding-bottom: var(--spacing-m);
    width: 8.25rem;
    height: 8.25rem;
    min-width: 8.25rem;
    min-height: 8.25rem;
}
.boxPoroduct .product_name, .product-card .product_name {
    margin: 8px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    font-size: 11px;
    text-align: right;
    line-height: 19px;
}

body.en .boxPoroduct .product_name, .product-card .product_name{
	text-align:left;
}
.product_shopName {
    background-image: url(shop.svg);
    background-position: right;
    background-size: 14px;
    background-repeat: no-repeat;
    padding-right: 18px;
    width: 100%;
    font-size: 10px;
    color: #636262;
    margin-bottom: 10px;
}
.boxPoroduct .price, .boxPoroduct .price svg, .product-card .price, .product-card .price svg, .AvailableBuyBox svg {
    color: #030303;
    fill: #000000;
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction: row;
    direction: rtl;
}
.boxMainProductDetail .product-price svg{
	
}
.boxPoroduct .price,.product-card .price{
	width: 100%;
}
.image-container {
    width: 300px;
    height: 200px;
    margin: 15px;
    background-color: #f0f0f0;
    position: relative;
    overflow: hidden;
}
.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.5s ease-in;
    display: block;
}
.image-container img.loaded {
    opacity: 1;
}
.keen_slider {
    display: flex;
    flex-direction: row;
    width: 100%;
    border-radius: 5px;
    background: #fff;
    padding: 0px 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    direction: rtl;
}
.keen_slider:empty {
    display:none !important;
}
.keen_slider .itmP {
    min-height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
    padding-left: 12px;
    min-width: 150px;
    max-width: 150px;
}
.keen_List {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 12px;
	padding:10px;
}
 
.product-card {
    border: 1px solid #eee;
    padding: 10px;
    border-radius: 8px;
    background: #fff;
    text-align: center;
    box-shadow: rgba(43, 47, 51, 0.1) 0px 3px 8px 4px;
}
.keen_List .itmP {
    min-height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
    padding-left: 12px;
    min-width: 150px;
    max-width: 150px;
}
.category_itm {
    padding: 5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 65px;
    max-width: 88px;
    height: 82px;
    box-sizing: initial;
    cursor: pointer;
    gap: 10px;
}
.category_itm .category_name {
    font-size: 0.75rem;
    letter-spacing: 0;
    line-height: 1rem;
    text-align: center;
    display: block;
}
.category_itm .catIcon {
    width: 64px;
    height: 64px;
    position: relative;
    padding: 5px;
    border-radius: 6px;
}
.category_itm .catIcon2:before {
    content: "";
    width: 50px;
    height: 50px;
    background-image: linear-gradient(90deg, #81DE00 0%, #00C6BE 100%);
    display: inline-block;
    position: absolute;
    border-radius: 100%;
    top: 10px;
    opacity: 0.2;
    border-bottom-right-radius: 0px;
}
.category_itm .catIcon img {
    width: 100%;
    height: 100%;
    display: inline-block;
    z-index: 2;
    position: relative;
}
.category_itm .product_name{
    z-index: 9;
	position:relative;
}
.car_brand_itm {
    padding: 5px 10px ;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 65px;
    max-width: 88px;
    height: 90px;
    box-sizing: initial;
    cursor: pointer;
}
.car_brand_itm .car_brand_name {
    font-size: 1rem;
    letter-spacing: 0;
    line-height: 1rem;
    text-align: center;
    display: block;
    color: #8398b2;
    font-weight: 800;
}
.car_brand_itm .catIcon {
    width: 68px;
    height: 68px;
    position: relative;
}
.car_brand_itm  .catIcon img{
    width: 100%;
    height: 100%;
    display: inline-block;
    z-index: 2;
    position: relative;	
}
.appname {
    background: red;
    color: #fff;
    height: 44px;
    display: flex;
    align-items: center;
    padding: 0px 10px;
}

  .boxMainProductDetail {
    margin: 20px auto;
    padding: 0 5px;
	margin-top:0px;
  }
.breadcrumb {
    font-size: 13px;
    margin-bottom: 12px;
    color: #666;
    background: #eee;
    padding: 8px 10px;
    width: 100%;
}
  .breadcrumb a {
    text-decoration: none;
    color: #666;
  }
  .breadcrumb a:hover {
    text-decoration: underline;
  }
  .boxMainProductDetail{
	background:#f5f5f5;
  }
  .product-main {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
	background:#fff;
	
  }
  .bgw{
	background:#fff;
  }
 
.main-image {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 0px;
    object-fit: contain;
    min-height: 250px;
    display: block;
}
  .thumbnails {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
  }
  .thumbnails img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border: 1px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.3s;
  }
  .thumbnails img.active {
    border-color: #22a544;
  }
  .product-info {
    padding: 10px;
}
.product-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
    padding: 4px 10px;
    line-height: 26px;
}
.BoxPrice {
    background: #f7e5f5;
    padding: 15px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 25px;
    z-index: 9999;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}
  @media only screen and (min-width:700px){
	    .product-info {
			flex: 1 1 450px;
		}
  }
  @media only screen and (max-width:700px){
	.BoxPrice {
		position: fixed;
		bottom: 0;
		box-shadow: 0 0 4px rgba(33, 33, 33, 0.20);
		background-color: #f6f6f6;
		left: 0;
		right: 0px;
		padding: 10px;
		justify-content: space-between;
		display: flex;
		align-items: center;
		border-top: 1px solid var(--ark_navbar_bg);
	}
	.product-images{
		width:100%;
		max-width:100%;
	}
  }
.product-price {
    font-size: 20px;
    font-weight: 700;
    color: #ff1e3c;
    margin-bottom: 0;
    letter-spacing: 0;
    line-height: 22px;
    display: flex;
}
.product-old-price {
    font-size: 16px;
    color: #999;
    text-decoration: line-through;
    margin-left: 12px;
    display: flex !important;
}
  .btn-buy {
    background-color: #22a544;
    color: white;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    padding: 12px 25px;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  .btn-buy:hover {
    background-color: #1b8939;
  }
  .product-description {
    margin: 20px 0;
    line-height: 1.5;
    color: #444;
  }
  /* مشخصات جدول */
  .specs {
    border-top: 1px solid #eee;
    padding: 15px;
    margin-bottom: 8px;
  }
.specs h2,.reviews h2 {
	font-size: 14px;

    font-weight: bold;
    margin-bottom: 10px;
	font-weight: 700;
	color:var(--ark_navbar_bg);
}
  .specs table {
    width: 100%;
    border-collapse: collapse;
  }
  .specs th, .specs td {
    text-align: right;
    padding: 10px 12px;
    border-bottom: 1px solid #eee;
  }
  .specs th {
    width: 140px;
    background: #f9f9f9;
    font-weight: 600;
  }
  /* نظرات */
  .reviews {
    margin-bottom: 8px;
	padding:10px;
  }
  .reviews h2 {
    margin-bottom: 15px;
  }
  .review {
    border-bottom: 1px solid #eee;
    padding: 12px 0;
  }
  .review:last-child {
    border-bottom: none;
  }
  .review-user {
    font-weight: 700;
    margin-bottom: 5px;
  }
  .review-date {
    font-size: 12px;
    color: #999;
    margin-bottom: 8px;
  }
  .review-text {
    font-size: 14px;
    color: #444;
    line-height: 1.4;
  }
.review-form {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow: hidden;
}
  .review-form textarea {
    width: 100%;
    min-height: 80px;
    border-radius: 6px;
    border: 1px solid #ccc;
    padding: 10px 12px;
    font-size: 14px;
    resize: vertical;
  }
  .review-form button {
    margin-top: 10px;
    background-color: #22a544;
    border: none;
    color: white;
    padding: 10px 22px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
  }
  .review-form button:hover {
    background-color: #1b8939;
  }
.AvailableBuyBox {
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: 0;
    height: 55px;
    border-radius: 4px;
    line-height: 1rem;
    justify-content: center;
    flex-direction: column;
    display: flex;
}
.Map_temp {
    position: relative;
    overflow: hidden;
    border-radius: 0px;
    margin: 0px 0px;
}
.Map_temp img{
	width:100%;
}
.Map_temp a {
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--ark_button_bg);
    color: var(--ark_button_color);
    padding: 5px 20px;
    border-radius: 10px;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, .25);
}

.wi_disc {
    display: flex;
    flex-direction: column;
}
.wi_disc del {
    color: #4a4a4a;
    line-height: 5px;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 10px;
	text-decoration: none !important;
}
.wi_disc ins {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-decoration: none !important;
    color: #000;
    font-size: 18px;
}
.wi_disc ins svg{
	width:20px !important;
	height:20px !important;
}
.discount {
    background: #EBD34B;
    background: linear-gradient(90deg, rgba(235, 211, 75, 1) 50%, rgba(252, 197, 43, 1) 100%);
    padding: 2px 5px;
    border-radius: 8px;
    height: 18px;
    color: #000;
    font-size: 10px;
    line-height: 16px;
    display: inline-block;
    text-decoration: none !important;
    z-index: 9999999999999;
    position: relative;
}
.Pwithdisc {
    display: flex;
    align-items: center;
    flex-direction: row;
}
.discount:before{
	content:"%";
	margin-right:2px;
}
.v-dialog {
    border-radius: 4px;
    margin: 24px;
    overflow-y: auto;
    pointer-events: auto;
    transition: .3s cubic-bezier(.25,.8,.25,1);
    width: 100%;
    z-index: inherit;
    outline: none;
    box-shadow: 0 11px 15px -7px rgba(0, 0, 0, .2), 0 24px 38px 3px rgba(0, 0, 0, .14), 0 9px 46px 8px rgba(0, 0, 0, .12);
}
.v-dialog__content {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    pointer-events: none;
    position: fixed;
    top: 0;
    transition: .2s cubic-bezier(.25,.8,.25,1), z-index 1ms;
    width: 100%;
    z-index: 6;
}
.formBox{
	padding:10px;
}
.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-clip: padding-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: .375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    box-shadow: none !important;
    border: 1px solid #c7c7c7;
    min-height: 40px;
    background-color: #f6f6f6 !important;
    font-size: .9rem;
}
.boxcountryList{
	min-height:500px;
}
.cItemList {
    display: grid;
    grid-template-columns: auto auto;
    gap: 10px;
    padding: 10px 20px;
}
.cItemList .lstC {
    display: grid
;
    grid-template-columns: auto auto;
    align-items: center;
    padding: 10px;
    background-color: #ffffff;
    border-radius: 7px;
    cursor: pointer;
    justify-content: center;
    border: 1px solid var(--ark_navbar);
}

.cItemList .lstC:hover{
	background-color:#343c7b;
	color:#fff;
}
.boxTitrUU {
    margin: 10px 20px;
    padding: 10px;
    background-color: #d7d7d7;
    border-radius: 7px;
}
.titrBo {
    margin: 10px 20px;
    color: #343c7b;
    font-weight: bold;
    font-size: 17px;
}
.searchBoxItem {
    padding: 5px 15px;
	position:relative;
}
.BoxFindItem{
	position: absolute;
    right: 0;
    left: 0;
    top: 100%;
    padding: 10px;
    margin: 0 10px;
    background: #fff;
    list-style-type: none;
    border: 1px solid #d0d0d0;
    border-radius: 0 0 7px 7px;
    border-top: none;
    z-index: 9;
}
.ftey{
	border-bottom: 1px solid #d0d0d0;
    margin-bottom: 10px;
    padding-right: 26px;
    padding-bottom: 10px;
	position:relative;
}
.ftey:before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: url(../img/airplane-takeoff.svg);
    right: 0;
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: bottom;
}


@keyframes iconAnim {
    0% {
        opacity: 0;
        transform: translateY(-50%) translateY(20px);
    }
    10% {
        opacity: 1;
        transform: translateY(-50%) translateY(0);
    }
    45% {
        opacity: 1;
        transform: translateY(-50%) translateY(0);
    }
    55% {
        opacity: 0;
        transform: translateY(-50%) translateY(20px);
    }
    100% {
        opacity: 0;
        transform: translateY(-50%) translateY(20px);
    }
}

.loader {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    background: var(--ark_navbar_bg);
    background: linear-gradient(192deg, rgb(43 114 115 / 98%), rgb(0 184 238 / 98%));
	background: var(--ark_Gradiant_bg);
}
  .star {
 width:100px;
  height:100px;
  background: radial-gradient(circle at 30% 30%, #fffa6b, #f5a623);
  /* clip-path: polygon( */
    /* 50% 0%, 60% 30%, 98% 35%, 65% 55%, 75% 90%, 50% 70%,  */
    /* 25% 90%, 35% 55%, 2% 35%, 40% 30% */
  /* ); */
  background:url(star.svg);
  background-size:100px 100px;
  border-radius:20%; /* گوشه‌های نرم و فانتزی */
  filter: drop-shadow(0 0 15px #fffa6b) drop-shadow(0 0 25px #f5a623);
  animation: pulse 1s infinite alternate;
  transform-origin:center;
  }

  @keyframes pulse {
    0% { transform: scale(1) rotate(0deg); }
    100% { transform: scale(1.2) rotate(10deg); }
  }

  /* انفجار */
  .loader.exit .star {
    animation: explode 1.2s forwards;
  }

  @keyframes explode {
    0%   { transform: scale(1) rotate(0deg); opacity:1; }
    30%  { transform: scale(0.5) rotate(20deg); }
    60%  { transform: scale(1.5) rotate(-15deg) translateX(50px) translateY(-30px); }
    80%  { transform: scale(0.3) rotate(45deg) translateX(120px) translateY(-80px); opacity:0.8; }
    100% { transform: scale(0) rotate(360deg) translateX(300px) translateY(-150px); opacity:0; }
  }

  /* particle های کوچک ستاره‌ای */
  .particle {
    position:absolute;
    width:6px;
    height:6px;
    background: radial-gradient(circle, #fff,#f5d742);
    border-radius:50%;
    opacity:0;
  }
 .calendar { background: #fff; border: 1px solid #ddd; border-radius: 2px; margin: 10px 0; overflow: hidden; }
.cal-header { background: #f3f3f3; padding: 10px 14px; border-bottom: 1px solid #ddd; display: flex; justify-content: space-between; box-shadow: 0 3px 7px 1px #9a9a9a80; margin-bottom: 5px; }
.cal-title { font-weight: bold; }
.calendar table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.calendar th, .calendar td { text-align: center; padding: 6px 4px; border-bottom: 1px solid #eee; vertical-align: middle; height: 40px; cursor: pointer; }
.calendar thead th { background: #fcfcfd; font-weight: bold; }
.calendar td.disabled { color: #aaa; pointer-events: none; }
.calendar td span { display: flex; font-weight: bold; flex-direction: column; justify-content: center; align-items: center; height:100%; }
.calendar td.holiday { color: #d00; font-weight: bold; }
.calendar td .day { font-weight: bold; }
.price {
  display:block;
  font-size: 11px;
  margin-top: 2px;
}

.price.min-price {
  color: green;
  font-weight: bold;
}

.price.max-price {
  color: red;
  font-weight: bold;
}
.calendar .today{ outline: 2px solid #4a90e2; border-radius: 4px; }
.calendar td span:hover {
    background: #cdcdcd;
    border-radius: 2px;
}
.calendar td.selected {
    background-color: var(--ark_navbar_bg) !important;
    color: #fff;
}
.calendar td.in-range {
    background-color: #ff5050 !important;
	color: #fff !important;
    opacity: 0.6;
}
.calendar td.weekend {
    background: #ffecec;   /* رنگ ملایم قرمز */
    color: #c00;           /* متن قرمز */
    font-weight: bold;
}
#btnConfirm { margin: 10px; padding: 6px 12px; background-color: #2196f3; color: white; border: none; border-radius: 4px; cursor: pointer; }
.radio-group { display: flex; margin: 10px; }
.radio-group label { margin-right: 10px; padding: 6px 12px; background: #eee; border-radius: 4px; cursor: pointer; }
.radio-group input[type="radio"] { display: none; }
.radio-group input[type="radio"]:checked + span { background: #2196f3; color: #fff; }



.boxSelectTravel{
	position:relative;
}


.InputSelectCity {
    background: #e7e7e7;
    width: 100%;
    padding: 5px 20px;
    text-align: right;
    height: 47px;
    line-height: 37px;
    border: 1px solid var(--ark_button_hover);
    border-radius: 5px;

}
.boxSelectTravel .InputSelectCity:last-child {
	padding-right:35px;
}
.InputSelectCity .flxY {
    height: 35px;
    line-height: 15px;
    padding-top: 3px;
 
}
.changeCity {
    position: absolute;
    width: 39px;
    height: 39px;
    color: var(--ark_button_hover);
    left: 50%;
    bottom: 9px;
    font-size: 26px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--ark_button_hover);
    border-radius: 10px;
    line-height: 34px;
    margin-left: -20px;
	cursor:pointer;
}
.changeCity:hover {
    background: var(--ark_button_bg);
    color: var(--ark_button_color);
}
.bsYcity{
	width: 100%;
}
.bsYcity label,.bsYcity span {
    margin-bottom: 4px;
    display: inline-block;
    color: var(--ark_button_hover);
}
.boxSelectNoF {
    padding: 5px 10px;
    margin-top: 18px;
}

/* From Uiverse.io by Cksunandh */ 
.custom-radio-group {
    --transDur: 0.3s;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1em;
    direction: ltr;
}

.custom-radio-group form {
  display: flex;
  gap: 0.1em;
  max-width: 20em;
  margin: auto;
  padding: 0 1em;
}

.custom-radio-group .radio-label {
    width: 110px;
    position: relative;
    display: block;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    font-size: 13px;
}

.custom-radio-group .radio-input {
  background-image: linear-gradient(#ffffff 33%,#414751 58%,#837b52,#c5baa1,#c3adaa);
  border-radius: 0;
  box-shadow:
    0.1em 0 0 #2726267f inset,
    -0.1em 0 0 #27262600 inset,
    0 0.1em 0 #afa490 inset,
    0 -0.1em 0 #ffffff3f,
    0 0.2em 0.5em #0000007f,
    0 -0.1em 0 #926086 inset,
    -0.1em -0.2em 0 #ffffff7f inset;
  cursor: pointer;
  display: block;
  margin-bottom: 0.5em;
  width: 100%;
  height: 0.8em;
  transition: box-shadow var(--transDur) ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-radio-group .radio-input:checked {
    background-image: linear-gradient(#ffffff 33%, var(--ark_navbar_bg) 58%, var(--ark_navbar_bg), #c0b6ac, var(--ark_navbar_bg));
    box-shadow: 0.1em 0 0 var(--ark_navbar_bg) inset, -0.1em 0 0 var(--ark_navbar_bg) inset, 0 0.1em 0 var(--ark_navbar_bg) inset, 0 -0.1em 0 #ffffff3f, 0 0.1em 0 #ffffff7f, 0 -0.1em 0 var(--ark_navbar_bg) inset, -0.1em -0.2em 0 #ffffff7f inset;
}

.custom-radio-group .radio-input:checked + span {
    opacity: 1;
    font-weight: bold;
    color: var(--ark_button_bg);
}

.custom-radio-group .radio-input:focus {
  outline: transparent;
}

.custom-radio-group .radio-input + span {
  opacity: 0.65;
  transition: opacity var(--transDur) ease-in-out;
}

/* First and last input specific styles */
.custom-radio-group .radio-label:first-child .radio-input {
  border-radius: 0.4em 0 0 0.4em;
}

.custom-radio-group .radio-label:last-child .radio-input {
  border-radius: 0 0.4em 0.4em 0;
}

@media (prefers-color-scheme: dark) {
  .custom-radio-group .radio-input {
    background-image: linear-gradient(
      #ffffff 33%,
      #414751 58%,
      #837b52,
      #c5baa1,
      #c3adaa
    );
    box-shadow:
      0.1em 0 0 #2726267f inset,
      -0.1em 0 0 #27262600 inset,
      0 0.1em 0 #afa490 inset,
      0 -0.1em 0 #0000001f,
      0 0.2em 0.5em #0000007f,
      0 -0.1em 0 #926086 inset,
      -0.1em -0.2em 0 #ffffff7f inset;
  }

  .custom-radio-group .radio-input:checked {
    background-image: linear-gradient(
      #ffffff 33%,
      #414751 58%,
      #827a7b,
      #c0b6ac,
      #c3adaa
    );
  }
}
   @-ms-keyframes spin { 
        from { 
            -ms-transform: rotate(0deg); 
        } to { 
            -ms-transform: rotate(360deg); 
        }
    }
    @-moz-keyframes spin { 
        from { 
            -moz-transform: rotate(0deg); 
        } to { 
            -moz-transform: rotate(360deg); 
        }
    }
    @-webkit-keyframes spin { 
        from { 
            -webkit-transform: rotate(0deg); 
        } to { 
            -webkit-transform: rotate(360deg); 
        }
    }
    @keyframes spin { 
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(3)
			
		}
	}
.circle {
    position: absolute;
    width: 16px;
    height: 16px;
    aspect-ratio: 1 / 1;
    border: 3px solid #000;
    border-radius: 50%;
    background: transparent;
    z-index: 2;
}
  .circle.start { top: 60%; left: 8%; }
  .circle.end { top: 60%; left: 92%; transform: translateX(-100%); }
.circleLabel {
    position: absolute;
    top: 75%;
    padding: 0.4em 0.6em;
    border-radius: 6px;
    font-size: 0.9em;
    text-align: center;
    white-space: nowrap;
z-index: 99;
}
    

.circleLabel.start {
    left: 8%;
    transform: translateX(-50%);
}
.circleLabel.end {
    left: 92%;
    transform: translateX(-50%);
}
.boxMid {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.6em 1em;
    background: var(--color);
    border-radius: 6px;
    z-index: 3;
    color: var(--tx_color_hover);
}
svg.path-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
svg path.path-line {
    stroke: #000;
    stroke-width: 2;
    fill: none;
    stroke-dasharray: 5 5;
}
.pinfobox {
    display: flex;
    padding: 10px;
    background: #557ca8;
    margin: 10px 20px;
    justify-content: space-around;
    flex-direction: row;
    border-radius: 8px;
    color: #fff;
    min-height: 83px;
    background: var(--ark_Gradiant_bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.pinfobox div {
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    border-left: 1px solid #fff;
    width: 100%;
    padding: 10px;
    text-align: center;
    font-size: 11px;
}
.pinfobox div:last-child {
    border-left: 0px solid #fff;
}
.pinfobox span {
    display: block;
    margin-bottom: 8px;
}
.pinfobox div span:last-child {
    font-size: 14px;
    margin-bottom: 0;
}
.giop {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    justify-content: space-evenly;
}
.giop a {
    float: right;
    text-align: center;
    padding: 15px;
    width: 98px;
    height: 98px;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    margin: 5px;
    box-shadow: 0 1px 3px #00000017;
    color: #20548e;
    font-size: 12px;
    border-radius: 8px;
    border: 2px solid #20548e;
    position: relative;
    background: linear-gradient(180deg, rgb(43 114 115 / 39%) 50%, rgb(43 114 115 / 0%) 100%);
    align-items: center;
}
.giop a img {
    width: 50px;
    height: 50px;
}
.giop a span {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    text-align: center;
    margin-bottom: 0px !important;
}
.robotHead {
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
}
.cute-robot-v1 {
    height: 29px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.cute-robot-v1 * {
  box-sizing: border-box;
}
.cute-robot-v1 .circle-bg {
    background: #cedbdd;
    width: 44px;
    height: 29px;
    border-radius: 100%;
    border: 1px solid #195272;
    position: relative;
}
.cute-robot-v1 .circle-bg .robot-head {
    height: 32px;
    width: 39px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: -3px;
    border-radius: 15px;
    z-index: 4;
    background: linear-gradient(192deg, #2d4ec3, #789bfc);
    box-shadow: 0px 0px 2px 2px rgb(0 0 0 / 20%);
}

.cute-robot-v1 .circle-bg .robot-head .robot-face {
    height: 18px;
    width: 26px;
    background: linear-gradient(192deg, #dde4ff, #b2c6ff);
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 93px;
}
.cute-robot-v1 .circle-bg .robot-head .robot-face2:before {
    content: "";
    background: linear-gradient(354deg, #2d4ec3, #789bfc);
    height: 12px;
    width: 20px;
    position: absolute;
    bottom: -13px;
    left: 3px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}
.cute-robot-v1 .circle-bg .robot-head .robot-face .eyes {
    height: 7px;
    width: 4px;
    background: var(--ark_navbar_bg);
    border-radius: 100%;
    position: absolute;
    top: 5px;
	   animation: eyeMove 3.5s infinite ease-in-out,blinkEye 4s infinite;
}
.cute-robot-v1 .circle-bg .robot-head .robot-face .eyes.left {
  left: 4px;
}
.cute-robot-v1 .circle-bg .robot-head .robot-face .eyes.right {
  right: 4px;
}
.cute-robot-v1 .circle-bg .robot-head .robot-face .mouth {
    height: 8px;
    width: 10px;
    border-radius: 100%;
    border: 2px solid transparent;
    border-bottom-color: #195272;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 8px;
    overflow: hidden;
}
.cute-robot-v1 .circle-bg .robot-ear {
  position: absolute;
  height: 16px;
  width: 16px;
  border-radius: 100%;
  background: #ffffff;
  border: 1px solid #195272;
  z-index: 3;
  top: 6px;
}
.cute-robot-v1 .circle-bg .robot-ear.left {
  left: -3px;
}
.cute-robot-v1 .circle-bg .robot-ear.right {
  right: -3px;
}
@keyframes eyeMove {
  0%   { transform: translateX(0); }
  10%  { transform: translateX(-1px); }
  25%  { transform: translateX(3px); }
  35%  { transform: translateX(-2px); }
  55%  { transform: translateX(2px); }
  70%  { transform: translateX(-3px); }
  85%  { transform: translateX(1px); }
  100% { transform: translateX(0); }
}
@keyframes blinkEye {
    0%, 90%, 100% { height: 7px; }
    92%           { height: 1px; }
    95%           { height: 7px; }
}


.profile-card {
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
}
.header {
	position: relative;
	text-align: center;
	padding: 20px 20px 10px;
}
.header svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 120px;
	z-index: 1;
}

.header .profile-pic {
	position: relative;
	z-index: 2;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 4px solid #fff;
	margin: 0 auto;
	overflow: hidden;
}

.header .profile-pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.header h2 {
	margin-top: 10px;
	font-size: 20px;
}

.header p {
	font-size: 14px;
	color: #777;
}

.orders {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
	padding: 20px;
	text-align: center;
}

.orders .item {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 13px;
	color: #444;
}

.orders .item img {
	width: 40px;
	margin-bottom: 5px;
}

.settings {
	border-top: 1px solid #eee;
	padding: 15px 20px;
}

.settings .row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 0;
	font-size: 14px;
	cursor: pointer;
}
body.en .settings .row{
	flex-direction: row-reverse;
}
body.en .settings .row svg{
	margin-left: 0px;
	margin-right: 10px;
	
}
.settings .row i{
    font-size: 21px;
    width: 14px;
    height: 29px;
    font-style: normal;
}
body.en .settings .row i{
	rotate: 180deg;
}
.settings .row span{
    flex: 1;
}
.settings .row svg {
    width: 24px;
    height: 24px;
    fill: var(--ark_button_hover);
    margin-left: 10px;
}
.settings .row:not(:last-child) {
  border-bottom: 1px solid #eee;
}
.logout {
    text-align: center;
    padding: 15px;
    color: var(--ark_navbar_bg);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}
.S_Search {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: auto;
    background: #fff;
    padding: 5px 10px;
    gap: 10px;
    min-height: 55px;
}
.S_Search:hover {
    cursor: pointer;
    background: #ecebeb;
}
.sslo2 {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
}
.ssl2s {
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}
.ssl2 {
	height: 10px;
	width: 160px;
	border-radius: 5px;
	background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
	background-size: 200% 100%;
	animation: shimmer 1.5s infinite;
}
.ssl2.sh {
	width: 110px;
}
#rotator.hidden { display: none; }
.category_name {
    /* color: var(--ark_navbar_bg); */
    font-weight: 500;
}
.catFindU {
    color: var(--ark_navbar_bg);
}
.noFindProduct {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 20px;
    line-height: 28px;
    padding-top: 50px;
    fill: #c1c1c1;
}
.hum {
    display: flex;
    flex-wrap: nowrap;
}

.hmZO {
    width: 119px;
    color: #647281;
    padding: 12px;
    border-radius: 0;
    box-shadow: .125rem .25rem .625rem .25rem rgba(0, 0, 0, .149);
    cursor: pointer;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .875rem;
    white-space: nowrap;
}
.hmZO {
    -webkit-margin-end: .75rem;
    margin-inline-end: .75rem;
    border-top: .188rem solid var(--ark_navbar_bg);
}
.hmZO:last-child {
	margin-inline-end: 0;
}
.hmZOT
 {
    border-top: .188rem solid #e81932;
}
.hmW {
    -webkit-margin-end: .625rem;
    margin-inline-end: .625rem;
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--ark_navbar_bg);
}
.boxEmptyBasket {
    margin: auto;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}
.boxEmptyBasket img {
    width: 70%;
    max-width: 256px;
}
.boxEmptyBasket span {
    text-align: center;
    line-height: 30px;
}
.boxEmptyBasket span.bld {
    font-weight: bold;
    margin-top: 20px;
    color: var(--ark_button_hover);
    font-size: 17px;
}
#boxBasketList {
    padding: 20px;
    background: #fff;
    margin: 10px;
    border-radius: 5px;
}
.box_basket_button {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 140px;
    flex-direction: row-reverse;
}
.box_basket_button button {
    padding: 5px 10px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    font-size: 20px;
    line-height: 33px;
}
.box_basket_button span {
    min-width: 55px;
    text-align: center;
    display: inline-block;
    border: 1px solid #cccccc;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box_basket_button .btnDelete {
    padding: 5px 10px;
    background: #d9534f;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
    width: 100%;
    border-color: #d9534f;
}
#boxCategoryList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px 20px;
    padding: 10px;
}
.categoryItmB {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 10px;
    border-radius: 8px;
    background: #eeeeee;
}
.categoryItmB img {
    width: 128px;
    height: 128px;
}
.categoryItmB span{
	display:block;
}
.skeleton_Hotel {
    background: linear-gradient(90deg, #eee 25%, #ddd 50%, #eee 75%);
    background-size: 400% 100%;
    animation: shimmer 6.5s infinite;
    border-radius: 6px;
	
}
.skeleton_Hotel.slow{
	animation: shimmer 22.5s infinite;
}
#hotelList {
    padding: 5px 10px;
}
#hotelList [class^="ico-"], #hotelList [class*=" ico-"] {
    font-size: 20px;
    width: 28px;
    height: 28px;
    padding: 3px;
    border: 1px solid #a0a0a7;
    text-align: center;
    line-height: 16px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
	color:#a0a0a7;
}
.boxStar {
    color: gold;
    margin-bottom: 0px;
    font-size: 16px;
    display: flex;
    gap: 0px 0px;
    height: 20px;
}
.boxStar i:before {
    font-family: 'ihoicon' !important;
    content: "\e9eb";
    color: #71717a;
    font-style: normal;
    font-size: 21px;
    height: 20px;
    display: inline-block;
    line-height: 20px;
    width: 15px;
}
.HotelAddress {
    font-size: 12px;
    color: #555;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
}
.HotelAddress:before{
	content: "\e971";
	font-family: 'ihoicon' !important;
	margin-left:5px;
	font-style: normal;
    font-size: 21px;
	color: #71717a;
}
.userrating {
    display: inline-block;
    position: absolute;
    left: 0px;
    background: #007aff;
    color: #fff;
    padding: 0px 6px;
    border-radius: 5px;
    border-bottom-left-radius: 0;
    top: 0;
    padding-left: 10px;
    font-size: 11px;
}
.ispayed {
    height: 12px;
    position: absolute;
    top: -5px;
    left: -5px;
    font-size: 12px;
    background: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 12px;
    opacity: 0.6;
    border-radius: 100%;
}
.ispayed:before {
    content: "\e9f2";
    color: #007aff;
    font-family: 'ihoicon' !important;
    font-size: 16px;
    font-style: normal;
}
.selectDateHotel {
    margin: 0px 10px;
    width: auto !important;
    display: flex;
    justify-content: space-around;
}
.selectDateHotel div {
    text-align: center;
    width: 100%;
}
.selectDateHotel div:first-child {
    border-left: 1px solid #a7a7a7;
}
.btnSearchHostel {
    margin: 10px;
    flex-direction: row;
    max-width: none;
    border-radius: 5px;
}

.boxWallet{
	direction:ltr;
}
 
  .viewportWallet{
    position:relative;
    overflow:hidden;
    width:100%;
    height:240px;
    touch-action: pan-y; /* allow vertical scroll but prevent horizontal default on touch */
	direction:ltr;
  }

  /* track holds slides in a row */
  .trackWallet{
    display:flex;
    align-items:center;
    height:100%;
    transition: transform 420ms cubic-bezier(.2,.9,.2,1);
    will-change: transform;
    padding-inline-start: calc((100% - (85%)) / 2); /* center first card by padding at start */
    padding-inline-end: calc((100% - (85%)) / 2);
    gap: 16px;
  }

  .cardWallet{
    flex: 0 0 85%;           /* show main card 85% — peek of next */
    height: 90%;
    border-radius: 16px;
    color: #fff;
    padding:18px;
    position:relative;
    box-shadow: 0 10px 30px rgba(13,20,30,0.14);
    overflow:hidden;
    user-select:none;
    -webkit-user-select:none;
    touch-action: none; /* avoid pointer default inside card */
    transition: transform 300ms ease, box-shadow 300ms ease;
  }
.cardWallet:before {
    content: "";
    position: absolute;
    left: -10px;
    bottom: -23px;
    z-index: 1;
    background-image: url(../img/bgwallet.png);
    color: #fff !important;
    height: 100%;
    width: 100%;
    margin: 10px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.3;
}
.cardWallet:after {
    content: "";
    position: absolute;
    right: -10px;
    top: -23px;
    z-index: 1;
    background-image: url(../img/bgwallet2.png);
    color: #fff !important;
    height: 80px;
    width: 174px;
    margin: 10px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.3;
    transform: rotate(180deg);
}
  /* slight scale for active center card */
  .cardWallet.active{
    transform: scale(1.02);
    box-shadow: 0 18px 40px rgba(13,20,30,0.22);
  }
.chipWallet {
    width: 48px;
    height: 34px;
    border-radius: 6px;
    /* background: linear-gradient(135deg, #d4b24a, #8b6f2b); */
    /* box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); */
    background-image: url(../img/chip.svg);
    background-size: 100% 100%;
}
 .card_number {
	margin-top:14px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
	font-size:20px; letter-spacing:2px;
	direction:ltr;
	color: #fff;
	font-size: 20px;
	letter-spacing: 2px;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}
 
.cardName {
    position: absolute;
    right: 20px;
    top: 25px;
	text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
}
  .rowWallet{
    display:flex; align-items:center; justify-content:space-between;
    margin-top:10px;
  }
  .pillWallet{
    background: rgba(255,255,255,0.09);
    padding:7px 10px; border-radius:999px; font-size:13px;
    backdrop-filter: blur(4px);
	text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
  }
.balanceWallet {
    position: absolute;
    left: 18px;
    bottom: 18px;
    font-weight: 700;
    font-size: 18px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.6);
    direction: rtl;
}
  .logoWallet{
    position:absolute; right:18px; bottom:18px; width:46px; height:46px;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    background: rgba(255,255,255,0.18); color:#111; font-weight:700; font-size:11px;
  }
	.logoWallet *{
		max-width:100%;
		max-height:100%;
	}
  /* pagination dots */
  .dotsWallet{ display:flex; gap:8px; justify-content:center; margin-top:12px }
.dotWallet {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #cfcfcf;
    transition: transform .25s, background .25s;
    margin: 0px 2px;
}
.dotWallet.active {
    background: #e8ac00;
    transform: scale(1.3);
    width: 40px;
    border-radius: 3px;
}
.ServiceItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-height: 50px;
    justify-content: flex-start;
    border: 1px solid #c7c7c7;
    margin: 10px 10px;
    padding: 5px;
    border-radius: 5px;
    background: #ececec;
	cursor:pointer;
}
.ServiceItem div {
    display: flex;
    flex-direction: column;
    line-height: 24px;
}
.ServiceItem div span:first-child {
    font-weight:bold;
}
.ServiceItem div span:last-child {
    color: #b2b2b2;
    font-size: 13px;
}
.ServiceItem div img{
	width:26px;
	height:26px;
	margin-left:10px
}

.wallet-skeleton {
    width: 100%;
    height: 180px;
    background: #f7f7f7;
    border-radius: 20px;
    padding: 15px;
    margin: 10px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}
.skeleton-logo,
.skeleton-number,
.skeleton-name,
.skeleton-expiry,
.skeleton-balance {
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

.skeleton-logo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.skeleton-number {
  width: 80%;
  height: 20px;
  margin-top: 10px;
}

.skeleton-name {
  width: 60%;
  height: 18px;
  margin-top: 10px;
}

.menu-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: #222;
    color: #fff;
    border: none;
    padding: 12px 18px;
    border-radius: 10px;
    cursor: pointer;
}
 
.user-header {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}
.user-header img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #fff;
    margin-bottom: 10px;
}
.user-header h3 {
    margin: 0;
    font-size: 18px;
    color: #000;
}
.menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
}
.menu-item {
    background: var(--ark_Gradiant_bg);
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    text-align: center;
    padding: 10px 0;
    border-radius: 5px;
    transform: rotateY(-90deg) translateX(100px);
    opacity: 0;
    transition: all 0.7s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
	line-height: 25px;
	font-style:normal;
}
.menu-item i {
    font-style: normal;
    font-size: 23px;
}
.drawer {
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: right 0.6s ease;
	z-index: 999;
	padding: 20px 10px;
	box-sizing: border-box;
}
.bg_royal.active .content-block .drawer .menu-item {
    transform: rotateY(0deg) translateX(0);
    opacity: 1;
}
.bg_royal.active .content-block .drawer .menu-item:nth-child(1) {
    transition-delay: 0.1s;
}
.bg_royal.active .content-block .drawer .menu-item:nth-child(2) {
    transition-delay: 0.2s;
}
.bg_royal.active .content-block .drawer .menu-item:nth-child(3) {
    transition-delay: 0.3s;
}
.bg_royal.active .content-block .drawer .menu-item:nth-child(4) {
    transition-delay: 0.4s;
}
.bg_royal.active .content-block .drawer .menu-item:nth-child(5) {
    transition-delay: 0.5s;
}
.bg_royal.active .content-block .drawer .menu-item:nth-child(6) {
    transition-delay: 0.6s;
}
.menu-item:hover {
    transform: scale(1.08);
    background: linear-gradient(135deg, #ff6a00, #ee0979);
}

.EndMenuItem {
    height: 30px;
    background: #fff;
    margin-bottom: 30px;
}
.ItemMEnuSl{
	padding: 0 10px;
	display: flex;
	justify-content: flex-end;
}


.ratesTableConte table{ width:100%; border-collapse: collapse; margin-top:0px;}
.ratesTableConte table th, .ratesTableConte table td{ padding:0 5px; border-bottom:1px solid #eee; text-align:center;color:#101984}
.ratesTableConte table th {
    padding: 5px 0px;
}
.ratesTableConte table tr.bgTr{ 
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFUlEQVQIW2P83Sf3n7XoESMjAxQAADjFBAPqoJzEAAAAAElFTkSuQmCC);
	background-color:#fff;
	position: sticky;
	top: 0;
	z-index: 2;
	height: 40px;
}
.ratesTableConte table canvas{ width:140px; height:30px;}
.change-up {
    background: #d6f7df;
    color: #000;
    border-radius: 4px;
    padding: 2px !important;
}
.change-down {
    background: #feebeb;
    color: #000;
    border-radius: 4px;
    padding: 2px !important;
}
.Tyhei {
    display: flex;
    flex-direction: column;
    direction: ltr;
    font-size: 13px;
    line-height: 18px;
    padding: 3px 0px;
}
.toolbarRe {
	padding:5px;
}
.price-up,.price-down {
    direction: ltr;
}
.price-down span:before {
	content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 10px 6.5px 0 6.5px;
    border-color: #ed3b3b transparent transparent;
    background-position: 0 0;
	    margin-right: 3px;
    display: inline-block;
}
.price-up span:before {
	content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6.5px 10px 6.5px;
    border-color: transparent transparent #8ecf61;
    background-position: 0 0;
	    margin-right: 3px;
    display: inline-block;
}
.toolbarRe button {
    background: #fff;
	border:1px solid #69a4aa;
    color: #69a4aa;
    padding: 3px 7px;
    border-radius: 4px;
    min-width: 60px;
}
.toolbarRe button.active {
	background: #69a4aa;
	color:#fff;
}
 
#ratesTable .skeleton {
    height: 30px;
    display: block;
    border-radius: 4px;
    margin: 7px 0px;
}

  .row-flash {
    animation: flashBg 5s ease;
  }
  @keyframes flashBg {
    0%   { background-color: #ddedfb; }
    100% { background-color: transparent; }
  }
  
 .boxcontactUs {
    background: linear-gradient(135deg, #74ABE2, #5563DE);
	
	
} 
.boxcontactUs .content-block{
	text-align:center;
}
 .contact-container {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 30px;
    width: 90%;
    display: grid;
    gap: 30px;
    color: #fff;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
	margin: 20px auto;
}
.contact-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 15px;
}
.contact-info h2{
    font-size: 18px;
    font-weight: bold;
    color: #80f1ff;
}
.contact-item .fa {
    width: 22px;
    height: 22px;
    display: inline-block;
    margin-left: 10px;
    color: #80f1ff;
}

.store-banners {
    display: flex;
    overflow-x: auto;
    gap: 12px;
    padding: 15px;
    scrollbar-width: none;
    cursor: grab;
	width: 100%;
}
.store-banners a {
    height: 150px;
    border-radius: 10px;
    flex-shrink: 0;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	overflow:hidden;
	max-width: 90%;
}
.store-banners img {
    height: 150px;
    border-radius: 10px;
    flex-shrink: 0;
    width: 100%;
}
.TBoXUiu {
    transform: translate3d(-0.0014088px, 0px, 0px);
    display: flex;
}
.ticketB {
    flex: 0 0 79.44%;
    min-width: 200px;
    user-select: none;
    padding-top: 14px;
    padding-left: 8px;
    padding-right: 8px;
}
.ticketR
 {
    display: flex;
    flex-direction: row;
    border-radius: 6px;
    width: 100%;
	background: linear-gradient(135deg, rgb(210 250 255), rgb(105 168 176));
    height: 56px;
    position: relative;
}
.ticketm {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
}
.ticketm img {
    height: 40px;
    width: 40px;
    inset: 0px;
    object-fit: cover;
    color: transparent;
    margin-left: 10px;
    margin-right: 8px;
	fill:red;
}
.tickett {
    display: flex;
    flex-direction: column;
    flex: 1 1 0%;
    align-items: flex-start;
    padding: 6px 14px 10px 8px;
    overflow: hidden;
}
.tickett span{
    margin: 0px;
    font-weight: 400;
    font-size: 0.625rem;
    line-height: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #000;
}
.tickett .sefew {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 5px;
}
.tickett .sefew span {
    font-style: normal;
    font-weight: bold;
    font-size: 13px;
}
.tickett .sefew i {
    font-style: normal;
    font-size: 13px;
    color: #767676;
}
.ticketS {
    display: flex;
    flex-direction: column;
    width: 1px;
    height: 100%;
    position: relative;
    align-items: center;
    justify-content: center;
	
}
.ticketS i{
	display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 15px);
    background-image: repeating-linear-gradient(rgb(255, 192, 67) 0px, rgb(255, 192, 67) 6px, transparent 6px, transparent 10px);
    background-repeat: repeat-y;
    background-size: 1px 10px;
    background-position: center center;
}
.ticketS::after {
    content: "";
    position: absolute;
    top: -6px;
    right: -5px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: rgb(255, 255, 255);
}
.ticketS::before {
    content: "";
    position: absolute;
    bottom: -6px;
    right: -5px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    background-color: rgb(255, 255, 255);
}
.infoTicket {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}
.infoTicket img {
    width: 64px;
    height: 64px;
}
.infoTicket span{
	margin-top:30px;
	
}
.st_banners{
	position:relative;
}
.st_banners .st_logo{
	position:absolute;
	z-index:2;
	left:50%;
	top:50%;
	margin-left:-32px;
	height:64px;
	width:64px;
	border:2px solid #fff;
	border-radius:100%;
	display:inline-block;
	top:20px;
	filter: drop-shadow(0 0 5px white) drop-shadow(0 0 5px black);
}
.st_banners .st_name {
    position: absolute;
    top: 90px;
    left: 0;
    right: 0;
    text-align: center;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8), 0 4px 12px rgba(0, 0, 0, 0.7), 0 0 24px rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 15px;
}
.alertPage {
    box-sizing: border-box;
    display: flex;
    flex-flow: row;
    margin: 10px;
    gap: 8px;
    background-color: rgb(246, 246, 246);
    padding: 16px;
    border-radius: 8px;
    font-size: 11px;
    align-items: center;
    color: #ef4056;
    padding-right: 33px;
    position: relative;
    line-height: 1.7;
}
.alertPage:before {
    content: "!";
    width: 20px;
    height: 20px;
    background: #ef4056;
    color: #fff;
    text-align: center;
    border-radius: 100%;
    font-size: 16px;
    position: absolute;
    right: 7px;
    top: 50%;
    margin-top: -10px;
}
.inputItems {
    display: flex;
    flex-direction: column;
    margin-bottom: 5px;
    align-items: flex-start;
	position:relative;
}
body.en .inputItems{
	align-items: flex-end;
}
.inputItems label {
    font-size: 12px;
    margin-bottom: 5px;
    margin-top: 5px;
}
.textInput {
    background-color: #f1f1f1;
    color: #444;
    padding-inline: 2px;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 8px 10px;
    font-size: 12px;
    width: 100%;
    user-select: auto;
    font-weight: 400;
    display: block;
    box-sizing: border-box;
    direction: rtl;
}
body.em .textInput{
	direction: ltr;
}
.boxItem {
    background-color: #fff;
    box-shadow: 0 0 0 1px rgba(63, 63, 68, .05), 0 1px 3px 0 rgba(63, 63, 68, .15);
    outline: 1px solid #eee;
    border: 1px solid #ddd;
    border-radius: 3px;
    padding: 5px 15px;
	margin: auto 10px;
    margin-bottom: 5px;
}
.A_row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    margin: 0 -10px;
    margin: 0 0px;
    align-items: flex-end;
}

[class*="A_col-"] {
    padding: 5px;
    box-sizing: border-box;
}

.A_col-15 {
    width: 15%;
}

.A_col-20 {
    width: 20%;
}

.A_col-25 {
    width: 25%;
}

.A_col-33 {
    width: 33.3333%;
}

.A_col-40 {
    width: 40%;
}

.A_col-50 {
    width: 50%;
}

.A_col-66 {
    width: 66.6666%;
}

.A_col-75 {
    width: 75%;
}

.A_col-100 {
    width: 100%;
}

@media screen and (max-width: 410px) {
    .A_col-15,
    .A_col-20,
    .A_col-25,
    .A_col-33,
    .A_col-40,
    .A_col-50,
    .A_col-66,
    .A_col-75 {
        width: 100%;
    }
}
.titrBoxI {
    margin: 3px 5px;
    font-size: 11px;
    font-weight: 600;
    line-height: 20px;
}
.titrBoxI:before {
    content: "\25C9";
    font-size: 19px;
    position: relative;
    top: 5px;
    margin-left: 3px;
    color: #006add;
    font-weight: 900;
}

.boxInputByBtn {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
body.en .boxInputByBtn{
	align-items: flex-end;
    flex-direction: row-reverse;
}
.boxInputByBtn .inputItems {
    flex: 1;
}
.boxInputByBtn .btn {
    width: 115px;
    height: 36px;
    font-size: 10px;
    font-weight: 600;
    margin-bottom: 5px;
    margin-right: 3px;
    background: var(--ark_navbar_bg);
    border-radius: 3px;
}

.noAddress {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
}
.noAddress span {
    margin-top: 10px;
    display: block;
}
.noAddress img{
	width:120px;
}
.BtnAdd {
    border: 1px solid var(--ark_button_bg);
    background: var(--ark_button_bg);
    color: var(--ark_button_color);
    padding: 10px 20px;
    margin-top: 20px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
	cursor:pointer;
}
.BtnAdd svg {
    width: 20px;
    height: 20px;
    fill: var(--ark_button_color);
    position: relative;
    top: -3px;
    margin-left: 5px;
}
.login-box2 {
    background: #fff;
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.login-box2 h2 {
    margin: 0;
    border-bottom: 1px solid #797979;
    padding: 20px;
    margin-bottom: 20px;
	width: 100%;
	background: linear-gradient(339deg, var(--ark_navbar_bg) 0%, #185657 100%);
	color: #fff;
}
.LmBox {
    display: flex;
    flex-direction: column;
    width: 300px;
    text-align: center;
}
.LmBox .textInput{
	margin-bottom:10px;
}
.LmBox img{
	margin:auto;
	width:128px;
	margin-bottom:20px;
}
.Button_module {
    font-size: .875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
    text-align: center;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--spacing-xxs);
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background #ec0761;
    background: linear-gradient(339deg, var(--ark_navbar_bg) 0%, #185657 100%);
    color: #fff;
    height: 3rem;
    width: 100%;
    color: #fff;
}

.LoginForm {
    font-size: .875rem;
    line-height: 1.25rem;
    letter-spacing: 0;
    border-top: 1px solid #797979;
    margin-top: 20px;
    padding: 10px 0px;
    text-align: right;
}
.LoginForm a{
	text-decoration: underline;
	color: var(--ark_navbar_bg);
	cursor:pointer;
}
.boxInputMobileNumber {
    position: relative;
    overflow: hidden;
}
.clear-btn {
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: #ccc;
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    font-weight: bold;
    cursor: pointer;
    display: none;
    margin-top: -4px;
}

.otp-container {
    display: flex;
    direction: ltr !important;
    justify-content: space-between;
    margin-bottom: 20px;
}
.otp-input {
    font-size: 1rem;
    line-height: 1.5rem;
    letter-spacing: 0;
    padding: 1rem;
    width: 56px;
    height: 56px;
    text-align: center;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: #9e9e9e;
    transition: border-color 250ms ease-in-out;
    transition-property: border-color;
    outline: none;
    caret-color:#007bff;
    color: #212121;
    direction: ltr!important;
}
 
.otp-input:focus {
  border-color: #007bff;
  box-shadow: 0 0 6px rgba(0,123,255,0.3);
}
b, strong {
    font-weight: 700;
    color: #185657; 
}
.otp-text{
    text-align: center;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.animText{
	animation: shine 5s infinite linear;
	background: linear-gradient(to right, #fff 0, #4d4d4d 10%, #fff 20%);
	    background-position: 0;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: shine 5s infinite linear;
    animation: shine 5s infinite linear;
    -webkit-text-size-adjust: none;
}
@-webkit-keyframes shine {
	0% {
		background-position: 0;
	}

	60% {
		background-position: 180px;
	}
	100% {
		background-position: 180px;
	}
}

.no-img {
    height: 150px;
    background-image: url(../img/no-image.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    display: block;
    width: 100%;
}


@keyframes q{0%{transform:translateX(0)}25%{transform:translateY(-9px)}35%,65%{transform:translateY(-9px) rotate(17deg)}55%,75%{transform:translateY(-9px) rotate(-17deg)}to{transform:translateY(0) rotate(0)}}

.bakala-float-call-btn {
    width: 70px;
    position: absolute;
    height: 70px;
    background-color: var(--accent_color2);
    border-radius: 20px;
    box-sizing: border-box;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 6px 8px 2px rgb(0 0 0/14%);
}
.bakala-float-call-btn {
    animation: 3s infinite q;
}

.BrandInfo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    box-shadow: 6px 6px 12px #b8b9be, -6px -6px 12px #fff !important;
    margin: 5px 10px;
}
.BrandInfo .brandname {
    display: flex;
    flex-direction: column;
    gap: 15px;
    font-size: 18px;
    color: #8398b2;
}
.BrandInfo .brandname span{
	font-size: 18px;
}
.BrandInfo .brandLogo{
	width:88px;
	height:88px;
}
.BrandInfo .brandLogo img{
	width:100%;
	max-height:100%;
}

#carbrandLiost {
    display: grid;
    grid-template-columns: repeat(auto-fill, calc(50% - 8px));
    gap: 8px;
    width: 100%;
    margin-top: 10px;
}
.carModel {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-radius: 4px;
    box-shadow: 6px 6px 12px #b8b9be, -6px -6px 12px #fff !important;
    font-size: 12px;
    gap: 5px;
    overflow: hidden;
}
.carModel .ModelLogo {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.carModel .ModelLogo img{
	width:100%;
	max-height:100%;
}
.carModel .Modelname{
	font-size:12px;
}
.topInfo {
    padding: 5px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.topbg {
    height: 150px;
    background-image: url(../img/topbg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
	margin-bottom:30px;
	position:relative;
}
.profileImg,.profileImg img{
	width:44px;
	height:44px;
	border-radius:100%;
	overflow:hidden;
}
.searchBox {
    height: 44px;
    background: #fff;
    position: absolute;
    bottom: -22px;
    left: 10px;
    right: 10px;
    border-radius: 8px;
    box-shadow: 6px 6px 20px #b8b9be, 0px -6px 20px #d4d4d4 !important;
	overflow:hidden;
}
.searchBox input {
    background: transparent;
    width: 100%;
    height: 100%;
    border: none;
    padding: 5px 20px;
}
.boxCategoryS {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 100px);
    gap: 10px;
    padding: 10px 20px;
}
.boxCategoryS a {
    border: 1px solid #ddd;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 12px;
    cursor: pointer;
    background: #f5f7f7;
}
.boxCategoryS a span{
	font-size: 11px;
}
.boxCategoryS a img{
	width:44px;
	height:44px;
}
@keyframes shimmerSlider {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.GoldPriceNow {
    display: flex;
    gap: 10px;
    padding: 5px 20px;
    background-color: transparent;
    background-image: linear-gradient(272deg, #c6ad8a 0%, #E5CAA4 100%);
	background: linear-gradient(90deg, #e2d087, #ac8646);
    color: #000;
    padding: 7px;
    margin: 5px 10px;
    border-radius: 8px;
    font-size: 16px;
}
.GoldPriceNow span{
	font-size:inherit;
}

#boxGoldBanner {
    background: linear-gradient(358deg, #e2d087, #ac8646);
    padding: 15px 0px;
	padding-bottom:60px;
}
#boxGold {
    min-height: 200px;
    position: relative;
    margin-top: -40px;
    background: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 5px 5px;
    padding-top: 5px;
	
}

.Gold_category {
    display: flex;
    flex-direction: row;
    width: 100%;
    border-radius: 5px;
    background: #fff;
    padding: 0px 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    direction: rtl;
    gap: 10px;
    padding: 5px;
    justify-content: center;
}
.Gold_category a {
    padding: 5px;
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    min-width: 75px;
    max-width: 88px;
    height: 100px;
    box-sizing: initial;
    cursor: pointer;
    gap: 10px;
    animation: fadeInOut 5s forwards infinite;
    box-shadow: 0 0 6px rgb(213 191 120 / 73%);
    background: linear-gradient(358deg, #fffae4, #ac8646);
    border-radius: 5px;
    overflow: hidden;
    color: #ff;
}
.Gold_category a span {
    display: block;
    text-align: left;
    width: 100%;
    padding-left: 5px;
    color: #fff;
    font-size: 16px;
}
.Gold_category a img {
    display: block;
    width: 64px;
    height: 64px;
    position: relative;
    margin-right: -15px;
}
@keyframes fadeInOut {
	0%, 20%, 100% {
		opacity: 1;
	}
	10% {
		opacity: .5;
	}
}


/* travel */
   :root{
      --bg:#fff; --card:#fff; --text:#111827; --muted:rgba(17,24,39,.62);
      --line:rgba(0,0,0,.08);
      --shadow:0 18px 60px rgba(0,0,0,.10);
      --shadow2:0 10px 24px rgba(0,0,0,.08);
      --r:20px; --r2:16px;
      --btn:linear-gradient(135deg,#7c3aed 0%, #2563eb 55%, #06b6d4 100%);
      --btn2:linear-gradient(135deg,#ff4d8d 0%, #8b5cf6 45%, #22d3ee 100%);
      --ok:#16a34a;
      --chipBg:#f8fafc; --chipBg2:#eef2ff;
      --danger:#ef4444;
      --warn:#f59e0b;
    }
    .arkTrv-container{max-width:1140px;margin:0 auto;padding:0px}
	.arkTrv-container b,.arkTrv-container strong {
		font-weight: 700;
		color: #185657;
		margin-bottom: 10px;
	}
    .arkTrv-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0 16px;flex-wrap:wrap}
    .arkTrv-brand{display:flex;align-items:center;gap:10px}
    .arkTrv-logo{width:46px;height:46px;border-radius:16px;background:var(--btn);box-shadow:0 16px 34px rgba(37,99,235,.22);position:relative;overflow:hidden}
    .arkTrv-logo:before{content:"";position:absolute;inset:-45%;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.60),transparent 62%);transform:rotate(20deg)}
    .arkTrv-brand h1{font-size:15px;margin:0;letter-spacing:-.2px;line-height:1.2}
    .arkTrv-brand p{margin:0;font-size:12px;color:var(--muted)}
    .arkTrv-pill{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--line);background:#fff;border-radius:999px;color:var(--muted);font-size:12px;user-select:none;box-shadow:var(--shadow2)}
    .arkTrv-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 6px rgba(22,163,74,.12)}
    .arkTrv-dot.arkTrv-busy{background:var(--warn);box-shadow:0 0 0 6px rgba(245,158,11,.12)}
    .arkTrv-dot.arkTrv-err{background:var(--danger);box-shadow:0 0 0 6px rgba(239,68,68,.12)}

    .arkTrv-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;align-items:start}
    @media(max-width:980px){.arkTrv-grid{grid-template-columns:1fr}}

    .arkTrv-card{overflow:hidden}
	.arkTrv-cardHeader {
		padding: 14px 14px 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		flex-wrap: wrap;
		flex-direction: row-reverse;
	}

    .arkTrv-cardHeader .arkTrv-title{display:flex;flex-direction:column;gap:2px}
    .arkTrv-cardHeader .arkTrv-title b{font-size:14px}
    .arkTrv-cardHeader .arkTrv-title span{font-size:12px;color:var(--muted)}
    .arkTrv-cardHeader .arkTrv-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

.arkTrv-seg {
    display: flex;
    border: 1px solid var(--ark_button_bg);
    border-radius: 5px;
    padding: 0px;
    gap: 4px;
    align-items: center;
    justify-content: space-between;
}
.arkTrv-seg button {
    border: 0;
    background: transparent;
    color: var(--muted);
    padding: 8px 10px;
    border-radius: 0;
    cursor: pointer;
    font-size: 12px;
    transition: .2s ease;
    white-space: nowrap;
    width: 100%;
}
	.arkTrv-seg button.arkTrv-active {
		background: var(--ark_button_bg);
		color: var(--ark_button_color);
		border: 1px solid var(--line);
		box-shadow: 0 8px 18px rgba(0,0,0,.06);
	}
    .arkTrv-chip{border:1px solid var(--line);background:#fff;padding:6px 10px;border-radius:999px;font-size:12px;color:var(--muted);user-select:none;box-shadow:var(--shadow2)}
    .arkTrv-chip.arkTrv-chipSoft{background:var(--chipBg2);border-color:rgba(124,58,237,.16);color:#1f2937}

    .arkTrv-form{padding:12px 14px 14px;border-top:1px solid var(--line)}
    .arkTrv-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
    @media(max-width:560px){.arkTrv-row{grid-template-columns:1fr}}
    .arkTrv-field{background:#fff;border:1px solid var(--line);border-radius:var(--r2);padding:10px;transition:.2s ease}
    .arkTrv-field:focus-within{border-color:rgba(37,99,235,.35);box-shadow:0 0 0 4px rgba(37,99,235,.10)}
    .arkTrv-field label{display:block;font-size:11px;color:var(--muted);margin-bottom:6px;user-select:none}
    .arkTrv-tapInput{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;padding:0}
    .arkTrv-tapInput .arkTrv-left{display:flex;flex-direction:column;gap:2px;min-width:0}
    .arkTrv-tapInput b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .arkTrv-tapInput span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
	.arkTrv-tapIcon {
		width: 40px;
		height: 40px;
		border-radius: 0;
		background: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
		user-select: none;
		background-image: url("data:image/png;base64,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");
		background-size: 40px;
	}

    .arkTrv-swapBtn{width:100%;border:1px solid var(--line);background:#fff;color:var(--text);border-radius:4px;padding:10px 12px;cursor:pointer;transition:.2s ease;display:flex;align-items:center;justify-content:center;gap:8px;box-shadow:var(--shadow2)}
    .arkTrv-swapBtn:hover{background:#f8fafc}
    .arkTrv-swapIcon{width:22px;height:22px;border-radius:10px;background:rgba(0,0,0,.06);display:inline-flex;align-items:center;justify-content:center;font-size:14px}

    .arkTrv-optRow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
    .arkTrv-toggle{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff;border-radius:16px;padding:10px 12px;box-shadow:var(--shadow2);cursor:pointer;user-select:none}
    .arkTrv-toggle input{display:none}
    .arkTrv-switch{width:44px;height:26px;border-radius:999px;background:rgba(0,0,0,.12);position:relative;flex:0 0 auto;transition:.2s ease}
    .arkTrv-switch::after{content:"";width:20px;height:20px;border-radius:999px;background:#fff;position:absolute;top:3px;right:3px;transition:.2s ease;box-shadow:0 10px 20px rgba(0,0,0,.18)}
    .arkTrv-toggle input:checked + .arkTrv-switch{background:rgba(37,99,235,.35)}
    .arkTrv-toggle input:checked + .arkTrv-switch::after{right:21px}
    .arkTrv-toggle .arkTrv-tTxt b{font-size:12px}
    .arkTrv-toggle .arkTrv-tTxt span{font-size:11px;color:var(--muted)}

    .arkTrv-formFooter{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap}
.arkTrv-primary {
    border: 0;
    cursor: pointer;
    border-radius: 4px;
    padding: 12px 14px;
    min-width: 180px;
    background: var(--ark_button_bg);
    color: white;
    font-weight: 900;
}
.arkTrv-ghost {
    border: 1px solid var(--ark_button_bg);
    background: var(--ark_button_color);
    color: var(--ark_button_bg);
    border-radius: 4px;
    padding: 12px 14px;
    cursor: pointer;
    font-weight: 900;
    font-size: 13px;
    min-width: 120px;
}
	.arkTrv-linkBtn{border:0;background:transparent;color:#2563eb;cursor:pointer;font-weight:900;font-size:12px}

    .arkTrv-filters{padding:12px 14px;border-top:1px solid var(--line);display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:space-between}
    .arkTrv-filters .arkTrv-left{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
    .arkTrv-filters .arkTrv-right{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
    .arkTrv-searchInline{flex:1;min-width:220px;max-width:420px}
    .arkTrv-searchInline input{width:100%;border:1px solid var(--line);background:#fff;color:var(--text);padding:11px 12px;border-radius:4px;outline:0;font-size:13px;box-shadow:var(--shadow2)}
    .arkTrv-selectMini{border:1px solid var(--line);background:#fff;color:var(--text);padding:10px 12px;border-radius:4px;outline:0;font-size:13px;cursor:pointer;box-shadow:var(--shadow2)}

    .arkTrv-list{padding:12px 14px 14px;display:flex;flex-direction:column;gap:10px}
	.arkTrv-item {
		border: 1px solid var(--line);
		background: #fff;
		border-radius: 4px;
		padding: 12px;
		display: flex;
		gap: 12px;
		align-items: stretch;
	}
	.arkTrv-badge {
		width: 56px;
		min-width: 56px;
		border-radius: 0px;
		background: var(--ark_Gradiant_bg);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 10px 6px;
		text-align: center;
		color: #fff;
	}
    .arkTrv-badge b{font-size:12px}
    .arkTrv-badge span{font-size:11px;opacity:.92}
    .arkTrv-itemMain{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
    .arkTrv-itemTop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
    .arkTrv-route{display:flex;flex-direction:column;gap:2px;min-width:0}
    .arkTrv-route b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .arkTrv-route span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .arkTrv-price{text-align:left;min-width:130px}
    .arkTrv-price b{font-size:14px;display:block}
    .arkTrv-price span{font-size:11px;color:var(--muted);display:block;margin-top:2px}
    .arkTrv-itemBottom{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
    .arkTrv-tags{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
    .arkTrv-tag{font-size:11px;color:rgba(17,24,39,.78);border:1px solid var(--line);background:var(--chipBg);padding:6px 10px;border-radius:4px;user-select:none}
    .arkTrv-cta{display:flex;gap:8px;align-items:center}
	.arkTrv-btnMini {
		border: 1px solid var(--line);
		background: #fff;
		color: var(--text);
		padding: 10px 12px;
		border-radius: 4px;
		cursor: pointer;
		font-size: 12px;
		font-weight: 900;
		white-space: nowrap;
		min-width: 120px;
	}
    .arkTrv-btnMini.arkTrv-primaryMini {
		border: 0;
		background: var(--ark_button_bg);
		color: #fff;
		min-width: 120px;
	}

    /* Popup */
    .arkTrv-overlay{
      position:fixed;inset:0;background:rgba(17,24,39,.38);
      display:none;align-items:flex-end;justify-content:center;
      z-index:2147483647;pointer-events:auto;
    }
    .arkTrv-overlay.arkTrv-show{display:flex}
    .arkTrv-sheet{
      width:min(920px,100%);
      background:#fff;border-radius:22px 22px 0 0;
      box-shadow:0 20px 70px rgba(0,0,0,.18);
      max-height:90vh;overflow:hidden;
      transform:translateY(18px);opacity:0;transition:.22s ease;
      display:flex;flex-direction:column;
      pointer-events:auto;
    }
    .arkTrv-overlay.arkTrv-show .arkTrv-sheet{transform:translateY(0);opacity:1}
    .arkTrv-handle{width:40px;height:5px;border-radius:999px;background:rgba(0,0,0,.16);margin:10px auto 6px}
    .arkTrv-sheetHead{
      padding:12px 14px;border-bottom:1px solid var(--line);
      display:flex;align-items:center;justify-content:space-between;gap:10px;
      background:#fff;position:relative;z-index:10;flex:0 0 auto;pointer-events:auto
    }
    .arkTrv-sheetTitle{display:flex;flex-direction:column;gap:2px;min-width:0}
    .arkTrv-sheetTitle b{font-size:14px}
    .arkTrv-sheetTitle span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .arkTrv-sheetClose{
      border:1px solid var(--line);background:#fff;width:40px;height:40px;border-radius:4px;
      cursor:pointer;font-weight:900;box-shadow:var(--shadow2);z-index:20;pointer-events:auto
    }
    .arkTrv-sheetBody{padding:12px 14px;overflow:auto;flex:1 1 auto;min-height:0;pointer-events:auto}
    .arkTrv-sheetFooter{
      padding:12px 14px;border-top:1px solid var(--line);
      background:#fff;display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;
      flex:0 0 auto;position:relative;z-index:20;
      box-shadow:0 -10px 26px rgba(0,0,0,.05);
      pointer-events:auto
    }
.arkTrv-sheetFooter .arkTrv-mini {
    border: 1px solid var(--line);
    background: #fff;
    padding: 10px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 900;
    box-shadow: var(--shadow2);
    pointer-events: auto;
    min-width: 140px;
}
.arkTrv-sheetFooter .arkTrv-ok {
    border: 0;
    background: var(--ark_button_bg);
    color: #fff;
    border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 900;
    min-width: 160px;
    pointer-events: auto;
}
    .arkTrv-sheetTabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
    .arkTrv-tabBtn{border:1px solid var(--line);background:#fff;padding:9px 12px;border-radius:999px;cursor:pointer;font-size:12px;font-weight:900;color:var(--muted);box-shadow:var(--shadow2)}
    .arkTrv-tabBtn.arkTrv-active{color:var(--text);background:var(--chipBg2);border-color:rgba(124,58,237,.18)}
    .arkTrv-sheetSearch{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
    .arkTrv-sheetSearch input{flex:1;min-width:220px;border:1px solid var(--line);background:#fff;padding:11px 12px;border-radius:4px;outline:0;font-size:13px;box-shadow:var(--shadow2)}

    .arkTrv-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    @media(max-width:720px){.arkTrv-grid2{grid-template-columns:1fr}}
    .arkTrv-section{border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow2);background:#fff}
    .arkTrv-sectionHead{padding:10px 12px;border-bottom:1px solid var(--line);background:#f8fafc;display:flex;align-items:center;justify-content:space-between;gap:10px}
    .arkTrv-sectionHead b{font-size:13px}
    .arkTrv-sectionHead span{font-size:12px;color:var(--muted)}
    .arkTrv-cityList{max-height:340px;overflow:auto}
    .arkTrv-cityItem{padding:10px 12px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(0,0,0,.06);transition:.12s ease}
    .arkTrv-cityItem:hover{background:#f8fafc}
    .arkTrv-cityItem:last-child{border-bottom:0}
    .arkTrv-cityItem b{font-size:13px}
    .arkTrv-cityItem span{font-size:12px;color:var(--muted)}
    .arkTrv-iata{font-weight:900;font-size:12px;background:linear-gradient(135deg,rgba(124,58,237,.10),rgba(37,99,235,.10),rgba(34,211,238,.10));border:1px solid rgba(37,99,235,.15);padding:6px 10px;border-radius:999px;color:#1f2937;white-space:nowrap}
    .arkTrv-hint{font-size:12px;color:var(--muted);line-height:1.6}

    /* Calendar */
    .arkTrv-calWrap{border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow2);overflow:hidden}
    .arkTrv-calTop{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:#f8fafc;border-bottom:1px solid var(--line)}
    .arkTrv-calTop button{border:1px solid var(--line);background:#fff;color:var(--text);width:40px;height:40px;border-radius:4px;cursor:pointer;font-weight:900;box-shadow:var(--shadow2)}
    .arkTrv-calTop b{font-size:13px}
    .arkTrv-calGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;padding:10px 12px}
    .arkTrv-dow{font-size:11px;color:var(--muted);text-align:center;padding:4px 0}
    .arkTrv-day{height:42px;border-radius:4px;border:1px solid var(--line);background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:12px;box-shadow:0 8px 16px rgba(0,0,0,.05);user-select:none}
    .arkTrv-day.arkTrv-muted{color:rgba(17,24,39,.35);background:#fafafa;box-shadow:none;cursor:default}
    .arkTrv-day.arkTrv-disabled{opacity:.45;pointer-events:none}
    .arkTrv-day.arkTrv-today{outline:2px solid rgba(34,211,238,.35);outline-offset:0}
    .arkTrv-day.arkTrv-selStart,.arkTrv-day.arkTrv-selEnd{border:0;background:var(--btn);color:#fff;box-shadow:0 14px 30px rgba(37,99,235,.22)}
    .arkTrv-day.arkTrv-inRange{background:rgba(37,99,235,.10);border-color:rgba(37,99,235,.14)}

    /* Counters */
    .arkTrv-counter{display:flex;flex-direction:column;gap:10px}
.arkTrv-counterRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 10px 12px;
    box-shadow: var(--shadow2);
    background: #fff;
}
    .arkTrv-counterRow b{font-size:13px}
    .arkTrv-counterRow span{font-size:12px;color:var(--muted)}
    .arkTrv-stepper{display:flex;align-items:center;gap:8px}
.arkTrv-stepper button {
    width: 36px;
    height: 36px;
    border-radius: 3px;
    border: 1px solid var(--line);
    background: var(--ark_button_bg);
    color: var(--ark_button_color);
    cursor: pointer;
    font-weight: 900;
    box-shadow: var(--shadow2);
}
    .arkTrv-stepper i{min-width:28px;text-align:center;font-style:normal;font-weight:900}

    /* Details view */
    .arkTrv-view{display:none}
    .arkTrv-view.arkTrv-active{display:block}
	.arkTrv-breadcrumb {
		display: flex;
		align-items: center;
		gap: 10px;
		flex-wrap: wrap;
		flex-direction: row-reverse;
	}
.arkTrv-backBtn {
    border: 1px solid var(--ark_button_bg);
    background: var(--ark_button_bg);
    color: var(--ark_button_color);
    padding: 10px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 900;
    direction: ltr;
}
    .arkTrv-hero{padding:14px;border-top:1px solid var(--line);display:grid;grid-template-columns:1.1fr .9fr;gap:14px}
    @media(max-width:980px){.arkTrv-hero{grid-template-columns:1fr}}
    .arkTrv-infoCard{border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow2);background:#fff;padding:12px}
    .arkTrv-infoCard h2{margin:0 0 6px;font-size:14px}
    .arkTrv-infoCard p{margin:0;color:var(--muted);font-size:12px;line-height:1.7}
    .arkTrv-kv{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
    @media(max-width:560px){.arkTrv-kv{grid-template-columns:1fr}}
	.arkTrv-kv .arkTrv-k {
		border: 1px solid var(--line);
		border-radius: 4px;
		padding: 10px;
		box-shadow: var(--shadow2);
		background: #fff;
	}
    .arkTrv-k b{font-size:12px;display:block;margin-bottom:4px}
    .arkTrv-k span{font-size:12px;color:var(--muted)}
    .arkTrv-sideActions{display:flex;flex-direction:column;gap:10px}
    .arkTrv-payBox{border:1px solid var(--line);border-radius:20px;padding:12px;box-shadow:var(--shadow2);background:#fff}
    .arkTrv-payBox .arkTrv-priceBig{font-size:16px;font-weight:900}
    .arkTrv-payBox .arkTrv-sub{color:var(--muted);font-size:12px;margin-top:4px}
    .arkTrv-payBox .arkTrv-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
    .arkTrv-payBox button{flex:1;min-width:180px}
    .arkTrv-listMini{display:flex;flex-direction:column;gap:8px;margin-top:10px}
    .arkTrv-miniRow{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:var(--shadow2);background:#fff}
    .arkTrv-miniRow b{font-size:12px}
    .arkTrv-miniRow span{font-size:12px;color:var(--muted)}
    .arkTrv-divider{height:1px;background:rgba(0,0,0,.06);margin:12px 0}
	
@keyframes _rpm_shimmer2 { 0%{background-position:0% 0} 100%{background-position:150% 0} }
._rpm_shimmer2 {
    background: linear-gradient(90deg, rgb(234 234 234 / 90%), rgba(255, 255, 255, .9), rgb(241 241 241 / 90%));
    background-size: 300% 100%;
    animation: _rpm_shimmer2 1.2s infinite linear;
    display: block;
    margin: 10px;
    border-radius: 4px;
    border: 1px solid #e4e4e4;
}
  .ark_hr{
	  background: linear-gradient(to right, #d80db6, #5b13f7, #d80db6);
	  display:block;
	  height:1px;
	  margin:10px 0px;
  }
 @keyframes Tbu{0%{opacity:.3}33.333333%{opacity:.9}66.666667%{opacity:.6}to{opacity:.3}}
@keyframes KVc1{0%{opacity:.9}33.333333%{opacity:.6}66.666667%{opacity:.3}to{opacity:.9}}
@keyframes 5aK{0%{opacity:.6}33.333333%{opacity:.3}66.666667%{opacity:.9}to{opacity:.6}}
.cH4{animation:Tbu 1.2s linear infinite normal forwards}
.HNJ{animation:KVc1 1.2s linear infinite normal forwards}
.le2{animation:5aK 1.2s linear infinite normal forwards}
.rc{border-radius:50%}
.searcTopBox {
    width: 100%;
    height: 38px;
}
.searcTopBox span{
	color:#5f5f5f !important;
}

.loadingBtn {
    position: absolute;
    background: #d0d0d0;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
	
}
.loadingBtn:before {
    content: "";
    width: 38px;
    height: 38px;
    animation: spinBorder 2s linear infinite;
    /* background: conic-gradient(#626262 0deg, #f2f2f2 218deg); */
    position: absolute;
    background-image: url(loading.gif);
    background-size: 38px 38px;
    top: 2px;
    border-radius: 100%;
    left: 50%;
    margin-left: -19px;
}
.loadingGht {
    background-image: url(loading.gif);
    position: absolute;
    height: 32px;
    width: 100%;
    background-size: 30px;
    left: 0;
    margin-top: 25px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #e9e9e9;
}


.ltu {
    height: 140px;
    background: #fff;
    border-radius: 10px;
    animation: shimmer 1.5s infinite ease-in-out;
    background: linear-gradient(100deg, #f7f7f7 8%, #e9e9e9  18%, #f7f7f7 33%);
    background-size: 1000px 100%;
    flex-shrink: 0;
    overflow: hidden;
    margin: 10px 20px;
}
.tiYue {
    display: flex;
    justify-content: space-around;
}
.tiYue .ltu {
    width: 64px;
    height: 64px;
    border-radius: 6px;
}
.tiYuB .ltu {
    width: auto;
    height: 130px;
    border-radius: 6px;
}
.LocatIonAddress {
    display: flex;
    align-items: center;
    padding: 5px 10px;
    gap: 10px;
    color: #3e3e3e;
    font-size: 12px;
    margin: 10px 0px;
	cursor:pointer;
}



.Shoptoolbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    z-index: 9;
    align-items: center;
	border-top:1px solid #c7c7c7;
	background:#fff;
}
.Shoptoolbar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.Shoptoolbar svg{
	width:32px;
	height:32px;
}
.Shoptoolbar a:hover,.Shoptoolbar a.active{
	color:var(--ark_button_bg);
	fill:var(--ark_button_bg);
	font-weight:bold;
	cursor:pointer;
}