/* ================================================================
   Rate Card / Pricing Section
   Transparent pricing tables for RO and geyser services.
   ================================================================ */

.pricing-section {

  background: var(--bg-subtle);

}



.pricing-tables-wrapper {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 32px;

}



.pricing-card {

  background: #ffffff;

  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-lg);

  border: 1px solid var(--border-color);

  overflow: hidden;

  display: flex;

  flex-direction: column;

}



.pricing-card-header {

  padding: 24px 30px;

  color: #ffffff;

  display: flex;

  align-items: center;

  gap: 18px;

}



.pricing-card-header i {

  font-size: 2.2rem;

}



.pricing-card-header h3 {

  color: #ffffff;

  font-size: 1.35rem;

  margin-bottom: 2px;

}



.pricing-card-header p {

  font-size: 0.85rem;

  opacity: 0.9;

}



.pricing-card-header.water-bg {

  background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-dark) 100%);

}



.pricing-card-header.fire-bg {

  background: linear-gradient(135deg, var(--primary-orange) 0%, var(--primary-orange-dark) 100%);

}



.rate-table {

  width: 100%;

  border-collapse: collapse;

}



.rate-table th, .rate-table td {

  padding: 14px 24px;

  font-size: 0.9rem;

  text-align: left;

}



.rate-table th {

  background: var(--slate-50);

  color: var(--slate-600);

  font-weight: 700;

  text-transform: uppercase;

  font-size: 0.78rem;

  letter-spacing: 0.5px;

  border-bottom: 1px solid var(--border-color);

}



.rate-table tr {

  border-bottom: 1px solid var(--border-color);

}



.rate-table tr:hover {

  background-color: var(--slate-50);

}



.price-val {

  font-weight: 700;

  color: var(--dark-slate);

  text-align: right;

  white-space: nowrap;

}



.price-val .note {

  display: block;

  font-size: 0.75rem;

  font-weight: 500;

  color: #10b981;

}



.pricing-footer {

  padding: 24px;

  margin-top: auto;

  border-top: 1px solid var(--border-color);

  background: var(--slate-50);

}



/* ==========================================================================

   Detailed Booking Form & Problem Explanation Section

   ========================================================================== */

@media (max-width: 768px) {

  .pricing-tables-wrapper {

    grid-template-columns: 1fr;

  }

}