/* =========================================
   MRFIXER MAIN CSS - COMPLETE VERSION
   All styles included
   ========================================= */
/* =========================================
   MRFIXER MAIN CSS
   Optimized full production version
   ========================================= */

/* ===== SAFE AREA ===== */
.safe-area-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ===== HEADER ===== */
.header-main {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: rgba(24, 24, 27, 0.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: all .3s ease;
  padding: .5rem 0;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

@media (min-width:640px){
  .header-main{padding:.75rem 0}
}

.header-container{
  max-width:1280px;
  margin:0 auto;
  padding:0 .75rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

@media (min-width:640px){
  .header-container{padding:0 1rem}
}

.header-logo{
  display:flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;
  color:#fff;
}

.header-logo img{
  width:50px;
  height:50px;
}

.header-brand{
  font-size:1.125rem;
  font-weight:700;
}

.header-cta{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding:.5rem 1rem;
  background:#FFB800;
  color:#18181b;
  border-radius:.5rem;
  font-weight:700;
  font-size:.875rem;
  text-decoration:none;
  transition:.2s ease;
}

@media (min-width:640px){
  .header-cta{
    padding:.75rem 1.5rem;
    font-size:1rem;
  }
}

.header-cta:hover{
  background:#f59e0b;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1);
}

.header-cta:active{
  background:#b45309;
}

.header-icon{
  width:1rem;
  height:1rem;
}

@media (min-width:640px){
  .header-icon{
    width:1.25rem;
    height:1.25rem;
  }
}

/* ===== DESKTOP NAV ===== */
.desktop-nav{display:none}

@media (min-width:640px){
  .desktop-nav{
    display:flex;
    align-items:center;
    gap:1.5rem;
    margin-left:2rem;
  }
}

/* ===== DROPDOWN ===== */
.dropdown{position:relative}

.dropdown-toggle{
  display:flex;
  align-items:center;
  gap:.5rem;
  background:none;
  border:0;
  color:#d4d4d8;
  cursor:pointer;
  font-weight:500;
}

.dropdown-toggle:hover{color:#FFB800}

.dropdown-arrow{
  width:16px;
  height:16px;
  transition:transform 0.2s;
}

.dropdown.active .dropdown-arrow{
  transform:rotate(180deg);
}

.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  min-width:240px;
  background:#18181b;
  border:1px solid #27272a;
  border-radius:.5rem;
  padding:.5rem;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  transition:.2s ease;
}

.dropdown.active .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

.dropdown-menu a{
  display:block;
  padding:.75rem 1rem;
  color:#d4d4d8;
  border-radius:.375rem;
  text-decoration:none;
}

.dropdown-menu a:hover{
  background:#27272a;
  color:#FFB800;
}

/* ===== BURGER ===== */
.burger-btn{
  display:flex;
  flex-direction:column;
  justify-content:center;
  width:44px;
  height:44px;
  background:none;
  border:0;
  cursor:pointer;
}

@media (min-width:640px){
  .burger-btn{display:none}
}

.burger-line{
  width:24px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:.3s ease;
}

.burger-line:not(:last-child){margin-bottom:5px}

.burger-btn.active .burger-line:nth-child(1){
  transform:rotate(45deg) translate(7px, 7px);
}

.burger-btn.active .burger-line:nth-child(2){
  opacity:0;
}

.burger-btn.active .burger-line:nth-child(3){
  transform:rotate(-45deg) translate(7px, -7px);
}

.burger-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  opacity:0;
  visibility:hidden;
  transition:.3s ease;
}

.burger-overlay.active{
  opacity:1;
  visibility:visible;
}

.burger-menu{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  width:280px;
  background:#18181b;
  transform:translateX(100%);
  transition:.3s ease;
  padding:1.5rem;
  padding-top:5rem;
}

.burger-menu.active{
  transform:translateX(0);
}

.burger-close{
  position:absolute;
  top:1rem;
  right:1rem;
  width:44px;
  height:44px;
  background:none;
  border:0;
  color:#fff;
  font-size:2rem;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.burger-close:hover{
  color:#FFB800;
}

.burger-section{
  margin-bottom:1rem;
}

.burger-heading{
  color:#FFB800;
  font-size:0.875rem;
  font-weight:700;
  text-transform:uppercase;
  margin-bottom:0.75rem;
  letter-spacing:0.05em;
}

.burger-divider{
  height:1px;
  background:#27272a;
  margin:1.5rem 0;
}

.burger-nav a{
  display:block;
  padding:.5rem 0;
  color:#fff;
  text-decoration:none;
}

.burger-nav a:hover{
  color:#FFB800;
}

/* ===== FOOTER ===== */
.footer-main{
  background:#09090b;
  padding:3rem 1rem 2rem;
  color:#a1a1aa;
  padding-left:env(safe-area-inset-left);
  padding-right:env(safe-area-inset-right);
}

.footer-grid{
  max-width:1280px;
  margin:0 auto 2rem;
  display:grid;
  gap:2rem;
}

@media (min-width:640px){
  .footer-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (min-width:1024px){
  .footer-grid{
    grid-template-columns:repeat(4,1fr);
  }
}

.footer-heading{
  font-weight:700;
  color:#fff;
  margin-bottom:1rem;
}

.footer-col{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
}

.footer-text{
  color:#a1a1aa;
  font-size:0.875rem;
  line-height:1.6;
}

.footer-text-small{
  color:#a1a1aa;
  font-size:0.75rem;
  margin-bottom:0.25rem;
}

.footer-company{
  color:#a1a1aa;
  font-size:0.875rem;
  line-height:1.8;
}

.footer-company p{
  margin:0.25rem 0;
}

.footer-address{
  color:#a1a1aa;
  font-size:0.875rem;
  line-height:1.8;
  margin-top:1rem;
}

.footer-address p{
  margin:0.25rem 0;
}

.footer-address-label{
  font-weight:600;
  color:#fff;
  margin-bottom:0.5rem;
}

.footer-hours{
  color:#a1a1aa;
  font-size:0.875rem;
  line-height:1.8;
}

.footer-hours p{
  margin:0.25rem 0;
}

.footer-hours strong{
  color:#FFB800;
}

.footer-email{
  margin-top:1rem;
}

.footer-disclaimer{
  max-width:1280px;
  margin:3rem auto 2rem;
  padding:2rem;
  background:#18181b;
  border-radius:0.5rem;
  border:1px solid #27272a;
  color:#a1a1aa;
  font-size:0.875rem;
  line-height:1.8;
}

.footer-disclaimer h3{
  color:#fff;
  font-size:1rem;
  font-weight:700;
  margin-bottom:0.75rem;
}

.footer-disclaimer p{
  margin-bottom:0.75rem;
}

.footer-legal{
  border-top:1px solid #27272a;
  padding-top:2rem;
  font-size:0.8125rem;
  text-align:center;
  max-width:1280px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:1rem;
  align-items:center;
}

@media (min-width:768px){
  .footer-legal{
    flex-direction:row;
    justify-content:space-between;
  }
}

.footer-legal p{
  color:#71717a;
  margin:0;
}

.footer-legal-nav{
  display:flex;
  gap:1.5rem;
  flex-wrap:wrap;
  justify-content:center;
}

@media (min-width:768px){
  .footer-legal-nav{
    justify-content:flex-end;
  }
}

.footer-legal-nav a{
  color:#a1a1aa;
  text-decoration:none;
  font-size:0.875rem;
  transition:color 0.2s ease;
}

.footer-legal-nav a:hover{
  color:#f59e0b;
}

.footer-nav a{
  display:block;
  padding:0.25rem 0;
  color:#a1a1aa;
  text-decoration:none;
  font-size:0.875rem;
}

.footer-nav a:hover{
  color:#f59e0b;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce){
  *{
    animation:none!important;
    transition:none!important;
  }
}
.footer-main {
  position: relative;
  overflow: hidden;
  background: #09090b;
  padding: 3rem 1rem 2rem;
  color: #a1a1aa;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Background decoration SVG - strictly controlled */
.footer-main svg:not(.footer-social svg),
.footer-main::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1200px;
  height: auto;
  max-height: 300px;
  z-index: 0;
  opacity: 0.05;
  pointer-events: none;
}

/* Ensure footer content is above background */
.footer-main > * {
  position: relative;
  z-index: 2;
}
/* Footer Social Icons - FIXED SIZE */
.footer-social {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.footer-social a {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== ICON-SOCIAL ===== */
.icon-social {
  width: 24px;
  height: 24px;
  fill: #a1a1aa;
  transition: fill 0.2s;
}

.icon-social:hover {
  fill: #f59e0b;
}

/* =========================================
   UTILITY CLASSES (from inline CSS)
   Below-the-fold styles only
   ========================================= */

/* Layout utilities */
.container{max-width:1280px;margin:0 auto;padding:0 1rem}
.max-w-5xl{max-width:64rem}
.max-w-4xl{max-width:56rem}
.mx-auto{margin-left:auto;margin-right:auto}

/* Spacing utilities */
.px-4{padding-left:1rem;padding-right:1rem}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.mb-8{margin-bottom:2rem}
.mb-12{margin-bottom:3rem}
.gap-4{gap:1rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}

/* Display & Flex */
.grid{display:grid}
.flex{display:flex}
.flex-col{flex-direction:column}
.items-start{align-items:flex-start}
.justify-center{justify-content:center}

/* Text utilities */
.text-center{text-align:center}
.text-sm{font-size:0.875rem;line-height:1.25rem}
.text-base{font-size:1rem;line-height:1.5rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-xl{font-size:1.25rem;line-height:1.75rem}
.text-2xl{font-size:1.5rem;line-height:2rem}
.text-zinc-400{color:#a1a1aa}
.text-zinc-700{color:#52525b}
.leading-relaxed{line-height:1.625}

/* Background & Border */
.bg-zinc-800{background-color:#27272a}
.bg-zinc-900{background-color:#18181b}
.bg-amber-50{background-color:#fffbeb}
.border{border-width:1px}
.border-l-4{border-left-width:4px}
.border-amber-500{border-color:#f59e0b}
.border-zinc-700{border-color:#3f3f46}
.border-zinc-800{border-color:#27272a}

/* Effects */
.rounded{border-radius:0.25rem}
.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,0.05)}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,0.25)}

/* Grid columns */
.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Responsive utilities */
@media(min-width:640px){
  .sm\:px-6{padding-left:1.5rem;padding-right:1.5rem}
  .sm\:py-12{padding-top:3rem;padding-bottom:3rem}
  .sm\:gap-6{gap:1.5rem}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:text-4xl{font-size:2.25rem;line-height:2.5rem}
}

@media(min-width:768px){
  .md\:gap-8{gap:2rem}
  .md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(min-width:1024px){
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* =========================================
   COOKIE BANNER STYLES
   ========================================= */

.cookie-banner{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(12px);
  border-top:3px solid #10b981;
  padding:1.5rem;
  z-index:9999;
  box-shadow:0 -4px 24px rgba(0,0,0,0.12);
  animation:slideUp 0.4s ease-out;
}

.cookie-banner.hidden{
  display:none;
}

@keyframes slideUp{
  from{
    transform:translateY(100%);
    opacity:0;
  }
  to{
    transform:translateY(0);
    opacity:1;
  }
}

.cookie-content{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:1.5rem;
}

@media(min-width:768px){
  .cookie-content{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }
}

.cookie-text{
  flex:1;
}

.cookie-title{
  font-size:1.375rem;
  font-weight:700;
  color:#18181b;
  margin-bottom:0.75rem;
}

.cookie-description{
  font-size:1rem;
  line-height:1.6;
  color:#52525b;
  margin-bottom:0.5rem;
}

.cookie-learn-more{
  color:#10b981;
  text-decoration:underline;
  font-weight:500;
  cursor:pointer;
}

.cookie-learn-more:hover{
  color:#059669;
}

.cookie-details{
  margin-top:1rem;
  padding:1rem;
  background:#f9fafb;
  border-radius:0.5rem;
  border:1px solid #e5e7eb;
}

.cookie-details.hidden{
  display:none;
}

.cookie-category{
  margin-bottom:1rem;
}

.cookie-category:last-child{
  margin-bottom:0;
}

.cookie-category strong{
  display:block;
  color:#18181b;
  margin-bottom:0.25rem;
}

.cookie-category p{
  font-size:0.875rem;
  color:#6b7280;
  margin:0;
}

.cookie-buttons{
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}

@media(min-width:640px){
  .cookie-buttons{
    flex-direction:row;
  }
}

.cookie-btn{
  padding:1rem 2rem;
  border-radius:0.5rem;
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  transition:all 0.2s;
  border:none;
  white-space:nowrap;
}

.cookie-accept{
  background:#10b981;
  color:#fff;
}

.cookie-accept:hover{
  background:#059669;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(16,185,129,0.3);
}

.cookie-decline{
  background:#e5e7eb;
  color:#374151;
}

.cookie-decline:hover{
  background:#d1d5db;
}

/* Mobile adjustments */
@media(max-width:767px){
  .cookie-banner{
    padding:2rem 1.5rem;
    min-height:360px;
  }
  
  .cookie-title{
    font-size:1.375rem;
  }
  
  .cookie-btn{
    padding:1.25rem 2rem;
    font-size:1.125rem;
  }
}

/* Desktop compact */
@media(min-width:768px){
  .cookie-banner{
    padding:1.5rem 2rem;
  }
  
  .cookie-title{
    font-size:1.125rem;
  }
  
  .cookie-description{
    font-size:0.9375rem;
  }
  
  .cookie-btn{
    padding:0.875rem 1.75rem;
    font-size:0.9375rem;
  }
}

/* =========================================
   ADDITIONAL UTILITY CLASSES
   ========================================= */

/* More layout */
.relative{position:relative}
.absolute{position:absolute}
.fixed{position:fixed}
.inset-0{top:0;right:0;bottom:0;left:0}
.z-40{z-index:40}
.z-50{z-index:50}

/* More spacing */
.p-3{padding:0.75rem}
.p-4{padding:1rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.mt-8{margin-top:2rem}
.mt-12{margin-top:3rem}
.space-y-4>*+*{margin-top:1rem}
.space-y-6>*+*{margin-top:1.5rem}

/* More flex */
.flex-shrink-0{flex-shrink:0}
.justify-between{justify-content:space-between}
.items-center{align-items:center}

/* Background colors */
.bg-white{background-color:#fff}
.bg-zinc-50{background-color:#fafafa}
.bg-zinc-100{background-color:#f4f4f5}

/* Text colors */
.text-zinc-900{color:#18181b}

/* Width/Height */
.w-5{width:1.25rem}
.h-5{height:1.25rem}
.w-6{width:1.5rem}
.h-6{height:1.5rem}
.w-12{width:3rem}
.h-12{height:3rem}
.w-full{width:100%}
.min-h-\[52px\]{min-height:52px}
.min-h-\[56px\]{min-height:56px}

/* More responsive */
@media(min-width:640px){
  .sm\:p-4{padding:1rem}
  .sm\:p-6{padding:1.5rem}
  .sm\:p-8{padding:2rem}
  .sm\:mb-12{margin-bottom:3rem}
}

@media(min-width:768px){
  .md\:space-x-3>*+*{margin-left:0.75rem}
}

/* =========================================
   IMAGE & MEDIA UTILITIES
   ========================================= */

/* Object positioning */
.object-cover{object-fit:cover}
.object-contain{object-fit:contain}
.object-fill{object-fit:fill}

/* Image sizing */
.h-auto{height:auto}
.h-48{height:12rem}
.h-64{height:16rem}
.h-80{height:20rem}
.max-h-96{max-height:24rem}
.max-h-screen{max-height:100vh}

/* Aspect ratios */
.aspect-video{aspect-ratio:16/9}
.aspect-square{aspect-ratio:1/1}

/* More width utilities */
.max-w-3xl{max-width:48rem}
.max-w-6xl{max-width:72rem}
.max-w-7xl{max-width:80rem}