/* https://azotosolutions.it/assets/css/whmcs.css */

/* isolate from WHMCS theme collisions */
.az-whmcs, .az-whmcs * { box-sizing:border-box; }
.az-whmcs{
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  width:100%;
  max-width:100%;
  margin:0;
  color:#0f172a;
  margin-top:10px;
}

/* make sure long text wraps inside narrow product cards */
.az-whmcs b, .az-whmcs span, .az-whmcs div{ overflow-wrap:anywhere; word-break:break-word }
.az-whmcs img{ max-width:100%; height:auto; display:block; }

/* IMPORTANT: container query so it adapts per product box width (not only viewport) */
.az-whmcs{ container-type:inline-size; }

/* layout */
.az-grid{
  display:grid;
  grid-template-columns:minmax(160px,220px) 1fr;
  gap:16px;
  align-items:start;
  width:100%;
}

/* image */
.az-img{
  width:100%;
  max-width:220px;
  border-radius:16px;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 35px rgba(15,23,42,.06);
}

/* card */
.az-card{
  border:1px solid #e5e7eb;
  border-radius:18px;
  overflow:hidden;
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(900px 420px at 85% 0%, rgba(16,185,129,.10), transparent 60%),
    #fff;
  box-shadow:0 10px 35px rgba(15,23,42,.06);
  min-width:0; /* allow shrink in grids */
}

/* header */
.az-head{
  padding:14px 16px;
  border-bottom:1px solid rgba(226,232,240,.9);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.az-title{
  font-weight:950;
  letter-spacing:-.01em;
  font-size:1.05rem;
  line-height:1.15;
}
.az-sub{
  color:#64748b;
  font-weight:750;
  font-size:.92rem;
  line-height:1.35;
  margin-top:4px;
}
.az-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  margin-left:auto;
}
.az-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  font-weight:950;
  color:#111827;
  font-size:.92rem;
  white-space:nowrap;
  max-width:100%;
}
.az-badge--dark{ background:#111827; border-color:#111827; color:#fff; }

/* body + rows */
.az-body{ padding:14px 16px; }
.az-row{
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:12px;
  margin-bottom:10px;
}
.az-row--base{ background:#fff; }
.az-row--alt{ background:#f8fafc; }

.az-rowin{
  display:flex;
  gap:10px;
  align-items:flex-start;
  min-width:0;
}
.az-main{ line-height:1.35; min-width:0; }
.az-main b{ display:block; font-weight:950; color:#0f172a; }
.az-main span{
  display:block;
  color:#64748b;
  font-weight:800;
  font-size:.92rem;
  margin-top:.15rem;
}

/* ICONS: container */
.az-ic{
  width:28px;
  height:28px;
  border-radius:12px;
  border:1px solid #e2e8f0;
  background:#fff;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  margin-top:2px;
  color:#111827; /* currentColor */
}

/* pills */
.az-pills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:.75rem;
}
.az-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #e2e8f0;
  background:#fff;
  font-weight:900;
  font-size:.92rem;
  color:#111827;
  white-space:nowrap;
  max-width:100%;
}

/* =========================
   Container-based responsive
   ========================= */

/* when the PRODUCT BOX itself is narrow, stack image + card */
@container (max-width: 720px){
  .az-grid{ grid-template-columns:1fr; }
  .az-img{ max-width:100%; }
  .az-badges{ justify-content:flex-start; margin-left:0; }
}

/* tighter containers: reduce paddings a bit */
@container (max-width: 420px){
  .az-head{ padding:12px; }
  .az-body{ padding:12px; }
  .az-row{ padding:10px; }
  .az-badge, .az-pill{ font-size:.9rem; padding:7px 10px; }
}

/* Fallback for browsers without container queries */
@media (max-width: 820px){
  .az-grid{ grid-template-columns:1fr; }
  .az-img{ max-width:100%; }
  .az-badges{ justify-content:flex-start; margin-left:0; }
}

/* --- CSS ICONS via mask (works even if <span class="az-ic ..."></span> is empty) --- */
.az-ic::before{
  content:"";
  width:18px;height:18px;
  display:block;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

/* users */
.az-ic--users::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2h2v-2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h2ZM9 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0-2a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2h2v-2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h2ZM9 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0-2a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z'/%3E%3C/svg%3E");
}

/* infinity */
.az-ic--infty::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.5 16.5c-2.5 0-4.5-2-4.5-4.5S5 7.5 7.5 7.5c1.5 0 2.7.7 4.5 2.6 1.8-1.9 3-2.6 4.5-2.6 2.5 0 4.5 2 4.5 4.5s-2 4.5-4.5 4.5c-1.5 0-2.7-.7-4.5-2.6-1.8 1.9-3 2.6-4.5 2.6Zm0-2c.8 0 1.7-.5 3.2-2.5C9.2 10 8.3 9.5 7.5 9.5 6.1 9.5 5 10.6 5 12s1.1 2.5 2.5 2.5Zm9 0c1.4 0 2.5-1.1 2.5-2.5s-1.1-2.5-2.5-2.5c-.8 0-1.7.5-3.2 2.5 1.5 2 2.4 2.5 3.2 2.5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.5 16.5c-2.5 0-4.5-2-4.5-4.5S5 7.5 7.5 7.5c1.5 0 2.7.7 4.5 2.6 1.8-1.9 3-2.6 4.5-2.6 2.5 0 4.5 2 4.5 4.5s-2 4.5-4.5 4.5c-1.5 0-2.7-.7-4.5-2.6-1.8 1.9-3 2.6-4.5 2.6Zm0-2c.8 0 1.7-.5 3.2-2.5C9.2 10 8.3 9.5 7.5 9.5 6.1 9.5 5 10.6 5 12s1.1 2.5 2.5 2.5Zm9 0c1.4 0 2.5-1.1 2.5-2.5s-1.1-2.5-2.5-2.5c-.8 0-1.7.5-3.2 2.5 1.5 2 2.4 2.5 3.2 2.5Z'/%3E%3C/svg%3E");
}

/* HD */
.az-ic--hd::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 19V5h2v12h14v2H4Zm4-4 3-3 3 2 4-6 2 1.2-5 7.5-3-2-3 3-1-1.7Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 19V5h2v12h14v2H4Zm4-4 3-3 3 2 4-6 2 1.2-5 7.5-3-2-3 3-1-1.7Z'/%3E%3C/svg%3E");
}

