/* ============================================
   Custom CSS for Moople Animation & Film
   ============================================ */

/* Base Styles */
body {
  font-family: "Kanit", sans-serif;
  -webkit-font-smoothing: antialiased;
  /* background-color: #ffd6a8; */
  overflow: auto !important;
}

h2 {
  line-height: 40px;
}

/* Perspective Grid */
.perspective-grid {
  background-image: linear-gradient(rgba(51, 65, 85, 0.15) 1px, transparent 1px),
    linear-gradient(90deg, rgba(51, 65, 85, 0.15) 1px, transparent 1px);
  background-size: 80px 80px;
  perspective: 1200px;
  transform: rotateX(25deg);
  transform-origin: top;
}

/* Scrollbar Hide */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Marquee Animation */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

@keyframes pulse-slow {
  0%, 100% {
    opacity: 0.08;
    transform: scale(1);
  }
  50% {
    opacity: 0.15;
    transform: scale(1.05);
  }
}

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

/* ============================================
   Scholarship Section Fade-in Animation
   ============================================ */

/* Fade-up animation for scholarship section */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .scholarship-fade-up {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.scholarship-fade-up {
  animation: fadeUp 0.6s ease-out forwards;
}

/* ============================================
   Gradient Fixes for Flowbite Compatibility
   ============================================ */

/* Dark Blue Gradient - Specific Fixes */
.bg-gradient-to-r.from-\[#0A2540\].to-\[#1e293b\] {
  background: linear-gradient(to right, #0a2540, #1e293b) !important;
  background-image: linear-gradient(to right, #0a2540, #1e293b) !important;
}

/* White to Slate Gradient */
.bg-gradient-to-r.from-white.to-slate-200 {
  background: linear-gradient(to right, #ffffff, rgb(226, 232, 240)) !important;
  background-image: linear-gradient(
    to right,
    #ffffff,
    rgb(226, 232, 240)
  ) !important;
}

/* Hover State for Button Gradient */
.group:hover .bg-gradient-to-r.from-white.to-slate-200,
.group:hover .group-hover\:from-blue-50.group-hover\:to-white {
  background: linear-gradient(to right, rgb(239, 246, 255), #ffffff) !important;
  background-image: linear-gradient(
    to right,
    rgb(239, 246, 255),
    #ffffff
  ) !important;
}

/* General Gradient Utilities */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.bg-gradient-to-t {
  background-image: linear-gradient(to top, var(--tw-gradient-stops));
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.bg-gradient-to-tr {
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}

.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

/* ============================================
   Flowbite Override Styles (Loaded after Flowbite)
   ============================================ */

/* Override Flowbite and ensure gradients work with !important */
.bg-gradient-to-r {
  background-image: linear-gradient(
    to right,
    var(--tw-gradient-stops)
  ) !important;
  background: linear-gradient(to right, var(--tw-gradient-stops)) !important;
}

.bg-gradient-to-t {
  background-image: linear-gradient(
    to top,
    var(--tw-gradient-stops)
  ) !important;
  background: linear-gradient(to top, var(--tw-gradient-stops)) !important;
}

.bg-gradient-to-b {
  background-image: linear-gradient(
    to bottom,
    var(--tw-gradient-stops)
  ) !important;
  background: linear-gradient(to bottom, var(--tw-gradient-stops)) !important;
}

.bg-gradient-to-tr {
  background-image: linear-gradient(
    to top right,
    var(--tw-gradient-stops)
  ) !important;
  background: linear-gradient(
    to top right,
    var(--tw-gradient-stops)
  ) !important;
}

.bg-gradient-to-br {
  background-image: linear-gradient(
    to bottom right,
    var(--tw-gradient-stops)
  ) !important;
  background: linear-gradient(
    to bottom right,
    var(--tw-gradient-stops)
  ) !important;
}

/* Specific gradient color fixes - direct color values - HIGHEST PRIORITY */
[class*="from-[#0A2540]"][class*="to-[#1e293b]"],
[class*="from-\\[#0A2540\\]"][class*="to-\\[#1e293b\\]"],
.bg-gradient-to-r.from-\[#0A2540\].to-\[#1e293b\],
div.bg-gradient-to-r.from-\[#0A2540\].to-\[#1e293b\],
#marquee-section,
#enrollment-modal [class*="from-[#0A2540]"],
.container [class*="from-[#0A2540]"][class*="to-[#1e293b]"] {
  background: linear-gradient(to right, #0a2540, #1e293b) !important;
  background-image: linear-gradient(to right, #0a2540, #1e293b) !important;
  background-color: #0a2540 !important;
}

.bg-gradient-to-r.from-white.to-slate-200,
div.bg-gradient-to-r.from-white.to-slate-200 {
  background: linear-gradient(to right, #ffffff, rgb(226, 232, 240)) !important;
  background-image: linear-gradient(
    to right,
    #ffffff,
    rgb(226, 232, 240)
  ) !important;
}

.group:hover
  .bg-gradient-to-r.from-white.to-slate-200.group-hover\:from-blue-50.group-hover\:to-white,
.group:hover .bg-gradient-to-r.group-hover\:from-blue-50.group-hover\:to-white {
  background: linear-gradient(to right, rgb(239, 246, 255), #ffffff) !important;
  background-image: linear-gradient(
    to right,
    rgb(239, 246, 255),
    #ffffff
  ) !important;
}

/* ============================================
           Form Select Dropdown Fix
           ============================================ */

/* Ensure select dropdowns appear above other elements */
select {
  position: relative;
  z-index: 50;
}

/* Fix for select dropdowns in form containers */
#enrollment-form select {
  z-index: 9999 !important;
  position: relative;
}

/* Ensure select dropdown options are visible */
select option {
  z-index: 9999;
  position: relative;
}

/* Fix form container to allow dropdown overflow */
#enrollment-form {
  overflow: visible !important;
}

/* Ensure form container doesn't clip dropdowns */
#enrollment-form > div {
  overflow: visible !important;
}

/* Fix for select dropdowns - ensure they render outside container */
#enrollment-form select:focus {
  z-index: 99999 !important;
  position: relative;
}