/* ==========================================================================
1. Base / Базовые переменные и сброс
========================================================================== */
:root {
  --color-primary: #0772A0;
  --color-border: #D8DAE7;
  --color-dark: #373A4C;
  --color-danger: #E04265;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --tap-target: 44px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

input,
textarea,
select,
button {
  font: inherit;
  max-width: 100%;
}

/* Предотвращает зум на iOS при фокусе в полях ввода */
input,
textarea,
select {
  font-size: 16px;
}

h1, h2, h3, h4, h5, h6,
p, li, a, button, input, textarea {
  overflow-wrap: break-word;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.open-menu:focus-visible,
.tm-offcanvas-close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
2. Interactive / Touch fix
========================================================================== */
a,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
[role="button"],
summary,
label,
.btn,
.btn-yellow,
.btn-blue-small,
.uk-button,
.open-menu,
.tm-offcanvas-close {
  touch-action: manipulation;
}

button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"] {
  cursor: pointer;
}

/* ==========================================================================
3. Media Queries (Desktop to Mobile)
========================================================================== */

/* 1200px */
@media (max-width: 1200px) {
  .logout-block,
  .main-menu > li,
  .logout-block > li + li,
  .block-login,
  #cartbox {
    margin-left: 20px;
  }

  .main-menu {
    margin-left: -20px;
  }

  .col-1-3 {
    margin-left: 20px;
    width: calc(33.3333% - 20px);
    margin-bottom: 20px;
    min-width: 0;
  }

  .col-1-2 {
    margin-left: 20px;
    width: calc(50% - 20px);
    margin-bottom: 20px;
    min-width: 0;
  }

  .row:not(.training_list) {
    margin-left: -20px;
    margin-bottom: -20px;
  }

  .attach {
    display: block;
  }

  .sidebar-image {
    margin: -20px -20px 0;
  }

  .sidebar > * {
    padding: 20px;
  }

  .sidebar-only-image {
    margin: -20px;
  }

  .answer,
  .dialog_item__answer {
    margin-left: 60px;
    min-width: 0;
  }

  .content-wrap,
  .content-courses,
  .lesson-sidebar-inside {
    margin-left: -20px;
  }

  .content-wrap > *,
  .content-courses > *,
  .lesson-sidebar-inside > * {
    padding-left: 20px;
  }

  body.aff-desc-page #content .maincol-inner,
  body.aff-page div.maincol {
    margin-left: 0 !important;
    padding-left: 20px !important;
  }

  body.training-page div.maincol,
  body.training-page div.maincol_min,
  body.section-page div.maincol,
  body.section-page div.maincol_min,
  body.lesson-page div.maincol,
  body.lesson-page div.maincol_min,
  body.training-options-page div.maincol,
  body.training-options-page div.maincol_min {
    margin-left: 20px !important;
    padding-left: 0;
  }
}

/* 1024px */
@media (max-width: 1024px) {
  .contentbody .widget-header,
  .hero-wrap h1,
  .hero-wrap .h1 {
    font-size: 42px;
  }

  .cabinet-lk {
    padding-top: 60px;
  }
}

