/* Taafi homepage – Stage 7 visual polish (draft page only).
   Scope: presentation only. No content, order, or colours change.
   Every motion rule sits behind prefers-reduced-motion: no-preference. */

/* 1. Hide the untranslated "TEAM GRID" eyebrow above the team heading. */
[data-marketing-section="team_grid"] p.uppercase.tracking-widest {
  display: none;
}

/* 2b. Supporting photos stay compact on phones so the page does not grow. */
@media (max-width: 1023.98px) {
  #why-taafi [data-marketing-rich-text-media] > div {
    aspect-ratio: 4 / 3 !important;
  }
  #brand-statement [data-marketing-rich-text-media] {
    max-width: 15rem;
    margin-inline: auto;
  }
}

/* 3. Help Me Choose on phones and tablets: compact two-column options so the
      result sits directly under them instead of below seven stacked rows. */
@media (max-width: 1023.98px) {
  [data-marketing-use-case-tabs] [role="tablist"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.5rem !important;
    padding: 0.875rem !important;
  }
  [data-marketing-use-case-tabs] [role="tab"] {
    white-space: normal !important;
    min-height: 3.25rem;
    height: auto !important;
    padding: 0.625rem 0.75rem !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    text-align: start;
  }
  [data-marketing-use-case-tabs] [role="tab"] > span:first-child {
    min-width: 0;
  }
  [data-marketing-use-case-tabs] [role="tab"] .truncate {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
  [data-marketing-use-case-tabs] [role="tab"]:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  [data-marketing-use-case-tabs] [role="tabpanel"] {
    padding: 1.25rem !important;
  }
}

/* 4. Professionals on phones: one swipeable row instead of eight stacked cards.
      All text stays in the page; nothing is hidden or shortened. */
@media (max-width: 767.98px) {
  [data-marketing-section="team_grid"] .grid {
    display: flex !important;
    gap: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 0.25rem;
    padding-bottom: 0.75rem;
    scrollbar-width: thin;
  }
  [data-marketing-section="team_grid"] .grid > article {
    flex: 0 0 84%;
    scroll-snap-align: start;
  }
  [data-marketing-section="team_grid"] .grid:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 4px;
    border-radius: 0.75rem;
  }
}

/* 5. Micro-interactions (pointer devices, motion allowed). */
@media (prefers-reduced-motion: no-preference) {
  main [data-marketing-section] article {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  }
  main [data-marketing-section] a[data-slot="button"],
  main [data-marketing-section="hero_media"] a,
  main [data-marketing-section="cta_banner"] a,
  #book-online a {
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
  }
  [data-marketing-section="hero_media"] div[style*="aspect-ratio"] img,
  [data-marketing-rich-text-media] img,
  [data-marketing-section="team_grid"] article img {
    transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.2, 1);
  }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  main [data-marketing-section] article:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 48px -30px rgb(4 70 52 / 0.35);
    border-color: color-mix(in oklab, var(--primary) 26%, var(--border));
  }
  main [data-marketing-section] a[data-slot="button"]:hover,
  main [data-marketing-section="hero_media"] a:hover,
  main [data-marketing-section="cta_banner"] a:hover,
  #book-online a:hover {
    transform: translateY(-1px);
  }
  [data-marketing-section="hero_media"] div[style*="aspect-ratio"]:hover img,
  [data-marketing-rich-text-media]:hover img,
  [data-marketing-section="team_grid"] article:hover img {
    transform: scale(1.025);
  }
}

/* Keyboard users get the same card emphasis as hover. */
main [data-marketing-section] article:focus-within {
  border-color: color-mix(in oklab, var(--primary) 32%, var(--border));
}

/* 6. Calm entrance: hero copy only (the hero photo is left static so it can paint at once). */
@media (prefers-reduced-motion: no-preference) {
  [data-marketing-section="hero_media"] .space-y-6 {
    animation: taafi-rise 0.5s ease-out both;
  }
}

/* 7. Subtle section reveal while scrolling. Only in browsers with native
      scroll-driven animations; everywhere else sections simply appear. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    main [data-marketing-section]:not([data-marketing-section="hero_media"]) {
      animation: taafi-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 140px;
    }
  }
}

@keyframes taafi-rise {
  from {
    opacity: 0.35;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ============ Full-bleed hero ============ */
