/*
step-2.css
*/

/* ---------- Forms (Step 2 & 3) ---------- */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
@media screen and (max-width: 768px)
{
    .step-2.grid-2
    {
        grid-template-columns: 1fr;
    }

}

label {
    display: block;
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 4px;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
    background: #fff;
}

.hint {
    color: var(--muted);
    margin-top: 6px;
}
.step-2.hint 
{
    background-color: hsla(25, 100%, 50%, .5);
    padding: .75rem 1rem;
    border: 1px solid hsla(25, 100%, 50%, 1);

    text-align: left;
    border-radius: 1.5rem;

    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
}

@media screen and (max-width: 768px)
{
    .step-2.hint 
    {
        display: none;
    }
}



.full {
    grid-column: 1/-1;
}



/* ========================= v1.2.0 — Step 2 redesign + Modal ================== */

button.icon-only
{
  border-radius: 50%;
  padding: 0;
  border: 1px solid hsl(0deg 0% 100% / 60%);
  background: #c7e3ff;
  background: transparent;
  box-shadow:  2px 2px 6px #7cbeff9c,
               -2px -2px 6px #e5ffff;
  box-shadow: none;
}
button.icon-only > img 
{
  width: 2.6rem;
  height: 2.6rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
}

.dt-display .dt-icon{ font-size:18px; line-height:1; }
.dt-display .dt-text{ color:var(--ink); }

/* Overlay + modal with blur */
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index:1000;
}
.modal{
  position:fixed; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(640px, 92vw);

  border-radius:14px;
  box-shadow:0 20px 80px rgba(0,0,0,.35);
  z-index:1001;
  display:flex; flex-direction:column;
  max-height:86vh;

  background: transparent;
  background-color: var(--date-time-modal--bg-clr);
}



.modal[hidden], .modal-overlay[hidden]{ display:none !important; }
.modal-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px; border-bottom:1px solid var(--line);
}
.modal-close{
  border:none; background:transparent; font-size:22px; cursor:pointer; padding:6px; line-height:1;
}
.modal-body{ padding:16px 18px; overflow:auto; }
.modal-subtitle{ margin:10px 2px 8px; font-weight:600; }

.modal-foot{
  padding:14px 18px; border-top:1px solid var(--line);
  display:flex; justify-content:flex-end;
}

/* Days + pager */
.modal-week{
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
}
.modal-nav{
  width:36px; height:36px; border-radius:999px; border:1px solid var(--line);
  background:#fff; cursor:pointer;
}

.modal-days{ display:flex; gap:10px; overflow:auto; padding:.75rem .75rem; }
.modal-day{
  min-width:64px; height:64px; border-radius:999px;
  border:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:13px; cursor:pointer; user-select:none; background:#fff;
}
.modal-day .dow{ font-size:12px; color:var(--muted); }

.modal-day.selected {
  border-color: hsla(0, 100%, 100%, .4);

  box-shadow: 0 0 0 2px rgba(0, 0, 0, .06);

  background-color: transparent;
  background-image: url('/assets/modal-imgs/2-date-time-bg-imgs.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* Mỗi ô ngày được bọc trong .modal-day-wrap (con trực tiếp của #modal-days) */
#modal-days > .modal-day-wrap {
  position: relative;
  overflow: visible;          /* để halo nở ra ngoài ô */
  border-radius: 50%;
  --ring-color: 255 255 255;  /* R G B - đổi theo brand nếu muốn */
  --ring-max: 56px;           /* độ nở tối đa của halo */
}

/* Pseudo mặc định: tắt sẵn */
#modal-days > .modal-day-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;
  box-shadow:
    0 0 0 0 rgba(var(--ring-color) / 0.70),
    0 0 0 0 rgba(var(--ring-color) / 0.40),
    0 0 0 0 rgba(var(--ring-color) / 0.22);
  mix-blend-mode: screen;
  opacity: 0;
  animation: haloFromBorder 2.8s ease-out infinite;
  animation-play-state: paused;     /* pause khi chưa selected */
  transition: opacity .2s ease;
}

/* CHỈ ô nào có button con .modal-day.selected mới bật hiệu ứng */
#modal-days > .modal-day-wrap:has(> .modal-day.selected)::after {
  opacity: 1;
  animation-play-state: running;
}

