.bg-photo {
  background: url(/assets/home-bg-4298d40a43332117bc83240f586accae9a03dc4e4d35755a4bc9d633f63fccf1.jpg);
}

.bg-head {
  background: url(/assets/header-bg-1bbc79513706f2306e9191b734a1457f0d93aee1d3d8d302d73234e76b604d0b.png);
}

.disabled-link {
  pointer-events: none;
  opacity: 0.5;
}

/* Modern Header Submenu */
.sub-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.group:hover .sub-menu,
.sub-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 1024px) {
  .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }
  .sub-menu.active {
    display: block;
  }
}

/* Ads & Layout Helpers */
.ad {
  border: 1px solid #e2e8f0;
  padding: 10px;
  margin: 20px 0;
  text-align: center;
  background-color: #f8fafc;
  margin-top: 25px !important;
  margin-bottom: 25px !important;
  border-radius: 12px;
}

/* Glassmorphism & Ambient Backgrounds */
.bg-grid-pattern {
  background-size: 32px 32px;
  background-image: 
    linear-gradient(to right, rgba(226, 232, 240, 0.4) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(226, 232, 240, 0.4) 1px, transparent 1px);
}

.dark .bg-grid-pattern {
  background-image: 
    linear-gradient(to right, rgba(30, 41, 59, 0.5) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(30, 41, 59, 0.5) 1px, transparent 1px);
}

.glow-emerald {
  box-shadow: 0 0 50px -10px rgba(52, 211, 153, 0.3);
}

.glow-blue {
  box-shadow: 0 0 50px -10px rgba(96, 165, 250, 0.3);
}

/* Card Hover Elevation */
.bento-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.08);
}

/* Infinite Marquee Ticker for Brand Logos */
@keyframes marquee-infinite {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee-infinite {
  display: flex;
  width: max-content;
  animation: marquee-infinite 25s linear infinite;
}

.animate-marquee-infinite:hover {
  animation-play-state: paused;
}

/* Prevent legacy stickyadd class from injecting solid background box around floating navbar */
.main-menu nav.stickyadd,
.main-menu .stickyadd {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Fix input field styling overrides & WebKit autofill boxed backgrounds */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select,
.form-input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0px 1000px #ffffff inset !important;
  -webkit-text-fill-color: #0f172a !important;
  border-radius: 0.75rem !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Scoped Auth Form Control Overrides */
.auth-input {
  border: 1px solid #cbd5e1 !important;
  border-radius: 0.75rem !important;
  background-color: #ffffff !important;
  color: #0f172a !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.875rem !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.auth-input:focus {
  border-color: #059669 !important;
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12) !important;
}

.auth-btn-primary {
  background: linear-gradient(135deg, #059669 0%, #0d9488 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  border-radius: 0.75rem !important;
  padding: 0.75rem 1.25rem !important;
  box-shadow: 0 4px 14px rgba(5, 150, 105, 0.28) !important;
  transition: all 0.2s ease-in-out !important;
  border: none !important;
}

.auth-btn-primary:hover {
  background: linear-gradient(135deg, #047857 0%, #0f766e 100%) !important;
  box-shadow: 0 6px 18px rgba(5, 150, 105, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* Admin Layout & Sidebar Collapsible Mechanics */
#sidebar {
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s ease-in-out !important;
}

@media (min-width: 1024px) {
  #sidebar {
    position: static !important;
    transform: none !important;
    flex-shrink: 0 !important;
  }

  body:not(.sidebar-expanded) #sidebar {
    width: 5rem !important;
    min-width: 5rem !important;
    max-width: 5rem !important;
  }

  body.sidebar-expanded #sidebar {
    width: 16rem !important;
    min-width: 16rem !important;
    max-width: 16rem !important;
  }

  body:not(.sidebar-expanded) #sidebar .truncate {
    display: none !important;
  }

  body.sidebar-expanded #sidebar .truncate {
    display: inline !important;
    opacity: 1 !important;
  }
}