/* shield */
.az-ic--shield::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v7c0 6 8 10 8 10s8-4 8-10V5l-8-3Zm0 18.1c-2.1-1.2-6-4-6-8.1V6.3l6-2.2 6 2.2V12c0 4.1-3.9 6.9-6 8.1Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v7c0 6 8 10 8 10s8-4 8-10V5l-8-3Zm0 18.1c-2.1-1.2-6-4-6-8.1V6.3l6-2.2 6 2.2V12c0 4.1-3.9 6.9-6 8.1Z'/%3E%3C/svg%3E");
}

/* globe */
.az-ic--globe::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm7.9 9H16.9a15.2 15.2 0 0 0-1.1-6 8.03 8.03 0 0 1 4.1 6ZM12 4c1.2 1.7 2 4.1 2.3 7H9.7C10 8.1 10.8 5.7 12 4ZM4 12c0-.3 0-.7.1-1h3a17 17 0 0 0 0 2H4.1c-.1-.3-.1-.7-.1-1Zm.9 3h3a15.2 15.2 0 0 0 1.1 6A8.03 8.03 0 0 1 4.9 15ZM7.1 11h9.8a15 15 0 0 1 0 2H7.1a15 15 0 0 1 0-2Zm2.6 10a13.3 13.3 0 0 1-1.8-6h6.2a13.3 13.3 0 0 1-1.8 6 8 8 0 0 1-2.6 0Zm5.3 0a15.2 15.2 0 0 0 1.1-6h3A8.03 8.03 0 0 1 15 21Zm1.9-8a17 17 0 0 0 0-2h3c.1.3.1.7.1 1s0 .7-.1 1h-3Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm7.9 9H16.9a15.2 15.2 0 0 0-1.1-6 8.03 8.03 0 0 1 4.1 6ZM12 4c1.2 1.7 2 4.1 2.3 7H9.7C10 8.1 10.8 5.7 12 4ZM4 12c0-.3 0-.7.1-1h3a17 17 0 0 0 0 2H4.1c-.1-.3-.1-.7-.1-1Zm.9 3h3a15.2 15.2 0 0 0 1.1 6A8.03 8.03 0 0 1 4.9 15ZM7.1 11h9.8a15 15 0 0 1 0 2H7.1a15 15 0 0 1 0-2Zm2.6 10a13.3 13.3 0 0 1-1.8-6h6.2a13.3 13.3 0 0 1-1.8 6 8 8 0 0 1-2.6 0Zm5.3 0a15.2 15.2 0 0 0 1.1-6h3A8.03 8.03 0 0 1 15 21Zm1.9-8a17 17 0 0 0 0-2h3c.1.3.1.7.1 1s0 .7-.1 1h-3Z'/%3E%3C/svg%3E");
}

/* send */
.az-ic--send::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 21 23 12 2 3l3 7 10 2-10 2-3 7Zm5.2-5.2 1.3-3.1L19 12 8.5 10.3 7.2 7.2 19 12 7.2 15.8Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 21 23 12 2 3l3 7 10 2-10 2-3 7Zm5.2-5.2 1.3-3.1L19 12 8.5 10.3 7.2 7.2 19 12 7.2 15.8Z'/%3E%3C/svg%3E");
}

/* info */
.az-ic--info::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm1-9h-2V7h2v4Zm0 6h-2v-4h2v4Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm1-9h-2V7h2v4Zm0 6h-2v-4h2v4Z'/%3E%3C/svg%3E");
}

/* play */
.az-ic--play::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 5v14l11-7L8 5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 5v14l11-7L8 5Z'/%3E%3C/svg%3E");
}

/* ✅ ADD: check */
.az-ic--check::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12 3.4 13.4 9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12 3.4 13.4 9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

/* ✅ ADD: bolt */
.az-ic--bolt::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h7l-1 8 12-14h-7l-1-6z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h7l-1 8 12-14h-7l-1-6z'/%3E%3C/svg%3E");
}

/* ✅ ADD: wave (ABR) */
.az-ic--wave::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 12c2.2 0 2.2-4 4.4-4s2.2 4 4.4 4 2.2-4 4.4-4 2.2 4 4.4 4v2c-2.2 0-2.2-4-4.4-4s-2.2 4-4.4 4-2.2-4-4.4-4-2.2 4-4.4 4v-2z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 12c2.2 0 2.2-4 4.4-4s2.2 4 4.4 4 2.2-4 4.4-4 2.2 4 4.4 4v2c-2.2 0-2.2-4-4.4-4s-2.2 4-4.4 4-2.2-4-4.4-4-2.2 4-4.4 4v-2z'/%3E%3C/svg%3E");
}

.az-whmcs .az-ic{ display:inline-block; width:22px;height:22px; background-image:... }

/* ===== Missing icons (mask) ===== */

/* check */
.az-ic--check::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12 3.4 13.4 9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12 3.4 13.4 9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

/* bolt */
.az-ic--bolt::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h7l-1 8 12-14h-7z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h7l-1 8 12-14h-7z'/%3E%3C/svg%3E");
}

/* tv */
.az-ic--tv::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 6h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Zm0 2v8h14V8H5Zm4 12h6v2H9v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 6h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Zm0 2v8h14V8H5Zm4 12h6v2H9v-2Z'/%3E%3C/svg%3E");
}

/* list/playlist */
.az-ic--list::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h16v2H4V6Zm0 5h16v2H4v-2Zm0 5h16v2H4v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h16v2H4V6Zm0 5h16v2H4v-2Zm0 5h16v2H4v-2Z'/%3E%3C/svg%3E");
}

/* clock/scheduling */
.az-ic--clock::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm1 4h-2v5.2l4.2 2.4 1-1.7-3.2-1.9V8Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm1 4h-2v5.2l4.2 2.4 1-1.7-3.2-1.9V8Z'/%3E%3C/svg%3E");
}