/* Overlay của bạn: dưới halo */
.modal-day.selected::before { z-index: 1; }

/* (khuyến nghị) bo góc cho button để halo bám viền đẹp */
.modal-day { border-radius: 50%; }

/* Keyframes giữ nguyên như bạn đang dùng */
@keyframes haloFromBorder {
  0% {
    box-shadow:
      0 0 0 0                 rgba(var(--ring-color) / 0.70),
      0 0 0 0                 rgba(var(--ring-color) / 0.00),
      0 0 0 0                 rgba(var(--ring-color) / 0.00);
  }
  20% {
    box-shadow:
      0 0 0 calc(var(--ring-max)*.18)  rgba(var(--ring-color) / 0.00),
      0 0 0 0                          rgba(var(--ring-color) / 0.50),
      0 0 0 0                          rgba(var(--ring-color) / 0.00);
  }
  40% {
    box-shadow:
      0 0 0 calc(var(--ring-max)*.40)  rgba(var(--ring-color) / 0.00),
      0 0 0 calc(var(--ring-max)*.18)  rgba(var(--ring-color) / 0.00),
      0 0 0 0                          rgba(var(--ring-color) / 0.35);
  }
  60% {
    box-shadow:
      0 0 0 calc(var(--ring-max)*.62)  rgba(var(--ring-color) / 0.00),
      0 0 0 calc(var(--ring-max)*.40)  rgba(var(--ring-color) / 0.00),
      0 0 0 calc(var(--ring-max)*.18)  rgba(var(--ring-color) / 0.00);
  }
  80% {
    box-shadow:
      0 0 0 calc(var(--ring-max)*.82)  rgba(var(--ring-color) / 0.00),
      0 0 0 calc(var(--ring-max)*.62)  rgba(var(--ring-color) / 0.00),
      0 0 0 calc(var(--ring-max)*.40)  rgba(var(--ring-color) / 0.00);
  }
  100% {
    box-shadow:
      0 0 0 var(--ring-max)            rgba(var(--ring-color) / 0.00),
      0 0 0 calc(var(--ring-max)*.82)  rgba(var(--ring-color) / 0.00),
      0 0 0 calc(var(--ring-max)*.62)  rgba(var(--ring-color) / 0.00);
  }
}
.modal-day.disabled{ opacity:.35; cursor:not-allowed; }


/* Time slots (horizontal scroll) */
.modal-slots {
  display: flex;
  gap: 10px;
  overflow: auto;
  padding: .5rem .75rem;
}
.modal-slot{
  padding:.65rem .9rem; border:1px solid var(--line); border-radius:999px; background:#fff;
  white-space:nowrap; cursor:pointer; position:relative;
}
.modal-slot .badge-extra{
  position:absolute; top:-10px; left:10px; font-size:10px; padding:2px 6px; border-radius:999px;
  background:#ffda79; border:1px solid #f7c948;
}
.modal-slot.selected 
{ 
  border-color:#111;
  box-shadow:0 0 0 2px rgba(0,0,0,.06);

  background-color: transparent;
  background-image: url('/assets/modal-imgs/2-date-time-bg-imgs.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}


/*
<!-- 
HOÀN THIỆN STEP 2: 
INDEX-V2.HTML: FILE NÀY CŨNG CHÍNH LÀ FILE BACKUP LẠI KHI CẦN
==> INDEX-V3.HTML UPDATE STEP 3
-->
*/


.phone-field {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.phone-field .full 
{
  width: 100%
}
.phone-field #dial-code
{
    background-color: red;
    width: 20%;
    max-width: 12rem;
}
.phone-field #phone
{
    background-color: red;
    width: calc(80% - 8px);
}



/* =========================
   SETTINGS (tuỳ chỉnh nhanh)
   ========================= */
:root {
  --ring-color: 255 255 255; /* RGB – đổi theo brand nếu muốn */
  --ring-max: 56px;          /* bán kính nở tối đa của halo */
  --ring-duration: 2.8s;     /* tốc độ ripple */
  --ring-radius--date: 50%;       /* bo góc để halo bám viền đẹp */
  --ring-radius--time-slot: 3rem;       /* bo góc để halo bám viền đẹp */
}

/* =========================
   DAY — mỗi ô ngày
   ========================= */
#modal-days > .modal-day-wrap {
  position: relative;
  overflow: visible;      /* cho halo nở ra ngoài viền */
  border-radius: var(--ring-radius--date);
}

/* pseudo: tắt sẵn */
#modal-days > .modal-day-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 10; /* trên ::before của .modal-day */
  box-shadow:
    0 0 0 0 rgba(var(--ring-color) / 0.70),
    0 0 0 0 rgba(var(--ring-color) / 0.40),
    0 0 0 0 rgba(var(--ring-color) / 0.22);
  mix-blend-mode: screen;      /* nếu nền quá sáng có thể bỏ dòng này */
  opacity: 0;
  animation: haloFromBorder var(--ring-duration) ease-out infinite;
  animation-play-state: paused;
  transition: opacity .2s ease;
}

/* chỉ ô có button con .selected mới bật halo */
#modal-days > .modal-day-wrap:has(> .modal-day.selected)::after {
  opacity: 1;
  animation-play-state: running;
}

