/* Live Chat Support Page Specific Styles - PapeleriaBella */

.live-chat-intro {
  text-align: center;
  margin-top: var(--space-16);
  margin-bottom: var(--space-12);
}
.live-chat-intro .live-chat-cta {
  margin-top: var(--space-4);
  font-size: var(--font-size-lg);
  padding: var(--space-4) var(--space-8);
}

.how-it-works {
  margin-top: var(--space-12);
  margin-bottom: var(--space-8);
}
.how-it-works ol {
  padding-left: var(--space-8);
  line-height: var(--line-height-loose);
  margin: 0;
}
.how-it-works li:not(:last-child) {
  margin-bottom: var(--space-3);
}

.benefits {
  margin-bottom: var(--space-12);
  margin-top: var(--space-8);
}
.live-chat-benefits .benefit {
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.live-chat-benefits h3 {
  margin-bottom: var(--space-2);
  color: var(--color-primary);
}

.meet-team {
  margin-bottom: var(--space-12);
}
.team-cards {
  margin-top: var(--space-6);
  gap: var(--space-8);
}
.team-member {
  text-align: center;
  padding: var(--space-5) var(--space-4);
  background: var(--color-neutral-200);
}
.team-member img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto var(--space-4) auto;
  box-shadow: 0 2px 12px 0 rgba(252, 93, 91, 0.09);
}
.team-member figcaption {
  margin-top: var(--space-2);
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.testimonials {
  margin-bottom: var(--space-12);
}
.testimonial-cards {
  gap: var(--space-6);
}
.testimonial-cards blockquote {
  font-style: italic;
  border-left: 4px solid var(--color-primary);
  padding-left: var(--space-4);
  background: var(--color-neutral-200);
  color: var(--color-neutral-900);
  position: relative;
}
.testimonial-cards blockquote footer {
  font-size: var(--font-size-sm);
  margin-top: var(--space-2);
  font-style: normal;
  color: var(--color-primary-accent);
}

.faq {
  margin-bottom: var(--space-12);
}
.faq dl {
  margin-top: var(--space-2);
}
.faq dt {
  font-weight: bold;
  margin-top: var(--space-4);
  color: var(--color-primary);
}
.faq dd {
  margin-left: var(--space-6);
  margin-bottom: var(--space-2);
}

.etiquette {
  margin-bottom: var(--space-12);
  background: var(--color-bg-alt);
}
.etiquette ul {
  padding-left: var(--space-6);
  list-style: disc outside;
}
.etiquette li {
  margin-bottom: var(--space-2);
  line-height: var(--line-height-normal);
}

.contact-info {
  text-align: center;
  margin-bottom: var(--space-24);
}
.contact-info .live-chat-cta {
  font-size: var(--font-size-lg);
  padding: var(--space-4) var(--space-8);
  margin-bottom: var(--space-3);
  margin-top: var(--space-4);
  display: inline-block;
}
.contact-info .chat-note {
  color: var(--color-neutral-500);
  margin-top: var(--space-2);
}

@media (max-width: 1000px) {
  .grid-cols-3, .live-chat-benefits, .team-cards { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 700px) {
  .grid-cols-3, .live-chat-benefits, .team-cards, .testimonial-cards { grid-template-columns: 1fr !important; }
  .benefits, .meet-team, .testimonials, .faq, .how-it-works, .contact-info { margin-bottom: var(--space-8); }
  .faq dl { padding-left: 0; }
}
@media (max-width: 500px) {
  .live-chat-intro { margin-top: var(--space-8); margin-bottom: var(--space-6); }
  .container { padding-left: var(--space-1); padding-right: var(--space-1); }
}