/* 991px */
@media (max-width: 991px) {
  .open-menu {
    display: block;
    min-height: var(--tap-target);
  }

  header .main-menu {
    display: block;
    margin: 51px 20px 20px;
  }

  header .main-menu > li {
    margin-left: 0;
    border-bottom: 1px solid var(--color-border);
    padding: 6px 0;
  }

  .main-menu > li > a {
    display: flex;
    padding: 6px 0;
    line-height: 2;
    height: auto;
    align-items: center;
    min-height: var(--tap-target);
  }

  header .main-menu a {
    text-decoration: none !important;
    line-height: 20px;
    font-size: 14px;
  }

  header .main-menu .submenu {
    display: none;
    padding: 0 15px;
  }

  header .main-menu .submenu.active {
    display: block;
  }

  header .main-menu .submenu li {
    list-style: none;
  }

  header .main-menu .submenu li::marker {
    content: '';
  }

  header .main-menu .submenu a {
    line-height: 16px;
    padding: 6px 0;
    height: auto;
    min-height: var(--tap-target);
    display: flex;
    align-items: center;
  }

  header .main-menu .icon-arrow-down {
    display: inline-block;
    margin-left: auto;
    font-size: 6px;
    padding: 7px 0 7px 7px;
  }

  header .topmenu .tm-offcanvas-close {
    top: 20px;
    right: 20px;
    width: var(--tap-target);
    height: var(--tap-target);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  header .topmenu .icon-close {
    font-size: 20px;
  }

  .logo {
    margin-right: 0;
    min-width: 1px;
  }

  .col-1-3 {
    width: calc(50% - 20px);
  }

  .product_img {
    margin-left: 20px;
    width: calc(35% - 20px);
    min-width: 0;
  }

  .product_info {
    margin-left: 20px;
    width: calc(65% - 20px);
    min-width: 0;
  }

  .product_page {
    margin-left: -20px;
  }

  .answer,
  .dialog_item__answer {
    margin-left: 45px;
  }

  /* Off-canvas */
  .tm-offcanvas-close {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap-target);
    min-height: var(--tap-target);
  }

  .uk-offcanvas {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.1);
    touch-action: manipulation;
  }

  .uk-offcanvas.uk-active {
    display: block;
    touch-action: none;
  }

  .uk-offcanvas-page {
    position: fixed;
    margin-left: 0;
    transition: margin-left 0.3s ease-in-out;
    scrollbar-gutter: stable;
  }

  .uk-offcanvas-bar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1001;
    width: 270px;
    max-width: 85vw;
    background: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    touch-action: pan-y;
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  .uk-offcanvas.uk-active .uk-offcanvas-bar.uk-offcanvas-bar-show {
    transform: translateX(0%);
  }

  .uk-offcanvas-bar-flip {
    left: auto;
    right: 0;
    transform: translateX(100%);
  }

  .uk-offcanvas-bar[mode='none'] {
    transition: none;
  }

  .uk-offcanvas-bar[mode='reveal'] {
    transform: translateX(0%);
    clip: rect(0, 0, 100vh, 0);
    clip: rect(0, 0, 100dvh, 0);
    transition: transform 0.3s ease-in-out, clip 0.3s ease-in-out;
  }

  .uk-offcanvas-bar-flip[mode='reveal'] {
    clip: none;
    transform: translateX(100%);
  }

  .uk-offcanvas-bar-flip[mode='reveal'] > * {
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
  }

  .uk-offcanvas.uk-active .uk-offcanvas-bar-flip[mode='reveal'].uk-offcanvas-bar-show > * {
    transform: translateX(0%);
  }
}

