/**
 * Gaming Store Design System — pixel-perfect match to reference screenshots
 * Applied to frontend pages only (excludes dashboard/admin)
 * 
 * Design tokens extracted from screenshots:
 * - Deep purple gradient base
 * - Reddish-orange neon accents (#F0544F)
 * - Soft radial glows, right-side light emphasis
 */

/* ========== STEP 1 & 2 — DESIGN TOKENS ========== */
:root {
  /* Color palette */
  --gaming-bg-deep: #2C0A4B;
  --gaming-bg-mid: #38184E;
  --gaming-bg-light: #4d2068;
  --gaming-bg-soft: #2a1238;
  --gaming-accent: #F0544F;
  --gaming-accent-dark: #e04540;
  --gaming-accent-glow: rgba(240, 84, 79, 0.5);
  --gaming-logo-yellow: #facc15;
  --gaming-text: #ffffff;
  --gaming-text-muted: rgba(255, 255, 255, 0.85);
  
  /* Gradients — diagonal: dark purple (left) → reddish-orange (top-right) */
  --gaming-bg-gradient: linear-gradient(135deg, #1a0840 0%, #2C0A4B 20%, #38184E 45%, #4d2068 65%, #6b2d52 80%, #8b3a45 90%, #c94a47 97%, rgba(224, 90, 74, 0.9) 100%);
  --gaming-bg-gradient-alt: linear-gradient(180deg, #2C0A4B 0%, #38184E 50%, #4d2068 100%);
  --gaming-navbar-gradient: linear-gradient(135deg, rgba(44, 10, 75, 0.95) 0%, rgba(56, 24, 78, 0.92) 50%, rgba(42, 18, 56, 0.98) 100%);
  --gaming-card-gradient: linear-gradient(180deg, rgba(77, 32, 104, 0.6) 0%, rgba(42, 18, 56, 0.9) 100%);
  --gaming-btn-primary: linear-gradient(135deg, #F0544F 0%, #e04540 100%);
  
  /* Radius scale */
  --gaming-radius-sm: 8px;
  --gaming-radius-md: 12px;
  --gaming-radius-card: 18px;
  --gaming-radius-lg: 24px;
  
  /* Shadows & glows */
  --gaming-shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.15);
  --gaming-shadow-navbar: 0 2px 20px rgba(0, 0, 0, 0.2);
  --gaming-glow-card: 0 0 20px rgba(240, 84, 79, 0.25), 0 0 40px rgba(240, 84, 79, 0.1);
  --gaming-glow-card-hover: 0 0 28px rgba(240, 84, 79, 0.45), 0 0 56px rgba(240, 84, 79, 0.2);
  --gaming-glow-border: 0 0 0 1px rgba(240, 84, 79, 0.3);
  
  /* Animation */
  --gaming-transition: 250ms ease;
  --gaming-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== STEP 3 — GLOBAL BACKGROUND (frontend + dashboard) ========== */
body.frontend-page,
body.dashboard-page {
  background: var(--gaming-bg-gradient) !important;
  min-height: 100vh;
  position: relative;
}

/* إزالة الطبقات البنفسجية لإظهار الخلفية الأصلية */
body.frontend-page .page-layout-wrapper::before,
body.dashboard-page .page-layout-wrapper::before {
  content: none !important;
  display: none !important;
}

body.frontend-page .gradient-circles,
body.dashboard-page .gradient-circles {
  display: none !important;
}

/* ========== STEP 4 — NAVBAR VISUAL MATCH (dark purple bar) ========== */
body.frontend-page .navbar,
body.dashboard-page .navbar {
  background: linear-gradient(135deg, rgba(44, 10, 75, 0.96) 0%, rgba(56, 24, 78, 0.94) 50%, rgba(42, 18, 56, 0.98) 100%) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
}

body.frontend-page .navbar .navbar-brand,
body.frontend-page .navbar .gradient-text,
body.dashboard-page .navbar .navbar-brand,
body.dashboard-page .navbar .gradient-text {
  color: var(--gaming-logo-yellow) !important;
  background: none !important;
  -webkit-text-fill-color: var(--gaming-logo-yellow) !important;
  text-shadow: 0 0 12px rgba(250, 204, 21, 0.4);
}

body.frontend-page .navbar .nav-link,
body.dashboard-page .navbar .nav-link {
  color: var(--gaming-text) !important;
  font-weight: 500;
  transition: color var(--gaming-transition), text-shadow var(--gaming-transition);
}

body.frontend-page .navbar .nav-link:hover,
body.dashboard-page .navbar .nav-link:hover {
  color: var(--gaming-accent) !important;
  text-shadow: 0 0 12px var(--gaming-accent-glow);
}

body.frontend-page .navbar .btn-primary,
body.frontend-page .navbar .navbar-admin-dashboard-btn,
body.frontend-page .navbar .btn-gradient,
body.dashboard-page .navbar .btn-primary,
body.dashboard-page .navbar .navbar-admin-dashboard-btn,
body.dashboard-page .navbar .btn-gradient {
  background: var(--gaming-btn-primary) !important;
  border: none !important;
  border-radius: var(--gaming-radius-md) !important;
  color: var(--gaming-text) !important;
  box-shadow: 0 4px 14px var(--gaming-accent-glow) !important;
  transition: transform var(--gaming-transition), box-shadow var(--gaming-transition);
}

body.frontend-page .navbar .navbar-admin-dashboard-btn,
body.dashboard-page .navbar .navbar-admin-dashboard-btn {
  padding: 0.55rem 1.2rem !important;
  min-height: 40px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
}

body.frontend-page .navbar .btn-primary:hover,
body.frontend-page .navbar .navbar-admin-dashboard-btn:hover,
body.dashboard-page .navbar .btn-primary:hover,
body.dashboard-page .navbar .navbar-admin-dashboard-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(240, 84, 79, 0.5) !important;
}

body.frontend-page .navbar .bg-light,
body.dashboard-page .navbar .bg-light {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--gaming-text) !important;
}

body.frontend-page .navbar .navbar-sidebar-toggle-btn,
body.dashboard-page .navbar .navbar-sidebar-toggle-btn {
  background: var(--gaming-btn-primary) !important;
  border-radius: var(--gaming-radius-sm);
}

/* ========== STEP 5 — FREE FIRE STYLE CARD COMPONENT ========== */
/* Cards use game-card-wrapper for gradient border — overrides applied in page-specific styles */
body.frontend-page .card-gaming,
body.frontend-page .category-card,
body.frontend-page .home-section-item .card,
body.frontend-page .service-item .card,
body.frontend-page .subcategory-item .card {
  border-radius: 18px !important;
  overflow: hidden;
}

body.frontend-page .card-gaming .card-title,
body.frontend-page .category-card .card-title,
body.frontend-page .home-section-item .card .card-title,
body.frontend-page .category-title,
body.frontend-page .service-item .card-title {
  color: var(--gaming-text) !important;
  font-weight: 700;
  text-align: center;
}

body.frontend-page .home-section-item .card .text-muted,
body.frontend-page .service-item .card-text {
  color: var(--gaming-text-muted) !important;
}

body.frontend-page .card-gaming .card-body,
body.frontend-page .category-card .card-body,
body.frontend-page .home-section-item .card .card-body {
  padding: 1.25rem !important;
}

/* Category image wrapper — gradient overlay */
body.frontend-page .category-image-wrapper,
body.frontend-page .service-item .service-image-wrap {
  border-radius: 18px 18px 0 0;
  overflow: hidden;
}

/* ========== STEP 6 — GRID + SPACING ========== */
/* Override Bootstrap row for home categories — 4 cards per row desktop */
body.frontend-page .home-categories-grid.row,
body.frontend-page #homeCategoriesGrid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.75rem;
  margin-left: 0;
  margin-right: 0;
}

