/*
 * LioNott — Custom Theme Override
 * Replaces blue (#1C40F2, #0082F8, #001042) → Royal Purple (#6d28d9, #7c3aed, #1e1b4b)
 * Font: Urbanist (kept) + Cairo for headings
 * DO NOT edit app.css — all overrides are here
 * Generated for: lionott.co
 */

/* ══════════════════════════════════════════════
   1. GOOGLE FONTS — Cairo + Urbanist
══════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700;800;900&family=Cairo:wght@600;700;800;900&display=swap');

/* ══════════════════════════════════════════════
   2. ROOT VARIABLES — Central color control
══════════════════════════════════════════════ */
:root {
  /* Primary — replaces #1C40F2 */
  --ln-primary:       #6d28d9;
  --ln-primary-mid:   #7c3aed;
  --ln-primary-light: #8b5cf6;
  --ln-primary-pale:  #ede9fe;
  --ln-primary-xpale: #f5f3ff;

  /* Dark — replaces #001042 */
  --ln-dark:          #1e1b4b;
  --ln-dark2:         #2e1065;

  /* Accent — replaces #FF0766 / #FF6E5F */
  --ln-accent:        #a855f7;
  --ln-accent2:       #c4b5fd;

  /* Bg */
  --ln-bg:            #faf9ff;

  /* Keep these from original */
  --hostim_dark_bg:     #1e1b4b;
  --hostim_dark_gray_bg:#2e1065;
}

/* ══════════════════════════════════════════════
   3. TYPOGRAPHY — Cairo for headings
══════════════════════════════════════════════ */
h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5,
.section-title,
.hero-title,
.pricing-title,
.widget-title {
  font-family: 'Cairo', sans-serif !important;
}

body {
  font-family: 'Urbanist', sans-serif !important;
  background-color: var(--ln-bg) !important;
}

/* ══════════════════════════════════════════════
   4. PRIMARY COLOR — #1C40F2 → purple
══════════════════════════════════════════════ */

/* Text colors */
a,
.text-primary,
.color-primary,
[class*="text-blue"],
[style*="color: #1C40F2"],
[style*="color:#1C40F2"] {
  color: var(--ln-primary) !important;
}

/* Background colors */
.bg-primary,
[class*="bg-blue"],
[style*="background: #1C40F2"],
[style*="background-color: #1C40F2"],
[style*="background:#1C40F2"] {
  background-color: var(--ln-primary) !important;
}

/* ══════════════════════════════════════════════
   5. BUTTONS
══════════════════════════════════════════════ */

/* Primary button */
.primary-btn,
.btn-primary,
.hostim-btn,
[class*="primary-btn"] {
  background: linear-gradient(135deg, var(--ln-primary) 0%, var(--ln-primary-light) 100%) !important;
  border-color: var(--ln-primary) !important;
  font-family: 'Urbanist', sans-serif !important;
  font-weight: 700 !important;
}
.primary-btn::before,
[class*="primary-btn"]::before {
  background: linear-gradient(135deg, var(--ln-primary-mid) 0%, var(--ln-primary) 100%) !important;
}
.primary-btn:hover,
[class*="primary-btn"]:hover {
  color: #ffffff !important;
}

/* Secondary button */
.secondary-btn {
  background-color: var(--ln-dark) !important;
}
.secondary-btn:hover {
  background-color: var(--ln-primary) !important;
}

/* Outline button */
.outline-primary {
  border-color: var(--ln-primary) !important;
  color: var(--ln-primary) !important;
}
.outline-primary:hover {
  background-color: var(--ln-primary) !important;
  color: #ffffff !important;
}
.outline-btn:hover {
  background-color: var(--ln-primary) !important;
  border-color: var(--ln-primary) !important;
}

/* Red/Pink buttons → purple accent */
.btn-red,
.hm2-primary-btn,
.gm-primary-btn {
  background: linear-gradient(135deg, var(--ln-primary) 0%, var(--ln-accent) 100%) !important;
}
.btn-red::before,
.hm2-primary-btn::before,
.gm-primary-btn::before {
  background: linear-gradient(135deg, var(--ln-accent) 0%, var(--ln-primary) 100%) !important;
}

/* ══════════════════════════════════════════════
   6. NAVIGATION HEADER
══════════════════════════════════════════════ */
.header-section,
.sticky-header.header-section {
  background-color: #ffffff !important;
  border-bottom: 1px solid var(--ln-primary-pale) !important;
}

.header-section .nav-link,
.header-section .navbar-nav .nav-link {
  font-family: 'Urbanist', sans-serif !important;
  font-weight: 600 !important;
  color: #4b5563 !important;
}
.header-section .nav-link:hover,
.header-section .navbar-nav .nav-link:hover,
.header-section .navbar-nav .nav-link.active {
  color: var(--ln-primary) !important;
}

/* Logo area */
.header-section .site-logo,
.navbar-brand {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 900 !important;
  color: var(--ln-primary) !important;
}

