/* ========================================
   CUSTOM CSS FOR BOOTSTRAP 5.3 PROJECT EXAMPLE
   ======================================== */

/* ==================== Theme and variables ==================== */

:root {
  /* body variables */
  --my-body-bg: #F2F2F2; 
  --my-body-color: #0A0A0A;
  --my-body-primary: #ff00aa;
  /* font variables */
  --fs-xs: 12px;
  --fs-sm: 16px;
  --fs-md: 20px;
  --fs-lg: 24px;
  --fs-xl: 32px;
  --fw-regular: 400;
  --fw-semibold: 600;
  /* colors */
  --color-black-100: #000;
  --color-white: #FFFFFF;
  --color-grey-bg: #F2F2F2;
  --color-grey: #929292;
  --сolor-grey-40: #92929266;
  --color-black: #0A0A0A;
  --color-blue: #36A1FF;
  --color-blue-10: #36A1FF29;
  --color-blue-20: #36A1FF33;
  --color-blue-30: #36A1FF4D;
  --color-blue-40: #36A1FF66;
  --color-blue-badge: #CAEDFF;
  --color-dark-blue-badge: #00AAFF;
  --color-black-soft: #010101;
  --color-black-hover: #282828;
  --color-orange: #FFDDA5;
  --color-dark-orange: #FF9D00;
  --color-light-blue: #B9E8FF;
  --color-dark-10: #282828;
  --color-dark-40: #FFFFFF66;
  --color-grey-20: #92929233;
  --color-grey-30: #9292924D;
  --color-grey-16: #92929229;
  --color-black-40: #0A0A0A66;
  /* border radius */
  --radius-8: 8px;
  --radius-12: 12px;
  --radius-20: 20px;
  --radius-24: 1.5rem;
  /* paddings */
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-24: 24px;
  /* line height */
  --lh-14: 14px;
  --lh-sm: 16px;
  --lh-md: 20px;
  --lh-lg: 24px;
}

[data-bs-theme="light"] {
  --bs-body-bg: var(--my-body-bg);
  --bs-body-color: var(--my-body-color);
  --bs-font-sans-serif: "Onest", system-ui, sans-serif;
  --bs-primary: var(--my-body-primary);
  
}

/* ==================== Basic typography ==================== */

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("/assets/fonts/onest-thin.woff2") format("woff2");
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("/assets/fonts/onest-extralight.woff2") format("woff2");
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/onest-light.woff2") format("woff2");
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/onest-regular.woff2") format("woff2");
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/onest-medium.woff2") format("woff2");
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/onest-semibold.woff2") format("woff2");
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/onest-bold.woff2") format("woff2");
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/onest-extraBold.woff2") format("woff2");
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/fonts/onest-black.woff2") format("woff2");
}

.bg-body-tertiary {
  background-color: var(--color-white)!important;
}

.bg-light-subtle {
  background-color: var(--color-white)!important;
}

/* p, span, li {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--color-grey);
} */

.text-black {
  color: #0A0A0A !important;
}

.text-primary {
  color: #36A1FF;
}

.my-logo {
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  color: var(--color-black);
  outline: none;
}

.my-content {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--color-grey);
}

.my-content p {
  margin: 0px;
  padding: 0px;
}

.h0 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
}

.h1 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

.h2 {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
}

.my-h2 {
  margin-bottom: 12px;
}

.text-body-tertiary {
  display: block;
}

.link-primary {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--color-blue)!important;
  line-height: 100%;
  white-space: normal;
  word-wrap: break-word;   /* старое название */
  overflow-wrap: break-word; /* современное */
}


.my-link__more {
  background-color: transparent;
  border: none;
  padding: 0px;
  margin: 0px;
  outline: none;
  margin-top: 12px;
}

/* ==================== Grid and layout ==================== */

/* Container */
html {
      scroll-padding-top: 65px;
    }

/* Section */

.my-form__section {
  background-color: var(--color-white);
}

.form-label {
  color: var(--color-grey);
}

input.form-control {
  color: var(--color-grey);
}

input.form-control:focus, textarea.form-control:focus {
  border-color: var(--color-blue);
  box-shadow: 0 0 0 1px var(--color-blue);
}

