/* Підключення шрифта Ruberoid */
@font-face {
  font-family: 'Ruberoid';
  src: url('/static/booking/Fonts/ruberoid-regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Ruberoid';
  src: url('/static/booking/Fonts/ruberoid-medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Ruberoid';
  src: url('/static/booking/Fonts/ruberoid-bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'Ruberoid';
  src: url('/static/booking/Fonts/ruberoid-light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

/* Фон страницы */
html {
  background-color: #111;
}

body {
  margin: 0;
  padding: 0;
  background: url("/static/booking/images/bg.svg") no-repeat center center;
  background-size: cover;
  background-attachment: fixed;
  background-color: #111; /* Темный фон */
  color: #FFFFFF;
  font-family: 'Ruberoid', Arial, sans-serif;
  
  /* Запобігає зміні масштабу при масштабуванні браузера */
  transform: scale(1);
  transform-origin: 0 0;
  min-width: 1280px; /* Мінімальна ширина контенту */
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}

/* Стилі для футера */
.designer-name {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #999;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.telegram-link {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #999 !important;
  text-decoration: none;
  position: relative;
  font-weight: 500;
  transition: color 0.3s ease;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.telegram-link:hover {
  color: #00abeeb2 !important;
}

.pricing-link {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #999 !important;
  text-decoration: none;
  position: relative;
  font-weight: 500;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.pricing-link::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -2px;
  left: 0;
  background: linear-gradient(to right, #9C27B0, #AA00FF);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: bottom right;
}

.pricing-link:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}