@layer reset, legacy, modern;

/* ============================================================
   SpeedyBook Design Tokens
   1. Legacy theme variables used by style.css
   2. Modern SpeedyBook tokens
   ============================================================ */

:root {
  /* 1. Legacy theme variables - keep names unchanged */
  --body-background-color: #f8fafc;
  --body-font-color: #1e293b;

  --link-color: #1e3a8a;
  --btn-background-color: #1e40af;
  --btn-shadow: rgba(3, 41, 75, 0.65);
  --alt-box-bg-color: #b9dbf1;

  --content-box-table-cell-border-color: #8eaab3;
  /*фон выбора в каталоге*/
  --content-box-table-cell-active-text-color: #02282C;
  --highlight-border-color: #088fe6;
  --horizontal-search-bg: #ffffff;

  --top-navigation-background-color: #ffffff;
  --top-navigation-selector-color: #7f7b7b;
  --top-navigation-selector-box-shadow-color: #1e40af;
  --top-navigation-button-border-color: #1e40af;
  /*рамка кнопки в каталоге услуг*/
  --top-navigation-menu-border-color: #1e40af;

  --header-background-color: #ffffff;
  --header-tabs-icon-active-filter: brightness(0.066);
  --header-search-form-title-color: #555555;

  --form-disabled-background-color: #fcfdfd;
  --form-checked-background-color: #1e40af;
  --form-checked-background-color-hover: #1e40af;
  --form-checked-background-color-active: #1e40af;
  --form-checked-text-color: #ffffff;
  --form-background-color: #fcfdfd;
  --form-field-line-color: rgba(3, 41, 75, 0.5);
  --form-field-line-color-hover: #1e40af;
  --form-error-background-color: #ffeaea;
  --form-error-text-color: #1e40af;
  --form-error-shadow: #f79d9d;

  --middle-no-sidebar-background-color: #f1f5f9;
  --bottom-no-sidebar-background-color: #f1f5f9;

  --featured-no-sidebar-background-color: #ffffff;
  --featured-background-color: #fcfdfd;
  --featured-title-color: #02282C;
  --featured-accounts-background-color: #ffffff;

  --listing-card-icon-color: #088fe6;
  --listing-card-active-icon-color: #8eaab3;

  --listing-print-icon: url("../img/print.svg");
  --listing-favorite-icon: url("../img/like.svg");
  --listing-favorite-icon-active: url("../img/like-active.svg");
  --listing-compare-icon: url("../img/compare.svg");
  --listing-compare-icon-active: url("../img/compare-active.svg");
  --listing-gallery-media-background-color: #fcfdfd;
  --listing-mask-background-color: rgba(255, 255, 255, 0.6);
  --listing-thumbnail-background-color: #e2e8f0;
  /*цвет фона объявлений без фотографий*/

  --content-background-color: #fcfdfd;
  --content-alt-background-color: #fcfdfd;
  /*цвет фона описания объявления*/

  --info-field-color: #1e40af;
  --category-color: #1e40af;
  --category-color-hover: #03294b;
  --empty-category-color: #03294b;
  --fieldset-header-background-color: #e8f8ff;
  /*фон сворачивающегося меню в объявлениях*/
  --icon-filter: brightness(1);
  --icon-filter-background: brightness(20);
  --icon-filter-img-background: brightness(0);
  --upload-zone-background-color: #fcfdfd;
  --plans-border-color: #8eaab3;
  --steps-background-color: #fcfdfd;
  --popup-mask-background-color: rgba(0, 0, 0, 0.3);
  --side-block-button-border-color: #fff;
  /*цвет границы кнопки выбора*/
  --table-list-border-color: #8eaab3;
  --table-list-me-border-color: #fcfdfd;
  --tabs-active-background-color: #1e40af;
  --tabs-hover-color: #02282C;
  --tabs-side-block-active-background-color: #1e40af;
  --tabs-side-block-border-color: #8eaab3;
  --svg-icon-fill: #8eaab3;
  --dropdown-arrow: url("../img/dropdown-arrow.svg");
  --sb-dropdown-arrow: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");

  --footer-background-color: #0f172a;
  --footer-text-color: #8eaab3;
  --footer-menu-title-color: #8eaab3;
  --footer-menu-link-color: #fcfdfd;
  --footer-btn-background-color: #4692a9;
  --footer-input-hover-background-color: #ffffff;
  --footer-btn-shadow: rgba(8, 143, 230, 0.65);
  --invert: invert(0);
  --tel-input-window-bg: white;
  --tel-input-hover-effect: rgba(0, 0, 0, 0.2);

  /* 2. Modern SpeedyBook tokens - prefixed with --sb- */
  --sb-primary: #2563eb;
  --sb-primary-hover: #1d4ed8;
  --sb-primary-soft: rgba(37, 99, 235, 0.1);

  --sb-text-main: #2d3436;
  --sb-text-muted: #636e72;
  --sb-text-light: #b2bec3;

  --sb-bg-main: #ffffff;
  --sb-bg-soft: #f8f9fa;
  --sb-white: #ffffff;
  --sb-border: #dfe6e9;

  /* Spacing & Radius */
  --sb-radius: 12px;
  --sb-radius-md: 16px;
  --sb-radius-full: 50%;

  /* Shadows */
  --sb-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
  --sb-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --sb-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Base resets or helper classes */
.sb-text-primary {
  color: var(--sb-primary);
}

.sb-bg-soft {
  background-color: var(--sb-bg-soft);
}

@layer reset {

  /* Fix: Allow desktop picture slider images (which start with d-none from Bootstrap's reset layer) 
     to override display:none on hover. Since bootstrap is in reset layer, their !important 
     display:none overrides subsequent layers' !important. Hence we define the override at the reset layer. */
  .listing-picture-slider_loaded .listing-picture-slider__navbar>span:hover img,
  .listing-picture-slider_loaded .listing-picture-slider__navbar>span:hover span {
    display: flex !important;
  }

  /* Fix: Reset mobile padding-top on the main container for view-details-page 
     because Bootstrap's .pt-5 and .py-4 in reset layer override subsequent layers' !important. */
  @media (max-width: 991px) {
    body.view-details-page section#main_container>div.inside-container {
      padding-top: 0 !important;
    }

    body.view-details-page .sb-profile-modern>.container-fluid {
      padding-top: 0 !important;
    }
  }
}