/*
 * Cookie consent banner — ported from ntg.bg's cookieconsent.css, restyled
 * with this store's own design tokens (store-framework.css) and .btn
 * classes instead of hand-rolled colors, so it reads as part of the site
 * rather than a bolted-on widget. Layout/behavior (fixed bottom-right
 * card, checkbox categories, three actions, mobile full-width stack)
 * match the source 1:1.
 */

.store-cookie-consent {
  display: none;
  position: fixed;
  right: 20px;
  bottom: 20px;
  left: auto;
  width: calc(100% - 40px);
  max-width: 480px;
  box-sizing: border-box;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-medium);
  padding: 20px;
  font-family: var(--bs-body-font-family);
  color: var(--color-text);
  z-index: 1090;
}

.store-cookie-consent.is-visible {
  display: block;
}

.store-cookie-consent-title {
  font-size: 1.0625rem;
  font-weight: var(--font-weight-heading-3, 600);
  color: var(--color-heading);
  margin: 0 0 8px;
}

.store-cookie-consent-text {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text-muted);
  margin: 0 0 14px;
}

.store-cookie-consent-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 16px;
}

.store-cookie-consent-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-text);
  cursor: pointer;
}

.store-cookie-consent-options input[type="checkbox"]:disabled + span {
  color: var(--color-text-muted);
}

.store-cookie-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.store-cookie-consent-actions .btn {
  flex: 1 1 auto;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .store-cookie-consent {
    right: 10px;
    left: 10px;
    bottom: 10px;
    width: auto;
    max-width: none;
    padding: 16px;
  }

  .store-cookie-consent-actions {
    flex-direction: column;
  }

  .store-cookie-consent-actions .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .store-cookie-consent.is-visible {
    animation: store-cookie-consent-in 0.2s ease-out;
  }
}

@keyframes store-cookie-consent-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}