[data-marketing-section="hero_media"] {
  position: relative;
  isolation: isolate;
}
[data-marketing-section="hero_media"] .grid > div.relative:has(> div[style*="aspect-ratio"]) {
  position: absolute;
  inset: 0;
  z-index: -2;
}
[data-marketing-section="hero_media"] .grid > div.relative > div.absolute {
  display: none;
}
[data-marketing-section="hero_media"] div[style*="aspect-ratio"] {
  width: 100%;
  height: 100%;
  max-height: none !important;
  aspect-ratio: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
[data-marketing-section="hero_media"] div[style*="aspect-ratio"] img {
  object-position: 50% 58% !important;
}

@media (min-width: 1024px) {
  [data-marketing-section="hero_media"] {
    min-height: clamp(560px, 74vh, 720px);
    display: flex;
    align-items: center;
  }
  [data-marketing-section="hero_media"] > div { width: 100%; }
  /* Brand-green veil only behind the copy; it fades out before the seating. */
  [data-marketing-section="hero_media"]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      linear-gradient(to left, rgb(4 70 52 / 0.9) 0%, rgb(4 70 52 / 0.78) 30%, rgb(4 70 52 / 0.3) 55%, rgb(4 70 52 / 0) 72%),
      linear-gradient(to top, rgb(16 38 30 / 0.22), rgb(16 38 30 / 0) 35%);
  }
  :root[dir="ltr"] [data-marketing-section="hero_media"]::before {
    background:
      linear-gradient(to right, rgb(4 70 52 / 0.9) 0%, rgb(4 70 52 / 0.78) 30%, rgb(4 70 52 / 0.3) 55%, rgb(4 70 52 / 0) 72%),
      linear-gradient(to top, rgb(16 38 30 / 0.22), rgb(16 38 30 / 0) 35%);
  }
  [data-marketing-section="hero_media"] .space-y-6 h2 { color: #fff; }
  [data-marketing-section="hero_media"] .space-y-6 p,
  [data-marketing-section="hero_media"] .space-y-6 .text-muted-foreground { color: rgb(255 255 255 / 0.9) !important; }
  [data-marketing-section="hero_media"] .space-y-6 strong { color: #fff; }
  [data-marketing-section="hero_media"] .space-y-6 > p:first-child {
    color: #fff !important;
    background: rgb(255 255 255 / 0.12);
    border-color: rgb(255 255 255 / 0.35);
  }
  [data-marketing-section="hero_media"] .flex.flex-wrap > a:first-child {
    background: #fff;
    color: var(--primary);
  }
  [data-marketing-section="hero_media"] .flex.flex-wrap > a:nth-child(2) {
    background: transparent;
    color: #fff;
    border-color: rgb(255 255 255 / 0.7);
  }
}

/* Phones and tablets (v12): the video fills the whole hero behind the copy, as on desktop.
   The video starts below the header bar, so the header looks the same as before. A short strip
   under the header shows the video clearly (the floating buttons start there), then a
   brand-green veil fades in behind the copy so the white text stays readable. */
@media (max-width: 1023.98px) {
  [data-marketing-section="hero_media"] .grid > div.relative:has(> div[style*="aspect-ratio"]) {
    top: calc(var(--public-header-sticky-offset, 4rem) + var(--marketing-announcement-bar-height, 0rem));
  }
  [data-marketing-section="hero_media"] {
    padding-bottom: 2.5rem;
  }
  [data-marketing-section="hero_media"] .space-y-6 {
    padding-top: 7.5rem;
  }
  @media (min-width: 768px) {
    [data-marketing-section="hero_media"] .space-y-6 { padding-top: 8.5rem; }
  }
  [data-marketing-section="hero_media"]::before {
    content: "";
    position: absolute;
    inset: 0;
    top: calc(var(--public-header-sticky-offset, 4rem) + var(--marketing-announcement-bar-height, 0rem));
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(to bottom,
      rgb(4 70 52 / 0.1) 0,
      rgb(4 70 52 / 0.18) 76px,
      rgb(4 70 52 / 0.82) 186px,
      rgb(4 70 52 / 0.9) 100%);
  }
  [data-marketing-section="hero_media"] .space-y-6 h2 { color: #fff; }
  [data-marketing-section="hero_media"] .space-y-6 p,
  [data-marketing-section="hero_media"] .space-y-6 .text-muted-foreground { color: rgb(255 255 255 / 0.9) !important; }
  [data-marketing-section="hero_media"] .space-y-6 strong { color: #fff; }
  [data-marketing-section="hero_media"] .space-y-6 > p:first-child {
    color: #fff !important;
    background: rgb(4 70 52 / 0.72);
    border-color: rgb(255 255 255 / 0.4);
  }
  [data-marketing-section="hero_media"] .flex.flex-wrap > a:first-child {
    background: #fff;
    color: var(--primary);
  }
  [data-marketing-section="hero_media"] .flex.flex-wrap > a:nth-child(2) {
    background: transparent;
    color: #fff;
    border-color: rgb(255 255 255 / 0.7);
  }
}

/* ============ Help Me Choose: a light guided choice ============ */
#help-me-choose h2::before {
  content: "نساعدك تبدأ";
  display: table;
  margin-bottom: 0.75rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  color: var(--primary);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
}
[data-marketing-use-case-tabs] [role="tablist"] {
  background: transparent !important;
  gap: 0.625rem !important;
}
[data-marketing-use-case-tabs] [role="tab"] {
  border-radius: 1rem !important;
  padding: 0.8rem 1rem !important;
  font-size: 0.975rem !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  background: var(--card) !important;
  color: var(--foreground) !important;
  border: 1px solid color-mix(in oklab, var(--primary) 16%, var(--border)) !important;
  box-shadow: none !important;
  gap: 0.75rem !important;
}
[data-marketing-use-case-tabs] [role="tab"] .truncate {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
[data-marketing-use-case-tabs] [role="tab"]:hover {
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border)) !important;
  background: color-mix(in oklab, var(--primary) 5%, var(--card)) !important;
}
[data-marketing-use-case-tabs] [role="tab"]:focus-visible {
  outline: 2px solid var(--primary) !important;
  outline-offset: 2px;
}
[data-marketing-use-case-tabs] [role="tab"][data-state="active"] {
  background: var(--primary) !important;
  color: var(--primary-foreground, #fff) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 12px 26px -18px rgb(4 70 52 / 0.7) !important;
}
/* The old arrow becomes a small choice indicator; a tick appears when selected. */
[data-marketing-use-case-tabs] [role="tab"] > span:last-child:not(:first-child) {
  font-size: 0 !important;
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 999px;
  border: 1.5px solid color-mix(in oklab, var(--primary) 38%, transparent);
  transform: none !important;
  opacity: 1 !important;
}
[data-marketing-use-case-tabs] [role="tab"][data-state="active"] > span:last-child:not(:first-child) {
  border-color: #fff;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23044634' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
}
/* Result: clearly the answer to the choice. */
[data-marketing-use-case-tabs] [role="tabpanel"][data-state="active"] {
  background: color-mix(in oklab, var(--primary) 5%, var(--card)) !important;
}
[data-marketing-use-case-tabs] [role="tabpanel"][data-state="active"] > div {
  border-inline-start: 3px solid var(--primary);
  padding-inline-start: 1.25rem;
}
@media (prefers-reduced-motion: no-preference) {
  [data-marketing-use-case-tabs] [role="tab"] {
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
  }
  [data-marketing-use-case-tabs] [role="tabpanel"][data-state="active"] > div {
    animation: taafi-result-in 0.32s ease-out both;
  }
}
@keyframes taafi-result-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Team booking button sits right under the professionals. */
#team-book { margin-top: -0.5rem; }

@media (max-width: 1023.98px) {
  [data-marketing-use-case-tabs] [role="tab"] {
    padding: 0.65rem 0.75rem !important;
    font-size: 0.875rem !important;
    min-height: 3.25rem;
  }
}

/* ============ Hero background video (v13: clinic tour, 1024x576 H.264) ============ */
/* The poster (first frame of the new video) sits behind the video, so the hero is
   never blank while the video loads and there is no flash when it starts. */
[data-marketing-section="hero_media"] div[style*="aspect-ratio"]:has(> video) {
  background:
    url("https://cdn.hakini.io/prod/t/e6c5ed72-7fed-4dae-8208-c1b227ef031f/pu/mk/im/30647a2f-a8bb-4dc6-9b0f-4ec501f001b3.webp") 50% 50% / cover no-repeat,
    #1f3a32 !important;
}
[data-marketing-section="hero_media"] div[style*="aspect-ratio"] > video {
  object-fit: cover;
  object-position: 50% 50%;
}
@media (max-width: 1023.98px) {
  [data-marketing-section="hero_media"] div[style*="aspect-ratio"] > video {
    object-position: 50% 45%;
  }
}
/* Reduced motion: no looping video, the static poster stays in place. */
@media (prefers-reduced-motion: reduce) {
  [data-marketing-section="hero_media"] div[style*="aspect-ratio"] > video {
    display: none !important;
  }
}

/* ============ Soft transitions between sections (v13) ============
   The hero melts into the page, and the full-width tinted bands (Help Me Choose, Why Taafi,
   brand statement) fade in and out instead of starting and ending on a hard line.
   Same colours, section sizes and content; only the edges change. */
:root {
  /* the page surface just below the hero, and a soft wash of Taafi green over it */
  --taafi-surface: oklab(0.9676 -0.0033 0.0007);
  --taafi-wash: color-mix(in oklab, var(--color-primary, #044634) 6%, var(--taafi-surface));
}

/* Hero to page: the video and its veil fade into the wash at the bottom edge. The fade stays
   inside the space under the buttons (41px on phones and tablets, 79px+ on desktop) and
   covers the hero's 1px bottom border, which would otherwise draw a line. */
[data-marketing-section="hero_media"]::after {
  content: "";
  position: absolute;
  inset: auto 0 -1px;
  height: 36px;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    color-mix(in oklab, var(--taafi-wash) 0%, transparent) 0%,
    color-mix(in oklab, var(--taafi-wash) 10%, transparent) 20%,
    color-mix(in oklab, var(--taafi-wash) 32%, transparent) 40%,
    color-mix(in oklab, var(--taafi-wash) 62%, transparent) 60%,
    color-mix(in oklab, var(--taafi-wash) 87%, transparent) 80%,
    var(--taafi-wash) 100%);
}
@media (min-width: 1024px) {
  [data-marketing-section="hero_media"]::after { height: 64px; }
}
/* ...and the next section carries the wash on for a short distance, without the old hairline. */
#about-taafi {
  border-top-color: transparent !important;
  background-image: linear-gradient(to bottom, var(--taafi-wash) 0, color-mix(in oklab, var(--taafi-wash) 45%, transparent) 40%, transparent 100%);
  background-size: 100% 80px;
  background-repeat: no-repeat;
  background-origin: border-box;
}
@media (min-width: 1024px) {
  #about-taafi { background-size: 100% 120px; }
}

/* Tinted bands: the same tint, drawn behind the content and faded at the top and bottom
   (inside the band's own padding), in place of the hard edge and the 1px lines. */
#help-me-choose,
#why-taafi,
#brand-statement {
  --band-fade: 40px;
  position: relative;
  isolation: isolate;
  background: transparent !important;
  border-color: transparent !important;
  /* let the tint layer reach over the 1px border (it was only clipped for the rounded corners) */
  overflow: visible !important;
}
@media (min-width: 768px) {
  #help-me-choose, #why-taafi, #brand-statement { --band-fade: 56px; }
}
@media (min-width: 1024px) {
  #help-me-choose, #why-taafi, #brand-statement { --band-fade: 72px; }
}
#help-me-choose::before,
#why-taafi::before,
#brand-statement::before {
  content: "";
  position: absolute;
  inset: -1px; /* over the band's transparent 1px border too, so no pale line at the screen edge */
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 var(--band-fade), #000 calc(100% - var(--band-fade)), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 var(--band-fade), #000 calc(100% - var(--band-fade)), transparent 100%);
}
#help-me-choose::before,
#brand-statement::before {
  background: linear-gradient(135deg,
    color-mix(in oklab, var(--color-primary, #044634) 14%, var(--color-card, #fff)),
    color-mix(in oklab, var(--color-card, #fff) 92%, var(--color-background, #FAFCFB)));
}
#why-taafi::before {
  background: color-mix(in oklab, var(--color-muted, #F0F5F2) 45%, transparent);
}

/* ===== Taafi floating actions: احجز جلسة + اختبر نفسك + واتساب (fab v9: follows the scroll, right edge) =====
   Markup: rich_text section with seo.anchorSlug "taafi-fab" (3 links: booking, self-assessment, then WhatsApp).
   Bottom-right on Arabic (RTL) pages, bottom-left on LTR pages.
   Every size: booking on top, then اختبر نفسك and a round logo-only WhatsApp side by side, so the
   group is exactly as tall as the two-button version and clears the hero headline as before.
   With only two links (booking, WhatsApp) every rule below still gives the v8 layout.
   The group travels down the right edge with the scroll position (see the end of this block). */
div:has(> #taafi-fab){display:contents}
#taafi-fab{
  position:fixed!important;z-index:40;top:auto;
  right:max(24px,env(safe-area-inset-right,0px));left:auto;
  bottom:calc(24px + env(safe-area-inset-bottom,0px));
  width:auto!important;max-width:none!important;margin:0!important;padding:0!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  /* the group never takes part in section reveal animations, so it is always fully opaque */
  animation:none!important;opacity:1!important;transform:none!important;
  pointer-events:none;
}
:root[dir="ltr"] #taafi-fab{right:auto;left:max(24px,env(safe-area-inset-left,0px))}
#taafi-fab > div,#taafi-fab > div > div{display:contents}
#taafi-fab [data-marketing-rich-text]{
  display:flex!important;flex-direction:column;align-items:stretch;gap:10px;
  width:auto!important;max-width:none!important;margin:0!important;
}
#taafi-fab [data-marketing-rich-text] > p{display:flex;margin:0!important;line-height:1!important}
/* three links: booking on its own row, then اختبر نفسك and WhatsApp side by side, all on the outer edge */
#taafi-fab [data-marketing-rich-text]:has(> p:nth-child(3)){
  display:grid!important;grid-template-columns:auto auto;justify-content:start;justify-items:start;
}
#taafi-fab [data-marketing-rich-text]:has(> p:nth-child(3)) > p:first-child{grid-column:1 / -1}
#taafi-fab a{
  pointer-events:auto;box-sizing:border-box;flex:1 1 auto;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 22px;border:2px solid #fff;border-radius:999px;
  font-family:inherit;font-size:15px;font-weight:700;line-height:1.2;
  text-decoration:none!important;white-space:nowrap;
  box-shadow:0 12px 28px -12px rgba(4,49,33,.6),0 2px 6px rgba(4,49,33,.2);
  transition:background-color .15s ease,box-shadow .15s ease,transform .15s ease;
  -webkit-tap-highlight-color:transparent;
}
#taafi-fab a::before{
  content:"";flex:none;width:22px;height:22px;background-color:currentColor;
  -webkit-mask:var(--fab-icon) center/contain no-repeat;mask:var(--fab-icon) center/contain no-repeat;
}
/* primary: احجز جلسة (Taafi dark green, calendar) */
#taafi-fab p:first-child a{
  min-height:54px;font-size:16px;
  background:#044634;color:#fff!important;
  --fab-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18M8 14h.01M12 14h.01M16 14h.01M8 18h.01M12 18h.01M16 18h.01'/%3E%3C/svg%3E");
}
#taafi-fab p:first-child a:hover{background:#0b5c45}
/* self-assessment: اختبر نفسك (soft Taafi green, dark green label, clipboard with a tick) */
#taafi-fab p:nth-child(2):not(:last-child) a{
  background:#E7F0EB;color:#044634!important;
  --fab-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='m9 14 2 2 4-4'/%3E%3C/svg%3E");
}
#taafi-fab p:nth-child(2):not(:last-child) a:hover{background:#D5E6DC}
/* secondary: واتساب (WhatsApp green, dark label for contrast) */
#taafi-fab p:last-child a{
  background:#25D366;color:#052E21!important;
  --fab-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.435 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z'/%3E%3C/svg%3E");
}
#taafi-fab p:last-child a:hover{background:#1EBE5A}
/* beside اختبر نفسك, WhatsApp is a round logo-only button; its name stays in the link for screen readers */
#taafi-fab p:nth-child(3):last-child a{flex:none;width:48px;height:48px;padding:0;gap:0;border-radius:50%}
#taafi-fab p:nth-child(3):last-child a::before{width:26px;height:26px}
#taafi-fab p:nth-child(3):last-child a > span:first-child{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;
}
#taafi-fab a:hover{box-shadow:0 14px 30px -12px rgba(4,49,33,.7),0 3px 8px rgba(4,49,33,.22)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  #taafi-fab a:hover{transform:translateY(-1px)}
}
/* keyboard focus: white + dark-green ring, visible on light and dark backgrounds */
#taafi-fab a:focus-visible{outline:3px solid transparent;box-shadow:0 0 0 2px #fff,0 0 0 5px #044634}
/* screen-reader-only hint, e.g. "(يفتح في نافذة جديدة)" */
#taafi-fab a > span + span{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;
}
/* keep the last footer line (right-aligned in Arabic) clear of the stacked buttons */
body:has(#taafi-fab) footer{padding-bottom:calc(124px + env(safe-area-inset-bottom,0px))}
/* tablets */
@media (max-width:1023.98px){
  #taafi-fab{right:max(20px,env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  :root[dir="ltr"] #taafi-fab{right:auto;left:max(20px,env(safe-area-inset-left,0px))}
  #taafi-fab p:first-child a{min-height:52px}
}
/* phones: smaller buttons. WhatsApp is always round and logo-only here. */
@media (max-width:767.98px){
  #taafi-fab{right:max(12px,env(safe-area-inset-right,0px));bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  :root[dir="ltr"] #taafi-fab{right:auto;left:max(12px,env(safe-area-inset-left,0px))}
  /* all buttons line up on the outer edge (right in Arabic, left in LTR) */
  #taafi-fab [data-marketing-rich-text]{align-items:flex-start;gap:8px}
  #taafi-fab a,#taafi-fab p:first-child a{min-height:48px;padding:0 16px;gap:8px;font-size:15px}
  #taafi-fab a::before{width:20px;height:20px}
  #taafi-fab p:last-child a{flex:none;width:48px;height:48px;padding:0;gap:0;border-radius:50%}
  #taafi-fab p:last-child a::before{width:26px;height:26px}
  #taafi-fab p:last-child a > span:first-child{
    position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
    overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;
  }
}
@media (max-width:359.98px){
  #taafi-fab a,#taafi-fab p:first-child a{padding:0 14px;font-size:14px}
  #taafi-fab p:nth-child(2):not(:last-child) a{padding:0 12px;gap:6px}
}
/* follow the page: the group travels down the edge with the scroll position, like the scrollbar
   thumb. Top of the page: just under the header. End of the page: the bottom corner.
   Browsers without scroll-driven animations, and visitors who prefer reduced motion,
   keep the group pinned in the bottom corner (the rules above). */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    #taafi-fab{
      --fab-start:118px;--fab-h:112px;--fab-gap:24px;
      animation:taafi-fab-follow linear both!important;
      animation-timeline:scroll(root block)!important;
    }
    @media (max-width:1279.98px){#taafi-fab{--fab-start:96px}}
    @media (max-width:1023.98px){#taafi-fab{--fab-h:110px;--fab-gap:20px}}
    @media (max-width:767.98px){#taafi-fab{--fab-h:104px;--fab-gap:12px}}
    @media (max-width:639.98px){#taafi-fab{--fab-start:80px}}
  }
}
@keyframes taafi-fab-follow{
  from{top:var(--fab-start);bottom:auto}
  to{top:calc(100% - var(--fab-h) - var(--fab-gap) - env(safe-area-inset-bottom,0px));bottom:auto}
}
/* step aside while a menu sheet or dialog is open */
body:has([role="dialog"][data-state="open"]) #taafi-fab{display:none!important}
@media (prefers-reduced-motion:reduce){#taafi-fab a{transition:none}}
@media print{#taafi-fab{display:none!important}}