/* tpl-access-dock.css — DÙNG CHUNG. Capsule truy cập nổi giữa đáy trang.
 *
 * Cặp với: `resources/views/components/access_dock.blade.php` (markup) và
 * `assets/js/tpl-access-dock.js` (máy trạng thái nở/thu).
 *
 * Hai điểm phải kiểm lại khi dùng cho template mới:
 *  1. `bottom` (70px desktop / 82px mobile) ăn theo `.player` + `.weddingplan-logo`.
 *     Template nào đặt hai thứ đó ở vị trí khác thì phải chỉnh lại con số.
 *  2. `.tpl-scrub .footer-section{padding-bottom}` chừa đường băng cuối trang cho
 *     capsule (nó luôn hiện). Template có footer tên khác thì thêm selector tương ứng.
 */

/* Đường băng cuối trang. Capsule luôn hiện (kể cả dạng thu) nên ở đáy trang nó đè
   đúng dòng #couple-name-thankyou — đo được: mobile chồng 12px, desktop 2px.
   Chừa chỗ ở đây là cách duy nhất chắc chắn; cơ chế cũ (thu về sợi vô hình khi thấy
   footer) chỉ giấu vấn đề đi bằng cách giấu luôn cả menu. Chỉ ăn vào .tpl-scrub nên
   32 template kia không đụng tới.
   112px (trước là 152px): capsule desktop hạ từ bottom:122px xuống bottom:70px, mép
   trên nó thấp đi đúng 40px nên đường băng thừa đúng 40px. Khoảng hở giữ nguyên như
   trước — đo ở 800/1024/1440px, dòng tên còn cách mép trên capsule 16px. Mobile giữ
   96px vì capsule mobile không đổi chỗ. */
.tpl-scrub .footer-section {
  padding-bottom: 112px !important;
}

/* Capsule nổi giữa đáy, KHÔNG phải dải full-bleed. Bản trước trải `left:0;right:0`
   nền đục, vuông góc, nổi lơ lửng cách đáy 82px -> đọc thành thanh cookie-consent
   cắt ngang ảnh. Capsule co theo nội dung nên nó là một vật thể có chủ đích. */
#access-dock {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;                       /* dưới .donate-modal (199) và offcanvas menu */
  max-width: calc(100% - 24px);
  font-family: 'Bellota Text', cursive;
  /* Tablet trở lên: capsule THẲNG HÀNG với .player (trái) và .weddingplan-logo (phải)
     — ba vật thể của cùng một hàng đáy, không phải ba thứ rời rạc. Đúng 70px, tức là
     bottom của hai nút kia: khớp MÉP DƯỚI chứ không khớp tâm, vì capsule cao 60-72px
     tuỳ nhãn xuống 1 hay 2 dòng (29 locale, không đoán trước được) — mép dưới đứng
     yên, tâm thì trôi.
     Không sợ đụng nhau theo phương ngang: hai nút bám sát hai mép, capsule co theo
     nội dung ở giữa. Chỉ tooltip của chúng (hiện 2-7s đầu + khi hover) mới chạm mép
     capsule trong dải 800-1080px, và tooltip vẽ ĐÈ LÊN (z-index 99998/99999 > 150).
     KHÔNG dùng lại bottom:122px của bản trước: nó né dải nút bằng cách bay hẳn lên
     giữa ảnh, trên màn rộng đọc thành vật thể lạc chỗ. Mobile vẫn phải đẩy lên (@media
     bên dưới) vì ở đó hai nút trải gần hết bề ngang. */
  bottom: 70px;
}

#access-dock .dock-items {
  display: flex;
  align-items: stretch;               /* nhãn 2 dòng không làm icon lệch cao thấp */
  justify-content: center;
  margin: 0;
  padding: 0;
  overflow: hidden;                   /* giữ nội dung trong hình viên thuốc */
  list-style: none;
  border-radius: 999px;
  border: 1px solid rgba(168, 130, 144, .2);
  background: rgba(255, 255, 255, .82);
  /* Bóng ĐỔ XUỐNG: vật thể nổi trên trang. Bản trước hắt lên (0 -6px) — kiểu bóng
     của thanh dính đáy, sai với hình khối này. */
  box-shadow: 0 10px 30px rgba(28, 28, 28, .14), 0 2px 6px rgba(28, 28, 28, .06);
  transition: border-radius 320ms ease;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #access-dock .dock-items {
    background: rgba(255, 255, 255, .66);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

