@import (less) './var.less';
@import (less) './fonts.less';
@import (less) './ant.less';
@import (less) './boursecu-theme.less';
@import (less) '../../layouts/styles/desktop-shell.less';
@import (less) '../../layouts/styles/mobile-frame.less';
@import (less) '../../layouts/styles/mobile-page-common.less';
@import (less) '../../layouts/desktop/styles/desktop-page-common.less';
@import (less) '../../views/login/desktop/styles/desktop-auth.less';
@import (less) '../../views/base/user/desktop/styles/desktop-user.less';
@import (less) '../../views/base/products/desktop/styles/desktop-products.less';
@import (less) '../../views/base/transactions/desktop/styles/desktop-transactions.less';
@import (less) '../../views/base/wallet/desktop/styles/desktop-wallet.less';
@import (less) '../../views/base/priceTrigger/desktop/styles/desktop-price-trigger.less';
@import (less) '../../views/base/about/desktop/styles/desktop-about.less';
@import (less) '../../views/base/rules/desktop/styles/desktop-rules.less';
@import (less) '../../views/base/rules/permissions/desktop/styles/desktop-permissions.less';
@import (less) '../../views/base/giftCard/desktop/styles/desktop-gift-card.less';
@import (less) '../../views/base/address/desktop/styles/desktop-address.less';
@import (less) '../../views/base/educate/desktop/styles/desktop-educate.less';
@import (less) '../../views/base/aboutUs/desktop/styles/desktop-about-us.less';
@import (less) '../../views/base/earnMoney/desktop/styles/desktop-earn-money.less';
@import (less) '../../views/base/physicalReceive/desktop/styles/desktop-physical-receive.less';
@import (less) '../../views/base/fund/desktop/styles/desktop-fund.less';
@import (less) '../../views/base/gold/desktop/styles/desktop-gold.less';

html {
  scroll-behavior: smooth;
  background-color: @prefixCls-background-color;
}

body {
  font-family: var(--App-font-family) !important;
  background-color: @prefixCls-background-color !important;
  //color:#555 !important;
}

.odometer.odometer-auto-theme,
.odometer.odometer-theme-default {
  font-family: var(--App-font-family) !important;
}

html.font-dana,
html.font-dana body,
html.font-dana .ant-btn,
html.font-dana .ant-input,
html.font-dana .ant-select,
html.font-dana .ant-form,
html.font-dana .ant-table,
html.font-dana .ant-modal,
html.font-dana .ant-drawer,
html.font-dana .ant-picker,
html.font-dana .van-button,
html.font-dana .van-dialog,
html.font-dana .van-tabbar,
html.font-dana .van-nav-bar {
  font-family: var(--App-font-family) !important;
}
body {
  color-scheme: only light;
  @apply flex justify-center relative;
  position: relative;
}
@media screen and (min-width: 426px) and (max-width: 767.98px) {
  .van-popup--bottom.van-popup--round {
    width: 426px;
    left: calc(50vw - 213px);
  }
}
.wrap-fix {
  position: fixed;
  right: 0;
  left: 0;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;

  @media screen and (min-width: 426px) and (max-width: 767.98px) {
    width: 426px;
    max-width: 426px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

html.app-layout--desktop {
  @media screen and (min-width: 426px) {
    .van-popup--bottom.van-popup--round {
      width: min(480px, calc(100vw - var(--app-desktop-sidebar-width, 260px) - 48px));
      left: calc(
        (100vw - var(--app-desktop-sidebar-width, 260px) - min(480px, calc(100vw - var(--app-desktop-sidebar-width, 260px) - 48px))) / 2
      );
    }
  }

  #goftino_w {
    right: calc(var(--app-desktop-sidebar-width, 260px) + 20px) !important;
  }
}

#goftino_w {
  right: 20px;
  @media screen and (min-width: 768px) {
    right: 30vw !important;
  }
  @media screen and (min-width: 1024px) {
    right: 34vw !important;
  }
  @media screen and (min-width: 1200px) {
    right: 36vw !important;
  }
  @media screen and (min-width: 1400px) {
    right: 40vw !important;
  }
}

:root {
  color-scheme: only light;
}

.ant-form-item {
  margin-bottom: 10px !important;

  &:last-child {
    margin-bottom: 24px !important;
  }

  .ant-form-item-label {
    text-align: right !important;
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/*.van-action-sheet{
  z-index: 2001 !important;
}

.van-overlay{
  z-index: 2000 !important;
}*/

.color-transition {
  transition: color 0.3s ease;
}

.background-color-transition {
  transition: background-color 0.3s ease;
}

/* ماسک مدال — زیر لایه دراپ‌داون اینت (۹۹۹۹۹) تا تقویم/سلکت داخل مدال روی آن باز شود */
.ant-modal-mask,
.ant-modal-wrap {
  z-index: var(--app-z-modal, 5500) !important;
}

/*
 * وقتی مدال/اکشن‌شیت/دیالوگ باز است، کروم ثابت اپ (ناوبار، هدر، نوار اعتبار،
 * دکمه پشتیبانی) نباید روی پوشش تیره دیده شود.
 * Vant موقع باز شدن popup کلاس `van-overflow-hidden` را به body اضافه می‌کند؛
 * برای مدال‌های اینت هم با :has وجود wrap قابل‌مشاهده را تشخیص می‌دهیم.
 */
body.van-overflow-hidden {
  .bottom-appbar,
  .app-credit-footer,
  #support-button,
  .mpage-header,
  .mpage-subheader {
    display: none !important;
  }
}

body:has(.ant-modal-root .ant-modal-wrap:not([style*='display: none'])) {
  .bottom-appbar,
  .app-credit-footer,
  #support-button,
  .mpage-header,
  .mpage-subheader {
    display: none !important;
  }
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition-duration: 0.7s;
  transition-property: height, opacity, transform;
  transition-timing-function: cubic-bezier(0.75, 0, 0.1, 1);
  overflow: hidden;
}

.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  transform: translate(100%, 0) !important;
}

.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  transform: translate(-100%, 0) !important;
}