input.form-control:disabled, textarea.form-control:disabled {
  background-color: var(--my-body-bg);
}

input.form-control:disabled::placeholder , textarea.form-control:disabled::placeholder  {
  color: var(--сolor-grey-40);
}

.form-control {
    padding: var(--space-14);
    border-radius: var(--radius-12);
    border: none;
}

.form-control::placeholder {
  color: var(--color-grey);
}


.my-form__label {
  color: var(--color-grey);
}

/* Wrapper */


/* ==================== Components ==================== */

/* Header */

.my-header {
  border-radius: var(--radius-20);
  z-index: 4;
}

/* Скрываем полоску логаута */
body br,
body .loginMessage,
body .loginLogin {
    display: none;
}


/* Footer */
.my-footer__wrapper {
  background-color: var(--color-white);
}

.footer-subtitle {
  font-style: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-black);
}

.footer-text {
  font-size: var(--fs-xs);
  line-height: var(--lh-14);
  color: var(--color-black);
}

.footer-date {
  font-size: var(--fs-xs);
  line-height: var(--lh-14);
  color: var(--color-grey);
  
}


/* Card */
.my-card__content {
  gap: 6px;
}

.my-card__subtitle {
  color: var(--color-black);
}


/* Button */


.btn-primary,
.btn-secondary, .btn-light, .btn-dark {
  --bs-btn-padding-y: var(--space-14);
  --bs-btn-padding-x: var(--space-14);
  --bs-btn-font-weight: var(--fw-semibold);
  --bs-btn-line-height: var(--lh-md);
  --bs-btn-border-width: 0;
  --bs-btn-border-radius: var(--radius-12);
}

.btn-primary {
  --bs-btn-bg: var(--color-blue-20);
  --bs-btn-color: var(--color-blue);
  --bs-btn-border-color: transparent;

  --bs-btn-hover-bg: var(--color-blue-30);
  --bs-btn-hover-color: var(--color-blue);
  --bs-btn-hover-border-color: transparent;

  /* disabled */
  --bs-btn-disabled-bg: var(--color-blue-10);
  --bs-btn-disabled-color: var(--color-blue-40);
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-disabled-opacity: 1;
}

.btn-secondary {
  --bs-btn-bg: var(--color-black-soft);
  --bs-btn-color: var(--color-white);
  --bs-btn-border-color: transparent;

  --bs-btn-hover-bg: var(--color-black-hover);
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-hover-border-color: transparent;
  
    /* disabled */
  --bs-btn-disabled-bg: var(--color-dark-10);
  --bs-btn-disabled-color: var(--color-dark-40);
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-disabled-opacity: 1;
}

.btn-light {
  --bs-btn-bg: var(--color-white);
  --bs-btn-color: var(--color-black);
  --bs-btn-border-color: transparent;

  --bs-btn-hover-bg: var(--color-black);
  --bs-btn-hover-color: var(--color-white);
  --bs-btn-hover-border-color: transparent;
  
    /* disabled */
  --bs-btn-disabled-bg: var(--color-grey-16);
  --bs-btn-disabled-color: var(--color-black-40);
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-disabled-opacity: 1;
}


.btn-dark {
 --bs-btn-bg: var(--color-grey-20);
  --bs-btn-color: var(--color-black);
  --bs-btn-border-color: transparent;

  --bs-btn-hover-bg: var(--color-grey-30);
  --bs-btn-hover-color: var(--color-black);
  --bs-btn-hover-border-color: transparent;
  
    /* disabled */
  --bs-btn-disabled-bg: var(--color-grey-16);
  --bs-btn-disabled-color: var(--color-black-40);
  --bs-btn-disabled-border-color: transparent;
  --bs-btn-disabled-opacity: 1;
}


.btn-light.active {
  background-color: var(--color-black);
  color: var(--color-white);
}


.btn-badge__nummer {
  top: -4px;
  right: -4px;
  border-radius: 50%;
  background-color: var(--color-blue);
  color: var(--color-white);
  min-width: 16px;
  height: 16px;
  font-size: 12px;
  line-height: 12px;
}

