/* ============================================================
   BENNY'S – Master Stylesheet
   Loaded by: index.html, search.html, wishlist.html,
              compare.html, account.html, premium.html, settings.html
   ============================================================ */

/* ===== GLOBAL ===== */
* { box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background: #f5f4fb; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c4b8f0; border-radius: 10px; }

/* ===== SIDEBAR ===== */
.sidebar-item { transition: background 0.2s, color 0.2s; }
.sidebar-item:hover { background: #EDE9FF; color: #5B35D5; }
.sidebar-item.active { background: #EDE9FF; color: #5B35D5; }

/* ===== PRODUCT CARD ===== */
.product-card { transition: box-shadow 0.25s, transform 0.25s; }
.product-card:hover { box-shadow: 0 8px 32px 0 rgba(91,53,213,0.14); transform: translateY(-3px); }

/* ===== BUTTONS ===== */
.btn-primary {
  background: #5B35D5;
  color: white;
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-primary:hover {
  background: #4527B0;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(91,53,213,0.35);
}
.btn-outline {
  background: white;
  color: #5B35D5;
  border: 1.5px solid #5B35D5;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}
.btn-outline:hover {
  background: #EDE9FF;
  transform: translateY(-1px);
}
.btn-ghost {
  background: transparent;
  color: #5B35D5;
  transition: background 0.2s, transform 0.15s;
}
.btn-ghost:hover { background: #EDE9FF; transform: translateY(-1px); }

/* ===== HERO SECTION ===== */
.hero-section {
  background: linear-gradient(135deg, #faf9ff 0%, #f0edff 50%, #e8f4fd 100%);
  position: relative;
  overflow: hidden;
}
.hero-section::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 400px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,53,213,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.hero-bg-wrap { position: absolute; inset: 0; z-index: 0; }
.hero-bg-wrap img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.hero-content { position: relative; z-index: 1; }

/* ===== CHAT BUBBLES ===== */
.chat-bubble-bot { background: #F1EFFE; border-radius: 0 14px 14px 14px; }
.chat-bubble-user { background: white; border-radius: 14px 14px 0 14px; }

/* ===== CHIPS / TAGS ===== */
.chip {
  border: 1.5px solid #5B35D5;
  color: #5B35D5;
  background: white;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.chip:hover, .chip.active { background: #5B35D5; color: white; }

/* ===== CHECKMARK LIST ===== */
.check-item { display: flex; align-items: center; gap: 12px; }
.check-item::before {
  content: '';
  display: inline-block;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #EDE9FF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 8l3 3 5-5' stroke='%235B35D5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  flex-shrink: 0;
}

/* ===== INPUTS ===== */
.search-bar:focus { outline: 2px solid #5B35D5; box-shadow: 0 0 0 4px rgba(91,53,213,0.10); }

/* ===== NAV LINK ===== */
.nav-link { transition: color 0.18s; }
.nav-link:hover { color: #5B35D5; }

/* ===== SORT SELECT ===== */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235B35D5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px !important;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fadeInUp 0.4s ease forwards; }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
.fade-in-r { animation: fadeInRight 0.35s ease forwards; }

/* ===== PRO CARD ===== */
.pro-card { background: linear-gradient(135deg, #EDE9FF 0%, #ddd4ff 100%); }

/* ===== SEND BUTTON ===== */
.send-btn { transition: background 0.18s, transform 0.15s, box-shadow 0.18s; }
.send-btn:hover { background: #4527B0; transform: scale(1.08); box-shadow: 0 4px 14px rgba(91,53,213,0.35); }

/* ===== HEART BUTTON ===== */
.heart-btn { transition: color 0.18s, transform 0.18s; }
.heart-btn:hover { color: #e44d6f; transform: scale(1.2); }

/* ===== CAROUSEL NAV ===== */
.carousel-nav { transition: background 0.18s, transform 0.15s; }
.carousel-nav:hover { background: #5B35D5; color: white; transform: scale(1.08); }

/* ===== TOGGLE SWITCH (settings) ===== */
.toggle-wrap { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.toggle-wrap input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-slider {
  width: 44px; height: 24px;
  background: #e5e7eb;
  border-radius: 12px;
  transition: background 0.2s;
  position: relative;
  flex-shrink: 0;
}
.toggle-slider::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.toggle-wrap input:checked + .toggle-slider { background: #5B35D5; }
.toggle-wrap input:checked + .toggle-slider::after { transform: translateX(20px); }

/* ===== SETTINGS CARD ===== */
.settings-section {
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 12px 0 rgba(91,53,213,0.07);
  overflow: hidden;
}
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #f3f4f6;
  transition: background 0.15s;
}
.settings-row:last-child { border-bottom: none; }
.settings-row:hover { background: #fafafe; }

/* ===== STAT CARD ===== */
.stat-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(91,53,213,0.07);
  transition: transform 0.2s, box-shadow 0.2s;
}
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px 0 rgba(91,53,213,0.12); }

/* ===== COMPARE TABLE ===== */
.compare-header { background: #faf9ff; }
.compare-row { border-top: 1px solid #f3f4f6; }
.compare-row:hover { background: #fafafe; }
.compare-cell { padding: 14px 16px; text-align: center; font-size: 0.875rem; }
.compare-cell:first-child { text-align: left; font-weight: 600; color: #6b7280; font-size: 0.8125rem; }
.compare-best { background: linear-gradient(135deg, #EDE9FF 0%, #f5f3ff 100%); }

/* ===== PREMIUM FEATURE CARD ===== */
.feature-card {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 12px 0 rgba(91,53,213,0.07);
  border: 1.5px solid #f3f4f6;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.feature-card:hover { border-color: #c4b5fd; box-shadow: 0 8px 24px rgba(91,53,213,0.12); transform: translateY(-2px); }

/* ===== PRICING CARD ===== */
.pricing-card {
  background: white;
  border-radius: 20px;
  padding: 28px 24px;
  border: 2px solid #f3f4f6;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pricing-card.featured {
  border-color: #5B35D5;
  background: linear-gradient(135deg, #faf9ff 0%, #f3f0ff 100%);
  box-shadow: 0 8px 32px rgba(91,53,213,0.15);
}

/* ===== WISHLIST ITEM ===== */
.wishlist-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 2px 12px 0 rgba(91,53,213,0.07);
  overflow: hidden;
  transition: box-shadow 0.25s, transform 0.25s;
}
.wishlist-card:hover { box-shadow: 0 8px 32px 0 rgba(91,53,213,0.14); transform: translateY(-3px); }

/* ===== ACTIVITY ITEM ===== */
.activity-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  transition: background 0.15s;
}
.activity-item:hover { background: #f9f8ff; }