::-webkit-scrollbar {
  width: 0px;
  display: none; /* Safari and Chrome */
}

.otp-input {
  width: 52px;
  height: 52px;
  padding: 3px;
  margin: 0 8px;
  font-size: 20px;
  text-align: center;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background-color: white;
  //@apply bg-gray-50;

  &:focus-visible {
    background-color: #fff;
    //display: none;
    outline: none;
    border: 1px solid @App-primary-color !important;
  }
}

/* Keep in DOM for Chrome/Safari WebOTP autofill (not display:none) */
.web-otp-assist {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.number-ltr {
  @apply flex flex-row-reverse gap-1;
  direction: ltr;
}

.ant-message {
  z-index: 1000000;
}

@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Internet Explorer */
@-ms-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.home_appear_fade_in {
  -webkit-animation: fadein 0.7s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 0.7s; /* Firefox < 16 */
  -ms-animation: fadein 0.7s; /* Internet Explorer */
  -o-animation: fadein 0.7s; /* Opera < 12.1 */
  animation: fadein 0.7s;
}

.splash_appear_fade_in {
  -webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadein 3s; /* Firefox < 16 */
  -ms-animation: fadein 3s; /* Internet Explorer */
  -o-animation: fadein 3s; /* Opera < 12.1 */
  animation: fadein 3s;
}

@keyframes fadeinUp {
  from {
    transform: translateY(10px);
  }
  to {
    transform: translateY(0);
  }
}

/* Firefox < 16 */
@-moz-keyframes fadeinUp {
  from {
    transform: translateY(10px);
  }
  to {
    transform: translateY(0);
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeinUp {
  from {
    transform: translateY(10px);
  }
  to {
    transform: translateY(0);
  }
}

/* Internet Explorer */
@-ms-keyframes fadeinUp {
  from {
    transform: translateY(10px);
  }
  to {
    transform: translateY(0);
  }
}

/* Opera < 12.1 */
@-o-keyframes fadeinUp {
  from {
    transform: translateY(10px);
  }
  to {
    transform: translateY(0);
  }
}

.home_appear_fade_in_up {
  -webkit-animation: fadeinUp 0.7s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadeinUp 0.7s; /* Firefox < 16 */
  -ms-animation: fadeinUp 0.7s; /* Internet Explorer */
  -o-animation: fadeinUp 0.7s; /* Opera < 12.1 */
  animation: fadeinUp 0.7s;
}

@keyframes fadeinDown {
  from {
    transform: translateY(-10px);
  }
  to {
    transform: translateY(0);
  }
}

/* Firefox < 16 */
@-moz-keyframes fadeinDown {
  from {
    transform: translateY(-10px);
  }
  to {
    transform: translateY(0);
  }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeinDown {
  from {
    transform: translateY(-10px);
  }
  to {
    transform: translateY(0);
  }
}

/* Internet Explorer */
@-ms-keyframes fadeinDown {
  from {
    transform: translateY(-10px);
  }
  to {
    transform: translateY(0);
  }
}

/* Opera < 12.1 */
@-o-keyframes fadeinDown {
  from {
    transform: translateY(-10px);
  }
  to {
    transform: translateY(0);
  }
}

.home_appear_fade_in_down {
  -webkit-animation: fadeinDown 0.7s; /* Safari, Chrome and Opera > 12.1 */
  -moz-animation: fadeinDown 0.7s; /* Firefox < 16 */
  -ms-animation: fadeinDown 0.7s; /* Internet Explorer */
  -o-animation: fadeinDown 0.7s; /* Opera < 12.1 */
  animation: fadeinDown 0.7s;
}
.ant-select-dropdown,
.ant-picker-dropdown {
  z-index: 99999 !important;
  position: fixed !important;
}
.ant-radio-group-solid
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover{
  color:@App-primary-color !important;
}
.ant-input-group-addon{
  background-color: @App-primary-color !important;
  color: @secondary-color !important;
}
.ant-slider-track{
  background-color:@App-primary-color !important;

}
.ant-slider-handle {
  background-color: @App-primary-color !important;

}

.ant-drawer-body{
  padding: 0px !important;
}
.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover{
  color: white !important;
}

/* لودینگ محتوای صفحه — وسط ناحیه محتوا (موبایل و دسکتاپ یکسان) */
.app-page-content-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: min(52vh, 22rem);
  padding: 2rem 1rem;
}