/* =========================================================
   MG UI v1.3 - clean, mobile-first (OpenCart 4 / Bootstrap 5)
   ========================================================= */

/* ---------- Variables ---------- */
:root{
  --mg-red:#e11d2e;
  --mg-black:#0b0f14;
  --mg-white:#ffffff;
  --mg-muted:#6b7280;
  --mg-bg:#f6f7fb;
  --mg-card:#ffffff;
  --mg-radius:14px;
  --mg-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* ---------- Base ---------- */
html, body{ height:100%; }
body{ background:var(--mg-bg); }
a{ text-decoration:none; }
#content{ min-height:55vh; }
.container{ max-width:1320px; }

/* =========================================================
   TOP BAR (Fix visibility 100%)
   ========================================================= */
#top{
  background:var(--mg-black);
  color:#ffffff;
}
#top a,
#top a i,
#top .dropdown-toggle,
#top .dropdown-toggle i,
#top .list-inline-item{
  color:#ffffff !important;
  opacity:1 !important;
  visibility:visible !important;
}
#top a:hover,
#top a:hover i{
  color:#ffffff !important;
  opacity:.95 !important;
}

/* Dropdowns inside top bar */
#top .dropdown-menu{
  background:#ffffff !important;
  border:1px solid rgba(0,0,0,.12) !important;
  box-shadow:0 14px 40px rgba(0,0,0,.18) !important;
  border-radius:14px !important;
}
#top .dropdown-menu .dropdown-item,
#top .dropdown-menu .dropdown-item *{
  color:#111827 !important;
  font-weight:800 !important;
  opacity:1 !important;
}
#top .dropdown-menu .dropdown-item:hover{
  background: rgba(225,29,46,.10) !important;
}

/* ---------- Header ---------- */
header{
  background:var(--mg-white);
  border-bottom:1px solid rgba(0,0,0,.06);
}
#logo img{ max-height:54px; }
@media (max-width: 576px){
  #logo{ text-align:center; margin-bottom:8px; }
}

/* ---------- Search ---------- */
#search input.form-control{
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  box-shadow:none;
}
#search button{ border-radius:999px; }

/* ---------- Cart Box ---------- */
#cart{
  background:var(--mg-white);
  border-radius:var(--mg-radius);
}
#cart .dropdown-menu{
  border-radius:var(--mg-radius);
  box-shadow:var(--mg-shadow);
}

/* =========================================================
   ✅ MENU (Works with your current menu.twig)
   - supports: <ul class="nav navbar-nav">  (default OC)
   - supports: <ul class="navbar-nav">      (bootstrap)
   - supports top links that are mistakenly "dropdown-item"
   ========================================================= */
#menu{
  background: linear-gradient(90deg, var(--mg-black), #111827) !important;
  border-radius: var(--mg-radius);
  margin-top: 10px;
  box-shadow: var(--mg-shadow);
  padding: 6px 10px;
}

/* kill bg-primary effect (your menu has bg-primary) */
#menu.bg-primary{ background: linear-gradient(90deg, var(--mg-black), #111827) !important; }

/* main links (covers both structures) */
#menu .navbar-nav > .nav-item > a,
#menu .nav.navbar-nav > .nav-item > a,
#menu .nav.navbar-nav > li > a{
  color:#ffffff !important;
  font-weight:800 !important;
  opacity:1 !important;
  visibility:visible !important;
  padding: 10px 14px;
  border-radius: 12px;
  line-height: 1.1;
  display:inline-flex;
  align-items:center;
  gap:8px;
}

/* IMPORTANT: some themes put top links as dropdown-item (wrong) */
#menu .nav.navbar-nav > li > a.dropdown-item{
  background: transparent !important;
  border:0 !important;
  color:#ffffff !important;
}

/* hover */
#menu .navbar-nav > .nav-item > a:hover,
#menu .navbar-nav > .nav-item > a:focus,
#menu .nav.navbar-nav > li > a:hover,
#menu .nav.navbar-nav > li > a:focus{
  background: rgba(225,29,46,.22) !important;
  color:#ffffff !important;
}

/* Dropdown container */
#menu .dropdown-menu{
  background:#ffffff !important;
  border:1px solid rgba(0,0,0,.12) !important;
  border-radius:14px !important;
  box-shadow:0 14px 40px rgba(0,0,0,.18) !important;
  z-index:999999 !important;
  padding: 12px 12px;
}

/* Dropdown inner columns */
#menu .dropdown-menu .dropdown-inner{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
}
#menu .dropdown-menu ul{ margin:0; padding:0; }
#menu .dropdown-menu li{ list-style:none; }

