@import './fonts.less';
/*@font-face {
  font-family: iranyekan;
  font-style: normal;
  font-weight: bold;
  src: url('iranyekan_fonts/eot/iranyekanwebboldfanum.eot');
  src: url('iranyekan_fonts/eot/iranyekanwebboldfanum.eot?#iefix') format('embedded-opentype'),  !* IE6-8 *!
  url('iranyekan_fonts/woff/iranyekanwebboldfanum.woff') format('woff'),  !* FF3.6+, IE9, Chrome6+, Saf5.1+*!
  url('iranyekan_fonts/ttf/iranyekanwebboldfanum.ttf') format('truetype');
}


@font-face {
  font-family: iranyekan;
  font-style: normal;
  font-weight: 100;
  src: url('iranyekan_fonts/eot/iranyekanwebthinfanum.eot');
  src: url('iranyekan_fonts/eot/iranyekanwebthinfanum.eot?#iefix') format('embedded-opentype'),  !* IE6-8 *!
  url('iranyekan_fonts/woff/iranyekanwebthinfanum.woff') format('woff'),  !* FF3.6+, IE9, Chrome6+, Saf5.1+*!
  url('iranyekan_fonts/ttf/iranyekanwebthinfanum.ttf') format('truetype');
}

@font-face {
  font-family: iranyekan;
  font-style: normal;
  font-weight: 300;
  src: url('iranyekan_fonts/eot/iranyekanweblightfanum.eot');
  src: url('iranyekan_fonts/eot/iranyekanweblightfanum.eot?#iefix') format('embedded-opentype'),  !* IE6-8 *!
  url('iranyekan_fonts/woff/iranyekanweblightfanum.woff') format('woff'),  !* FF3.6+, IE9, Chrome6+, Saf5.1+*!
  url('iranyekan_fonts/ttf/iranyekanweblightfanum.ttf') format('truetype');
}

@font-face {
  font-family: iranyekan;
  font-style: normal;
  font-weight: normal;
  src: url('iranyekan_fonts/eot/iranyekanwebregularfanum.eot');
  src: url('iranyekan_fonts/eot/iranyekanwebregularfanum.eot?#iefix') format('embedded-opentype'),  !* IE6-8 *!
  url('iranyekan_fonts/woff/iranyekanwebregularfanum.woff') format('woff'),  !* FF3.6+, IE9, Chrome6+, Saf5.1+*!
  url('iranyekan_fonts/ttf/iranyekanwebregularfanum.ttf') format('truetype');
}

@font-face {
  font-family: iranyekan;
  font-style: normal;
  font-weight: 500;
  src: url('iranyekan_fonts/eot/iranyekanwebmediumfanum.eot');
  src: url('iranyekan_fonts/eot/iranyekanwebmediumfanum.eot?#iefix') format('embedded-opentype'),  !* IE6-8 *!
  url('iranyekan_fonts/woff/iranyekanwebmediumfanum.woff') format('woff'),  !* FF3.6+, IE9, Chrome6+, Saf5.1+*!
  url('iranyekan_fonts/ttf/iranyekanwebmediumfanum.ttf') format('truetype');
}

@font-face {
  font-family: iranyekan;
  font-style: normal;
  font-weight: 800;
  src: url('iranyekan_fonts/eot/iranyekanwebextraboldfanum.eot');
  src: url('iranyekan_fonts/eot/iranyekanwebextraboldfanum.eot?#iefix') format('embedded-opentype'),  !* IE6-8 *!
  url('iranyekan_fonts/woff/iranyekanwebextraboldfanum.woff') format('woff'),  !* FF3.6+, IE9, Chrome6+, Saf5.1+*!
  url('iranyekan_fonts/ttf/iranyekanwebextraboldfanum.ttf') format('truetype');
}

@font-face {
  font-family: iranyekan;
  font-style: normal;
  font-weight: 850;
  src: url('iranyekan_fonts/eot/iranyekanwebblackfanum.eot');
  src: url('iranyekan_fonts/eot/iranyekanwebblackfanum.eot?#iefix') format('embedded-opentype'),  !* IE6-8 *!
  url('iranyekan_fonts/woff/iranyekanwebblackfanum.woff') format('woff'),  !* FF3.6+, IE9, Chrome6+, Saf5.1+*!
  url('iranyekan_fonts/ttf/iranyekanwebblackfanum.ttf') format('truetype');
}

@font-face {
  font-family: iranyekan;
  font-style: normal;
  font-weight: 900;
  src: url('iranyekan_fonts/eot/iranyekanwebextrablackfanum.eot');
  src: url('iranyekan_fonts/eot/iranyekanwebextrablackfanum.eot?#iefix') format('embedded-opentype'),  !* IE6-8 *!
  url('iranyekan_fonts/woff/iranyekanwebextrablackfanum.woff') format('woff'),  !* FF3.6+, IE9, Chrome6+, Saf5.1+*!
  url('iranyekan_fonts/ttf/iranyekanwebextrablackfanum.ttf') format('truetype');
}*/

