/* ═══════════════════════════════════════════════════════════════
 * SoapKits — Timeline Widget
 * Modern vertical timeline with zigzag / left / right layouts,
 * images, icon badges, step numbers, and scroll-reveal.
 * ═══════════════════════════════════════════════════════════════ */

/* ── CSS Custom Properties (defaults) ─────────────────────────── */
.soapkits-tl {
  --stl-line-color:       #d1d5db;
  --stl-line-style:       dashed;
  --stl-line-width:       2px;
  --stl-dot-color:        #A3E635;
  --stl-dot-size:         14px;
  --stl-dot-border-color: #ffffff;
  --stl-icon-bg:          #ECFCCB;
  --stl-icon-color:       #65A30D;
  --stl-icon-size:        52px;
  --stl-img-radius:       16px;
  --stl-step-color:       #111827;
  --stl-title-color:      #111827;
  --stl-desc-color:       #6b7280;
  --stl-date-color:       #9ca3af;
  --stl-item-gap:         60px;
  --stl-col-gap:          40px;
  position: relative;
  width: 100%;
  box-sizing: border-box;
}

/* ── The Vertical Spine ───────────────────────────────────────── */
.soapkits-tl__line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--stl-line-width);
  border: none;
  border-left: var(--stl-line-width) var(--stl-line-style) var(--stl-line-color);
  z-index: 0;
}

/* ZIGZAG: line in the center */
.soapkits-tl--zigzag .soapkits-tl__line { left: 50%; transform: translateX(-50%); }
/* LEFT layout: content left → line on right side */
.soapkits-tl--left .soapkits-tl__line  { right: 0; left: auto; }
/* RIGHT layout: content right → line on left side */
.soapkits-tl--right .soapkits-tl__line { left: 0; }

/* ── Row — the flex container per item ────────────────────────── */
.soapkits-tl__row {
  position: relative;
  display: flex;
  align-items: flex-start;
  z-index: 1;
}

.soapkits-tl__row + .soapkits-tl__row {
  margin-top: var(--stl-item-gap);
}

/* ── Columns ──────────────────────────────────────────────────── */
.soapkits-tl__col {
  flex: 1 1 0;
  min-width: 0;
  box-sizing: border-box;
}

/* ── Connector (dot holder) — keeps the dot centered on the line ─ */
.soapkits-tl__connector {
  flex: 0 0 auto;
  width: calc(var(--stl-col-gap) * 2);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18px;
  position: relative;
  z-index: 2;
}

