/*
 * ShineUp shared checkbox and radio controls.
 * The service-intake checkbox is the visual source of truth for the app.
 */
:root {
  --su-choice-size: 19px;
  --su-choice-radius: 5px;
}

/* Controls that already use a separate visual box in their markup. */
:where(
  .intake-check-option > span,
  .intake-consent-option > span,
  .company-hours-toggle > span,
  .standalone-check > span,
  .wizard-social-checkbox-box,
  .cookie-consent__check
) {
  box-sizing: border-box;
  flex: 0 0 var(--su-choice-size) !important;
  width: var(--su-choice-size) !important;
  height: var(--su-choice-size) !important;
  min-width: var(--su-choice-size);
  display: grid;
  place-items: center;
  margin: 0;
  color: transparent;
  background: var(--surface-solid, var(--surface));
  border: 1px solid var(--line-strong);
  border-radius: var(--su-choice-radius) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  font-size: 10px;
  line-height: 1;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}

:where(
  .intake-check-option > input:checked + span,
  .intake-consent-option > input:checked + span,
  .company-hours-toggle > input:checked + span,
  .standalone-check > input:checked + span,
  .wizard-social-checkbox > input:checked + .wizard-social-checkbox-box,
  .cookie-consent__option > input:checked + .cookie-consent__check
) {
  color: #241704 !important;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)) !important;
  border-color: var(--gold-deep) !important;
  box-shadow: 0 4px 12px rgba(179, 119, 10, .2) !important;
}

:where(
  .intake-check-option,
  .intake-consent-option,
  .company-hours-toggle,
  .standalone-check,
  .wizard-social-checkbox,
  .cookie-consent__option
):has(input:focus-visible) {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Native-box markup is normalized to the same service-intake component. */
:where(
  .form-check-row > input[type="checkbox"],
  .wizard-day-toggle > input[type="checkbox"],
  .service-filter-options input[type="checkbox"]
) {
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box;
  flex: 0 0 var(--su-choice-size) !important;
  width: var(--su-choice-size) !important;
  height: var(--su-choice-size) !important;
  min-width: var(--su-choice-size);
  margin: 0 !important;
  padding: 0 !important;
  background-color: var(--surface-solid, var(--surface));
  background-image: none;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--su-choice-radius) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

:where(
  .form-check-row > input[type="checkbox"],
  .wizard-day-toggle > input[type="checkbox"],
  .service-filter-options input[type="checkbox"]
):checked {
  background-color: var(--gold);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23241704' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m3.2 8.3 3 3 6.6-6.7'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--gold-bright), var(--gold));
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: 12px 12px, 100% 100%;
  border-color: var(--gold-deep) !important;
  box-shadow: 0 4px 12px rgba(179, 119, 10, .2) !important;
}

:where(
  .form-check-row > input[type="checkbox"],
  .wizard-day-toggle > input[type="checkbox"],
  .service-filter-options input[type="checkbox"]
):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

:where(
  .form-check-row > input[type="checkbox"],
  .wizard-day-toggle > input[type="checkbox"],
  .service-filter-options input[type="checkbox"]
):disabled {
  cursor: not-allowed;
  opacity: .52;
}

.form-check-row > input[type="checkbox"] {
  margin-top: 1px !important;
}

/* Filter checkboxes retain their chip, but use the same visible checkbox. */
.company-notifications-filter-grid label > span {
  display: flex;
  align-items: center;
  gap: 9px;
}

.company-notifications-filter-grid label > span::before {
  content: "";
  box-sizing: border-box;
  flex: 0 0 var(--su-choice-size);
  width: var(--su-choice-size);
  height: var(--su-choice-size);
  background: var(--surface-solid, var(--surface));
  border: 1px solid var(--line-strong);
  border-radius: var(--su-choice-radius);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.company-notifications-filter-grid label > input:checked + span {
  color: var(--text) !important;
  background: var(--gold-wash, var(--surface-2)) !important;
  border-color: var(--gold) !important;
}

.company-notifications-filter-grid label > input:checked + span::before {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23241704' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m3.2 8.3 3 3 6.6-6.7'/%3E%3C/svg%3E"),
    linear-gradient(135deg, var(--gold-bright), var(--gold));
  background-position: center, center;
  background-repeat: no-repeat;
  background-size: 12px 12px, 100% 100%;
  border-color: var(--gold-deep);
  box-shadow: 0 4px 12px rgba(179, 119, 10, .2);
}

.company-notifications-filter-grid label:has(input:focus-visible) > span {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Radios use the same scale, outline and gold selected state. */
.service-rating-options span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.service-rating-options span::before {
  content: "";
  box-sizing: border-box;
  flex: 0 0 var(--su-choice-size);
  width: var(--su-choice-size);
  height: var(--su-choice-size);
  background: var(--surface-solid, var(--surface));
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

.service-rating-options input:checked + span {
  color: var(--text) !important;
  background: var(--gold-wash, var(--surface-2)) !important;
  border-color: var(--gold) !important;
}

.service-rating-options input:checked + span::before {
  background:
    radial-gradient(circle, #241704 0 3px, transparent 3.5px),
    linear-gradient(135deg, var(--gold-bright), var(--gold));
  border-color: var(--gold-deep);
  box-shadow: 0 4px 12px rgba(179, 119, 10, .2);
}

.service-rating-options label:has(input:focus-visible) > span {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

@media (max-width: 767.98px) {
  body[data-route="contact"] .form-check-row > input[type="checkbox"] {
    flex-basis: var(--su-choice-size) !important;
    width: var(--su-choice-size) !important;
    height: var(--su-choice-size) !important;
  }
}