@media (max-width: 1200px) {
  body.frontend-page .home-categories-grid.row,
  body.frontend-page #homeCategoriesGrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 992px) {
  body.frontend-page .home-categories-grid.row,
  body.frontend-page #homeCategoriesGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
  }
}

@media (max-width: 576px) {
  body.frontend-page .home-categories-grid.row,
  body.frontend-page #homeCategoriesGrid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

body.frontend-page #homeCategoriesGrid > [class*="col-"] {
  max-width: 100%;
  flex: none;
  width: 100%;
}

/* ========== STEP 7 — MICRO INTERACTIONS ========== */
body.frontend-page [data-animate="fade-up"],
body.frontend-page .animate-fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

body.frontend-page [data-animate="fade-up"].animate-fade-up,
body.frontend-page .animate-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

body.frontend-page .btn {
  transition: transform var(--gaming-transition), box-shadow var(--gaming-transition);
}

body.frontend-page .btn:hover {
  transform: translateY(-2px);
}

/* Section titles */
body.frontend-page .section-title,
body.frontend-page .categories-section-outer .section-title {
  color: var(--gaming-text) !important;
}

body.frontend-page .section-title h2::after,
body.frontend-page .categories-section-outer .section-title h2::after {
  background: var(--gaming-accent) !important;
}

