/* VN Store Locator – Public Frontend CSS
   Chỉ load khi shortcode [vn_store_locator] được dùng */

/* ── Reset trong scope ────────────────────────────────────── */
.vnsl-root *, .vnsl-locator * {
  box-sizing: border-box;
}
.vnsl-root, .vnsl-locator {
  font-family: inherit;
  font-size: 14px;
  color: #1a1a2e;
  line-height: 1.5;
}

/* ── SVG Icon ─────────────────────────────────────────────── */
.twvnsl-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  vertical-align: middle;
}
.twvnsl-icon svg { display: block; }
@keyframes twvnsl-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.twvnsl-spin { animation: twvnsl-spin 0.8s linear infinite; display: block; }

/* ── Select (sidebar filters) ─────────────────────────────── */
.vnsl-root .twvnsl-select {
  width: 100%;
  padding: 10px 36px 10px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  color: #1a1a2e;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") no-repeat right 12px center / 14px;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s, box-shadow .2s;
}
.vnsl-root .twvnsl-select:focus {
  border-color: var(--vnsl-accent, #64b2fa);
  box-shadow: 0 0 0 3px rgba(100,178,250,.15);
}
.vnsl-root .twvnsl-select:disabled { background-color: #f9fafb; color: #9ca3af; cursor: not-allowed; }

/* ── Buttons (modal footer, clear filter) ─────────────────── */
.vnsl-root .twvnsl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background .15s, transform .1s;
  white-space: nowrap;
  text-decoration: none;
}
.vnsl-root .twvnsl-btn:active { transform: scale(.97); }
.vnsl-root .twvnsl-btn-primary   { background: var(--vnsl-btn-color, #64b2fa); color: #fff; }
.vnsl-root .twvnsl-btn-primary:hover { filter: brightness(0.88); }
.vnsl-root .twvnsl-btn-secondary { background: #f3f4f6; color: #374151; }
.vnsl-root .twvnsl-btn-secondary:hover { background: #e5e7eb; }
.vnsl-root .twvnsl-btn-ghost     { background: transparent; color: #6b7280; }
.vnsl-root .twvnsl-btn-ghost:hover { background: rgba(0,0,0,.05); }
.vnsl-root .twvnsl-btn-sm        { padding: 6px 12px; font-size: 12px; border-radius: 8px; }

/* ── Modal overlay + panel ────────────────────────────────── */
.vnsl-root .twvnsl-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(2px);
}
.vnsl-root .twvnsl-modal-panel {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,.18);
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: vnsl-slide-up .25s ease;
}
@keyframes vnsl-slide-up {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.vnsl-root .twvnsl-modal-header {
  padding: 20px 24px 16px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
  border-radius: 20px 20px 0 0;
}
.vnsl-root .twvnsl-modal-body   { padding: 24px; }
.vnsl-root .twvnsl-modal-footer {
  padding: 16px 24px 20px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.vnsl-root .twvnsl-close-btn {
  width: 32px !important; height: 32px !important;
  border-radius: 50%;
  border: none;
  background: #f3f4f6;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #6b7280;
  transition: background .15s;
  flex-shrink: 0;
  padding: 0;
}
.vnsl-root .twvnsl-close-btn:hover { background: #e5e7eb; }

/* ── Skeleton ─────────────────────────────────────────────── */
.vnsl-root .twvnsl-skeleton {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: vnsl-shimmer 1.4s infinite;
  border-radius: 8px;
}
@keyframes vnsl-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Pagination ───────────────────────────────────────────── */
.vnsl-root .twvnsl-pagination {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 0 0;
  justify-content: center;
}
.vnsl-root .twvnsl-page-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1.5px solid #e5e7eb;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  color: #374151;
}
.vnsl-root .twvnsl-page-btn:hover          { border-color: var(--vnsl-accent, #64b2fa); color: var(--vnsl-accent, #64b2fa); }
.vnsl-root .twvnsl-page-btn.active         { background: var(--vnsl-accent, #64b2fa); border-color: var(--vnsl-accent, #64b2fa); color: #fff; }
.vnsl-root .twvnsl-page-btn:disabled       { opacity: .4; cursor: not-allowed; }

/* ── Utility: spacing used in frontend ────────────────────── */
.vnsl-root .twvnsl-mt-4  { margin-top: 16px; }
.vnsl-root .twvnsl-mb-4  { margin-bottom: 16px; }
.vnsl-root .twvnsl-p-4   { padding: 16px; }
.vnsl-root .twvnsl-flex  { display: flex; }
.vnsl-root .twvnsl-flex-col      { flex-direction: column; }
.vnsl-root .twvnsl-items-center  { align-items: center; }
.vnsl-root .twvnsl-justify-center { justify-content: center; }
.vnsl-root .twvnsl-gap-2 { gap: 8px; }
.vnsl-root .twvnsl-border-b      { border-bottom: 1px solid #e5e7eb; }
.vnsl-root .twvnsl-border-gray-100 { border-color: #f3f4f6; }
.vnsl-root .twvnsl-bg-gray-100   { background-color: #f3f4f6; }
.vnsl-root .twvnsl-text-sm       { font-size: 12px; line-height: 1.5; }
.vnsl-root .twvnsl-text-xl       { font-size: 18px; line-height: 1.4; }
.vnsl-root .twvnsl-font-bold     { font-weight: 700; }
.vnsl-root .twvnsl-italic        { font-style: italic; }
.vnsl-root .twvnsl-text-gray-400 { color: #9ca3af; }
.vnsl-root .twvnsl-text-gray-500 { color: #6b7280; }

/* ══════════════════════════════════════════════════════════
   STORE LOCATOR LAYOUT
   ══════════════════════════════════════════════════════════ */

.vnsl-locator {
  display: flex;
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  min-height: 560px;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.vnsl-sidebar {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #f3f4f6;
  background: #fff;
}
.vnsl-sidebar-head {
  padding: 20px 16px 14px;
  border-bottom: 1px solid #f3f4f6;
}
.vnsl-sidebar-title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 12px;
}
.vnsl-filter-group { display: flex; flex-direction: column; gap: 8px; }

/* ── Address list ─────────────────────────────────────────── */
.vnsl-addr-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.vnsl-addr-item {
  padding: 10px 16px;
  display: flex;
  gap: 10px;
  cursor: pointer;
  border-bottom: 1px solid #f9fafb;
  transition: background .15s;
}
.vnsl-addr-item:hover  { background: #f0f8ff; }
.vnsl-addr-item.active { background: #e8f4ff; }
.vnsl-addr-icon  { color: #64b2fa; flex-shrink: 0; margin-top: 2px; display: flex; }
.vnsl-addr-info  { font-size: 13px; line-height: 1.5; color: #374151; min-width: 0; }
.vnsl-addr-name  { font-weight: 600; color: #1a1a2e; margin-bottom: 2px; }
.vnsl-addr-note  { font-style: italic; font-size: 11px; color: #9ca3af; }

/* ── Main content ─────────────────────────────────────────── */
.vnsl-main { flex: 1; padding: 20px; overflow-y: auto; background: #f9fafb; }
.vnsl-main-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* ── Near me button ───────────────────────────────────────── */
.vnsl-near-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--vnsl-accent, #64b2fa);
  background: #fff;
  color: var(--vnsl-accent, #64b2fa);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.vnsl-near-btn:hover { background: var(--vnsl-accent, #64b2fa); color: #fff; }

/* ── Store grid ───────────────────────────────────────────── */
.vnsl-grid   { display: grid; gap: 16px; }
.vnsl-grid-1 { grid-template-columns: repeat(1, 1fr); }
.vnsl-grid-2 { grid-template-columns: repeat(2, 1fr); }
.vnsl-grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ── Store card ───────────────────────────────────────────── */
.vnsl-store-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  cursor: pointer;
  transition: box-shadow .2s, transform .2s;
}
.vnsl-store-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.12); transform: translateY(-3px); }

.vnsl-card-img-wrap { position: relative; overflow: hidden; height: 180px; background: #f3f4f6; }
.vnsl-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.vnsl-card-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #d1d5db; }
.vnsl-card-phone-badge {
  position: absolute;
  top: 10px; left: 10px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}

.vnsl-card-body    { padding: 14px 16px 16px; }
.vnsl-card-name    { font-size: 15px; font-weight: 700; color: #1a1a2e; margin-bottom: 6px; line-height: 1.3; }
.vnsl-card-addr    { font-size: 12px; color: #6b7280; line-height: 1.5; margin-bottom: 4px; }
.vnsl-card-note    { font-size: 11px; color: #9ca3af; font-style: italic; margin-bottom: 10px; }
.vnsl-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.vnsl-card-btn {

  padding: 8px 10px;
  border-radius: 10px;
  border: none;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  text-decoration: none;
}
.vnsl-card-btn-map  { background: var(--vnsl-btn-color, #64b2fa); color: #fff; }
.vnsl-card-btn-map:hover { filter: brightness(0.88); }
.vnsl-card-btn-call { background: #f3f4f6; color: #374151; }
.vnsl-card-btn-call:hover { background: #e5e7eb; }

/* ── Store detail modal ───────────────────────────────────── */
.vnsl-detail-modal { max-width: 720px; }
.vnsl-map-frame { width: 100%; height: 340px; border-radius: 14px; overflow: hidden; background: #f3f4f6; }
.vnsl-map-frame iframe { width: 100%; height: 100%; border: none; }
.vnsl-store-meta { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.vnsl-meta-row   { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #374151; }
.vnsl-meta-icon  { color: #64b2fa; flex-shrink: 0; margin-top: 1px; display: flex; }

/* ── Empty state ──────────────────────────────────────────── */
.vnsl-empty      { text-align: center; padding: 40px 20px; color: #9ca3af; }
.vnsl-empty-icon { margin-bottom: 12px; display: flex; justify-content: center; color: #d1d5db; }

/* ── List view ────────────────────────────────────────────── */
.vnsl-list-view { display: flex; flex-direction: column; gap: 10px; }
.vnsl-store-card-list {
  display: flex;
  flex-direction: row;
  border-radius: 14px;
  min-height: 100px;
}
.vnsl-store-card-list .vnsl-card-img-wrap {
  width: 130px;
  min-width: 130px;
  height: auto;
  border-radius: 14px 0 0 14px;
  flex-shrink: 0;
}
.vnsl-store-card-list .vnsl-card-body {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.vnsl-store-card-list .vnsl-card-name { font-size: 14px; margin-bottom: 3px; }
.vnsl-store-card-list .vnsl-card-note { margin-bottom: 0; }
.vnsl-store-card-list .vnsl-card-actions { margin-top: 8px; }

/* ── Sidebar search ───────────────────────────────────────── */
.vnsl-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.vnsl-search-input {
  width: 100%;
  padding: 10px 76px 10px 14px;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14px;
  color: #1a1a2e;
  background: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  -webkit-appearance: none;
  appearance: none;
}
.vnsl-search-input:focus {
  border-color: var(--vnsl-accent, #64b2fa);
  box-shadow: 0 0 0 3px rgba(100,178,250,.15);
}
.vnsl-search-input::placeholder { color: #9ca3af; }
.vnsl-search-btn {
  position: absolute;
  right: 6px;
  width: 30px; height: 30px;
  border: none;
  background: var(--vnsl-btn-color, #64b2fa);
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: filter .15s;
  flex-shrink: 0;
}
.vnsl-search-btn:hover { filter: brightness(0.88); }
.vnsl-search-clear {
  position: absolute;
  right: 50px;
  width: 22px; height: 22px;
  background: #f3f4f6;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #6b7280;
  transition: background .15s, color .15s;
  flex-shrink: 0;
  padding: 0;
  min-height: unset;
}
.vnsl-search-clear:hover { background: #e5e7eb; color: #1a1a2e; }

/* ── Detail Modal (teleported to body) ───────────────────── */
.vnsl-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.52);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(3px);
}
.vnsl-detail-panel {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,.22);
  width: 100%;
  max-width: 680px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: vnsl-slide-up .22s ease;
  font-family: inherit;
  font-size: 14px;
  color: #1a1a2e;
  line-height: 1.5;
}
/* ── Header ──────────────────────────────────────────────── */
.vnsl-detail-hd {
  padding: 18px 20px 14px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}
.vnsl-detail-hd-content { flex: 1; min-width: 0; }
.vnsl-detail-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 8px;
  line-height: 1.3;
}
.vnsl-detail-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.vnsl-dtag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.vnsl-dtag-blue   { background: #dbeafe; color: #1d4ed8; }
.vnsl-dtag-gray   { background: #f3f4f6; color: #374151; }
.vnsl-dtag-green  { background: #dcfce7; color: #166534; }
.vnsl-dtag-orange { background: #fef3c7; color: #92400e; }
.vnsl-detail-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: none;
  background: #f3f4f6;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #6b7280;
  flex-shrink: 0;
  padding: 0;
  transition: background .15s;
}
.vnsl-detail-close:hover { background: #e5e7eb; }
/* ── Body ────────────────────────────────────────────────── */
.vnsl-detail-body { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
/* ── Meta rows ───────────────────────────────────────────── */
.vnsl-detail-meta { display: flex; flex-direction: column; gap: 8px; }
.vnsl-meta-phone  { color: var(--vnsl-accent, #64b2fa); font-weight: 600; text-decoration: none; }
.vnsl-meta-note   { font-style: italic; color: #6b7280; }
/* ── Description ─────────────────────────────────────────── */
.vnsl-detail-desc {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.75;
  white-space: pre-wrap;
}
/* ── Gallery: main left + thumbs right ───────────────────── */
.vnsl-detail-gallery {
  display: flex;
  gap: 10px;
  align-items: stretch;
  /* min-height: 220px; */
}
.vnsl-gallery-main {
  flex: 1;
  border-radius: 14px;
  overflow: hidden;
  background: #f3f4f6;
  min-height: 220px;
}
.vnsl-gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.vnsl-gallery-thumbs {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 84px;
  flex-shrink: 0;
  max-height: 340px;
  overflow-y: auto;
}
.vnsl-gthumb {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  border: 2.5px solid transparent;
  opacity: .65;
  transition: border-color .15s, opacity .15s;
}
.vnsl-gthumb:hover  { opacity: .85; }
.vnsl-gthumb.active { border-color: var(--vnsl-accent, #64b2fa); opacity: 1; }
.vnsl-gthumb img    { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ── Map ─────────────────────────────────────────────────── */
.vnsl-detail-map {
  width: 100%;
  height: 280px;
  border-radius: 14px;
  overflow: hidden;
  background: #f3f4f6;
  flex-shrink: 0;
}
.vnsl-detail-map iframe { width: 100%; height: 100%; border: none; display: block; }
/* ── Placeholder ─────────────────────────────────────────── */
.vnsl-detail-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  color: #d1d5db;
  background: #f9fafb;
  border-radius: 14px;
}
/* ── Footer ──────────────────────────────────────────────── */
.vnsl-detail-ft {
  padding: 12px 20px 16px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-shrink: 0;
}
.vnsl-detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background .15s, filter .15s;
  text-decoration: none;
  white-space: nowrap;
}
.vnsl-detail-btn-primary       { background: var(--vnsl-btn-color, #64b2fa); color: #fff; }
.vnsl-detail-btn-primary:hover { filter: brightness(.88); }
.vnsl-detail-btn-sec           { background: #f3f4f6; color: #374151; }
.vnsl-detail-btn-sec:hover     { background: #e5e7eb; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .vnsl-locator { flex-direction: column; }
  .vnsl-sidebar { width: 100%; border-right: none; border-bottom: 1px solid #f3f4f6; }
  .vnsl-addr-list { max-height: 200px; }
  .vnsl-grid-2, .vnsl-grid-3 { grid-template-columns: 1fr; }
  .vnsl-root .twvnsl-modal-panel { border-radius: 14px; }

  .vnsl-detail-panel { border-radius: 14px; max-height: 95vh; }
  .vnsl-gallery-thumbs {
    flex-direction: row;
    width: 100%;
    max-height: 76px;
    overflow-x: auto;
    overflow-y: hidden;
  }
  .vnsl-gthumb { width: 68px; height: 68px; }
  .vnsl-gallery-main { min-height: 200px; }
  .vnsl-detail-map { height: 220px; }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .vnsl-sidebar { width: 260px; }
  .vnsl-grid-3  { grid-template-columns: repeat(2, 1fr); }
}