@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800;900&display=swap');

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Tajawal', sans-serif;
  background-color: #fafafa;
  color: #1f2937;
  overflow-x: hidden;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #94a3b8;
  border-radius: 5px;
  border: 2px solid #f1f5f9;
}
::-webkit-scrollbar-thumb:hover {
  background: #ffb606;
}

/* Dark Mode Scrollbar - Clear & High Contrast */
html.dark ::-webkit-scrollbar-track {
  background: #18181b !important;
}
html.dark ::-webkit-scrollbar-thumb {
  background: #52525b !important;
  border-radius: 5px !important;
  border: 2px solid #18181b !important;
}
html.dark ::-webkit-scrollbar-thumb:hover {
  background: #ffb606 !important;
}

/* Firefox scrollbar support */
html.dark {
  scrollbar-color: #52525b #18181b;
  scrollbar-width: thin;
}
html:not(.dark) {
  scrollbar-color: #94a3b8 #f1f5f9;
  scrollbar-width: thin;
}

/* Custom Glow Effects */
.text-glow-yellow {
  text-shadow: 0 0 10px rgba(255, 182, 6, 0.25);
}

.box-glow-yellow {
  box-shadow: 0 10px 25px -5px rgba(255, 182, 6, 0.18), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
}

.box-glow-yellow-intense {
  box-shadow: 0 20px 30px -10px rgba(255, 182, 6, 0.25);
}

/* Glassmorphism Panel */
.glass-panel {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.glass-panel:hover {
  border-color: rgba(255, 182, 6, 0.2);
}

/* Subtle Grid Background */
.grid-mesh {
  background-size: 32px 32px;
  background-image: 
    linear-gradient(to right, rgba(0, 0, 0, 0.015) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.015) 1px, transparent 1px);
}

/* Clean, modern radial gradient center glow */
.radial-glow-center {
  background: radial-gradient(circle at center, rgba(255, 182, 6, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
}

/* Custom Physics Animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(1deg);
  }
}

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes pulse-slow {
  0%, 100% {
    opacity: 0.4;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.03);
  }
}

.animate-pulse-slow {
  animation: pulse-slow 8s ease-in-out infinite;
}

@keyframes wave-motion {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -100;
  }
}

.physics-wave {
  stroke-dasharray: 10, 5;
  animation: wave-motion 5s linear infinite;
}

.transition-all-300 {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Custom course card shadow transition */
.course-card-hover {
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
}
.course-card-hover:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 182, 6, 0.45);
  box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.07), 0 8px 10px -6px rgba(255, 182, 6, 0.12);
}

/* Fade-in & Reveal on Scroll */
.reveal {
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.active,
.reveal-left.active,
.reveal-right.active {
  opacity: 1;
  transform: translate(0, 0);
  padding:20px;
}

/* Stagger delay helpers for grid items */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }

/* Newton's Crazy Apple Easter Egg Styles */
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-12deg) scale(1.1); }
  75% { transform: rotate(12deg) scale(1.1); }
}

.animate-wiggle {
  animation: wiggle 2s ease-in-out infinite;
}

@keyframes fall-down {
  0% {
    top: -50px;
    opacity: 1;
    transform: rotate(0deg);
  }
  80% {
    top: calc(100vh - 60px);
    transform: rotate(360deg);
  }
  90% {
    top: calc(100vh - 100px);
  }
  100% {
    top: calc(100vh - 40px);
    opacity: 0.8;
  }
}

.falling-apple-item {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  font-size: 2.2rem;
  animation: fall-down linear forwards;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
}

/* ── Auth state visibility toggle ── */
/* Before JS runs, hide logged-in elements by default (guest state) */
.auth-logged-out {
  background-color: #ffb606 !important;
  color: #09090b !important;
  font-weight: 800 !important;
  font-size: 0.875rem !important;
  padding: 0.625rem 1.35rem !important;
  border-radius: 0.75rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(255, 182, 6, 0.35) !important;
  transition: all 0.3s ease !important;
  white-space: nowrap !important;
}
.auth-logged-out:hover {
  background-color: #e5a305 !important;
  color: #000000 !important;
  transform: translateY(-1px) scale(1.02) !important;
  box-shadow: 0 6px 20px rgba(255, 182, 6, 0.5) !important;
}

