/* tpl-brand-badge.css — DÙNG CHUNG (bộ template scrub). Tạo dáng lại NHÃN CHỮ của badge
 * Wedding Plan (`.weddingplan-logo-secondary`) cho khớp chất liệu kính mờ của dải đáy.
 * Không có JS đi kèm — chỉ CSS.
 *
 * KHÔNG sửa `resources/views/layouts/app.blade.php` — markup + style của badge được
 * `document.write` ở đó cho cả 33 template. Ta chỉ ĐÈ lên. Hợp đồng giữ nguyên:
 *   `.weddingplan-logo` gốc · `.show-sec` điều khiển nhịp 8s->11s và 25s->28s ·
 *   `:hover` · `.weddingplan-logo-secondary-content` vẫn giữ chuỗi đã dịch.
 *
 * BẪY SPECIFICITY: <style> của app.blade.php nằm trong body, tức là SAU <link> này
 * trong <head>. Cùng specificity thì bản sau thắng -> mọi selector ở đây phải có tiền
 * tố `body `. Không dùng !important.
 *
 * PHẠM VI: file chỉ nạp cho template nào bật cờ $brand (mặc định theo partial
 * tpl-scrub-styles) -> 32 template kia giữ nguyên nhãn trắng viền đỏ.
 *
 * Nhãn này là ẢNH GƯƠNG của tooltip nút nhạc (`tpl-music-player.css`): cùng bộ token,
 * chỉ đổi trục neo trái <-> phải. Sửa màu/kiểu chữ ở một bên thì sửa nốt bên kia.
 */

body .weddingplan-logo {
  /* Bề ngang tối đa. Mobile: chừa 76px cho `.player` bên trái (20 lề + 40 nút + 16 khe)
     và 66px bên phải (20 lề + 46 khe). Đo ở 390px: nhãn trải 76..324, chip nhạc kết
     thúc ở 60 -> khe 16px. Bản gốc để `width:320px` CỨNG ở CẢ HAI node nên nhãn trải
     50..370, CẮT NGANG chip nhạc 10px — lỗi có sẵn, sửa luôn ở đây. */
  --tpl-badge-tip-max: 320px;
  /* Logo 40px + 6px khe: nhãn trượt ra từ SAU logo, không luồn xuống dưới. */
  --tpl-badge-tip-gap: 46px;
}

/* Khung ngoài = cửa sổ cắt cho hiệu ứng trượt. `width:max-content` chỉ đo được khi ruột
   nằm TRONG luồng -> ruột đổi absolute thành relative bên dưới. */
body .weddingplan-logo-secondary {
  top: 50%;
  right: var(--tpl-badge-tip-gap);
  width: -webkit-max-content;
  width: max-content;
  max-width: var(--tpl-badge-tip-max);
  height: auto;
  padding: 0;
  box-sizing: border-box;
  transform: translateY(-50%);   /* căn giữa theo logo, kể cả khi chữ xuống 2 dòng */
}

/* inline-flex để co theo chữ; `right:0` xoá độ lệch -25px của bản gốc (mẹo luồn ruột
   xuống dưới logo — không còn cần khi nhãn đã tách hẳn sang trái logo).
   Bỏ `font-family:arial` + `font-weight:200` + viền đỏ #df4759 của bản gốc. */
body .weddingplan-logo-secondary-content {
  position: relative;
  right: 0;
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: var(--tpl-badge-tip-max);
  min-height: 40px;
  height: auto;
  padding: 9px 16px;
  box-sizing: border-box;
  border: 1px solid rgba(168, 130, 144, .2);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  font-family: 'Bellota Text', cursive;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: #7d6560;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body .weddingplan-logo-secondary-content {
    background: rgba(255, 255, 255, .66);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

/* RTL bằng CSS thuần: `<html lang>` giờ đã ra đúng locale (app.blade.php dùng nhầm
   array_key_exists trên mảng list nên trước đây luôn ra 'vi' — đã sửa). Nút nhạc phải
   đặt dir bằng JS vì nó vốn đã có sẵn file JS; badge này không đáng thêm một file JS
   chỉ để gắn một attribute. */
body .weddingplan-logo-secondary-content:lang(ar),
body .weddingplan-logo-secondary-content:lang(he),
body .weddingplan-logo-secondary-content:lang(fa),
body .weddingplan-logo-secondary-content:lang(ur) {
  direction: rtl;
}

@media (max-width: 799px) {
  body .weddingplan-logo {
    --tpl-badge-tip-max: calc(100vw - 142px);   /* 76 chừa cho .player + 66 lề/khe phải */
  }
}

@media (prefers-reduced-motion: reduce) {
  body .weddingplan-logo-secondary-content {
    transition: none;
  }
}
