/* ===================================
            start fonts
=================================== */
@font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 100;
            src: url("https://storage.perfectcdn.com/q3i1fa/4e883s8981hagyut.woff2") format("woff2");
        }
        @font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 200;
            src: url("https://storage.perfectcdn.com/q3i1fa/t02jnteiowuhlsia.woff2") format("woff2");
        }
        @font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 300;
            src: url("https://storage.perfectcdn.com/q3i1fa/3d41to9clisfajz1.woff2") format("woff2");
        }
        @font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 400;
            src: url("https://storage.perfectcdn.com/q3i1fa/zlmep3rflxi986pa.woff2") format("woff2");
        }
        @font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 500;
            src: url("https://storage.perfectcdn.com/q3i1fa/zpn4jqarnw59tchd.woff2") format("woff2");
        }
        @font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 600;
            src: url("https://storage.perfectcdn.com/q3i1fa/4jkozosnpdwlgnbo.woff2") format("woff2");
        }
        @font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 700;
            src: url("https://storage.perfectcdn.com/q3i1fa/11tseu0tcp3p8zey.woff2") format("woff2");
        }
        @font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 800;
            src: url("https://storage.perfectcdn.com/q3i1fa/rzi1bihb3q348won.woff2") format("woff2");
        }
        @font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 900;
            src: url("https://storage.perfectcdn.com/q3i1fa/pfhoutle14h3dn2d.woff2") format("woff2");
        }
        @font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 950;
            src: url("https://storage.perfectcdn.com/q3i1fa/j8iudf0sl80bgzkf.woff2") format("woff2");
        }
        @font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 1000;
            src: url("https://storage.perfectcdn.com/q3i1fa/403jj63ql0zrti77.woff2") format("woff2");
        }

  :root {
            --panel-font-family: IRANYekanX, system-ui, -apple-system, "Segoe UI", sans-serif;
        }

        html,
        body {
            font-family: var(--panel-font-family) !important;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
              transition: 200ms;
        }

        body :where(
            button,
            input,
            textarea,
            select,
            option,
            label,
            a,
            p,
            span,
            div,
            nav,
            aside,
            header,
            main,
            section,
            article,
            table,
            thead,
            tbody,
            tr,
            th,
            td,
            strong,
            em,
            small,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6
        ) {
            font-family: var(--panel-font-family);
        }

        .font-sans,
        .font-serif,
        .font-mono {
            font-family: var(--panel-font-family) !important;
        }

        .fa,
        .fas,
        .fa-solid {
            font-family: "Font Awesome 6 Free" !important;
            font-weight: 900 !important;
        }

        .far,
        .fa-regular {
            font-family: "Font Awesome 6 Free" !important;
            font-weight: 400 !important;
        }

        .fab,
        .fa-brands {
            font-family: "Font Awesome 6 Brands" !important;
            font-weight: 400 !important;
        }

/* ===================================
             end fonts
=================================== */








/* ===================================
             start roots
=================================== */

:root {
  --box-border-hover-homo-background:#CBD5E1;
  --box-border-hover-hetero-background:#CBD5E1;
  --text-small-htpochrome:#6b7280;
  --sucses-background: #49ca9d38;
  --alert-text-color:#DC2626;
  --alert-background:#FEF2F2;
  --text-coloe-0F172A-F8FAFC:#0F172A;
  --background-fill-box:#ffffff;
  --background-wallpaper:#f8fafc;
  --background-main:#ffffff;
  --border-middle-dark-and-light:#e2e8f0;
  --border-intra-dark-and-light:#E2E8F0;
  --auth-field-bg: #FFFFFF;
  --auth-field-border-default: #E2E8F0;
  --auth-field-border-hover: #CBD5E1;
  --auth-field-text: #1F2937;
  --auth-field-placeholder: #64748B;
  --auth-field-placeholder-opacity: 0.84;
  --auth-field-focus-border: #10B981;
  --auth-field-focus-ring: rgba(16, 185, 129, 0.34);
  --auth-field-focus-ring-soft: rgba(16, 185, 129, 0.22);
  --auth-field-complete-border: rgba(16, 185, 129, 0.46);
  --auth-field-complete-border-hover: rgba(16, 185, 129, 0.62);
  --auth-field-hover-ring: rgba(148, 163, 184, 0.08);
  --auth-field-error-border: #EF4444;
  --auth-error-bg: #FEF2F2;
  --auth-error-text: #DC2626;
  --auth-success-bg: #ECFDF5;
  --auth-success-text: #059669;
  --auth-link-default: #4B5563;
  --auth-link-hover: #10B981;
  --auth-link-active: #065F46;
  --auth-primary-button-bg: #10B981;
  --auth-primary-button-bg-hover: #059669;
  --auth-primary-text: #0F172A;
  --auth-secondary-text: #4B5563;
  --auth-transition-fast: 200ms ease;
  --auth-transition: 220ms ease;
}

.dark {
  --auth-primary-button-bg: rgb(5 150 105 / var(--tw-bg-opacity, 1));
  --auth-primary-button-bg-hover: #10B981;
  --box-border-hover-homo-background:#5c6573 ;
  --box-border-hover-hetero-background:#80808085;
  --text-small-htpochrome:#9ca3af;
  --sucses-background:#15b98136;
  --alert-text-color:#FEF2F2;
  --alert-background:#ef444452;
  --text-coloe-0F172A-F8FAFC:#F8FAFC;
  --background-wallpaper:#0F172A;
  --background-main:#1E293B;
  --background-fill-box:#0B1220;
  --border-middle-dark-and-light:#334155;
  --border-intra-dark-and-light:#475569;
  --auth-field-bg: #0B1220;
  --auth-field-border-default: #263244;
  --auth-field-border-hover: #334155;
  --auth-field-text: #FFFFFF;
  --auth-field-placeholder: #94A3B8;
  --auth-field-placeholder-opacity: 0.8;
  --auth-field-complete-border: rgba(52, 211, 153, 0.42);
  --auth-field-complete-border-hover: rgba(52, 211, 153, 0.56);
  --auth-field-hover-ring: transparent;
  --auth-error-bg: rgba(239, 68, 68, 0.3);
  --auth-error-text: #F87171;
  --auth-success-bg: rgba(16, 185, 129, 0.10);
  --auth-success-text: #34D399;
  --auth-link-default: #D1D5DB;
  --auth-link-active: #34D399;
  --auth-primary-text: #FFFFFF;
  --auth-secondary-text: #D1D5DB;
}
/* ===================================
             end roots
=================================== */











/* ===================================
             start general
=================================== */
hr{
			border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  			margin-top: 1rem !important;
   			margin-bottom: 1rem !important;
  			transition: 200ms; 			
}
.dark hr {
			border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}

.auth-helper-text {
  			color: var(--auth-secondary-text);
  			transition: 200ms;
}
input:focus {
  			outline: none;
}
.menu-icon{
  			transition: 200ms;
}
.titre-pages {
    		display: flex;
    		flex-direction: row;
    		justify-content: flex-start;
    		align-items: center;
    		padding: 0;
    		gap: 0px;
    		margin-bottom: 25px;
}
.titre-name-page {
    		width: auto;
    		height: 30px;
    		font-weight: 700;
    		font-size: 16px;
    		margin-bottom: -2px;
    		line-height: 30px;
    		display: flex;
    		align-items: center;
    		text-align: right;
    		color: #1e293b;
    		transition: 200ms;
  			margin-top:0px;
}
.dark .titre-name-page {
    		color: #fff;
}
.titre-icon-pages {
    		width: 20px;
    		height: 20px;
   	 		color: #1e293b;
}
.dark .titre-icon-pages {
    		color: #fff;
}
/*---pagination------*/
.orders-pagination {
    		display: flex;
    		flex-direction: row;
    		justify-content: center;
    		align-items: center;
    		margin-top: 1.5rem;
    		width: 100%;
}
.orders-pagination-link {
    		display: flex;
    		justify-content: center;
    		align-items: center;
    		width: 2.25rem;
    		height: 2.25rem;
    		border-radius: 0.375rem;
    		font-size: 0.875rem;
    		color: #1E293B;
    		text-decoration: none;
  			background: var(--background-main);
    		border: 1px solid var(--border-intra-dark-and-light);
    		border-radius: 0.5rem;
  			transition-duration: 600ms;
  			color: var(--text-coloe-0F172A-F8FAFC);
}
.orders-pagination-link--active {
    		background-color: #10B981;
    		color: #FFFFFF;
}
.orders-pagination-link:hover {
  			border-color: #10B981;
    		color: #10B981;
}
.orders-pagination-link:focus-visible {
			outline: none;
			border-color: #10B981;
			box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}
.orders-pagination-link--active:hover,
.orders-pagination-link--active:focus-visible {
			border-color: #10B981 !important;
			color: #FFFFFF !important;
			box-shadow: 0 6px 14px rgba(16, 185, 129, 0.14);
}
.dark .orders-pagination-link:focus-visible {
			border-color: #10B981;
			box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.16);
}
.dark .orders-pagination-link--active:hover,
.dark .orders-pagination-link--active:focus-visible {
			border-color: #10B981 !important;
			color: #FFFFFF !important;
			box-shadow: 0 8px 18px rgba(2, 6, 23, 0.2);
}
@media (max-width: 450px) {
   	.orders-pagination-link{
			width: 25px !important;
    		height: 25px !important;
    		font-size: 12px !important;
	}
}
@media (min-width: 1024px) {
    .titre-name-page {
        	font-size: 20px;
      		margin-top:8px;
    }
  	.titre-icon-pages {
    		width: 24px;
    		height: 24px;
   }
    .titre-pages{
			gap:5px;
   }
}
/* ===================================
             end general
=================================== */











/* ===================================
             start layout
=================================== */
.lg-aside-up-pages {
  			display: none;
  			width: 18rem;
  			background-color: #ffffff;
  			border-left: 1px solid transparent;
  			z-index: 1000;
  			transition: 200ms;
}
.dark .lg-aside-up-pages {
  			background-color: #1E293B;
  			border-left-color: #334155;
}
.header-pages {
    		flex: 1;
    		background: #fff;
    		border-bottom: 1px solid;
  			border-color: var(--border-middle-dark-and-light);
    		position: sticky;
    		top: 0;
    		transition: border-color 100ms, background-color 200ms, color 200ms;
  			z-index: 50;
}
.dark .header-pages {
    		background: #1E293B;
  
}
.lg-aside-lateral-pages {
    		display: none;
    		width: 18rem;
    		position: fixed;
    		top: 4rem;
    		bottom: 0;
    		background: #fff;
    		transition: 200ms;
}
.dark .lg-aside-lateral-pages {
    		background: #1E293B;
}
.btn-aside-lateral {
    		width: 100%;
    		font-weight: 600;
    		font-size: 0.85rem;
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		gap: 0.75rem;
    		padding: 0.75rem;
   			border: 1px solid;
   			border-color: var(--border-intra-dark-and-light);
   			border-radius: 0.5rem;
   			color: #0F172A;    		
            transition: border-color 100ms, background-color 200ms, color 200ms;
}
.dark .btn-aside-lateral {
    		color: #ebedef;
}
.btn-aside-lateral:hover {
    		background-color: #5fcf770d;
}
.dark .btn-aside-lateral:hover {
    		background-color: rgb(55 65 81 / 24%);
}
.nav-item {
    		display: flex;
    		align-items: center;
    		gap: 0.75rem;
    		padding-top: 0.7rem;
    		padding-bottom: 0.7rem;
    		padding-left: 0.75rem;
    		padding-right: 0.75rem;
    		border-radius: 0.6rem;
    		color: #374151;
}
.nav-item span{
			margin-top:6px;
}
.nav-item:hover {
    		background-color: #f3f4f6;
}
.dark .nav-item {
    		color: #d1d5db;
}
.dark .nav-item:hover {
   			background-color: #374151;
}
html[dir="ltr"] .nav-item {
    		flex-direction: row;
}
html[dir="ltr"] .nav-item span.mr-auto {
    		margin-right: 0;
    		margin-left: auto;
}
html[dir="ltr"] .nav-item svg {
    		order: 1;
}
html[dir="ltr"] .nav-item span {
    		order: 2;
}



@media (min-width: 1024px) {
  .lg-aside-up-pages {
    		display: block;
  }
  .lg-aside-lateral-pages {
        	display: block;
    }
}
/* ===================================
             end layout
=================================== */












/* ===================================
            start  drawer
=================================== */
 #drawer-bg{
   
			background-color: rgb(0 0 0 / 0.4);
   			--tw-backdrop-blur: blur(4px);
   			backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity)
 var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   			z-index: 20;
   			inset: 0px;
   			position: fixed;
   			opacity: 0;  
   			top: 65px;
			left: 0;
			right: 0;
			bottom: 0;
}
 #drawer {
            height: calc(100dvh - 65px) !important;
            overflow-y: scroll !important;
            -webkit-overflow-scrolling: touch;
            will-change: transform;
            backface-visibility: hidden;
            transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease;
            z-index: 30;
            width: 18rem;
            --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
             box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
             background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
              --tw-bg-opacity: 1;
          	 padding: 1.5rem;	
            --webkit-overflow-scrolling: touch;
            color: rgb(17 24 39 / var(--tw-text-opacity, 1));
           --tw-text-opacity: 1;
            transition: 200ms;
        }

 #drawer-bg.is-visible{
   			 opacity: 1;
 		  	 visibility: visible;
}
.drawer-item {
  			display: flex;
  			align-items: center;
  			padding: 0.5rem 0.75rem;
  			padding-right: 0.25rem;
  			border-radius: 0.75rem;
}

.drawer-item:hover {
  			background-color: #f3f4f6;
}
.drawer-item-div-svg {
  			width: 2.5rem;
  			height: 2rem;
  			display: flex;
  			align-items: center;
  			justify-content: center;
}
.drawer-item-svg {
  			color: #94A3B8;
  			flex-shrink: 0;
  			width: 24px;
    		height: 24px;
}
.drawer-item-span {
  			font-size: 0.96rem;
  			font-weight: 400;
  			color: #1E293B;
  			transition: 200ms;
            margin-top: 5px;
}
.mobileSettingsSubmenu-a {
    		display: flex;
    		align-items: center;
   		    padding-left: 0.75rem;
    		padding-right: 0.75rem;
    		padding-top: 0.5rem;
    		padding-bottom: 0.5rem;
    		border-radius: 0.75rem;
    		font-size: 0.90rem;
    		color: #374151;
  			transition: 200ms;   
}
.mobileSettingsSubmenu-a span{
			 margin-top: 4px;
}
.mobileSettingsSubmenu-a:hover {
    		background-color: #f3f4f6;
}
.mobileSettingsSubmenu-div {
    		width: 2.5rem;
    		height: 2rem;
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		color: #94A3B8;
    		flex-shrink: 0;
    		transition: 200ms;
}

/*LTR MODE drawer */

html[dir="ltr"] #drawer {
          left: 0;
          right: auto;
          transform: translateX(-100%);
}


/* باز است  LTR MODE drawer  وقتی  */

html[dir="ltr"] #drawer:not(.translate-x-full) {
          transform: translateX(0);
}



/*RTL MODE   drawer*/

html[dir="rtl"] #drawer {
          right: 0;
          left: auto;
          transform: translateX(100%);
}


/* باز است  RTL MODE   drawer  وقتی */

html[dir="rtl"] #drawer:not(.translate-x-full) {
          transform: translateX(0);
}

 /* وقتی تم دارک است */

 .dark #drawer{
          --tw-bg-opacity: 1;
          background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
          --tw-text-opacity: 1;
          color: rgb(243 244 246 / var(--tw-text-opacity, 1));
 }      
         
 #drawer.drawer-closing {
          pointer-events: none;
 }

 @supports not (height: 100dvh) {
   #drawer {
           height: calc(100vh - 65px) !important;
            }
  }


#drawerTheme{
  			width: 2.5rem;
  			height: 2.5rem;
			color: rgb(51 65 85 / var(--tw-text-opacity, 1));
  			background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  			border-width: 1px;
  			border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
  			border-radius: 0.5rem;
  			display: flex;
  			justify-content: center;
  			align-items: center;
  			margin-bottom: 1.5rem; 
  			transition: 200ms;
}

.dark #drawerTheme{
  			background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
			color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  			border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}
.dark .drawer-item:hover {
  			background-color: rgb(255 255 255 / 5%);
}
.dark .drawer-item-svg {
  			color: #ebedef;
}
.dark .drawer-item-span {
  			color: #F8FAFC;
}
.dark .mobileSettingsSubmenu-a {
    		color: #d1d5db;
}
.dark .mobileSettingsSubmenu-a:hover {
    		background-color: #374151;
}
.dark .mobileSettingsSubmenu-div {
    		color: #ebedef;
}

