/* ======================================
    CATTLE PREFIX PAGE
====================================== */

.cattle-prefix-page {
  width: 100%;

  display: flex;

  flex-direction: column;

  gap: 18px;
}

/* ======================================
   SHARED WIDGET STYLE
====================================== */

.cattle-prefix-page .widget {
  background: linear-gradient(
    145deg,
    rgba(15, 23, 42, 0.96),
    rgba(2, 6, 23, 0.96)
  );

  border: 1px solid rgba(148, 163, 184, 0.18);

  border-radius: 16px;

  padding: 20px;

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.35);
}

/* ======================================
   HEADER
====================================== */

.cattle-prefix-header-widget h2 {
  margin: 0 0 10px 0;

  color: #ffffff;

  font-size: 28px;

  font-weight: 800;
}

.cattle-prefix-header-widget p {
  margin: 0;

  color: #94a3b8;

  font-size: 15px;
}

/* ======================================
   FORM WIDGET
====================================== */

.cattle-prefix-form-widget h3 {
  margin-bottom: 18px;

  color: #ffffff;

  font-size: 18px;
}

.prefix-form {
  display: flex;

  flex-direction: column;

  gap: 15px;
}

.prefix-form label {
  color: #cbd5e1;

  font-size: 14px;

  font-weight: 600;
}

.prefix-form input {
  width: 100%;

  padding: 14px;

  background: #020617;

  border: 1px solid #334155;

  border-radius: 10px;

  color: white;

  font-size: 16px;

  outline: none;
}

.prefix-form input:focus {
  border-color: #2563eb;

  box-shadow: 0 0 12px rgba(37, 99, 235, 0.35);
}

.prefix-form button {
  padding: 14px;

  border: none;

  border-radius: 10px;

  background: linear-gradient(135deg, #2563eb, #1d4ed8);

  color: white;

  font-weight: 700;

  font-size: 15px;

  cursor: pointer;

  transition: 0.2s ease;
}

.prefix-form button:hover {
  transform: translateY(-2px);

  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}

/* ======================================
   ERROR
====================================== */

.error {
  background: rgba(220, 38, 38, 0.15);

  border: 1px solid rgba(248, 113, 113, 0.35);

  color: #fca5a5;

  padding: 12px;

  border-radius: 10px;

  margin-bottom: 15px;
}

/* ======================================
   INFO WIDGET
====================================== */

.cattle-prefix-info-widget h3 {
  color: white;

  margin-bottom: 15px;
}

.info-content {
  color: #cbd5e1;

  line-height: 1.7;
}

.info-content p {
  margin: 8px 0;
}

/* ======================================
   MOBILE
====================================== */

@media (max-width: 700px) {
  .cattle-prefix-header-widget h2 {
    font-size: 22px;
  }

  .cattle-prefix-page .widget {
    padding: 16px;
  }
}