/* e-simeasy - Global styles */
:root {
  --primary: #0F62FE;
  --primary-hover: #0353E9;
  --foreground: #0A0A0A;
  --muted: #71717A;
  --border: #E4E4E7;
  --bg: #FFFFFF;
}

body {
  font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--foreground);
  background: var(--bg);
}

h1, h2, h3, h4, h5, h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-family: 'Outfit', sans-serif;
  letter-spacing: -0.02em;
}

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

.eyebrow {
  font-family: ui-monospace, 'Courier New', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--primary);
  color: white;
  border-radius: 6px;
  font-size: 1.2rem;
  font-weight: bold;
}

.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

.lang-btn {
  display: inline-block;
  padding: 2px 8px;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--muted);
  text-decoration: none;
}
.lang-btn.active {
  background: var(--foreground);
  color: white;
  border-color: var(--foreground);
}

.hero-title {
  line-height: 1.02;
}

.grid-pattern {
  background-image:
    linear-gradient(to right, rgba(15,98,254,0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15,98,254,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
}

.bento-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  position: relative;
}

.country-tile {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
  color: var(--muted);
  transition: color .2s, border-color .2s;
}
.country-tile:hover { color: var(--primary); border-color: var(--primary); }

.feature-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.feature-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: 0 12px 32px -18px rgba(15,98,254,0.35);
}
.feature-icon { font-size: 2rem; }

.cta-band {
  background: var(--foreground);
  color: white;
  border-radius: 12px;
}

.site-footer {
  background: white;
}

.pill-btn {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 999px;
  border: 1px solid var(--border);
  text-decoration: none;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  transition: all .2s;
}
.pill-btn.active {
  background: var(--foreground);
  color: white;
  border-color: var(--foreground);
}
.pill-btn:hover { color: var(--foreground); }

.product-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: 0 12px 32px -18px rgba(15,98,254,0.35);
}

.payment-radio {
  cursor: pointer;
  transition: all .2s;
}
.payment-radio:hover { border-color: var(--muted); }

.success-check {
  width: 48px;
  height: 48px;
  background: #d1fae5;
  color: #059669;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
}

/* ---- Admin ---- */
.admin-body { background: #fafafa; }
.admin-layout {
  display: flex;
  min-height: 100vh;
}
.admin-sidebar {
  width: 260px;
  background: white;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
}
.admin-main {
  flex: 1;
  min-width: 0;
}
.admin-topbar {
  height: 60px;
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.side-link {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.9rem;
  margin-bottom: 2px;
  transition: background .15s, color .15s;
}
.side-link:hover { background: #f4f4f5; color: var(--foreground); }
.side-link.active {
  background: var(--primary);
  color: white;
}
.side-link.text-danger:hover { background: #fee2e2; color: #dc2626; }

.kpi-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}

@media (max-width: 768px) {
  .admin-sidebar { display: none; }
}

/* Table hover */
.table-hover tbody tr:hover { background: #fafafa; }

/* Product image fallback (when image_url missing or fails to load) */
.product-fallback {
  height: 180px;
  background: linear-gradient(135deg, #0F62FE 0%, #6366F1 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.product-fallback span { font-size: 3rem; line-height: 1; }
.product-fallback small { font-family: 'Outfit', sans-serif; letter-spacing: .08em; text-transform: uppercase; opacity: .9; font-weight: 500; }