/* ==========================================================================
   >>> Public Auth / Registration Rules
   ========================================================================== */

.registration-rules_auth_register {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ==========================================================================
   >>> Rules Box
   ========================================================================== */

.registration-rules__box {
  max-height: 220px;
  overflow-y: auto;

  padding: 16px 18px;

  border: 1px solid #d7dee8;
  border-radius: 8px;

  background: #f8fafc;

  color: #334155;

  font-size: 13px;
  line-height: 1.65;

  scrollbar-width: thin;
}

/* ==========================================================================
   >>> Accept Row
   ========================================================================== */

.registration-rules__accept {
  display: flex;
  align-items: flex-start;
  gap: 10px;

  padding: 12px 14px;

  border: 1px solid #d7dee8;
  border-radius: 8px;

  background: #ffffff;

  color: #334155;

  font-size: 13px;
  line-height: 1.45;

  cursor: pointer;

  transition:
    border-color 0.18s ease,
    background-color 0.18s ease;
}

.registration-rules__accept:hover {
  border-color: #b8c3d1;
  background: #f8fafc;
}

.registration-rules__accept--locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.registration-rules__accept--locked:hover {
  border-color: #d7dee8;
  background: #ffffff;
}

.registration-rules__accept--locked input[type="checkbox"] {
  cursor: not-allowed;
}

.registration-rules__accept--unlocked {
  opacity: 1;
}

/* ==========================================================================
   >>> Checkbox
   ========================================================================== */

.registration-rules__accept input[type="checkbox"] {
  width: 16px;
  height: 16px;

  margin: 2px 0 0;

  flex: 0 0 16px;

  cursor: pointer;
}

.registration-rules__accept span {
  min-width: 0;

  color: #334155;
}

/* ==========================================================================
   >>> Focus
   ========================================================================== */

.registration-rules__accept:focus-within {
  border-color: #94a3b8;
}

/* ==========================================================================
   >>> Responsive
   ========================================================================== */

@media (max-width: 640px) {
  .registration-rules__box {
    max-height: 180px;

    padding: 14px;

    font-size: 12px;
  }

  .registration-rules__accept {
    padding: 11px 12px;
  }
}

/* ==========================================================================
   <<< Public Auth / Registration Rules
   ========================================================================== */