:root{
  --miracle-gold:#D4AF37;
  --miracle-dark:#1f2937;
  --miracle-white:#fff;
  --miracle-gray:#f5f6f8;
  --miracle-border:#e5e7eb;
  --miracle-shadow:0 12px 40px rgba(0,0,0,.08);

  /* NEW: Menu colors (can be overridden by inline <style> from PHP/admin) */
  --miracle-header-menu-color: var(--miracle-dark);
  --miracle-footer-menu-color: var(--miracle-dark);
  --miracle-mobile-menu-color: var(--miracle-dark);
  --miracle-mobile-menu-bg: #ffffff;
}

.miracle-main{ min-height:70vh; }

.miracle-container{
  max-width:1180px;
  margin:0 auto;
  padding:24px;
}

.miracle-card{
  background:#fff;
  border-radius:16px;
  box-shadow:var(--miracle-shadow);
  padding:18px;
  margin-bottom:16px;
}

/* Header */
.miracle-header{
  border-bottom:1px solid var(--miracle-border);
  width:100%;
  z-index:999;
}
.miracle-header.is-fixed{
  position:sticky;
  top:0;
}
.miracle-header-inner{
  max-width:1180px;
  margin:0 auto;
  padding:0 18px;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* Brand area must be allowed to grow with admin logo size */
.miracle-brand{
  display:flex;
  align-items:center;
  min-width:0;
}
.miracle-brand-link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

/* IMPORTANT: remove hard max-height cap so admin sizes can show */
.miracle-brand-logo{
  height:auto;
  width:auto;
  max-width:100%;
  object-fit:contain;
  display:block;
}
.miracle-brand-text{
  font-weight:800;
  color:var(--miracle-dark);
}

.miracle-menu-toggle{
  display:none;
  border:1px solid var(--miracle-border);
  background:#fff;
  padding:8px 10px;
  border-radius:12px;
  cursor:pointer;
}

.miracle-nav{ display:flex; align-items:center; }

.miracle-menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:16px;
}

/* Header menu link color */
.miracle-menu a{
  font-weight:600;
  color: var(--miracle-header-menu-color);
  text-decoration:none;
}
.miracle-menu a:hover{
  opacity:.85;
}

.miracle-header-right{
  display:flex;
  gap:10px;
  align-items:center;
}

/* Buttons */
.miracle-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  background:var(--miracle-gold);
  border:1px solid rgba(0,0,0,.06);
  font-weight:700;
  text-decoration:none;
  color:#111;
}
.miracle-btn.ghost{
  background:#fff;
  border:1px solid var(--miracle-border);
  color:var(--miracle-dark);
}

/* Footer */
.miracle-footer{
  border-top:1px solid var(--miracle-border);
}
.miracle-footer-inner{
  max-width:1180px;
  margin:0 auto;
  padding:18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* Allow footer logo to scale with admin sizes */
.miracle-footer-brand{
  display:flex;
  align-items:center;
  min-width:0;
}
.miracle-footer-brand a{
  display:inline-flex;
  align-items:center;
  min-width:0;
}
.miracle-footer-logo{
  height:auto;
  width:auto;
  max-width:100%;
  object-fit:contain;
  display:block;
}

.miracle-footer-menu{
  list-style:none;
  display:flex;
  gap:14px;
  padding:0;
  margin:0;
}

/* Footer menu link color */
.miracle-footer-menu a{
  color: var(--miracle-footer-menu-color);
  text-decoration:none;
  font-weight:600;
}
.miracle-footer-menu a:hover{
  opacity:.85;
}

.miracle-footer-copy{
  color: var(--miracle-dark);
  font-weight:600;
}

/* Dashboard */
.miracle-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:16px;
}
.miracle-col-12{ grid-column:span 12; }
.miracle-col-8{ grid-column:span 8; }
.miracle-col-6{ grid-column:span 6; }
.miracle-col-4{ grid-column:span 4; }

