/* ============================================
   GoCheckin Rewards – Visit Detail Page (History)
   ============================================ */

/* ---- Slide-in overlay ---- */
.visit-detail-page {
  position: absolute;
  inset: 0;
  z-index: 56; /* above appointment page (25) */
  background: var(--gradient-header);
  transform: translateX(100%);
  transition: var(--transition-slide);
  will-change: transform;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.visit-detail-page.open {
  transform: translateX(0);
}

/* ---- Header ---- */
.visit-detail-header {
  padding: var(--space-10) var(--space-5) var(--space-4);
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding-right: calc(var(--space-8) + var(--space-5));
}

.visit-detail-close-btn {
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-2xl);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2);
  flex-shrink: 0;
  background: var(--color-button-glass);
  box-shadow: var(--shadow-glass-btn);
  color: var(--color-content-main);
  transition: var(--transition-fade);
  backdrop-filter: var(--backdrop-blur-xs);
  -webkit-backdrop-filter: var(--backdrop-blur-xs);
}

.visit-detail-close-btn:hover { opacity: 0.8; }

.visit-detail-header-title {
  flex: 1;
  text-align: center;
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-content-main);
  line-height: 26px;
}

/* ---- Scroll area ---- */
.visit-detail-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  padding: 0 0 110px;
  -webkit-overflow-scrolling: touch;
}

.visit-detail-scroll::-webkit-scrollbar { display: none; }

/* ---- Section group (4px gap) ---- */
.visit-detail-sections {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Base section */
.visit-detail-section {
  background: var(--color-on-primary);
  padding: var(--space-5);
}

.visit-detail-section--top {
  border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
}

.visit-detail-section--bottom {
  border-radius: 0 0 var(--radius-3xl) var(--radius-3xl);
}

/* ---- Status-based show/hide ---- */

/* By default hide both badges, show/hide per status */
.visit-detail-badge--completed,
.visit-detail-badge--cancelled { display: none; }

.visit-detail-page[data-status="completed"] .visit-detail-badge--completed { display: flex; }
.visit-detail-page[data-status="cancelled"] .visit-detail-badge--cancelled { display: flex; }

/* Rate Visit pill: only for completed */
.visit-detail-rate-pill { display: none; }
.visit-detail-page[data-status="completed"] .visit-detail-rate-pill { display: inline-flex; }

/* Cancelled banner section: only for cancelled */
.visit-detail-cancelled-section { display: none; }
.visit-detail-page[data-status="cancelled"] .visit-detail-cancelled-section { display: block; }

/* Store section: top-rounded when completed (no banner above it) */
.visit-detail-page[data-status="completed"] .visit-detail-store-section {
  border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
}

/* ---- Cancelled warning banner ---- */
.visit-detail-cancelled-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: #fbeaea;
  border-radius: var(--radius-xl);
  padding: 12px;
}

.visit-detail-cancelled-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: #dc2d2d;
  margin-top: 1px;
}

.visit-detail-cancelled-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.visit-detail-cancelled-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: #dc2d2d;
  line-height: var(--line-height-m);
}

.visit-detail-cancelled-reason {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-regular);
  color: #dc2d2d;
  opacity: 0.7;
  line-height: var(--line-height-2xs);
}

/* ---- Store info section ---- */
.visit-detail-store-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}

.visit-detail-store-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.visit-detail-store-name {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-content-main);
  line-height: 24px;
}

.visit-detail-store-meta {
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-content-sub);
  line-height: var(--line-height-2xs);
}

/* Rate Visit pill */
.visit-detail-rate-pill {
  align-items: center;
  justify-content: center;
  padding: 6px var(--space-5);
  border-radius: var(--radius-3xl);
  border: 1px solid var(--color-border-medium);
  background: none;
  font-family: var(--font-family);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  line-height: var(--line-height-2xs);
  cursor: pointer;
  transition: var(--transition-fade);
  white-space: nowrap;
  width: fit-content;
}

.visit-detail-rate-pill:hover { opacity: 0.8; }

/* ---- Services section ---- */
.visit-detail-services {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.visit-detail-section-title {
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-content-main);
  line-height: 24px;
}

.visit-detail-staff-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.visit-detail-staff-name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-content-main);
  line-height: var(--line-height-m);
}

.visit-detail-service-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: var(--space-5);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-content-main);
  line-height: var(--line-height-m);
}

/* ---- Summary section ---- */
.visit-detail-summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.visit-detail-summary-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-content-main);
  line-height: var(--line-height-m);
}

.visit-detail-promo {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-content-main);
}

.visit-detail-promo svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.visit-detail-promo-amount {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: #ffaf22;
  line-height: var(--line-height-m);
}

.visit-detail-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-border-weak);
}

.visit-detail-total-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-content-main);
  line-height: var(--line-height-m);
}

.visit-detail-total-price {
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-content-main);
  line-height: 26px;
}

/* ---- Payment section ---- */
.visit-detail-payment-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.visit-detail-payment-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-content-main);
  line-height: var(--line-height-m);
}

.visit-detail-payment-method {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.visit-detail-visa-badge {
  width: 32px;
  height: 20px;
  background: #1a1f71;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: var(--font-weight-bold);
  color: #ffffff;
  letter-spacing: 0.5px;
  font-style: italic;
}

.visit-detail-payment-value {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-content-main);
  line-height: var(--line-height-m);
}

/* ---- Points section ---- */
.visit-detail-points {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--color-content-main);
  line-height: var(--line-height-m);
}

.visit-detail-points strong {
  font-weight: var(--font-weight-semibold);
}

/* ---- Bottom action bar ---- */
.visit-detail-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: var(--backdrop-blur-l);
  -webkit-backdrop-filter: var(--backdrop-blur-l);
  border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
  padding: var(--space-5) var(--space-5) 0;
  display: flex;
  flex-direction: column;
}

.visit-detail-btn-row {
  display: flex;
  gap: var(--space-3);
}

.btn-visit-view-salon,
.btn-visit-book-again {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px var(--space-6);
  border: none;
  border-radius: var(--radius-3xl);
  font-family: var(--font-family);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: 24px;
  cursor: pointer;
  transition: var(--transition-fade);
  white-space: nowrap;
}

.btn-visit-view-salon {
  background: var(--color-content-main);
  color: var(--color-on-primary);
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.btn-visit-book-again {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

.btn-visit-view-salon svg,
.btn-visit-book-again svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.btn-visit-view-salon:hover,
.btn-visit-book-again:hover { opacity: 0.85; }

/* Home indicator */
.visit-detail-home-indicator {
  display: flex;
  justify-content: center;
  padding: var(--space-3) 0;
}

.visit-detail-home-bar {
  width: 135px;
  height: 5px;
  background: var(--color-content-main);
  border-radius: 100px;
  opacity: 0.5;
}