/* Doctor details markup entered in the "single_about_dr_description" field
   (.tam-doc for English, .tam-doc-ar for Arabic). */

.tam-doc, .tam-doc-ar { line-height:1.6; }
.tam-doc-ar { direction:rtl; text-align:right; }
.tam-doc .tam-h, .tam-doc-ar .tam-h { color:#04344e; font-weight:700; }
.tam-doc .tam-about, .tam-doc-ar .tam-about { margin-bottom:22px; }
.tam-doc .tam-about p, .tam-doc-ar .tam-about p { margin:6px 0 0 0; }
.tam-doc .tam-about p + p, .tam-doc-ar .tam-about p + p { margin-top:12px; }

.tam-doc .tam-grid, .tam-doc-ar .tam-grid {
  display:grid;
  grid-template-columns:max-content 1fr;
  column-gap:32px;
  row-gap:16px;
  align-items:start;
}

.tam-doc .tam-grid ul { margin:0; padding-left:1.2em; padding-right:0; }
.tam-doc-ar .tam-grid ul { margin:0; padding-right:1.2em; padding-left:0; }
.tam-doc .tam-grid li, .tam-doc-ar .tam-grid li { margin-bottom:6px; }
.tam-doc .tam-grid li:last-child, .tam-doc-ar .tam-grid li:last-child { margin-bottom:0; }

/* Languages Spoken logos: every logo gets the same box, whatever its original size. */
.tam-doc .tam-logos, .tam-doc-ar .tam-logos { display:flex; flex-wrap:wrap; gap:12px; }
.tam-doc .tam-logo, .tam-doc-ar .tam-logo {
  width:64px;
  height:40px;
  object-fit:contain;
  display:block;
}
/* Language name shown above the logo on hover. */
.tam-doc .tam-lang, .tam-doc-ar .tam-lang { position:relative; display:block; }
.tam-doc .tam-lang-name, .tam-doc-ar .tam-lang-name {
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translate(-50%, 4px);
  padding:4px 10px;
  border-radius:4px;
  background:#04344e;
  color:#fff;
  font-size:13px;
  line-height:1.4;
  white-space:nowrap;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  transition:opacity .15s, transform .15s, visibility .15s;
  z-index:5;
}
.tam-doc .tam-lang-name::after, .tam-doc-ar .tam-lang-name::after {
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  margin-left:-5px;
  border:5px solid transparent;
  border-top-color:#04344e;
}
.tam-doc .tam-lang:hover .tam-lang-name, .tam-doc-ar .tam-lang:hover .tam-lang-name {
  opacity:1;
  visibility:visible;
  transform:translate(-50%, 0);
}

@media (max-width:600px) {
  .tam-doc .tam-grid, .tam-doc-ar .tam-grid { grid-template-columns:1fr; row-gap:4px; }
  .tam-doc .tam-grid > div:nth-child(even),
  .tam-doc-ar .tam-grid > div:nth-child(even) { margin-bottom:14px; }
}