/**
 * Crooked Halos Custom Domain Styles
 * 
 * This stylesheet provides critical styling rules for the crookedhalos.us domain
 * to ensure consistent display across all devices. These styles override any
 * conflicting styles and fix common display issues encountered on the custom domain.
 */

/* Critical Logo fixes */
.logo {
  display: flex !important;
  align-items: center !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.logo svg,
.logo-img {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 10px !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
}

/* Critical background fixes */
.static-bg {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: #000000 !important;
  background-image: 
    radial-gradient(circle at 15% 50%, rgba(74, 222, 128, 0.2) 0%, transparent 30%),
    radial-gradient(circle at 85% 30%, rgba(22, 163, 74, 0.3) 0%, transparent 40%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23222' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%234ade80'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  z-index: 1 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.hero-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7)) !important;
  z-index: 2 !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.hero {
  position: relative !important;
  background-color: #000000 !important;
  min-height: 100vh !important;
  z-index: 1 !important;
}

.hero-video-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  z-index: 1 !important;
  display: block !important;
}

.hero-content {
  position: relative !important;
  z-index: 3 !important;
}

/* Critical typography fixes */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Raleway', sans-serif !important;
  color: #ffffff !important;
  visibility: visible !important;
  opacity: 1 !important;
}

p, span, div {
  font-family: 'Montserrat', sans-serif !important;
  color: #ffffff !important;
  visibility: visible !important;
}

/* Critical button fixes */
button, .button {
  font-family: 'Raleway', sans-serif !important;
  background-color: #4ade80 !important;
  color: #0f0f0f !important;
  border-radius: 8px !important;
  cursor: pointer !important;
  padding: 0.8rem 1.5rem !important;
  display: inline-block !important;
}

button:hover, .button:hover {
  background-color: #86efac !important;
}

.secondary-button {
  background-color: transparent !important;
  color: #4ade80 !important;
  border: 2px solid #4ade80 !important;
}

.secondary-button:hover {
  background-color: rgba(74, 222, 128, 0.1) !important;
}

.donate-button {
  background-color: #16a34a !important;
  color: #ffffff !important;
}

.donate-button:hover {
  background-color: #4ade80 !important;
}

/* Critical form fixes */
input, textarea {
  background-color: rgba(255, 255, 255, 0.05) !important;
  border: 2px solid rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
  border-radius: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
}

input:focus, textarea:focus {
  outline: none !important;
  border-color: #4ade80 !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Critical mobile fixes */
@media (max-width: 768px) {
  body {
    overflow-x: hidden !important;
  }
  
  .logo {
    margin-left: 0 !important;
    flex-shrink: 0 !important;
  }
  
  .logo svg,
  .logo-img {
    margin-right: 5px !important;
    max-width: 40px !important;
    min-width: 30px !important;
    height: auto !important;
    flex-shrink: 0 !important;
  }
  
  .hero-content {
    padding: 0 1rem !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .waitlist-form {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .waitlist-form input,
  .waitlist-form textarea {
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .waitlist-form button {
    width: 100% !important;
    margin-top: 1rem !important;
  }
  
  .hero-buttons {
    justify-content: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  
  .hero-buttons .button {
    margin-top: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .hero-title {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  
  .hero-subtitle {
    font-size: 1.1rem !important;
  }
  
  .features-grid {
    grid-template-columns: 1fr !important;
  }
  
  h1 {
    font-size: 2rem !important;
  }
  
  h2 {
    font-size: 1.5rem !important;
  }
  
  .donate-button {
    width: 100% !important;
    margin: 0.5rem 0 !important;
    text-align: center !important;
  }
  
  /* Improve mobile menu positioning */
  .mobile-menu {
    width: 80% !important;
    max-width: 300px !important;
  }
  
  .mobile-menu-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 50% !important;
    z-index: 100 !important;
  }
}

/* Admin login specific fixes */
.login-container {
  background-color: rgba(0, 0, 0, 0.8) !important;
  border: 1px solid rgba(74, 222, 128, 0.1) !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  z-index: 10 !important; 
  position: relative !important;
}

.login-logo {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: 'Raleway', sans-serif !important;
  font-weight: 700 !important;
  color: #4ade80 !important;
}

.login-logo svg {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 10px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* WebSocket fallback styles */
body.websocket-fallback .hero,
body[data-domain="crookedhalos.us"] .hero {
  background-color: #000 !important;
}

body.websocket-fallback .static-bg,
body[data-domain="crookedhalos.us"] .static-bg {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* WebSocket support for custom domain - specific styles */
body[data-domain="crookedhalos.us"] .websocket-required {
  display: none !important;
}

body[data-domain="crookedhalos.us"] .websocket-alternative {
  display: block !important;
}

body[data-domain="crookedhalos.us"] .auction-live-bid {
  opacity: 0.5 !important;
  pointer-events: none !important;
}

body[data-domain="crookedhalos.us"] .auction-live-bid::after {
  content: "Admin login required" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background-color: rgba(0, 0, 0, 0.7) !important;
  padding: 0.5rem 1rem !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  white-space: nowrap !important;
}

/* Footer fixes */
footer {
  background-color: #000 !important;
  position: relative !important;
  z-index: 5 !important;
}

.footer-link {
  color: rgba(255, 255, 255, 0.6) !important;
}

.footer-link:hover {
  color: #4ade80 !important;
}

.copyright {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* Donation button fixes */
.donate-button-wrapper {
  text-align: center !important;
  margin: 1rem auto !important;
}

/* Critical animation keyframes */
@keyframes slowPan {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 100%;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Force visibility classes for elements that might be hidden */
.force-visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}