/* Mwasel brand overrides.

   دايرة circle rules (settled with the user):
     • DECORATIVE background circles (the CSS-drawn arcs that used to show
       as clipped slivers) → the real hand-drawn mint PNGs (circle-1..5.png).
     • Icon-container circles (.open-circle.flex) → keep the clean thin
       CSS ring (the approved reference look). NOT replaced.
     • Gold-tier circles ([class*="gold"]) → gold stays gold. NOT replaced.
     • .daira-frame (teacher portrait) → thin mint CSS ring, matching the
       icon circles. NOT a PNG.
*/

/* ---- decorative .open-circle (index hero, awael placeholders…) ---- */
.open-circle:not(.flex):not([class*="gold"]) {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url('circle-1.png') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transform: none !important;   /* PNGs are already organically rotated */
}
.open-circle:not(.flex):not([class*="gold"])::before,
.open-circle:not(.flex):not([class*="gold"])::after {
  display: none !important;
}
/* vary the artwork so repeated rings aren't identical copies */
.open-circle:not(.flex):not([class*="gold"]):nth-of-type(2n) { background-image: url('circle-2.png') !important; }
.open-circle:not(.flex):not([class*="gold"]):nth-of-type(3n) { background-image: url('circle-4.png') !important; }

/* ---- decorative arcs on section backgrounds (watch, auth, free-chapters,
        question-bank, about/terms/privacy) ---- */
.brand-circle:not([class*="gold"]):not([style*="D9A62B"]),
.brand-circle-device,
.open-circle-bg {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url('circle-1.png') !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transform: none !important;
}
.brand-circle-device { background-image: url('circle-3.png') !important; }
.open-circle-bg      { background-image: url('circle-5.png') !important; }
.brand-circle:not([class*="gold"]):not([style*="D9A62B"])::before,
.brand-circle:not([class*="gold"]):not([style*="D9A62B"])::after,
.brand-circle-device::before, .brand-circle-device::after,
.open-circle-bg::before, .open-circle-bg::after { display: none !important; }

/* ============================================================
   .daira-frame — circular portrait of the teacher (Amer Khalil)
   hugged by the clean thin mint open ring, matching the icon
   circles across the site. Size it with width/height.
   Fallback avatar shows if the photo file is missing.
   ============================================================ */
.daira-frame {
  position: relative;
  display: inline-block;
  flex: none;
  border-radius: 50%;
  background: #E9F5EF url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><circle cx='50' cy='40' r='16' fill='%230C7C51'/><path d='M22 86c0-17 13-28 28-28s28 11 28 28z' fill='%230C7C51'/></svg>") center/62% no-repeat;
}
.daira-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}
.daira-frame::after {   /* the thin mint open ring, slightly larger than the photo */
  content: "";
  position: absolute;
  inset: -8%;
  border: 3px solid #4ED9A4;
  border-top-color: transparent;
  border-radius: 50%;
  transform: rotate(-15deg);
  z-index: 2;
  pointer-events: none;
}