/* ═══════════════════════════════════════════════════════════════════════
   O2 Marketing House — Custom Elementor Widgets CSS
   enlaweb Elite Standard | Namespace: .o2w-
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..700;1,400..700&family=Plus+Jakarta+Sans:wght@300;400;500;600&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap');

/* ── Widget tokens ───────────────────────────────────────────────────── */
.o2w-process-section {
  --o2-badge-size: 72px;
  --o2-line-color: rgba(198, 129, 98, 0.4);
  --o2-line-gap:   12px;   /* space between badge edge and line */
  --o2-ease:       cubic-bezier(.16,1,.3,1);
}

/* ── Base reset (scoped) ─────────────────────────────────────────────── */
.o2w-widget,
.o2w-widget *,
.o2w-widget *::before,
.o2w-widget *::after { box-sizing: border-box; }

/* ══ PROCESS SECTION ═════════════════════════════════════════════════════
   Each .o2w-process-step is flex:1 with position:relative.
   The connecting line is drawn with ::before — anchored to THIS step's
   badge, so it can NEVER desync from the circle.

   Line math (left-aligned badge):
     left  = badge_size + line_gap          (starts after badge right edge)
     right  = -(badge_size - line_gap) * -1  → simplified: right = -line_gap
              because next step starts at step boundary,
              so "right: -var(--o2-line-gap)" = line_gap px INTO the next step,
              stopping exactly line_gap before next badge's left edge.
   ═══════════════════════════════════════════════════════════════════════ */

.o2w-process-section {
  background-color: #FAF5F0;
  padding: 48px 24px !important;
  border-radius: 16px;
}

.o2w-process-inner {
  max-width: min(1200px, calc(100vw - 48px));
  margin-inline: auto;
}

/* ── Flex row ────────────────────────────────────────────────────────── */
.o2w-process-row {
  display: flex;
  align-items: flex-start;
}

/* ── Each step ───────────────────────────────────────────────────────── */
.o2w-process-step {
  flex: 1 1 0;
  min-width: 0;
  position: relative;           /* REQUIRED: anchors ::before to this step */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ── THE LINE: ::before on every step except the last ───────────────── */
/*
  left  : right edge of badge + gap
  right : -gap  → extends `gap` px into the next step column,
                   ending exactly `gap` px before the next badge's left edge
  top   : vertical center of badge (badge_size / 2)
*/
.o2w-process-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left:  calc(var(--o2-badge-size) + var(--o2-line-gap));
  right: var(--o2-line-gap);
  top:   calc(var(--o2-badge-size) / 2);
  transform: translateY(-50%);
  height: 1.5px;
  background-color: var(--o2-line-color);
  z-index: 0;
}

/* ── Badge circle ────────────────────────────────────────────────────── */
.o2w-process-number-badge {
  position: relative;
  z-index: 1;                   /* sits above the ::before line */
  width:  var(--o2-badge-size);
  height: var(--o2-badge-size);
  border-radius: 50%;
  background-color: #F2E4DA;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C68162;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.05em;
  flex-shrink: 0;
  margin-bottom: 20px;
  transition: transform 0.3s var(--o2-ease);
}

.o2w-process-step:hover .o2w-process-number-badge {
  transform: scale(1.06);
}

/* ── Step title ──────────────────────────────────────────────────────── */
.o2w-process-step-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  color: #2C2C2C;
  margin: 0 0 12px 0;
  line-height: 1.2;
}

/* ── Step description ────────────────────────────────────────────────── */
.o2w-process-step-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #5A5A5A;
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}

/* ══ RESPONSIVE ══════════════════════════════════════════════════════════ */

/* TABLET (640–1023 px): 2 columns */
@media (min-width: 640px) and (max-width: 1023px) {
  .o2w-process-row { flex-wrap: wrap; gap: 40px 0; }

  .o2w-process-step {
    flex: 0 0 50%;
    padding-right: 24px;
  }

  /* Hide the line that would span across the row break (3rd connector) */
  .o2w-process-step:nth-child(2)::before { display: none; }
}

/* MOBILE (< 640 px): single column */
@media (max-width: 639px) {
  .o2w-process-row {
    flex-direction: column;
    gap: 32px;
  }

  /* Hide all horizontal lines on mobile */
  .o2w-process-step::before { display: none; }

  .o2w-process-step {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }

  .o2w-process-number-badge {
    margin-bottom: 0;
    flex-shrink: 0;
  }
}