/* TikTok Icon Font Protection */
i.fa-tiktok,
.fa-tiktok {
  font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important;
  font-style: normal !important;
  display: inline-block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Explicit Golden Yellow protection for Offer & Course Subscribe Buttons & Headings */
a.bg-brand-yellow,
.bg-brand-yellow {
  background-color: #ffb606 !important;
  color: #09090b !important;
}
a.bg-brand-yellow:hover,
.bg-brand-yellow:hover {
  background-color: #e5a305 !important;
  color: #000000 !important;
}

h1.text-brand-yellow,
h2.text-brand-yellow,
h3.text-brand-yellow,
h4.text-brand-yellow,
h5.text-brand-yellow,
.text-brand-yellow {
  color: #ffb606 !important;
}

.text-glow-yellow {
  text-shadow: 0 0 12px rgba(255, 182, 6, 0.4) !important;
}



/* When user is authenticated, swap visibility */
body.is-logged-in .auth-logged-in {
  display: flex !important;
}
body.is-logged-in .auth-logged-out {
  display: none !important;
}


/* ==========================================================================
   Learn Pixel Child Theme - Header & Footer Protection & Overrides
   ========================================================================== */

/* 1. Header Overrides */
header.fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
  margin: 0 !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
}

header.fixed nav a {
  color: #3f3f46 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}

header.fixed nav a:hover,
header.fixed nav a.text-brand-yellow {
  color: rgb(255, 182, 6) !important;
}

/* Hide Astra parent theme duplicate search forms/icons in header */
.ast-header-search,
.ast-search-menu-icon,
.ast-search-icon,
header .ast-search-box,
header form.search-form {
  display: none !important;
}


/* 2. Footer Overrides - Fix broken Astra parent styles and force default visibility */
footer,
footer.bg-zinc-950 {
  background-color: #09090b !important;
  color: #e4e4e7 !important;
  border-top: 1px solid #27272a !important;
  margin: 0 !important;
  width: 100% !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Force all text elements in footer to be clear light gray by default */
footer p,
footer span,
footer li,
footer div,
footer label,
footer blockquote {
  color: #a1a1aa !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Force all headings in footer to be bright white */
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6 {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
  font-weight: 700 !important;
  margin-bottom: 1.5rem !important;
}

/* Specific fix for footer headings with yellow underline decoration */
footer h5.relative,
footer h5.footer-heading,
h5.footer-heading {
  display: inline-block !important;
  position: relative !important;
  margin-bottom: 1.5rem !important;
  padding-bottom: 0.5rem !important;
}

footer h5.relative > span.absolute,
footer h5.footer-heading > span.absolute,
h5.footer-heading > span.absolute {
  bottom: 0 !important;
  right: 0 !important;
  height: 2px !important;
  width: 2rem !important;
  background-color: #ffb606 !important;
}

/* Specific fix for yellow social headings (e.g. in contact section) */
h5.text-brand-yellow {
  color: #ffb606 !important;
  display: block !important;
  margin-bottom: 1.25rem !important;
  margin-top: 1rem !important;
  font-weight: 700 !important;
}


/* Force all links in footer to be clearly visible light silver by default, yellow on hover */
footer a,
footer a span,
footer a div,
footer ul li a {
  color: #d4d4d8 !important;
  opacity: 1 !important;
  visibility: visible !important;
  text-decoration: none !important;
  transition: color 0.2s ease-in-out !important;
}

footer a:hover,
footer a:hover span,
footer a:hover div,
footer ul li a:hover {
  color: #ffb606 !important;
}

/* Specific yellow accents inside footer */
footer .text-brand-yellow,
footer i.text-brand-yellow,
footer span.text-brand-yellow,
footer a .text-brand-yellow {
  color: #ffb606 !important;
}

/* Specific emerald green accents inside footer (WhatsApp, etc.) */
footer .text-emerald-500,
footer i.fa-whatsapp {
  color: #10b981 !important;
}

/* Social icon buttons in footer */
footer a.bg-zinc-900 {
  background-color: #18181b !important;
  border-color: #27272a !important;
}

/* Lists formatting inside footer */
footer ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

footer li {
  margin-bottom: 0.75rem !important;
  padding: 0 !important;
}

/* Bottom copyright bar */
footer .border-t {
  border-color: #27272a !important;
}

footer .border-t p {
  color: #71717a !important;
}

footer .border-t a {
  color: #a1a1aa !important;
}

footer .border-t a:hover {
  color: #ffb606 !important;
}

/* Fix mobile menu drawer positioning & z-index */
#mobile-menu {
  z-index: 99999 !important;
}

#mobile-menu-backdrop {
  z-index: 99990 !important;
}

/* ==========================================================================
   SUPER FIX: Floating Buttons (WhatsApp & Newton Apple) & Social Icons
   ========================================================================== */

/* 1. Floating WhatsApp Button */
.floating-wa-btn,
a.floating-wa-btn,
a[aria-label="تواصل معنا عبر واتساب"] {
  position: fixed !important;
  bottom: 1.5rem !important;
  right: 1.5rem !important;
  z-index: 999999 !important; /* Always on top of footer, header, and content */
  width: 3.5rem !important;
  height: 3.5rem !important;
  background-color: #25d366 !important; /* Authentic vivid WhatsApp Green */
  color: #ffffff !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.45) !important;
  text-decoration: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateZ(0) !important;
  transition: transform 0.3s ease, background-color 0.3s ease !important;
}

.floating-wa-btn i,
a.floating-wa-btn i,
a[aria-label="تواصل معنا عبر واتساب"] i {
  color: #ffffff !important;
  font-size: 1.75rem !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.floating-wa-btn:hover,
a.floating-wa-btn:hover,
a[aria-label="تواصل معنا عبر واتساب"]:hover {
  background-color: #128c7e !important;
  transform: scale(1.1) !important;
}

/* 2. Floating Newton Apple Button */
.trigger-newton-apple,
button.trigger-newton-apple {
  position: fixed !important;
  bottom: 5.5rem !important;
  left: 1.5rem !important;
  z-index: 999999 !important; /* Always on top */
  height: 3rem !important;
  background: linear-gradient(135deg, #ef4444 0%, #f59e0b 50%, #ef4444 100%) !important; /* Vivid Red-Gold physics gradient */
  color: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 25px rgba(239, 68, 68, 0.45) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateZ(0) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

/* Tooltip styling - Hidden by default, shown ONLY on hover */
.newton-tooltip,
.wa-tooltip {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  font-size: 0.75rem !important;
  line-height: 1.25 !important;
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease !important;
}

.trigger-newton-apple:hover .newton-tooltip,
.floating-wa-btn:hover .wa-tooltip {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Apple Icon inside Floating Newton Apple Button */
.trigger-newton-apple.fixed {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 9999 !important;
}

.trigger-newton-apple.fixed img,
.trigger-newton-apple.fixed .emoji,
.apple-icon img {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hero Badge Newton Trigger Button */
.trigger-newton-apple.absolute {
  position: absolute !important;
  top: 2% !important;
  left: 2% !important;
  background: linear-gradient(to right, #ef4444, #f59e0b) !important;
  color: #ffffff !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 0.5rem !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  z-index: 20 !important;
  cursor: pointer !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  width:auto;
}

@media (min-width: 475px) {
  .trigger-newton-apple.absolute {
    left: 5% !important;
  }
}

.trigger-newton-apple.absolute:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 12px 20px -3px rgba(239, 68, 68, 0.4) !important;
}

.trigger-newton-apple.absolute span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  white-space: nowrap !important;
  color: #ffffff !important;
}

.trigger-newton-apple.absolute img,
.trigger-newton-apple.absolute .emoji {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}




.trigger-newton-apple:hover,
button.trigger-newton-apple:hover {
  transform: scale(1.12) rotate(-5deg) !important;
  box-shadow: 0 12px 35px rgba(239, 68, 68, 0.65) !important;
}


.text-zinc-900 {
  color: #18181b !important;
}

/* ============================================
   GLOBAL HEADING & TEXT UTILITY CLASSES
   (Tailwind classes that aren't in output.css)
   ============================================ */

/* --- Font Sizes --- */
.text-base { font-size: 1rem !important; line-height: 1.5 !important; }
.text-lg { font-size: 1.125rem !important; line-height: 1.75 !important; }
.text-xl { font-size: 1.25rem !important; line-height: 1.75 !important; }
.text-2xl { font-size: 1.5rem !important; line-height: 1.33 !important; }
.text-3xl { font-size: 1.875rem !important; line-height: 1.25 !important; }
.text-4xl { font-size: 2.25rem !important; line-height: 1.2 !important; }
.text-5xl { font-size: 3rem !important; line-height: 1.1 !important; }
.text-6xl { font-size: 3.75rem !important; line-height: 1.05 !important; }

/* --- Font Weights --- */
.font-bold { font-weight: 700 !important; }
.font-extrabold { font-weight: 800 !important; }
.font-black { font-weight: 900 !important; }

/* --- Text Colors --- */
.text-zinc-500 { color: #71717a !important; }
.text-zinc-600 { color: #52525b !important; }
.text-zinc-700 { color: #3f3f46 !important; }
.text-zinc-800 { color: #27272a !important; }

/* --- Margins --- */
.mt-2 { margin-top: 0.5rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 0.75rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }

/* --- Leading (Line Height) --- */
.leading-tight { line-height: 1.25 !important; }
.leading-relaxed { line-height: 1.625 !important; }

/* --- Responsive Font Size Breakpoints --- */
@media (min-width: 475px) {
  .xs\:text-3xl { font-size: 1.875rem !important; line-height: 1.25 !important; }
  .xs\:text-4xl { font-size: 2.25rem !important; line-height: 1.2 !important; }
}

@media (min-width: 640px) {
  .sm\:text-lg { font-size: 1.125rem !important; line-height: 1.75 !important; }
  .sm\:text-xl { font-size: 1.25rem !important; line-height: 1.75 !important; }
  .sm\:text-2xl { font-size: 1.5rem !important; line-height: 1.33 !important; }
  .sm\:text-5xl { font-size: 3rem !important; line-height: 1.1 !important; }
  .sm\:mb-3 { margin-bottom: 0.75rem !important; }
  .sm\:mb-4 { margin-bottom: 1rem !important; }
  .sm\:mb-6 { margin-bottom: 1.5rem !important; }
}

@media (min-width: 768px) {
  .md\:text-4xl { font-size: 2.25rem !important; line-height: 1.2 !important; }
  .md\:text-6xl { font-size: 3.75rem !important; line-height: 1.05 !important; }
}



/* 3. Social Media Buttons under Contact Form & in Footer */

.social-btn-yt,
a.social-btn-yt {
  background-color: rgba(220, 38, 38, 0.1) !important;
  border: 1px solid rgba(220, 38, 38, 0.3) !important;
  color: #dc2626 !important;
}
.social-btn-yt i, .social-btn-yt span { color: #dc2626 !important; }
.social-btn-yt:hover {
  background-color: #dc2626 !important;
  color: #ffffff !important;
}
.social-btn-yt:hover i, .social-btn-yt:hover span { color: #ffffff !important; }

.social-btn-fb,
a.social-btn-fb {
  background-color: rgba(37, 99, 235, 0.1) !important;
  border: 1px solid rgba(37, 99, 235, 0.3) !important;
  color: #2563eb !important;
}
.social-btn-fb i, .social-btn-fb span { color: #2563eb !important; }
.social-btn-fb:hover {
  background-color: #2563eb !important;
  color: #ffffff !important;
}
.social-btn-fb:hover i, .social-btn-fb:hover span { color: #ffffff !important; }

.social-btn-ig,
a.social-btn-ig {
  background-color: rgba(219, 39, 119, 0.1) !important;
  border: 1px solid rgba(219, 39, 119, 0.3) !important;
  color: #db2777 !important;
}
.social-btn-ig i, .social-btn-ig span { color: #db2777 !important; }
.social-btn-ig:hover {
  background-color: #db2777 !important;
  color: #ffffff !important;
}
.social-btn-ig:hover i, .social-btn-ig:hover span { color: #ffffff !important; }

/* 4. Newton Physics Modal Styling (Flex Centering) */
#newton-modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.75) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  z-index: 999998 !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 1rem !important;
  transition: opacity 0.3s ease !important;
}

#newton-modal-backdrop.hidden {
  display: none !important;
}

#newton-modal {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 440px !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  background-color: #ffffff !important;
  border: 2px solid rgba(239, 68, 68, 0.4) !important;
  border-radius: 1.5rem !important;
  padding: 1.75rem !important;
  z-index: 999999 !important;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
  text-align: center !important;
  color: #18181b !important;
  margin: auto !important;
  transition: transform 0.3s ease, opacity 0.3s ease !important;
}


#newton-modal.hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


#newton-modal h3 {
  color: #18181b !important;
  font-weight: 900 !important;
  font-size: 1.5rem !important;
  margin-bottom: 0.75rem !important;
}

#newton-modal blockquote {
  font-style: italic !important;
  color: #3f3f46 !important;
  line-height: 1.6 !important;
}

#newton-modal #newton-spawn-more {
  background: linear-gradient(to right, #ef4444, #f59e0b) !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  border-radius: 0.75rem !important;
  padding: 0.85rem 1rem !important;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4) !important;
  cursor: pointer !important;
  border: none !important;
}

#newton-modal #newton-spawn-more:hover {
  transform: scale(1.02) !important;
  background: linear-gradient(to right, #dc2626, #d97706) !important;
}

#newton-modal #newton-modal-cancel {
  background-color: #f4f4f5 !important;
  color: #3f3f46 !important;
  border: 1px solid #e4e4e7 !important;
  font-weight: 700 !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1rem !important;
  cursor: pointer !important;
}

#newton-modal #newton-modal-cancel:hover {
  background-color: #e4e4e7 !important;
}


.social-btn-tt,
a.social-btn-tt {
  background-color: rgba(24, 24, 27, 0.1) !important;
  border: 1px solid rgba(24, 24, 27, 0.3) !important;
  color: #fff !important;
}
.social-btn-tt i, .social-btn-tt span { color: #18181b !important; }
.social-btn-tt:hover {
  background-color: #18181b !important;
  color: #ffffff !important;
}
.social-btn-tt:hover i, .social-btn-tt:hover span { color: #ffffff !important; }

/* FontAwesome Brand & Solid Icon Font Protection */
i.fab, i.fas, i.far, .fab, .fas, .far {
  font-family: "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome" !important;
  font-style: normal !important;
  display: inline-block !important;
}
#loginform input,
.relative input[type="text"],
.relative input[type="tel"],
.relative input[type="email"],
.relative input[type="password"],
.relative select {
  padding-inline-start: 45px !important;
  padding-right: 45px !important;
}


div#header-search-box{
    padding:0;
}
input#header-search-input {
    margin-left: 20px;
border-radius: 25px;}
button#mobile-search-toggle-btn {
    padding: 8px 20px;
}
button#mobile-menu-close {
    padding: 8px 10px;
}
button#mobile-menu-close svg{
    font-size:14px;
}

button#mobile-menu-btn {
    padding: 8px 16px;
}

/* Mobile Slide-Down Search Overlay */
#mobile-search-overlay {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 999999 !important;
  background-color: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid #e4e4e7 !important;
  box-shadow: 0 12px 30px -5px rgba(0, 0, 0, 0.15) !important;
  padding: 0.75rem 1rem !important;
}

#mobile-search-overlay.hidden {
  display: none !important;
}

#mobile-search-overlay:not(.hidden) {
  display: block !important;
}
input,
select{
border-radius: 14px !important;}