/* Cột ĐỀU NHAU. Bề ngang mỗi mục trước đây do CHÍNH nhãn của nó quyết định — đo được
   "Send Wishes" 86px, "RSVP" 76px, "Wedding Gift Box" 110px -> tâm ba icon cách nhau
   81px rồi 93px, nhìn ra ngay là lệch. `flex:1 1 0` giữ nguyên bề ngang capsule rồi
   CHIA ĐỀU cho các cột (đo lại: 274px -> 3 x 91px, tâm icon cách nhau đúng 91/91) nên
   khoảng cách luôn bằng nhau mà không phải đo chữ cho từng locale trong số 29 locale.
   Đổi lại, nhãn dài nhất có thể xuống 2 dòng ở desktop — `.dock-label{max-height:26px}`
   vốn đã chừa sẵn chỗ cho 2 dòng, mobile lâu nay vẫn ngắt như vậy.
   min-width:0 để cột hẹp hơn nội dung khi màn chật thay vì tràn ra ngoài viên thuốc. */
#access-dock .dock-item {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
}

#access-dock .dock-link {
  flex: 1;                            /* link phủ kín cột -> icon căn giữa ĐÚNG cột */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* flex-start chứ không center: .dock-items là align-items:stretch nên mọi link cao
     bằng nhau; căn giữa sẽ đẩy mục có nhãn 1 dòng ("RSVP") xuống, icon lệch hàng. */
  justify-content: flex-start;
  gap: 4px;
  min-width: 76px;                    /* sàn cho locale chỉ có nhãn ngắn (mọi cột cùng chạm sàn -> vẫn đều) */
  min-height: 44px;                   /* kích thước chạm tối thiểu */
  padding: 9px 12px 10px;
  color: #7d6560;
  text-decoration: none;
  transition: color 200ms ease;
}

#access-dock .dock-icon {
  display: block;
  width: 22px;
  height: 22px;
  opacity: .72;
  transition: opacity 200ms ease, transform 200ms ease;
}

#access-dock .dock-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

#access-dock .dock-label {
  /* Trần cho locale có từ dài bất thường. Từ khi cột chia đều (xem .dock-item) thì bề
     ngang thật của nhãn thường nhỏ hơn trần này — "Wedding Gift Box" nằm trong cột 91px
     nên xuống 2 dòng, đúng chỗ mà max-height 26px bên dưới đã chừa. */
  max-width: 110px;
  font-size: 10.5px;
  line-height: 1.2;
  letter-spacing: .3px;
  text-align: center;
  /* Nhãn chỉ tồn tại ở dạng nở. max-height thay vì display:none để co/nở mượt. */
  max-height: 26px;
  overflow: hidden;
  transition: max-height 300ms ease, opacity 220ms ease;
}

#access-dock .dock-link:hover,
#access-dock .dock-link:focus-visible,
#access-dock .dock-link[aria-current] {
  color: #a88290;
}

#access-dock .dock-link:hover .dock-icon,
#access-dock .dock-link:focus-visible .dock-icon,
#access-dock .dock-link[aria-current] .dock-icon {
  opacity: 1;
}

#access-dock .dock-link:focus-visible {
  outline: 2px solid #a88290;
  outline-offset: -3px;
  border-radius: 999px;
}

/* Dạng THU: bỏ nhãn, còn hàng icon. Không biến mất như bản trước (sợi 3px màu
   #c9b5b6 trên nền sáng là vô hình) — cuộn xuống là hướng cuộn chính của trang
   cưới, mất lối vào RSVP/mừng cưới ở đó là mất chức năng, không phải gọn gàng. */
#access-dock.dock--compact .dock-label {
  max-height: 0;
  opacity: 0;
}

#access-dock.dock--compact .dock-link {
  min-width: 52px;
  padding: 11px 10px;
}

@media (max-width: 799px) {
  .tpl-scrub .footer-section {
    /* Giữ nguyên 96px: capsule mobile không đổi chỗ, và tuy mép trên nó cách đáy 152px
       (cao hơn desktop) thì chữ footer ở mobile cũng nhỏ/khít hơn — đo được vẫn hở 13px. */
    padding-bottom: 96px !important;
  }
  /* Mobile là nơi DUY NHẤT còn phải đẩy capsule lên trên dải nút: ở 390px, nút nhạc +
     tooltip của nó và badge WP trải gần hết bề ngang, đứng chung một dải là chồng nhau
     ngay. Từ 800px trở lên hai nút co về hai mép nên capsule về thẳng hàng với chúng
     (bottom:70px ở trên). .player/.weddingplan-logo mobile ở bottom 30px cao 40px. */
  #access-dock {
    bottom: 82px;
  }
  #access-dock .dock-link {
    min-width: 68px;
    padding: 8px 10px 9px;
  }
  /* 3 nhãn × 110px không lọt 390px -> cho ngắt 2 dòng, max-height của .dock-label
     đã chừa sẵn chỗ. */
  #access-dock .dock-label {
    max-width: 84px;
  }
  #access-dock.dock--compact .dock-link {
    min-width: 48px;
    padding: 10px 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #access-dock .dock-items,
  #access-dock .dock-label,
  #access-dock .dock-icon,
  #access-dock .dock-link {
    transition: none;
  }
}