/* folder/storage */
.az-ic--folder::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4l2 2h8a2 2 0 0 1 2 2v10a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V6a2 2 0 0 1 2-2h6Zm-6 4v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V8H4Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4l2 2h8a2 2 0 0 1 2 2v10a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V6a2 2 0 0 1 2-2h6Zm-6 4v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V8H4Z'/%3E%3C/svg%3E");
}

/* ===== Extra icons for Live Recording ===== */

/* record (circle + dot) */
.az-ic--record::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-3.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-3.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
}

/* VOD (film/play) */
.az-ic--vod::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6Zm2 0v12h12V6H6Zm4 2.8 6 3.2-6 3.2V8.8Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6Zm2 0v12h12V6H6Zm4 2.8 6 3.2-6 3.2V8.8Z'/%3E%3C/svg%3E");
}

/* storage (database) */
.az-ic--storage::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C7.6 2 4 3.8 4 6v12c0 2.2 3.6 4 8 4s8-1.8 8-4V6c0-2.2-3.6-4-8-4Zm0 2c3.5 0 6 .9 6 2s-2.5 2-6 2-6-.9-6-2 2.5-2 6-2Zm6 5.1V12c0 1.1-2.5 2-6 2s-6-.9-6-2V9.1c1.4.9 3.8 1.5 6 1.5s4.6-.6 6-1.5Zm0 6V18c0 1.1-2.5 2-6 2s-6-.9-6-2v-2.9c1.4.9 3.8 1.5 6 1.5s4.6-.6 6-1.5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C7.6 2 4 3.8 4 6v12c0 2.2 3.6 4 8 4s8-1.8 8-4V6c0-2.2-3.6-4-8-4Zm0 2c3.5 0 6 .9 6 2s-2.5 2-6 2-6-.9-6-2 2.5-2 6-2Zm6 5.1V12c0 1.1-2.5 2-6 2s-6-.9-6-2V9.1c1.4.9 3.8 1.5 6 1.5s4.6-.6 6-1.5Zm0 6V18c0 1.1-2.5 2-6 2s-6-.9-6-2v-2.9c1.4.9 3.8 1.5 6 1.5s4.6-.6 6-1.5Z'/%3E%3C/svg%3E");
}

/* compliance (badge/check) */
.az-ic--compliance::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v7c0 6 8 10 8 10s8-4 8-10V5l-8-3Zm0 18.1c-2.1-1.2-6-4-6-8.1V6.3l6-2.2 6 2.2V12c0 4.1-3.9 6.9-6 8.1Zm3.2-10.7-4 4-2-2 1.4-1.4.6.6 2.6-2.6 1.4 1.4Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v7c0 6 8 10 8 10s8-4 8-10V5l-8-3Zm0 18.1c-2.1-1.2-6-4-6-8.1V6.3l6-2.2 6 2.2V12c0 4.1-3.9 6.9-6 8.1Zm3.2-10.7-4 4-2-2 1.4-1.4.6.6 2.6-2.6 1.4 1.4Z'/%3E%3C/svg%3E");
}

/* TV icon (if you want to reuse in other blocks) */
.az-ic--tv::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 6h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Zm0 2v8h12V8H6Zm3 12h6v2H9v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 6h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Zm0 2v8h12V8H6Zm3 12h6v2H9v-2Z'/%3E%3C/svg%3E");
}

/* list/playlist */
.az-ic--list::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h3v3H4V6Zm5 1h11v1H9V7Zm-5 6h3v3H4v-3Zm5 1h11v1H9v-1Zm-5 6h3v3H4v-3Zm5 1h11v1H9v-1Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h3v3H4V6Zm5 1h11v1H9V7Zm-5 6h3v3H4v-3Zm5 1h11v1H9v-1Zm-5 6h3v3H4v-3Zm5 1h11v1H9v-1Z'/%3E%3C/svg%3E");
}

/* clock/scheduling */
.az-ic--clock::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm1-8.6 3.2 1.9-1 1.7L11 12V6h2v5.4Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm1-8.6 3.2 1.9-1 1.7L11 12V6h2v5.4Z'/%3E%3C/svg%3E");
}

/* folder/library */
.az-ic--folder::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4 12 6h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6Zm10 4H4v10h16V8Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4 12 6h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6Zm10 4H4v10h16V8Z'/%3E%3C/svg%3E");
}

@media (max-width: 480px){
  .az-whmcs{
    margin-top:12px; /* un pelo di più su mobile, se vuoi */
  }
}

/* ===== HOTFIX: restore layout + icons (LIVE RECORDING + generic) ===== */

/* small top margin (10px) */
.az-whmcs{margin-top:10px}

/* restore header layout (your addon override was forcing column) */
.az-whmcs .az-head{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
.az-whmcs .az-headL{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:260px;
  flex:1 1 auto;
}
.az-whmcs .az-badges{
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:flex-end !important;
  margin-left:auto !important;
}

/* ===== MAIN DARK BUBBLE (icon next to title) ===== */
.az-whmcs .az-iconBubble{
  width:44px;height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:#0b1220; /* keep it black */
  border:1px solid rgba(255,255,255,.12);
  flex:0 0 auto;
  line-height:0;
}
.az-whmcs .az-iconBubble::before{
  content:"";
  width:22px;height:22px;
  display:block;
  background:#fff; /* icon WHITE on black bubble */
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}
/* main bubble icon: RECORD */
.az-whmcs .az-iconBubble--record::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-3.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-3.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
}

