/* ============================================================
   Naveedz Online Store — Custom Styles (overrides Tailwind CDN)
   ============================================================ */

:root {
  --nz-primary: #064E3B;
  --nz-primary-deep: #003527;
  --nz-gold: #D4AF37;
  --nz-gold-light: #E6CA65;
  --nz-navy: #0A192F;
  --nz-crimson: #991B1B;
  --nz-ink: #141B2B;
  --nz-muted: #6B7280;
  --nz-border: #E5E7EB;
  --nz-alabaster: #F8F7F4;
}

/* ---------- Base ---------- */
html {
  scroll-behavior: smooth;
}

body {
  overscroll-behavior: none;
}

* {
  scrollbar-width: none;
}

::-webkit-scrollbar {
  display: none;
}

body.no-scroll {
  overflow: hidden;
}

/* ---------- Announcement Bar ---------- */
.announcement-bar p,
.announcement-bar a {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Nav Links (animated gold underline) ---------- */
.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 3.25rem;
  padding: 0 0.25rem;
  color: var(--nz-ink);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 0.25s ease;
  white-space: nowrap;
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--nz-gold);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s ease;
}

.nav-link:hover {
  color: var(--nz-primary);
}

.nav-link:hover::after {
  transform: scaleX(1);
}

.nav-link.nav-sale {
  color: var(--nz-crimson);
}

.nav-link.nav-sale:hover {
  color: var(--nz-crimson);
}

/* ---------- Mobile Drawer Links ---------- */
.drawer-link {
  display: flex;
  align-items: center;
  min-height: 3rem;
  color: var(--nz-ink);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--nz-border);
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.drawer-link:hover {
  color: var(--nz-primary);
  padding-left: 0.375rem;
}

.drawer-link.drawer-sale {
  color: var(--nz-crimson);
}

/* ---------- Mobile Drawer & Overlay ---------- */
#mobileDrawer {
  transform: translateX(-105%);
  visibility: hidden;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.35s ease;
}

#mobileDrawer.open {
  transform: translateX(0);
  visibility: visible;
}

#drawerOverlay {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#drawerOverlay.open {
  opacity: 1;
  visibility: visible;
}

/* ---------- Mobile Search Collapse ---------- */
#mobileSearchWrap {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

#mobileSearchWrap.open {
  max-height: 90px;
}

/* ---------- Wishlist Heart (filled state) ---------- */
.wishlist-toggle {
  transition: color 0.2s ease;
}

.wishlist-toggle .material-symbols-outlined {
  font-variation-settings: "FILL" 0;
  transition: font-variation-settings 0.2s ease;
}

.wishlist-toggle.wishlist-active {
  color: var(--nz-crimson);
}

.wishlist-toggle.wishlist-active .material-symbols-outlined {
  font-variation-settings: "FILL" 1;
}

