/* ============================================================
   KevJoy — custom styles
   Restrained, solid-surface design system layered over Tailwind.
   ============================================================ */

:root {
  --primary: 37 99 235;      /* deep blue #2563eb */
  --accent: 234 88 12;       /* deep orange #ea580c */
  --ink: 15 23 42;
  --border: 226 232 240;     /* slate-200 */
  --card-bg: 255 255 255;
  --shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04), 0 10px 28px -16px rgba(15, 23, 42, 0.14);
  --shadow-pop: 0 8px 30px -10px rgba(15, 23, 42, 0.16);
}

.dark {
  --ink: 241 245 249;
  --border: 51 65 85;        /* slate-700 */
  --card-bg: 15 23 42;       /* slate-900 */
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px -18px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 8px 30px -12px rgba(0, 0, 0, 0.6);
}

* { -webkit-tap-highlight-color: transparent; }

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: rgb(var(--ink));
  background: #f7f8fa;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.dark body {
  background: #0b1220;
  color: rgb(var(--ink));
}

/* ---------- Ambient page background ---------- */
.site-gradient {
  background: #f7f8fa;
}
.dark .site-gradient {
  background: #0b1220;
}

/* ---------- Surfaces ---------- */
.glass {
  background: rgb(var(--card-bg));
  border: 1px solid rgb(var(--border));
  box-shadow: var(--shadow-soft);
}
.glass-strong {
  background: rgb(var(--card-bg));
  border: 1px solid rgb(var(--border));
  box-shadow: var(--shadow-pop);
}

/* ---------- Brand text ---------- */
.grad-text {
  color: rgb(37 99 235);
}
.dark .grad-text {
  color: rgb(96 165 250);
}