/* 854px */
@media (max-width: 854px) {
  .copyright,
  .footer-center,
  .soc_buttons {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .footer-inner > div + div {
    margin-top: 10px;
  }
}

/* 767px */
@media (max-width: 767px) {
  .content-userbox,
  .login-userbox {
    padding: 20px 30px 30px;
  }

  .content-with-sidebar,
  .sidebar {
    width: 100%;
  }

  .content-with-sidebar {
    margin-bottom: 40px;
  }

  body.training-page div.maincol,
  body.training-page div.maincol_min,
  body.inner-training-page div.maincol,
  body.inner-training-page div.maincol_min {
    margin-bottom: 40px !important;
  }

  .textarea__right .btn-yellow {
    padding-left: 20px;
    padding-right: 20px;
    width: auto;
  }

  .textarea__left,
  .textarea__right {
    width: calc(100% - 20px);
    min-width: 0;
  }

  .textarea__left {
    margin-bottom: 20px;
  }

  .tabs ul {
    flex-wrap: wrap;
    margin-bottom: 15px;
    margin-left: -15px;
    border-bottom: none;
  }

  .tabs li {
    width: calc(50% - 10px);
    margin-left: 10px;
    margin-bottom: 10px;
    flex-grow: 1;
    padding: 0 15px;
    text-align: center;
    border: 1px solid var(--color-dark);
    border-radius: 10px;
    min-height: var(--tap-target);
  }

  .tabs li a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-target);
  }

  .col-1-3,
  .col-1-2 {
    width: calc(100% - 20px);
  }

  .offer,
  .cart-item,
  .cart-form,
  .catalog_item,
  .review_item,
  .maincol-inner-white {
    padding: 20px;
  }

  h1, .h1 {
    font-size: 28px;
    margin-bottom: 20px;
  }

  h1.cource-head,
  .cource-head {
    font-size: 30px;
  }

  h2, .h2 {
    font-size: 25px;
    margin-bottom: 15px;
  }

  h3, .h3 {
    font-size: 22px;
  }

  .container-cart {
    padding: 40px 0;
  }

  .offer:not(:last-child),
  .cart-item {
    margin-bottom: 30px;
  }

  .payments_list {
    margin-top: 30px;
  }

  .my-payments-date__left {
    margin: 0 20px 20px 0;
    width: 100%;
  }

  .my-payments-date {
    flex-wrap: wrap;
  }

  .totop {
    display: none !important;
  }

  .order_item-left {
    width: 70px;
    min-width: 70px;
    margin-right: 18px;
  }

  .order_item-desc {
    width: calc(100% - 148px);
    min-width: 0;
  }

  .order_item-desc__payments {
    width: calc(100% - 88px);
    min-width: 0;
  }

  .block-heading__click {
    padding: 15px 50px 15px 20px;
  }

  .answer,
  .dialog_item__answer {
    margin-left: 15px;
  }

  .contentbody .widget-header {
    font-size: 36px;
  }

  .h2-widget-header {
    font-size: 28px;
    margin-bottom: 20px;
  }

  .content-wrap {
    padding: 30px 0;
  }

  .hero-wrap h1,
  .hero-wrap .h1 {
    font-size: 34px;
  }

  .cabinet-lk {
    padding-top: 30px;
  }

  .breadcrumbs {
    margin-bottom: 0;
  }

  .open-menu,
  .logout-block,
  .main-menu > li,
  .logout-block > li + li,
  .block-login {
    margin-left: 15px;
  }

  .order_item:not(:last-child) {
    margin-bottom: 20px;
  }

  .payment-itogo {
    margin-top: 20px;
    text-align: left;
  }

  .soc_buttons ul {
    margin-left: -17px;
  }

  .soc_buttons li {
    margin-left: 17px;
  }

  .homework-top {
    padding-top: 20px;
  }

  .payment-left,
  .payment-right {
    width: 100%;
  }

  .payment-right {
    margin-top: 15px;
  }
}

