/* Page-specific styles for e-commerce.html — everything else is Tailwind utilities. */

/* Diagonal "product photo" placeholder used wherever the storefront mockups need an image */
.ph-diagonal {
  background-image: repeating-linear-gradient(45deg, var(--color-brand-50) 0px, var(--color-brand-50) 12px, var(--color-brand-100) 12px, var(--color-brand-100) 24px);
}
.ph-diagonal-sm {
  background-image: repeating-linear-gradient(45deg, #f2f4f7 0px, #f2f4f7 8px, #eceff3 8px, #eceff3 16px);
}

/* Hero storefront + chat widget entrance sequence (fires once on load, no JS) */
@keyframes ec-pop {
  0%   { opacity: 0; transform: scale(.85); }
  70%  { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes ec-slide-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ec-typing-dot {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-3px); }
}
.ec-reveal { animation: ec-slide-in .45s ease both; }
.ec-reveal-pop { animation: ec-pop .5s ease both; }
.ec-reveal-delay-1 { animation-delay: .7s; }
.ec-reveal-delay-2 { animation-delay: 1.5s; }
.ec-reveal-delay-3 { animation-delay: 3s; }
.ec-reveal-delay-4 { animation-delay: 3.8s; }
.ec-typing-dot { animation: ec-typing-dot 1.2s infinite; }
.ec-typing-dot:nth-child(2) { animation-delay: .15s; }
.ec-typing-dot:nth-child(3) { animation-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .ph-diagonal, .ph-diagonal-sm { background-image: none; }
  .ec-reveal, .ec-reveal-pop, .ec-typing-dot { animation: none !important; }
}

/* ============================================================
   Premium visual polish layer — additive only, no layout changes.
   Note: never set `position` on an element that already carries a
   Tailwind position utility (absolute/relative) — a class selector
   here has higher specificity than a single Tailwind utility class
   and will silently override it, breaking layout.
   ============================================================ */

.ec-mesh-dots{
  background-image:radial-gradient(circle at 1px 1px, rgba(94,119,161,.14) 1px, transparent 0);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 65% 60% at 50% 30%, #000 35%, transparent 100%);
  mask-image:radial-gradient(ellipse 65% 60% at 50% 30%, #000 35%, transparent 100%);
}

.ec-grid-lines{
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 75% 75% at 50% 35%, #000 25%, transparent 100%);
  mask-image:radial-gradient(ellipse 75% 75% at 50% 35%, #000 25%, transparent 100%);
}

.ec-card-hover{position:relative;transition:transform .25s ease, box-shadow .25s ease;}
.ec-card-hover:hover{transform:translateY(-4px);box-shadow:0 26px 50px -30px rgba(38,48,65,.35);}
.ec-card-hover::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;
  background:linear-gradient(135deg, var(--color-brand-100), rgba(169,186,212,0) 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s ease;pointer-events:none;
}
.ec-card-hover:hover::before{opacity:1;}

.ec-flow-connector{overflow:hidden;}
.ec-flow-connector::after{
  content:"";position:absolute;inset:0;width:40%;
  background:linear-gradient(90deg, transparent, rgba(94,119,161,.9), transparent);
  animation:ec-flow-sweep 3.4s linear infinite;
}
@keyframes ec-flow-sweep{0%{transform:translateX(-140%);}100%{transform:translateX(350%);}}

.ec-glow-badge{position:relative;}
.ec-glow-badge::after{
  content:"";position:absolute;inset:-16px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle, rgba(94,119,161,.3), transparent 70%);
  filter:blur(18px);animation:ec-glow-pulse 4.5s ease-in-out infinite;
}
@keyframes ec-glow-pulse{0%,100%{opacity:.55;}50%{opacity:1;}}

@media (prefers-reduced-motion: reduce) {
  .ec-flow-connector::after, .ec-glow-badge::after { animation: none !important; }
}

/* ============================================================
   #features — vertical tabs at >=1024px, accordion below it.
   One markup tree serves both: every .ec-feat-item is a header
   plus a body. Below 1024px the item is a self-contained card and
   the body collapses; at 1024px and up .ec-feat becomes a grid,
   the items go `display:contents`, headers stack in column 1 and
   the open body fills column 2 as the panel card.
   ============================================================ */

.ec-feat-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid transparent;
  border-radius: 14px;
  background: transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.ec-feat-chev { flex: none; color: #94a3b8; transition: transform .3s ease, color .2s ease; }
.ec-feat-item.is-open > .ec-feat-head-wrap .ec-feat-chev { transform: rotate(180deg); color: var(--color-brand); }

.ec-feat-body { overflow: hidden; }
.ec-feat-inner { padding: 2px 18px 20px; }


@media (max-width: 1240px) {
    .ec-feat {grid-template-columns: 191px minmax(0, 1fr) !important; }
}

/* ---------- accordion: below 1024px ---------- */
@media (max-width: 1023.98px) {
  .ec-feat { display: flex; flex-direction: column; gap: 12px; }

  .ec-feat-item {
    border: 1px solid var(--color-line);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 14px 30px -26px rgba(23, 29, 38, 0.4);
  }

  .ec-feat-body { max-height: 0; opacity: 0; }
  .ec-feat-item.is-open > .ec-feat-body { opacity: 1; }

  /* transitions only after the first measure, so nothing animates on load */
  .ec-feat-ready .ec-feat-body {
    transition: max-height .38s cubic-bezier(.4, 0, .2, 1), opacity .28s ease;
  }
}

/* ---------- tabs: 1024px and up ---------- */
@media (min-width: 1024px) {
  .ec-feat {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    column-gap: 36px;
    row-gap: 4px;
    /* One row per header (there are five) plus a trailing flexible row.
       The panel spans every row, and because it crosses a flexible (1fr)
       track the spec keeps it from stretching the five header rows — so the
       leftover panel height lands in the last row and the headers stay
       at their natural pitch. */
    grid-template-rows: repeat(5, min-content) 1fr;
    align-content: start;
  }

  .ec-feat-item { display: contents; }

  .ec-feat-head-wrap { grid-column: 1; align-self: start; }

  .ec-feat-head { font-weight: 700; color: #62748e; }
  .ec-feat-head:hover { color: #0f172a; }
  .ec-feat-item.is-open > .ec-feat-head-wrap .ec-feat-head {
    background: #fff;
    border-color: var(--color-line);
    color: #0f172a;
    font-weight: 800;
    box-shadow: 0 10px 24px -14px rgba(23, 29, 38, 0.2);
  }

  .ec-feat-chev { display: none; }

  .ec-feat-body {
    grid-column: 2;
    grid-row: 1 / -1;
    max-height: none;
    opacity: 1;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: 24px;
    box-shadow: 0 26px 56px -34px rgba(23, 29, 38, 0.2);
  }
  .ec-feat-item:not(.is-open) > .ec-feat-body { display: none; }

  .ec-feat-inner { padding: 36px; }
}
@media (max-width: 475px) {
    .ctaButtons a {width: 100%; text-align: center;}

}

/* ============================================================
   In-chat product slider (.ics)
   The product / room / property cards recommended inside a chat
   mock-up.
   >=640px: untouched — the track stays the same static grid.
   <640px : the row becomes a horizontally snapping, swipeable
            slider with prev/next arrows. Cards sit at 86% width so
            the next one peeks in and signals there is more to swipe.
   ============================================================ */
.ics-nav { display: none; gap: 8px; justify-content: flex-end; margin-top: 10px; }

@media (max-width: 639.98px) {
  .ics-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* legacy Edge */
  }
  .ics-viewport::-webkit-scrollbar { display: none; }

  .ics-track { display: flex; }
  .ics-track > * {
    flex: 0 0 var(--ics-card, 86%);
    scroll-snap-align: start;
    min-width: 0;                 /* let card contents shrink, never blow out */
  }

  .ics-nav { display: flex; }
}