/* ---------- Buttons ---------- */
.btn-gradient {
  background-color: #2563eb;
  color: #fff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.35);
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.btn-gradient:hover {
  background-color: #1d4ed8;
  box-shadow: 0 4px 14px -6px rgba(37, 99, 235, 0.5);
}
.btn-accent {
  background-color: #ea580c;
  color: #fff;
  box-shadow: 0 1px 2px rgba(234, 88, 12, 0.3);
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}
.btn-accent:hover {
  background-color: #c2410c;
  box-shadow: 0 4px 14px -6px rgba(234, 88, 12, 0.5);
}

/* ---------- Cards ---------- */
.card {
  background: rgb(var(--card-bg));
  border: 1px solid rgb(var(--border));
  border-radius: 1rem;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover {
  box-shadow: var(--shadow-pop);
  border-color: rgb(203 213 225 / 0.8);
}
.dark .card:hover {
  border-color: rgb(71 85 105 / 0.9);
}
.card-flat {
  background: rgb(var(--card-bg));
  border: 1px solid rgb(var(--border));
  border-radius: 1rem;
  box-shadow: var(--shadow-soft);
}

/* ---------- Inputs ---------- */
.input {
  width: 100%;
  border-radius: 0.6rem;
  border: 1px solid rgb(203 213 225 / 0.9);
  background: #fff;
  padding: 0.75rem 1rem;
  font-size: 16px;
  color: rgb(var(--ink));
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
}
.dark .input {
  background: rgb(30 41 59 / 0.9);
  border-color: rgb(71 85 105 / 0.6);
}
.input:focus {
  border-color: rgb(37 99 235 / 0.8);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
select.input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.4rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.6rem;
  padding: 0.7rem 1.35rem;
  font-weight: 600;
  font-size: 0.92rem;
  transition: all 0.18s ease;
  cursor: pointer;
  border: none;
}
.btn-lg { padding: 0.9rem 1.8rem; font-size: 1rem; }
.btn-ghost {
  background: transparent;
  border: 1px solid rgb(148 163 184 / 0.6);
  color: rgb(var(--ink));
}
.btn-ghost:hover { border-color: rgb(37 99 235 / 0.7); color: rgb(37 99 235); background: rgb(37 99 235 / 0.04); }
.btn-soft {
  background: rgb(37 99 235 / 0.1);
  color: rgb(37 99 235);
}
.dark .btn-soft { color: rgb(96 165 250); background: rgb(37 99 235 / 0.18); }
.btn-soft:hover { background: rgb(37 99 235 / 0.18); }

/* ---------- Badges & chips ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.badge-preorder { background: rgb(249 115 22 / 0.12); color: #ea580c; }
.dark .badge-preorder { background: rgb(249 115 22 / 0.2); color: #fb923c; }
.badge-ready { background: rgb(16 185 129 / 0.12); color: #059669; }
.dark .badge-ready { background: rgb(16 185 129 / 0.2); color: #34d399; }
.badge-new { background: rgb(37 99 235 / 0.1); color: #2563eb; }
.dark .badge-new { background: rgb(37 99 235 / 0.2); color: #93c5fd; }
.badge-deal { background: rgb(239 68 68 / 0.1); color: #dc2626; }
.dark .badge-deal { background: rgb(239 68 68 / 0.2); color: #f87171; }
.badge-available { background: #059669; color: #fff; animation: badge-pulse 2s infinite; }
.dark .badge-available { background: #10b981; color: #064e3b; }
@keyframes badge-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .85; }
}

/* ---------- Product image ---------- */
.product-media {
  background: #fff;
  overflow: hidden;
}
.dark .product-media { background: #111a2e; }

/* ---------- Nav ---------- */
.nav-blur {
  background: rgba(255, 255, 255, 0.96);
  transition: box-shadow 0.25s ease;
}
.dark .nav-blur {
  background: rgba(11, 18, 32, 0.96);
}

/* ---------- Hero ---------- */
.hero-orb {
  display: none;
}
@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(40px, -30px) scale(1.08); }
  66% { transform: translate(-30px, 24px) scale(0.95); }
}

/* Floating cards */
.float-card {
  animation: none;
}
.float-card.delay-1 { animation-delay: 0s; }
.float-card.delay-2 { animation-delay: 0s; }
.float-card.delay-3 { animation-delay: 0s; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}
.reveal.in { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0s; }
.reveal-delay-2 { transition-delay: 0s; }
.reveal-delay-3 { transition-delay: 0s; }
.reveal-delay-4 { transition-delay: 0s; }

@media (prefers-reduced-motion: reduce) {
  .float-card, .hero-orb { animation: none; }
}

/* ---------- Loader ---------- */
.loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f7f8fa;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.dark .loader-overlay { background: #0b1220; }
.loader-overlay.done { opacity: 0; visibility: hidden; }
.loader-mark {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 1.3rem;
}
.loader-logo {
  width: 72px;
  height: 72px;
  border-radius: 14px;
  object-fit: cover;
  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.25);
}
.loader-bar {
  margin-top: 1.2rem;
  width: 120px;
  height: 3px;
  border-radius: 999px;
  background: rgb(37 99 235 / 0.18);
  overflow: hidden;
}
.loader-bar::after {
  content: "";
  display: block;
  width: 45%;
  height: 100%;
  border-radius: 999px;
  background: #2563eb;
  animation: loader-slide 1.1s ease-in-out infinite;
}
@keyframes loader-slide {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}

/* ---------- Search suggestions ---------- */
.search-suggest {
  animation: suggest-pop 0.18s ease;
}
@keyframes suggest-pop {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Timeline (tracking & how it works) ---------- */
.timeline-dot { transition: all 0.3s ease; }
.timeline-line { transition: background 0.5s ease; }

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; }
.marquee-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  animation: marquee 28s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Page transitions ---------- */
@keyframes pageIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.page-enter { animation: pageIn 0.35s ease both; }

/* ---------- Star rating ---------- */
.stars { color: #f59e0b; letter-spacing: 2px; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgb(100 116 139 / 0.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgb(100 116 139 / 0.6); }

/* ---------- Admin helpers ---------- */
.admin-sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border-radius: 0.7rem;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: rgb(100 116 139);
  transition: all 0.18s ease;
}
.dark .admin-sidebar-link { color: rgb(148 163 184); }
.admin-sidebar-link:hover { background: rgb(37 99 235 / 0.08); color: rgb(37 99 235); }
.admin-sidebar-link.active {
  background: rgb(37 99 235 / 0.12);
  color: rgb(37 99 235);
  font-weight: 600;
}
.dark .admin-sidebar-link.active { color: rgb(96 165 250); }

.table-th {
  padding: 0.7rem 1rem;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(100 116 139);
}
.table-td {
  padding: 0.85rem 1rem;
  font-size: 0.88rem;
  border-top: 1px solid rgb(226 232 240 / 0.7);
}
.dark .table-td { border-top-color: rgb(51 65 85 / 0.5); }

/* ---------- Pagination buttons ---------- */
.page-btn {
  min-width: 2.4rem;
  height: 2.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.6rem;
  font-weight: 600;
  font-size: 0.9rem;
  background: #fff;
  border: 1px solid rgb(226 232 240 / 0.9);
  color: rgb(var(--ink));
  transition: all 0.18s ease;
}
.dark .page-btn { background: rgb(30 41 59 / 0.6); border-color: rgb(51 65 85 / 0.5); }
.page-btn:hover { border-color: rgb(37 99 235 / 0.6); color: rgb(37 99 235); }
.page-btn.active {
  background: #2563eb;
  color: #fff;
  border-color: transparent;
}
.page-btn.disabled, .page-btn.dots { opacity: 0.5; pointer-events: none; }

/* ---------- Pagination nav (new) ---------- */
.pagination-btn {
  min-width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  font-weight: 600;
  font-size: 0.8125rem;
  background: #fff;
  border: 1px solid rgb(226 232 240 / 0.9);
  color: rgb(71 85 105);
  transition: all 0.15s ease;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
}
.dark .pagination-btn { background: rgb(30 41 59 / 0.6); border-color: rgb(51 65 85 / 0.5); color: rgb(203 213 225); }
.pagination-btn:hover:not(.pagination-btn-active):not(.pagination-btn-disabled) {
  border-color: rgb(37 99 235 / 0.5);
  color: rgb(37 99 235);
  background: rgb(37 99 235 / 0.04);
}
.dark .pagination-btn:hover:not(.pagination-btn-active):not(.pagination-btn-disabled) {
  border-color: rgb(96 165 250 / 0.5);
  color: rgb(96 165 250);
  background: rgb(96 165 250 / 0.08);
}
.pagination-btn-active {
  background: #2563eb;
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 3px rgb(37 99 235 / 0.3);
  cursor: default;
}
.pagination-btn-disabled {
  opacity: 0.35;
  pointer-events: none;
  cursor: default;
}
.pagination-dots {
  min-width: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgb(148 163 184);
  font-weight: 600;
  font-size: 0.875rem;
  user-select: none;
}

/* ---------- Misc ---------- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Prevent content overflow on mobile */
.break-words { overflow-wrap: break-word; word-break: break-word; }
[x-cloak] { display: none !important; }

.shimmer {
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -80% 0; }
}

