/**
 * Modern login theme for Cabrito restaurant POS
 * Additive — keeps existing login markup/classes intact.
 */

:root {
  --login-primary: #7367f0;
  --login-primary-2: #8d5df3;
  --login-accent: #8b5cf6;
  --login-ink: #2e3247;
  --login-muted: #6e6b7b;
  --login-surface: rgba(255, 255, 255, 0.92);
  --login-radius: 20px;
  --login-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: var(--login-font) !important;
  color: var(--login-ink) !important;
  background:
    radial-gradient(1000px 520px at 10% -10%, rgba(141, 93, 243, 0.22), transparent 55%),
    radial-gradient(800px 480px at 100% 0%, rgba(139, 92, 246, 0.18), transparent 50%),
    linear-gradient(145deg, #2e3247 0%, #1f2340 42%, #3a3f63 100%) !important;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 75%);
  z-index: 0;
}

.container {
  position: relative;
  z-index: 1;
  max-width: 440px !important;
  width: calc(100% - 32px) !important;
  margin: 0 auto 48px !important;
  padding-top: 12px;
}

.pen-title {
  padding: 28px 0 12px !important;
  text-align: center;
}

.pen-title img {
  max-height: 72px;
  max-width: 220px;
  object-fit: contain;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.35));
}

.btn_login_pin_table {
  width: 100%;
  margin: 0 auto 14px;
  border-collapse: separate;
}

.btn_login_pin_table td {
  text-align: center;
  padding: 0;
}

.btn_login_pin_type {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 4px 8px !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  transition: all 0.22s ease !important;
  backdrop-filter: blur(8px);
}

.btn_login_pin_type:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.14) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}

.btn_login_pin_type.active_login_btn {
  background: linear-gradient(135deg, var(--login-primary), var(--login-primary-2)) !important;
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 24px rgba(115, 103, 240, 0.4);
}

/* Soften decorative ghost card behind main login card */
.container > .card:first-of-type {
  background: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.container .card {
  position: relative !important;
  background: var(--login-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  border-radius: var(--login-radius) !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.35),
    0 1px 0 rgba(255, 255, 255, 0.5) inset !important;
  padding: 28px 28px 24px !important;
  margin: 0 auto !important;
  width: 100% !important;
  backdrop-filter: blur(16px);
  overflow: hidden;
}

.container .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--login-primary), var(--login-accent), #a78bfa);
}

.container .card.alt {
  background: linear-gradient(160deg, #7367f0 0%, #6254ee 100%) !important;
  color: #fff !important;
  border: 0 !important;
}

.container .card.alt .title,
.container .card.alt h1.title {
  color: #fff !important;
}

.container .card .title,
.container .card h1.title {
  font-size: 1.55rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.03em !important;
  color: var(--login-ink) !important;
  text-align: center !important;
  margin: 8px 0 22px !important;
}

.input-container {
  position: relative;
  margin-bottom: 18px !important;
}

.input-container input {
  width: 100% !important;
  height: 48px !important;
  border: 1px solid rgba(28, 25, 23, 0.12) !important;
  border-radius: 12px !important;
  background: #fff !important;
  padding: 16px 14px 6px !important;
  font-size: 15px !important;
  color: var(--login-ink) !important;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.input-container input:focus {
  border-color: var(--login-primary) !important;
  box-shadow: 0 0 0 3px rgba(115, 103, 240, 0.14) !important;
  outline: none !important;
}

.input-container label {
  color: var(--login-muted) !important;
  font-weight: 500 !important;
  left: 14px !important;
  pointer-events: none;
}

.input-container .bar,
.input-container .bar::before,
.input-container .bar::after {
  display: none !important;
}

.button-container {
  margin-top: 8px;
}

.button-container button,
.button-container .submit_login,
button.submit_login {
  width: 100% !important;
  border: 0 !important;
  border-radius: 12px !important;
  min-height: 48px !important;
  background: linear-gradient(135deg, var(--login-primary) 0%, var(--login-primary-2) 100%) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.02em;
  box-shadow: 0 12px 28px rgba(115, 103, 240, 0.35) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  cursor: pointer;
}

.button-container button:hover,
.button-container .submit_login:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 32px rgba(115, 103, 240, 0.42) !important;
}

.button-container button span {
  color: inherit !important;
}

.footer,
.footer.div_2 {
  text-align: center !important;
  margin-top: 18px !important;
}

.footer a {
  color: var(--login-primary) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  font-size: 13px !important;
}

.footer a:hover {
  text-decoration: underline !important;
}

.red_error,
.green_error {
  border-radius: 10px !important;
  padding: 10px 12px !important;
  margin: 0 0 14px !important;
  font-size: 13px !important;
  font-weight: 500;
}

.red_error {
  background: rgba(220, 38, 38, 0.1) !important;
  color: #b91c1c !important;
  border: 1px solid rgba(220, 38, 38, 0.18);
}

.green_error {
  background: rgba(21, 128, 61, 0.1) !important;
  color: #166534 !important;
  border: 1px solid rgba(21, 128, 61, 0.18);
}

/* PIN login area */
#loginpin,
.div_1 {
  margin-bottom: 12px;
}

.pincode-input-container input,
.jquery-pinlogin input,
input.pinlogin-field {
  border-radius: 10px !important;
  border-color: rgba(28, 25, 23, 0.12) !important;
}

/* Hide decorative floating buttons if present */
#codepen,
#portfolio {
  display: none !important;
}

@media (max-width: 480px) {
  .container .card {
    padding: 22px 18px 20px !important;
    border-radius: 16px !important;
  }

  .btn_login_pin_type {
    width: calc(50% - 10px);
    font-size: 12px !important;
    padding: 9px 8px !important;
  }
}