/* ABX – About Content (RTL | Theme-aware | isolated) */
.abx, .abx *{ box-sizing:border-box; }

/* Full width breakout (TagDiv safe) */
.abx-full{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  overflow-x: clip;
}

/* Theme-aware */
.abx{
  --bg:     var(--td_body_bg, var(--td_background_color, #0B1220));
  --text:   var(--td_text_color, #F9FAFB);
  --muted:  var(--td_text_color_secondary, rgba(249,250,251,.72));
  --accent: var(--td_theme_color, var(--td_theme_color_main, #0A7674));
  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,255,255,.06);

  background: var(--bg);
  padding: 22px 0 34px;
}

.abx-container{
  max-width:1180px;
  margin:0 auto;
  padding:0 16px;
}

.abx-sec{ margin-top: 28px; }
.abx-sec:first-child{ margin-top: 0; }

.abx-secHead{ text-align:center; margin-bottom: 16px; }

.abx-h2{
  margin:0 0 8px;
  color:#fff;
  font-size: 28px;
  font-weight: 1000;
  line-height: 1.2;
}

.abx-sub{
  margin:0 auto;
  max-width: 860px;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 700;
  line-height: 2;
}

.abx-p{
  margin:0;
  color: var(--muted);
  font-size: 14.6px;
  font-weight: 700;
  line-height: 2;
}

/* Split */
.abx-split{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 18px;
  align-items:start;
}

.abx-split__text{
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  padding: 18px;
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
}

.abx-bullets{ margin-top: 14px; display:grid; gap: 10px; }
.abx-bullet{
  display:flex; gap:10px; align-items:flex-start;
  padding: 12px 12px;
  border-radius: 16px;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.02);
}
.abx-bullet__dot{
  width:10px; height:10px; border-radius:999px;
  background: var(--accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent);
  margin-top: 6px;
  flex: 0 0 auto;
}
@supports not (color: color-mix(in srgb, red 50%, white)){
  .abx-bullet__dot{ box-shadow: 0 0 0 6px rgba(10,118,116,.16); }
}
.abx-bullet__h{ color: rgba(249,250,251,.96); font-weight: 1000; margin-bottom: 4px; font-size: 14.5px; }
.abx-bullet__p{ color: var(--muted); font-weight: 700; font-size: 13.5px; line-height: 1.9; }

.abx-actions{ margin-top: 14px; display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.abx-link{
  display:inline-flex; align-items:center; gap:10px;
  text-decoration:none; font-weight: 900;
  color: rgba(249,250,251,.92);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
  transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.abx-link:after{ content:"←"; font-weight: 900; opacity:.9; }
.abx-link:hover{
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,.03));
}
@supports not (color: color-mix(in srgb, red 50%, white)){
  .abx-link:hover{ border-color: rgba(10,118,116,.30); background: rgba(10,118,116,.08); }
}
.abx-link--ghost{ background: transparent; }

/* Media */
.abx-split__media{
  border-radius: 22px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015));
  box-shadow: 0 18px 55px rgba(0,0,0,.28);
  padding: 14px;
}
.abx-mediaFrame{
  border-radius: 20px;
  border: 1px solid var(--stroke2);
  background: rgba(255,255,255,.02);
  overflow:hidden;
  padding: 12px;
}
.abx-collage{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.abx-shot{
  border-radius: 18px;
  aspect-ratio: 4/3;
  background-size: cover;
  background-position:center;
  position:relative;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background-color: rgba(255,255,255,.02);
}
.abx-shot:after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35));
  pointer-events:none;
}

.abx-mediaBottom{ margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.10); }
.abx-mini{ display:flex; gap:10px; align-items:center; color: rgba(249,250,251,.80); font-weight: 700; font-size: 13.5px; line-height:1.8; }
.abx-mini__dot{ width:10px; height:10px; border-radius:999px; background: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent); flex:0 0 auto; }
@supports not (color: color-mix(in srgb, red 50%, white)){
  .abx-mini__dot{ box-shadow: 0 0 0 6px rgba(10,118,116,.16); }
}

/* Values */
.abx-values{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.abx-val{
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  padding: 18px 16px;
  display:flex;
  gap: 12px;
  align-items:flex-start;
  transition: transform .18s ease, border-color .18s ease;
}
.abx-val:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 28%, rgba(255,255,255,.10));
}
@supports not (color: color-mix(in srgb, red 50%, white)){
  .abx-val:hover{ border-color: rgba(10,118,116,.28); }
}
.abx-val__ico{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: color-mix(in srgb, var(--accent) 12%, rgba(255,255,255,.03));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, rgba(255,255,255,.14));
  flex: 0 0 48px;
  margin: 0;
}
@supports not (color: color-mix(in srgb, red 50%, white)){
  .abx-val__ico{ background: rgba(10,118,116,.10); border-color: rgba(10,118,116,.22); }
}
.abx-val__ico svg{ width: 24px; height: 24px; fill: rgba(249,250,251,.95); }
.abx-val__text{ flex: 1 1 auto; min-width: 0; }
.abx-val__h{ margin: 0 0 8px; color:#fff; font-weight:1000; font-size: 15.5px; line-height:1.4; }
.abx-val__p{ margin:0; color: var(--muted); font-weight:700; font-size: 13.5px; line-height:1.9; }

/* Steps */
.abx-steps{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.abx-step{
  display:flex; gap:12px; align-items:flex-start;
  border-radius: 18px;
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  padding: 16px 16px;
}
.abx-step__n{
  width: 44px; height: 44px; border-radius: 16px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--accent);
  font-weight: 1000;
  flex:0 0 auto;
}
.abx-step__h{ margin:0 0 6px; color:#fff; font-weight: 1000; font-size: 15.5px; line-height: 1.4; }
.abx-step__p{ margin:0; color: var(--muted); font-weight: 700; font-size: 13.5px; line-height: 1.9; }

/* Responsive */
@media (max-width: 1024px){
  .abx-split{ grid-template-columns: 1fr; }
  .abx-values{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .abx-steps{ grid-template-columns: 1fr; }
}
@media (max-width: 560px){
  .abx{ padding: 18px 0 30px; }
  .abx-values{ grid-template-columns: 1fr; }
  .abx-link{ width:100%; justify-content:center; }
}

/* Hide TOC inside ABX only */
.abx .td_toc_wrap,
.abx .td-toc-wrap,
.abx .tdb_toc,
.abx .tdb_toc_wrap,
.abx .tdb-toc,
.abx .tdb-toc-wrap,
.abx .ez-toc-container,
.abx nav.toc,
.abx .toc_container,
.abx #toc_container{
  display: none !important;
}