/* ─── Atoll Mart – Custom Styles ─────────────────────────────────────────── */

/* ── Utility ── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Mobile bottom nav ── */
.mobile-bottom-nav {
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -1px 12px rgba(0,0,0,0.08);
}
.mobile-nav-item { min-height: 56px; position: relative; }
.mobile-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 2px;
  background: #0077B6;
  border-radius: 0 0 4px 4px;
}

/* On desktop, hide mobile nav */
@media (min-width: 640px) {
  .mobile-bottom-nav { display: none !important; }
  main { padding-bottom: 1.5rem !important; }
}

/* ════════════════════════════════════════════════════════
   HERO SLIDER  — fixed height; all slides always absolute
   (Eliminates the position-relative ↔ absolute swap that
   caused content below the hero to jump during transitions)
════════════════════════════════════════════════════════ */
.hero-slider-wrap {
  height: 460px;          /* explicit fixed height — never reflows */
  position: relative;
  overflow: hidden;
}

.hero-slide {
  position: absolute;     /* ALL slides stay absolute — no switching */
  inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
.hero-slide.active {
  opacity: 1;
  pointer-events: auto;
  /* intentionally NO position:relative here — that was the layout-jump bug */
}

.hero-slide-inner {
  width: 100%;
  height: 100%;
  max-width: 80rem;        /* matches max-w-7xl */
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 2rem;
}

.hero-text { flex: 1; min-width: 0; }

.hero-image {
  flex-shrink: 0;
  width: 42%;
  max-width: 420px;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;       /* allow rotated cards to bleed slightly */
}
.hero-img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,0.15));
}
.hero-placeholder {
  width: 100%;
  height: 100%;
  position: relative;
}

@media (min-width: 640px) and (max-width: 1023px) {
  .hero-slider-wrap { height: 380px; }
}
@media (max-width: 639px) {
  .hero-slider-wrap  { height: 270px; }
  .hero-slide-inner  { padding: 0 1rem; gap: 0; }
  .hero-image        { display: none; }
  .hero-text h1      { font-size: 1.65rem !important; line-height: 1.2; }
}

/* Hero nav arrows */
.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  opacity: 0;                  /* hidden by default, shown on hover */
  transition: opacity 0.25s ease, background 0.2s ease, transform 0.25s ease;
}
.hero-slider-wrap:hover .hero-arrow { opacity: 0.8; }
.hero-arrow:hover { opacity: 1 !important; transform: translateY(-50%) scale(1.08); }

/* Hero dots */
.hero-dots {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
  z-index: 20;
}
.hero-dot {
  width: 7px;
  height: 7px;
  border-radius: 9999px;
  background: rgba(0,0,0,0.18);
  border: none;
  cursor: pointer;
  transition: width 0.35s ease, background 0.35s ease;
  padding: 0;
}
.hero-dot.active {
  background: #0077B6;
  width: 28px;
}

/* ════════════════════════════════════════════════════════
   CATEGORY CHIPS
════════════════════════════════════════════════════════ */
.category-chip {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  will-change: transform;
}
.category-chip:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.12);
}

/* ════════════════════════════════════════════════════════
   PROMO BANNER CARDS
════════════════════════════════════════════════════════ */
.promo-card {
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  will-change: transform;
  min-height: 180px;
  position: relative;
  border-radius: 1.25rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-decoration: none;
}
.promo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.14);
}
.promo-card:hover .promo-bg-img {
  transform: scale(1.06);
}
.promo-bg-img {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Decorative icon ring in top-right of promo card */
.promo-deco-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 64px;
  height: 64px;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: transform 0.25s ease;
}
.promo-card:hover .promo-deco-icon {
  transform: scale(1.12) rotate(6deg);
}

/* ── Listing card ── */
.listing-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  will-change: transform;
}
.listing-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 119, 182, 0.12);
}
.listing-card img {
  transition: transform 0.35s ease;
}

/* ── Image gallery ── */
#galleryMain {
  transition: opacity 0.2s ease;
}
.gallery-thumb {
  transition: border-color 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.gallery-thumb:hover { transform: scale(1.05); }
.gallery-arrow {
  transition: background-color 0.15s ease, opacity 0.15s ease;
  opacity: 0.7;
}
.gallery-arrow:hover { opacity: 1; }

/* ── Form focus rings ── */
input:focus, select:focus, textarea:focus {
  outline: none;
}

/* ── Drop zone ── */
#dropzone {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
#dropzone.drag-over {
  border-color: #0077B6;
  background-color: #eff8ff;
}

/* ── Flash messages ── */
.flash-msg {
  animation: slideDown 0.3s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Condition tabs ── */
.condition-tab {
  cursor: pointer;
  user-select: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* ── Skeleton loading ── */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: 12px;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Buttons transitions ── */
button, a {
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ── Prose / description ── */
.listing-description {
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.7;
}

/* ── Avatar placeholder ── */
.avatar-placeholder {
  background: linear-gradient(135deg, #E9D8A6, #0077B6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 1.25rem;
}

/* ── Table ── */
thead th:first-child { border-radius: 0; }
thead th:last-child  { border-radius: 0; }

/* ── Hero search ── */
header input:focus {
  background: white;
  color: #1f2937;
}

/* ── Responsive ── */
@media (max-width: 640px) {
  .listing-card { border-radius: 16px; }
  h1.text-3xl { font-size: 1.75rem; }
}

/* ── Print ── */
@media print {
  .mobile-bottom-nav, header, footer { display: none !important; }
}