/* Contact page — green hero (phone + hours), cream map band, green reviews band. */

/* Phone button — in the green hero: orange fill + green-dark text */
.contact-hero a.phone-button {
  display: inline-flex; align-items: center; gap: var(--space-3);
  margin-top: var(--space-6); padding: var(--space-4) var(--space-8);
  background-color: var(--accent); color: var(--green-dark);
  border-radius: var(--radius); font-size: var(--text-2xl); font-weight: var(--fw-extrabold);
  letter-spacing: 0.01em; transition: background-color var(--transition-fast);
}
.contact-hero .phone-button:hover { background-color: var(--accent-dark); color: var(--green-dark); text-decoration: none; }
.phone-icon { flex-shrink: 0; }

/* Hours — green-750 stat boxes inside the dusk hero (green depth, yellow frame) */
.hours-container { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); }
.hours-block {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-4) var(--space-6);
  background-color: var(--green-750); border: 1.5px solid var(--highlight); border-radius: var(--radius);
  min-width: 15rem;
}
.hours-block--closed { border-color: var(--ink-invert-soft); }
.hours-label { font-size: var(--text-xs); font-weight: var(--fw-extrabold); letter-spacing: var(--tracking-caps); color: var(--highlight); }
.hours-block--closed .hours-label { color: var(--ink-invert-soft); }
.hours-time { font-weight: var(--fw-bold); color: var(--ink-invert); }

/* Map — UNBOXED on the cream ground (the iframe carries its own frame) */
.map-box { max-width: var(--container-narrow); margin-inline: auto; text-align: center; }
.map-intro { max-width: 42rem; margin: var(--space-3) auto 0; color: var(--ink-soft); }
.map-embed { margin-top: var(--space-6); border: 1.5px solid var(--green); }
.map-embed iframe { display: block; border: 0; width: 100%; }
.pharmacy-address { margin-top: var(--space-6); font-style: normal; line-height: var(--leading-relaxed); color: var(--ink); }
.pharmacy-address strong { color: var(--ink); }

/* Reviews — inside the GREEN terminal band */
.reviews-summary { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-bottom: var(--space-8); }
.reviews-summary .stars { font-size: var(--text-2xl); }
.band--green .rating-badge { background-color: var(--highlight); color: var(--green-dark); }
.band--green .review-count { color: var(--ink-invert-soft); }
.band--green .reviewer-name { color: var(--ink-invert); }

.reviews-carousel { display: flex; align-items: center; gap: var(--space-3); }
.reviews-track { display: flex; gap: var(--space-6); list-style: none; margin: 0; padding: var(--space-2) 0; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
/* Carousel entries: unboxed, no bottom hairline (separated by the scroller gap) */
.reviews-track .review-card { scroll-snap-align: start; flex: 0 0 min(85%, 20rem); border-bottom: none; padding-bottom: 0; }
.google-icon { flex-shrink: 0; }

/* Carousel arrows — dusk control (orange fill, green-dark glyph) */
.carousel-btn {
  flex-shrink: 0; width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-2xl); line-height: 1;
  color: var(--green-dark); background-color: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--radius);
  cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.carousel-btn:hover { background-color: var(--highlight); border-color: var(--highlight); color: var(--green-dark); }

@media (max-width: 560px) {
  .contact-hero .phone-button { font-size: var(--text-xl); padding: var(--space-3) var(--space-5); }
}