@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --primaryScrollBarThumb: #29788e;
  --primaryScrollBarTrack: #001023;
  --dp-font-family: "Red Hat Display", Arial,
}

@font-face {
  font-family: 'text-security';
  src: url('../fonts/text-security-disc-compat.woff2') format('woff2');
  font-display: swap;
}

/* For Webkit-based browsers (Chrome, Safari and Opera) */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* For IE, Edge and Firefox */
.scrollbar-hide {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* tooltip-styles */
[data-tippy-root] .tippy-box {
  /* @apply bg-blue-700 dark:bg-blue-500 text-white */
}

[data-tippy-root] .tippy-box[data-placement^="top"] > .tippy-arrow::before {
  /* @apply border-t-blue-700 dark:border-t-blue-500 */
}

[data-tippy-root] .tippy-box[data-placement^="bottom"] > .tippy-arrow::before {
  /* @apply border-b-blue-700 dark:border-b-blue-500 */
}

[data-tippy-root] .tippy-box[data-placement^="left"] > .tippy-arrow::before {
  /* @apply border-l-blue-700 dark:border-l-blue-500 */
}

[data-tippy-root] .tippy-box[data-placement^="right"] > .tippy-arrow::before {
  /* @apply border-r-blue-700 dark:border-r-blue-500 */
}


.tippy-box {
  /* @apply !bg-white !p-0 !rounded-12 !shadow-1 !text-black-900 */
  @apply !bg-transparent !p-0 !text-current
  /* background-color: white; */
  /* padding: 0px; */
  /* border-radius: 12px; */
  /* box-shadow: 0px 12px 28px rgba(26, 35, 59, 0.28), inset 0px 0px 0px 0.5px #C0C3C8; */
}
.tippy-content {
  @apply !p-0
}

/* notification-styles */
body .Vue-Toastification__toast {
  @apply min-h-48 px-40 py-12 rounded-12
}

body .Vue-Toastification__toast--error {
  @apply bg-semantic-error
}

body .Vue-Toastification__toast--success {
  @apply bg-semantic-success
}

body .Vue-Toastification__icon {
  @apply mr-8 my-0
}

body .Vue-Toastification__toast-body {
  @apply text-14 font-500
}

body .Vue-Toastification__close-button {
  @apply leading-[20px] h-20
}


/* calendar-styles */
body .vc-pane,
body .vc-weeks {
  /* @apply min-w-0; */
}

body .vc-container {
  @apply border-none bg-transparent;
}

body .vc-title {
  @apply text-h5;
}

body .vc-weekday {
  @apply text-tiny text-black-600;
}

body .vc-day-content {
  @apply text-body-2;
}

body .vc-highlights + .vc-day-content {
  /* @apply !text-white; */
}

body .vc-focusable {
  /* @apply bg-primary-background */
}

body .vc-highlights {
  /* @apply bg-primary-background */
}

body .vc-highlight {
  /* @apply !bg-primary-background */
  @apply !bg-black-900 !font-500
}

body .vc-highlight-base-middle {
  @apply !bg-black-100
}

body .vc-highlight-base-start {
  /* @apply !bg-primary-background */
}

body .vc-highlight-content-outline {
  @apply text-white
}

/* otp-input-styles */
.otp-input {
  text-align: center;
}

/* swiper-styles */
.swiper {
  /* @apply !overflow-visible; */
}
.swiper-wrapper {
  /* @apply !overflow-hidden; */
}
.swiper-pagination-bullets {
  @apply !relative !bottom-0 mt-20 leading-[100%];
}
.swiper-pagination-bullet {
  @apply !bg-white !border-2 !border-black-900 !w-14 !h-14 !mx-6 !opacity-100 !border-opacity-60
}
.swiper-pagination-bullet-active {
  @apply !bg-primary-background !border-primary-background
}

/* Пагинация каруселей дашборда — полоски вместо кружков.
   Кружок 14x14 плюс mt-20 занимает 34px под каруселью, и это заметная доля
   высоты блока: на дашборде каруселей две, одна над другой в соседних
   колонках. Полоска 16x4 читается как индикатор прогресса, а не как отдельные
   точки.
   Свой отступ сверху им не нужен: точки лежат в полосе фиксированной высоты,
   которую блоки резервируют под себя сами (см. DashboardCards и
   WalletBalanceBasic), и глобальный mt-20 эту высоту сбивал бы.
   Правило намеренно сужено до .dashboard-carousel: те же буллеты используются
   на лендинге и в других каруселях, где менять их незачем. */
.dashboard-carousel .swiper-pagination-bullets {
  @apply !mt-0;
}
.dashboard-carousel .swiper-pagination-bullet {
  @apply !bg-black-400 !border-0 !w-16 !h-4 !rounded-full !mx-3 !opacity-100;
}
.dashboard-carousel .swiper-pagination-bullet-active {
  @apply !bg-primary-background;
}

/* scroll-smooth for anchors */
html {
  @apply scroll-smooth
}
.swiper-button-prev,
.swiper-button-next {
  /* @apply !text-blue-700 dark:!text-blue-500 */
}
.swiper-button-next {
  /* @apply !right-auto !left-full ml-10; */
} 
.swiper-button-prev {
  /* @apply !left-auto !right-full mr-10; */
}

/* scroll-smooth for anchors */
html {
  @apply scroll-smooth
}

/* TODO: fix to tailwind */
/* decor-dot-style */
.decor-dot {
  position: relative;
  padding: 0 0 0 15px;
}

.decor-dot:before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 4px;
  height: 4px;
  /* @apply bg-blue-700; */
  border-radius: 50%;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;  
  scrollbar-width: none;  
}

