/* Critical CSS - Loads AFTER style.css to ensure proper cascade order */
/* This file is imported after style.css in layout.tsx */

/* Fix for ORDER YOUR BURGER button - Higher specificity to override style.css */
.th-hero-wrapper .hero-img-shape-1 .logo-icon-wrap .logo-icon {
  transition: all 0.4s ease !important;
  cursor: pointer !important;
  animation: fadeInScale 0.8s ease-out 0.5s both !important;
}

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.th-hero-wrapper .hero-img-shape-1 .logo-icon-wrap .logo-icon:hover {
  background-color: var(--theme-color) !important;
  color: var(--white-color) !important;
  transform: translate(-50%, -50%) scale(1.05) !important;
  box-shadow: 0 10px 30px rgba(235, 20, 0, 0.3) !important;
}

.th-hero-wrapper .hero-img-shape-1 .logo-icon-wrap .logo-icon .order {
  font-size: 20px !important;
  color: var(--theme-color) !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 60% !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: color 0.4s ease !important;
}

.th-hero-wrapper .hero-img-shape-1 .logo-icon-wrap .logo-icon:hover .order {
  color: var(--white-color) !important;
}

.th-hero-wrapper .hero-img-shape-1 .logo-icon-wrap .logo-icon .order a,
.th-hero-wrapper .hero-img-shape-1 .logo-icon-wrap .logo-icon .order a:link,
.th-hero-wrapper .hero-img-shape-1 .logo-icon-wrap .logo-icon .order a:visited,
.th-hero-wrapper .hero-img-shape-1 .logo-icon-wrap .logo-icon .order a:active {
  font-size: 20px !important;
  color: #EB1400 !important;
  text-decoration: none !important;
  display: block !important;
  width: 100% !important;
  line-height: 1.2 !important;
  position: relative !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  margin: 0 !important;
  padding: 0 !important;
  transition: color 0.4s ease !important;
  cursor: pointer !important;
}

.th-hero-wrapper .hero-img-shape-1 .logo-icon-wrap .logo-icon:hover .order a {
  color: var(--white-color) !important;
}

.th-hero-wrapper .hero-img-shape-1 .logo-icon-wrap .logo-icon .order a:hover,
.th-hero-wrapper .hero-img-shape-1 .logo-icon-wrap .logo-icon .order a:focus {
  color: var(--white-color) !important;
  text-decoration: none !important;
  outline: none !important;
}

/* Ensure rotating text animation works */
.th-hero-wrapper .hero-img-shape-1 .logo-icon-wrap__text {
  animation: spin 20s linear infinite !important;
  -webkit-animation: spin 20s linear infinite !important;
}

/* Add pulse animation on button hover */
@keyframes buttonPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(235, 20, 0, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(235, 20, 0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(235, 20, 0, 0);
  }
}

.th-hero-wrapper .hero-img-shape-1 .logo-icon-wrap .logo-icon:active {
  animation: buttonPulse 0.6s ease-out !important;
}

/* Fix hero heading alignment - ensure proper text alignment */
.th-hero-wrapper .hero-inner .hero-style1 {
  text-align: center !important;
}

.th-hero-wrapper .hero-inner .hero-style1 .hero-title {
  text-align: center !important;
  margin: 0 auto !important;
}

.th-hero-wrapper .hero-inner .hero-style1 .sub-title {
  text-align: center !important;
  display: block !important;
}

/* Header - Remove all background images and use Tailwind */
.th-header,
.th-header *,
header,
header * {
  background-image: none !important;
}

/* Fix for background images using data-bg-src attribute */
[data-bg-src] {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

[data-bg-src].background-image {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}