/* gợi ý: bo góc button để halo bám sát */
.modal-day { border-radius: var(--ring-radius--date); }
/* overlay của bạn phải nằm dưới halo */
.modal-day.selected::before { z-index: 1; }

/* =========================
   SLOT — mỗi ô slot (LƯU Ý: class là modal-slop-wrap theo render của bạn)
   ========================= */
#modal-slots > .modal-slop-wrap {
  position: relative;
  overflow: visible;
  border-radius: var(--ring-radius--time-slot);
}

/* pseudo: tắt sẵn */
#modal-slots > .modal-slop-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;
  box-shadow:
    0 0 0 0 rgba(var(--ring-color) / 0.70),
    0 0 0 0 rgba(var(--ring-color) / 0.40),
    0 0 0 0 rgba(var(--ring-color) / 0.22);
  mix-blend-mode: screen;
  opacity: 0;
  animation: haloFromBorder var(--ring-duration) ease-out infinite;
  animation-play-state: paused;
  transition: opacity .2s ease;
}

/* chỉ slot con được chọn mới bật halo */
#modal-slots > .modal-slop-wrap:has(> .modal-slot.selected)::after {
  opacity: 1;
  animation-play-state: running;
}

/* slot pill nên có bo góc tương ứng */
.modal-slot { border-radius: var(--ring-radius--time-slot); }

/* =========================
   Keyframes dùng chung
   ========================= */
@keyframes haloFromBorder {
  0% {
    box-shadow:
      0 0 0 0                         rgba(var(--ring-color) / 0.70),
      0 0 0 0                         rgba(var(--ring-color) / 0.00),
      0 0 0 0                         rgba(var(--ring-color) / 0.00);
  }
  20% {
    box-shadow:
      0 0 0 calc(var(--ring-max)*.18) rgba(var(--ring-color) / 0.00),
      0 0 0 0                         rgba(var(--ring-color) / 0.50),
      0 0 0 0                         rgba(var(--ring-color) / 0.00);
  }
  40% {
    box-shadow:
      0 0 0 calc(var(--ring-max)*.40) rgba(var(--ring-color) / 0.00),
      0 0 0 calc(var(--ring-max)*.18) rgba(var(--ring-color) / 0.00),
      0 0 0 0                         rgba(var(--ring-color) / 0.35);
  }
  60% {
    box-shadow:
      0 0 0 calc(var(--ring-max)*.62) rgba(var(--ring-color) / 0.00),
      0 0 0 calc(var(--ring-max)*.40) rgba(var(--ring-color) / 0.00),
      0 0 0 calc(var(--ring-max)*.18) rgba(var(--ring-color) / 0.00);
  }
  80% {
    box-shadow:
      0 0 0 calc(var(--ring-max)*.82) rgba(var(--ring-color) / 0.00),
      0 0 0 calc(var(--ring-max)*.62) rgba(var(--ring-color) / 0.00),
      0 0 0 calc(var(--ring-max)*.40) rgba(var(--ring-color) / 0.00);
  }
  100% {
    box-shadow:
      0 0 0 var(--ring-max)           rgba(var(--ring-color) / 0.00),
      0 0 0 calc(var(--ring-max)*.82) rgba(var(--ring-color) / 0.00),
      0 0 0 calc(var(--ring-max)*.62) rgba(var(--ring-color) / 0.00);
  }
}

