/*
 * Neon Wireframe Theme (ocean key)
 * Cyber-neon look inspired by modern UI showcases.
 */
:root {
  --bg-primary: #030712;
  --bg-secondary: #06101e;
  --bg-card: rgba(6, 16, 30, 0.74);
  --border: rgba(45, 212, 191, 0.35);
  --text-primary: #ecfeff;
  --text-secondary: #bbf7d0;
  --text-muted: #86efac;
  --primary: #2dd4bf;
  --primary-strong: #14b8a6;
  --accent: #67e8f9;
  --accent-dark: #22d3ee;
  --error: #fb7185;
  --error-light: rgba(251, 113, 133, 0.12);
  --success: #2dd4bf;
  --success-light: rgba(45, 212, 191, 0.14);
  --shadow: 0 20px 56px rgba(0, 0, 0, 0.56);
  --shadow-lg: 0 28px 78px rgba(0, 0, 0, 0.72);
}

body {
  background:
    linear-gradient(120deg, rgba(45, 212, 191, 0.14), transparent 38%),
    linear-gradient(300deg, rgba(103, 232, 249, 0.13), transparent 42%),
    radial-gradient(circle at 18% 16%, rgba(20, 184, 166, 0.22), transparent 34%),
    radial-gradient(circle at 82% 76%, rgba(34, 211, 238, 0.18), transparent 38%),
    #030712;
}

body::before {
  background:
    linear-gradient(rgba(45, 212, 191, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45, 212, 191, 0.08) 1px, transparent 1px);
  background-size: 34px 34px;
  opacity: 0.35;
}

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(45, 212, 191, 0.14) inset;
  backdrop-filter: blur(14px);
}

.card-header {
  background: linear-gradient(135deg, rgba(45, 212, 191, 0.96) 0%, rgba(103, 232, 249, 0.96) 100%);
  margin: -2rem -2rem 1.5rem -2rem;
  padding: 1.25rem 2rem;
  border-radius: 1.5rem 1.5rem 0 0;
  color: #032126;
}

.card-header h1 {
  color: #032126;
  -webkit-text-fill-color: #032126;
  background: none;
}

.card-header .subtitle {
  color: rgba(3, 33, 38, 0.84);
}

.info-banner {
  background: rgba(45, 212, 191, 0.14);
  border: 1px solid rgba(45, 212, 191, 0.4);
}

.info-banner svg {
  color: var(--primary);
}

.price-display {
  background: rgba(103, 232, 249, 0.14);
  border: 1px solid rgba(103, 232, 249, 0.38);
}

.price-value {
  color: var(--accent);
}

.form-input {
  border-color: rgba(45, 212, 191, 0.34);
  background: rgba(2, 6, 23, 0.65);
}

.form-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.2);
}

.control-number-card {
  background: var(--success-light);
  border: 1px solid rgba(45, 212, 191, 0.38);
}

.control-number-header svg,
.control-number-header h3,
.control-number-value {
  color: var(--primary);
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-strong) 44%, var(--accent) 100%);
  color: #032126;
  box-shadow: 0 14px 34px rgba(45, 212, 191, 0.4);
}

.btn-primary:hover:not(:disabled) {
  box-shadow: 0 18px 42px rgba(45, 212, 191, 0.52);
}

.package-card {
  background: rgba(2, 6, 23, 0.58);
}

.package-card:hover {
  border-color: var(--primary);
}

.package-card.selected {
  border-color: var(--accent);
  background: rgba(103, 232, 249, 0.12);
  box-shadow: 0 0 0 3px rgba(103, 232, 249, 0.18);
}

.package-header .badge {
  background: var(--primary);
  color: #032126;
}

.btn-select-package {
  background: var(--primary);
  color: #032126;
}

.btn-select-package:hover {
  background: var(--primary-strong);
}

.package-card.selected .btn-select-package {
  background: var(--accent);
  color: #032126;
}

.package-card.selected .btn-select-package:hover {
  background: var(--accent-dark);
}

.message.success {
  background: var(--success-light);
  color: var(--success);
  border: 1px solid rgba(45, 212, 191, 0.38);
}

.message.error {
  background: var(--error-light);
  color: var(--error);
  border: 1px solid rgba(251, 113, 133, 0.34);
}