/* ════════════════════════════════════════════════════════════════════
   Smart Ads — look (OzareX 4.41). Brand-neutral: every color comes from
   the ad itself through --sad-bg / --sad-accent / --sad-text, so the same
   file works in any app (Ozarex …). Light glassmorphism, soft motion.
════════════════════════════════════════════════════════════════════ */
.sad { --sad-bg: #0F2250; --sad-accent: #25D366; --sad-text: #FFFFFF; --sad-font: 'IBM Plex Sans Arabic', 'Cairo', system-ui, sans-serif;
  direction: rtl; font-family: var(--sad-font); color: var(--sad-text); box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.sad *, .sad *::before, .sad *::after { box-sizing: border-box; }
.sad-card { position: relative; overflow: hidden; border-radius: 26px; color: var(--sad-text);
  background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--sad-accent) 28%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--sad-bg) 92%, #fff 8%) 0%, var(--sad-bg) 55%, color-mix(in srgb, var(--sad-bg) 80%, #000 20%) 100%);
  border: 1px solid color-mix(in srgb, var(--sad-accent) 38%, rgba(255, 255, 255, .12));
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 0 40px -12px color-mix(in srgb, var(--sad-accent) 45%, transparent); }
.sad.glass .sad-card { background:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--sad-accent) 30%, transparent), transparent 60%),
    linear-gradient(160deg, color-mix(in srgb, var(--sad-bg) 78%, transparent), color-mix(in srgb, var(--sad-bg) 90%, transparent));
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
.sad-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, .14), transparent 32%); }
.sad-x { position: absolute; top: 12px; inset-inline-end: 12px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .22); color: inherit; display: grid; place-items: center; cursor: pointer; transition: background .15s, transform .15s; padding: 0; }
.sad-x:hover { background: rgba(255, 255, 255, .16); transform: rotate(90deg); }
.sad-x svg { width: 16px; height: 16px; }
.sad-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .02em; color: var(--sad-accent); }
.sad-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--sad-accent); box-shadow: 0 0 10px var(--sad-accent); animation: sadPulse 1.8s ease-in-out infinite; }
.sad-ic { flex: none; display: grid; place-items: center; border-radius: 22px; font-size: 40px; line-height: 1;
  background: linear-gradient(160deg, color-mix(in srgb, var(--sad-accent) 34%, rgba(255, 255, 255, .12)), rgba(0, 0, 0, .18));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 14px 30px -12px rgba(0, 0, 0, .7); transform: rotate(-6deg); animation: sadBob 3.2s ease-in-out infinite; }
