/* ===========================
   NKR.DESIGN - Decorative Frame CSS
   Ornamental styles for the service frames
   =========================== */

.service-frame {
  position: relative;
}

/* Gold corner accents */
.service-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 20px;
  height: 20px;
  border-right: 1px solid rgba(201,168,76,0.3);
  border-bottom: 1px solid rgba(201,168,76,0.3);
  transition: border-color 0.4s ease, width 0.4s ease, height 0.4s ease;
}

.service-card:hover::after {
  border-color: var(--gold);
  width: 30px;
  height: 30px;
}

/* Testimonial special styling */
.testimonial-text::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 30px;
  width: 40px;
  height: 1px;
  background: var(--gold);
}

/* QA item active styling */
.qa-item.open {
  border-color: rgba(201,168,76,0.3);
}

.qa-item.open .qa-question {
  background: rgba(201,168,76,0.04);
}

/* Enhanced section label with lines */
.section-label {
  position: relative;
  display: inline-block;
}

.section-label::before,
.section-label::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}

.section-label::before { right: calc(100% + 10px); }
.section-label::after { left: calc(100% + 10px); }

/* Flow step hover effect */
.flow-circle::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid transparent;
  transition: border-color 0.4s ease;
}

.flow-step:hover .flow-circle::before {
  border-color: rgba(201,168,76,0.3);
}