/* =========================================================
   UI POLISH OVERRIDE CSS
   Place this file AFTER vendor CSS
   ========================================================= */

/* ---------- Design Tokens ---------- */
:root {
  --brand: #4f46e5;
  --brand-hover: #4338ca;
  --brand-soft: #eef2ff;

  --success: #16a34a;
  --danger: #dc2626;
  --warning: #f59e0b;

  --bg: #ffffff;
  --surface: #f9fafb;
  --text: #1f2937;
  --text-muted: #6b7280;

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* ---------- Base Overrides ---------- */
.base-color {
  color: var(--brand) !important;
}

/* ---------- Copy Animation ---------- */
.copyInput {
  color: var(--brand);
}

.copied::after {
  background-color: var(--brand);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.35);
}

/* ---------- Cookies Card ---------- */
.cookies-card {
  background: var(--bg);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  border: 1px solid #e5e7eb;
}

.cookies-card.hide {
  bottom: -500px !important;
}

.cookies-card__icon {
  background: var(--brand-soft);
  color: var(--brand);
}

.cookies-card__content {
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---------- Cookie Buttons ---------- */
.cookies-btn {
  background: var(--brand);
  color: #ffffff;
  font-weight: 600;
  padding: 10px 28px;
  border-radius: 999px;
  transition: all 0.25s ease;
  text-decoration: none;
}

.cookies-btn:hover {
  background: var(--brand-hover);
  color: #ffffff;
  transform: translateY(-1px);
}

.cookies-btn.secondary {
  background: #e5e7eb;
  color: var(--text);
}

.cookies-btn.secondary:hover {
  background: #d1d5db;
}

/* ---------- Hover Input Popup ---------- */
.hover-input-popup .input-popup {
  background: var(--bg);
  color: var(--text);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  border: 1px solid #e5e7eb;
}

.input-popup::after {
  border-color: transparent transparent var(--bg) transparent;
}

.input-popup p {
  color: var(--text-muted);
}

.input-popup p.success::before {
  color: var(--success);
}

.input-popup p.error::before {
  color: var(--danger);
}

/* ---------- Buttons & Spinner ---------- */
button {
  transition: all 0.2s ease;
}

button:active {
  transform: scale(0.98);
}

button .spinner-border {
  opacity: 0.7;
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
  .cookies-card {
    width: 100%;
    left: 0;
    bottom: 0;
    padding: 16px;
    border-radius: 16px 16px 0 0;
  }
}