/* ===== SQUARE ICONS (restore your original 28x28 centered bubble) ===== */
/* kill the old background-image override you had */
.az-whmcs .az-ic{
  width:28px !important;
  height:28px !important;
  flex:0 0 28px !important;
  border-radius:12px !important;
  border:1px solid #e2e8f0 !important;
  background:#fff !important;
  display:grid !important;
  place-items:center !important;
  margin-top:2px;
  color:#111827;
  line-height:0;
  background-image:none !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:0 0 !important;
}
.az-whmcs .az-ic::before{
  content:"";
  width:18px;height:18px;
  display:block;
  background-color:currentColor; /* black icon inside white square */
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

/* smaller inside pills */
.az-whmcs .az-badge .az-ic{
  width:18px !important;height:18px !important;flex:0 0 18px !important;
  border:none !important;background:transparent !important;margin-top:0 !important;
}
.az-whmcs .az-badge .az-ic::before{width:18px;height:18px}

/* ===== ICONS NEEDED FOR LIVE RECORDING ===== */
.az-whmcs .az-ic--record::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-3.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-3.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
}
.az-whmcs .az-ic--vod::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6Zm2 0v12h12V6H6Zm4 2.8 6 3.2-6 3.2V8.8Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6Zm2 0v12h12V6H6Zm4 2.8 6 3.2-6 3.2V8.8Z'/%3E%3C/svg%3E");
}
.az-whmcs .az-ic--storage::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C7.6 2 4 3.8 4 6v12c0 2.2 3.6 4 8 4s8-1.8 8-4V6c0-2.2-3.6-4-8-4Zm0 2c3.5 0 6 .9 6 2s-2.5 2-6 2-6-.9-6-2 2.5-2 6-2Zm6 5.1V12c0 1.1-2.5 2-6 2s-6-.9-6-2V9.1c1.4.9 3.8 1.5 6 1.5s4.6-.6 6-1.5Zm0 6V18c0 1.1-2.5 2-6 2s-6-.9-6-2v-2.9c1.4.9 3.8 1.5 6 1.5s4.6-.6 6-1.5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C7.6 2 4 3.8 4 6v12c0 2.2 3.6 4 8 4s8-1.8 8-4V6c0-2.2-3.6-4-8-4Zm0 2c3.5 0 6 .9 6 2s-2.5 2-6 2-6-.9-6-2 2.5-2 6-2Zm6 5.1V12c0 1.1-2.5 2-6 2s-6-.9-6-2V9.1c1.4.9 3.8 1.5 6 1.5s4.6-.6 6-1.5Zm0 6V18c0 1.1-2.5 2-6 2s-6-.9-6-2v-2.9c1.4.9 3.8 1.5 6 1.5s4.6-.6 6-1.5Z'/%3E%3C/svg%3E");
}
.az-whmcs .az-ic--compliance::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v7c0 6 8 10 8 10s8-4 8-10V5l-8-3Zm0 18.1c-2.1-1.2-6-4-6-8.1V6.3l6-2.2 6 2.2V12c0 4.1-3.9 6.9-6 8.1Zm3.2-10.7-4 4-2-2 1.4-1.4.6.6 2.6-2.6 1.4 1.4Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v7c0 6 8 10 8 10s8-4 8-10V5l-8-3Zm0 18.1c-2.1-1.2-6-4-6-8.1V6.3l6-2.2 6 2.2V12c0 4.1-3.9 6.9-6 8.1Zm3.2-10.7-4 4-2-2 1.4-1.4.6.6 2.6-2.6 1.4 1.4Z'/%3E%3C/svg%3E");
}

/* Transcode / ABR (ladder + switching arrows) */
.az-ic--transcode::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6a2 2 0 0 1 2-2h5v2H6v12h5v2H6a2 2 0 0 1-2-2V6Zm14-2 3 3-3 3V8h-5V6h5V4Zm-6 5h2v4h-2V9Zm-3 2h2v2H9v-2Zm6 0h2v2h-2v-2Zm3 3v-2h-5v-2h5v-2l3 3-3 3Zm-6 2h2v2h-2v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6a2 2 0 0 1 2-2h5v2H6v12h5v2H6a2 2 0 0 1-2-2V6Zm14-2 3 3-3 3V8h-5V6h5V4Zm-6 5h2v4h-2V9Zm-3 2h2v2H9v-2Zm6 0h2v2h-2v-2Zm3 3v-2h-5v-2h5v-2l3 3-3 3Zm-6 2h2v2h-2v-2Z'/%3E%3C/svg%3E");
}
}


/* keep badges text wrapping nicely */
.az-whmcs .az-badge{white-space:normal}

/* ==== FIX bubble 44x44 (icona centrata + sfondo nero) ==== */
.az-whmcs .az-headL{display:flex;align-items:center;gap:10px;min-width:260px}
.az-whmcs .az-iconBubble{
  width:44px;height:44px;flex:0 0 44px;
  border-radius:16px;display:grid;place-items:center;
  background:#0b1220;border:1px solid rgba(255,255,255,.12);
  color:#fff;
}
.az-whmcs .az-iconBubble .az-ic{
  width:22px;height:22px;flex:0 0 22px;
  border:0;background:transparent;margin:0;
}
.az-whmcs .az-iconBubble .az-ic::before{width:22px;height:22px}


/* evita quadratini pieni se per qualche motivo manca la mask */
.az-whmcs .az-ic::before{opacity:0}
.az-whmcs .az-ic[class*="az-ic--"]::before{opacity:1}

/* bubble con icona (stile Live Recording) */
.az-whmcs .az-iconBubble{
  width:44px;height:44px;flex:0 0 44px;
  border-radius:16px;display:grid;place-items:center;
  background:#0b1220;border:1px solid rgba(255,255,255,.12);
  color:#fff;
}
.az-whmcs .az-iconBubble::before{
  content:"";
  width:22px;height:22px;display:block;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;
  mask-repeat:no-repeat;mask-position:center;mask-size:contain;
}

/* bubble TV */
.az-whmcs .az-iconBubble--tv::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 6h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Zm0 2v8h12V8H6Zm3 12h6v2H9v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 6h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Zm0 2v8h12V8H6Zm3 12h6v2H9v-2Z'/%3E%3C/svg%3E");
}

/* https://azotosolutions.it/assets/css/whmcs.css */

/* isolate from WHMCS theme collisions */
.az-whmcs, .az-whmcs * { box-sizing:border-box; }
.az-whmcs{
  font-family:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  width:100%;
  max-width:100%;
  margin:0;
  color:#0f172a;
  margin-top:10px;
}

/* make sure long text wraps inside narrow product cards */
.az-whmcs b, .az-whmcs span, .az-whmcs div{ overflow-wrap:anywhere; word-break:break-word }
.az-whmcs img{ max-width:100%; height:auto; display:block; }

/* IMPORTANT: container query so it adapts per product box width (not only viewport) */
.az-whmcs{ container-type:inline-size; }

