/* static/cookie/cookie.css */

/* Базовый контейнер */
.cookie-consent {
  position: fixed;
  left: 0;                 /* вариант: закреплён у правого края */
  bottom: 20px;
  width: 75vw;              /* занимает 70% ширины окна (т.е. на 30% меньше) */
  max-width: 100%;
  z-index: 1080;
  background: rgba(255,255,255,0.98);
  border: 1px solid #e5e5e5;
  box-shadow: -6px 6px 20px rgba(0,0,0,0.08);
  padding: 16px;
  border-radius: 8px 0 0 8px; /* скругление слева */
  display: flex;
  align-items: center;
  transition: transform .25s ease, opacity .25s ease;
  transform: translateY(0);
  opacity: 1;
}

/* Альтернативный вариант: если нужен отступ справа 30% (начинается не от края),
   замените right:0 на right:30vw и при необходимости оставьте width:70vw. */

/* Скрытое состояние */
.cookie-consent.d-none {
  display: none !important;
}
.cookie-consent.show {
  display: flex;
  transform: translateY(0);
  opacity: 1;
}

/* Текст внутри */
.cookie-consent p { margin: 0; color: #333; }

/* Внутренний контейнер для соответствия Bootstrap-структуре */
.cookie-consent-inner {
  width: 100%;
}

/* Кнопки */
.cookie-consent .btn {
  margin-left: 8px;
}

/* Адаптив для маленьких экранов — занимать почти всю ширину */
@media (max-width: 768px) {
  .cookie-consent {
    right: 2.5vw;
    left: 2.5vw;
    width: auto;
    border-radius: 8px;
    padding: 12px;
    bottom: 16px;
    flex-direction: column;
    align-items: stretch;
  }
  .cookie-consent .col-md-4,
  .cookie-consent .col-md-8 {
    width: 100%;
    display: block;
  }
  .cookie-consent .col-md-4 { text-align: right; margin-top: 8px; }
}

/* Простая анимация появления */
@keyframes slideUp {
  from { transform: translateY(10px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.cookie-consent.show { animation: slideUp .25s ease; }