/* ── Dot ──────────────────────────────────────────────────────── */
.soapkits-tl__dot {
  width: var(--stl-dot-size);
  height: var(--stl-dot-size);
  border-radius: 50%;
  background-color: var(--stl-dot-color);
  border: 3px solid var(--stl-dot-border-color);
  box-shadow: 0 0 0 3px var(--stl-dot-color), 0 2px 8px rgba(0,0,0,0.08);
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.soapkits-tl__row:hover .soapkits-tl__dot {
  transform: scale(1.3);
}

/* ══════════════════════════════════════════════════════════════
 * ZIGZAG LAYOUT — alternating sides
 * ══════════════════════════════════════════════════════════════ */

/* Media Left (even) → media | dot | text */
.soapkits-tl--zigzag .soapkits-tl__row--media-left {
  flex-direction: row;
}
.soapkits-tl--zigzag .soapkits-tl__row--media-left .soapkits-tl__media {
  text-align: right;
  padding-right: 0;
}
.soapkits-tl--zigzag .soapkits-tl__row--media-left .soapkits-tl__body {
  text-align: left;
  padding-left: 0;
}

/* Media Right (odd) → text | dot | media */
.soapkits-tl--zigzag .soapkits-tl__row--media-right {
  flex-direction: row-reverse;
}
.soapkits-tl--zigzag .soapkits-tl__row--media-right .soapkits-tl__media {
  text-align: left;
  padding-left: 0;
}
.soapkits-tl--zigzag .soapkits-tl__row--media-right .soapkits-tl__body {
  text-align: left;
  padding-right: 0;
}

/* ══════════════════════════════════════════════════════════════
 * LEFT / RIGHT LAYOUT
 * ══════════════════════════════════════════════════════════════ */
.soapkits-tl--left .soapkits-tl__row {
  flex-direction: row-reverse;
}
.soapkits-tl--left .soapkits-tl__media { display: none; }

.soapkits-tl--right .soapkits-tl__row {
  flex-direction: row;
}
.soapkits-tl--right .soapkits-tl__media { display: none; }

/* When in left/right mode, show images inside the body column */
.soapkits-tl--left .soapkits-tl__inline-img,
.soapkits-tl--right .soapkits-tl__inline-img {
  display: block;
}

/* ══════════════════════════════════════════════════════════════
 * HORIZONTAL LAYOUT
 * A touch-friendly, scroll-snap timeline. Cards stay comfortably
 * readable at every viewport width instead of being squeezed into
 * narrow columns.
 * ══════════════════════════════════════════════════════════════ */
.soapkits-tl--horizontal {
  display: flex;
  align-items: stretch;
  gap: clamp(20px, 3vw, 48px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--stl-line-color) transparent;
  padding: 0 4px 24px;
}

.soapkits-tl--horizontal::-webkit-scrollbar { height: 7px; }
.soapkits-tl--horizontal::-webkit-scrollbar-track { background: transparent; }
.soapkits-tl--horizontal::-webkit-scrollbar-thumb {
  background: var(--stl-line-color);
  border-radius: 999px;
}

.soapkits-tl--horizontal .soapkits-tl__line {
  display: none;
}

.soapkits-tl--horizontal .soapkits-tl__row {
  flex: 0 0 min(340px, 82vw);
  min-width: 0;
  flex-direction: column;
  padding-top: 54px;
  scroll-snap-align: start;
}

.soapkits-tl--horizontal .soapkits-tl__row + .soapkits-tl__row {
  margin-top: 0;
}

/* Each item owns its spine segment, so it remains continuous while the
 * scroll container extends beyond the initial viewport. */
.soapkits-tl--horizontal .soapkits-tl__row::before {
  position: absolute;
  top: 24px;
  left: 0;
  z-index: 0;
  width: calc(100% + clamp(20px, 3vw, 48px));
  border-top: var(--stl-line-width) var(--stl-line-style) var(--stl-line-color);
  content: '';
}

.soapkits-tl--horizontal .soapkits-tl__connector {
  position: absolute;
  top: 14px;
  left: 0;
  width: calc(var(--stl-dot-size) + 6px);
  padding: 0;
}

.soapkits-tl--horizontal .soapkits-tl__body {
  order: 1;
  padding: 24px;
  border: 1px solid var(--stl-line-color);
  border-color: color-mix(in srgb, var(--stl-line-color) 55%, transparent);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(17, 24, 39, 0.06);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}

.soapkits-tl--horizontal .soapkits-tl__row:hover .soapkits-tl__body {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(17, 24, 39, 0.11);
}

.soapkits-tl--horizontal .soapkits-tl__media {
  order: 2;
  margin-top: 14px;
}

.soapkits-tl--horizontal .soapkits-tl__media img {
  max-width: 100%;
}

/* ══════════════════════════════════════════════════════════════
 * MEDIA COLUMN — Images
 * ══════════════════════════════════════════════════════════════ */
.soapkits-tl__media img {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: var(--stl-img-radius);
  object-fit: cover;
  display: inline-block;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
}

.soapkits-tl__row:hover .soapkits-tl__media img {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

/* ══════════════════════════════════════════════════════════════
 * BODY COLUMN — Icon, Step, Title, Desc
 * ══════════════════════════════════════════════════════════════ */
.soapkits-tl__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Icon Badge */
.soapkits-tl__icon-badge {
  width: var(--stl-icon-size);
  height: var(--stl-icon-size);
  border-radius: 18px;
  background-color: var(--stl-icon-bg);
  color: var(--stl-icon-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--stl-icon-size) * 0.42);
  margin-bottom: 6px;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.soapkits-tl__icon-badge i,
.soapkits-tl__icon-badge svg {
  width: calc(var(--stl-icon-size) * 0.42);
  height: calc(var(--stl-icon-size) * 0.42);
  fill: currentColor;
  color: currentColor;
}

.soapkits-tl__row:hover .soapkits-tl__icon-badge {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

/* Step Number */
.soapkits-tl__step {
  font-size: 15px;
  font-weight: 700;
  color: var(--stl-step-color);
  letter-spacing: 0.02em;
  display: inline-block;
}

/* Title */
.soapkits-tl__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--stl-title-color);
  margin: 0 0 4px 0;
  line-height: 1.3;
}

/* Description */
.soapkits-tl__desc {
  font-size: 15px;
  font-weight: 400;
  color: var(--stl-desc-color);
  margin: 0;
  line-height: 1.65;
  max-width: 400px;
}

/* Date / Label */
.soapkits-tl__date {
  font-size: 13px;
  font-weight: 500;
  color: var(--stl-date-color);
  margin-top: 4px;
}

/* Inline image (for 'both' in left/right layouts) */
.soapkits-tl__inline-img {
  margin-top: 14px;
}
.soapkits-tl__inline-img img {
  width: 100%;
  max-width: 380px;
  border-radius: var(--stl-img-radius);
  object-fit: cover;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* ══════════════════════════════════════════════════════════════
 * SCROLL-REVEAL ANIMATION
 * ══════════════════════════════════════════════════════════════ */
.soapkits-tl--animate .soapkits-tl__row {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.soapkits-tl--animate .soapkits-tl__row.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.soapkits-tl--animate .soapkits-tl__row:nth-child(2) { transition-delay: 0.06s; }
.soapkits-tl--animate .soapkits-tl__row:nth-child(3) { transition-delay: 0.12s; }
.soapkits-tl--animate .soapkits-tl__row:nth-child(4) { transition-delay: 0.18s; }
.soapkits-tl--animate .soapkits-tl__row:nth-child(5) { transition-delay: 0.24s; }

/* Skip animation in Elementor editor */
.elementor-editor-active .soapkits-tl--animate .soapkits-tl__row {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .soapkits-tl__row,
  .soapkits-tl__dot,
  .soapkits-tl__media img,
  .soapkits-tl__icon-badge,
  .soapkits-tl--horizontal .soapkits-tl__body {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════
 * RESPONSIVE
 * ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Collapse to single column, line on the left */
  .soapkits-tl--zigzag .soapkits-tl__line {
    left: 20px;
    transform: none;
  }

  .soapkits-tl--zigzag .soapkits-tl__row,
  .soapkits-tl--zigzag .soapkits-tl__row--media-left,
  .soapkits-tl--zigzag .soapkits-tl__row--media-right {
    flex-direction: column;
    padding-left: 50px;
  }

  .soapkits-tl--zigzag .soapkits-tl__connector {
    position: absolute;
    left: 0;
    top: 18px;
    width: 42px;
    padding-top: 0;
  }

  .soapkits-tl--zigzag .soapkits-tl__media,
  .soapkits-tl--zigzag .soapkits-tl__body {
    text-align: left !important;
    padding: 0 !important;
    flex: 1 1 auto;
  }

  .soapkits-tl--zigzag .soapkits-tl__media {
    margin-bottom: 16px;
  }

  .soapkits-tl--zigzag .soapkits-tl__media img {
    max-width: 100%;
  }

  .soapkits-tl__desc {
    max-width: none;
  }

  .soapkits-tl__title {
    font-size: 18px;
  }

  /* Left / Right layouts */
  .soapkits-tl--left .soapkits-tl__line,
  .soapkits-tl--right .soapkits-tl__line {
    left: 20px;
    right: auto;
    transform: none;
  }

  .soapkits-tl--left .soapkits-tl__row,
  .soapkits-tl--right .soapkits-tl__row {
    flex-direction: column !important;
    padding-left: 50px;
  }

  .soapkits-tl--left .soapkits-tl__connector,
  .soapkits-tl--right .soapkits-tl__connector {
    position: absolute;
    left: 0;
    top: 18px;
    width: 42px;
    padding-top: 0;
  }
}