/* Dropdown items */
#menu .dropdown-menu .dropdown-item,
#menu .dropdown-menu .dropdown-item *{
  color:#111827 !important;
  font-weight:800 !important;
  opacity:1 !important;
  border-radius:10px;
  padding: 8px 10px;
}
#menu .dropdown-menu .dropdown-item:hover,
#menu .dropdown-menu .dropdown-item:focus{
  background: rgba(225,29,46,.10) !important;
  color:#111827 !important;
}

/* multi-column helper (optional) */
#menu .dropdown-column-1 .dropdown-inner{ width: 260px; }
#menu .dropdown-column-2 .dropdown-inner{ width: 520px; }
#menu .dropdown-column-3 .dropdown-inner{ width: 780px; }
#menu .dropdown-column-4 .dropdown-inner{ width: 980px; }
@media (max-width: 991px){
  #menu .dropdown-column-2 .dropdown-inner,
  #menu .dropdown-column-3 .dropdown-inner,
  #menu .dropdown-column-4 .dropdown-inner{ width: auto; }
}

/* Mobile menu panel */
@media (max-width: 991px){
  #navbar-menu{
    margin-top: 8px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(17,24,39,.92);
  }

  /* Make dropdown menus behave inside collapsed menu */
  #menu .dropdown-menu{
    position: static !important;
    float:none !important;
    width:100% !important;
    max-width:100% !important;
    margin-top:8px;
  }

  #navbar-menu a{
    width:100%;
    display:flex !important;
    justify-content:space-between;
  }
}

/* ---------- Home slider / carousel ---------- */
.carousel, .slideshow, #carousel-banner{
  border-radius:var(--mg-radius);
  overflow:hidden;
  box-shadow:var(--mg-shadow);
  background:var(--mg-white);
}

/* =========================================================
   Product Cards
   ========================================================= */
.product-thumb{
  background:var(--mg-card);
  border-radius:var(--mg-radius);
  box-shadow:var(--mg-shadow);
  overflow:hidden;
  transition:transform .15s ease, box-shadow .15s ease;
  border:1px solid rgba(0,0,0,.05);
}
.product-thumb:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 40px rgba(0,0,0,.12);
}
.product-thumb .image{
  background:#fff;
  padding:10px;
}
.product-thumb .image img{
  border-radius:12px;
}
.product-thumb .content{ padding:14px; }
.product-thumb h4 a{
  color:var(--mg-black);
  font-weight:900;
  line-height:1.25;
}
.product-thumb p{ color:var(--mg-muted); }

