/* ====== WRAPPER ====== */
.mzn360-wrap{
  --angle: 135deg;
  padding: 40px 20px 24px;
  background: linear-gradient(var(--angle), var(--c1,#e8edf2), var(--c2,#bcc7d3) 45%, var(--c3,#8fa0b2) 100%);
  text-align: center;
  direction: rtl;
  position: relative;
  overflow: hidden;
  transition: background .25s ease;
}

/* Title (fixed across tabs) */
.mzn360-title{
  font-size: clamp(18px, 2.2vw, 28px);
  font-weight: 700;
  margin: 0 0 24px;
  color: #1f2429;
}

/* ====== PANELS ====== */
.mzn360-panels{ max-width:1200px; margin:0 auto 18px; }
.mzn360-panel{
  opacity:0; transform:translateY(6px);
  transition:opacity .22s ease, transform .22s ease;
}
.mzn360-panel[hidden]{ display:none !important; }
.mzn360-panel.is-active{ opacity:1; transform:translateY(0); }

.mzn360-under{ margin-top:16px; }
.mzn360-under img{ width:76px; height:auto; opacity:.85; }

/* ====== TABS (BOTTOM) ====== */
.mzn360-tabs{
  display:inline-flex;
  gap:10px;
  padding:8px 12px;
  background:#fff;               /* white rail only */
  border-radius:999px;
  align-items:center;
}

/* Tab button: NO bg shape at all */
.mzn360-tab{
  border:0; background:transparent; padding:0;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:none; outline:none;
}

/* Icon box (title area) — 40×40, transparent */
.mzn360-ico{
  position:relative;
  width:40px; height:40px;
  background:transparent; border-radius:0; /* no circular bg */
  overflow:visible;
  display:inline-flex; align-items:center; justify-content:center;
}

/* The uploaded SVG/PNG fills the box */
.mzn360-ico img{
  width:100%; height:100%; object-fit:contain; display:block;
}

/* Remove any previous half-dome overlay */
.mzn360-ico::before{ content:none !important; }

/* ====== ACTIVE TICK — EXACT CENTER ====== */
.mzn360-tab.is-active .mzn360-ico::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:14px; height:14px;                 /* desktop size */
  transform:translate(-50%, -50%);         /* perfect center */
  background:var(--tick) center/contain no-repeat;
  pointer-events:none;
  opacity:1;
  transition:opacity .16s ease, transform .16s ease;
}

/* No hover/active bg or shadows */
.mzn360-tab:hover,
.mzn360-tab.is-active{
  box-shadow:none; background:transparent;
}

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

/* Tablet */
@media (max-width: 1024px){
  .mzn360-wrap{ padding:32px 16px 20px; }
  .mzn360-title{ margin-bottom:18px; font-size:22px; }
  .mzn360-tabs{ gap:8px; padding:6px 10px; }
  .mzn360-ico{ width:34px; height:34px; }
  .mzn360-tab.is-active .mzn360-ico::after{ width:12px; height:12px; }
  .mzn360-under img{ width:64px; }
}

/* Mobile */
@media (max-width: 600px){
  .mzn360-wrap{ padding:24px 12px 16px; }
  .mzn360-title{ margin-bottom:14px; font-size:18px; }
  .mzn360-tabs{ gap:6px; padding:6px 8px; }
  .mzn360-ico{ width:30px; height:30px; }
  .mzn360-tab.is-active .mzn360-ico::after{ width:10px; height:10px; }
  .mzn360-under img{ width:48px; }
}