/* layout */
.az-grid{
  display:grid;
  grid-template-columns:minmax(160px,220px) 1fr;
  gap:16px;
  align-items:start;
  width:100%;
}

/* image */
.az-img{
  width:100%;
  max-width:220px;
  border-radius:16px;
  border:1px solid #e5e7eb;
  box-shadow:0 10px 35px rgba(15,23,42,.06);
}

/* card */
.az-card{
  border:1px solid #e5e7eb;
  border-radius:18px;
  overflow:hidden;
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(59,130,246,.10), transparent 60%),
    radial-gradient(900px 420px at 85% 0%, rgba(16,185,129,.10), transparent 60%),
    #fff;
  box-shadow:0 10px 35px rgba(15,23,42,.06);
  min-width:0; /* allow shrink in grids */
}

/* header */
.az-head{
  padding:14px 16px;
  border-bottom:1px solid rgba(226,232,240,.9);
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.az-title{
  font-weight:950;
  letter-spacing:-.01em;
  font-size:1.05rem;
  line-height:1.15;
}
.az-sub{
  color:#64748b;
  font-weight:750;
  font-size:.92rem;
  line-height:1.35;
  margin-top:4px;
}
.az-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  margin-left:auto;
}
.az-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  font-weight:950;
  color:#111827;
  font-size:.92rem;
  white-space:nowrap;
  max-width:100%;
}
.az-badge--dark{ background:#111827; border-color:#111827; color:#fff; }

/* body + rows */
.az-body{ padding:14px 16px; }
.az-row{
  border:1px solid #e2e8f0;
  border-radius:16px;
  padding:12px;
  margin-bottom:10px;
}
.az-row--base{ background:#fff; }
.az-row--alt{ background:#f8fafc; }

.az-rowin{
  display:flex;
  gap:10px;
  align-items:flex-start;
  min-width:0;
}
.az-main{ line-height:1.35; min-width:0; }
.az-main b{ display:block; font-weight:950; color:#0f172a; }
.az-main span{
  display:block;
  color:#64748b;
  font-weight:800;
  font-size:.92rem;
  margin-top:.15rem;
}

/* ICONS: container */
.az-ic{
  width:28px;
  height:28px;
  border-radius:12px;
  border:1px solid #e2e8f0;
  background:#fff;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  margin-top:2px;
  color:#111827; /* currentColor */
}

/* pills */
.az-pills{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:.75rem;
}
.az-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #e2e8f0;
  background:#fff;
  font-weight:900;
  font-size:.92rem;
  color:#111827;
  white-space:nowrap;
  max-width:100%;
}

/* =========================
   Container-based responsive
   ========================= */

/* when the PRODUCT BOX itself is narrow, stack image + card */
@container (max-width: 720px){
  .az-grid{ grid-template-columns:1fr; }
  .az-img{ max-width:100%; }
  .az-badges{ justify-content:flex-start; margin-left:0; }
}

/* tighter containers: reduce paddings a bit */
@container (max-width: 420px){
  .az-head{ padding:12px; }
  .az-body{ padding:12px; }
  .az-row{ padding:10px; }
  .az-badge, .az-pill{ font-size:.9rem; padding:7px 10px; }
}

/* Fallback for browsers without container queries */
@media (max-width: 820px){
  .az-grid{ grid-template-columns:1fr; }
  .az-img{ max-width:100%; }
  .az-badges{ justify-content:flex-start; margin-left:0; }
}

/* --- CSS ICONS via mask (works even if <span class="az-ic ..."></span> is empty) --- */
.az-ic::before{
  content:"";
  width:18px;height:18px;
  display:block;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

/* users */
.az-ic--users::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2h2v-2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h2ZM9 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0-2a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2h2v-2a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h2ZM9 13a4 4 0 1 0 0-8 4 4 0 0 0 0 8Zm0-2a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z'/%3E%3C/svg%3E");
}

/* infinity */
.az-ic--infty::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.5 16.5c-2.5 0-4.5-2-4.5-4.5S5 7.5 7.5 7.5c1.5 0 2.7.7 4.5 2.6 1.8-1.9 3-2.6 4.5-2.6 2.5 0 4.5 2 4.5 4.5s-2 4.5-4.5 4.5c-1.5 0-2.7-.7-4.5-2.6-1.8 1.9-3 2.6-4.5 2.6Zm0-2c.8 0 1.7-.5 3.2-2.5C9.2 10 8.3 9.5 7.5 9.5 6.1 9.5 5 10.6 5 12s1.1 2.5 2.5 2.5Zm9 0c1.4 0 2.5-1.1 2.5-2.5s-1.1-2.5-2.5-2.5c-.8 0-1.7.5-3.2 2.5 1.5 2 2.4 2.5 3.2 2.5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.5 16.5c-2.5 0-4.5-2-4.5-4.5S5 7.5 7.5 7.5c1.5 0 2.7.7 4.5 2.6 1.8-1.9 3-2.6 4.5-2.6 2.5 0 4.5 2 4.5 4.5s-2 4.5-4.5 4.5c-1.5 0-2.7-.7-4.5-2.6-1.8 1.9-3 2.6-4.5 2.6Zm0-2c.8 0 1.7-.5 3.2-2.5C9.2 10 8.3 9.5 7.5 9.5 6.1 9.5 5 10.6 5 12s1.1 2.5 2.5 2.5Zm9 0c1.4 0 2.5-1.1 2.5-2.5s-1.1-2.5-2.5-2.5c-.8 0-1.7.5-3.2 2.5 1.5 2 2.4 2.5 3.2 2.5Z'/%3E%3C/svg%3E");
}

/* HD */
.az-ic--hd::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 19V5h2v12h14v2H4Zm4-4 3-3 3 2 4-6 2 1.2-5 7.5-3-2-3 3-1-1.7Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 19V5h2v12h14v2H4Zm4-4 3-3 3 2 4-6 2 1.2-5 7.5-3-2-3 3-1-1.7Z'/%3E%3C/svg%3E");
}

/* shield */
.az-ic--shield::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v7c0 6 8 10 8 10s8-4 8-10V5l-8-3Zm0 18.1c-2.1-1.2-6-4-6-8.1V6.3l6-2.2 6 2.2V12c0 4.1-3.9 6.9-6 8.1Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v7c0 6 8 10 8 10s8-4 8-10V5l-8-3Zm0 18.1c-2.1-1.2-6-4-6-8.1V6.3l6-2.2 6 2.2V12c0 4.1-3.9 6.9-6 8.1Z'/%3E%3C/svg%3E");
}

