/* BLOCK: cbmc */
.cbmc {
  display: block;
  position: relative;
/*   padding-bottom: 9rem; */
/*   padding-top: 9rem; */
}
.cbmc::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 50%;
}

.cbmc__form {
  position: relative;
  z-index: 2;
  background-color: #fff;
  padding: 25px;
  position: relative;
  border-radius: 8px;
  border: 1px solid #c0d3e2;
  box-shadow: 0 2px 5px rgba(192, 211, 226, 0.1);
  max-width: 1000px;
  margin: 20px auto;
}

/* ELEMENT: title */
.cbmc__title {
  margin-top: 0;
  margin-bottom: 20px;
  text-align: center;
}

/* ELEMENT: form */
.cbmc__form {}

/* ELEMENT: fieldset */
.cbmc .cbmc__fieldset {
  margin-bottom: 20px;
  border: none;
  padding: 0;
}

/* MODIFIER: fieldset --unit-options */
.cbmc .cbmc__fieldset--unit-options {
  margin-bottom: 15px;
}

/* ELEMENT: legend */
.cbmc .cbmc__legend {
  margin: 0 0 10px;
  padding: 0;
  font-size: 16px;
  font-weight: bold;
  color: #555;
  margin-bottom: 5px;
  width: 100%;
  border: 0;
  color: #013c4f;
}

/* Utility class */
.cbmc .visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ELEMENT: tabs */
.cbmc .cbmc__tabs {
  display: flex;
  margin-bottom: 20px;
  gap: 20px;
}

/* ELEMENT: tab-button */
.cbmc .cbmc__tab-button {
  flex: 1 1 0;
  padding: 10px 5px;
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  transition: color .15s ease-in-out, border-color .15s ease-in-out;
  color: #aaa;
  border-bottom: 5px solid #ccc;
}

/* ELEMENT: radio-input */
.cbmc .cbmc__radio-input {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

/* MODIFIER: tab-button --active */
.cbmc .cbmc__radio-input:checked+.cbmc__tab-button {
  color: #013c4f;
  border-bottom-color: #05e48d;
}

/* MODIFIER: tab-button --hover */
.cbmc .cbmc__radio-input:not(:checked)+.cbmc__tab-button:hover {
  color: #777;
  border-bottom-color: #aaa;
}

/* ELEMENT: dimensions-group */
.cbmc .cbmc__dimensions-group {
  display: flex;
  gap: 0;
  align-items: stretch;
  border: 1px solid #013c4f;
  border-radius: 4px;
  overflow: hidden;
}

/* ELEMENT: dimensions-item */
.cbmc .cbmc__dimensions-item {
  display: flex;
  flex: 1 1 auto;
  border-right: 1px solid #013c4f;
}

.cbmc .cbmc__dimensions-item:last-child {
  border-right: none;
}

/* ELEMENT: dimension-input */
.cbmc input[type="number"] {
  display: block;
  height: auto;
}

.cbmc .cbmc__dimension-input {
  width: 100%;
  margin: 0;
  padding: 10px;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  min-width: 80px;
  background-color: #fff;
  color: #333;
}

.cbmc .cbmc__dimension-input::placeholder {
  color: #999;
}

.cbmc .cbmc__dimension-input:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(1, 60, 79, 0.5);
  position: relative;
  z-index: 1;
}

/* ELEMENT: unit-group */
.cbmc .cbmc__unit-group {
  display: flex;
  border: 1px solid #013c4f;
  /* ADDED: Group border */
  border-radius: 4px;
  overflow: hidden;
  width: 100%;
}

/* ELEMENT: unit-button */
.cbmc .cbmc__unit-button {
  flex: 1 1 0;
  border-radius: 0;
  margin: 0;
  padding: 10px 5px;
  text-align: center;
  position: relative;
  z-index: 0;
  line-height: 1.5;
  display: inline-block;
  font-weight: 700;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  /* Inactive state */
  background-color: white;
  color: #013c4f;
  border: none;
  /* REMOVED: Individual borders removed */
  border-right: 1px solid #013c4f;
  /* ADDED: Separator border */
}

/* Remove right border from the last button to use container border */
.cbmc .cbmc__unit-group .cbmc__unit-button:last-of-type {
  border-right: none;
}

/* MODIFIER: unit-button --active */
.cbmc .cbmc__radio-input:checked+.cbmc__unit-button {
  background-color: #013c4f;
  color: white;
  /* border-color: #013c4f; /* REMOVED: No individual border */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

/* MODIFIER: unit-button --focused */
.cbmc .cbmc__radio-input:focus+.cbmc__unit-button {
  /* Use outline for focus, offset slightly */
  outline: 2px solid #013c4f;
  outline-offset: -2px;
  /* Adjust to fit inside */
  box-shadow: none;
  z-index: 2;
}

/* MODIFIER: unit-button --active-focused */
.cbmc .cbmc__radio-input:checked:focus+.cbmc__unit-button {
  background-color: #013c4f;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  outline: 2px solid #87eaff;
  /* Contrasting focus on dark bg */
  outline-offset: -2px;
  z-index: 2;
}

/* MODIFIER: unit-button --hover */
.cbmc .cbmc__radio-input:not(:checked)+.cbmc__unit-button:hover {
  background-color: #f0f8fa;
  color: #002a3a;
}

/* ELEMENT: quantity-label */
.cbmc .cbmc__quantity-label {
  display: block;
  margin-bottom: 5px;
  font-weight: 700;
  color: #555;
}

/* ELEMENT: quantity-input */
.cbmc .cbmc__quantity-input {
  padding: 10px;
  border: 1px solid #013c4f;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  font-weight: 700;
}

.cbmc .cbmc__quantity-input:focus {
  outline: none;
  border-color: #013c4f;
  box-shadow: 0 0 0 2px rgba(1, 60, 79, 0.3);
}

/* ELEMENT: results */
.cbmc .cbmc__results {
  display: flex;
  gap: 20px;
}

/* ELEMENT: result-item */
.cbmc .cbmc__result-item {
  position: relative;
  flex: 1 1 0;
}

/* ELEMENT: result-label */
.cbmc .cbmc__result-label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
  position: absolute;
  top: 10px;
  left: 10px;
  white-space: nowrap;
}
@media screen and (max-width: 525px) {
  .cbmc .cbmc__result-label {
    font-size: 11px;
  }
}

/* ELEMENT: result-input */
.cbmc .cbmc__result-input {
  width: 100%;
  padding: 30px 10px 10px;
  border-radius: 4px;
  background-color: #e9ecef;
  box-sizing: border-box;
  border: 2px solid #05e48d;
  font-weight: bold;
  font-size: 26px;
}

/* ELEMENT: loader */
.cbmc .cbmc__loader {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, .5);
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 10px;
  color: #666;
  font-style: italic;
  margin-top: 15px;
}

/* Utility class */
.cbmc .hidden {
  display: none !important;
}