/* Uniform Border Radius for Header & Mobile Menu Buttons */
header button,
header a,
header a.auth-logged-in,
header a.auth-logged-out,
button#mobile-menu-btn,
button#mobile-menu-close,
button#search-toggle-btn,
#mobile-menu button,
#mobile-menu a,
#mobile-menu input {
  border-radius: 14px !important;
}

/* Dynamic Active State for WordPress Navigation Menus */
header nav .current-menu-item > a,
header nav .current_page_item > a,
header nav .current-menu-ancestor > a,
header nav a.current-menu-item,
header nav a.current_page_item {
  color: #ffb606 !important;
  font-weight: 800 !important;
}

/* Centered, responsive page titles for checkout & order received pages */
.woocommerce-checkout .entry-title,
.woocommerce-order-received .entry-title,
.woocommerce-page .entry-title,
.page-template-default .entry-title {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 100% !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

@media (max-width: 640px) {
  .woocommerce-checkout .entry-title,
  .woocommerce-order-received .entry-title,
  .woocommerce-page .entry-title,
  .page-template-default .entry-title {
    font-size: 1.35rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

/* ==========================================================================
   Dark Mode System (Learn Pixel Theme)
   ========================================================================== */
html.dark {
  color-scheme: dark;
  background-color: #09090b !important;
  color: #f4f4f5 !important;
}

html.dark body,
html.dark main,
html.dark section,
html.dark footer,
html.dark .bg-light-bg,
html.dark .grid-mesh {
  background-color: #09090b !important;
  color: #f4f4f5 !important;
}

html.dark .glass-panel,
html.dark .glass-card {
  background-color: rgba(24, 24, 27, 0.88) !important;
  border-color: #27272a !important;
}

html.dark .bg-white\/90,
html.dark .bg-white\/95,
html.dark .bg-white\/80 {
  background-color: rgba(24, 24, 27, 0.92) !important;
}

html.dark header {
  background-color: rgba(9, 9, 11, 0.92) !important;
  border-bottom-color: #27272a !important;
}

html.dark #mobile-menu {
  background-color: #18181b !important;
  border-color: #27272a !important;
}

html.dark .bg-white,
html.dark .bg-slate-50,
html.dark .bg-zinc-50,
html.dark .course-card,
html.dark .stat-card {
  background-color: #18181b !important;
  border-color: #27272a !important;
  color: #f4f4f5 !important;
}

html.dark .bg-zinc-100,
html.dark .bg-slate-100 {
  background-color: #27272a !important;
}

html.dark .text-zinc-900,
html.dark .text-zinc-800,
html.dark .text-zinc-700,
html.dark .text-gray-900,
html.dark .text-gray-800,
html.dark h1:not(.text-brand-yellow),
html.dark h2:not(.text-brand-yellow),
html.dark h3:not(.text-brand-yellow),
html.dark h4:not(.text-brand-yellow) {
  color: #f4f4f5 !important;
}

html.dark .text-zinc-650,
html.dark .text-zinc-600,
html.dark .text-zinc-500,
html.dark .text-gray-600,
html.dark .text-gray-500 {
  color: #a1a1aa !important;
}

html.dark .border-light-border,
html.dark .border-zinc-200,
html.dark .border-gray-200,
html.dark .border-zinc-100 {
  border-color: #27272a !important;
}

html.dark input,
html.dark select,
html.dark textarea {
  background-color: #27272a !important;
  color: #f4f4f5 !important;
  border-color: #3f3f46 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #71717a !important;
}

html.dark .woocommerce-order {
  background-color: #18181b !important;
  border-color: #27272a !important;
  color: #f4f4f5 !important;
}

html.dark .woocommerce-notice--success {
  color: #f4f4f5 !important;
}

/* Course Card Titles & Texts in Dark Mode */
html.dark .course-card h4,
html.dark .course-card h4 a,
html.dark .course-card h3,
html.dark .course-card h3 a,
html.dark .course-card a:not(.bg-brand-yellow),
html.dark .course-card .text-zinc-900,
html.dark .course-card .text-zinc-800 {
  color: #f4f4f5 !important;
}

html.dark .course-card h4 a:hover,
html.dark .course-card h3 a:hover {
  color: #ffb606 !important;
}

html.dark .course-card p,
html.dark .course-card .text-zinc-600,
html.dark .course-card .text-zinc-500 {
  color: #d4d4d8 !important;
}

/* Header & Mobile Drawer Logo Filter in Dark Mode */
html.dark header img,
html.dark #mobile-menu img {
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255, 182, 6, 0.5)) !important;
}

