/* nearest-store — modal tìm cửa hàng gần nhất (trang sản phẩm).

   LƯU Ý QUAN TRỌNG: theme đặt html { font-size: 10px } nên 1rem = 10px, KHÔNG phải 16px.
   Toàn bộ file này dùng thang đó (1.6rem = 16px, 1.4rem = 14px, 1.2rem = 12px) cho khớp
   convention của cart-drawer.css và các file khác trong theme.

   Viết CSS thật, không dùng Tailwind arbitrary values: theme không compile JIT nên các
   class dạng w-[42rem] viết tay trong .bwt sẽ không có tác dụng. */

.nearest-store {
  max-width: var(--dialog-max-width, 64rem);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  margin: auto;
}

.nearest-store__header {
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--color-neutral-50, #eee);
}

/* Nút đóng: bản đầu để nền trong suốt + icon thừa hưởng màu nhạt nên chìm hẳn vào nền
   trắng. Cho nền xám nhạt + viền + màu icon đậm để đọc được là một control.
   3.6rem = 36px, đủ vùng chạm trên mobile. */
.nearest-store__close {
  flex: 0 0 auto;
  width: 3.6rem;
  height: 3.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 1px solid var(--color-neutral-100, #e5e5e5);
  background: var(--color-neutral-50, #f4f4f4);
  color: var(--color-neutral-500, #333);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nearest-store__close .icon {
  font-size: 1.6rem;
  line-height: 1;
}

.nearest-store__close:hover,
.nearest-store__close:focus-visible {
  background: var(--color-neutral-100, #e5e5e5);
  border-color: var(--color-neutral-200, #ccc);
  color: var(--color-primary, #ff7709);
}

/* Thông báo dạng callout: nền có tông + viền trái đậm + icon.
   Bản trước chỉ đổi màu chữ trên nền trắng — chữ vàng cảnh báo trên trắng contrast quá
   thấp (trượt WCAG AA). Nay mỗi tông có nền nhạt riêng và chữ đậm màu để đạt tương phản. */
.nearest-store__status {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin: 1.2rem 0 0;
  padding: 1.2rem 1.4rem;
  border: 1px solid transparent;
  border-left-width: 3px;
  border-radius: 0.6rem;
  font-size: 1.5rem;
  line-height: 1.5;
}

/* Icon dựng bằng ega-iconfont, đổi glyph theo tông. */
.nearest-store__status::before {
  font-family: "ega-iconfont";
  font-size: 1.6rem;
  line-height: 1.4;
  flex: 0 0 auto;
  -webkit-font-smoothing: antialiased;
}

.nearest-store__status[data-tone="info"] {
  background: var(--color-neutral-50, #f4f4f5);
  border-color: #e4e4e7;
  border-left-color: #a1a1aa;
  color: #3f3f46;
}
.nearest-store__status[data-tone="info"]::before {
  content: "\ea1a"; /* icon-notification */
}

.nearest-store__status[data-tone="success"] {
  background: #ecfdf5;
  border-color: #a7f3d0;
  border-left-color: #059669;
  color: #065f46;
}
.nearest-store__status[data-tone="success"]::before {
  content: "\ea27"; /* icon-tick */
}

.nearest-store__status[data-tone="warn"] {
  background: #fffbeb;
  border-color: #fde68a;
  border-left-color: #d97706;
  color: #92400e;
}
.nearest-store__status[data-tone="warn"]::before {
  content: "\ea0f"; /* icon-danger */
}

.nearest-store__status[data-tone="error"] {
  background: #fef2f2;
  border-color: #fecaca;
  border-left-color: #dc2626;
  color: #991b1b;
}
.nearest-store__status[data-tone="error"]::before {
  content: "\ea0f"; /* icon-danger */
}

.nearest-store__list {
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  display: grid;
  gap: 0.8rem;
}

.nearest-store__item {
  padding: 1.2rem;
  border: 1px solid var(--color-neutral-50, #eee);
  border-radius: 0.6rem;
}

.nearest-store__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
}

.nearest-store__name {
  font-size: 1.6rem;
  font-weight: 600;
}

.nearest-store__distance {
  flex: 0 0 auto;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-primary, #ff7709);
  white-space: nowrap;
}

/* Địa chỉ có icon dẫn: icon canh theo dòng đầu, phần chữ tự xuống dòng thụt lề đều
   nhờ flex + align-items:flex-start. */
.nearest-store__address {
  margin: 0.6rem 0 0;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 1.4rem;
  line-height: 1.5;
  color: var(--color-neutral-400, #666);
}

.nearest-store__address .icon {
  flex: 0 0 auto;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--color-neutral-300, #999);
}

.nearest-store__actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1.4rem;
}

.nearest-store__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 500;
}

.nearest-store__phone .icon {
  font-size: 1.5rem;
  color: var(--color-neutral-300, #999);
}

/* "Chỉ đường" là hành động chính của mỗi cửa hàng nên nâng lên dạng nút viền,
   thay vì một link chữ dễ bị bỏ qua. */
.nearest-store__directions {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  font-weight: 600;
  color: var(--color-primary, #ff7709);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 9999px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nearest-store__directions .icon {
  font-size: 1.4rem;
}

.nearest-store__directions:hover,
.nearest-store__directions:focus-visible {
  background: var(--color-primary, #ff7709);
  color: #fff;
}

/* Ô tìm kiếm: thay cho việc cắt bớt danh sách. Icon đặt tuyệt đối bên trái, input
   chừa padding-left tương ứng. */
.nearest-store__search {
  position: relative;
  margin-top: 1.2rem;
}

.nearest-store__search .icon {
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  color: var(--color-neutral-300, #888);
  pointer-events: none;
}

.nearest-store__search-input {
  width: 100%;
  padding: 1.1rem 1.4rem 1.1rem 3.8rem;
  font-size: 1.5rem;
  line-height: 1.4;
  color: inherit;
  background: var(--color-background, #fff);
  border: 1px solid var(--color-neutral-100, #e5e5e5);
  border-radius: 0.6rem;
  outline: none;
}

.nearest-store__search-input::placeholder {
  color: var(--color-neutral-300, #999);
}

.nearest-store__search-input:focus {
  border-color: var(--color-primary, #ff7709);
}

.nearest-store__empty {
  padding: 2.4rem 1.2rem;
  text-align: center;
  font-size: 1.5rem;
  color: var(--color-neutral-400, #666);
}

/* Nút mở modal đặt dưới nút thêm vào giỏ.
   custom.css có .btn { border-radius: 9999px !important } nên muốn bo góc khác
   thì phải !important — ở đây giữ nguyên dạng bo tròn nên không cần ghi đè. */
.find-store-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  width: 100%;
  margin-top: 1.2rem;
  padding: 1.2rem 1.6rem;
  font-size: 1.6rem;
  font-weight: 600;
  background: transparent;
  border: 1px solid var(--color-neutral-100, #ddd);
  cursor: pointer;
}

.find-store-btn:hover {
  border-color: var(--color-primary, #ff7709);
  color: var(--color-primary, #ff7709);
}