/* Rich Text / TinyMCE WYSIWYG Content Styles */
.wysiwyg-content {
  color: #1e293b;
  font-size: 1rem;
  line-height: 1.75;
}
.wysiwyg-content h1 {
  font-size: 2.25rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 1rem !important;
  color: #0f172a !important;
}
.wysiwyg-content h2 {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-top: 1.25rem !important;
  margin-bottom: 0.75rem !important;
  color: #0f172a !important;
}
.wysiwyg-content h3 {
  font-size: 1.35rem !important;
  font-weight: 600 !important;
  margin-top: 1rem !important;
  margin-bottom: 0.5rem !important;
  color: #0f172a !important;
}
.wysiwyg-content p {
  margin-bottom: 1rem !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
}
.wysiwyg-content ul {
  list-style-type: disc !important;
  list-style-position: outside !important;
  padding-left: 1.75rem !important;
  margin-top: 0.75rem !important;
  margin-bottom: 1.25rem !important;
}
.wysiwyg-content ol {
  list-style-type: decimal !important;
  list-style-position: outside !important;
  padding-left: 1.75rem !important;
  margin-top: 0.75rem !important;
  margin-bottom: 1.25rem !important;
}
.wysiwyg-content li {
  margin-bottom: 0.5rem !important;
  line-height: 1.7 !important;
  color: #334155 !important;
}
.wysiwyg-content li > p {
  margin-bottom: 0.25rem !important;
  margin-top: 0 !important;
}
.wysiwyg-content li > ul,
.wysiwyg-content li > ol {
  margin-top: 0.35rem !important;
  margin-bottom: 0.35rem !important;
  padding-left: 1.25rem !important;
}
.wysiwyg-content blockquote {
  border-left: 4px solid #059669 !important;
  background-color: #f0fdf4 !important;
  padding: 0.75rem 1.25rem !important;
  margin: 1.25rem 0 !important;
  border-radius: 0 0.75rem 0.75rem 0 !important;
  font-style: italic !important;
  color: #064e3b !important;
}
.wysiwyg-content pre {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  padding: 1rem 1.25rem !important;
  border-radius: 0.75rem !important;
  overflow-x: auto !important;
  margin: 1.25rem 0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.875rem !important;
}
.wysiwyg-content code {
  background-color: #f1f5f9 !important;
  color: #0f766e !important;
  padding: 0.2rem 0.4rem !important;
  border-radius: 0.375rem !important;
  font-size: 0.875rem !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}
.wysiwyg-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 1rem !important;
  margin: 1.25rem 0 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
}
.wysiwyg-content a {
  color: #059669 !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}
.wysiwyg-content a:hover {
  color: #047857 !important;
}

/* Trix Editor WYSIWYG Live Styling inside the Admin Form */
trix-toolbar {
  margin-bottom: 0.75rem !important;
}

trix-toolbar .trix-button-group {
  border: 1px solid #cbd5e1 !important;
  border-radius: 0.75rem !important;
  background-color: #f8fafc !important;
  overflow: hidden !important;
}

trix-toolbar .trix-button {
  border-bottom: none !important;
  transition: all 0.2s ease !important;
}

trix-toolbar .trix-button:hover {
  background-color: #e2e8f0 !important;
}

trix-toolbar .trix-button.trix-active {
  background-color: #d1fae5 !important;
  color: #047857 !important;
}

trix-editor {
  min-height: 350px !important;
  padding: 1.25rem !important;
  border-radius: 1rem !important;
  border: 1px solid #e2e8f0 !important;
  background-color: #ffffff !important;
  color: #334155 !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
  outline: none !important;
}

trix-editor:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1) !important;
}

trix-editor h1 {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.75rem !important;
  line-height: 1.3 !important;
}

trix-editor blockquote {
  margin: 1.25rem 0 !important;
  padding: 1rem 1.25rem !important;
  background-color: #f0fdf4 !important;
  border-left: 4px solid #10b981 !important;
  border-radius: 0 0.75rem 0.75rem 0 !important;
  color: #166534 !important;
  font-style: italic !important;
}

trix-editor pre {
  margin: 1.25rem 0 !important;
  padding: 1rem 1.25rem !important;
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border-radius: 0.75rem !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.875rem !important;
  overflow-x: auto !important;
}

trix-editor code {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  padding: 0.2rem 0.4rem !important;
  border-radius: 0.375rem !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
  font-size: 0.875em !important;
}

trix-editor pre code {
  background-color: transparent !important;
  color: inherit !important;
  padding: 0 !important;
}

trix-editor ul {
  list-style-type: disc !important;
  padding-left: 1.5rem !important;
  margin: 1rem 0 !important;
}

trix-editor ol {
  list-style-type: decimal !important;
  padding-left: 1.5rem !important;
  margin: 1rem 0 !important;
}

trix-editor li {
  margin-bottom: 0.375rem !important;
}

trix-editor a {
  color: #059669 !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

trix-editor img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 0.75rem !important;
  margin: 1.25rem auto !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  display: block !important;
}