/*.iranyekan{
  font-family: iranyekan , arial, helvetica, sans-serif !important;
}*/

/////////////////////////////////
/*@font-face {
  font-family: yekan_bakh;
  font-style: normal;
  font-weight: 100;
  src: url('fonts/woff/yekan_bakh_fanum_thin.woff') format('woff'),
  url('fonts/woff2/yekan_bakh_fanum_thin.woff2') format('woff2');
}

@font-face {
  font-family: yekan_bakh;
  font-style: normal;
  font-weight: 300;
  src: url('fonts/woff/yekan_bakh_fanum_light.woff') format('woff'),
  url('fonts/woff2/yekan_bakh_fanum_light.woff2') format('woff2');

}

@font-face {
  font-family: yekan_bakh;
  font-style: normal;
  font-weight: normal;
  src: url('fonts/woff/yekan_bakh_fanum_regular.woff') format('woff'),
  url('fonts/woff2/yekan_bakh_fanum_regular.woff2') format('woff2');

}

@font-face {
  font-family: yekan_bakh;
  font-style: normal;
  font-weight: 600;
  src: url('fonts/woff/yekan_bakh_fanum_semi_bold.woff') format('woff'),
  url('fonts/woff2/yekan_bakh_fanum_semi_bold.woff2') format('woff2');

}

@font-face {
  font-family: yekan_bakh;
  font-style: normal;
  font-weight: bold;
  src: url('fonts/woff/yekan_bakh_fanum_bold.woff') format('woff'),
  url('fonts/woff2/yekan_bakh_fanum_bold.woff2') format('woff2');

}

@font-face {
  font-family: yekan_bakh;
  font-style: normal;
  font-weight: 800;
  src: url('fonts/woff/yekan_bakh_fanum_extra_bold.woff') format('woff'),
  url('fonts/woff2/yekan_bakh_fanum_extra_bold.woff2') format('woff2');

}

@font-face {
  font-family: yekan_bakh;
  font-style: normal;
  font-weight: 900;
  src: url('fonts/woff/yekan_bakh_fanum_black.woff') format('woff'),
  url('fonts/woff2/yekan_bakh_fanum_black.woff2') format('woff2');

}

@font-face {
  font-family: yekan_bakh;
  font-style: normal;
  font-weight: 950;
  src: url('fonts/woff/yekan_bakh_fanum_extra_black.woff') format('woff'),
  url('fonts/woff2/yekan_bakh_fanum_extra_black.woff2') format('woff2');
}
.yekan_bakh{
  font-family: yekan_bakh , arial, helvetica, sans-serif
}*/


//////////////////////////////////
/*@font-face {
  font-family: 'sedmedgh';
  src: url("./font/ligth.ttf");
  font-weight: 300;
}

@font-face {
  font-family: 'sedmedgh';
  src: url("./font/regular.ttf");
  font-weight: 400;
}

@font-face {
  font-family: 'sedmedgh';
  src: url("./font/medium.ttf");
  font-weight: 500;
}

@font-face {
  font-family: 'sedmedgh';
  src: url("./font/bold.ttf");
  font-weight: 600;
}

@font-face {
  font-family: 'sedmedgh';
  src: url("./font/heavy.ttf");
  font-weight: 700;
}

@font-face {
  font-family: 'sedmedgh';
  src: url("./font/fat.ttf");
  font-weight: 800;
}*/

///////////////////////////////////////////

