/* ── CSS Variables (amber palette) ─────────────────────────────────────── */
/* These are not defined in the global child theme, so we define them here  */
/* scoped to this page's component. Hardcoded hex fallbacks are also used   */
/* on every property to be immune to variable resolution failures.          */
.process-card {
  --amber:      #c9861f;
  --amber-soft: #e3a94a;
}

/* ── Strip Directorist warning wrapper on /submit-listing/ ────────────── */
.page-id-17 .notice_wrapper,
.page-id-17 .directorist-alert-warning {
  background: transparent !important;
  border:      none !important;
  box-shadow:  none !important;
  padding:     0 !important;
  margin:      0 !important;
}

.page-id-17 .directorist-alert-warning i,
.page-id-17 .directorist-alert-warning svg,
.page-id-17 .directorist-alert-warning .directorist-icon-mask {
  display: none !important;
}

/* ── Process Card container ───────────────────────────────────────────── */
.process-card {
  background:    linear-gradient(180deg, #16303f 0%, #12181c 100%) !important;
  border-radius: 16px !important;
  padding:       44px 40px !important;
  color:         #f2ede2 !important;
  text-align:    left !important;
  box-shadow:    0 12px 32px rgba(18,24,28,0.15) !important;
  margin-top:    24px !important;
}

@media (max-width: 600px) {
  .process-card {
    padding: 28px 20px !important;
  }
}

/* ── Eyebrow label ────────────────────────────────────────────────────── */
.process-card .process-eyebrow {
  font-size:      11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color:          #e3a94a !important; /* --amber-soft */
  font-weight:    600 !important;
  margin-bottom:  10px !important;
}

/* ── Headline & subtext ───────────────────────────────────────────────── */
.process-card .process-title {
  font-family: 'Fraunces', serif !important;
  font-weight: 600 !important;
  font-size:   26px !important;
  margin:      0 0 8px !important;
  color:       #fff !important;
  line-height: 1.25 !important;
}

.process-card .process-sub {
  font-size:   14.5px !important;
  color:       #c9d2d6 !important;
  margin:      0 0 32px !important;
  max-width:   480px !important;
  line-height: 1.6 !important;
}

/* ── Steps grid ───────────────────────────────────────────────────────── */
.process-card .steps {
  display:               grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:                   24px !important;
  margin-bottom:         36px !important;
}

@media (max-width: 700px) {
  .process-card .steps {
    grid-template-columns: 1fr !important;
  }
}

.process-card .step {
  position:    relative !important;
  padding-left: 0 !important;
}

.process-card .step-num {
  width:          30px !important;
  height:         30px !important;
  border-radius:  50% !important;
  background:     rgba(255,255,255,0.08) !important;
  border:         1px solid #e3a94a !important; /* --amber-soft */
  color:          #e3a94a !important;           /* --amber-soft */
  font-family:    'Fraunces', serif !important;
  font-weight:    600 !important;
  font-size:      14px !important;
  display:        flex !important;
  align-items:    center !important;
  justify-content: center !important;
  margin-bottom:  14px !important;
}

.process-card .step h4 {
  font-size:   15px !important;
  font-weight: 600 !important;
  margin:      0 0 6px !important;
  color:       #fff !important;
}

.process-card .step p {
  font-size:   13px !important;
  color:       #aeb8bd !important;
  line-height: 1.55 !important;
  margin:      0 !important;
}

/* Step connector line between bubbles (desktop only) */
@media (min-width: 701px) {
  .process-card .step:not(:last-child)::after {
    content:    '' !important;
    position:   absolute !important;
    top:        15px !important;
    left:       calc(100% + 12px - 24px) !important;
    width:      24px !important;
    height:     1px !important;
    background: rgba(227,169,74,0.35) !important;
  }
}

/* ── Action buttons row ───────────────────────────────────────────────── */
.process-card .process-actions {
  display:     flex !important;
  gap:         14px !important;
  align-items: center !important;
  padding-top: 28px !important;
  border-top:  1px solid rgba(255,255,255,0.12) !important;
  flex-wrap:   wrap !important;
}

/* Base button reset — high specificity so Astra/Directorist .btn rules lose */
.process-card a.btn,
.process-actions .btn {
  padding:         13px 24px !important;
  border-radius:   8px !important;
  font-family:     'Inter', sans-serif !important;
  font-size:       14.5px !important;
  font-weight:     600 !important;
  text-decoration: none !important;
  display:         inline-block !important;
  cursor:          pointer !important;
  line-height:     1.2 !important;
  text-align:      center !important;
  box-shadow:      none !important;
  border:          none !important;
  transition:      background-color 0.15s, border-color 0.15s !important;
}

/* PRIMARY — amber fill */
.process-card a.btn.btn-primary,
.process-actions .btn-primary {
  background: #c9861f !important; /* --amber, hardcoded — var() would be unresolved */
  color:      #12181c !important;
  border:     none !important;
}
.process-card a.btn.btn-primary:hover,
.process-actions .btn-primary:hover {
  background: #e3a94a !important; /* --amber-soft */
  color:      #12181c !important;
}

/* OUTLINE — transparent with white border */
.process-card a.btn.btn-outline,
.process-actions .btn-outline {
  background: transparent !important;
  color:      #f2ede2 !important;
  border:     1px solid rgba(255,255,255,0.35) !important;
}
.process-card a.btn.btn-outline:hover,
.process-actions .btn-outline:hover {
  border-color: #fff !important;
  color:        #f2ede2 !important;
  background:   transparent !important;
}

/* ── Reassurance microcopy ────────────────────────────────────────────── */
.process-card .reassure {
  font-size:   12.5px !important;
  color:       #9aa5aa !important;
  margin-left: auto !important;
}

/* ── Mobile stacking ─────────────────────────────────────────────────── */
@media (max-width: 500px) {
  .process-card .reassure {
    margin-left: 0 !important;
    width:       100% !important;
  }
  .process-card a.btn,
  .process-actions .btn {
    width: 100% !important;
  }
}