/* =========================================================
   THE MAHOHA — PREMIUM GLASS FOOTER V3
   More depth, glass, motion and contrast.
========================================================= */

footer.mh-footer-upgraded{
  --mh-burgundy:#74162C;
  --mh-burgundy-deep:#571020;
  --mh-plum:#2B1028;
  --mh-blue:#D7EFFF;
  --mh-wasabi:#D8F24A;
  --mh-blush:#F7E9EC;
  --mh-white:#FFFFFF;
  --mh-line:rgba(255,255,255,.13);
  --mh-muted:rgba(255,255,255,.68);
  --mh-ease:cubic-bezier(.16,1,.3,1);

  position:relative!important;
  width:100vw!important;
  max-width:none!important;
  margin-inline:calc((100% - 100vw) / 2)!important;
  overflow:hidden!important;
  isolation:isolate;

  color:#fff!important;
  background:
    radial-gradient(circle at 12% 0%,rgba(215,239,255,.16),transparent 28%),
    radial-gradient(circle at 88% 100%,rgba(247,233,236,.13),transparent 32%),
    radial-gradient(circle at 50% 46%,rgba(216,242,74,.035),transparent 35%),
    linear-gradient(118deg,#8A1C39 0%,#74162C 32%,#5D1025 66%,#2B1028 118%)!important;

  font-family:"Cairo","Helvetica Neue",Arial,sans-serif!important;
}

html:has(footer.mh-footer-upgraded),
body:has(footer.mh-footer-upgraded){
  overflow-x:clip!important;
}

footer.mh-footer-upgraded::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;

  background:
    linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px) 0 0/12.5vw 100%,
    linear-gradient(rgba(255,255,255,.020) 1px,transparent 1px) 0 0/100% 25%;
  opacity:.55;
}

footer.mh-footer-upgraded::after{
  content:"THE MAHOHA";
  position:absolute;
  right:3vw;
  bottom:74px;
  z-index:0;
  pointer-events:none;

  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.075);
  font:500 clamp(44px,7vw,118px)/.85 Georgia,"Times New Roman",serif;
  letter-spacing:.10em;
  white-space:nowrap;
  opacity:.58;
}

footer.mh-footer-upgraded > div:first-child{
  position:relative;
  z-index:2;
  width:min(1260px,92vw)!important;
  max-width:none!important;
  margin:0 auto!important;
  padding:44px 0 34px!important;
}

/* =========================================================
   BRAND PANEL
========================================================= */

.mh-footer-brand{
  position:relative;
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  align-items:center;
  gap:32px;

  padding:24px 26px;
  margin-bottom:28px;

  border:1px solid rgba(255,255,255,.14);
  border-radius:24px;

  background:
    linear-gradient(135deg,rgba(255,255,255,.10),rgba(255,255,255,.025) 46%,rgba(43,16,40,.18)),
    rgba(43,16,40,.14);

  box-shadow:
    0 26px 70px rgba(24,3,17,.24),
    inset 0 1px rgba(255,255,255,.10);

  backdrop-filter:blur(24px) saturate(1.18);
  -webkit-backdrop-filter:blur(24px) saturate(1.18);

  overflow:hidden;
}

.mh-footer-brand::before{
  content:"";
  position:absolute;
  inset:-35% auto -35% -12%;
  width:22%;
  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(215,239,255,.16),
      transparent
    );

  transform:rotate(10deg);
  opacity:.34;
  animation:mhFooterGlint 9s ease-in-out infinite;
}

@keyframes mhFooterGlint{
  0%,70%,100%{left:-18%;opacity:0}
  78%{opacity:.34}
  92%{left:110%;opacity:0}
}

.mh-footer-logo-wrap{
  display:flex;
  align-items:center;
  justify-content:center;

  width:150px;
  height:112px;
  padding:8px;

  border:1px solid rgba(255,255,255,.12);
  border-radius:19px;

  background:
    linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.025));

  box-shadow:
    0 16px 38px rgba(26,4,18,.20),
    inset 0 1px rgba(255,255,255,.10);

  transition:
    transform .4s var(--mh-ease),
    box-shadow .4s var(--mh-ease);
}

.mh-footer-brand:hover .mh-footer-logo-wrap{
  transform:translateY(-4px) rotate(-1deg);
  box-shadow:
    0 22px 48px rgba(26,4,18,.28),
    inset 0 1px rgba(255,255,255,.12);
}

.mh-footer-logo{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.16));
}

.mh-footer-brand-copy{
  min-width:0;
  text-align:right;
}

.mh-footer-brand-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;

  color:rgba(255,255,255,.52);

  font:800 8px/1 Arial,sans-serif;
  letter-spacing:.22em;
}

.mh-footer-brand-kicker::before{
  content:"";
  width:30px;
  height:1px;
  background:var(--mh-wasabi);
  box-shadow:0 0 12px rgba(216,242,74,.28);
}

.mh-footer-brand-title{
  margin:0;

  color:#fff;

  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(31px,2.8vw,46px);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.04em;

  text-shadow:0 8px 26px rgba(43,16,40,.16);
}