/* ===================================
            end    drawer
=================================== */

      







/* ===================================
   start navbar sign in and signup
=================================== */
.navbar-sigin-signup {
  			width: 100%;
  			padding:1rem;
   			background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
			border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));	
  			border-bottom-width: 1px;
  			display: flex;
  			justify-content: space-between;
  			align-items: center;
  			z-index: 40;
  			position: fixed;
  			top: 0;
			left: 0;
			right: 0;	
  			transition: 200ms;
}
.dark .navbar-sigin-signup{
			background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  			border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}

/* ===================================
   end navbar sign in and signup
=================================== */










/* ===================================
    start box sign in and signup
=================================== */

/* ========= genarel ========= */

.box-signin-signup{
			background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  			display: flex;
    		justify-content: center;
   			align-items: center;
    		transition: 200ms;
  			border-width: 1px;
  			border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  			border-radius: 1rem;		
}
.dark .box-signin-signup{
			background-color: rgba(30, 41, 59, 0.5);
  			--tw-backdrop-blur: blur(12px);
  			border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));	
}

.js-interactive-field,
.ui-submit-btn,
.ui-toggle-btn,
.remember-option,
.remember-checkbox,
.remember-text,
.login-inline-link {
  			transition: color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease, opacity 200ms ease;
}

.auth-error-alert {
  			margin-bottom: 1rem;
  			font-size: 0.75rem;
  			border-radius: 8px;
  			padding: 0.75rem 1rem;
  			background-color: var(--alert-background) ;
  			color: var(--alert-text-color);
  			transition: 200ms;
}
.auth-success-alert {
  			margin-bottom: 1rem;
  			font-size: 0.75rem;
  			border-radius: 0.5rem;
  			padding: 0.75rem 1rem;
  			background-color:var(--sucses-background);
  			color: #059669;
      		transition: 200ms;
}
.dark .auth-success-alert {
  			color: #34d399;
}


.js-interactive-field {
    		width: 100%;
    		border-radius: 0.5rem;
    		padding-left: 1rem;
    		padding-right: 1rem;
    		padding-top: 7px;
    		padding-bottom: 7px;
    		height: 2.75rem;
    		font-size: 0.75rem;
    		line-height: 1.25rem;
    		background-color: #ffffff;
    		color: #1f2937;
    		border: 1px solid var(--border-middle-dark-and-light);
   			text-align: left;
}
.dark .js-interactive-field {
    		background-color: #0B1220;
    		color: #ffffff;
}

/*    sign remember     */

.remember-signin{
    		display: flex;
    		justify-content: space-between;
    		align-items: center;
   		 	font-size: 0.875rem; /* 14px */
    		color: #0F172A;
}
.dark .remember-signin{
   			 color: #ffffff;
}
.remember-option {
  			display: inline-flex;
  			align-items: center;
  			gap: 0.625rem;
  			padding: 0;
  			margin-inline-start: 0;
  			background-color: transparent;
  			color: inherit;
  			line-height: 1;
  			user-select: none;
  			color: #0F172A;
  			cursor: pointer;
}

.remember-option:focus-within {
  			color: inherit;
 			background-color: transparent;
}

.dark .remember-option:focus-within {
  			background-color: transparent;
  			color: #FFFFFF;
}
.remember-checkbox {
  			appearance: none;
  			-webkit-appearance: none;
  			width: 18px;
  			height: 18px;
  			margin: 0;
  			flex: 0 0 18px;
  			display: inline-grid;
 			place-content: center;
  			border: 1.5px solid #CBD5E1;
  			border-radius: 0.4rem;
  			background-color: #ffffff;
        	cursor: pointer;
  			box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.03);
}

.dark .remember-checkbox {
 			 border-color: rgba(148, 163, 184, 0.5);
  			background-color: #0B1220;
}

.remember-checkbox::after {
  			content: "";
  			width: 5px;
  			height: 9px;
  			border: solid #ffffff;
  			border-width: 0 2px 2px 0;
  			transform: rotate(45deg) scale(0.82);
  			opacity: 0;
}

.remember-checkbox:hover {
  			border-color: rgba(16, 185, 129, 0.58);
  			box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.08);
}

.dark .remember-checkbox:hover {
  			border-color: rgba(52, 211, 153, 0.72);
}

.remember-checkbox:checked {
  			border-color: #10B981;
  			background-color: #10B981;
  			box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.14);
}

.remember-checkbox:checked::after {
  			opacity: 1;
}

.remember-checkbox:focus-visible {
  			outline: none;
  			box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}
.remember-text {
  			font-weight: inherit;
  			letter-spacing: normal;
  			display: inline-flex;
  			align-items: center;
  			color: #4B5563;
      		margin-top:4%;
  			font-size: 0.875rem;
}
.dark .remember-text {
  			color: #D1D5DB;
}
.auth-primary-button {
  			background-color: var(--auth-primary-button-bg);
  			color: #FFFFFF;
  			transition :300ms ;
  			padding: 9px 20px;
   			font-size: 16px;
  			width: 100%;
    		border-radius: 6px;
  			margin-top: 0 !important;
}
.auth-primary-button:hover,
.auth-primary-button:focus-visible {
 			background-color: var(--auth-primary-button-bg-hover);
  			transform: none;
}
.login-inline-link {
  			text-decoration: none;
  			opacity: 1;
  			color: #10B981;
  			transition: color 200ms ease, opacity 200ms ease;
}
.login-inline-link:hover,
.login-inline-link:focus-visible {
  			color: var(--auth-primary-button-bg-hover);
  			opacity: 0.96;
  			text-decoration: none;
}
.dark .login-inline-link:hover,
.dark .login-inline-link:focus-visible {
  			color: var(--auth-primary-button-bg-hover);
}
.login-inline-link:active {
  			color: var(--auth-primary-button-bg-hover);
  			opacity: 1;
}
.dark .login-inline-link:active {
 			color: var(--auth-primary-button-bg-hover);
}
.login-inline-link:focus-visible {
  			color: var(--auth-primary-button-bg-hover);
  			outline: none;
  			box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.12);
  			border-radius: 0.25rem;
}
.box-or-khat-signin-signup {
    		display: flex;
    		align-items: center;
    		gap: 1rem;          /* gap-4 = 16px */
    		margin-top: 1.5rem; /* my-6 = 24px */
    		margin-bottom: 1.5rem;
}
.khat-signin-signup {
    		flex-grow: 1;
    		height: 1px;
    		background-color: #E2E8F0;
  			transition: 200ms;
}
.or-signin-signup {
    		transition: 200ms;
    		color: #0F172A;
    		font-size: 1rem;        /* text-base = 16px */
    		font-weight: 500;       /* font-medium */
}
.dark .or-signin-signup {
    		color: #ffffff;
}

.dark .khat-signin-signup {
    		background-color: rgba(255, 255, 255, 0.1);
}
.btn-sign-eae-icon{
			 position: absolute;
    		 top: 50%;
 		     right: 0.75rem; /* 12px */
  		     transform: translateY(-50%);
    	  	 cursor: pointer;
    		 transition: color 200ms ease-out;
  			 box-shadow: none;
}
.btn-sign-eae-icon:hover svg {
  			color: #10B981;
}
.btn-sign-eae-icon:focus-visible {
  			border-radius: 0.5rem;
  			box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}
.sign-eae-icon{
			width: 1.25rem;      /* 20px */
    		height: 1.25rem;     /* 20px */
    		color: #CBD5E1;
}
.dark .sign-eae-icon{
    		color: #9CA3AF;      /* gray-400 */
}

/*  reset pass*/ 
.reset-card {    		
    		border-radius: 1rem; /* rounded-2xl */  		
    		background-color: #FFFFFF;
    		border: 1px solid #E2E8F0;
  			transition: 200ms;
}
.dark .reset-card{
            background-color: rgba(30, 41, 59, 0.5);
  			border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.reset-card .auth-page-title {
  			font-size: 20px;
  			line-height: 30px;
  			font-weight: 700;
  			color: #0F172A;
  			transition: 200ms;
}

.dark .reset-card .auth-page-title {
  			color: #FFFFFF;
}

.reset-card .reset-help-copy {
  			transition: 200ms;
  			font-size: 11px;
  			line-height: 22px;
  			font-weight: 400;
  			color: #4B5563;
}

.dark .reset-card .reset-help-copy {
  			color: #FEFCE8;
}

/*    btn google     */
 .custom-google-wrapper {
  			position: relative;
  			width: 100%;
 			max-width: 390px;
  			height: 48px;
  			margin: 0 auto; /* اگر می‌خواید وسط باشه */
}
.your-custom-google-btn {
  			display: flex;
  			align-items: center;
  			justify-content: center;
  			gap: 12px;
  			width: 100%;
  			padding: 9px 20px;
  			border-radius: 6px;
  			border: 1px solid var(--border-middle-dark-and-light);
  			background-color: #ffffff;
  			color: #0F172A;
  			font-size: 15px;
  			font-weight: 400;
  			cursor: pointer;
  			transition: all 0.2s ease;
  			pointer-events: none; /* مهم: کلیک به لایه گوگل بره */
}
.dark .your-custom-google-btn{
			background-color: #0B1220;
    		color: #F8FAFC;
}
.custom-google-wrapper:hover .your-custom-google-btn {
  			border-color: var(--box-border-hover-hetero-background);
  			transition-duration: 300ms;
}
.google-official-overlay,
#googleSignupBtn,
#googleSignupBtn > div,
#googleSignupBtn iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
}


.google-icon {
  			flex-shrink: 0;
}
/* لایه شفاف گوگل که کل دکمه رو می‌پوشاند */
.google-official-overlay {
  			position: absolute;
  			top: 0;
  			left: 0;
  			width: 100%;
  			height: 100%;
  			opacity: 0;
  			overflow: hidden;
  			z-index: 2;
  			cursor: pointer;
}
#googleSignupBtn {
  			width: 100% !important;
  			height: 100% !important;
}
#googleSignupBtn > div {
  			width: 100% !important;
  			height: 100% !important;
  			margin: 0 !important;
}




/* ========= Base (Mobile) ========= */
.box-signin-signup{
			width:100%;
  			padding:16px;
}
.inbox-signin-signup{
			width: 100%;
}
.auth-primary-button{
  			height:40px;
}

/*  reset pass   */
.reset-card{
			width:100%;
  			padding:16px;		
}
.reset-card-box{
  			width: 100%;
   }
.your-custom-google-btn{
			height:40px;	
}
    
/*=====================================
========= desktap and tablet  =========
=======================================*/
@media (min-width: 500px) {
  .box-signin-signup{
			width: fit-content;
    		padding: 32px;
  }
  .inbox-signin-signup{
			width: 359px;
}
  .auth-primary-button{
			height: min-content;
}
  .js-interactive-field {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        height: auto;
        font-size: 0.9rem;
    }
  .box-or-khat-signin-signup {
        margin-top: 1rem;    /* sm:my-4 = 16px */
        margin-bottom: 1rem;
    }
  
  /* reset pass*/
  .reset-card{
			width: fit-content;
    		padding: 32px;
    }
  .reset-card-box{
  			width: 359px;
   }
  .reset-card .reset-help-copy {
  			font-size: 13px;
}
  .reset-card .auth-page-title{
  			font-size: 22px;
  }
  .your-custom-google-btn{
			height: min-content;	
}

}




/* ===================================
    end box sign in and signup
=================================== */










/* ===================================
            start new orders
=================================== */
.order-page-preload #order-form,
	.order-page-preload #order-form *,
	.order-page-preload .chosen-container,
	.order-page-preload .chosen-container *,
	.order-page-preload .select2-container,
	.order-page-preload .select2-container *,
	.order-page-preload .emerald-field-shell,
	.order-page-preload .emerald-field-control {
			transition: none !important;
			animation: none !important;
}
.neworder-box{
    		width: 100%;
    		background:var( --background-main);
    		border: 1px solid var( --border-middle-dark-and-light);
    		border-radius: 1rem;
    		box-sizing: border-box;
			transition: border-color 100ms, background-color 200ms, color 200ms;
}
.neworder-box-div-social {
    		display: grid;
    		grid-template-columns: repeat(2, minmax(0, 1fr));
    		justify-content: space-between;
    		align-items: center;
    		gap: 1rem;
    		width: 100%;
}
.order-social-tab {
    		display: flex;
    		flex-direction: row;
    		justify-content: center;
    		align-items: center;
    		padding: 12px;
    		gap: 8px;
    		width: 100%;
    		height: 56px;
   		 	background:var( --background-main);
    		border: 1px solid var(--border-intra-dark-and-light);
    		border-radius: 0.5rem;
    		box-sizing: border-box;
    		cursor: pointer;
			transition-duration: 600ms;
  			color:var(--text-coloe-0F172A-F8FAFC);
}
.order-social-tab:hover {
    		border-color: #10B981;
    		color: #10B981;
}
/* حالت فعال */
.order-social-tab-active {
  			display: flex;
    		flex-direction: row;
    		justify-content: center;
    		align-items: center;
    		padding: 12px;
    		gap: 8px;
    		width: 100%;
    		height: 56px;
  			border: 1px solid  #10B981;
    		border-radius: 0.5rem;
    		color: #10B981;
  			cursor: pointer;
}

/*-------------------chosen cintainer----------------*/

.chosen-container {

}
.chosen-single {
			height: 44px !important;
			padding: 7px 16px !important;
    		border: 1px solid var(--border-intra-dark-and-light) !important;
			border-radius: 0.5rem !important;
			background: transparent !important;
			box-shadow: none !important;
			line-height: normal !important;
			display: flex !important;
			align-items: center !important;
			color: #64748B !important;
			font-size: 0.75rem !important;
			outline: none !important;
			transform: none !important;
  			transition: border-color 100ms, background-color 200ms, color 200ms !important;
}

.lable-form-neworder {
    		font-size: 0.75rem;       
    		font-weight: 400;       
    		color: var(--text-coloe-0F172A-F8FAFC) !important;
    		width: 100%;           
    		text-align: left;       
 			 transition:color 200ms !important;
}
.chosen-single span {
			margin-right: 0 !important;
			line-height: normal !important;
			padding: 0 !important;
			color:var(--text-small-htpochrome) !important;
			font-size: 0.75rem !important;
			width: 100% !important;
			white-space: nowrap !important;
			overflow: hidden !important;
			text-overflow: ellipsis !important;
			text-align: left !important;
   			transition:  color 200ms !important;
}
.chosen-container-single .chosen-single div {
			top: 50% !important;
			right: 16px !important;
			transform: translateY(-50%) !important;
			width: auto !important;
  			transition:  color 200ms !important;
}
.chosen-container-single .chosen-single div b {
			background: none !important;
			position: relative;
}
.chosen-container-single .chosen-single div b:after {
			content: '';
			position: absolute;
			top: 50%;
			right: 0;
			width: 0;
			height: 0;
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-top: 4px solid #64748B;	
}
.chosen-container-active.chosen-with-drop .chosen-single div b:after {
			border-top: none;
			border-bottom: 4px solid #64748B;
}
.dark .chosen-container-single .chosen-single div b:after {
			border-top-color: #CBD5E1;
}
.dark .chosen-container-active.chosen-with-drop .chosen-single div b:after {
			border-bottom-color: #CBD5E1;
}
.chosen-container .chosen-drop {
      		background: var(--background-main) !important;
    		border: 1px solid var(--border-intra-dark-and-light) !important;
			border-radius: 0.5rem !important;
			margin-top: 4px !important;
			box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
			overflow: hidden !important;
			width: 100% !important;
			max-width: 100% !important;
			box-sizing: border-box !important;
			z-index: 1060 !important;
      		transition: border-color 100ms, background-color 200ms, color 200ms !important;
}
.chosen-container .chosen-results {
			padding: 0 !important;
			margin: 0 !important;
			max-height: 304px !important;
			overflow-x: hidden !important;
			overflow-y: auto !important;
			-webkit-overflow-scrolling: touch;
}
.chosen-container .chosen-results li {
			padding: 8px 16px !important;
			font-size: 0.75rem !important;
			line-height: normal !important;
			color: #0f172a !important;
			cursor: pointer !important;
			white-space: nowrap !important;
			overflow: hidden !important;
			text-overflow: ellipsis !important;
}
.chosen-container .chosen-results li.highlighted {
			background: #f1f5f9 !important;
			color: #0f172a !important;
}
.chosen-container .chosen-results li.result-selected {
			background: #f1f5f9 !important;
			color: #0f172a !important;
}
.chosen-container .chosen-search {
			display: none !important;
			padding: 0 !important;
}
.chosen-container .chosen-search input {
			padding: 8px !important;
			border: 0.5px solid #e2e8f0 !important;
			border-radius: 0.375rem !important;
			font-size: 0.75rem !important;
			background: white !important;
			width: 100% !important;
			box-sizing: border-box !important;
}
.dark .chosen-container .chosen-drop {
			background: #1E293B !important;
			border-color: #475569 !important;
}
.dark .chosen-container .chosen-results li {
			color: #F8FAFC !important;
			background: #1E293B !important;
}
.dark .chosen-container .chosen-results li.highlighted {
			background: #334155 !important;
			color: white !important;
}
.dark .chosen-container .chosen-results li.result-selected {
			background: #334155 !important;
			color: #f8fafc !important;
}
.dark .chosen-container .chosen-search input {
			background: #1E293B !important;
			border-color: #475569 !important;
			color: #F8FAFC !important;
}

	