.rightOverlay::before {
  content: "";
  position: absolute;
  right: -5px;
  height: 40px;
  z-index: 10;
  width: 25px;
  background: linear-gradient(270deg, #FFFFFF 42.31%, rgba(255, 255, 255, 0) 100%);
}

.leftOverlay::after {
  content: "";
  position: absolute;
  left: -5px;
  height: 40px;
  z-index: 10;
  width: 25px;
  background: linear-gradient(270deg, #FFFFFF 42.31%, rgba(255, 255, 255, 0) 100%);
  transform: matrix(-1, 0, 0, 1, 0, 0);
}

body .dark .decor-dot:before {
  background-color: #3C4699;
}

@layer components {
  .start-animate {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  }
  .infinite-animate {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
  }
}

@layer base {
  :root {
    --color-primary: 60 70 153;
  }
  :root[class="dark"] {
    --color-primary: 60 70 153;
  }

  /* .primary-saffron{ */
    /* @apply  */
  /* } */

  /* scroll-style */
  * {
    scrollbar-color: #FF5252 #fff;
    scrollbar-width: thin;
    @apply outline-none;
  }

  .dark,
  .dark * {
    scrollbar-color: #FF5252 #1E2024;
  }

  *::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background: transparent;
  }

  *::-webkit-scrollbar-track {
    background: #fff;
  }

  .dark::-webkit-scrollbar-track,
  .dark *::-webkit-scrollbar-track {
    background: #1E2024;
  }

  *::-webkit-scrollbar-thumb {
    background: #FF5252;
  }

  .dark::-webkit-scrollbar-thumb,
  .dark *::-webkit-scrollbar-thumb {
    background: #FF5252;
  }

  .textarea a {
    /* @apply text-blue-700 dark:text-blue-500; */
  }

  .text-link,
  a {
    @apply text-primary-red-dark underline hover:no-underline cursor-pointer;
  }
  
  select {
    @apply appearance-none bg-transparent cursor-pointer;
    font: inherit;
  }
  
  textarea,
  input {
    font: inherit;
    @apply bg-transparent;
  }

  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active {
    -webkit-transition: 'color 9999s ease-out, background-color 9999s ease-out';
    -webkit-transition-delay: 9999s;
  }

  select,
  textarea,
  input {
    /* @apply placeholder-gray-700 */
  }

  
  input[type=number]::-webkit-inner-spin-button,
  input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  body, html {
    scrollbar-gutter: stable;
  }

  /* На мобильном документ прокручивается нативным жестом, а полоса прокрутки
     только дублирует этот сигнал. Глобальный красный thumb выше превращал её
     в яркий вертикальный «маркер» поверх интерфейса, особенно заметный в iOS
     Safari во время схлопывания панели браузера. Внутренние скролл-контейнеры
     не трогаем — скрывается только scrollbar корневого документа. */
  @media (max-width: 1199px) {
    /*
     * Фон и у html, и у body — как на main и production. С фоном у html body
     * красит свой бокс сам, и в мобильном кабинете под ним прячется слой
     * картинки .app-bg-fixed (isolation у #app там снят, см. app.vue). На
     * страницах входа фон html не задан, там картинка видна.
     */
    html.account-page-root,
    body.account-page {
      /* Тот же чёрный, что у нижнего бара и у шапки: именно с фона элементов у
         края экрана Safari берёт тон своей панели. */
      background-color: #05060A;
    }

    html.account-page-root,
    body.account-page {
      /*
       * Отключаем резиновую оттяжку и pull-to-refresh в кабинете.
       *
       * Замер на iPhone (Safari 26) показал: когда страница стоит ровно в
       * верхней точке, протяжка вверх, начатая с банковской карты, не
       * прокручивает ничего — палец уезжает на 179px, событий touchmove
       * приходит два десятка, а позиция остаётся нулевой. С той же карты, но с
       * уже прокрученной страницы, всё работает, и с соседних элементов в
       * верхней точке тоже. То есть жест забирает механика оверскролла: у
       * карты собственный композиционный слой (perspective + preserve-3d), и в
       * связке с «натяжением» у верхнего края он гасит прокрутку.
       *
       * none, а не contain: contain запрещает только передачу прокрутки наружу
       * (pull-to-refresh), а сам «отскок» у края оставляет. При отскоке снизу
       * документ уезжает вверх и из-под него на высоту оттяжки показывается
       * фон — в iOS это выглядело как синяя полоса между футером и таб-баром.
       * none убирает и отскок. Цена — в кабинете больше нет обновления страницы
       * жестом сверху; перезагрузка остаётся через адресную строку. На
       * лендинге поведение прежнее: класс вешает только pages/account.vue.
       */
      overscroll-behavior-y: none;
    }

    body,
    html {
      scrollbar-gutter: auto;
      scrollbar-width: none;
    }

    body::-webkit-scrollbar,
    html::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }
  }

  body {
    @apply font-redhat bg-primary-background text-body-1 text-black-900
  }

  .text-h1 {
    @apply text-26 md:text-28 font-700
  }
  .text-h2 {
    @apply text-19 md:text-20 font-700
  }
  .text-h3 {
    @apply text-17 font-650
  }
  .text-h4 {
    @apply text-17 font-500
  }
  .text-h5 {
    @apply text-15 font-700
  }
  .text-subtle {
    @apply text-16 font-600
  }
  .text-body-1 {
    /* @apply text-15 font-500 */
    @apply text-14 font-500
  }
  .text-body-2 {
    @apply text-13 font-500
  }
  .text-tiny {
    @apply text-11 font-500
  }
  .text-button-1 {
    /* @apply text-15/24 font-650 */
    @apply text-14 font-650
  }
  .text-button-2 {
    @apply text-12 font-650
  }
  .text-label {
    @apply text-13 font-500
  }

  /* Chivo Mono для таймера: моноширинный, чтобы цифры отсчёта не прыгали */
  .chivo-mono-timer {
    font-family: "Chivo Mono", monospace;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
  }
}