.mh-footer-brand-copy p{
  max-width:620px;
  margin:12px 0 0 auto;

  color:var(--mh-muted);

  font-size:12px;
  line-height:1.9;
}

/* =========================================================
   DESKTOP GRID AS GLASS COLUMNS
========================================================= */

footer.mh-footer-upgraded .hidden.lg\:grid{
  grid-template-columns:1.25fr .72fr .95fr .65fr!important;
  gap:14px!important;
  align-items:stretch!important;
}

footer.mh-footer-upgraded .hidden.lg\:grid > div{
  position:relative;
  min-height:100%;
  padding:22px 20px!important;

  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;

  background:
    linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018)),
    rgba(43,16,40,.12);

  box-shadow:
    0 16px 40px rgba(28,4,18,.14),
    inset 0 1px rgba(255,255,255,.07);

  backdrop-filter:blur(18px) saturate(1.10);
  -webkit-backdrop-filter:blur(18px) saturate(1.10);

  transition:
    transform .32s var(--mh-ease),
    border-color .28s ease,
    background .28s ease,
    box-shadow .32s var(--mh-ease);
}

footer.mh-footer-upgraded .hidden.lg\:grid > div:hover{
  transform:translateY(-5px);
  border-color:rgba(216,242,74,.22);
  background:
    linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025)),
    rgba(43,16,40,.15);

  box-shadow:
    0 22px 54px rgba(28,4,18,.22),
    inset 0 1px rgba(255,255,255,.09);
}

footer.mh-footer-upgraded h3{
  margin:0 0 16px!important;
  color:#fff!important;
  font-size:14px!important;
  font-weight:800!important;
}

footer.mh-footer-upgraded p,
footer.mh-footer-upgraded li,
footer.mh-footer-upgraded a{
  color:rgba(255,255,255,.68)!important;
}

footer.mh-footer-upgraded li a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  text-decoration:none!important;
  transition:
    color .22s ease,
    transform .22s var(--mh-ease);
}

footer.mh-footer-upgraded li a::before{
  content:"";
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(216,242,74,.44);
  box-shadow:0 0 0 0 rgba(216,242,74,.0);
  transition:.22s ease;
}

footer.mh-footer-upgraded li a:hover{
  color:#fff!important;
  transform:translateX(-3px);
}

footer.mh-footer-upgraded li a:hover::before{
  background:var(--mh-wasabi);
  box-shadow:0 0 0 4px rgba(216,242,74,.10);
}

/* =========================================================
   CONTACT
========================================================= */

footer.mh-footer-upgraded .space-y-4.text-sm > .flex{
  align-items:center!important;
  gap:13px!important;
}

footer.mh-footer-upgraded .space-y-4.text-sm > .flex > div:first-child{
  width:39px!important;
  height:39px!important;
  border-radius:12px!important;

  border:1px solid rgba(255,255,255,.12)!important;
  background:
    linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.03))!important;

  color:var(--mh-wasabi)!important;

  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    0 10px 24px rgba(23,3,16,.13)!important;
}

footer.mh-footer-upgraded .space-y-4.text-sm > .flex > div:first-child svg{
  width:18px!important;
  height:18px!important;
  color:var(--mh-wasabi)!important;
}

footer.mh-footer-upgraded .space-y-4.text-sm p{
  margin:0!important;
  color:rgba(255,255,255,.64)!important;
  font-size:11px!important;
  line-height:1.75!important;
}

footer.mh-footer-upgraded .space-y-4.text-sm p span.font-semibold{
  color:#fff!important;
}

footer.mh-footer-upgraded .space-y-4.text-sm p a:hover{
  color:var(--mh-wasabi)!important;
}

/* =========================================================
   SOCIAL
========================================================= */

footer.mh-footer-upgraded .mh-social-link{
  display:grid!important;
  place-items:center!important;

  width:42px!important;
  height:42px!important;

  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:12px!important;

  background:
    linear-gradient(145deg,rgba(255,255,255,.10),rgba(255,255,255,.03))!important;

  color:#fff!important;
  opacity:1!important;

  box-shadow:
    inset 0 1px rgba(255,255,255,.08),
    0 10px 24px rgba(23,3,16,.10)!important;

  transition:
    transform .28s var(--mh-ease),
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease!important;
}

footer.mh-footer-upgraded .mh-social-link svg{
  width:19px!important;
  height:19px!important;
  fill:currentColor!important;
  color:#fff!important;
}

footer.mh-footer-upgraded .mh-social-link:hover{
  transform:translateY(-5px) scale(1.04)!important;
}

footer.mh-footer-upgraded .mh-social-link[data-platform="facebook"]:hover{
  background:#1877F2!important;
  border-color:#1877F2!important;
  box-shadow:0 14px 30px rgba(24,119,242,.34)!important;
}

