/*
 * brand.css — JJT 5.0 бренд-көк қабаты (landing #2563AC эстетикасы).
 * style.css-тен КЕЙІН жүктеледі. Тек :root айнымалыларын override етеді
 * әрі ортақ landing-токендерін қосады. Глобаль style.css (10 580 жол) ӨЗГЕРТІЛМЕЙДІ.
 * Бір қозғалыспен бүкіл кабинет shell + ескі беттер бренд-көкке боялады.
 */

/* ── Druk Wide Cyr — сан/дисплей-тақырып (landing-пен бренд-бірлік) ── */
@font-face {
  font-family: "Druk Wide Cyr";
  src: url("/custom/fonts/DrukWideCyr/DrukWideCyr-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Montserrat — landing body-шрифті (Qabyldau/Register беттері қолданады) ── */
@font-face {
  font-family: "Montserrat";
  src: url("/custom/fonts/Montserrat/Montserrat-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/custom/fonts/Montserrat/Montserrat-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/custom/fonts/Montserrat/Montserrat-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("/custom/fonts/Montserrat/Montserrat-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ── Бренд-көк re-tint + ортақ токендер (light) ── */
:root {
  /* Лендинг бренд-көк (style.css-те #5559F4 күлгін болатын) */
  --blue: #2563AC;
  --blue-hover: #3280e3;
  --blue-tint: #f2f7fc;

  /* Ортақ landing-токендер — кабинет компоненттері var(--…) арқылы оқиды */
  --radius-lg: 16px;
  --radius-btn: 12px;
  --shadow-1: 0 1px 2px rgba(16, 42, 77, .06), 0 4px 16px rgba(16, 42, 77, .08);
  --shadow-2: 0 8px 30px rgba(37, 99, 172, .16);
  --ease-out-strong: cubic-bezier(.23, 1, .32, 1);
  --brand-gradient: linear-gradient(135deg, #2563AC 0%, #3280e3 100%);
}

/* ── Dark-mode: бренд-көк сол күйінде (қараңғы фонда да айқын) ── */
.dark-mode {
  --blue: #2563AC;
  --blue-hover: #3280e3;
  --blue-tint: #16263a;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 16px rgba(0, 0, 0, .25);
  --shadow-2: 0 8px 30px rgba(0, 0, 0, .45);
}

/* ── Жаһандық ::selection — бренд-көк (landing үйлесімі) ── */
::selection { background: #2563AC; color: #fff; }


/* ═══════════════════════════════════════════════════════════
 * КОМПОНЕНТ-ПОЛИРОВКА ҚАБАТЫ
 * Ортақ кабинет класс-атауларына landing «рецептін» (radius/shadow/
 * hover-lift/press/easing) бүкіл беттерге бірден тарату. style.css-тен
 * КЕЙІН жүктелгендіктен override болады. Тек көрнекі полировка —
 * layout өзгертпейді (тек transform + box-shadow анимацияланады).
 * ═══════════════════════════════════════════════════════════ */

/* ── Карточкалар: landing radius + жұмсақ көлеңке + hover-lift ── */
.courseCard {
  border-radius: var(--radius-lg, 16px);
  filter: none;
  box-shadow: var(--shadow-1);
  transition: transform .22s var(--ease-out-strong),
              box-shadow .22s var(--ease-out-strong);
}

@media (hover: hover) and (pointer: fine) {
  .courseCard:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-2);
  }
}

.card-Main-wrapper,
.card-Free-wrapper,
.card-News-wrapper,
.card-Free-wrapper.courseCard {
  border-radius: var(--radius-lg, 16px);
}

/* Профиль/кошелек + рейтинг-кестелер: жұмсақ карточка көрінісі */
.statement-box,
.wallet-info,
.walletModal-body,
.tableItem {
  border-radius: var(--radius-lg, 16px);
}

/* ── Батырмалар: landing radius + press-фидбек + easing ── */
.btn-main,
.btn-white,
.btn-gray,
.btn-copy,
.btn-send,
.btn-pay {
  border-radius: var(--radius-btn, 12px);
  transition: transform .16s var(--ease-out-strong),
              filter .16s ease, background-color .2s ease, color .2s ease;
}

.btn-main:active,
.btn-white:active,
.btn-gray:active,
.btn-copy:active,
.btn-send:active,
.btn-pay:active,
.btn-plain:active { transform: scale(.97); }

@media (hover: hover) and (pointer: fine) {
  .btn-main:hover { filter: brightness(1.08); }
}

.btn-main:focus-visible,
.btn-white:focus-visible,
.btn-gray:focus-visible {
  outline: 3px solid rgba(50, 128, 227, .45);
  outline-offset: 2px;
}

/* ── Инпуттар: бренд-көк focus-ring ── */
input:focus,
textarea:focus,
select:focus,
.input-form:focus,
.input-form:focus-within {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 172, .15);
}

/* ── Қозғалысты азайту қалауы ── */
@media (prefers-reduced-motion: reduce) {
  .courseCard,
  .btn-main, .btn-white, .btn-gray, .btn-copy, .btn-send, .btn-pay, .btn-plain {
    transition: none;
  }
}