/* A11y */
/* @media (prefers-reduced-motion: reduce) {
  #modal-days > .modal-day-wrap::after,
  #modal-slots > .modal-slop-wrap::after {
    animation: none;
    opacity: .5;
  }
} */

@media (prefers-reduced-motion: reduce) {
  /* Cho phép chạy nhưng chậm lại (thân thiện hơn) */
  #modal-days > .modal-day-wrap::after,
  #modal-slots > .modal-slop-wrap::after {
    animation-duration: calc(var(--ring-duration) * 1.8);
    opacity: .6;
  }
}












/* =============================================================================
 * Horizontal scroll container — .modal-days
 * Mục tiêu:
 * - Cuộn ngang mượt (mouse/trackpad/touch)
 * - Ẩn toàn bộ thanh cuộn (Chrome/Edge/Safari/Firefox/IE11/Legacy Edge)
 * - Không gây layout shift, không “nhảy” nội dung
 * - Dễ tái sử dụng (kèm utility .u-hide-scrollbar)
 * -----------------------------------------------------------------------------
 * Ghi chú:
 * - Nếu bạn muốn hiệu ứng snap (từng item “khớp” khi dừng cuộn), xem phần gợi ý
 *   ở cuối file.
 * - Vẫn đảm bảo khả năng cuộn bằng bàn phím (Shift + wheel / phím mũi tên)
 * ============================================================================ */

/* Utility dùng chung: ẩn scrollbar, vẫn cho cuộn */
.u-hide-scrollbar {
  /* Firefox: tắt vệt scrollbar nhưng vẫn cuộn */
  scrollbar-width: none;               /* FF 64+ */

  /* IE 10–11 / Legacy Edge: tắt scrollbar */
  -ms-overflow-style: none;            /* IE/Edge Legacy */

  /* WebKit/Chromium: ẩn toàn bộ thanh cuộn */
  /* Lưu ý: một số phiên bản cần cả width/height = 0 để chắc chắn ẩn */
}
.u-hide-scrollbar::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
  /* Một số trình duyệt vẫn áp dụng display:none; nhưng width/height=0 ổn định hơn */
  /* display: none; */
}

/* Áp dụng cho .modal-days */
.modal-slots,
.modal-days {
  /* Layout & spacing gốc của bạn */
  /* display: flex;
  gap: 10px;
  padding: 0.75rem 0.75rem; */

  /* Cuộn ngang */
  overflow-x: auto;         /* Chỉ mở cuộn theo trục X */
  overflow-y: hidden;       /* Tránh hiện scrollbar dọc không cần thiết */
  white-space: nowrap;      /* (tuỳ) giúp các item không tự xuống dòng */

  /* Tối ưu cảm ứng (iOS momentum scroll) */
  -webkit-overflow-scrolling: touch;

  /* Giảm hiệu ứng “kéo quá”/bounce và tránh chặn cuộn nền */
  overscroll-behavior-inline: contain; /* logical property cho trục inline (X trong LTR) */
  overscroll-behavior: contain;

  /* Tối ưu tương tác cảm ứng ngang */
  touch-action: pan-x;
  /* (tuỳ) cải thiện hiệu năng cuộn khi thao tác chủ yếu là transform/opacity */
  will-change: scroll-position;

  /* Ẩn scrollbar trên mọi trình duyệt qua utility (giữ tách biệt trách nhiệm) */
  /* Bạn có thể gộp trực tiếp các rule vào đây nếu không muốn dùng utility */
}

/* Kết dính utility bằng cách thêm selector chung */
/* .modal-days {
  
} */
 
.modal-slots,
.modal-slots.u-hide-scrollbar,
.modal-days,
.modal-days.u-hide-scrollbar { /* đảm bảo dù có/không gắn class vẫn ẩn */
  scrollbar-width: none;
  -ms-overflow-style: none;
  scroll-padding-left: .75rem;   /* thêm khoảng trống “ảo” ở đầu scroll */
}
.modal-slots::-webkit-scrollbar,
.modal-days::-webkit-scrollbar {
  width: 0;
  height: 0;
  background: transparent;
}