/*---------------select 2 container---------------*/

 .select2-selection--single{
			height: 44px !important;
    		padding: 7px 16px !important;
    		border: 1px solid var(--border-intra-dark-and-light) !important;
    		border-radius: 0.5rem !important;
    		background: transparent !important;
    		box-shadow: none !important;
    		line-height: normal !important;
    		display: flex !important;
    		align-items: center !important;
    		color: #64748B !important;
    		font-size: 0.75rem !important;
    		outline: none !important;
    		transform: none !important;
    		transition: border-color 100ms, background-color 200ms, color 200ms !important;
   			-webkit-user-select: none  !important;
			user-select: none  !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
			margin-right: 0 !important;
    		line-height: normal !important;
    		padding: 0 !important;
    		color: var(--text-small-htpochrome) !important;
    		font-size: 0.75rem !important;
    		width: 100% !important;
    		white-space: nowrap !important;
    		overflow: hidden !important;
    		text-overflow: ellipsis !important;
    		text-align: left !important;
    		transition: color 200ms !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
			position: absolute !important;
			top: 22px !important;
			{% if site['rtl'] %}left{% else %}right{% endif %}: 16px !important;
			transform: none !important;
			height: 0 !important;
			width: auto !important;
}
.select2-container--open .select2-selection--single .select2-selection__arrow {
	
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
			border-color: #64748B transparent transparent transparent !important;
			border-width: 4px 4px 0 4px !important;
			margin-left: -13px !important;
			margin-top: -2px !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
			border-color: transparent transparent #64748B  transparent !important;
			border-width: 0 4px 4px 4px !important;
}
.dark .select2-container--default .select2-selection--single .select2-selection__arrow b {
			border-color: #CBD5E1 transparent transparent transparent !important;
			border-width: 4px 4px 0 4px !important;
			margin-left: -13px !important;
			margin-top: -2px !important;
}
.dark .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
			border-color: transparent transparent #CBD5E1  transparent !important;
			border-width: 0 4px 4px 4px !important;
}
.select2-container--default .select2-selection--single .select2-selection__clear,
.select2-container--default .select2-selection__clear,
.select2-selection__clear {
			display: none !important;
}
.select2-dropdown {
			display: block !important;
			border: 0.5px solid #e2e8f0 !important;
			border-radius: 0.5rem !important;
			margin-top: 4px !important;
			box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
			overflow: hidden !important;
			max-width: calc(100vw - 32px) !important;
			box-sizing: border-box !important;
			z-index: 1060 !important;
}
.select2-results__options {
			max-height: 304px !important;
			overflow-x: hidden !important;
			overflow-y: auto !important;
			-webkit-overflow-scrolling: touch;
}
.select2-results__option {
  			background: var( --background-main) !important;
			padding: 8px 16px !important;
			font-size: 0.75rem !important;
			cursor: pointer !important;
			white-space: nowrap !important;
			overflow: hidden !important;
			text-overflow: ellipsis !important;
}
.select2-results__option--highlighted[aria-selected] {
			background: #f1f5f9 !important;
			color: #0f172a !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
			background: #f1f5f9 !important;
			color: #0f172a !important;
}
.select2-search__field-icon {
			display: none;
}
.select2-search--dropdown {
			display: none !important;
			padding: 0 !important;
}
.select2-search--dropdown .select2-search__field {
			padding: 6px 8px !important;
			border: 0.5px solid #e2e8f0 !important;
			border-radius: 0.375rem !important;
			font-size: 0.75rem !important;
			outline: none !important;
			color: #0f172a !important;
			width: 100% !important;
}
.select2-container {
			z-index: 1;
}
.select2-container--open,
.chosen-container-active {
			z-index: 1050 !important;
}
.select2-container.order-dropdown-active,
.chosen-container.order-dropdown-active {
			z-index: 1060 !important;
}
/* Match border weight for selected order fields */
#orderform-service-type_chosen .chosen-single,
#orderform-service_chosen .chosen-single,{
			border-width: 1px !important;
}
.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
			color: #CBD5E1 !important;
}
.dark .select2-dropdown {
  			border-color: #475569 !important;
}
.dark .select2-results__option {
			color: #F8FAFC !important;
}
 .select2-results__option a{
     	    padding:0;
    		color: #0f172a !important;
}
.dark .select2-results__option a{
   			color: #F8FAFC !important;
}
.dark .select2-results__option--highlighted[aria-selected] {
			background: #334155 !important;
			color: white !important;
}
.dark .select2-container--default .select2-results__option[aria-selected=true] {
			background: #334155 !important;
			color: #f8fafc !important;
}
.dark .select2-search--dropdown .select2-search__field {
			background: #1E293B !important;
			border-color: #475569 !important;
			color: #F8FAFC !important;
}

/*-----------------service-details----------------*/

.service-details {
  			flex-direction: column;
  			justify-content: flex-start;
  			align-items: flex-end;
  			padding: 1rem;
  			gap: 0.625rem;
  			width: 100%;
  			height: fit-content;
  			background-color: var(--background-main);
  			border: 0.5px solid var(--border-intra-dark-and-light);
  			border-radius: 1rem;
  			transition: border-color 100ms, background-color 200ms, color 200ms !important;
}

/*---------------feilds--------------*/
/* =========================================
   Disable Chrome Autofill Styles
  

.emerald-field-shell-input:-webkit-autofill,
.emerald-field-shell-input:-webkit-autofill:hover,
.emerald-field-shell-input:-webkit-autofill:focus,
.emerald-field-shell-input:-webkit-autofill:active,
.emerald-field-control:-webkit-autofill,
.emerald-field-control:-webkit-autofill:hover,
.emerald-field-control:-webkit-autofill:focus,
.emerald-field-control:-webkit-autofill:active {
    -webkit-text-fill-color: #CBD5E1 !important;
    -webkit-box-shadow: 0 0 0 1000px #0B1220 inset !important;
    box-shadow: 0 0 0 1000px #0B1220 inset !important;

    background-color: #0B1220 !important;
    background-image: none !important;

    border: none !important;
    outline: none !important;
    transition: background-color 9999s ease-in-out 0s !important;
}



.emerald-field-shell-input:-webkit-autofill,
.emerald-field-shell-input:-webkit-autofill:hover,
.emerald-field-shell-input:-webkit-autofill:focus,
.emerald-field-shell-input:-webkit-autofill:active,
.emerald-field-control:-webkit-autofill,
.emerald-field-control:-webkit-autofill:hover,
.emerald-field-control:-webkit-autofill:focus,
.emerald-field-control:-webkit-autofill:active {
    -webkit-text-fill-color: #64748B !important;
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    background-color: #FFFFFF !important;
} ========================================= */

.emerald-field-shell {
  			display: flex;
 			flex-direction: row;
 			justify-content: space-between;
  			align-items: center;
  			padding: 7px 1rem;
  			width: 100%;
  			height: 44px;
  			border: 1px solid var(--border-intra-dark-and-light) !important;
 			border-radius: 0.5rem;
 			margin-top: 3px;
  			background-color:transparent !important;
  			box-shadow: none !important;
  			transition: border-color 100ms, background-color 200ms, color 200ms !important;
  			transform: none !important;
}


#fields .form-group.fields input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.hidden):not(.emerald-unstyled),
#fields .form-group.fields textarea,
#fields .form-group.fields select {
			display: flex;
    		flex-direction: row;
    		justify-content: space-between;
    		align-items: center;
    		padding: 7px 1rem;
    		width: 100%;
    		height: 44px;
    		border: 1px solid var(--border-intra-dark-and-light) !important;
    		border-radius: 0.5rem;
    		margin-top: 3px;
    		background-color: transparent !important;
    		box-shadow: none !important;
    		transition: border-color 100ms, background-color 200ms, color 200ms !important;
    		transform: none !important;
}
}
#fields .form-group.fields textarea {
			min-height: 120px;
			resize: vertical;
}

/*----------------min-max----------------*/

#fields .minmax-box {
    		display: flex;
    		flex-direction: row;
    		justify-content: flex-start;
    		align-items: center;
      		padding: 0.5rem;
    		width: 100%;
    		height: 34px;
   			background-color: #f8fafc;
   			border: 0.5px solid #e2e8f0;
    		border-radius: 0.5rem;    
    		margin-top: 0.8rem;
  			transition:0ms !important;
}
.dark #fields .minmax-box {
    		background-color: #0B1220 !important;
 	   		border-color: #334155 !important;
}
.minmax-box-span {
    		font-size: 0.75rem;
    		line-height: 1rem;
    		font-weight: 400;
    		color: #475569;
    		text-align: start;
  			transition: color 200ms !important;
}
.dark .minmax-box-span {
    		color: #CBD5E1;	
}

/*------------------box-dollar------------------*/

.box-dollar-new-order {
    		transition: 200ms;   
    		display: flex;
    		flex-direction: row;
    		justify-content: center;
    		align-items: center;    
    		padding:7px 1rem;   
    		width: 100%;
    		height: 44px;
  			background-color: rgb(34 197 94 / 0.1);
    		border-radius: 0.5rem;
}
.box-dollar-new-order-span {
    		font-size: 1rem;
    		line-height: 1.5rem;
   			font-weight: 700;
   		 	color: #15803D;
  			transition: color 200ms !important;
}
.dark .box-dollar-new-order-span {
    		color: #4ADE80;
}

/*-----------btn-new-order--------------*/

.order-submit-btn {
    text-align: center;
    background-color: var(--auth-primary-button-bg);
    color: #FFFFFF;
    transition: 300ms;
    padding: 7px 16px;
    font-size: 16px;
    height: 38px;
    border-radius: 6px;
  	width: 140px;
}
.order-submit-btn:hover, .order-submit-btn:focus-visible {
    background-color: var(--auth-primary-button-bg-hover);
    transform: none;
}

/*----------------------min whith 768px-----------------------*/


@media (min-width: 768px) {
    .neworder-box-div-social {
        	grid-template-columns: repeat(3, minmax(0, 1fr));
    }
   .service-details {
     		padding: 1.5rem;
    }
  
}
@media (min-width: 1024px) {
    .neworder-box-div-social {
        	display: flex;
       		flex-direction: row;
        	flex-wrap: nowrap;
    }
}
/* ===================================
            end new orders
=================================== */











/* ===================================
          start  services
=================================== */
.social-tab{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px;
    gap: 6px;
    width: 100%;
    height: min-content;
    background: var(--background-main);
    border: 1px solid var(--border-intra-dark-and-light);
    border-radius: 0.5rem;
    box-sizing: border-box;
    cursor: pointer;
  	transition-duration: 600ms;
    color: var(--text-coloe-0F172A-F8FAFC);
}
.social-tab:hover {
    border-color: #10B981;
    color: #10B981;
}
.active-social-tab {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px;
    gap: 6px;
    width: 100%;
    height: min-content;
    border: 1px solid #10B981;
    border-radius: 0.5rem;
    color: #10B981;
}
.social-tab-activee i {
 color:red !important;
}
.services-grid {
    display: grid;
    gap: 1rem;

    /* کمتر از 640px → حداکثر 1 ستون */
    grid-template-columns: repeat(
        auto-fit,
        minmax(100%, 1fr)
    );
}
@media (min-width: 640px) {
    .services-grid {
        /* 640 تا 768 → حداکثر 2 ستون */
        grid-template-columns: repeat(
            auto-fit,
            minmax(calc((100% - 1rem) / 2), 1fr)
        );
    }
}
@media (min-width: 768px) {
    .services-grid {
        /* 768 تا 1024 → حداکثر 3 ستون */
        grid-template-columns: repeat(
            auto-fit,
            minmax(calc((100% - 2rem) / 3), 1fr)
        );
    }
}

/*--------------------services box--------------------*/

.services-desktop-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding: 1.5rem;
    gap: 0.5rem;
    width: 100%;
    background: var(--background-main);
    border: 1px solid var(--border-middle-dark-and-light);
    border-radius: 1rem;
    box-sizing: border-box;
    transition: border-color 100ms, background-color 200ms, color 200ms;
}
.services-desktop-box-category{
  	background-color: transparent;
    transition: 0ms;
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    margin-bottom: 1rem;
    align-self: stretch;
  	transition: border-color 200ms, background-color 200ms, color 200ms;
}
.services-desktop-box-category-text {
    margin-top: 5px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
    color: #111827;
}
.dark .services-desktop-box-category-text {
    color: #e2e8f0;
}
.services-table-native-scroll{
  width: 100%;
  overflow: visible !important;
}
#services-desktop table {
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}
.services-table-thead-tr {
    transition: 0ms;
    font-weight: 500;
    padding: 0.75rem;
    height: 3.5rem;
    background-color: #f1f5f9;
    color: #0f172a;		
  	border-bottom: 0 !important;
    box-shadow: none !important;
    transition: border-color 100ms, background-color 100ms, color 100ms;
}
.dark .services-table-thead-tr{
    background-color: #334155;
    color: #e2e8f0;
}
.services-table-th {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    color: #374151;
  	border-bottom: 0 !important;
    box-shadow: none !important;
  	overflow: hidden;
    white-space: nowrap;
  	text-align: center;
}
.dark .services-table-th {
    color: #cbd5e1;
}
.services-table-tbody-tr {
  	transition-duration: 300ms;
}
.services-table-tbody-tr:hover {
    background-color: #f8fafc;
}
.dark .services-table-tbody-tr {
    border-bottom-color: #334155;
}
.dark .services-table-tbody-tr:hover {
    background-color: rgb(51 65 85 / 40%);
}
#services-desktop tbody tr:last-child {
  border-bottom: 0 !important;
}
#services-desktop tbody td {
  box-shadow: none !important;
}
#services-desktop table td {
  			overflow: hidden;
  			white-space: nowrap;
  			padding: 15px 10px;
}
.service-buy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    margin-left: auto;
    margin-right: auto;
    transition-property: background-color, color, border-color, opacity;
    transition-duration: 200ms;
    will-change: auto !important;
}
.service-buy-btn:hover {
    background-color: #f3f4f6;
}
.dark .service-buy-btn:hover {
    background-color: #334155;
}
.service-buy-btn,
.service-buy-btn:hover,
.service-buy-btn:focus,
.service-buy-btn:active {
    transform: none !important;
    scale: 1 !important;
}
#services-desktop table td div.truncate {
  	overflow: hidden;
  	text-overflow: ellipsis;
  	white-space: nowrap;
}
#services-page-root,
#services-desktop,
#services-mobile,
.service-category-desktop,
.service-category-mobile {
  	overflow: visible !important;
}
#serviceModal,
#modalShell {
  overflow: visible !important;
}
@media (max-width: 768px) {
  #serviceModal .relative > div > div {
    margin: 0 auto;
  }
}

/* ===================================
          end  services
=================================== */












/* ===================================
          start  ticket
=================================== */
.ticket-inline-card {
  			background: var(--background-main);
    		border: 1px solid var(--border-middle-dark-and-light);
    		border-radius: 1rem;
    		box-sizing: border-box;
    		transition: border-color 100ms, background-color 200ms, color 200ms;
  			padding: 24px 16px ;
  			margin-bottom: 1.5rem;
}
.ticket-form-container {
			background: transparent;
    		border: none;
   			box-shadow: none;
}
.ticket-inline-card .ticket-form-content > * + *,
.tickets-container #ticketsend-original .ticket-form-content > * + * {
			margin-top: 24px !important;
}
.control-label {
 			font-size: 0.75rem;
    		font-weight: 400;
    		color: var(--text-coloe-0F172A-F8FAFC) !important;
    		width: 100%;
    		text-align: left;
    		transition: color 200ms !important;
}
.input-wrapper{
    		display: flex;
    		flex-direction: column;
    		align-items: flex-end;
    		gap: 0.25rem;
}
/* Login-aligned field behavior for the inline Tickets form */
/* ============ Inline ticket form (Figma) ============ */



