/* ========================================
   Let's Rock Barber Shop - Pricing Section
   Two-Column Pricing List
   ======================================== */

.lr-pricing {
  background-color: var(--lr-bg-primary);
  position: relative;
}

.lr-pricing__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--lr-space-2xl);
}

/* Pricing Column */
.lr-pricing__column {
  background-color: var(--lr-bg-tertiary);
  border-radius: var(--lr-radius-lg);
  padding: var(--lr-space-2xl);
  border: 1px solid var(--lr-border-subtle);
}

/* Pricing Item */
.lr-pricing__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--lr-space-md) 0;
  border-bottom: 1px dotted var(--lr-border-subtle);
  transition: all var(--lr-transition-fast);
  gap: var(--lr-space-md);
}

.lr-pricing__item:last-child {
  border-bottom: none;
}

.lr-pricing__item:hover {
  padding-left: var(--lr-space-sm);
  background-color: rgba(200, 169, 126, 0.04);
  border-radius: var(--lr-radius-sm);
}

.lr-pricing__item > span:first-child {
  font-size: var(--lr-text-base);
  color: var(--lr-text-primary);
  font-weight: var(--lr-weight-medium);
  flex: 1;
}

.lr-pricing__item > span:first-child small {
  display: block;
  font-size: var(--lr-text-xs);
  color: var(--lr-text-tertiary);
  font-weight: var(--lr-weight-normal);
  margin-top: 2px;
}

.lr-pricing__item > span:last-child {
  font-size: var(--lr-text-lg);
  color: var(--lr-accent-gold);
  font-weight: var(--lr-weight-bold);
  white-space: nowrap;
}

.lr-pricing__item > span:last-child small {
  font-size: var(--lr-text-xs);
  color: var(--lr-text-tertiary);
  font-weight: var(--lr-weight-normal);
}

/* Decorative Image */
.lr-pricing__decor {
  display: block;
  max-width: 300px;
  margin: var(--lr-space-2xl) auto 0;
  opacity: 0.6;
}

/* Responsive */
@media (max-width: 768px) {
  .lr-pricing__grid {
    grid-template-columns: 1fr;
    gap: var(--lr-space-lg);
  }

  .lr-pricing__column {
    padding: var(--lr-space-xl);
  }

  .lr-pricing__item > span:first-child {
    font-size: var(--lr-text-sm);
  }

  .lr-pricing__item > span:last-child {
    font-size: var(--lr-text-base);
  }
}