/* Banner đồng ý cookie GA4 (NUT-131). Dùng chung cho landing (landing.css), privacy/terms (styles.css) và trang SEO (seo.css).
   Ba file đó đặt tên biến khác nhau nên mỗi token ở đây đọc biến của trang trước, thiếu thì dùng giá trị palette "Price Gun".
   Tiền tố cookie- để không đụng tên lớp khác của các trang. */

.cookie-banner {
  --cb-surface: var(--card, var(--surface, #fffdf6));
  --cb-ink: var(--ink, var(--text, #1a1a1a));
  --cb-muted: var(--muted, #5a5448);
  --cb-link: var(--link, var(--accent-text, #b8400f));
  --cb-ring: var(--star, #ffd23f);

  /* NUT-149: thẻ nhỏ nổi ở góc dưới trái (không còn dải full width). Điện thoại: thẻ cách hai mép 12px. Không đẩy nội dung (không CLS). */
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 80;
  max-width: 380px;
  background: var(--cb-surface);
  color: var(--cb-ink);
  border: 2px solid var(--cb-ink);
  border-radius: 4px;
  box-shadow: 4px 4px 0 var(--cb-ink);
  font-family: var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  font-size: 0.8rem;
  line-height: 1.5;
}

@media (min-width: 760px) {
  .cookie-banner {
    left: 24px;
    right: auto;
    bottom: 24px;
    width: 380px;
  }
}

.cookie-banner[hidden] {
  display: none;
}

/* Khi thẻ đang hiện: Tab, #anchor và scrollIntoView dừng phía trên thẻ (WCAG 2.4.11), và footer dài thêm để link cuối trang không nằm dưới thẻ.
   Giá trị lớn hơn chiều cao thẻ đo được cộng mép dưới (390: 190px, 1440: 186px). */
html:has(.cookie-banner:not([hidden])) {
  scroll-padding-bottom: 224px;
}

html:has(.cookie-banner:not([hidden])) .site-footer {
  padding-bottom: 232px;
}

.cookie-banner.is-entering {
  animation: cookie-in 200ms ease-out;
}

@keyframes cookie-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
}

.cookie-inner {
  display: grid;
  gap: 12px;
  padding: 16px;
}

.cookie-text {
  margin: 0;
}

.cookie-text b {
  font-weight: 700;
}

.cookie-text a {
  color: var(--cb-link);
  text-underline-offset: 3px;
}

.cookie-text a:hover {
  color: var(--cb-ink);
}

.cookie-current {
  display: block;
  margin-top: 4px;
  color: var(--cb-muted);
}

/* Mở lại từ footer: JS focus vào section (tabindex="-1") để trình đọc màn hình đọc nhãn và câu chữ; khung section không cần viền focus vì nó không bấm được. */
.cookie-banner:focus {
  outline: none;
}

/* role="status" luôn có trong DOM (để trình đọc màn hình nghe được khi JS điền chữ); trống thì không chiếm chỗ. */
.cookie-current:empty {
  margin-top: 0;
}

/* Accept và Decline giống hệt nhau: cùng nền, viền, bóng, cỡ. Không nút nào là nút chính. */
.cookie-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.cookie-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 0 20px;
  border: 2px solid var(--cb-ink);
  border-radius: 4px;
  background: var(--cb-surface);
  color: var(--cb-ink);
  font: 500 0.9rem/1 var(--mono, "IBM Plex Mono", ui-monospace, monospace);
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--cb-ink);
  transition: transform 120ms, box-shadow 120ms;
}

.cookie-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--cb-ink);
}

.cookie-btn:active {
  transform: translate(3px, 3px);
  box-shadow: 0 0 0 var(--cb-ink);
}

.cookie-banner :focus-visible {
  outline: 3px solid var(--cb-ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px var(--cb-ring);
  border-radius: 4px;
}

/* Link nằm giữa đoạn chữ: bỏ vòng vàng 6px để không che dòng phía trên, giữ viền mực. */
.cookie-text a:focus-visible {
  outline-offset: 2px;
  box-shadow: none;
}

/* Lựa chọn hiện tại khi mở lại từ footer: chỉ thêm dấu, không đổi trọng lượng nút. */
.cookie-btn[aria-pressed="true"]::before {
  content: "";
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: currentColor;
}

@media print {
  .cookie-banner {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner.is-entering {
    animation: none;
  }
  .cookie-btn {
    transition: none;
  }
}

/* Link "Cookie settings" trong footer: là button (mở UI, không điều hướng) nhưng trông như các link footer bên cạnh. */
.cookie-settings {
  margin: 0;
  padding: 0;
  line-height: inherit;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.cookie-settings[hidden] {
  display: none;
}

.site-footer .cookie-settings {
  color: var(--star, var(--text, #1a1a1a));
}

/* privacy.html, terms.html (styles.css): link footer có padding 6px 0, nút phải khớp. Server thêm class cookie-settings-pad cho hai trang này
   (không sửa styles.css để HTML và CSS của trang giữ nguyên khi env trống). */
.footer-links .cookie-settings-pad {
  padding: 6px 0;
}