/* ---------- Product Card (gold halo hover per DESIGN.md) ---------- */
.product-card {
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.product-card:hover {
  box-shadow: 0 10px 25px -5px rgba(6, 78, 59, 0.12), 0 0 0 1px rgba(212, 175, 55, 0.45);
}

/* ---------- Category Circle Hover ---------- */
.cat-circle {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.group:hover .cat-circle {
  transform: scale(1.05);
}

/* ---------- Trust Divider (vertical lines on desktop) ---------- */
@media (min-width: 1024px) {
  .trust-pillar {
    border-right: 1px solid var(--nz-border);
  }
  .trust-pillar:last-child {
    border-right: none;
  }
}

/* ---------- Hero Ambient Row ---------- */
.hero-glow {
  pointer-events: none;
}

/* ---------- Wishlist / Cart Filter Tabs ---------- */
.filter-tab {
  font-family: "Plus Jakarta Sans", sans-serif;
  transition: color 0.2s ease, background-color 0.2s ease;
}

/* ---------- Checkout Form Fields ---------- */
.field-input {
  padding: 0.625rem 0.75rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  color: var(--nz-ink);
  background-color: #ffffff;
  border: 1px solid var(--nz-border);
  border-radius: 0.5rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field-input:hover {
  border-color: #d1d5db;
}

.field-input:focus {
  outline: none;
  border-color: var(--nz-gold);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);
}

.field-invalid,
.field-invalid:focus {
  border-color: var(--nz-crimson);
  box-shadow: 0 0 0 3px rgba(153, 27, 27, 0.12);
}

/* ---------- Payment Method Cards ---------- */
.pay-method {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem;
  background-color: #ffffff;
  border: 1px solid var(--nz-border);
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.pay-method:hover {
  border-color: #d1d5db;
  background-color: #f8fafc;
}

.pay-method.active {
  border-color: var(--nz-gold);
  background-color: rgba(212, 175, 55, 0.06);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.pay-method.active .material-symbols-outlined {
  color: var(--nz-gold);
}

/* ---------- Order Tracking Stepper ---------- */
.tracking-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tracking-steps .step {
  position: relative;
  display: flex;
  gap: 1rem;
  padding-bottom: 1.5rem;
  min-height: 3.5rem;
}

.tracking-steps .step:last-child {
  padding-bottom: 0;
}

.tracking-steps .step::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 30px;
  bottom: 0;
  width: 2px;
  background: var(--nz-border);
}

.tracking-steps .step:last-child::before {
  display: none;
}

.tracking-steps .step.done::before,
.tracking-steps .step.active::before {
  background: var(--nz-gold);
}

.tracking-steps .step-dot {
  position: relative;
  z-index: 1;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background: #ffffff;
  border: 2px solid var(--nz-border);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.tracking-steps .step.done .step-dot {
  background: var(--nz-gold);
  border-color: var(--nz-gold);
}

.tracking-steps .step.done .step-dot::after {
  content: "✓";
  color: var(--nz-primary-deep);
  font-weight: 700;
  font-size: 14px;
}

.tracking-steps .step.active .step-dot {
  background: var(--nz-primary-deep);
  border-color: var(--nz-primary-deep);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.2);
}

.tracking-steps .step.active .step-dot::after {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 9999px;
  background: var(--nz-gold);
}

.tracking-steps .step-body {
  flex: 1;
  min-width: 0;
  padding-top: 0.25rem;
}

.tracking-steps .step-title {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--nz-ink);
}

.tracking-steps .step-time {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 12px;
  color: var(--nz-muted);
  margin-top: 0.125rem;
}

.tracking-steps .step.done .step-title,
.tracking-steps .step.done .step-time {
  color: var(--nz-primary);
}

/* ------------------------------------------------------------
   Animated Add-to-Cart Button (.add-to-cart-btn)
   Base: dark green rounded pill w/ bag icon + bold "Add" text.
   States per click: is-loading (tuck -> truck drives) -> is-success
   (gold check pops, "Added") -> auto-reset to idle.
   ============================================================ */
.add-to-cart-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease;
}

.add-to-cart-btn.is-busy {
  pointer-events: none;
  cursor: default;
}

.add-to-cart-btn:active:not(.is-busy) {
  transform: scale(0.97);
}

.add-to-cart-btn.is-loading {
  transform: scale(0.96);
}

/* --- state layers (stacked, absolutely positioned over the label) --- */
.add-to-cart-btn .act-label,
.add-to-cart-btn .act-progress,
.add-to-cart-btn .act-success {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.add-to-cart-btn .act-progress,
.add-to-cart-btn .act-success {
  position: absolute;
  inset: 0;
}

/* --- step 1: label tucks away --- */
.add-to-cart-btn .act-label {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.22s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.add-to-cart-btn.is-loading .act-label,
.add-to-cart-btn.is-success .act-label {
  opacity: 0;
  transform: translateY(-12px) scaleY(0.6);
}

/* --- step 2: truck drives across a dashed road --- */
.add-to-cart-btn .act-progress {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.25s ease;
}

.add-to-cart-btn.is-loading .act-progress {
  opacity: 1;
  transform: translateY(0);
}

.add-to-cart-btn .act-progress::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.4);
}

.add-to-cart-btn .act-truck {
  position: absolute;
  left: 0;
  top: 3px;
  font-size: 18px;
  color: var(--nz-gold-light);
  transform: translateX(var(--drive-from, -40px));
}

.add-to-cart-btn.is-loading .act-truck {
  animation: nz-truck-drive 850ms cubic-bezier(0.45, 0, 0.55, 1) forwards;
}

@keyframes nz-truck-drive {
  0%   { transform: translateX(var(--drive-from, -40px)); }
  100% { transform: translateX(var(--drive-to, 220px)); }
}

/* --- step 3: success check pops in with "Added" --- */
.add-to-cart-btn .act-success {
  opacity: 0;
  transform: scale(0.65);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.add-to-cart-btn.is-success .act-success {
  opacity: 1;
  transform: scale(1);
}

.add-to-cart-btn .act-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 9999px;
  background: var(--nz-gold);
  color: var(--nz-primary-deep);
  flex-shrink: 0;
}

.add-to-cart-btn .act-done-text {
  font-weight: 700;
}

/* --- header cart badge pulse after a bag lands --- */
#cartBadge.nz-pulse {
  animation: nz-badge-pulse 0.5s ease;
}