.sad .sad-t { margin: 0; font-weight: 800; line-height: 1.35; overflow-wrap: break-word; color: var(--sad-text) !important; font-family: var(--sad-font) !important; letter-spacing: 0; }
.sad .sad-p { margin: 0; opacity: .82; line-height: 1.75; overflow-wrap: break-word; white-space: pre-line; color: var(--sad-text) !important; }
.sad .sad-desc { color: var(--sad-text) !important; }
.sad-desc { margin: 0; font-size: 13.5px; line-height: 1.8; opacity: .78; white-space: pre-line; overflow-wrap: anywhere; display: none; }
.sad-desc.on { display: block; animation: sadIn .3s ease both; }
.sad-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.sad-b { flex: 1 1 160px; min-height: 48px; border-radius: 16px; padding: 10px 16px; font: 800 15px var(--sad-font); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .06); color: inherit; text-decoration: none; transition: transform .14s ease, filter .15s ease, background .15s ease; }
.sad .sad-b, .sad a.sad-b, .sad a.sad-b:visited { color: var(--sad-text) !important; text-decoration: none !important; }
.sad .sad-b.pri, .sad a.sad-b.pri { color: #fff !important; }
.sad-b:hover { background: rgba(255, 255, 255, .12); }
.sad-b:active { transform: scale(.97); }
.sad-b.pri { background: linear-gradient(135deg, var(--sad-accent), color-mix(in srgb, var(--sad-accent) 70%, #000 30%)); border-color: transparent; color: #fff;
  box-shadow: 0 12px 26px -12px var(--sad-accent); }
.sad-b.pri:hover { filter: brightness(1.07); }
.sad-b svg { width: 19px; height: 19px; flex: none; }

/* ── Popup ── */
.sad-ov { position: fixed; inset: 0; z-index: 10900; display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(3, 6, 14, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s ease; }
.sad-ov.in { opacity: 1; }
.sad-ov.out { opacity: 0; }
.sad-pop { width: min(460px, 100%); }
.sad-pop .sad-card { padding: 22px 22px 20px; transform: translateY(24px) scale(.94); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.2, .3, 1), opacity .3s ease; }
.sad-ov.in .sad-pop .sad-card { transform: none; opacity: 1; }
.sad-ov.out .sad-pop .sad-card { transform: translateY(14px) scale(.97); opacity: 0; transition-duration: .22s; }
.sad-pop .sad-hd { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; padding-inline-end: 34px; }
.sad-pop .sad-ic { width: 82px; height: 82px; }
.sad-pop .sad-hd > div { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.sad-pop .sad-t { font-size: 22px; }
.sad-pop .sad-p { font-size: 15px; margin-bottom: 12px; }
.sad-pop .sad-desc { margin-bottom: 12px; }
@media (max-width: 560px) {
  .sad-ov { align-items: flex-end; padding: 0 10px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .sad-pop .sad-card { border-radius: 28px; transform: translateY(110%); }
  .sad-ov.in .sad-pop .sad-card { transform: none; }
  .sad-pop .sad-ic { width: 68px; height: 68px; font-size: 34px; }
  .sad-pop .sad-t { font-size: 19.5px; }
}

/* ── Banner ── */
.sad-ban { position: fixed; inset-inline: 0; z-index: 10800; padding: 8px 10px; pointer-events: none; transition: transform .45s cubic-bezier(.2, 1, .3, 1), opacity .3s; }
.sad-ban.top { top: env(safe-area-inset-top, 0px); transform: translateY(-120%); }
.sad-ban.bottom { bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sad-bottom, 0px)); transform: translateY(120%); }
.sad-ban.in { transform: none; }
.sad-ban.out { opacity: 0; }
.sad-ban .sad-card { pointer-events: auto; max-width: 980px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 20px; }
.sad-ban .sad-ic { width: 44px; height: 44px; font-size: 24px; border-radius: 14px; transform: none; animation: none; }
.sad-ban .sad-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sad-ban .sad-t { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sad-ban .sad-p { font-size: 12.5px; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sad-ban .sad-b { flex: none; min-height: 38px; padding: 6px 14px; font-size: 13.5px; border-radius: 12px; }
.sad-ban .sad-b.sec { display: none; }
.sad-ban .sad-x { position: static; flex: none; width: 30px; height: 30px; }
@media (max-width: 560px) { .sad-ban .sad-b .lbl { display: none; } .sad-ban .sad-b { padding: 6px 10px; } }

/* ── Floating card ── */
.sad-flt { position: fixed; z-index: 10700; width: min(330px, calc(100vw - 24px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px) + var(--sad-bottom, 0px));
  transform: translateY(30px) scale(.95); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.2, .3, 1), opacity .3s; }
.sad-flt.bottom-start { inset-inline-start: 16px; }
.sad-flt.bottom-end, .sad-flt.bottom, .sad-flt.center, .sad-flt.top { inset-inline-end: 16px; }
.sad-flt.in { transform: none; opacity: 1; }
.sad-flt.out { transform: translateY(16px); opacity: 0; }
.sad-flt .sad-card { padding: 16px 16px 14px; border-radius: 22px; }
.sad-flt .sad-hd { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding-inline-end: 30px; }
.sad-flt .sad-ic { width: 52px; height: 52px; font-size: 27px; border-radius: 16px; }
.sad-flt .sad-hd > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sad-flt .sad-t { font-size: 16px; }
.sad-flt .sad-p { font-size: 13px; margin-bottom: 10px; }
.sad-flt .sad-b { flex-basis: 100%; min-height: 42px; font-size: 14px; }
.sad-flt .sad-b.sec { min-height: 36px; font-size: 13px; }
.sad-flt .sad-x { top: 10px; width: 30px; height: 30px; }

/* ── preview mode (inside the admin's phone / desktop frame) ── */
.sad.pv.sad-ov, .sad.pv.sad-ban, .sad.pv.sad-flt { position: absolute; }
.sad.pv.sad-ov { z-index: 2; }

@keyframes sadIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sadPulse { 50% { opacity: .45; } }
@keyframes sadBob { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(-3deg) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .sad, .sad * { transition-duration: .01ms !important; animation: none !important; } }

/* ════════ 4.30 · entrance animations, emphasis, big-number badge, guide ads ════════ */
/* the card enters with the chosen motion; then each part rises in turn */
.sad.in .sad-card { animation: sadEnterBounce .75s cubic-bezier(.2, 1.35, .35, 1) both; }
.sad.a-zoom.in .sad-card  { animation-name: sadEnterZoom; animation-duration: .6s; }
.sad.a-slide.in .sad-card { animation-name: sadEnterSlide; animation-duration: .65s; animation-timing-function: cubic-bezier(.2, 1, .3, 1); }
.sad.a-flip.in .sad-card  { animation-name: sadEnterFlip; animation-duration: .8s; transform-origin: 50% 0; }
.sad.a-drop.in .sad-card  { animation-name: sadEnterDrop; animation-duration: .85s; animation-timing-function: cubic-bezier(.3, 1.6, .4, 1); }
.sad.a-fade.in .sad-card  { animation-name: sadEnterFade; animation-duration: .5s; }
.sad-ov.in .sad-pop .sad-card { transition: none; opacity: 1; transform: none; }
.sad.in .sad-hd, .sad.in .sad-p, .sad.in .sad-desc.on, .sad.in .sad-btns, .sad.in .sad-mid { animation: sadRise .5s cubic-bezier(.2, 1, .3, 1) both; }
.sad.in .sad-hd { animation-delay: .18s; } .sad.in .sad-p { animation-delay: .28s; } .sad.in .sad-btns { animation-delay: .42s; } .sad.in .sad-mid { animation-delay: .15s; }
.sad.in .sad-ic { animation: sadIcPop .7s cubic-bezier(.2, 1.6, .35, 1) .12s both, sadBob 3.2s ease-in-out 1s infinite; }
.sad-ban.in .sad-ic { animation: sadIcPop .7s cubic-bezier(.2, 1.6, .35, 1) .12s both; }
.sad.in .sad-b.pri { animation: sadRise .5s cubic-bezier(.2, 1, .3, 1) .42s both, sadCta 2.4s ease-in-out 1.4s infinite; }
/* a light sweep across the card right after it lands */
.sad-shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; }
.sad-shine::before { content: ''; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -60%; transform: skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); }
.sad.in .sad-shine::before { animation: sadSweep 1.1s ease .7s both; }
.sad.in .sad-card { box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .04) inset, 0 0 40px -12px color-mix(in srgb, var(--sad-accent) 45%, transparent); }
.sad-ov.out .sad-card, .sad.out .sad-card { animation: sadLeave .28s ease-in both !important; }

/* *word* → stands out: bigger, accent gradient, marker underline, a little pulse */
.sad .sad-em { display: inline-block; position: relative; font-weight: 900; font-size: 1.32em; line-height: 1; padding: 0 .12em; margin: 0 .05em;
  color: color-mix(in srgb, var(--sad-accent) 70%, #fff 30%) !important; -webkit-text-fill-color: currentColor;
  text-shadow: 0 0 18px color-mix(in srgb, var(--sad-accent) 70%, transparent); transform: rotate(-2deg); }
.sad .sad-em::after { content: ''; position: absolute; inset-inline: -.08em; bottom: .02em; height: .32em; z-index: -1; border-radius: .2em;
  background: color-mix(in srgb, var(--sad-accent) 45%, transparent); transform-origin: right; }
.sad.in .sad-em { animation: sadEm .7s cubic-bezier(.2, 1.6, .35, 1) .5s both, sadEmGlow 2.2s ease-in-out 1.4s infinite; }
.sad.in .sad-em::after { animation: sadUnder .5s ease .75s both; }
.sad .sad-p .sad-em { font-size: 1.22em; }

/* big number tile (calendar style) */
.sad .sad-ic.sad-badge { position: relative; flex-direction: column; gap: 2px; font-size: initial; color: #fff;
  background: linear-gradient(170deg, color-mix(in srgb, var(--sad-accent) 92%, #fff 8%), color-mix(in srgb, var(--sad-accent) 55%, #000 45%));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 16px 34px -12px color-mix(in srgb, var(--sad-accent) 80%, #000); }
.sad .sad-badge::before { content: ''; position: absolute; top: 7px; inset-inline: 18%; height: 7px; border-radius: 4px;
  background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .35) 0 6px, transparent 6px 14px); }
.sad .sad-badge b { font: 900 40px/1 var(--sad-font); margin-top: 8px; text-shadow: 0 3px 10px rgba(0, 0, 0, .35); }
.sad .sad-badge small { font: 800 11px/1.2 var(--sad-font); opacity: .9; text-align: center; padding: 0 4px; }
.sad .sad-badge .sad-rings { position: absolute; inset: -6px; border-radius: 26px; border: 2px solid color-mix(in srgb, var(--sad-accent) 70%, transparent); opacity: 0; }
.sad.in .sad-badge .sad-rings { animation: sadRing 2.2s ease-out 1s infinite; }
.sad-flt .sad-badge b { font-size: 26px; margin-top: 6px; } .sad-ban .sad-badge b { font-size: 20px; margin-top: 4px; } .sad-ban .sad-badge small, .sad-ban .sad-badge::before { display: none; }

/* guide / «what's new» ads */
.sad-guide .sad-tag { color: color-mix(in srgb, var(--sad-accent) 80%, #fff 20%); }
.sad-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sad-list li { display: flex; align-items: flex-start; gap: 10px; padding: 9px 11px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08);
  font-size: 14px; line-height: 1.6; color: var(--sad-text); }
.sad-list li i { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 12px;
  background: var(--sad-accent); color: #fff; margin-top: 1px; }
.sad.in .sad-list li { animation: sadRise .45s cubic-bezier(.2, 1, .3, 1) both; animation-delay: calc(.34s + var(--i) * .09s); }
.sad-flt .sad-list li { font-size: 12.5px; padding: 7px 9px; }

@keyframes sadEnterBounce { 0% { opacity: 0; transform: translateY(60px) scale(.82); } 55% { opacity: 1; transform: translateY(-8px) scale(1.03); } 75% { transform: translateY(3px) scale(.995); } 100% { opacity: 1; transform: none; } }
@keyframes sadEnterZoom { 0% { opacity: 0; transform: scale(.55); filter: blur(8px); } 70% { opacity: 1; transform: scale(1.04); filter: blur(0); } 100% { opacity: 1; transform: none; } }
@keyframes sadEnterSlide { from { opacity: 0; transform: translateX(-70px); } to { opacity: 1; transform: none; } }
@keyframes sadEnterFlip { 0% { opacity: 0; transform: perspective(800px) rotateX(-75deg); } 60% { opacity: 1; transform: perspective(800px) rotateX(12deg); } 100% { opacity: 1; transform: perspective(800px) rotateX(0); } }
@keyframes sadEnterDrop { 0% { opacity: 0; transform: translateY(-120px) rotate(-4deg); } 60% { opacity: 1; transform: translateY(10px) rotate(1deg); } 100% { opacity: 1; transform: none; } }
@keyframes sadEnterFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sadLeave { to { opacity: 0; transform: translateY(18px) scale(.95); } }
@keyframes sadRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes sadIcPop { 0% { opacity: 0; transform: scale(0) rotate(-40deg); } 70% { opacity: 1; transform: scale(1.15) rotate(4deg); } 100% { opacity: 1; transform: rotate(-6deg); } }
@keyframes sadCta { 0%, 100% { box-shadow: 0 12px 26px -12px var(--sad-accent); } 50% { box-shadow: 0 12px 34px -6px var(--sad-accent), 0 0 0 4px color-mix(in srgb, var(--sad-accent) 25%, transparent); } }
@keyframes sadSweep { from { left: -60%; } to { left: 130%; } }
@keyframes sadEm { 0% { opacity: 0; transform: scale(.3) rotate(-12deg); } 70% { opacity: 1; transform: scale(1.18) rotate(2deg); } 100% { opacity: 1; transform: rotate(-2deg); } }
@keyframes sadEmGlow { 50% { text-shadow: 0 0 26px var(--sad-accent); transform: rotate(-2deg) scale(1.05); } }
@keyframes sadUnder { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sadRing { 0% { opacity: .8; transform: scale(.92); } 100% { opacity: 0; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .sad.in .sad-card, .sad.in .sad-em, .sad.in * { animation: none !important; } }