.studio-card__badges-more  {
  width: fit-content;
  font-size: var(--fs-xs);
  line-height: 14px;
  font-weight: var(--fw-regular);
  padding: 5px;
  border-radius: 8px;
}

.my-button__icon {
  width: 48px;
  height: 48px;
}

.offcanvas-header .btn-close {
  width: 48px;
  height: 48px;
  padding: 0;
  background-color: var(--color-white);
  background-size: 12px 12px;
}

.modal-dialog .btn-close {
  width: 48px;
  height: 48px;
  padding: 0;
  background-color: var(--my-body-bg);
  background-size: 12px 12px;
  top: 16px;
  right: 16px;
  border-radius: var(--radius-12);
}

.modal-icon {
  font-size: 50px;
  line-height: 50px;
  text-align: center;
}

.btn-close:focus, .btn-close:active {
  box-shadow: none;
} 

/* Menu (Navigation) */

.nav-link {
  --bs-nav-link-font-weight: var(--fw-semibold);
}

.navbar-light {
  background-color: var(--color-white);
}

.navbar {
  background-color: var(--color-white)!important;
}

.my-btns {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
}

.my-btns .btn {
  width: 50%;
  max-width: 200px;
}

.navbar-toggler {
  border-radius: var(--radius-12);
  border: none;
  width: 48px;
  height: 48px;
}

.navbar-toggler:focus, .navbar-toggler:active {
  box-shadow: none;
}

.my-btn__back {
  width: 48px;
  height: 48px;
}

.my-navbar {
  max-width: fit-content;
  z-index: 4;
}

/* Search */

.my-search {
  transition: width 0.3s ease;
  width: 100%;
  height: 48px;
  max-width: 450px;
}

.my-search__toggle {
  top: 0;
  left: 0;

  width: 40px;
  height: 100%;

  border: none;
  background: transparent;
  cursor: pointer;
}


/* input */
.my-search__input {
  color: var(--color-grey);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  
  width: 100%;
  height: 100%;

  padding: 0 15px 0 40px; /* ← отступ слева под иконку */
  border: none;
  border-radius: 12px;
  outline: none;

  pointer-events: none;
  transition: opacity 0.2s ease;
  background-color: var(--color-white);
  
  opacity: 1;
  pointer-events: auto;
  
}

.my-search__input:placeholder {
  color: var(--color-grey);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
}

.my-sidebar__card {
  background: 
    linear-gradient(103.92deg, rgba(255, 255, 255, 0.27) 2.27%, rgba(185, 232, 255, 0.27) 100%),
    #FFFFFF;

  border-radius: var(--radius-24);
  padding-bottom: 77px;
}

.my-icon__heart {
  top: 71px;
  right: 81px;
}

.my-icon__smile {
  top: 23px;
  right: 27px;
}

.my-icon__chat {
  top: 121px;
  right: 38px;
}

.my-sidebar__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--color-black);
}

.my-sidebar__text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--color-grey);
  max-width: 180px;
}

/* Login */


/* Breadcrumbs */


/* Swiper (Slider/Carousel) */
.slider-logo {
  width: 132px;
  padding: 12px;
}

.swiper-gallery {
  height: 380px;
  background-color: var(--color-white);
}

.swiper-gallery__logo {
  background-color: var(--color-grey-bg);
  border-radius: var(--radius-12);
}

.swiper-gallery__logo span {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-grey);
}

.swiper-slide {
  width: auto;           /* ширина по контенту */
  display: inline-block; /* обычно хватает, но можно и block оставить */
  white-space: nowrap;   /* чтобы слово не переносилось */
  height: auto;
}


.swiper-slider__bottom {
  height: 140px;
}


.my-arrow__prev,
.my-arrow__next {
  margin-top: 0;
  top: 50%;
  z-index: 30;
  pointer-events: auto;
  width: 48px;
  height: 48px;
  background: var(--color-grey-bg);
  border-radius: var(--radius-12);
  color: var(--color-black);
}

.my-arrow__prev svg,
.my-arrow__next svg {
  width: 6px;
  height: 12px;
}
 