/* globe */
.az-ic--globe::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm7.9 9H16.9a15.2 15.2 0 0 0-1.1-6 8.03 8.03 0 0 1 4.1 6ZM12 4c1.2 1.7 2 4.1 2.3 7H9.7C10 8.1 10.8 5.7 12 4ZM4 12c0-.3 0-.7.1-1h3a17 17 0 0 0 0 2H4.1c-.1-.3-.1-.7-.1-1Zm.9 3h3a15.2 15.2 0 0 0 1.1 6A8.03 8.03 0 0 1 4.9 15ZM7.1 11h9.8a15 15 0 0 1 0 2H7.1a15 15 0 0 1 0-2Zm2.6 10a13.3 13.3 0 0 1-1.8-6h6.2a13.3 13.3 0 0 1-1.8 6 8 8 0 0 1-2.6 0Zm5.3 0a15.2 15.2 0 0 0 1.1-6h3A8.03 8.03 0 0 1 15 21Zm1.9-8a17 17 0 0 0 0-2h3c.1.3.1.7.1 1s0 .7-.1 1h-3Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm7.9 9H16.9a15.2 15.2 0 0 0-1.1-6 8.03 8.03 0 0 1 4.1 6ZM12 4c1.2 1.7 2 4.1 2.3 7H9.7C10 8.1 10.8 5.7 12 4ZM4 12c0-.3 0-.7.1-1h3a17 17 0 0 0 0 2H4.1c-.1-.3-.1-.7-.1-1Zm.9 3h3a15.2 15.2 0 0 0 1.1 6A8.03 8.03 0 0 1 4.9 15ZM7.1 11h9.8a15 15 0 0 1 0 2H7.1a15 15 0 0 1 0-2Zm2.6 10a13.3 13.3 0 0 1-1.8-6h6.2a13.3 13.3 0 0 1-1.8 6 8 8 0 0 1-2.6 0Zm5.3 0a15.2 15.2 0 0 0 1.1-6h3A8.03 8.03 0 0 1 15 21Zm1.9-8a17 17 0 0 0 0-2h3c.1.3.1.7.1 1s0 .7-.1 1h-3Z'/%3E%3C/svg%3E");
}

/* send */
.az-ic--send::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 21 23 12 2 3l3 7 10 2-10 2-3 7Zm5.2-5.2 1.3-3.1L19 12 8.5 10.3 7.2 7.2 19 12 7.2 15.8Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 21 23 12 2 3l3 7 10 2-10 2-3 7Zm5.2-5.2 1.3-3.1L19 12 8.5 10.3 7.2 7.2 19 12 7.2 15.8Z'/%3E%3C/svg%3E");
}

/* info */
.az-ic--info::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm1-9h-2V7h2v4Zm0 6h-2v-4h2v4Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm1-9h-2V7h2v4Zm0 6h-2v-4h2v4Z'/%3E%3C/svg%3E");
}

/* play */
.az-ic--play::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 5v14l11-7L8 5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8 5v14l11-7L8 5Z'/%3E%3C/svg%3E");
}

/* ✅ ADD: check */
.az-ic--check::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12 3.4 13.4 9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12 3.4 13.4 9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

/* ✅ ADD: bolt */
.az-ic--bolt::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h7l-1 8 12-14h-7l-1-6z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h7l-1 8 12-14h-7l-1-6z'/%3E%3C/svg%3E");
}

/* ✅ ADD: wave (ABR) */
.az-ic--wave::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 12c2.2 0 2.2-4 4.4-4s2.2 4 4.4 4 2.2-4 4.4-4 2.2 4 4.4 4v2c-2.2 0-2.2-4-4.4-4s-2.2 4-4.4 4-2.2-4-4.4-4-2.2 4-4.4 4v-2z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2 12c2.2 0 2.2-4 4.4-4s2.2 4 4.4 4 2.2-4 4.4-4 2.2 4 4.4 4v2c-2.2 0-2.2-4-4.4-4s-2.2 4-4.4 4-2.2-4-4.4-4-2.2 4-4.4 4v-2z'/%3E%3C/svg%3E");
}

.az-whmcs .az-ic{ display:inline-block; width:22px;height:22px; background-image:... }

/* ===== Missing icons (mask) ===== */

/* check */
.az-ic--check::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12 3.4 13.4 9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12 3.4 13.4 9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

/* bolt */
.az-ic--bolt::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h7l-1 8 12-14h-7z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h7l-1 8 12-14h-7z'/%3E%3C/svg%3E");
}

/* tv */
.az-ic--tv::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 6h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Zm0 2v8h14V8H5Zm4 12h6v2H9v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 6h14a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Zm0 2v8h14V8H5Zm4 12h6v2H9v-2Z'/%3E%3C/svg%3E");
}

/* list/playlist */
.az-ic--list::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h16v2H4V6Zm0 5h16v2H4v-2Zm0 5h16v2H4v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h16v2H4V6Zm0 5h16v2H4v-2Zm0 5h16v2H4v-2Z'/%3E%3C/svg%3E");
}

/* clock/scheduling */
.az-ic--clock::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm1 4h-2v5.2l4.2 2.4 1-1.7-3.2-1.9V8Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm0 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm1 4h-2v5.2l4.2 2.4 1-1.7-3.2-1.9V8Z'/%3E%3C/svg%3E");
}

/* folder/storage */
.az-ic--folder::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4l2 2h8a2 2 0 0 1 2 2v10a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V6a2 2 0 0 1 2-2h6Zm-6 4v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V8H4Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4l2 2h8a2 2 0 0 1 2 2v10a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V6a2 2 0 0 1 2-2h6Zm-6 4v10a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V8H4Z'/%3E%3C/svg%3E");
}

/* ===== Extra icons for Live Recording ===== */

/* record (circle + dot) */
.az-ic--record::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-3.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-3.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
}