//@font-face {
//  font-family: 'sedmedgh';
//  src: url("./font/iranekan/thin.ttf");
//  font-weight: 300;
//}
//
//@font-face {
//  font-family: 'sedmedgh';
//  src: url("./font/iranekan/light.ttf");
//  font-weight: 400;
//}
//
//@font-face {
//  font-family: 'sedmedgh';
//  src: url("./font/iranekan/regular.ttf");
//  font-weight: 500;
//}
//
//@font-face {
//  font-family: 'sedmedgh';
//  src: url("./font/iranekan/medium.ttf");
//  font-weight: 600;
//}
//
//@font-face {
//  font-family: 'sedmedgh';
//  src: url("./font/iranekan/bold.ttf");
//  font-weight: 700;
//}
//
//@font-face {
//  font-family: 'sedmedgh';
//  src: url("./font/iranekan/heavy.ttf");
//  font-weight: 800;
//}
//
//@font-face {
//  font-family: 'sedmedgh';
//  src: url("./font/iranekan/fat.ttf");
//  font-weight: 900;
//}
//
///////////////////////////////////////
//
//
//
//@font-face {
//  font-family: 'sedmedgh';
//  src: url("./font/iranekan/light.ttf");
//  font-weight: 300;
//}
//
//@font-face {
//  font-family: 'sedmedgh';
//  src: url("./font/iranekan/regular.ttf");
//  font-weight: 400;
//}
//
//@font-face {
//  font-family: 'sedmedgh';
//  src: url("./font/iranekan/medium.ttf");
//  font-weight: 500;
//}
//
//@font-face {
//  font-family: 'sedmedgh';
//  src: url("./font/iranekan/bold.ttf");
//  font-weight: 600;
//}
//
//@font-face {
//  font-family: 'sedmedgh';
//  src: url("./font/iranekan/heavy.ttf");
//  font-weight: 700;
//}
//
//@font-face {
//  font-family: 'sedmedgh';
//  src: url("./font/iranekan/fat.ttf");
//  font-weight: 800;
//}




body, * {
  font-family: iransans, yekan_bakh, sans-serif, tahoma;
  //letter-spacing: 0px !important;
  font-size: @font-size;
  line-height: inherit;
  font-weight: inherit;
}



.rtl {
  direction: rtl !important;
}

.ltr {
  direction: ltr !important;
}

.no-scrollbar {
  &::-webkit-scrollbar {
    display: none;
  }
}
*{
  .no-scrollbar;
}
// headings
h1, h2, h3, h4, h5, h6, h7, h8 {
  margin-bottom: 1.2em;
  color: @primary;
}

h1, .h1 {
  font-size: @h1-font-size;
}

h2, .h2 {
  font-size: @h2-font-size;
}

h3, .h3 {
  font-size: @h3-font-size;
}

h4, .h4 {
  font-size: @h4-font-size;
}

h5, .h5 {
  font-size: @h5-font-size;
}

h6, .h6 {
  font-size: @h6-font-size;
}

p {
  margin-bottom: 10px;
}

// Phone column width. On desktop the shell centres at this size so the app
// does not stretch into a loose website layout. Tab bar already sat near 420.
:root {
  --app-max-width: 430px;
}

html, body {
  overscroll-behavior-y: contain;
  background: @page;
}

@media (min-width: 431px) {
  html, body {
    // Side gutters behind the centred phone column (#app max-width).
    background: @canvasSoft !important;
  }
}

// Fixed overlays teleported to <body> (outside #app) — pin them to the same
// column. Below --app-max-width, max(0, …) collapses to full bleed.
.app-frame-x {
  left: max(0px, calc(50vw - (var(--app-max-width) / 2)));
  right: max(0px, calc(50vw - (var(--app-max-width) / 2)));
  width: auto;
}

// Ant bottom drawers (order detail, status sheet) — same phone width, centred.
.ant-drawer-bottom > .ant-drawer-content-wrapper {
  max-width: var(--app-max-width);
  margin-inline: auto;
}

.overflow-x-auto {
  overscroll-behavior-x: contain;
}

.overflow-y-auto {
  overscroll-behavior-y: contain;
}

input:focus-visible {
  outline: none;
}

.@{prefix} {
  &-form {
    &.ant-form {
      background: transparent !important;
      color: @white !important;
    }

    .ant-btn-primary[disabled], .ant-btn-primary[disabled]:hover, .ant-btn-primary[disabled]:focus, .ant-btn-primary[disabled]:active {
      background: alpha(@white, 20%);
      color: alpha(@white, 50%);
      border-color: transparent;
    }

    .ant-form-item {
      label, input {
        background: transparent !important;
        color: @white !important;
      }
    }
  }

  &-rounded-drawer {
    background: transparent;

    .ant-drawer-content-wrapper {
      box-shadow: none !important;
    }

    .ant-drawer-content {
      background: transparent !important;;
    }
    &.bg-white .ant-drawer-body {
      background: white;
      border-radius: 15px 15px 0px 0px;

    }
    &.bg-primaryLighten .ant-drawer-body {
      background: @primaryLighten;
      border-radius: 30px 30px 0px 0px;
    }
  }

  &-custom-scrollbar {
    padding: 0 10px;

    &::-webkit-scrollbar {
      width: 8px;
    }

    /* Handle */

    &::-webkit-scrollbar-thumb {
      background: transparent;
      border-radius: 10px;
    }

    /* Handle on hover */

    &:hover::-webkit-scrollbar-thumb {
      background: #ffffff80;
    }
  }
}