/* price */
.price .price-new{
  color:var(--mg-red);
  font-weight:900;
  font-size:1.05rem;
}
.price .price-old{ color:#9ca3af; }

/* rating icons spacing */
.rating .fa-stack{ font-size:.95rem; }

/* ✅ Center icons under product card */
.product-thumb .button{
  display:flex;
  justify-content:center !important;
  align-items:center;
  gap:10px;
  width:100%;
  flex-wrap:wrap;
}

/* ✅ RTL too */
html[dir="rtl"] .product-thumb .button{
  justify-content:center !important;
}

.product-thumb .button button,
.product-thumb .button a{
  width:40px; height:40px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:all .15s ease;
}
.product-thumb .button button:hover,
.product-thumb .button a:hover{
  border-color:rgba(0,0,0,.18);
  transform:translateY(-1px);
}
.product-thumb .button i{ color:var(--mg-black); }

/* WhatsApp per-product button */
.product-thumb .button .btn-wa{
  background:#25D366 !important;
  border-color:transparent !important;
}
.product-thumb .button .btn-wa i{ color:#fff !important; }

/* prevent cutting any overlay/buttons */
.product-thumb,
.product-thumb .content,
.product-thumb .button{ overflow: visible !important; }

/* =========================================================
   WhatsApp Floating Button (Premium, not cut)
   ========================================================= */
.wa-float{
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 100000;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;

  background: radial-gradient(circle at 30% 30%, #2dff7a 0%, #25D366 45%, #18b956 100%);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.wa-float::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:999px;
  background: radial-gradient(circle, rgba(37,211,102,.35), rgba(37,211,102,0) 60%);
  opacity:.9;
  filter: blur(1px);
  pointer-events:none;
}
.wa-float::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:999px;
  border: 2px solid rgba(255,255,255,.35);
  opacity:0;
  transform: scale(.92);
  animation: waPulse 1.8s ease-out infinite;
  pointer-events:none;
}
@keyframes waPulse{
  0%   { opacity:0; transform:scale(.92); }
  35%  { opacity:.35; }
  100% { opacity:0; transform:scale(1.22); }
}
.wa-float i{
  font-size: 30px;
  line-height: 1;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
}
.wa-float:hover{
  transform: scale(1.10);
  box-shadow: 0 18px 44px rgba(0,0,0,.34);
  filter: saturate(1.15);
}

/* tooltip on hover (desktop) */
.wa-float .wa-tip{
  position: absolute;
  left: 70px;
  bottom: 50%;
  transform: translateY(50%) translateX(-8px);
  background: rgba(0,0,0,.82);
  color: #fff;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all .18s ease;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  z-index: 2;
}
.wa-float .wa-tip::before{
  content:"";
  position:absolute;
  left:-6px;
  top:50%;
  transform: translateY(-50%);
  border-width:6px;
  border-style:solid;
  border-color: transparent rgba(0,0,0,.82) transparent transparent;
}
.wa-float:hover .wa-tip{
  opacity: 1;
  visibility: visible;
  transform: translateY(50%) translateX(0);
}

/* mobile safe-area so it shows full */
@media (max-width: 576px){
  .wa-float{
    left: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: 56px;
    height: 56px;
  }
  .wa-float i{ font-size: 28px; }
  .wa-float .wa-tip{ display:none; }
}

/* ---------- RTL small polish ---------- */
html[dir="rtl"] #top .text-end{ text-align:left !important; }
/html[dir="rtl"] .product-thumb .button{ justify-content:flex-start; }
/* =========================================
   MG Premium Buttons (Cart / Wishlist / Compare)
   order in your template:
   1) cart  2) wishlist  3) compare  4) whatsapp
   ========================================= */

.product-thumb .button{
  gap:10px;
}

/* base premium look (all buttons/links) */
.product-thumb .button button,
.product-thumb .button a{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
  box-shadow: 0 10px 22px rgba(0,0,0,.10);
  position:relative;
  overflow:hidden;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, border-color .18s ease;
  -webkit-tap-highlight-color: transparent;
}

/* glossy highlight */
.product-thumb .button button::before,
.product-thumb .button a::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  background: radial-gradient(circle at 30% 25%, rgba(255,255,255,.85), rgba(255,255,255,0) 55%);
  opacity:.75;
  pointer-events:none;
}

/* subtle bottom shine */
.product-thumb .button button::after,
.product-thumb .button a::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  bottom:-10px;
  height:18px;
  background: radial-gradient(circle, rgba(0,0,0,.12), rgba(0,0,0,0) 70%);
  opacity:.35;
  pointer-events:none;
}

.product-thumb .button button:hover,
.product-thumb .button a:hover{
  transform: translateY(-2px) scale(1.06);
  box-shadow: 0 16px 34px rgba(0,0,0,.16);
  border-color: rgba(0,0,0,.16);
  filter: saturate(1.05);
}

.product-thumb .button button:active,
.product-thumb .button a:active{
  transform: translateY(-1px) scale(.98);
}

/* icons inside */
.product-thumb .button i{
  font-size: 16px;
  position:relative;
  z-index:2;
}

/* ===== Make the 3 buttons premium colored like WhatsApp ===== */
/* 1) Cart */
.product-thumb .button button:nth-child(1){
  background: linear-gradient(135deg, var(--mg-red) 0%, #b61220 100%);
  border-color: rgba(255,255,255,.18);
}
.product-thumb .button button:nth-child(1) i{ color:#fff !important; }

/* 2) Wishlist */
.product-thumb .button button:nth-child(2){
  background: linear-gradient(135deg, #ff3b7a 0%, #b71d4a 100%);
  border-color: rgba(255,255,255,.18);
}
.product-thumb .button button:nth-child(2) i{ color:#fff !important; }

/* 3) Compare */
.product-thumb .button button:nth-child(3){
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  border-color: rgba(255,255,255,.18);
}
.product-thumb .button button:nth-child(3) i{ color:#fff !important; }

/* keep WhatsApp as-is (your .btn-wa already exists) */
.product-thumb .button .btn-wa{
  width:44px;
  height:44px;
  border-radius:14px;
  box-shadow: 0 16px 34px rgba(0,0,0,.16);
}

/* Mobile a bit smaller */
@media (max-width: 576px){
  .product-thumb .button button,
  .product-thumb .button a{
    width:42px;
    height:42px;
    border-radius:14px;
  }
}