.tickets-container #ticketsend-original .ticket-form-content {
	row-gap: 24px;
}


.tickets-container #ticketsend-original .input-label {
	font-weight: 400;
	font-size: 12px;
	line-height: 20px;
	color: #1E293B;
}

.ticket-inline-card .input-field,
.ticket-inline-card #ticket-category-search,
.ticket-inline-card #ticket-category-search-original,
.tickets-container #ticketsend-original .input-field,
.tickets-container #ticketsend-original .custom-select-trigger,
.tickets-container #ticketsend-original #ticket-category-search,
.tickets-container #ticketsend-original #ticket-category-search-original {
	min-height: 44px;
	padding: 7px 16px;
	border-radius: 8px;
	border-color: #CBD5E1 !important;
	box-shadow: none;
}

.ticket-inline-card .input-field.min-h-\[116px\],
.tickets-container #ticketsend-original .input-field.min-h-\[116px\] {
	min-height: 116px;
	align-items: flex-start;
}

.ticket-inline-card .input-field input,
.ticket-inline-card .input-field textarea,
.ticket-inline-card .selected-value,
.tickets-container #ticketsend-original .input-field input,
.tickets-container #ticketsend-original .input-field textarea,
.tickets-container #ticketsend-original .selected-value {
	font-size: 12px;
	line-height: 20px;
}


.ticket-inline-card .ticket-cta-btn,
.tickets-container #ticketsend-original .ticket-cta-btn {
    min-height: 42px;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 18px;
    font-weight: 700;
    box-shadow: none;
}

.dark .tickets-container #ticketsend-original .input-label {
    color: #F8FAFC;
}

.dark .ticket-inline-card .input-field,
.dark .ticket-inline-card #ticket-category-search,
.dark .ticket-inline-card #ticket-category-search-original,
.dark .tickets-container #ticketsend-original .input-field,
.dark .tickets-container #ticketsend-original .custom-select-trigger,
.dark .tickets-container #ticketsend-original #ticket-category-search,
.dark .tickets-container #ticketsend-original #ticket-category-search-original {
    background: transparent;
    border-color: #475569;
    box-shadow: none;
}

.dark .ticket-inline-card .input-field input,
.dark .ticket-inline-card .input-field textarea,
.dark .ticket-inline-card .selected-value,
.dark .tickets-container #ticketsend-original .input-field input,
.dark .tickets-container #ticketsend-original .input-field textarea,
.dark .tickets-container #ticketsend-original .selected-value {
    color: #F8FAFC;
}

.dark .ticket-inline-card .input-field input::placeholder,
.dark .ticket-inline-card .input-field textarea::placeholder,
.dark .ticket-inline-card .selected-value,
.dark .tickets-container #ticketsend-original .input-field input::placeholder,
.dark .tickets-container #ticketsend-original .input-field textarea::placeholder,
.dark .tickets-container #ticketsend-original .selected-value {
    color: #E2E8F0;
}

#ticketsend .ticket-message-field {
    background-color: #FFFFFF;
    border-color: #E2E8F0;
    color: #1F2937;
    box-shadow: none;
    outline: none;
    transform: none;
    animation: none;
    transition: color 220ms ease, border-color 220ms ease, background-color 220ms ease, opacity 220ms ease;
}

.dark #ticketsend .ticket-message-field {
    background-color: #0B1220;
    border-color: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    box-shadow: none;
}

#ticketsend .ticket-message-field textarea {
    color: #1F2937;
    outline: none;
    box-shadow: none;
    transform: none;
    animation: none;
}

.dark #ticketsend .ticket-message-field textarea {
    color: #FFFFFF;
}

#ticketsend .ticket-message-field textarea::placeholder {
    color: #64748B;
    opacity: 0.84;
}

.dark #ticketsend .ticket-message-field textarea::placeholder {
    color: #94A3B8;
    opacity: 0.8;
}

#ticketsend .ticket-message-field:hover {
    border-color: var(--box-border-hover-homo-background);
}

#ticketsend .custom-select-trigger.open, {
    border-color: #10B981;
    box-shadow: none;
    outline: none;
    transform: none;
}

.dark #ticketsend .custom-select-trigger.open,{
    border-color: #10B981;
    box-shadow: none;
}

#ticketsend .ticket-message-field textarea:focus,
#ticketsend .ticket-message-field textarea:focus-visible {
    outline: none;
    box-shadow: none;
}

#ticketsend .ticket-message-field.is-filled:not(:focus-within):not(.is-invalid) {
    border-color: #E2E8F0;
    box-shadow: none;
}

.dark #ticketsend .ticket-message-field.is-filled:not(:focus-within):not(.is-invalid) {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

#ticketsend .form-group.has-error .ticket-message-field,
#ticketsend .form-group.error .ticket-message-field,
#ticketsend .ticket-message-field.is-invalid,
#ticketsend .ticket-message-field [aria-invalid="true"] {
    border-color: #EF4444;
    box-shadow: none;
    animation: none;
}

/* Category + Request trigger */
:is(#ticketsend, #ticketsend-original, .tickets-container) .custom-select-trigger,
:is(#ticketsend, #ticketsend-original, .tickets-container) .ticket-auth-trigger {
    background-color: transparent;
    border: 1px solid var(--border-intra-dark-and-light);
    box-shadow: none;
    outline: none;
    transform: none;
    animation: none;
    --webkit-tap-highlight-color: transparent;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem;
    gap: 0.25rem;
    width: 100%;
    height: 2.75rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: 0ms;
}

#ticketsend .custom-select-trigger .selected-value {
    margin-right: 0;
    line-height: normal;
    padding: 0;
    color: var(--text-small-htpochrome);
    font-size: 0.75rem;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    transition: color 200ms;
}

.custom-select-trigger svg {
    transition: color 200ms;
}

