
/* ===== 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}}
