:root {
  --access-error: #c98d8d;
  --access-success: #9cb3a1;
}

.model-name {
  text-decoration: none;
}

#model-grid-mobile,
#model-grid-desktop {
  min-height: 10px;
}

.models-feed-sentinel {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  margin-top: 8px;
}

.models-feed-sentinel.is-active {
  min-height: 56px;
}

.models-feed-loading {
  color: var(--content);
  font-size: 12px;
  letter-spacing: 1.5px;
  position: relative;
  padding-left: 20px;
}

.models-feed-sentinel.is-active .models-feed-loading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  border: 2px solid #3d3f45;
  border-top-color: #8a8d96;
  border-radius: 50%;
  animation: feedSpin 700ms linear infinite;
}

@keyframes feedSpin {
  to {
    transform: rotate(360deg);
  }
}

.access-phone-field {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  height: 46px;
  border: 1px solid #31343b;
  border-radius: 12px;
  background: rgba(21, 23, 28, 0.85);
  margin-bottom: 14px;
  overflow: hidden;
}

.access-phone-field:hover,
.access-phone-field:focus-within {
  border-color: #31343b;
  background: #000000;
}

.access-phone-prefix {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px 0 10px;
  border-right: 1px solid #31343b;
  background: transparent;
}

.access-country-flag {
  font-size: 16px;
  line-height: 1;
}

.access-phone-input {
  flex: 1 1 0;
  width: auto;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--heading);
  font-size: 14px;
  padding: 0 12px;
  outline: none;
  letter-spacing: 1.5px;
}

.access-country-code {
  width: 62px;
  border: 0;
  background: transparent;
  color: var(--heading);
  font-size: 13px;
  letter-spacing: 1.5px;
  padding: 0;
  outline: none;
  cursor: pointer;
}

.access-country-code option {
  background: #0f1114;
  color: var(--heading);
}

.access-phone-input::placeholder {
  color: #7f838e;
  font-size: 11px;
}

/* Keep browser autofill in dark theme (no white background). */
.access-input:-webkit-autofill,
.access-input:-webkit-autofill:hover,
.access-input:-webkit-autofill:focus,
.access-input:-webkit-autofill:active,
.access-phone-input:-webkit-autofill,
.access-phone-input:-webkit-autofill:hover,
.access-phone-input:-webkit-autofill:focus,
.access-phone-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--heading) !important;
  box-shadow: inset 0 0 0 1000px #000000 !important;
  -webkit-box-shadow: inset 0 0 0 1000px #000000 !important;
  border: 1px solid #31343b !important;
  caret-color: var(--heading) !important;
  transition: background-color 5000s ease-in-out 0s;
}

.access-feedback {
  min-height: 18px;
}

.access-feedback.is-error {
  color: var(--access-error);
}

.access-feedback.is-success {
  color: var(--access-success);
}

.access-modal-actions {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  gap: 14px;
}

.access-link-btn {
  border: 0;
  background: transparent;
  color: var(--heading);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-decoration: underline;
  padding: 0;
}

.access-link-btn:hover,
.access-link-btn:focus-visible {
  color: var(--content);
}

@media (max-width: 575px) {
  .access-country-code {
    width: 56px;
    font-size: 11px;
  }

  .access-country-flag {
    font-size: 14px;
  }

  .access-phone-input {
    font-size: 12px;
  }
}