/* VOD (film/play) */
.az-ic--vod::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6Zm2 0v12h12V6H6Zm4 2.8 6 3.2-6 3.2V8.8Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6Zm2 0v12h12V6H6Zm4 2.8 6 3.2-6 3.2V8.8Z'/%3E%3C/svg%3E");
}

/* storage (database) */
.az-ic--storage::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C7.6 2 4 3.8 4 6v12c0 2.2 3.6 4 8 4s8-1.8 8-4V6c0-2.2-3.6-4-8-4Zm0 2c3.5 0 6 .9 6 2s-2.5 2-6 2-6-.9-6-2 2.5-2 6-2Zm6 5.1V12c0 1.1-2.5 2-6 2s-6-.9-6-2V9.1c1.4.9 3.8 1.5 6 1.5s4.6-.6 6-1.5Zm0 6V18c0 1.1-2.5 2-6 2s-6-.9-6-2v-2.9c1.4.9 3.8 1.5 6 1.5s4.6-.6 6-1.5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C7.6 2 4 3.8 4 6v12c0 2.2 3.6 4 8 4s8-1.8 8-4V6c0-2.2-3.6-4-8-4Zm0 2c3.5 0 6 .9 6 2s-2.5 2-6 2-6-.9-6-2 2.5-2 6-2Zm6 5.1V12c0 1.1-2.5 2-6 2s-6-.9-6-2V9.1c1.4.9 3.8 1.5 6 1.5s4.6-.6 6-1.5Zm0 6V18c0 1.1-2.5 2-6 2s-6-.9-6-2v-2.9c1.4.9 3.8 1.5 6 1.5s4.6-.6 6-1.5Z'/%3E%3C/svg%3E");
}

/* compliance (badge/check) */
.az-ic--compliance::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v7c0 6 8 10 8 10s8-4 8-10V5l-8-3Zm0 18.1c-2.1-1.2-6-4-6-8.1V6.3l6-2.2 6 2.2V12c0 4.1-3.9 6.9-6 8.1Zm3.2-10.7-4 4-2-2 1.4-1.4.6.6 2.6-2.6 1.4 1.4Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v7c0 6 8 10 8 10s8-4 8-10V5l-8-3Zm0 18.1c-2.1-1.2-6-4-6-8.1V6.3l6-2.2 6 2.2V12c0 4.1-3.9 6.9-6 8.1Zm3.2-10.7-4 4-2-2 1.4-1.4.6.6 2.6-2.6 1.4 1.4Z'/%3E%3C/svg%3E");
}

/* TV icon (if you want to reuse in other blocks) */
.az-ic--tv::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 6h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Zm0 2v8h12V8H6Zm3 12h6v2H9v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 6h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Zm0 2v8h12V8H6Zm3 12h6v2H9v-2Z'/%3E%3C/svg%3E");
}

/* list/playlist */
.az-ic--list::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h3v3H4V6Zm5 1h11v1H9V7Zm-5 6h3v3H4v-3Zm5 1h11v1H9v-1Zm-5 6h3v3H4v-3Zm5 1h11v1H9v-1Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6h3v3H4V6Zm5 1h11v1H9V7Zm-5 6h3v3H4v-3Zm5 1h11v1H9v-1Zm-5 6h3v3H4v-3Zm5 1h11v1H9v-1Z'/%3E%3C/svg%3E");
}

/* clock/scheduling */
.az-ic--clock::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm1-8.6 3.2 1.9-1 1.7L11 12V6h2v5.4Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 .001 20.001A10 10 0 0 0 12 2Zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16Zm1-8.6 3.2 1.9-1 1.7L11 12V6h2v5.4Z'/%3E%3C/svg%3E");
}

/* folder/library */
.az-ic--folder::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4 12 6h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6Zm10 4H4v10h16V8Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 4 12 6h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h6Zm10 4H4v10h16V8Z'/%3E%3C/svg%3E");
}

@media (max-width: 480px){
  .az-whmcs{
    margin-top:12px; /* un pelo di più su mobile, se vuoi */
  }
}

/* ===== HOTFIX: restore layout + icons (LIVE RECORDING + generic) ===== */

/* small top margin (10px) */
.az-whmcs{margin-top:10px}

/* restore header layout (your addon override was forcing column) */
.az-whmcs .az-head{
  display:flex !important;
  flex-direction:row !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:10px !important;
  flex-wrap:wrap !important;
}
.az-whmcs .az-headL{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:260px;
  flex:1 1 auto;
}
.az-whmcs .az-badges{
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  justify-content:flex-end !important;
  margin-left:auto !important;
}

/* ===== MAIN DARK BUBBLE (icon next to title) ===== */
.az-whmcs .az-iconBubble{
  width:44px;height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;
  background:#0b1220; /* keep it black */
  border:1px solid rgba(255,255,255,.12);
  flex:0 0 auto;
  line-height:0;
}
.az-whmcs .az-iconBubble::before{
  content:"";
  width:22px;height:22px;
  display:block;
  background:#fff; /* icon WHITE on black bubble */
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}
/* main bubble icon: RECORD */
.az-whmcs .az-iconBubble--record::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-3.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-3.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
}