/* FAQ section */
body.frontend-page .faq-section-outer {
  background: var(--gaming-bg-gradient-alt) !important;
}

/* تعارض Tailwind (.collapse → visibility: collapse) مع Bootstrap accordion */
body.frontend-page .accordion .accordion-collapse.collapse,
body.frontend-page .accordion .accordion-collapse.collapsing {
  visibility: visible !important;
}

body.frontend-page .faq-item-new .accordion-body,
body.frontend-page .faq-item-new .accordion-body p,
body.frontend-page .faq-item-new .faq-answer-body {
  color: rgba(255, 255, 255, 0.96) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.96) !important;
}

body.frontend-page .faq-item-new .faq-answer-text {
  display: block;
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.85;
  text-align: right;
}

/* CTA section */
body.frontend-page .gradient-bg {
  background: var(--gaming-bg-gradient-alt) !important;
}

/* Category page header */
body.frontend-page .category-header-section {
  background: var(--gaming-bg-gradient-alt) !important;
}

/* Search input in dark sections */
body.frontend-page .category-search-wrapper,
body.frontend-page .category-search-box {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
}

/* Footer — gaming palette */
body.frontend-page .footer-new {
  background: linear-gradient(135deg, #2C0A4B 0%, #38184E 50%, #2a1238 100%) !important;
}

/* نوع الصفحة — شارة موحّدة فوق مسار التنقل (قسم / فئة / خدمة / منتج) */
body.frontend-page .page-context-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(0, 0, 0, 0.22);
  color: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

body.frontend-page .page-context-label i {
  font-size: 1.05rem;
  opacity: 0.95;
}

body.frontend-page .page-context-label--section {
  border-color: rgba(52, 211, 153, 0.45);
  background: linear-gradient(135deg, rgba(30, 58, 52, 0.55) 0%, rgba(56, 24, 78, 0.5) 100%);
}

body.frontend-page .page-context-label--category {
  border-color: rgba(250, 204, 21, 0.45);
  background: linear-gradient(135deg, rgba(56, 24, 78, 0.65) 0%, rgba(77, 32, 104, 0.5) 100%);
}

body.frontend-page .page-context-label--service {
  border-color: rgba(96, 165, 250, 0.45);
  background: linear-gradient(135deg, rgba(42, 18, 56, 0.7) 0%, rgba(56, 24, 78, 0.55) 100%);
}

body.frontend-page .page-context-label--product {
  border-color: rgba(240, 84, 79, 0.5);
  background: linear-gradient(135deg, rgba(77, 32, 104, 0.55) 0%, rgba(139, 58, 69, 0.35) 100%);
}

@media (max-width: 575.98px) {
  body.frontend-page .page-context-label {
    font-size: 0.75rem;
    padding: 0.32rem 0.75rem;
    margin-bottom: 0.5rem;
  }
}