@keyframes nz-badge-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* --- floating bag that flies to the cart badge --- */
.act-fly-bag {
  position: fixed;
  z-index: 80;
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: var(--nz-gold);
  pointer-events: none;
  will-change: transform, opacity;
  font-variation-settings: "FILL" 1;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.3, 1), opacity 0.45s ease 0.1s;
}

/* ---------- Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Product Details ---------- */
/* product cards are clickable -> open product.html */
.product-card {
  cursor: pointer;
}
.product-card button,
.product-card a {
  cursor: pointer;
}

/* size chart modal entrance */
#sizeModal {
  animation: pdp-modal-in 0.18s ease-out;
}
@keyframes pdp-modal-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* detail page thumbnails */
.pdp-thumb img {
  pointer-events: none;
}

/* fabric/faithfulness underlines for stepper etc. */
#pdpSubtotal {
  margin-left: auto;
}
@media (max-width: 639px) {
  #pdpSubtotal {
    margin-left: 0;
  }
}

/* ---------- Quick View Modal ---------- */
#quickViewModal {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
#quickViewModal.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#quickViewModal .qv-dialog {
  transform: scale(0.95) translateY(10px);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#quickViewModal.open .qv-dialog {
  transform: scale(1) translateY(0);
}
#quickViewImg {
  transition: opacity 0.15s ease;
}
.quickview-open {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ============================================================
   Floating chat widget (WhatsApp + Facebook)
   ============================================================ */
#chatWidget {
  z-index: 40;
}
.chat-expand {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.chat-expand.hidden {
  display: none;
}
.chat-fab {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s ease;
}
.chat-fab:hover,
.chat-fab:focus-visible {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.26);
}
.chat-fab img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 16px;
}
.chat-fab.pulse::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  border: 3px solid #25d366;
  opacity: 0;
  animation: chatRing 2.6s ease-out infinite;
  pointer-events: none;
}
.chat-fab { position: relative; }
@keyframes chatRing {
  0% { transform: scale(0.9); opacity: 0.8; }
  70%, 100% { transform: scale(1.22); opacity: 0; }
}
.chat-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 10px;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
  color: var(--nz-ink);
  text-decoration: none;
  min-width: 248px;
  transform-origin: bottom right;
  animation: chatPop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.chat-btn:nth-child(2) { animation-delay: 0.07s; }
.chat-btn:hover { transform: translateX(-4px); }
@keyframes chatPop {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.chat-btn img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 12px;
  flex-shrink: 0;
}
.chat-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.chat-name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
}
.chat-sub {
  font-size: 11px;
  color: var(--nz-muted);
  margin-top: 2px;
}