.custom-select-trigger.open svg {
  			transform: rotate(180deg);
}
.custom-options {
    	z-index: 10;
    	width: 100%;
    	margin-top: 0.25rem;
    	background-color: #fff;
    	border: 1px solid #e5e7eb;
    	border-radius: 0.5rem;
  		max-height: 15rem;
        overflow-y: auto;
}
.dark .custom-options {
    		background-color: #1e293b;
    		border-color: #64748b;
}
.custom-options .relative > svg {
			position: absolute;
			top: 50%;
			left: 12px;
			width: 16px;
			height: 16px;
			transform: translateY(-50%);
			pointer-events: none;
}
.custom-options .relative > input[type="text"] {
			padding-left: 32px !important;
			padding-right: 12px !important;
}
html[dir="rtl"] .custom-options .relative > svg {
			left: auto;
			right: 12px;
}
html[dir="rtl"] .custom-options .relative > input[type="text"] {
			padding-left: 12px !important;
			padding-right: 32px !important;
}
.custom-option {
    		padding: 0.5rem 0.75rem;
    		font-size: 0.75rem;
    		color: #374151;
    		cursor: pointer;
}
.dark .custom-option {
    		color: #cbd5e1;
}
.custom-option:hover {
    		background-color: #f3f4f6;
}
.dark .custom-option:hover {
    		background-color: #334155;
}
.form-control {
  			width: 100%;
 			height: 2.75rem;
  			padding: 0.5rem 0.75rem;
  			font-size: 0.875rem;
  			line-height: 1.5;
  			color: #6b7280;
  			background-color: transparent !important;
			border: 1px solid var(--border-intra-dark-and-light);
  			border-radius: 0.5rem;
  			text-align: start;
  			outline: none;
}
.form-control:focus {
  			border-color: #10B981 !important;
    		box-shadow: none !important;
}
.form-control::placeholder {
  			color: #6b7280;
}
.dark select.form-control {
  			background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
.dark select.form-control::placeholder {
  			color: #cbd5e1;
}
.dark select.form-control:focus {
  			color: #f8fafc;
  			border-color: #10B981;
  			box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
  			background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f8fafc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
.order-id-alert {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			padding: 0.3rem;
			gap: 0.5rem;
			width: 100%;
			background-color: var(--ticket-helper-bg) !important;
			color: var(--ticket-helper-text) !important;
			border-radius: 0.5rem;
			margin-top: 0.5rem;
}
.order-id-alert-span {
			font-size: 0.6rem; /* text-xs */
			color: #475569; /* text-slate-600 */
}
.dark .order-id-alert-span {
			color: #cbd5e1; /* dark:text-slate-300 */
}
.textarea-div {
			width: 100%;
			min-height: 116px;
			align-items: flex-start;
			background-color: transparent !important;
			border: 1px solid var(--border-intra-dark-and-light);
			border-radius: 0.5rem;
			padding: 0.5rem;
}

.textarea-text {
			width: 100%;
			height: 100%;
			background-color: transparent;
			border: 0;
			outline: none;
			font-size: 0.875rem;
			color: #6b7280;
			resize: none;
			text-align: left;
}
:is(#ticketsend, #ticketsend-original, .tickets-container) .ticket-auth-field-control::placeholder,
:is(#ticketsend, #ticketsend-original, .tickets-container) #message::placeholder,
:is(#ticketsend, #ticketsend-original, .tickets-container) textarea[name="TicketForm[message]"]::placeholder {
    		margin-right: 0 !important;
    		line-height: normal !important;
   		 	padding: 0 !important;
    		color: var(--text-small-htpochrome) !important;
    		font-size: 0.75rem !important;
    		width: 100% !important;
    		white-space: nowrap !important;
    		overflow: hidden !important;
    		text-overflow: ellipsis !important;
    		text-align: left !important;
}
/* Dropzone */
.ticket-dropzone-wrap { width: 100%; }
.ticket-dropzone {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 6px;
			width: 100%;
			min-height: 167px;
			padding: 24px 16px;
			border: 1px dashed #94A3B8;
			border-radius: 16px;
			background-color: rgb(34 197 94 / 0.1);
			background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'><rect x='0.5' y='0.5' width='calc(100%25 - 1px)' height='calc(100%25 - 1px)' rx='15.5' ry='15.5' fill='none' stroke='%2394A3B8' stroke-dasharray='6 6' stroke-linecap='round'/></svg>");
			background-repeat: no-repeat;
			border-color: transparent;
			cursor: pointer;
			text-align: center;
			transition: 0ms;
}
.ticket-dropzone:hover { background-color: rgba(16,185,129,0.03); }
.ticket-dropzone.is-dragover { background-color: rgba(16,185,129,0.06); }
.ticket-dropzone.has-file { background-color: rgba(16,185,129,0.04); }

.dark .ticket-dropzone:hover,
.dark .ticket-dropzone.is-dragover { background-color: rgba(16,185,129,0.08); }
.dark .ticket-dropzone__title { color: #F1F5F9; }

.ticket-dropzone__icon {
			width: 56px; height: 40px;
			display: flex; align-items: center; justify-content: center;
			color: #10B981;
			margin-bottom: 6px;
}
.ticket-dropzone__icon svg { width: 56px; height: 37px; }
.ticket-dropzone__title {
			font-size: 14px; font-weight: 600; color: #0F172A;
}
.ticket-dropzone__hint {
			font-size: 12px; color: #15803D; line-height: 18px;
}
.ticket-dropzone__hint:hover{
  			font-size: 12px; color: #4ADE80; line-height: 18px;
}
.ticket-dropzone__filename {
			margin-top: 8px; font-size: 12px; color: #10B981; text-align: center;
}
.ticket-dropzone__filename.is-error { color: #EF4444; }
.dark .ticket-tcard-wrap,
.dark .ticket-mobile-wrap {
			border-color: #334155;
}
/* === Desktop ticket table === */

.ticket-desk-wrap {
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 16px;
	padding: 24px;
}

.dark .ticket-desk-wrap {
	background: #1E293B;
	border-color: #334155;
}

.ticket-desk-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 4px;
	margin-top: -4px;
}

.ticket-desk-thead {
	background: #F8FAFC;
	border-radius: 10px;
	overflow: hidden;
}

.dark .ticket-desk-thead {
	background: rgba(51, 65, 85, 0.5);
}

.ticket-desk-th {
	padding: 10px;
	height: 56px;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: #0F172A;
	text-align: center;
	white-space: nowrap;
	background: #F8FAFC;
	border-bottom: none;
}

.dark .ticket-desk-th {
	color: #E2E8F0;
	background: #334155;
}

.ticket-desk-th.is-first-ltr {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.ticket-desk-th.is-last-ltr {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.ticket-desk-th.is-first-rtl {
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}

.ticket-desk-th.is-last-rtl {
	border-top-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.ticket-desk-row {
	transition: background-color 0.16s ease;
	border-radius: 10px;
	overflow: hidden;
}

/* Hover */
.ticket-desk-row:hover .ticket-desk-td {
			background: rgba(148, 163, 184, 0.08);
}
.dark .ticket-desk-row:hover .ticket-desk-td {
			background: rgba(51, 65, 85, 0.5);
}
.ticket-desk-row:hover .ticket-desk-td:first-child {
			border-top-left-radius: 10px;
			border-bottom-left-radius: 10px;
}
.ticket-desk-row:hover .ticket-desk-td:last-child {
			border-top-right-radius: 10px;
			border-bottom-right-radius: 10px;
}
.ticket-desk-row:hover .ticket-desk-td:first-child:last-child {
			border-radius: 10px;
}
/* RTL hover radius */
[dir="rtl"] .ticket-desk-row:hover .ticket-desk-td:first-child {
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
			border-top-right-radius: 10px;
			border-bottom-right-radius: 10px;
}
[dir="rtl"] .ticket-desk-row:hover .ticket-desk-td:last-child {
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
			border-top-left-radius: 10px;
			border-bottom-left-radius: 10px;
}
/* Unread row */
.ticket-desk-row.is-unread .ticket-desk-td {
			background: rgba(16, 185, 129, 0.05);
}
.dark .ticket-desk-row.is-unread .ticket-desk-td {
			background: rgba(16, 185, 129, 0.10);
}
.ticket-desk-row.is-unread .ticket-desk-td:first-child {
			border-top-left-radius: 10px;
			border-bottom-left-radius: 10px;
}
.ticket-desk-row.is-unread .ticket-desk-td:last-child {
			border-top-right-radius: 10px;
			border-bottom-right-radius: 10px;
}
.ticket-desk-row .ticket-desk-td {
			box-shadow: none;
}
.ticket-desk-td {
			padding: 14px 16px;
			font-weight: 400;
			font-size: 14px;
			line-height: 20px;
			color: #0F172A;
			text-align: center;
			vertical-align: middle;
			transition: background-color 0.16s ease, color 0.16s ease;
}
.dark .ticket-desk-td {
			color: #F1F5F9;
}
.ticket-desk-row:hover .ticket-desk-td {
			box-shadow: none;
}
.dark .ticket-desk-row:hover .ticket-desk-td {
			box-shadow: none;
}
.ticket-desk-td--id,
.ticket-desk-td--time {
			white-space: nowrap;
}
.ticket-desk-subject {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			max-width: 100%;
}
.ticket-desk-subject__text {
			max-width: 220px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
}
.ticket-desk-subject__text.is-bold {
			font-weight: 600;
			color: #0F172A;
}
.dark .ticket-desk-subject__text.is-bold {
			color: #F8FAFC;
}
/* Unread pill */
.ticket-unread-pill {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 2px 8px;
			height: 20px;
			background: #FEE2E2;
			color: #DC2626;
			border-radius: 999px;
			font-family: 'Roboto', 'IRANSansX', sans-serif;
			font-weight: 600;
			font-size: 11px;
			line-height: 1;
			white-space: nowrap;
			flex-shrink: 0;
			box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.12);
}
.dark .ticket-unread-pill {
			background: rgba(220, 38, 38, 0.18);
			color: #FCA5A5;
			box-shadow: 0 0 0 1px rgba(252, 165, 165, 0.18);
}
/* Open ticket button */
.ticket-desk-open {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 36px;
			height: 36px;
			border-radius: 8px;
			color: #0F172A;
			transition:0ms;
}
.ticket-desk-open:hover {
			background: #F0FDF4;
			color: #10B981;
			transform: translateY(-1px);
}
.dark .ticket-desk-open {
			color: #CBD5E1;
}
.dark .ticket-desk-open:hover {
			background: rgba(16, 185, 129, 0.12);
			color: #34D399;
}
/* === Mobile ticket cards (Figma spec) === */
/* === Tablet ticket cards (Figma spec) === */
.ticket-tcard-wrap {
	display: flex; flex-direction: column; align-items: stretch;
	padding: 24px; gap: 24px;
	background: var(--background-main);
    border: 1px solid var(--border-intra-dark-and-light);
	border-radius: 16px;
	margin-bottom: 24px;
}
.ticket-tcard {
	background: transparent;
	border: 1px solid var(--border-intra-dark-and-light);
	border-radius: 8px;
	width: 100%;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.ticket-tcard:hover {
			border-color: var(--box-border-hover-homo-background) !important;
}

.ticket-tcard__inner { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.ticket-tcard__top { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; }
.ticket-tcard__top-left { display: flex; flex-direction: row; align-items: center; gap: 8px; min-width: 0; flex: 1; }
.ticket-tcard__id { font-family: 'Roboto','IRANSansX',sans-serif; font-weight: 400; font-size: 14px; line-height: 20px; color: #0F172A; flex-shrink: 0; }
.ticket-tcard__subject { font-family: 'Roboto','IRANSansX',sans-serif; font-weight: 500; font-size: 14px; line-height: 20px; color: #0F172A; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dark .ticket-tcard__id, .dark .ticket-tcard__subject { color: #F8FAFC; }
.ticket-tcard__open { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: #0F172A; flex-shrink: 0; transition: color 0.15s; }
.ticket-tcard__open:hover { color: #10B981; }
.dark .ticket-tcard__open { color: #CBD5E1; }
.ticket-tcard__row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; min-height: 20px; }
.ticket-tcard__label { font-family: 'Roboto','IRANSansX',sans-serif; font-weight: 500; font-size: 14px; line-height: 20px; color: #0F172A; }
.dark .ticket-tcard__label { color: #F8FAFC; }
.ticket-tcard__val { font-family: 'Roboto','IRANSansX',sans-serif; font-weight: 400; font-size: 14px; line-height: 20px; color: #0F172A; text-align: end; }
.dark .ticket-tcard__val { color: #F8FAFC; }



.ticket-mobile-wrap {
	display: flex; flex-direction: column; align-items: stretch;
	padding: 24px; gap: 24px;
	background: #FFFFFF;
	border: 1px solid #E2E8F0;
	border-radius: 16px;
	margin-bottom: 24px;
}
.ticket-mcard.is-unread { background: rgba(16,185,129,0.05); border-color: #BBF7D0; }
.dark .ticket-mcard.is-unread { background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.35); }
.ticket-mcard__val.is-bold { font-weight: 600; color: #0F172A; }
.dark .ticket-mcard__val.is-bold { color: #F8FAFC; }
.ticket-mcard__inner { display: flex; flex-direction: column; gap: 16px; padding: 26px; }
.ticket-mcard__top { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; }
.ticket-mcard__id { font-family: 'Roboto', 'IRANSansX', sans-serif; font-weight: 500; font-size: 14px; line-height: 20px; color: #0F172A; }
.dark .ticket-mcard__id { color: #F8FAFC; }


.ticket-mcard__rows { display: flex; flex-direction: column; gap: 8px; }
.ticket-mcard__row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; }
.ticket-mcard__label { font-family: 'Roboto', 'IRANSansX', sans-serif; font-weight: 500; font-size: 14px; line-height: 20px; color: #0F172A; }
.dark .ticket-mcard__label { color: #F8FAFC; }
.ticket-mcard__val { font-family: 'Roboto', 'IRANSansX', sans-serif; font-weight: 400; font-size: 14px; line-height: 20px; color: #0F172A; text-align: end; }
.dark .ticket-mcard__val { color: #F8FAFC; }

/* matched to updated Refund mobile body, borders, spacing and card sizing */
@media (max-width: 1024px) {
	.tickets-container .ticket-mobile-wrap {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		padding: 16px !important;
		gap: 25px !important;
		margin: 0 0 24px 0 !important;
		background: var(--background-main);
    	border: 1px solid var(--border-middle-dark-and-light);   
      	border-radius: 1rem;
		box-shadow: none !important;
		overflow: hidden !important;
	}


.tickets-container .ticket-mcard {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	padding: 0;
	margin: 0;
  	background: transparent;
	border: 1px solid var(--border-intra-dark-and-light);
	border-radius: 1rem;
	box-shadow: none;
	overflow: hidden;
}
  .ticket-mcard:hover {
        border-color: var(--box-border-hover-homo-background)
}

	.tickets-container .ticket-mcard__inner {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: center !important;
		padding: 16px !important;
		gap: 14px !important;
		margin: 0 !important;
		background: transparent !important;
		border: 0 !important;
		border-radius: 8px !important;
		box-shadow: none !important;
	}

	.tickets-container .ticket-mcard__rows {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 8px !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	.tickets-container .ticket-mcard__top,
	.tickets-container .ticket-mcard__row {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: 8px !important;
		padding: 0 !important;
		margin: 0 !important;
		min-height: 20px !important;
		height: auto !important;
	}

	.tickets-container .ticket-mcard__top {
		min-height: 26px !important;
	}

	.tickets-container .ticket-mcard__id,
	.tickets-container .ticket-mcard__label {
		flex: 0 0 auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		color: #0F172A !important;
	}
	.dark .tickets-container .ticket-mcard__id,
	.dark .tickets-container .ticket-mcard__label {
		color: #F8FAFC !important;
	}
	.tickets-container .ticket-mcard__val {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		margin: 0 !important;
		text-align: end !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		color: #0F172A !important;
	}
	.dark .tickets-container .ticket-mcard__val {
		color: #F8FAFC !important;
	}
	.tickets-container .ticket-mcard__top .ticket-mbadge {
		flex: 0 0 auto !important;
		margin-left: auto !important;
	}
.tickets-container .ticket-mcard__details {
		display: flex;
        justify-content: center;
        font-size: 14px;
        padding: 5px 0;
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        box-shadow: none !important;
        color: #0F172A ;
        background: transparent !important;
        border: 1px solid var(--border-intra-dark-and-light);
        border-radius: 7px;
	}
  .dark .tickets-container .ticket-mcard__details{
  	color: #F8FAFC ;
  }  
  .tickets-container .ticket-mcard__details:hover {
      color: #F8FAFC !important;
	}
}
@media (max-width: 640px) {
	.ticket-dropzone { min-height: 148px; padding: 18px 12px; }
	.ticket-dropzone__icon { width: 54.78px; height: 36px; }
	.ticket-dropzone__icon svg { width: 54.78px; height: 36px; }
	.ticket-dropzone__title { font-size: 13px; }
	.ticket-dropzone__hint { font-size: 11.5px; }
	.ticket-mobile-wrap {
		padding: 24px 16px;
		gap: 16px;
	}
	.ticket-mcard__label {
		font-size: 14px;
		line-height: 20px;
		font-weight: 500;
	}
	.ticket-mcard__val {
		font-size: 12px;
		line-height: 18px;
		font-weight: 400;
	}
}


/* Tickets status badges — matched to Orders / Refund / Refill final preset */
:root {
  /* Pending */
  --pending: #F59E0B;
  --pending-bg-light: #FEFCE8;
  --pending-text-light: #EAB308;
  --pending-border-light: #FCD34D;
  --pending-bg-dark: rgba(245, 158, 11, 0.14);
  --pending-text-dark: #FBBF24;
  --pending-border-dark: rgba(245, 158, 11, 0.28);

  /* In Progress */
  --in-progress: #3B82F6;
  --in-progress-bg-light: #EFF6FF;
  --in-progress-text-light: #3B82F6;
  --in-progress-border-light: #BFDBFE;
  --in-progress-bg-dark: rgba(59, 130, 246, 0.14);
  --in-progress-text-dark: #60A5FA;
  --in-progress-border-dark: rgba(59, 130, 246, 0.28);

  /* Completed */
  --completed: #10B981;
  --completed-bg-light: #F0FDF4 ;
  --completed-text-light: #22C55E;
  --completed-border-light: #A7F3D0;
  --completed-bg-dark: rgba(16, 185, 129, 0.14);
  --completed-text-dark: #34D399;
  --completed-border-dark: rgba(16, 185, 129, 0.28);

  /* Partial */
  --partial: #EAB308;
  --partial-bg-light:#fff05f61 ;
  --partial-text-light: #8f7a12f2 ;
  --partial-border-light: #FDE68A;
  --partial-bg-dark: rgba(234, 179, 8, 0.14);
  --partial-text-dark: #FACC15;
  --partial-border-dark: rgba(234, 179, 8, 0.28);

  /* Processing / Welcome */
  --processing: #8B5CF6;
  --processing-bg-light: #F8FAFC;
  --processing-text-light: #1E293B;
  --processing-border-light: #DDD6FE;
  --processing-bg-dark: rgba(139, 92, 246, 0.14);
  --processing-text-dark: #A78BFA;
  --processing-border-dark: rgba(139, 92, 246, 0.28);

  /* Neutral / Closed */
  --neutral-bg-light: #e1eaf1 ;
  --neutral-text-light: #64748B;
  --neutral-border-light: #E2E8F0;
  --neutral-bg-dark: rgba(148, 163, 184, 0.16);
  --neutral-text-dark: #CBD5E1;
  --neutral-border-dark: rgba(148, 163, 184, 0.26);

  /* Canceled */
  --canceled: #EF4444;
  --canceled-bg-light: #FEF2F2;
  --canceled-text-light: #EF4444;
  --canceled-border-light: #FECACA;
  --canceled-bg-dark: rgba(239, 68, 68, 0.14);
  --canceled-text-dark: #F87171;
  --canceled-border-dark: rgba(239, 68, 68, 0.28);
}

.ticket-tbadge,
.ticket-mbadge {
  			display: inline-flex !important;
  			align-items: center !important;
  			justify-content: center !important;
  			box-sizing: border-box !important;
  			height: 28px !important;
  			padding: 6px 13px !important;
 			border-radius: 8px !important;
  			font-family: inherit !important;
  			font-style: normal !important;
  			font-size: 11px !important;
  			line-height: 18px !important;
  			font-weight: 600 !important;
  			letter-spacing: 0.002em !important;
  			white-space: nowrap !important;
 	 		text-align: center !important;
         	min-width: fit-content !important;
 			width: 80px !important;
  			gap: 0 !important;
  			border: 0 !important;
  			box-shadow: none !important;
  			backdrop-filter: none !important;
  			-webkit-backdrop-filter: none !important;
  			transform: none !important;
  			transition: background-color 180ms ease, color 180ms ease !important;
}
.ticket-tbadge--blue,
.ticket-mbadge--blue {
  			background: var(--in-progress-bg-light) !important;
  			color: var(--in-progress-text-light) !important;
}
.ticket-tbadge--green,
.ticket-mbadge--green {
  			background: var(--neutral-bg-light) !important;
  			color: var(--neutral-text-light) !important;
}
.ticket-tbadge--yellow,
.ticket-mbadge--yellow {
  			background: var(--partial-bg-light) !important;
  			color: var(--partial-text-light) !important;
}
.ticket-tbadge--answered,
.ticket-mbadge--answered {
  			background: var(--completed-bg-light) !important;
  			color: var(--completed-text-light) !important;
}
.ticket-tbadge--purple,
.ticket-mbadge--purple {
  			background: var(--processing-bg-light) !important;
  			color: var(--processing-text-light) !important;
}
.ticket-tbadge--gray,
.ticket-mbadge--gray {
  			background: var(--neutral-bg-light) !important;
  			color: var(--neutral-text-light) !important;
}
.ticket-tbadge--red,
.ticket-mbadge--red {
  			background: var(--canceled-bg-light) !important;
  			color: var(--canceled-text-light) !important;
}

.dark .ticket-tbadge--blue,
.dark .ticket-mbadge--blue {
  			background: var(--in-progress-bg-dark) !important;
        	color: var(--in-progress-text-dark) !important;
}

.dark .ticket-tbadge--green,
.dark .ticket-mbadge--green {
  			background: var(--neutral-bg-dark) !important;
  			color: var(--neutral-text-dark) !important;
}
.dark .ticket-tbadge--yellow,
.dark .ticket-mbadge--yellow {
  			background: var(--partial-bg-dark) !important;
  			color: var(--partial-text-dark) !important;
}
.dark .ticket-tbadge--answered,
.dark .ticket-mbadge--answered {
          background: var(--completed-bg-dark) !important;
  			color: var(--completed-text-dark) !important;
}
.dark .ticket-tbadge--purple,
.dark .ticket-mbadge--purple {
  			background: var(--processing-bg-dark) !important;
          color: var(--processing-text-dark) !important;
}
.dark .ticket-tbadge--gray,
.dark .ticket-mbadge--gray {
  		background: var(--neutral-bg-dark) !important;
  		color: var(--neutral-text-dark) !important;
}
.dark .ticket-tbadge--red,
.dark .ticket-mbadge--red {
  		background: var(--canceled-bg-dark) !important;
  		color: var(--canceled-text-dark) !important;
}
@media (max-width: 640px) {
  .ticket-tbadge,
  .ticket-mbadge {
    	height: 28px !important;
    	padding: 6px 12px !important;
    	font-size: 10px !important;
    	line-height: 18px !important;
  }
}





/*--------------other code--------------------*/
a.paperclip > svg {
  color: #10B981;		
}
.form-group {
  margin-bottom: 1rem;
}

select.form-control {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: {% if site['rtl'] %}
    left{% else %}
    right{% endif %} 0.60rem center;
  background-size: 1rem; padding-{% if site['rtl'] %}
    left{% else %}
    right{% endif %}
  : 2.5rem;
  cursor: pointer;
}
select.form-control:focus {
  background-image: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}


#ticketModal .bg-white::-webkit-scrollbar {
  display: none;
}

#ticketModal.hidden {
  display: none !important;
  pointer-events: none !important;
}

#ticketModal:not(.hidden) {
  pointer-events: auto !important;
}




.no-results {
  transition: all 0.2s ease;
}

body.ticket-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

#ticketModal {
  will-change: opacity;
}

#ticketModal .ticket-modal-panel {
  will-change: opacity;
}

.submit-button {
  transition: transform 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
}

.submit-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -18px rgba(16, 185, 129, 0.8);
}

.submit-button:active {
  transform: translateY(0);
}


/* Final matched polish for Tickets 
.ticket-cta-btn,
#openTicketModalBtn,
.submit-button,
.ticket-modal-panel,
.input-field,
.custom-options,
.custom-option,
#ticket-category-search,
#ticket-category-search-original,
.tickets-container > .bg-white,
.tickets-container table tbody tr,
.md\:hidden .bg-white.dark\:bg-slate-800.border,
.grid.grid-cols-1.md\:grid-cols-2 > div,
.ticket-modal-panel .sticky,
a[href^="{{ page_url('viewticket') }}"],
.alert {
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.submit-button,
.ticket-cta-btn {
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}*/

.input-field,
#ticket-category-search,
#ticket-category-search-original {
	transition:0ms;
}

.dark .ticket-modal-panel,
.dark .input-field,
.dark #ticket-category-search,
.dark #ticket-category-search-original,
.dark .tickets-container > .bg-white,
.dark .md\:hidden .bg-white.dark\:bg-slate-800.border,
.dark .grid.grid-cols-1.md\:grid-cols-2 > div,
.dark .ticket-modal-panel .sticky {
	border-color: #334155 !important;
}

.submit-button:hover {
	transform: translateY(0);
	background-color: #059669 !important;
	box-shadow: 0 12px 24px -16px rgba(16, 185, 129, 0.6);
}

.submit-button:active {
	transform: translateY(0);
	background-color: #047857 !important;
	box-shadow: 0 6px 14px -12px rgba(16, 185, 129, 0.52);
}

#openTicketModalBtn:focus-visible,
.submit-button:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14), 0 8px 18px -14px rgba(16, 185, 129, 0.58);
}

.input-field:hover,
.input-field:focus-within,
#ticket-category-search:hover,
#ticket-category-search:focus,
#ticket-category-search-original:hover,
#ticket-category-search-original:focus {
	border-color: #cbd5e1 !important;
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.06);
}

.dark .input-field:hover,
.dark .input-field:focus-within,
.dark #ticket-category-search:hover,
.dark #ticket-category-search:focus,
.dark #ticket-category-search-original:hover,
.dark #ticket-category-search-original:focus {
	border-color: rgba(255, 255, 255, 0.08) !important;
	box-shadow: 0 2px 8px rgba(2, 6, 23, 0.25);
}

.input-field:focus-within,
#ticket-category-search:focus,
#ticket-category-search-original:focus {
	border-color: #94a3b8 !important;
	box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.12) !important;
}

.dark .input-field:focus-within,
.dark #ticket-category-search:focus,
.dark #ticket-category-search-original:focus {
	border-color: #64748b !important;
	box-shadow: 0 0 0 3px rgba(100, 116, 139, 0.2) !important;
}

.custom-option:hover {
	background: #f1f5f9 !important;
	color: #0f172a !important;
}

.dark .custom-option:hover {
	background: #334155 !important;
	color: #f8fafc !important;
}

.grid.grid-cols-1.md\:grid-cols-2 > div:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
	border-color: rgba(16, 185, 129, 0.22);
}

.dark .grid.grid-cols-1.md\:grid-cols-2 > div:hover {
	box-shadow: 0 12px 28px rgba(2, 6, 23, 0.28);
	border-color: rgba(16, 185, 129, 0.24) !important;
}

.tickets-container table tbody tr:hover,
.md\:hidden .bg-white.dark\:bg-slate-800.border:hover {
	box-shadow: none;
}

.dark .tickets-container table tbody tr:hover,
.dark .md\:hidden .bg-white.dark\:bg-slate-800.border:hover {
	box-shadow: none;
}

a[href^="{{ page_url('viewticket') }}"]:hover {
	background: rgba(16, 185, 129, 0.06) !important;
}

.dark a[href^="{{ page_url('viewticket') }}"]:hover {
	background: rgba(16, 185, 129, 0.10) !important;
}

@media (prefers-reduced-motion: reduce) {
	.ticket-cta-btn,
	#openTicketModalBtn,
	.submit-button,
	.ticket-modal-panel,
	.ticket-form-container,
	.input-field,
	.custom-select-trigger,
	.custom-options,
	.custom-option,
	.grid.grid-cols-1.md\:grid-cols-2 > div {
		transition: none !important;
		transform: none !important;
	}
}

/* ============ Modern minimal FAQ accordion ============ */
.faq-section { margin-top: 28px; margin-bottom: 16px; }

.faq-item {
  transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.faq-item:hover { border-color: rgba(16,185,129,.35); }
.dark .faq-item:hover { border-color: rgba(16,185,129,.4); }
.faq-item[open] { border-color: rgba(16,185,129,.45); box-shadow: 0 6px 18px rgba(15,23,42,.05); }
.dark .faq-item[open] { border-color: rgba(16,185,129,.5); box-shadow: 0 8px 22px rgba(2,6,23,.25); }

.faq-summary { transition: background-color .2s ease; }
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary:hover { background: rgba(16,185,129,.04); }
.dark .faq-summary:hover { background: rgba(16,185,129,.08); }

.faq-item[open] .faq-chevron { transform: rotate(180deg); color: #10B981; }
.faq-item[open] .faq-num { background: #10B981; color: #fff; }

/* Smooth open/close */
.faq-body {
  animation: faq-slide .28s ease-out;
  transform-origin: top;
}
@keyframes faq-slide {
  from { opacity: 0; transform: translateY(-4px); max-height: 0; }
  to   { opacity: 1; transform: translateY(0);    max-height: 500px; }
}

@media (max-width: 640px) {
  .faq-summary { padding: 10px 12px !important; }
  .faq-q { font-size: 12.5px !important; }
  .faq-body { padding: 0 12px 12px !important; }
}

/* ============ Modern alerts (success / info / danger) ============ */
.ticket-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid transparent;
  position: relative;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 10px;
  animation: ticket-alert-in .35s cubic-bezier(.16,1,.3,1);
  backdrop-filter: blur(6px);
}
/* When alert has only a title (no msg), keep it perfectly centered with icon */
.ticket-alert__body:has(.ticket-alert__title:only-child) { display: flex; align-items: center; }
.ticket-alert__title { line-height: 1.3; }
@keyframes ticket-alert-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
.ticket-alert.hidden { display: none !important; }

.ticket-alert__icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}
.ticket-alert__icon svg { width: 18px; height: 18px; }

.ticket-alert__body { flex: 1; min-width: 0; }
.ticket-alert__title {
  font-size: 13px; font-weight: 700; margin: 0 0 2px;
  letter-spacing: -.01em;
}
.ticket-alert__title:only-child { margin: 0; }
.ticket-alert__msg { margin: 0; font-size: 12.5px; opacity: .9; }

.ticket-alert__close {
  flex-shrink: 0;
  width: 24px; height: 24px;
  border-radius: 6px;
  font-size: 18px; line-height: 1;
  opacity: .55;
  transition: opacity .2s ease, background-color .2s ease;
  background: transparent; border: 0; cursor: pointer;
  color: inherit;
}
.ticket-alert__close:hover { opacity: 1; background: rgba(0,0,0,.06); }
.dark .ticket-alert__close:hover { background: rgba(255,255,255,.08); }

/* Success */
.ticket-alert--success {
  background: linear-gradient(135deg, #ECFDF5 0%, #F0FDF4 100%);
  border-color: rgba(16,185,129,.25);
  color: #065F46;
}
.ticket-alert--success .ticket-alert__icon { background: rgba(16,185,129,.15); color: #059669; }
.dark .ticket-alert--success {
  background: linear-gradient(135deg, rgba(16,185,129,.12) 0%, rgba(16,185,129,.06) 100%);
  border-color: rgba(16,185,129,.3);
  color: #A7F3D0;
}
.dark .ticket-alert--success .ticket-alert__icon { background: rgba(16,185,129,.2); color: #34D399; }

/* Info */
.ticket-alert--info {
  background: linear-gradient(135deg, #EFF6FF 0%, #F0F9FF 100%);
  border-color: rgba(59,130,246,.25);
  color: #1E40AF;
}
.ticket-alert--info .ticket-alert__icon { background: rgba(59,130,246,.15); color: #2563EB; }
.dark .ticket-alert--info {
  background: linear-gradient(135deg, rgba(59,130,246,.12) 0%, rgba(59,130,246,.06) 100%);
  border-color: rgba(59,130,246,.3);
  color: #BFDBFE;
}
.dark .ticket-alert--info .ticket-alert__icon { background: rgba(59,130,246,.2); color: #60A5FA; }

/* Danger */
.ticket-alert--danger {
  background: linear-gradient(135deg, #FEF2F2 0%, #FFF1F2 100%);
  border-color: rgba(239,68,68,.25);
  color: #991B1B;
}
.ticket-alert--danger .ticket-alert__icon { background: rgba(239,68,68,.15); color: #DC2626; }
.dark .ticket-alert--danger {
  background: linear-gradient(135deg, rgba(239,68,68,.12) 0%, rgba(239,68,68,.06) 100%);
  border-color: rgba(239,68,68,.3);
  color: #FECACA;
}
.dark .ticket-alert--danger .ticket-alert__icon { background: rgba(239,68,68,.2); color: #F87171; }

@media (max-width: 640px) {
  .ticket-alert { padding: 10px 12px; gap: 10px; border-radius: 10px; }
  .ticket-alert__icon { width: 28px; height: 28px; border-radius: 8px; }
  .ticket-alert__icon svg { width: 16px; height: 16px; }
  .ticket-alert__title { font-size: 12.5px; }
  .ticket-alert__msg { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .ticket-alert, .faq-body, .faq-chevron { animation: none !important; transition: none !important; }
}










@media (min-width: 640px) {
  .ticket-inline-card {
    padding: 1.5rem;
  }
}
/* ===================================
          end  ticket
=================================== */

















/* ===================================
 start  orders and refill and refound
=================================== */
@media (prefers-reduced-motion: reduce) {
		.header-cta-btn,
		.header-cta-btn:hover,
		.header-cta-btn:active {
			transition: none !important;
			transform: none !important;
		}
}
.orders-top-actions {
    margin: 10px 0 15px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    width: 100%;
    justify-content: flex-end;
}
.ticket-order-btn {
			display: flex;
			flex-direction: row;
      		justify-content: center;
			align-items: center;
			padding: 0 1.25rem;
			height: 2.5rem;
			border-radius: 0.375rem;
			cursor: pointer;
			font-size: 0.9rem;
			line-height: 18px;
			white-space: nowrap;
             width: 140px;
			background-color: #FFFFFF;
			border: 1px solid #10B981;
			color: #10B981;
			font-weight: 700;
			transition: all 0ms;
}
/* Dark Mode */
.dark .ticket-order-btn {
			background-color: #0F172A;
			border-color: #10B981;
			color: #10B981;
}
.ticket-order-btn:hover{
		    background-color: #22c55e1a;
}
/* max-sm */
@media (max-width: 639px) {
	.ticket-order-btn {
            font-size: 0.8rem;
	}
  .orders-top-actions{
  
  }
}
@media (min-width: 768px) {
	.ticket-order-btn {
			font-size: 1rem;
			width: 156px;
	}
}
.orders-page-view-ul {
			display: flex;
			flex-wrap: wrap;
			gap: 0.5rem;
			width: 100%;
			list-style: none;
			margin: 0;
			justify-content: center;
}
/* sm */
@media (min-width: 640px) {
.orders-page-view-ul {
		justify-content: center;
	}
}
/* آخرین li در حالت عادی */
.orders-page-view-ul > li:last-child {
			margin-left: auto;
			margin-right: auto;
}
@media (min-width: 640px) {
	.orders-page-view-ul > li:last-child {
			margin-left: 0;
			margin-right: 0;
	}
}
@media (min-width: 1024px) {
	.orders-page-view-ul {
			flex-wrap: wrap;
			justify-content: flex-start;
	}
}
.orders-page-view-li {
			width: calc(50% - 0.25rem);
			display: flex;
			justify-content: center;
}
@media (min-width: 640px) {
	.orders-page-view-li {
			width: auto;
	}
}
.filter-btn {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			padding:0.5rem 2rem;
			height: 2.25rem;
			background: var(--background-main);
    		border: 1px solid var(--border-intra-dark-and-light);
			border-radius: 9999px;
			text-decoration: none;
			font-size: 0.875rem;
			text-align: center;
			color: var(--text-coloe-0F172A-F8FAFC);
			white-space: nowrap;
  			transition-duration: 600ms;
}
.filter-btn.active {
			border: 1px solid #10B981;
    		color: #10B981;
  			transform: translateY(0.5px) !important;
}
.filter-btn:hover,
.filter-btn:focus-visible {
    		border-color: #10B981;
    		color: #10B981;
}
.js-orders-search-shell {
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			align-items: center;
			padding: 0.5rem;
			gap: 0.75rem;
			width: 100%;
			height: 3rem;
            background-color: #FFFFFF;
			border: 1px solid var(--border-middle-dark-and-light);
			border-radius: 0.5rem;
}
.dark .js-orders-search-shell{
			background-color: transparent;
}

.js-orders-search-shell:focus-within svg path,
.js-orders-search-shell.orders-search-active svg path {
			stroke: #10B981 !important;
}
.js-orders-search-shell-span {
			width: 1.5rem;
			height: 1.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			flex: none;
}
.js-orders-search-field {
			width: 100%;
			height: 1.25rem;
			border: none;
			outline: none;
			background: transparent;
			font-size: 0.875rem;
			line-height: 1.25rem;
			color: #1E293B;
}
.js-orders-search-field::placeholder {
			color: #64748B;
}
.dark .js-orders-search-field {
			color: #E2E8F0;
}
.dark .js-orders-search-field::placeholder {
			color: #F8FAFC;
}
/* Fix Chrome autofill for search field */
/* Fix Chrome autofill for .js-orders-search-field */

.js-orders-search-field:-webkit-autofill,
.js-orders-search-field:-webkit-autofill:hover,
.js-orders-search-field:-webkit-autofill:focus,
.js-orders-search-field:-webkit-autofill:active,
.js-orders-search-field:-internal-autofill-selected,
.js-orders-search-field:-internal-autofill-previewed {
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  -webkit-text-fill-color: #1E293B !important;
  caret-color: #1E293B;
  background-color: #FFFFFF !important;
  background-clip: content-box !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Dark Mode */
.dark .js-orders-search-field:-webkit-autofill,
.dark .js-orders-search-field:-webkit-autofill:hover,
.dark .js-orders-search-field:-webkit-autofill:focus,
.dark .js-orders-search-field:-webkit-autofill:active,
.dark .js-orders-search-field:-internal-autofill-selected,
.dark .js-orders-search-field:-internal-autofill-previewed {
  -webkit-box-shadow: 0 0 0 1000px #0f172a inset !important;
  box-shadow: 0 0 0 1000px #0f172a inset !important;
  -webkit-text-fill-color: #E2E8F0 !important;
  caret-color: #E2E8F0;
  background-color: #0f172a !important;
  background-clip: content-box !important;
  transition: background-color 5000s ease-in-out 0s !important;
}
.box-actions {
			box-sizing: border-box;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			padding: 15px;
			width: 100%;
			background-color: #FFFFFF;
			border: 1px solid var(--border-middle-dark-and-light);
			border-radius: 0.5rem;
}
.dark .box-actions {
			background-color: #0F172A;
}
.div-selection-text {
			font-size: 0.875rem;
			line-height: 1.25rem;
			display: flex;
			align-items: center;
			color: #1E293B;
			font-weight: 400;
}
.dark .div-selection-text {
			color: #F8FAFC;
}
.div-copy-id-ticket {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 1.5rem;
}
.copy-id-ticket-item {
            display: flex;
			flex-direction: row;
			align-items: center;
			padding: 0;
			gap: 0.375rem;
			height: 1.25rem;
        	cursor: pointer;
  			color: #475569; 
}
.dark .copy-id-ticket-item{
			color: #cbd5e1;
}
.copy-id-ticket-item:hover {
			color: #10b981;
}
.copy-id-ticket-item-span {
			font-size: 0.875rem; /* text-sm */
			line-height: 1.25rem; /* leading-5 */
			font-weight: 500; /* font-medium */
}
.line-intra-copy-item {
			width: 1px;
			height: 1.25rem;
			background-color: #CBD5E1;
}
.dark .line-intra-c.opy-item {
			background-color: #475569;
}
.box-order-reffile {
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			padding: 16px;
			gap: 16px;
			width: 100%;
			align-self: stretch;
			background: var(--background-main);
    		border: 1px solid var(--border-middle-dark-and-light);
    		border-radius: 1rem;
}
/*----------------------dekstap--------------------*/
.orders-desktop-table {
			width: 100%;
			min-width: 0;
			max-width: none;
			box-sizing: border-box;
}
.orders-table-head-tr{
			background: #F8FAFC;	
  			border-radius: 13px;
  			margin-bottom: 10px;
}
.dark .orders-table-head-tr{
			background: #334155;	
}
.ticket-table-grid-row,
.addfunds-table-grid-row,
.orders-table-grid-row,
.refill-table-grid-row,
.refunds-table-grid-row{
			display: grid;
  			align-items: center;
    		width: 100%;
  			min-height: min-content;
    		padding: 18px 10px;
      		border-radius: 13px;
  			transition-duration: 300ms;
}
.orders-table-grid-row {    		
    		grid-template-columns: 
        0.5fr   /* [#] */
        1.5fr     /* ID */
        1.5fr   /* Service name */
        1.2fr   /* Link */
        0.5fr   /* Cost */
        0.8fr   /* Start */
        0.8fr   /* Count */
        0.8fr   /* Remains */
        0.9fr   /* Status */
        0.5fr;  /* Action */
}
.refill-table-grid-row {
    		grid-template-columns: 
        0.5fr   /* [#] */
        1.5fr     /* ID */
        1.8fr   /* Service name */
        1.5fr   /* Date & Time */
        1.5fr   /* Link */
        1.5fr   /* Status */
        0.5fr;  /* Action */    		
}
.refunds-table-grid-row{
    		grid-template-columns: 
        1fr     /* ID */
        1.5fr   /* Date */
        1fr   /*Payment Method */ 
        1fr ;   /*Amount */ 
}
.addfunds-table-grid-row{
		grid-template-columns: 
        1fr     /*Transaction ID*/
        1.5fr   /* refund cunt */
        1fr   /* Date & Time */ 
        1fr ;   /* Status */ 
}
.ticket-table-grid-row{
		grid-template-columns: 
        1fr     /*ID*/
        2.5fr   /* subject */
        2fr   /* Date & Time */ 
        1.5fr   /* Status */
  		1fr ;   /* view */
}
.orders-table-header-cell,
.orders-table-body-cell {
			box-sizing: border-box;
			min-width: 0;
}
.orders-table-header-cell {
			padding: 0 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 14px;
			line-height: 20px;
			color: #0F172A;
			text-align: center;
}
.dark .orders-table-header-cell {
			color: #F8FAFC;
}
.orders-table-body-cell {
  			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
  			text-align: center;
			font-size: 13px;
			line-height: 18px;
			color: #0F172A;
  			height: min-content;
}
.dark .orders-table-body-cell {
			color: #F8FAFC;
}
 tbody .refill-table-grid-row:hover ,
 tbody .refunds-table-grid-row:hover ,
 tbody .orders-table-grid-row:hover {
        background-color: rgba(148, 163, 184, 0.08) !important;
}
.dark tbody .refill-table-grid-row:hover ,
.dark tbody .refunds-table-grid-row:hover ,
.dark tbody .orders-table-grid-row:hover {
    background-color: rgba(51, 65, 85, 0.5) !important;
}
.refill-checkbox {
			position: absolute;
			opacity: 0;
			width: 0;
			height: 0;
}
.checkbox-label {
			display: inline-block;
			background-color: transparent;
  			width: 16px;
			height: 16px;
			border-radius: 0.25rem;
			cursor: pointer;
			position: relative;
			border: 1px solid #94a3b8;
  			transition-duration: 200ms;
}
.checkbox-label:hover{
			border-color: #10b981;
}
.refill-checkbox:checked + .checkbox-label,
.order-checkbox:checked + .checkbox-label  {
			background-color: #10b981 !important;
}
.dark .refill-checkbox:checked + .checkbox-label,
.dark .order-checkbox:checked + .checkbox-label {
}
.refill-checkbox:checked + .checkbox-label::after,
.order-checkbox:checked + .checkbox-label::after {
			content: '';
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%) rotate(-45deg);
			width: 8px;
			height: 4px;
			border-left: 2px solid white;
			border-bottom: 2px solid white;
			opacity: 1;
}

.dark .refill-checkbox:checked + .checkbox-label::after,
.dark .order-checkbox:checked + .checkbox-label::after {
			border-left: 2px solid #1E293B;
			border-bottom: 2px solid #1E293B;
}
.checkbox-label::after {
			content: '';
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%) rotate(-45deg);
			width: 8px;
			height: 4px;
			border-left: 2px solid white;
			border-bottom: 2px solid white;
			opacity: 0;
			transition: opacity 0s ease;
}
.orders-id-cell {
			justify-content: center;
			align-items: center;
			direction: ltr;
			gap: 8px;
}
.orders-id-text {
  		    display: flex;
			flex: 0 0 auto;
     	 	min-width: max-content;
			white-space: nowrap;
			overflow: visible;
			text-overflow: unset;
}
.orders-service-stack {
			display: flex;
  			flex-direction: column;
        	justify-content: start;
			width: 100%;
			min-width: 0;
			padding-top: 0;
        	text-align: center;
}
.orders-cell-truncate {
			display: block;
			width: 100%;
			min-width: 0;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
}
.orders-service-meta {
    		display: flex;
    		justify-content: start;
			width:100%;
			font-size: 11px;
			line-height: 14px;
			color: #64748B;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
}
.dark .orders-service-meta {
			color: #94A3B8;
}
.order-date-span{
		    font-size: 11px !important; 
}
.orders-link-cell {
			gap: 4px;
  			text-align: start !important;
  		    justify-content: start;
}
.sss{
justify-content: start;
}
.bbb{
    margin-inline-start: 15%;
}
.copy-link-btn {
			background: none;
			border: none;
			cursor: pointer;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 1rem;
			height: 1rem;
			flex: none;
}
.copy-link-btn:hover{
			color: #10b981 !important;
}
.copy-link-a {
			max-width: 168px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #0F172A;
			text-align: start;
}
.dark .copy-link-a {
			color: #F8FAFC;
}
.action-btn {
    		display: inline-flex;
    		align-items: center;
    		justify-content: center;
    		width: 36px;
    		height: 36px;
    		padding: 0;
    		margin: 0;
    		border: none;
    		border-radius: 8px;
    		background: transparent;
    		box-shadow: none;
    		color: #0F172A;
    		flex-shrink: 0;
    		line-height: 1;
    		transition: 0ms;
    		cursor: pointer;
}
.action-btn:hover {
    		color: #10B981;
    		background: #F0FDF4;
    		box-shadow: none;
    		transform: translateY(-1px);
}
.action-btn:active {
    		color: #10B981;
    		background: transparent;
    		box-shadow: none;
    		transform: none;
}
.action-btn:focus,
.action-btn:focus-visible {
    		outline: none;
    		color: #10B981;
    		background: transparent;
    		box-shadow: none;
}
.dark .action-btn {
    		color: #E2E8F0;
}
.dark .action-btn:hover {
    		background: #334155;
    		color: #34D399;
}
/*--------------------------tablet---------------------*/
.box-card-mob-tab {
    		width: 100%;
    		background: var(--background-main);
   			border: 1px solid var(--border-intra-dark-and-light);
    		border-radius: 0.5rem;
    		box-sizing: border-box;
			margin-bottom: 16px;
}
.tablet-box {
    		display: flex;
    		flex-direction: column;
    		padding: 16px;
    		gap: 16px;
    		width: 100%;
    		margin-left: auto;
            margin-right: auto;
}
.refill-id-text {
			flex: 0 0 auto;
			min-width: max-content;
			font-size: 13px;
			line-height: 18px;
			color: #0F172A;
			white-space: nowrap;
			overflow: visible;
			text-overflow: unset;
	}
	.dark .refill-id-text {
			color: #F8FAFC;
}
.refill-mobile-service-text {
            display: block;
			width: 100%;
			font-weight: 500;
			font-size: 14px;
			line-height: 20px;
			color: #0F172A;
  			text-align: left;
}
.dark .refill-mobile-service-text {
			color: #F8FAFC;
}
.refill-mobile-label {
  			white-space: nowrap;
			font-weight: 500;
			font-size: 14px;
			line-height: 20px;
			color: #0F172A;
}
.dark .refill-mobile-label{
			color: #F8FAFC;
}
.refill-mobile-value {
			font-weight: 400;
			font-size: 12px;
			line-height: 20px;
			color: #0F172A;
}
.dark .refill-mobile-value{
			color: #F8FAFC;
}
.line-phone-order-refill {
    		 width: 100%;
   			 height: 1px;
    		 background-color:var(--border-intra-dark-and-light);
  			 margin-bottom: 5px
}
.btn-order-refill-mobile {
  width: 100%;
    		display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
    flex: 0 0 auto;
    min-height: 25px;
    margin-inline-end: auto;
    padding: .625rem .75rem;
    border: 1px solid var(--border-intra-dark-and-light, #e2e8f0);
    border-radius: 6px;
    background: transparent;
    color: var(--text-small-htpochrome, #64748b);
    font-size: .75rem;
    line-height: 1.5;
    white-space: nowrap;
  	margin-top:4px;
}
.btn-order-refill-mobile:hover {
    		  border-color: #10B981;
    		  color: #10B981;
    		  transition-duration: 250ms;
}
/*--------------------------other code---------------------*/
.order-action-tooltip {
			position: absolute;
			bottom: calc(100% + 4px);
			left: 50%;
			transform: translateX(-50%) translateY(4px);
			padding: 4px 8px;
			border-radius: 7px;
			background: rgba(255, 255, 255, 0.96);
			color: #0F172A;
			font-size: 11px;
			line-height: 14px;
			font-weight: 400;
			white-space: nowrap;
			box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
			opacity: 0;
			visibility: hidden;
			transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
			z-index: 1000;
			pointer-events: none;
			backdrop-filter: blur(6px);
}
.order-action-tooltip::after {
			content: '';
			position: absolute;
			top: 100%;
			left: 50%;
			transform: translateX(-50%);
			border-width: 3px;
			border-style: solid;
			border-color: rgba(255, 255, 255, 0.96) transparent transparent transparent;
}
.group:hover > .order-action-tooltip,
.group:focus-within > .order-action-tooltip {
			opacity: 1;
			visibility: visible;
			transform: translateX(-50%) translateY(0);
}
.dark .order-action-tooltip {
			background: rgba(51, 65, 85, 0.96);
			color: #F8FAFC;
			box-shadow: 0 8px 18px rgba(2, 6, 23, 0.20);
}
.dark .order-action-tooltip::after {
			border-top-color: rgba(51, 65, 85, 0.96);
}




@media (max-width: 639px) {
	.box-actions {
			height: auto;
			gap: 1rem;
			padding: 1rem 2rem;
	}
  	.div-selection-text {
			height: 100%;
	}
  	.div-copy-id-ticket {
			flex-direction: column;
			align-items: flex-start;
			gap: 0.75rem;
	}
  	.line-intra-copy-item {
			display: none;
	}
}
@media (min-width: 1024px) {
	.box-order-reffile {
		padding: clamp(0px, calc(8.333vw - 85.333px), 16px);
	}
}
@media (max-width: 1280px) {
		.orders-table-header-cell {
			padding-inline: 6px;
			font-size: 12px;
		}
  .orders-table-body-cell {
			padding-inline: 6px;
    			font-size: 11px;
		}
  .orders-desktop-table .order-status-badge {
			padding-inline: 10px !important;
			font-size: 10px !important;
		}
  .orders-table-grid-row,
.refill-table-grid-row,
.refunds-table-grid-row{;
    			padding: 15px 10px;     			
}
.orders-table-head-tr{
 				padding: 8px; 	 
}
  
}
@media (min-width: 1280px) {
	
 

}

/* ===================================
 end orders and refill and refound
=================================== */













/* ===================================
           start addfund
=================================== */
.addfunds-box {
    		width: 100%;   
  			background: var(--background-main);
    		border: 1px solid var(--border-middle-dark-and-light);
    		border-radius: 1rem;
    		padding: 1rem;
    		margin-bottom: 1.5rem;
}
.addfunds-guide {
    		width: 100%;
    		font-size: 12px;
    		line-height: 24px;
    		color: #334155;
}
.dark .addfunds-guide {
    		color: #E2E8F0;
}
.funds-amount-field {
    		display: flex;
    		flex-direction: row;
    		justify-content: flex-start;
    		align-items: center;
    		padding: 7px 12px;
    		gap: 0.25rem;
    		width: 100%;
    		height: 2.75rem;
    		border: 1px solid var(--border-intra-dark-and-light);
    		border-radius: .5rem !important;
    		background: transparent !important;
    		box-sizing: border-box;	
  			transition: color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, background-color 220ms ease, opacity 220ms ease !important;
}
.funds-amount-field-input {
    		width: 100%;
    		height: 100%;
    		border: none;
    		outline: none;
    		background-color: transparent;
    		font-size: 12px;
    		color: #64748B;
    		text-align: left;
}
.dark .funds-amount-field-input {
    		color: #94A3B8;
}
.funds-amount-field input::placeholder  {
    		color: #64748B;
}
.funds-amount-field input::placeholder  {
    		color: #94A3B8;
}

@media (max-width: 767px) {
	.funds-amount-field {
		overflow: hidden;
	}
	.funds-amount-field input,
	input.form-control:not([type="hidden"]),
	textarea.form-control {
		font-size: 11px !important;
		width: 114.285714% !important;
		max-width: 114.285714% !important;
	}
}


@media (min-width: 640px) {
    .addfunds-mobile-box {
        padding: 1.5rem;
    }
  .addfunds-guide {
        font-size: 13px;
        line-height: 28px;
    }
}








/* ===================================
           end addfund
=================================== */












/* ===================================
             start setting
=================================== */
.setting-box{
			width: 100%;
   			background: var(--background-main);
    		border: 1px solid var(--border-middle-dark-and-light);
    		border-radius: 1rem;
    		box-sizing: border-box;
}
.setting-box-div {
    		display: flex;
    		flex-direction: column;
  			justify-content: space-between;
    		padding: 1.5rem;
    		align-items: flex-start;
    		gap: 1.5rem;
    		width: 100%;
  			height: 100%;
}
.div-setting-box-titr {
    		display: flex;
    		flex-direction: row;
    		justify-content: flex-start;
    		align-items: center;
    		gap: 1.25rem;
    		width: 100%;
}
.setting-box-titr {
    		font-size: 1.125rem;
    		font-weight: 700;
    		color: #111827;
}
.dark .setting-box-titr {
    		color: #ffffff;
}
.setting-feild-email {
    		display: flex;
    		flex-direction: row;
    		justify-content: flex-start;
    		align-items: center;
    		padding: 0.5rem;
    		gap: 0.25rem;
    		width: 100%;
    		height: 2.75rem;
    		background: var(--background-main);
    		border: 1px solid var(--border-intra-dark-and-light);
    		border-radius: 0.5rem;
}
.setting-feild-email-placeholder {
    		margin-right: 0 !important;
    		line-height: 1.5rem !important;
    		padding: 0 !important;
    		color: var(--text-small-htpochrome) !important;
    		font-size: 0.75rem !important;
    		width: 100% !important;
    		min-width: 0 !important;
    		white-space: nowrap !important;
   		 	overflow: hidden !important;
    		text-overflow: ellipsis !important;
    		text-align: left !important;
}
.custom-select-trigger {
    		display: flex;
    		flex-direction: row;
    		justify-content: space-between;
    		align-items: center;
    		padding: 0.5rem;
    		gap: 0.25rem;
    		width: 100%;
    		height: 2.75rem;
    		background: var(--background-main);
    		border: 1px solid var(--border-intra-dark-and-light);
    		border-radius: 0.5rem;
    		cursor: pointer;
    		text-align: left;
}
.selected-value{
			margin-right: 0 !important;
    		line-height: normal !important;
    		padding: 0 !important;
    		color: var(--text-small-htpochrome) !important;
    		font-size: 0.75rem !important;
    		width: 100% !important;
    		white-space: nowrap !important;
    		overflow: hidden !important;
    		text-overflow: ellipsis !important;
    		text-align: left !important
}
.setting-feild-apakey{
			display: flex;
    		flex-direction: row;
			justify-content: space-between;
  			align-items: center;
    		padding: 0.5rem;
    		gap: 0.25rem;
    		width: 100%;
    		height: 2.75rem;
    		background: var(--background-main);
    		border: 1px solid var(--border-intra-dark-and-light);
    		border-radius: 0.5rem;
}
.account-modal-input {
    		display: flex;
    		flex-direction: row;
    		justify-content: space-between;
    		align-items: center;
    		width: 100%;
    		height: 44px;
    		padding-left: 16px;
    		padding-right: 16px;
    		border: 1px solid #e2e8f0 !important;
    		border-radius: .5rem !important;
    		background: transparent
}
.reset-help-copy {
  			text-align: start;
  			margin-bottom: 1.25rem; /* mb-5 */
  			background-color: #FEFCE8;
  			border-radius: 0.5rem; /* rounded-lg */
  			padding: 0.5rem; /* p-2 */
  			color: #CA8A04;
  			font-size: 12px;
}
/* نسخه دارک مود */
.dark .reset-help-copy {
  			 background-color: #EAB3084D;
 			 color: #FEFCE8;
}
.auth-link {
  			color: var(--auth-link-default);
  			text-decoration: none;
  			opacity: 1;
  			transition: color var(--auth-transition-fast), opacity var(--auth-transition-fast);
  			transform: none;
      		font-size: 14px;
}
.auth-link:hover,
.auth-link:focus-visible {
  			color: var(--auth-link-hover);
  			opacity: 0.96;
  			text-decoration: none;
}
.auth-link:active {
  			color: var(--auth-link-active);
  			opacity: 1;
}
.auth-link:focus-visible {
  			outline: none;
  			box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.12);
  			border-radius: 0.25rem;
}

/* از سایز sm به بالا */
@media (min-width: 640px) {
  .reset-help-copy {
    border-radius: 0.375rem; /* rounded-md */
    font-size: 14px;
  }
  .auth-link {
      		font-size: 16px;
}
}

/* ===================================
             end setting
=================================== */













/* ===================================
             START STATUS
=================================== */
.status-badge,
.order-status-badge,
.order-status-badge-mobile,
.refill-status-badge,
.refill-status-badge-mobile {
			display: inline-flex !important;
			flex-direction: row !important;
			align-items: center !important;
			justify-content: center !important;
			box-sizing: border-box !important;
			height: 28px !important;
			padding: 5px 0px !important;
			border-radius: 8px !important;
			font-style: normal !important;
			font-weight: 600 !important;
			font-size: 11px !important;
			line-height: 18px !important;
			letter-spacing: 0.002em !important;
			white-space: nowrap !important;
			text-align: center !important;
			min-width:80px !important;
			gap: 0 !important;
			border: 0 !important;
			box-shadow: none !important;
			backdrop-filter: none !important;
			-webkit-backdrop-filter: none !important;
			transform: none !important;
			transition: 0s
}
.status-badge::after,
.order-status-badge::after,
.order-status-badge-mobile::after,
.refill-status-badge::after,
.refill-status-badge-mobile::after {
			content: none !important;
}
.status-badge-base {
			border: 0 !important;
			box-shadow: none !important;
}
.dark .status-badge-base {
			border: 0 !important;
			box-shadow: none !important;
}
.dark .status-badge:hover,
.dark .order-status-badge:hover,
.dark .order-status-badge-mobile:hover,
.dark .refill-status-badge:hover,
.dark .refill-status-badge-mobile:hover {
			box-shadow: none !important;
}
.status-badge--completed {
			background: var(--completed-bg-light) !important;
			border-color: var(--completed-border-light) !important;
			color: var(--completed-text-light) !important;
}
.status-badge--progress {
			background: var(--in-progress-bg-light) !important;
			border-color: var(--in-progress-border-light) !important;
			color: var(--in-progress-text-light) !important;
}
.status-badge--pending,
.status-badge--warning {
			background: var(--pending-bg-light) !important;
			border-color: var(--pending-border-light) !important;
			color: var(--pending-text-light) !important;
}
.status-badge--partial {
			background: var(--partial-bg-light) !important;
			border-color: var(--partial-border-light) !important;
			color: var(--partial-text-light) !important;
}
.status-badge--processing {
			background: var(--processing-bg-light) !important;
			border-color: var(--processing-border-light) !important;
			color: var(--processing-text-light) !important;
}
.status-badge--cancel,
.status-badge--failed,
.status-badge--error {
			background: var(--canceled-bg-light) !important;
			border-color: var(--canceled-border-light) !important;
			color: var(--canceled-text-light) !important;
}
.dark .status-badge--completed {
			background: var(--completed-bg-dark) !important;
			border-color: var(--completed-border-dark) !important;
			color: var(--completed-text-dark) !important;
}
.dark .status-badge--progress {
			background: var(--in-progress-bg-dark) !important;
			border-color: var(--in-progress-border-dark) !important;
			color: var(--in-progress-text-dark) !important;
}
.dark .status-badge--pending,
.dark .status-badge--warning {
			background: var(--pending-bg-dark) !important;
			border-color: var(--pending-border-dark) !important;
			color: var(--pending-text-dark) !important;
}
.dark .status-badge--partial {
			background: var(--partial-bg-dark) !important;
			border-color: var(--partial-border-dark) !important;
			color: var(--partial-text-dark) !important;
}
.dark .status-badge--processing {
			background: var(--processing-bg-dark) !important;
			border-color: var(--processing-border-dark) !important;
			color: var(--processing-text-dark) !important;
}
.dark .status-badge--cancel,
.dark .status-badge--failed,
.dark .status-badge--error {
			background: var(--canceled-bg-dark) !important;
			border-color: var(--canceled-border-dark) !important;
			color: var(--canceled-text-dark) !important;
}
@media (max-width: 640px) {
	.status-badge,
	.order-status-badge,
	.order-status-badge-mobile,
	.refill-status-badge,
	.refill-status-badge-mobile {
			height: 28px !important;
			padding: 6px 12px !important;
			font-size: 12px !important;
			line-height: 18px !important;
	}
}

/* ===================================
             END STATUS
=================================== */
 .emerald-field-control {
    		background-color: transparent !important;
    		color: var(--text-small-htpochrome) !important;
    		caret-color: #10B981;
    		outline: none !important;
    		box-shadow: none !important;
    		transform: none !important;
    		text-align: left;
    		font-size: 0.75rem; /* text-xs */
    		border: none !important;
    		order: 0;
  			transition: color 200ms !important;
  			height: auto;
		min-height: 0;
		margin: 0;
		padding: 0;
   		    border-radius: 0;
}

 .emerald-field-control::placeholder {
			margin-right: 0 !important;
    		line-height: normal !important;
    		padding: 0 !important;
    		color: var(--text-small-htpochrome) !important;
    		font-size: 0.75rem !important;
    		width: 100% !important;
    		white-space: nowrap !important;
    		overflow: hidden !important;
    		text-overflow: ellipsis !important;
    		text-align: left !important;
    		transition: color 200ms !important;
}
















/* ====================== اسکرول سفارشی کل سایت ====================== */

/* ====================== اسکرول سفارشی + حذف کامل فلش ====================== */
html,
body {
  height: 100%;
  overflow: hidden;
}

/* کانتینر اصلی که اسکرول می‌کند */
.main-scroll,
.sidebar-scroll,
.authenticated-content,
.drawer-page,
.min-h-screen,
.select2-dropdown .select2-results__options,
.options-container {
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

@media (min-width: 1024px) {
    main {
        height: calc(100% - 73px) !important;
    }
}

/* جلوگیری از اسکرول اضافی روی محتوای داخلی */
.main-div-content {
    height: auto !important;
    overflow: visible !important;
}

/* اندازه اسکرول */
.authenticated-content::-webkit-scrollbar,
.sidebar-scroll::-webkit-scrollbar,
.main-scroll::-webkit-scrollbar,
.drawer-page::-webkit-scrollbar,
main::-webkit-scrollbar,
.min-h-screen::-webkit-scrollbar,
.select2-dropdown .select2-results__options::-webkit-scrollbar,
.custom-options::-webkit-scrollbar,
.options-container::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
}

/* پس‌زمینه اسکرول */
.authenticated-content::-webkit-scrollbar-track,
.sidebar-scroll::-webkit-scrollbar-track,
.main-scroll::-webkit-scrollbar-track,
.drawer-page::-webkit-scrollbar-track,
main::-webkit-scrollbar-track,
.min-h-screen::-webkit-scrollbar-track,
.select2-dropdown .select2-results__options::-webkit-scrollbar-track,
.custom-options::-webkit-scrollbar-track,
.options-container::-webkit-scrollbar-track {
    background: transparent !important;
}

/* خود نوار اسکرول */
.authenticated-content::-webkit-scrollbar-thumb,
.sidebar-scroll::-webkit-scrollbar-thumb,
.main-scroll::-webkit-scrollbar-thumb,
.drawer-page::-webkit-scrollbar-thumb,
main::-webkit-scrollbar-thumb,
.min-h-screen::-webkit-scrollbar-thumb,
.select2-dropdown .select2-results__options::-webkit-scrollbar-thumb,
.custom-options::-webkit-scrollbar-thumb,
.options-container::-webkit-scrollbar-thumb {
    background: var(--sucses-background) !important;
    border-radius: 20px !important;
}

/* هنگام Hover */
.authenticated-content::-webkit-scrollbar-thumb:hover,
.sidebar-scroll::-webkit-scrollbar-thumb:hover,
.main-scroll::-webkit-scrollbar-thumb:hover,
.drawer-page::-webkit-scrollbar-thumb:hover,
main::-webkit-scrollbar-thumb:hover,
.min-h-screen::-webkit-scrollbar-thumb:hover,
.select2-dropdown .select2-results__options::-webkit-scrollbar-thumb:hover,
.custom-options::-webkit-scrollbar-thumb:hover,
.options-container::-webkit-scrollbar-thumb:hover {
    background: #34d399 !important;
}

/* حذف دکمه‌های اسکرول */
.authenticated-content::-webkit-scrollbar-button,
.sidebar-scroll::-webkit-scrollbar-button,
.main-scroll::-webkit-scrollbar-button,
.drawer-page::-webkit-scrollbar-button,
main::-webkit-scrollbar-button,
.min-h-screen::-webkit-scrollbar-button,
.select2-dropdown .select2-results__options::-webkit-scrollbar-button,
.custom-options::-webkit-scrollbar-button,
.options-container::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    background-image: none !important;
}

/* هدر و فوتر بالاتر از همه */
header,
.header-z-index,
footer {
  z-index: 50 !important;
  position: relative;
}













.funds-amount-field,
.js-interactive-field,
.js-orders-search-shell,
.chosen-single,
.select2-selection,
.custom-select-trigger,
.textarea-div,
.emerald-field-shell,
.box-all-effect {
	transition: color 220ms ease, border-color 500ms ease, box-shadow 500ms ease, background-color 220ms ease, opacity 220ms ease !important;
}


.funds-amount-field:hover,
.js-interactive-field:hover,
.js-orders-search-shell:hover,
.chosen-single:hover,
.select2-selection:hover,
.custom-select-trigger:hover,
.textarea-div:hover,
.emerald-field-shell:hover,
.box-all-effect:hover {
	border-color: #CBD5E1 !important;
	box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.08) !important;
	transform: none !important;
}

.dark .funds-amount-field:hover,
.dark .js-interactive-field:hover,
.dark .js-orders-search-shell:hover,
.dark .chosen-single:hover,
.dark .select2-selection:hover,
.dark .custom-select-trigger:hover,
.dark .textarea-div:hover,
.dark .emerald-field-shell:hover,
.dark .box-all-effect:hover {
	border-color: rgba(148, 163, 184, 0.34) !important;
	box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.10) !important;
}


.funds-amount-field:focus-within,
.js-interactive-field:focus-within,
.js-orders-search-shell:focus-within,
.chosen-single:focus-within,
.select2-selection:focus-within,
.custom-select-trigger:focus-within,
.textarea-div:focus-within,
.emerald-field-shell:focus-within,
.box-all-effect:focus-within {
	border-color: #10B981 !important;
	box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.34) !important;
	outline: none !important;
	transform: none !important;
}

.dark .funds-amount-field:focus-within,
.dark .js-interactive-field:focus-within,
.dark .js-orders-search-shell:focus-within,
.dark .chosen-single:focus-within,
.dark .select2-selection:focus-within,
.dark .custom-select-trigger:focus-within,
.dark .textarea-div:focus-within,
.dark .emerald-field-shell:focus-within,
.dark .box-all-effect:focus-within {
	border-color: #10B981 !important;
	box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.34) !important;
}


.funds-amount-field.is-filled:not(.is-focused):not(.is-invalid),
.js-interactive-field.is-filled:not(.is-focused):not(.is-invalid),
.js-orders-search-shell.is-filled:not(.is-focused):not(.is-invalid),
.chosen-single.is-filled:not(.is-focused):not(.is-invalid),
.select2-selection.is-filled:not(.is-focused):not(.is-invalid),
.custom-select-trigger.is-filled:not(.is-focused):not(.is-invalid),
.textarea-div.is-filled:not(.is-focused):not(.is-invalid),
.emerald-field-shell.is-filled:not(.is-focused):not(.is-invalid),
.box-all-effect.is-filled:not(.is-focused):not(.is-invalid) {
	border-color: #D1D5DB !important;
	box-shadow: none !important;
}

.dark .funds-amount-field.is-filled:not(.is-focused):not(.is-invalid),
.dark .js-interactive-field.is-filled:not(.is-focused):not(.is-invalid),
.dark .js-orders-search-shell.is-filled:not(.is-focused):not(.is-invalid),
.dark .chosen-single.is-filled:not(.is-focused):not(.is-invalid),
.dark .select2-selection.is-filled:not(.is-focused):not(.is-invalid),
.dark .custom-select-trigger.is-filled:not(.is-focused):not(.is-invalid),
.dark .textarea-div.is-filled:not(.is-focused):not(.is-invalid),
.dark .emerald-field-shell.is-filled:not(.is-focused):not(.is-invalid),
.dark .box-all-effect.is-filled:not(.is-focused):not(.is-invalid) {
	border-color: #525F73 !important;
	box-shadow: none !important;
}


.funds-amount-field.is-filled:focus-within:not(.is-invalid),
.js-interactive-field.is-filled:focus-within:not(.is-invalid),
.js-orders-search-shell.is-filled:focus-within:not(.is-invalid),
.chosen-single.is-filled:focus-within:not(.is-invalid),
.select2-selection.is-filled:focus-within:not(.is-invalid),
.custom-select-trigger.is-filled:focus-within:not(.is-invalid),
.textarea-div.is-filled:focus-within:not(.is-invalid),
.emerald-field-shell.is-filled:focus-within:not(.is-invalid),
.box-all-effect.is-filled:focus-within:not(.is-invalid) {
	border-color: #10B981 !important;
	box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.22) !important;
}


.funds-amount-field.is-focused:not(:focus-within),
.js-interactive-field.is-focused:not(:focus-within),
.js-orders-search-shell.is-focused:not(:focus-within),
.chosen-single.is-focused:not(:focus-within),
.select2-selection.is-focused:not(:focus-within),
.custom-select-trigger.is-focused:not(:focus-within),
.textarea-div.is-focused:not(:focus-within),
.emerald-field-shell.is-focused:not(:focus-within),
.box-all-effect.is-focused:not(:focus-within) {
	border-color: #E2E8F0 !important;
	box-shadow: none !important;
}

.dark .funds-amount-field.is-focused:not(:focus-within),
.dark .js-interactive-field.is-focused:not(:focus-within),
.dark .js-orders-search-shell.is-focused:not(:focus-within),
.dark .chosen-single.is-focused:not(:focus-within),
.dark .select2-selection.is-focused:not(:focus-within),
.dark .custom-select-trigger.is-focused:not(:focus-within),
.dark .textarea-div.is-focused:not(:focus-within),
.dark .emerald-field-shell.is-focused:not(:focus-within),
.dark .box-all-effect.is-focused:not(:focus-within) {
	border-color: rgba(255, 255, 255, 0.2) !important;
	box-shadow: none !important;
}


.funds-amount-field.is-invalid,
.js-interactive-field.is-invalid,
.js-orders-search-shell.is-invalid,
.chosen-single.is-invalid,
.select2-selection.is-invalid,
.custom-select-trigger.is-invalid,
.textarea-div.is-invalid,
.emerald-field-shell.is-invalid,
.box-all-effect.is-invalid {
	border-color: #EF4444 !important;
	box-shadow: none !important;
	animation: none !important;
}

.funds-amount-field input:focus,
.funds-amount-field input:focus-visible,
.js-interactive-field input:focus,
.js-interactive-field input:focus-visible,
.js-orders-search-shell input:focus,
.js-orders-search-shell input:focus-visible,
.chosen-single:focus,
.chosen-single:focus-visible,
.select2-selection:focus,
.select2-selection:focus-visible,
.custom-select-trigger:focus,
.custom-select-trigger:focus-visible,
.textarea-div:focus,
.textarea-div:focus-visible,
.emerald-field-shell input:focus,
.emerald-field-shell input:focus-visible,
.box-all-effect input:focus,
.box-all-effect input:focus-visible {
	outline: none !important;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
}









/* ============================
   Override Chrome/Edge Autofill
   ============================ */

.js-interactive-field:-webkit-autofill,
.js-interactive-field:-webkit-autofill:hover,
.js-interactive-field:-webkit-autofill:focus,
.js-interactive-field:-webkit-autofill:active,
.js-interactive-field:-internal-autofill-selected,
.js-interactive-field:-internal-autofill-previewed,
.js-interactive-field.is-filled:-webkit-autofill,
.js-interactive-field.is-focused:-webkit-autofill {
    -webkit-text-fill-color: #1f2937 !important;
    color: #1f2937 !important;
    caret-color: #1f2937 !important;
    background-color: #ffffff !important;
    background-image: none !important;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
    box-shadow: 0 0 0 1000px #ffffff inset !important;
    border-color: var(--border-middle-dark-and-light) !important;
    border-radius: 0.5rem !important;
    transition: background-color 99999s ease-out 0s, color 99999s ease-out 0s !important;
}

.dark .js-interactive-field:-webkit-autofill,
.dark .js-interactive-field:-webkit-autofill:hover,
.dark .js-interactive-field:-webkit-autofill:focus,
.dark .js-interactive-field:-webkit-autofill:active,
.dark .js-interactive-field:-internal-autofill-selected,
.dark .js-interactive-field:-internal-autofill-previewed,
.dark .js-interactive-field.is-filled:-webkit-autofill,
.dark .js-interactive-field.is-focused:-webkit-autofill {
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
    caret-color: #ffffff !important;
    background-color: #0B1220 !important;
    background-image: none !important;
    -webkit-box-shadow: 0 0 0 1000px #0B1220 inset !important;
    box-shadow: 0 0 0 1000px #0B1220 inset !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    border-radius: 0.5rem !important;
    transition: background-color 99999s ease-out 0s, color 99999s ease-out 0s !important;
}




















.phone1{
    padding: 0rem;
}

.phone2{
    padding: 0rem;
}

.phone3{
    padding: 0rem;
}

.phone4 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  	width: 100%;
}
 .refill-mobile-value {
 max-width: 100%;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;         /* خیلی مهم برای ellipsis */
}
.phone5{
    padding: 0rem;
}


.bb-1{
	/*  padding: 0rem;*/
}
.bb0{
	/*  padding: 0rem;*/
}
.bb1{
	/*  padding: 0rem;*/
}
.bb2{
	/*  padding: 0rem;*/
}
.bb3{
	/*  padding: 0rem;*/
}
.bb4{
	/*  padding: 0rem;*/
}
.bb5{
	/*  padding: 0rem;*/
}
.bb6{
	/*  padding: 0rem;*/
}
.bb7{
	/*  padding: 0rem;*/
}
.bb8{
	/*  padding: 0rem;*/
}
.bb9{
	/*  padding: 0rem;*/
}
.bb10{
	/*  padding: 0rem;*/
}