.ant {
  &-empty-image img{
    object-fit: contain;
  }

  &-timeline-item-content {
    margin: 0 26px 0 0;
  }

  &-timeline-item-tail {
    left: unset;
    right: 4px;
  }

  &-btn {
    display: flex !important;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;

    i {
      margin-right: 10px;
    }

    span {
      font-weight: 600;
    }

    &-lg {
      span {
        font-size: 20px;
      }
    }

    &-secondary,
    &-secondary:hover,
    &-secondary:focus {
      border-color: @primary;
      background: @primary;
      color: @white;

      &.ant-btn-background-ghost {
        color: @primary;
        border-color: @primary;
        text-shadow: none;
      }
    }

    &-light,
    &-light:hover,
    &-light:focus {
      color: @primary;
      border-color: @light;
      background: @light;
    }
  }

  &-form-vertical .ant-form-item-label, .ant-col-24.ant-form-item-label, .ant-col-xl-24.ant-form-item-label {
    text-align: right !important;

  }
//&-ant-form-item-label > label{
//  font-size: 50px!important;
//}
  &-tabs-tab + .ant-tabs-tab {
    margin: 0 32px 0 0;
  }

  &-tabs > .ant-tabs-nav .ant-tabs-nav-wrap, .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-wrap {
    justify-content: flex-end;
  }

  &-drawer-bottom.rtl {
    .ant-drawer-body {
      .no-scrollbar;
    }
  }

  &-radio-button-wrapper {
    border-left-width: 1.02px;

    &:not(:first-child)::before {
      left: unset;
      right: -1px;
    }

    &:first-child {
      border-radius: 0 5px 5px 0;
    }

    &:last-child {
      border-radius: 5px 0 0 5px;
    }
  }

  &-radio-group.flex {
    display: flex !important;

    .ant-radio-button-wrapper {
      flex: 1 1 0%;
    }
  }
}

.content {
  content: '';
  display: inline-block;
  width: 8px;
}

.before {
  &\:mark:before {
    @apply content;
    width: 4px;
    padding: .2rem;
    @apply top-4;
    //position: absolute;
    right: 0;
    height: 48px;
    border-radius: 5px 0 0 5px;
    background: @secondary;
    color: @secondary;
  }
  &\:bullet {
    font-size: 13px;

    &:before {
      @apply content;
      height: 8px;
      border-radius: 100%;
      margin-left: 10px;
    }
  }

  &\:bg {
    &-secondary:before {
      @apply content;
      background: @secondary;
    }

    &-primary:before {
      @apply content;
      background: @primary;
    }
  }

  &\:text {
    &-secondary:before {
      content: '1';
      color: @secondary;
    }

    &-primary:before {
      content: '1';
      color: @primary;
    }
  }
}

.hide-counter {
  .ant-input-number-handler-wrap {
    visibility: hidden;
    display: none;
  }
}
.ant-select{
  width: 100% !important;
  .ant-select-selector{
    height: 3rem !important;
    align-items: center;
  }
}
*:not(input) {
  user-select: none; /* supported by Chrome and Opera */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
}

.ant-empty-image img,.ant-empty-image{
  width: 100%;
  height: 40vh
}

// v-lazy images (vue3-lazyload sets lazy="loading" | "loaded" | "error").
// Hidden until the real file has loaded, then faded in, so a card never shows
// a placeholder that is then swapped out, or a photo painting in top-down.
img[lazy='loading'] {
  opacity: 0;
}

img[lazy='loaded'],
img[lazy='error'] {
  opacity: 1;
  transition: opacity 0.35s ease;
}

// Shimmering placeholder block for content that is still loading.
.skeleton {
  position: relative;
  overflow: hidden;
  background: @hairlineSoft;

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(100%);
    background: linear-gradient(90deg, transparent, alpha(@canvas, 65%), transparent);
    animation: skeleton-sweep 1.3s ease-in-out infinite;
  }
}

