/* ======================================
CATTLEMANIA MOVE CATTLE PAGE CSS
====================================== */

/* ======================================
BASE
====================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body.move-cattle-page {
  background: #0b132b;

  color: white;

  font-family: "Segoe UI", Tahoma, sans-serif;

  min-height: 100vh;
}

/* ======================================
MAIN CONTENT
====================================== */

.main-content {
  padding: 25px;
}

/* ======================================
WIDGET SYSTEM
====================================== */

.widget {
  width: 100%;

  background: #111827;

  border: 1px solid rgba(255, 255, 255, 0.08);

  border-radius: 14px;

  overflow: hidden;

  margin-bottom: 20px;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.widget-header {
  background: #0f172a;

  padding: 18px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.widget-header h1,
.widget-header h2,
.widget-header h3 {
  color: white;

  margin: 0;
}

.widget-body {
  padding: 22px;
}

/* ======================================
TEXT
====================================== */

.widget-body p {
  color: #cbd5e1;

  margin-bottom: 12px;

  line-height: 1.6;
}

/* ======================================
FORMS
====================================== */

label {
  display: block;

  color: #38bdf8;

  font-weight: 700;

  margin-bottom: 8px;
}

select,
input,
textarea {
  width: 100%;

  padding: 13px;

  background: #020617;

  color: white;

  border: 1px solid rgba(255, 255, 255, 0.12);

  border-radius: 10px;

  margin-bottom: 15px;
}

select:focus,
input:focus,
textarea:focus {
  outline: none;

  border-color: #38bdf8;
}

/* ======================================
BUTTON SYSTEM
====================================== */

button,
input[type="submit"],
input[type="button"],
.btn {
  display: inline-flex;

  justify-content: center;

  align-items: center;

  width: 100%;

  padding: 14px 20px;

  background: linear-gradient(135deg, #1e90ff, #38bdf8);

  color: white !important;

  border: none !important;

  border-radius: 10px;

  font-size: 15px;

  font-weight: 800;

  cursor: pointer;

  transition: 0.25s;

  text-decoration: none;

  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);

  appearance: none;

  -webkit-appearance: none;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover {
  transform: translateY(-3px);
}

/* ======================================
MOVE ACTION BUTTON
====================================== */

input[type="submit"].btn-move,
button.btn-move,
.btn.btn-move,
.btn-move {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;

  background-color: #dc2626 !important;

  color: #ffffff !important;

  border: none !important;

  appearance: none !important;

  -webkit-appearance: none !important;
}

input[type="submit"].btn-move:hover,
button.btn-move:hover,
.btn.btn-move:hover,
.btn-move:hover {
  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}

/* ======================================
CATTLE OPTIONS
====================================== */

.cattle-option {
  background: #0f172a;

  padding: 15px;

  border-radius: 10px;

  border: 1px solid rgba(255, 255, 255, 0.08);

  margin-bottom: 10px;
}

.cattle-option:hover {
  border-color: #38bdf8;
}

/* ======================================
ALERTS
====================================== */

.alert {
  background: #1f2937;

  color: #cbd5e1;

  padding: 15px;

  border-radius: 10px;

  text-align: center;

  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ======================================
GRID
====================================== */

.widget-grid {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 20px;
}

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

@media (max-width: 900px) {
  .main-content {
    padding: 15px;
  }

  .widget-body {
    padding: 15px;
  }
}

@media (max-width: 600px) {
  .main-content {
    padding: 10px;
  }

  .widget-header {
    padding: 15px;
  }

  button,
  input[type="submit"],
  input[type="button"],
  .btn {
    font-size: 14px;

    padding: 12px;
  }
}