.swiper-button-prev.my-arrow__prev{
  left: -12px;
}

.swiper-button-next.my-arrow__next {
  right: -12px;
}

.my-arrow {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.my-slider__wrapper:hover .my-arrow__prev,
.my-slider__wrapper:hover .my-arrow__next {
  opacity: 1;
  visibility: visible;
}


/* Sticky links */

.sticky-top {
  background-color: var(--my-body-bg);
}

.my-sticky__link.btn-secondary {
  background-color: var(--color-white);
  color: var(--color-black);
}


.my-sticky__link_active.btn-secondary {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* Badge */


.my-badge__slide svg {
  width: 12px;
  height: 12px;
}

.my-badge {
  color: var(--color-black);
  background: linear-gradient(
    90.59deg,
    rgba(185, 232, 255, 0.27) 0.51%,
    rgba(255, 255, 255, 1) 113.25%
  );
  padding: 18px;
}

.my-badge svg {
  width: 20px;
  height: 20px;
}

.my-badge__text {
    font-weight: var(--fw-semibold);
    color: var(--color-black);
}

.my-badge span {
  line-height: 100%;
}

.my-badge button {
  width: fit-content;
}


.badge-list {
  top: 10px;
  right: 10px;
}

.badge {
  --bs-badge-border-radius: var(--radius-8);
  font-size: var(--fs-xs);
  line-height: var(--lh-14);
  font-weight: var(--fw-regular);
  margin-bottom: 0;
   width: fit-content;
}

.badge.text-bg-primary {
  color: var(--color-dark-blue-badge)!important;
  background-color: var(--color-blue-badge)!important;
}

.badge.text-bg-warning {
  color: var(--color-dark-orange)!important;
  background-color: var(--color-orange)!important;
}

.badge.text-bg-warning span {
  color: var(--color-dark-orange)!important;
}


.badge.text-bg-primary span {
  color: var(--color-dark-blue-badge)!important;
}

.text-bg-secondary {
  font-family: Onest;
  font-weight: 400;
  font-style: Regular;
  font-size: 12px;
  leading-trim: NONE;
  line-height: 14px;
  letter-spacing: 0%;
  background: #929292;
}

.text-bg-info {
  background-color: var(--color-blue-20)!important;
}

/* Modal */

.modal-content {
  border-radius: var(--radius-24);
  background-color: var(--color-white);
  border: none;
  max-width: 400px;
}

.modal-header {
  border: none;
}

.modal-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--color-black);
  line-height: 100%;
}

.list-group {
  background: var(--color-white);
}

.list-group-item {
  background: var(--color-white);
  padding: 0;
  margin: 0;
  border: none;
}

.list-group-item-action:not(.active):focus, .list-group-item-action:not(.active):hover {
  background-color: transparent;
}

/* Listing styles */
.studio-card {
  background-color: var(--color-white);
  border: none;
  border-radius: 0px;
  
}

.studio-card__top {
  background-color: var(--my-body-bg);
  border-radius: var(--radius-12);
  padding: 70px 29px;
  max-height: 200px;
}

.studio-card__body {
  padding: 0px;
  margin-top: 12px;
}


.studio-card__attributes {
  padding: 6px 5px;
  background-color: var(--my-body-bg);
  border-radius: var(--radius-8);
  font-size: var(--fs-xs);
  line-height: 14px;
  color: var(--color-grey);
}


.studio-card__top .text-warning, .studio-card__top .text-primary {
  padding: 5px;
  border-radius: var(--radius-8);
  width: 24px;
  height: 24px;
  /* todo: подумать как убрать эти свойства в классы, возможно создать отдельный чанк для бейджев листинга */
  display: flex;
  align-items: center;
  justify-content: center;
}

.studio-card__top .text-warning svg, .studio-card__top .text-primary svg {
  width: 12px;
  height: 12px;
  line-height: 12px;
}

.studio-card__top .text-warning {
  background-color: var(--color-orange); 
}

.studio-card__top .text-primary {
  background-color: var(--color-blue-badge); 
}

.my-card__body {
  background: linear-gradient(
    90.59deg,
    rgba(185, 232, 255, 0.27) 0.51%,
    rgba(255, 255, 255, 0.27) 113.25%
  );
  border-radius: 0px;
}