.miracle-kpi{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.miracle-kpi strong{ font-size:22px; }

/* Responsive */
@media (max-width: 900px){
  .miracle-col-8,.miracle-col-6,.miracle-col-4{ 
    grid-column:span 12; 
  }

  /* =========================
     MOBILE HEADER LOGO CONTROL
     ========================= */

  /* Header inner alignment */
  .miracle-header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  /* Control brand container width */
  .miracle-brand{
    max-width:90%;
    flex:0 0 90%;
    min-width:0;
    display:flex;
    align-items:center;
  }

  /* Control clickable logo area */
  .miracle-brand-link{
    max-width:100%;
    display:flex;
    align-items:center;
  }

  /* Control logo image size */
  .miracle-brand-logo{
    max-width:160px;
    width:auto;
    height:auto;
    object-fit:contain;
  }
}

/* Mobile Menu */
@media (max-width: 768px){
  .miracle-menu-toggle{ 
    display:inline-flex; 
  }

  .miracle-nav{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background: var(--miracle-mobile-menu-bg);
    border-bottom:1px solid var(--miracle-border);
    display:none;
    padding:12px 18px;
    z-index:99;
  }

  .miracle-nav.is-open{ 
    display:block; 
  }

  .miracle-menu{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  /* Mobile dropdown menu link color */
  .miracle-nav .miracle-menu a{
    color: var(--miracle-mobile-menu-color);
  }
}

/* ==================================================
   FACEBOOK STYLE MOBILE SLIDE MENU
   ================================================== */

@media (max-width: 900px){

  body.miracle-menu-open{
    overflow:hidden;
  }

  .miracle-nav{
    position:fixed;
    top:0;
    right:-100%;
    bottom:0;
    width:86%;
    max-width:360px;
    background:#121212;
    z-index:99999;
    padding:18px 14px;
    box-shadow:-6px 0 20px rgba(0,0,0,.35);
    transition:all .28s ease;
    overflow-y:auto;
    border-radius:18px 0 0 18px;
  }

  .miracle-nav.is-open{
    right:0;
  }

  /* Top Profile Header */
  .miracle-mobile-profile{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    border-radius:14px;
    background:#1c1c1c;
    margin-bottom:14px;
  }

  .miracle-mobile-profile img{
    width:46px;
    height:46px;
    border-radius:50%;
    object-fit:cover;
  }

  .miracle-mobile-profile .name{
    font-weight:700;
    color:#fff;
    font-size:15px;
  }

  /* Menu Items */
  .miracle-menu{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .miracle-menu li{
    list-style:none;
  }

  .miracle-menu a{
    display:flex;
    align-items:center;
    gap:12px;
    background:#1c1c1c;
    padding:12px 14px;
    border-radius:14px;
    font-weight:600;
    color:#f5f5f5 !important;
    text-decoration:none;
    transition:.2s ease;
  }

  .miracle-menu a:hover{
    background:#232323;
  }

  .miracle-menu-icon{
    font-size:18px;
    min-width:22px;
    color:#facc15;
  }

/* Slide Overlay */
.miracle-menu-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:99998;
  display:none;
}

.miracle-menu-overlay.show{
  display:block;
}

/* ===============================
   CRITICAL FIX: MENU CLICK & SCROLL
================================ */

/* Ensure menu is ABOVE everything */
.miracle-mobile-menu{
  z-index: 100000 !important;
  pointer-events: auto !important;
}

/* Ensure nothing blocks it */
.miracle-mobile-menu *{
  pointer-events: auto !important;
}

/* Remove any ghost overlay effects */
body.miracle-menu-open::before,
body.miracle-menu-open::after{
  display:none !important;
  content:none !important;
}

/* Allow scrolling inside menu */
.miracle-mobile-menu{
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* ==================================================
   MIRACLE – 99% EDGE-TO-EDGE CARDS (MOBILE SAFE)
   (CLEAN – NO WOOCOMMERCE)
================================================== */

@media (max-width: 768px){

  /* Reduce container padding */
  .miracle-container{
    padding-left: 4px !important;
    padding-right: 4px !important;
  }

  /* 99% width for cards */
  .miracle-card{
    width: 99vw;
    max-width: 99vw;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  /* Prevent inner overflow */
  .miracle-card > *{
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* Sticky-safe overflow control */
body{
  overflow-x: clip;
}

@supports not (overflow: clip){
  body{
    overflow-x: hidden;
  }
}