// ===================================
// === ПЕРЕМЕННЫЕ И МИКСИНЫ AETERNA ===
// ===================================
@color-primary: #617365;
@color-secondary: #D1D1D1;
@color-accent: #453227;
@color-text-dark: #333;
@color-text-light: #fff;
@color-button: @color-accent;
@color-beige: #A2A09A;

@font-logo: 'Anek Kannada', sans-serif;
@font-main: 'Anonymous Pro', monospace;
@font-heading: 'Playfair Display', serif;

@shadow-light: 0 5px 15px rgba(0, 0, 0, 0.2);
@shadow-dark: 2px 2px 4px rgba(0, 0, 0, 0.3);

.flex-center(@gap: 0) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: @gap;
}

.flex-between() {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column() {
  display: flex;
  flex-direction: column;
}

.icon-base(@size: 18px, @hover-scale: 1.1) {
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: @size;
  &:hover {
    transform: scale(@hover-scale);
  }
}

.image-overlay() {
  position: absolute;
  inset: 0;
  .flex-center(15px);
  flex-direction: column;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.4);
  padding: 20px;
  color: @color-text-light;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  transition: all 0.3s ease;
}

.menu-base() {
  position: absolute;
  top: 100%;
  left: 0;
  width: 250px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  padding: 15px;
  z-index: 1000;
  margin-top: 5px;
  display: none;
}

.input-base() {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ccc;
  background-color: #fff;
  font-family: @font-main;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s ease;
  &:focus {
    border-color: @color-primary;
  }
}