html:not(.dark) header img,
html:not(.dark) #mobile-menu img {
  filter: none !important;
}

/* Theme Toggle Button Styling (Light Mode Header -> Dark Button) */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 0.75rem;
  background-color: #18181b !important;
  border: 1.5px solid #27272a !important;
  color: #ffffff !important;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.theme-toggle-btn i {
  color: #ffb606 !important;
  font-size: 0.95rem !important;
  transition: transform 0.3s ease;
}

.theme-toggle-btn:hover {
  background-color: #ffb606 !important;
  border-color: #ffb606 !important;
  transform: scale(1.06);
  box-shadow: 0 0 12px rgba(255, 182, 6, 0.4) !important;
}

.theme-toggle-btn:hover i {
  color: #09090b !important;
  transform: rotate(15deg);
}

/* Dark Mode Header -> Light Button */
html.dark .theme-toggle-btn {
  background-color: #ffffff !important;
  border-color: #e4e4e7 !important;
  color: #09090b !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

html.dark .theme-toggle-btn i {
  color: #d97706 !important;
}

html.dark .theme-toggle-btn:hover {
  background-color: #ffb606 !important;
  border-color: #ffb606 !important;
}

html.dark .theme-toggle-btn:hover i {
  color: #09090b !important;
}

/* Mobile Theme Toggle Button Size Adjustment */
@media (max-width: 639px) {
  .theme-toggle-btn {
    width: 1.85rem !important;
    height: 1.85rem !important;
    min-width: 1.85rem !important;
    min-height: 1.85rem !important;
    border-radius: 0.5rem !important;
    padding: 0 !important;
  }
  .theme-toggle-btn i {
    font-size: 0.75rem !important;
  }
}

/* TikTok Social Button Visibility in Dark Mode */
html.dark .social-btn-tt {
  background-color: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #f4f4f5 !important;
}

html.dark .social-btn-tt i,
html.dark .social-btn-tt span {
  color: #f4f4f5 !important;
}

html.dark .social-btn-tt:hover {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
  color: #09090b !important;
}

html.dark .social-btn-tt:hover i,
html.dark .social-btn-tt:hover span {
  color: #09090b !important;
}

/* Animated Success Checkmark High-Contrast Styling */
.woocommerce-order .success-animation,
.success-animation {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  width: 100%;
}

.woocommerce-order svg circle,
.woocommerce-order svg path,
.woocommerce-order .checkmark__circle,
.woocommerce-order .checkmark__check,
.success-animation circle,
.success-animation path,
svg.checkmark circle,
svg.checkmark path,
circle.checkmark__circle,
path.checkmark__check {
  stroke: #10b981 !important; /* Vivid emerald green color */

}

/* Dark Mode Success Animation Visibility */
html.dark .woocommerce-order svg circle,
html.dark .woocommerce-order svg path,
html.dark .success-animation circle,
html.dark .success-animation path,
html.dark svg.checkmark circle,
html.dark svg.checkmark path {
  stroke: #34d399 !important; /* Bright Emerald Green for Dark Mode */
}