footer.mh-footer-upgraded .mh-social-link[data-platform="instagram"]:hover{
  background:
    radial-gradient(circle at 30% 108%,#FEDA75 0 22%,#FA7E1E 36%,#D62976 56%,#962FBF 74%,#4F5BD5 100%)!important;
  border-color:#D62976!important;
  box-shadow:0 14px 30px rgba(214,41,118,.32)!important;
}

footer.mh-footer-upgraded .mh-social-link[data-platform="tiktok"]:hover{
  background:#111!important;
  border-color:#25F4EE!important;
  box-shadow:
    -4px 4px 0 rgba(37,244,238,.16),
    4px -4px 0 rgba(254,44,85,.16),
    0 14px 30px rgba(0,0,0,.30)!important;
}

/* =========================================================
   MOBILE
========================================================= */

footer.mh-footer-upgraded .lg\:hidden .border-t{
  border-color:rgba(255,255,255,.10)!important;
}

footer.mh-footer-upgraded .lg\:hidden button{
  color:#fff!important;
}

footer.mh-footer-upgraded .lg\:hidden button h3{
  margin:0!important;
  color:#fff!important;
  font-size:13px!important;
}

footer.mh-footer-upgraded .lg\:hidden button svg{
  color:var(--mh-wasabi)!important;
}

/* =========================================================
   CREDIT
========================================================= */

.mh-footer-credit{
  position:relative;
  z-index:3;

  width:100%;

  border-top:1px solid rgba(255,255,255,.11);

  background:rgba(23,3,16,.34);

  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.mh-footer-credit-inner{
  width:min(1260px,92vw);
  min-height:66px;

  margin:0 auto;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.mh-footer-copy{
  color:rgba(255,255,255,.46);
  font:700 8px/1.4 Arial,sans-serif;
  letter-spacing:.12em;
}

.mh-footer-developer{
  display:inline-flex;
  align-items:center;
  gap:9px;

  color:rgba(255,255,255,.52)!important;

  font:700 8px/1.4 Arial,sans-serif;
  letter-spacing:.10em;
  text-transform:uppercase;
  text-decoration:none!important;
}

.mh-footer-developer::after{
  content:"↗";

  display:grid;
  place-items:center;

  width:22px;
  height:22px;

  border-radius:7px;

  background:var(--mh-wasabi);
  color:var(--mh-plum);

  font-size:10px;

  box-shadow:0 8px 18px rgba(216,242,74,.12);

  transition:
    transform .25s var(--mh-ease),
    box-shadow .25s ease;
}

.mh-footer-developer:hover{
  color:#fff!important;
}

.mh-footer-developer:hover::after{
  transform:translate(2px,-2px) rotate(4deg);
  box-shadow:0 12px 24px rgba(216,242,74,.18);
}

footer.mh-footer-upgraded .mh-easyorders-powered{
  display:none!important;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:1023px){

  footer.mh-footer-upgraded > div:first-child{
    width:min(92vw,640px)!important;
    padding:30px 0 26px!important;
  }

  .mh-footer-brand{
    grid-template-columns:92px 1fr;
    gap:16px;
    padding:18px;
    border-radius:18px;
  }

  .mh-footer-logo-wrap{
    width:92px;
    height:76px;
  }

  .mh-footer-brand-title{
    font-size:26px;
  }

  .mh-footer-brand-copy p{
    font-size:9.5px;
    line-height:1.65;
  }

  footer.mh-footer-upgraded::after{
    right:4vw;
    bottom:86px;
    font-size:clamp(30px,10vw,50px);
    opacity:.34;
  }

  footer.mh-footer-upgraded .lg\:hidden .flex.flex-wrap.gap-3{
    justify-content:center;
  }

  .mh-footer-credit-inner{
    min-height:80px;
    flex-direction:column;
    justify-content:center;
    gap:8px;
    text-align:center;
  }

  .mh-footer-copy,
  .mh-footer-developer{
    font-size:7.5px;
  }
}

@media(max-width:520px){

  footer.mh-footer-upgraded > div:first-child{
    width:90vw!important;
    padding-top:24px!important;
  }

  .mh-footer-brand{
    grid-template-columns:72px 1fr;
    gap:13px;
    padding:15px;
  }

  .mh-footer-logo-wrap{
    width:72px;
    height:60px;
    padding:5px;
  }

  .mh-footer-brand-kicker{
    margin-bottom:7px;
    font-size:6.3px;
  }

  .mh-footer-brand-title{
    font-size:20px;
  }

  .mh-footer-brand-copy p{
    margin-top:7px;
    font-size:8.5px;
  }

  footer.mh-footer-upgraded .space-y-4.text-sm p{
    font-size:10px!important;
  }

  footer.mh-footer-upgraded .mh-social-link{
    width:39px!important;
    height:39px!important;
  }
}

@media(prefers-reduced-motion:reduce){
  .mh-footer-brand::before{
    animation:none!important;
  }

  footer.mh-footer-upgraded *,
  footer.mh-footer-upgraded *::before,
  footer.mh-footer-upgraded *::after{
    transition:none!important;
  }
}