/* 640px */
@media (max-width: 640px) {
  .form-line label {
    padding-top: 0;
  }

  .form-line label,
  .form-line-input {
    width: 100%;
  }

  .create-short-link {
    flex-wrap: wrap;
  }

  .create-short-link > div {
    width: 100%;
    min-width: 0;
  }

  .product_page {
    display: block;
    margin-left: 0;
  }

  .product_page::after {
    content: '';
    display: block;
    clear: both;
  }

  .product_img {
    width: 100%;
    margin: 0 0 10px;
  }

  .product-card-page .product_img {
    max-width: 100%;
  }

  .product_info,
  .product-card-page .product_info {
    width: auto;
    margin-left: 0;
  }

  .product_info h1 {
    text-align: center;
  }

  .lesson_item {
    flex-wrap: wrap;
  }

  .lesson_desc {
    width: calc(100% - 90px);
    min-width: 0;
  }

  .lesson_cover {
    margin-right: 0 !important;
    width: 100% !important;
  }

  .alert-message {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  .alert-message-right {
    margin-top: 20px;
  }

  .training-block .just-lesson {
    padding-left: 0;
  }

  .lesson_number {
    width: 90px;
  }

  .add-home-work--simple {
    position: static;
    margin-top: 15px;
  }

  .home-work-attach,
  .home-work__title {
    padding-right: 0;
  }

  .home-work__title {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .less_complete {
    position: relative;
    inset: auto;
    margin-top: 10px;
  }

  .small-caption {
    margin-left: 0;
  }

  .answer .add-comment-line {
    min-height: 1px;
  }

  .course_cover img,
  .category_cover img {
    height: auto !important;
    width: 100%;
    object-fit: cover;
  }
}

/* 480px */
@media (max-width: 480px) {
  .logout-block {
    flex-direction: column;
    align-items: flex-start;
  }

  .logout-block li + li {
    margin: 10px 0 0;
  }

  .logout-block li,
  .logout-block a {
    width: 100%;
    text-align: center;
  }

  .client-menu__left {
    margin: 0 auto 10px;
  }

  .client-menu__right {
    margin-left: 0;
    width: 100%;
  }

  .group-button-modal {
    max-width: 250px;
    margin: 0 auto;
    width: 100%;
  }

  .group-button-modal > * {
    width: 100%;
    text-align: center;
  }

  .cart-item-left {
    width: auto;
    padding: 0 0 15px;
  }

  .cart-item-left img {
    margin: 0;
  }

  .catalog_item_img {
    width: 100%;
    margin: 0 0 20px;
  }

  .catalog_item__right {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .catalog-item__price-box {
    order: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
  }

  .catalog-item__price-box .red_price {
    color: var(--color-danger);
  }

  .catalog_desc.intro {
    margin-top: 20px;
  }

  .catalog-item__price-box .font-bold {
    display: none;
  }

  .product_desc {
    margin: 12px 0 0;
  }

  .add_offer-form {
    margin-left: 0;
  }

  .logo {
    max-width: 160px;
  }

  .catalog-item__button-box {
    justify-content: center;
  }

  .order-info-container .order_item-desc {
    width: auto;
    margin-bottom: 0;
    padding-right: 15px;
  }

  .order-info-container .bottom {
    flex-wrap: wrap;
  }

  .cart-item-right,
  .catalog_item__right {
    width: 100%;
    padding-left: 0;
  }

  .payments_list-row {
    flex-wrap: wrap;
    margin: 0;
  }

  .payments_list-row > div {
    margin: 0;
    width: 100%;
  }

  .payments_list-row > div:first-child {
    margin-bottom: 10px;
  }

  .payments_list-row .btn-blue-small {
    width: 100%;
  }

  .form-line-inner-col {
    width: calc(100% - 20px);
  }

  .form-line-inner-col + .form-line-inner-col {
    margin-top: 10px;
  }

  .dialog:not(.dialog-2) {
    padding: 56px 30px 30px;
  }

  .task-accepted {
    right: auto;
    left: 30px;
  }

  .assign-accept .list-questions__top {
    padding-right: 0;
  }

  .dialog_item-2 .dialog_item__left {
    display: none;
  }

  .dialog_item-2 .dialog_item__right {
    margin-left: 0;
  }

  .tabs-payments_list .order_item-desc {
    width: calc(100% - 88px);
    padding-right: 0;
  }

  .tabs-payments_list .order_item {
    flex-wrap: wrap;
  }

  .tabs-payments_list .payment_button {
    width: 100%;
    max-width: none;
    margin-top: 15px;
    text-align: center;
  }
}

/* 375px */
@media (max-width: 375px) {
  header .main-menu {
    margin-left: 12px;
    margin-right: 12px;
  }

  .logo {
    max-width: 140px;
  }

  .tabs li {
    width: 100%;
  }
}

/* ==========================================================================
4. Min-width & Hover Fixes
========================================================================== */
@media (min-width: 480px) {
  .flex-row {
    display: flex;
  }

  .flex-row > * {
    margin: 0;
  }

  .flex-row > *:first-child {
    flex-grow: 1;
    margin-right: 20px;
  }
}

/* Отключение залипшего hover на тач-устройствах */
@media (hover: none), (pointer: coarse) {
  header .main-menu a:hover {
    background: none !important;
    color: inherit !important;
    text-decoration: none !important;
  }

  a:hover,
  button:hover,
  input[type="button"]:hover,
  input[type="submit"]:hover,
  input[type="reset"]:hover,
  [role="button"]:hover,
  .btn:hover,
  .btn-yellow:hover,
  .btn-blue-small:hover,
  .uk-button:hover,
  .open-menu:hover,
  .tm-offcanvas-close:hover {
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
  }
}