/* ============================================================
   VibeKrave — Components (Phase 1 seed)
   Shared, token-driven UI pieces. Page CSS composes these;
   it does not restyle them. Migration to these classes happens
   route-by-route in Phase 2.
   ============================================================ */

/* --- Buttons --- */
.vk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vk-space-2);
  min-height: 44px; /* touch target */
  padding: 0 var(--vk-space-5);
  border: 1px solid transparent;
  border-radius: var(--vk-radius-pill);
  font-family: var(--vk-font-body);
  font-weight: 700;
  font-size: var(--vk-text-md);
  cursor: pointer;
  transition: transform var(--vk-fast) var(--vk-ease), filter var(--vk-fast) var(--vk-ease);
}
.vk-btn:active { transform: scale(0.97); }
.vk-btn--primary { background: var(--vk-green); color: var(--vk-ink); }
.vk-btn--secondary { background: var(--vk-surface-raised); color: var(--vk-text); border-color: var(--vk-border); }
.vk-btn--ghost { background: transparent; color: var(--vk-text); border-color: var(--vk-border); }
.vk-btn--danger { background: var(--vk-danger); color: var(--vk-ink); }
.vk-btn--block { width: 100%; }

/* --- Cards --- */
.vk-card {
  background: var(--vk-surface);
  border: 1px solid var(--vk-border);
  border-radius: var(--vk-radius-lg);
  padding: var(--vk-space-4);
}
.vk-card--raised { background: var(--vk-surface-raised); }

/* --- Chips --- */
.vk-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--vk-space-1);
  min-height: 32px;
  padding: 0 var(--vk-space-3);
  border-radius: var(--vk-radius-pill);
  border: 1px solid var(--vk-border);
  background: var(--vk-surface-raised);
  color: var(--vk-muted);
  font-size: var(--vk-text-sm);
  font-weight: var(--vk-weight-label);
}
.vk-chip.is-active {
  background: var(--vk-green-soft);
  border-color: var(--vk-green);
  color: var(--vk-green);
}

/* --- Inputs --- */
.vk-input {
  width: 100%;
  min-height: 48px;
  padding: 0 var(--vk-space-4);
  border-radius: var(--vk-radius-md);
  border: 1px solid var(--vk-border);
  background: var(--vk-surface-raised);
  color: var(--vk-text);
  font-size: var(--vk-text-md);
}
.vk-input::placeholder { color: var(--vk-muted); }

/* --- Status badges (order lifecycle) --- */
.vk-status {
  display: inline-flex;
  align-items: center;
  gap: var(--vk-space-1);
  padding: 2px var(--vk-space-3);
  border-radius: var(--vk-radius-pill);
  font-size: var(--vk-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.vk-status--pending   { background: var(--vk-gold-soft);   color: var(--vk-gold); }
.vk-status--active    { background: var(--vk-cyan-soft);   color: var(--vk-cyan); }
.vk-status--delivered { background: var(--vk-green-soft);  color: var(--vk-green); }
.vk-status--cancelled { background: var(--vk-danger-soft); color: var(--vk-danger); }

/* --- App header (vk-app-header-component) ---
   Canonical page header: icon | gradient wordmark + tagline | cart.
   Identical markup and rendering on every customer route. */
.vk-home-header {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  gap: var(--vk-space-3);
  margin-bottom: 18px;
}

.vk-home-icon {
  width: 46px;
  height: 46px;
  border: 1px solid var(--vk-border);
  border-radius: 18px;
  background: var(--vk-surface);
  color: var(--vk-text);
  display: grid;
  place-items: center;
  text-decoration: none;
  font-size: 1.25rem;
  position: relative;
  cursor: pointer;
}

.vk-home-logo-text {
  text-align: center;
  font-family: var(--vk-font-display);
  font-size: 1.72rem;
  font-weight: var(--vk-weight-promo);
  line-height: 0.86;
  text-decoration: none;
  background: linear-gradient(90deg, var(--vk-green), var(--vk-cyan), var(--vk-purple), var(--vk-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.vk-home-logo-text span {
  display: block;
  margin-top: 3px;
  font-size: 0.76rem;
  background: linear-gradient(90deg, var(--vk-gold), var(--vk-pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Pages whose header sits directly in <body> (no padded container)
   get container-equivalent spacing. */
body.vk-app-explore-body .vk-home-header {
  width: min(100%, 520px);
  margin: 0 auto 6px;
  padding: 14px 16px 0;
}

/* --- App header variants (vk-app-header-variants) --- */

/* Section: page title rendered in the home wordmark style, no tagline */
.vk-app-header--section .vk-app-header-title {
  font-size: 1.5rem;
  line-height: 1;
}

/* Flow: calm plain title, back affordance on the left */
.vk-app-header-title.is-plain {
  text-align: center;
  font-family: var(--vk-font-display);
  font-size: 1.2rem;
  font-weight: var(--vk-weight-heading);
  line-height: 1.1;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--vk-text);
}

.vk-app-header--flow .vk-home-icon[aria-label="Back"] {
  font-size: 1.7rem;
  line-height: 1;
  padding-bottom: 3px;
}

/* vk-clean-phase2-home-fixes */

.vk-header-home-logo {
  overflow: hidden;
}

.vk-header-home-logo img {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.vk-header-cart,
#vkHeaderCartBtn {
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  overflow: visible !important;
  font-size: 0 !important;
}

.vk-header-cart::before,
#vkHeaderCartBtn::before {
  content: none !important;
  display: none !important;
}

.vk-header-cart-icon {
  display: block;
  font-size: 1.15rem;
  line-height: 1;
}

.vk-home-rest-image {
  position: relative;
}

.vk-home-featured-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(255, 212, 59, 0.55);
  border-radius: 999px;
  background: rgba(5, 5, 16, 0.9);
  color: #FFD43B;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
}

.vk-home-closed-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: #191928;
  color: #9B9BAD;
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
}