/* Portable Restroom Calculator – Bricks style on white card */

.prc-calculator-container {
  max-width: 720px;
  margin: var(--space-m, 2.4rem) auto;
  padding: var(--space-s, 1.8rem);
  background: #ffffff;
  color: var(--black, #000000);
  border-radius: var(--radius-xs, .4444444444rem);
  border-left: 8px solid var(--action, #ca000d);
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  font-family: Outfit, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--text-s, 1.4rem);
  line-height: 1.6;
}

/* Tabs */

.prc-tabs {
  display: flex;
  gap: 0.4rem;
  margin-bottom: var(--space-s, 2rem);
  border-bottom: 1px solid #dddedf;
}

.prc-tab-link {
  flex: 1;
  border: 0;
  border-radius: var(--radius-xs, .4444444444rem) var(--radius-xs, .4444444444rem) 0 0;
  padding: var(--space-xs, 1.35rem) var(--space-m, 2.4rem);
  background: var(--primary)!important;
  color: var(--white)!important;
  font-size: var(--text-s, 1.4rem);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
}

.prc-tab-link.active {
  background: var(--black)!important;
}

/* Tab content */

.prc-tab-content {
  display: none;
  padding-top: var(--space-xs, 1.35rem);
}

.prc-tab-content:first-of-type {
  display: block;
}

/* Form fields */

.prc-calculator-container label {
  display: block;
  margin-top: 0.75rem;
  margin-bottom: 0.35rem;
  font-weight: 500;
}

.prc-calculator-container select,
.prc-calculator-container input[type="number"] {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-xs, .4444444444rem);
  border: 1px solid #dddedf;
  font-size: var(--text-s, 1.4rem);
}

.prc-checkbox-group {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: var(--text-s, 1.4rem);
}

/* Result box */

.prc-result {
  margin-top: var(--space-s, 2rem);
  padding: 1rem 1.2rem;
  border-radius: var(--radius-xs, .4444444444rem);
  background: var(--black);
	color:var(--white);
  border: 1px solid #dde3ff;
  display: none;
}

/* Buttons styled like Bricks primary buttons, black text on yellow */

.prc-calculator-container button[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  column-gap: 10px;
  row-gap: 10px;
  padding: var(--space-xs, 1.35rem) var(--space-m, 2.4rem);
  border-radius: var(--radius-xs, .4444444444rem);
  border-width: 0;
  background-color: var(--primary)!important;
  color: var(--white);
  font-size: var(--text-s, 1.4rem);
  font-weight: 600;
  letter-spacing: .5px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
}

.prc-calculator-container button[type="button"]:hover {
  background-color: var(--black)!important;
  color: var(--white);
}

@media (max-width: 767px) {
  .prc-calculator-container button[type="button"] {
    padding-top: var(--space-s, 1.8rem);
    padding-bottom: var(--space-s, 1.8rem);
  }
}