/* ============================================================================
 * (Tuỳ chọn) Edge fade — gợi ý thị giác “còn nội dung để cuộn”
 * Sử dụng mask để tạo mờ ở 2 mép, không ảnh hưởng tới hit-test/scroll.
 * Bật nếu bạn muốn UX “gợi ý cuộn” mà vẫn ẩn scrollbar.
 * Lưu ý: Hỗ trợ tốt trên Chromium/Safari; Firefox hỗ trợ mask-image tiêu chuẩn.
 * ========================================================================== */
/*
.modal-days {
  mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,1) 24px,
    rgba(0,0,0,1) calc(100% - 24px),
    rgba(0,0,0,0) 100%
  );
  -webkit-mask-image: linear-gradient(
    to right,
    rgba(0,0,0,0) 0,
    rgba(0,0,0,1) 24px,
    rgba(0,0,0,1) calc(100% - 24px),
    rgba(0,0,0,0) 100%
  );
}
*/

/* ============================================================================
 * (Tuỳ chọn) Scroll-snap — nếu các item có kích thước đều
 * Bật để “hít” vào từng thẻ khi dừng cuộn, tăng cảm giác gọn gàng.
 * ========================================================================== */
.modal-slots,
.modal-days {
  scroll-snap-type: x proximity;  /* hoặc mandatory nếu muốn “khớp cứng” */
}

.modal-slots > *,
.modal-days > * {
  scroll-snap-align: start;
}





/*
2) Bổ sung CSS fallback dùng class (sống chung với :has() – trình duyệt nào hỗ trợ sẽ dùng :has(), không thì dùng class)

Giữ block :has() hiện có. Thêm 2 rule sau để fallback:
*/
/* Fallback cho máy không hỗ trợ :has() */
#modal-days > .modal-day-wrap.has-selected::after {
  opacity: 1;
  animation-play-state: running;
}
#modal-slots > .modal-slop-wrap.has-selected::after {
  opacity: 1;
  animation-play-state: running;
}

/* Tuỳ chọn: chỉ dùng :has() nếu có hỗ trợ, còn lại dùng fallback class */
@supports selector(:has(*)) {
  #modal-days > .modal-day-wrap.has-selected::after,
  #modal-slots > .modal-slop-wrap.has-selected::after {
    /* tránh double-trigger khi có :has */
    opacity: 0;
    animation-play-state: paused;
  }
}


/* 🟠🍄🟠 #V1.6.4.1 — Modal title/subtitle icons + spacing guards */
.modal-subtitle:empty { min-height: 0; margin-top: 8px; }

/*
==================================================
🟠🍄🟠 #V1.6.4.2 Step 2 — Dynamic labels
==================================================
*/
.dt-label{
  display:flex; align-items:center; gap:.5rem;
  flex-wrap: wrap; /* cần có để dt-label-description có thể nằm ở 1 hàng riêng */
  color: var(--muted);
  margin-bottom: 4px; /* khớp spacing label cũ */
  line-height: 1.25;
}