/* ===== SQUARE ICONS (restore your original 28x28 centered bubble) ===== */
/* kill the old background-image override you had */
.az-whmcs .az-ic{
  width:28px !important;
  height:28px !important;
  flex:0 0 28px !important;
  border-radius:12px !important;
  border:1px solid #e2e8f0 !important;
  background:#fff !important;
  display:grid !important;
  place-items:center !important;
  margin-top:2px;
  color:#111827;
  line-height:0;
  background-image:none !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:0 0 !important;
}
.az-whmcs .az-ic::before{
  content:"";
  width:18px;height:18px;
  display:block;
  background-color:currentColor; /* black icon inside white square */
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

/* smaller inside pills */
.az-whmcs .az-badge .az-ic{
  width:18px !important;height:18px !important;flex:0 0 18px !important;
  border:none !important;background:transparent !important;margin-top:0 !important;
}
.az-whmcs .az-badge .az-ic::before{width:18px;height:18px}

/* ===== ICONS NEEDED FOR LIVE RECORDING ===== */
.az-whmcs .az-ic--record::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-3.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 22a10 10 0 1 1 0-20 10 10 0 0 1 0 20Zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm0-3.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E");
}
.az-whmcs .az-ic--vod::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6Zm2 0v12h12V6H6Zm4 2.8 6 3.2-6 3.2V8.8Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6Zm2 0v12h12V6H6Zm4 2.8 6 3.2-6 3.2V8.8Z'/%3E%3C/svg%3E");
}
.az-whmcs .az-ic--storage::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C7.6 2 4 3.8 4 6v12c0 2.2 3.6 4 8 4s8-1.8 8-4V6c0-2.2-3.6-4-8-4Zm0 2c3.5 0 6 .9 6 2s-2.5 2-6 2-6-.9-6-2 2.5-2 6-2Zm6 5.1V12c0 1.1-2.5 2-6 2s-6-.9-6-2V9.1c1.4.9 3.8 1.5 6 1.5s4.6-.6 6-1.5Zm0 6V18c0 1.1-2.5 2-6 2s-6-.9-6-2v-2.9c1.4.9 3.8 1.5 6 1.5s4.6-.6 6-1.5Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2C7.6 2 4 3.8 4 6v12c0 2.2 3.6 4 8 4s8-1.8 8-4V6c0-2.2-3.6-4-8-4Zm0 2c3.5 0 6 .9 6 2s-2.5 2-6 2-6-.9-6-2 2.5-2 6-2Zm6 5.1V12c0 1.1-2.5 2-6 2s-6-.9-6-2V9.1c1.4.9 3.8 1.5 6 1.5s4.6-.6 6-1.5Zm0 6V18c0 1.1-2.5 2-6 2s-6-.9-6-2v-2.9c1.4.9 3.8 1.5 6 1.5s4.6-.6 6-1.5Z'/%3E%3C/svg%3E");
}
.az-whmcs .az-ic--compliance::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v7c0 6 8 10 8 10s8-4 8-10V5l-8-3Zm0 18.1c-2.1-1.2-6-4-6-8.1V6.3l6-2.2 6 2.2V12c0 4.1-3.9 6.9-6 8.1Zm3.2-10.7-4 4-2-2 1.4-1.4.6.6 2.6-2.6 1.4 1.4Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v7c0 6 8 10 8 10s8-4 8-10V5l-8-3Zm0 18.1c-2.1-1.2-6-4-6-8.1V6.3l6-2.2 6 2.2V12c0 4.1-3.9 6.9-6 8.1Zm3.2-10.7-4 4-2-2 1.4-1.4.6.6 2.6-2.6 1.4 1.4Z'/%3E%3C/svg%3E");
}

/* Transcoding / conversion (bars + arrows) */
.az-ic--transcode::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 7h10v2H4V7Zm0 8h10v2H4v-2Zm13-10 3 3-3 3V9h-3V7h3V5Zm0 14v-2h-3v-2h3v-2l3 3-3 3Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 7h10v2H4V7Zm0 8h10v2H4v-2Zm13-10 3 3-3 3V9h-3V7h3V5Zm0 14v-2h-3v-2h3v-2l3 3-3 3Z'/%3E%3C/svg%3E");
}


/* keep badges text wrapping nicely */
.az-whmcs .az-badge{white-space:normal}

/* ==== FIX bubble 44x44 (icona centrata + sfondo nero) ==== */
.az-whmcs .az-headL{display:flex;align-items:center;gap:10px;min-width:260px}
.az-whmcs .az-iconBubble{
  width:44px;height:44px;flex:0 0 44px;
  border-radius:16px;display:grid;place-items:center;
  background:#0b1220;border:1px solid rgba(255,255,255,.12);
  color:#fff;
}
.az-whmcs .az-iconBubble .az-ic{
  width:22px;height:22px;flex:0 0 22px;
  border:0;background:transparent;margin:0;
}
.az-whmcs .az-iconBubble .az-ic::before{width:22px;height:22px}


/* evita quadratini pieni se per qualche motivo manca la mask */
.az-whmcs .az-ic::before{opacity:0}
.az-whmcs .az-ic[class*="az-ic--"]::before{opacity:1}

/* bubble con icona (stile Live Recording) */
.az-whmcs .az-iconBubble{
  width:44px;height:44px;flex:0 0 44px;
  border-radius:16px;display:grid;place-items:center;
  background:#0b1220;border:1px solid rgba(255,255,255,.12);
  color:#fff;
}
.az-whmcs .az-iconBubble::before{
  content:"";
  width:22px;height:22px;display:block;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;
  mask-repeat:no-repeat;mask-position:center;mask-size:contain;
}

/* bubble TV */
.az-whmcs .az-iconBubble--tv::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 6h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Zm0 2v8h12V8H6Zm3 12h6v2H9v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6 6h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2Zm0 2v8h12V8H6Zm3 12h6v2H9v-2Z'/%3E%3C/svg%3E");
}

/* FIX: icone visibili nei badge scuri */
.az-whmcs .az-badge--dark .az-ic{
  color:#fff !important;          /* rende il bolt bianco */
}
.az-whmcs .az-badge--dark .az-ic::before{
  background-color:currentColor !important;
}

/* bubble icon: TRANSCODE (ABR) */
.az-whmcs .az-iconBubble--transcode::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6a2 2 0 0 1 2-2h5v2H6v12h5v2H6a2 2 0 0 1-2-2V6Zm14-2 3 3-3 3V8h-5V6h5V4Zm-6 5h2v4h-2V9Zm-3 2h2v2H9v-2Zm6 0h2v2h-2v-2Zm3 3v-2h-5v-2h5v-2l3 3-3 3Zm-6 2h2v2h-2v-2Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 6a2 2 0 0 1 2-2h5v2H6v12h5v2H6a2 2 0 0 1-2-2V6Zm14-2 3 3-3 3V8h-5V6h5V4Zm-6 5h2v4h-2V9Zm-3 2h2v2H9v-2Zm6 0h2v2h-2v-2Zm3 3v-2h-5v-2h5v-2l3 3-3 3Zm-6 2h2v2h-2v-2Z'/%3E%3C/svg%3E");
}