.zoom-hover:hover .zoom-target { transform: scale(1.06); }
.zoom-target { transition: transform 0.4s ease; }

input[type="checkbox"].switch {
  appearance: none;
  width: 2.6rem;
  height: 1.5rem;
  border-radius: 999px;
  background: rgb(203 213 225);
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}
.dark input[type="checkbox"].switch { background: rgb(51 65 85); }
input[type="checkbox"].switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}
input[type="checkbox"].switch:checked { background: #2563eb; }
input[type="checkbox"].switch:checked::after { transform: translateX(1.1rem); }

/* ============================================================
   Premium bento hero
   ============================================================ */
.hero-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas:
    "main  main  main  main  main  main  main  route route route route route"
    "main  main  main  main  main  main  main  trust trust trust live  live"
    "cats  cats  cats  cats  trend trend trend trend deal  deal  ai    ai";
  gap: 1rem;
  min-height: calc(100svh - 8.5rem);
}
.b-m { grid-area: main; }
.b-r { grid-area: route; }
.b-t { grid-area: trust; }
.b-l { grid-area: live; }
.b-c { grid-area: cats; }
.b-tr { grid-area: trend; }
.b-d { grid-area: deal; }
.b-a { grid-area: ai; }

.bento-card {
  position: relative;
  border-radius: 1.5rem;
  border: 1px solid rgb(226 232 240 / 0.9);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 18px 45px -24px rgba(15, 23, 42, 0.25);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.dark .bento-card {
  background: rgb(15 23 42);
  border-color: rgb(51 65 85 / 0.9);
  box-shadow: 0 18px 45px -24px rgba(0, 0, 0, 0.7);
}
.bento-card:hover {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 26px 60px -28px rgba(15, 23, 42, 0.35);
}
.dark .bento-card:hover { box-shadow: 0 26px 60px -28px rgba(0, 0, 0, 0.8); }

.bento-hover { transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; }
.bento-hover:hover {
  transform: translateY(-4px);
  border-color: rgb(147 197 253);
  box-shadow: 0 26px 60px -28px rgba(37, 99, 235, 0.35);
}

.bento-orb-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.bento-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(70px);
  pointer-events: none;
}