/* Header CTA button */
.sh-header-btn,
.gm-header-btn,
.header-btn {
  background: linear-gradient(135deg, var(--ln-primary), var(--ln-primary-light)) !important;
  font-family: 'Urbanist', sans-serif !important;
  font-weight: 700 !important;
}
.sh-header-btn::before,
.gm-header-btn::before {
  background: linear-gradient(135deg, var(--ln-primary-mid), var(--ln-primary)) !important;
}

/* Dark nav variants */
.gh-header,
.header-style-4,
[class*="dark-header"] {
  background: var(--ln-dark) !important;
}
.gh-header .sh-header-cart button .number {
  background: linear-gradient(135deg, var(--ln-primary), var(--ln-accent)) !important;
}
.gh-header .nav-link:hover {
  color: var(--ln-primary-light) !important;
}

/* Sticky / scroll nav */
.sticky-header {
  background: #ffffff !important;
  box-shadow: 0 2px 20px rgba(109, 40, 217, 0.1) !important;
}

/* ══════════════════════════════════════════════
   7. HERO SECTION
══════════════════════════════════════════════ */
.hero-section,
.banner-section,
[class*="hero"],
[class*="banner"] {
  background: var(--ln-bg) !important;
}

/* Hero dark/gradient variants */
.hero-section.dark-bg,
.banner-dark,
.hm2-hero,
[class*="hero-dark"] {
  background: linear-gradient(140deg, #4c1d95 0%, var(--ln-primary) 50%, var(--ln-primary-mid) 100%) !important;
}

/* Hero text */
.hero-section h1,
.banner-section h1,
[class*="hero"] h1 {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 900 !important;
  color: var(--ln-dark) !important;
}
.hero-section.dark-bg h1,
.hm2-hero h1 {
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════
   8. DARK BACKGROUNDS — #001042 → --ln-dark
══════════════════════════════════════════════ */
.dark-bg,
.bg-dark,
[class*="dark-section"],
[style*="background: #001042"],
[style*="background-color: #001042"],
[style*="background:#001042"] {
  background-color: var(--ln-dark) !important;
}

/* Dark bg text */
.dark-bg h1, .dark-bg h2, .dark-bg h3,
.dark-bg h4, .dark-bg h5, .dark-bg p,
.dark-bg .section-title {
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════
   9. PRICING SECTION
══════════════════════════════════════════════ */
.pricing-section,
[class*="pricing"],
.plan-box,
.price-box {
  background: var(--ln-bg) !important;
}

/* Active/popular plan */
.pricing-box.active,
.plan-box.active,
.price-box.active,
[class*="pricing-box"].popular,
[class*="price-card"].popular {
  background: linear-gradient(160deg, #5b21b6 0%, var(--ln-primary) 45%, var(--ln-accent) 100%) !important;
  border-color: var(--ln-primary) !important;
}

/* Plan button */
.pricing-box .primary-btn,
.plan-box .primary-btn {
  background: linear-gradient(135deg, var(--ln-primary), var(--ln-primary-light)) !important;
}

/* Pricing badge/highlight */
.pricing-badge,
.popular-tag,
[class*="plan-badge"] {
  background: linear-gradient(135deg, var(--ln-primary), var(--ln-primary-light)) !important;
  color: #ffffff !important;
}

/* ══════════════════════════════════════════════
   10. FEATURE CARDS / SERVICE CARDS
══════════════════════════════════════════════ */
.service-card,
.feature-card,
.feature-box,
[class*="service-box"],
[class*="feature-item"] {
  background: #ffffff !important;
  border: 1px solid var(--ln-primary-pale) !important;
  transition: box-shadow .25s, transform .25s !important;
}
.service-card:hover,
.feature-card:hover,
[class*="service-box"]:hover,
[class*="feature-item"]:hover {
  box-shadow: 0 10px 28px rgba(109, 40, 217, 0.12) !important;
  transform: translateY(-3px) !important;
  border-color: rgba(109, 40, 217, 0.25) !important;
}

/* Card icon backgrounds */
.service-icon,
.feature-icon,
[class*="icon-box"] {
  background: var(--ln-primary-xpale) !important;
  color: var(--ln-primary) !important;
}

/* ══════════════════════════════════════════════
   11. SECTION TITLES
══════════════════════════════════════════════ */
.section-title,
.section-heading,
[class*="sec-title"],
[class*="section-title"] {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 900 !important;
  color: var(--ln-dark) !important;
}

/* Section subtitle/tag */
.section-subtitle,
.sub-title,
[class*="section-sub"],
[class*="subtitle"] {
  color: var(--ln-primary) !important;
  font-weight: 700 !important;
}

/* Highlight span in titles */
.section-title span,
h1 span.highlight,
h2 span.highlight,
[class*="title"] span.color {
  background: linear-gradient(135deg, var(--ln-primary), var(--ln-primary-light)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ══════════════════════════════════════════════
   12. FOOTER
══════════════════════════════════════════════ */
.footer,
.footer-section,
.hm2-footer,
.h5-footer,
[class*="footer"] {
  background-color: var(--ln-dark) !important;
  font-family: 'Urbanist', sans-serif !important;
}

.footer-widget .widget-title,
.footer-widget h5,
.footer-widget h4 {
  font-family: 'Cairo', sans-serif !important;
  font-weight: 700 !important;
  color: #ffffff !important;
}

.footer-widget .widget-title::before,
.footer-widget .ft-subtitle::after {
  background-color: var(--ln-primary) !important;
}

.footer-widget .footer-nav li a {
  color: rgba(255, 255, 255, 0.45) !important;
}
.footer-widget .footer-nav li a:hover {
  color: #ffffff !important;
}
.footer-widget .footer-nav li a::before,
.footer-widget .footer-nav li a:hover::before {
  background-color: var(--ln-primary-light) !important;
}

/* Social icons */
.footer-widget .social-nav li a {
  background: rgba(109, 40, 217, 0.15) !important;
  color: var(--ln-primary-light) !important;
  border-color: rgba(109, 40, 217, 0.25) !important;
}
.footer-widget .social-nav li a::before {
  background: linear-gradient(135deg, var(--ln-primary), var(--ln-primary-light)) !important;
}
.footer-widget .social-nav li a:hover {
  color: #ffffff !important;
}

/* Footer newsletter input */
.footer-widget .footer-sb-form input[type=email] {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(109, 40, 217, 0.3) !important;
  color: #ffffff !important;
}
.footer-widget .footer-sb-form button {
  background: linear-gradient(135deg, var(--ln-primary), var(--ln-primary-light)) !important;
}

/* Footer copyright */
.footer-copyright {
  border-color: rgba(255, 255, 255, 0.07) !important;
  color: rgba(255, 255, 255, 0.25) !important;
}
.footer-copyright a {
  color: rgba(255, 255, 255, 0.35) !important;
}
.footer-copyright a:hover {
  color: var(--ln-primary-light) !important;
}

/* hm2 footer copyright social */
.hm2-footer-copyright .footer-social a::before {
  background: linear-gradient(135deg, var(--ln-primary), var(--ln-accent)) !important;
}

/* ══════════════════════════════════════════════
   13. MISC — Borders, badges, tags
══════════════════════════════════════════════ */

/* Accent color #FF0766, #FF6E5F, #F16262 → purple accent */
[style*="color: #FF0766"],
[style*="color: #FF6E5F"],
[style*="color: #F16262"],
.text-red, .text-pink {
  color: var(--ln-accent) !important;
}
[style*="background: #FF0766"],
[style*="background-color: #FF0766"],
.bg-red, .bg-pink {
  background-color: var(--ln-primary) !important;
}

/* Border accents */
[class*="border-primary"] {
  border-color: var(--ln-primary) !important;
}

/* Tags / badges */
.badge-primary,
.tag-primary,
[class*="badge"][class*="primary"] {
  background: var(--ln-primary-pale) !important;
  color: var(--ln-primary) !important;
}

/* Progress bars, sliders */
.progress-bar,
[class*="progress"][class*="fill"] {
  background: linear-gradient(90deg, var(--ln-primary), var(--ln-primary-light)) !important;
}

/* Scrollbar */
::-webkit-scrollbar-thumb {
  background: var(--ln-primary-pale) !important;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ln-primary) !important;
}

/* Selection */
::selection {
  background: var(--ln-primary-pale) !important;
  color: var(--ln-primary) !important;
}

/* Focus rings */
*:focus {
  outline-color: var(--ln-primary) !important;
  box-shadow: 0 0 0 3px rgba(109, 40, 217, 0.15) !important;
}

/* ══════════════════════════════════════════════
   14. DARK MODE — dark-mode.css overrides
══════════════════════════════════════════════ */
.dark-mode .primary-btn,
.dark-mode [class*="primary-btn"] {
  background: linear-gradient(135deg, var(--ln-primary), var(--ln-primary-light)) !important;
}
.dark-mode a {
  color: var(--ln-primary-light) !important;
}
.dark-mode .section-title span,
.dark-mode h1 span.highlight {
  -webkit-text-fill-color: transparent !important;
}

/* ══════════════════════════════════════════════
   15. RESPONSIVE — keep consistent on mobile
══════════════════════════════════════════════ */
@media (max-width: 767.98px) {
  .header-section .navbar-toggler-icon,
  .navbar-toggler {
    border-color: var(--ln-primary) !important;
    color: var(--ln-primary) !important;
  }
  .mobile-menu,
  .navbar-collapse {
    background: #ffffff !important;
    border-top: 2px solid var(--ln-primary-pale) !important;
  }
  .mobile-menu .nav-link:hover {
    color: var(--ln-primary) !important;
  }
}