/* Icon trong label Step 2 (đã có sẵn), đảm bảo hiển thị đẹp */
.dt-label .dt-label-icon{
  --label-icon---width: 2.5rem;
  --label-icon--height:var(--icon-fields--width);
  --label-icon--aspect: 1/1;
  --label-icon--rad: 50%;

  width: var(--label-icon---width);
  height: var(--label-icon--height);
  aspect-ratio: var(--label-icon--aspect);
  border-radius: var(--label-icon--rad);

  object-fit: contain;
  margin-right: .35rem;
  vertical-align: -3px;
  flex: 0 0 20px;
  background: transparent;
  background-color: transparent;
}
/* Label text content */
.dt-label .dt-label-text
{
  display:inline-block;
  font-size: 1rem;
  font-weight: 500;
  color: #1D1D1D;
}
.dt-label .dt-label-description
{
  display:block;
  width: 100%;
  font-size: .88rem;
  font-weight: 500;
  color: var(--muted);
}
/*
====================================================================================================
🟠🍄🟠 #V1.6.4.5 Step 2 — Step 2 display field (pickup/dropoff)
====================================================================================================
/* Giữ .dt-display cũ, bổ sung layout mới */
.dt-display {
  width: 100%; /* cần có để hiện thị 100% <=768px */
  position: relative; /* để đặt badge EXTRA */
  display: grid;
  grid-template-columns: auto 1fr; /* icon ảnh | content */
  align-items: center;
  
  gap: .5rem;
  padding: .5rem .5rem;
  border: 1px solid var(--clr-white-4);
  border-radius:.75rem;

  cursor:pointer;
  text-align:left;
  background: transparent;
  background-color: var(--service-car--bg-clr);
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
/* Icon ảnh thay emoji */
.dt-display .dt-icon-img{
  --icon-fields--width: 2.5rem;
  --icon-fields--height:var(--icon-fields--width);
  --icon-fields--aspect: 1/1;
  --icon-fields--rad: 50%;
  

  width: var(--icon-fields--width);
  height: var(--icon-fields--height);
  aspect-ratio: var(--icon-fields--aspect);
  border-radius: var(--icon-fields--rad);
  object-fit: contain; 
  flex: 0 0 auto;
}
.pickup-display .dt-display .dt-icon-img
{
  /*same as nermotphisim add/minus icon */
  border: 1px solid hsl(0deg 0% 100% / 60%);
  background: #c7e3ff;
  box-shadow:  2px 2px 6px #7cbeff9c,
               -2px -2px 6px #e5ffff;

  border: none;
  background: transparent;
  background-color: transparent;
  box-shadow: none;
}

.dropoff-display .dt-display .dt-icon-img
{
  /*same as nermotphisim add/minus icon */
  border: 1px solid hsl(0deg 0% 100% / 60%);
  background: #c7e3ff;
  box-shadow:  2px 2px 6px #7cbeff9c,
               -2px -2px 6px #e5ffff;
}

/* Content trái/phải */
.dt-display .dt-content{
  display: grid;
  grid-template-columns: 1fr auto; /* trái: ngày; phải: time pill */
  align-items: center;
  width: 100%;
}

.dt-display .dt-left { min-width: 0; } /* tránh overflow */
.dt-display .dt-day{
  display: inline-block;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Time pill cố định bên phải */
.dt-display .dt-right{ display: flex; align-items: center; }
.dt-display .dt-time{
  display: inline-block;
  padding: .35rem .65rem;
  border: 1px solid var(--clr-white-4);
  border-radius: 999px;
  min-width: 6.5rem;       /* giữ chiều rộng tối thiểu để ổn định layout */
  text-align: center;

  background: transparent;
  background-color: var(--clr-blue-dark-2);

  background-color:hsla(237,0%,100%,0);
  background-image:
  radial-gradient(at 28% 20%, hsla(0,0%,100%,0.8) 0px, transparent 50%),
  radial-gradient(at 79% 69%, hsla(0,0%,100%,0.8) 0px, transparent 50%); 
}

/* Placeholder (khi chưa chọn): mờ + italic */
.dt-display.is-empty .dt-day{ color: var(--muted); font-style: italic; }
.dt-display.is-empty .dt-time{ opacity: .5; }

/* Badge EXTRA ở góc phải-trên */
.dt-display .dt-extra{
  position: absolute;
  top: -12px;
  right: 10px;
  font-size: 8.8px;
  padding: 2px 6px;
  border-radius: 999px;
  background: hsla(44, 92%, 63%, .6); /* #ffda79 >> vàng cam theo yêu cầu; bạn đổi sau */
  border: 1px solid #f7c948;

  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}


/* #V1.6.5.2 — Hide time pill & extra when field is empty
   - Tránh đè lên placeholder dt-day khi chưa chọn.
   - Khi JS bỏ .is-empty (đã chọn), phần .dt-right sẽ tự hiện lại.
*/
.dt-display.is-empty .dt-right { 
  display: none; 
}
.dt-display.is-empty .dt-extra {
  display: none !important; /* an toàn, dù JS đã hidden sẵn */
}

.modal-day.selected::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
  border-radius: inherit;
  pointer-events: none;
  z-index: 10;
  background-image: url('/assets/icons/modals/glass-effect.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed;
  opacity: 1;
  background-color: transparent;
}