// RTL page, so the sweep runs right to left.
@keyframes skeleton-sweep {
  to {
    transform: translateX(-100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
}

// First-paint entrance (driven by composables/useReveal.ts): put `reveal` on
// each section and `is-revealed` on their container once the data is in. Each
// section rises a little, scales up from just under full size and fades in,
// one beat (--reveal-delay) after the one above it.
//
// The curve is a long decelerate with no overshoot — it starts fast, settles
// slowly and never bounces back. The travel is deliberately small (14px, 2% of
// scale): the content should look like it was always there and simply came
// into focus, not like it flew in.
//
// The settled state is `transform: none`, not an identity transform: any
// transform left on a section would make it the containing block for fixed
// elements inside it and give it a permanent stacking context.
.reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.98);
  will-change: transform, opacity;
}

.is-revealed .reveal {
  opacity: 1;
  transform: none;
  will-change: auto;
  transition:
    opacity 0.62s cubic-bezier(0.32, 0.72, 0, 1) var(--reveal-delay, 0ms),
    transform 0.62s cubic-bezier(0.32, 0.72, 0, 1) var(--reveal-delay, 0ms);
}

// Respect a reduced-motion preference: show the content, skip the choreography.
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
  }
  .is-revealed .reveal {
    transition: none;
  }
}

/* ── Appearance: theme switch & reduced motion ─────────────────
   Classes set on <html> by stores/appearanceStore.ts (and, before the bundle
   loads, by the boot script in index.html). */

// One-frame guard while the palette flips: without it every element with a
// colour transition animates from the old theme to the new one at once.
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
  transition: none !important;
}

// "Fast & light" mode. Not "no motion": the aim is speed without the app
// going dead, so
//   - every transition still runs, capped at 120ms with no delay — taps still
//     press, colours still change, sheets and pages still arrive, just quick;
//   - keyframe animations run one near-instant iteration, so decorative loops
//     (pulses, shimmers, illustration loops) stop at rest and one-shot reveals
//     land in their final state;
//   - backdrop blurs (recomputed every frame anything moves behind them) and
//     permanent will-change layers are dropped;
//   - .keep-motion opts working motion out: spinners, and the toast progress
//     bar whose animationend is what closes the toast. vant's own <Loading>
//     spinner is excluded by class.
html.motion-reduced :where(*:not(.keep-motion, .keep-motion *, .van-loading, .van-loading *)),
html.motion-reduced :where(*:not(.keep-motion, .keep-motion *, .van-loading, .van-loading *))::before,
html.motion-reduced :where(*:not(.keep-motion, .keep-motion *, .van-loading, .van-loading *))::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: 0.12s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}

html.motion-reduced *,
html.motion-reduced *::before,
html.motion-reduced *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  will-change: auto !important;
}

// Glass that was only legible because of its blur gets a near-solid fill.
html.motion-reduced .tabbar__inner,
html.motion-reduced .toast {
  background: alpha(@canvas, 97%) !important;
}

/* ── Dark theme: third-party surfaces ──────────────────────────
   ant-design-vue compiles its theme at build time with black text
   (fade(@black, 85%)) and white fills; only its surface backgrounds were
   switched to the theme tokens (themeConfig.ts). The text and input chrome it
   leaves light-only are covered here. vant follows on its own through the
   .van-theme-dark class. */
html.theme-dark body {
  color: @ink;
}

html.theme-dark {
  .ant-input,
  .ant-input-affix-wrapper,
  .ant-input-number,
  textarea.ant-input {
    color: @ink;
    background-color: @canvas;
    border-color: @hairline;
  }
  .ant-input::placeholder,
  textarea.ant-input::placeholder {
    color: @inkFaint;
  }
  .ant-input-affix-wrapper > input.ant-input {
    background-color: transparent;
  }
  .ant-form-item-label > label,
  .ant-drawer-title,
  .ant-spin-text {
    color: @ink;
  }
  .ant-form-item-explain-error {
    color: @red;
  }
  .ant-empty-description {
    color: @inkFaint;
  }
  .ant-drawer-header {
    border-bottom-color: @hairline;
  }
  .ant-slider-handle {
    background-color: @canvas;
  }
}

// Dark: the toast's frosted glass is mostly clear by design, which on a dark
// page leaves nothing to separate it from what scrolls beneath. Give it a
// near-solid card fill and a hairline edge instead.
html.theme-dark .toast {
  background: alpha(@canvas, 94%) !important;
  box-shadow:
    inset 0 0 0 1px @hairline,
    0 18px 40px -14px rgba(0, 0, 0, 0.6) !important;
}