/* main card */
.bento-main {
  display: flex;
  flex-direction: column;
  overflow: visible;
  background:
    radial-gradient(1100px 560px at -12% -25%, rgb(219 234 254 / 0.85), transparent 60%),
    radial-gradient(850px 480px at 112% 118%, rgb(255 237 213 / 0.95), transparent 55%),
    #fff;
}
.dark .bento-main {
  background:
    radial-gradient(1100px 560px at -12% -25%, rgb(30 58 138 / 0.55), transparent 60%),
    radial-gradient(850px 480px at 112% 118%, rgb(124 45 18 / 0.45), transparent 55%),
    rgb(15 23 42);
}

/* route card */
.route-map {
  background-image: radial-gradient(circle, rgb(148 163 184 / 0.3) 1px, transparent 1.2px);
  background-size: 18px 18px;
}
.dark .route-map { background-image: radial-gradient(circle, rgb(100 116 139 / 0.3) 1px, transparent 1.2px); }
.route-line {
  fill: none;
  stroke: url(#routeGrad);
  stroke-width: 3;
  stroke-linecap: round;
}
.node-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: node-pulse 2.4s ease-in-out infinite;
}
@keyframes node-pulse {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.05; transform: scale(1.7); }
}
.pkg-dot { filter: drop-shadow(0 0 6px rgba(234, 88, 12, 0.85)); }
.route-label { fill: rgb(100 116 139); }
.dark .route-label { fill: rgb(148 163 184); }

/* categories */
.cat-dot { transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease; }
a:hover .cat-dot { transform: scale(1.12); box-shadow: 0 12px 24px -10px rgba(37, 99, 235, 0.45); border-color: rgb(147 197 253); }

/* trending mini cards */
.trend-scroll {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding-bottom: 0.25rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.trend-scroll > * { scroll-snap-align: start; }
.mini-card {
  width: 7.5rem;
  flex-shrink: 0;
  border-radius: 0.9rem;
  border: 1px solid rgb(226 232 240 / 0.9);
  background: #fff;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.dark .mini-card { background: rgb(15 23 42); border-color: rgb(51 65 85 / 0.9); }
.mini-card:hover {
  transform: translateY(-5px);
  border-color: rgb(191 219 254);
  box-shadow: 0 18px 40px -20px rgba(37, 99, 235, 0.4);
}
.mini-card img { transition: transform 0.4s ease; }
.mini-card:hover img { transform: scale(1.06); }

/* flash countdown */
.cd-tile {
  min-width: 2.6rem;
  padding: 0.5rem 0.35rem;
  border-radius: 0.8rem;
  background: rgb(255 247 237);
  border: 1px solid rgb(254 215 170 / 0.9);
  text-align: center;
  color: #c2410c;
}
.dark .cd-tile { background: rgb(67 20 7 / 0.6); border-color: rgb(124 45 18 / 0.5); color: #fdba74; }
.cd-tile b {
  display: block;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.cd-tile i {
  display: block;
  font-style: normal;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.cd-tile.tick b { animation: cd-pop 0.26s ease; }
@keyframes cd-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* AI floating card */
.ai-card-wrap { z-index: 20; }
.bento-float { animation: ai-float 6s ease-in-out infinite; }
.ai-card {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  border-radius: 1.5rem;
  border: 1px solid rgb(191 219 254 / 0.9);
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 26px 60px -28px rgba(37, 99, 235, 0.45);
  animation: ai-float 6s ease-in-out infinite;
}
.dark .ai-card { background: rgba(30, 41, 59, 0.82); border-color: rgb(59 130 246 / 0.4); }
@keyframes ai-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* hero entrance safe-state */
[data-bento] { will-change: transform, opacity; }

@media (max-width: 1023px) {
  .hero-bento {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-height: 0;
  }
  .hero-bento > * { width: 100%; }
  .ai-card { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .node-halo, .ai-card, .cd-tile.tick b { animation: none; }
  .trend-scroll { scroll-behavior: auto; }
}