.my-card__body_gradient {
  background: linear-gradient(180deg, #36A1FF -189.33%, #D7ECFF 100%);
}

.my-card__body p {
  margin: 0;
  padding: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--color-black);
}

.filter-wrapper {
  border-radius: var(--radius-12);
}

.filter-subtitle {
  color: var(--color-black);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}

.filter-link {
  color: var(--color-black);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}

.filter-search {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: 100%;
  color: var(--color-black);
  background-color: var(--color-white);
}

.filter-search::placeholder {
  font-size: var(--fs-sm);
  line-height: 100%;
  color: var(--color-grey);
  font-weight: var(--fw-regular);
}

.filter-search:focus, .filter-search:active {
  background-color: var(--color-white);
}


.filter-btns .btn {
  padding: 14px 0px;
  width: 50%;
}

.filter-form .dropdown-toggle::after {
  position: absolute;
  top: 50%;
  right: -16px;
  border: none;
  background-image: url('/assets/img/arrow-down.svg');
  background-repeat: no-repeat;
  width: 12px;
  height: 6px;
  background-size: contain;
  transform: translateY(-50%);
  margin-left: 0px;
}

.filter-form .dropdown-toggle.show .dropdown-toggle::after {
  position: absolute;
  top: 50%;
  right: -16px;
  border: none;
  background-image: url('/assets/img/arrow-down.svg');
  width: 12px;
  height: 6px;
  background-size: contain;
  transform: translateY(-50%);
  margin-left: 0px;
}

/* todo: сделать кастомные радио и чекбоксы */

.form-check-label {
  color: var(--color-black);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
}

/* sorting */
.sorting-list {
  list-style-type: none;
}

.form-check-input {
  background-color: var(--color-blue-20);
  border: none;
}

.form-check-input:focus, .form-check-input:active {
  outline: none;
  box-shadow: none;
}

/* ==================== Utilities and helpers ==================== */

/* Custom spacing utility - extends Bootstrap spacing */

/* ==================== Media queries ==================== */

/* xs: <576px (default mobile-first styles above, no media query needed) */

/* sm: ≥540px */
@media (min-width: 540px) {
}

/* md: ≥720px */
@media (min-width: 720px) {
    
}

/* lg: ≥960px */
@media (min-width: 960px) {
}

@media (min-width: 992px) {
  .my-header {
    background-color: var(--color-white);
  }
  
  .my-navbar {
    max-width: 800px;
  }
  
  .my-btn__back {
    position: absolute;
    top: 120px;
  }
  
  .my-form__section {
    border-radius: var(--radius-24);
  }
  
  .my-badge {
    border-radius: var(--radius-24);
    padding: 26px;
  }
  
  .my-btns {
    position: static;
    transform: none;
    width: fit-content;
  }
  
  .my-btns .btn {
    width: fit-content;
    max-width: 200px;
  }
  
  .my-search {
    width: 40px;
  }
  
    /* раскрытие */
  .my-search.active {
    width: 240px;
  }
  
  .my-search__input {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    background-color: var(--color-grey-bg);
  }

  .my-search.active .my-search__input {
    opacity: 1;
    pointer-events: auto;
  }
  
  .my-card__body {
    border-radius: var(--radius-24);
  }
  

}

/* xl: ≥1140px */
@media (min-width: 1140px) {
    .card-radius-top {
        border-radius: 1rem 1rem 0 0;
    }
    .card-radius-bottom {
        border-radius: 0 0 1rem 1rem;
    }
    
    
    .card-radius {
        border-radius: var(--radius-24);
    }
    
    .my-navbar {
      max-width: 800px;
    }  
    
    .swiper-gallery {
      height: 500px;
    }
    
    .studio-card {
      border-radius: var(--radius-24);
    }
    
    .studio-card__body {
      margin-top: 0px;
    }
  
}

@media (min-width: 1200px) {
    
    .my-navbar {
      max-width: 850px;
    }  
  
}

/* xxl: ≥1320px */
@media (min-width: 1320px) {

}