/* =============================================
   CheapData Shop — Stylesheet
   ============================================= */

html, body {
  height: 100%;
  margin: 0;
}

*, *::before, *::after {
  font-family: 'DM Sans', sans-serif;
  box-sizing: border-box;
}

.mono {
  font-family: 'Space Mono', monospace;
}

/* ---- Plan Cards ---- */
.plan-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.plan-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}

/* ---- Tabs ---- */
.tab-active {
  border-bottom: 3px solid;
  font-weight: 700;
}

/* ---- Toast ---- */
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.toast-show {
  animation: slideUp 0.3s ease-out;
}

/* ---- Fade In (plan cards) ---- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in {
  animation: fadeIn 0.35s ease-out both;
}

/* ---- Inputs ---- */
input {
  outline: none;
}
input:focus {
  border-color: #22c55e !important;
}

/* ---- Scrollbar ---- */
::-webkit-scrollbar        { width: 4px; height: 4px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: #334155; border-radius: 2px; }