/* =========================================================================
   BSN — support layer.

   The design itself lives in inline styles copied verbatim from the approved
   prototype. This file only carries what inline styles cannot express:
   keyframes, :hover states, and the breakpoints that switch between the
   desktop layout and the phone app shell.
   ========================================================================= */

/* ---- Keyframes, from the prototype -------------------------------------- */

@keyframes bsnPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(91, 196, 198, .5); } 70% { box-shadow: 0 0 0 12px rgba(91, 196, 198, 0); } }
@keyframes bsnDrop  { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes bsnIn    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes bsnUp    { from { opacity: 0; transform: translateY(28px) rotateX(-40deg); } to { opacity: 1; transform: none; } }
@keyframes bsnBar   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bsnDrift1 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(5vw, 4vh, 0) scale(1.1); } }
@keyframes bsnDrift2 { 0%, 100% { transform: translate3d(0, 0, 0) scale(1.05); } 50% { transform: translate3d(-5vw, -4vh, 0) scale(.94); } }
@keyframes bsnDrift3 { 0%, 100% { transform: translate3d(0, 0, 0) scale(.96); } 50% { transform: translate3d(-4vw, 5vh, 0) scale(1.14); } }

/* ---- Base --------------------------------------------------------------- */

body.bsn {
  margin: 0;
  background: #FAF8F4;
  color: #17102B;
  font-family: 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}
html[lang="en"] body.bsn { font-family: 'Archivo', system-ui, -apple-system, sans-serif; }

body.bsn a { color: #17777C; text-decoration: none; }
body.bsn a:hover { color: #F1552B; }
body.bsn ::selection { background: #F1552B; color: #FFFFFF; }
body.bsn img, body.bsn svg { max-width: 100%; }
body.bsn h1, body.bsn h2, body.bsn h3, body.bsn h4 { font-family: 'Cairo', 'IBM Plex Sans Arabic', sans-serif; }
html { scroll-behavior: smooth; }

body.bsn :focus-visible { outline: 3px solid #17777C; outline-offset: 2px; }

/* Hello Elementor's default page wrapper adds padding our full-bleed sections
   must not inherit. */
body.bsn .site-main,
body.bsn .page-content,
body.bsn main.site-main { max-width: none; padding: 0; margin: 0; }
body.bsn .site-header, body.bsn .site-footer { display: none; }

/* ---- Responsive switches ------------------------------------------------- */

.bsn-only-compact { display: none !important; }
.bsn-only-desktop { display: flex; }

@media (max-width: 1080px) {
  .bsn-only-desktop { display: none !important; }
  .bsn-only-compact { display: flex !important; }
  body.bsn { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}

/* ---- Header hovers -------------------------------------------------------- */

.bsn-u:hover { color: #5BC4C6 !important; }
.bsn-navlink:hover { color: #F1552B !important; }
.bsn-mega [data-bsn-mega-btn]:hover { color: #F1552B; }
.bsn-mega [data-bsn-mega-btn][aria-expanded="true"] { background: #F3EFE7; }

.bsn-langbtn:hover { border-color: #5B27C4 !important; color: #5B27C4 !important; }
.bsn-profbtn:hover { background: #D2EEEE !important; color: #0F5D61 !important; }
.bsn-portalbtn:hover { color: #FFFFFF !important; transform: translate(-2px, 2px); box-shadow: -2px 2px 0 #5B27C4 !important; }
html[dir="ltr"] .bsn-portalbtn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #5B27C4 !important; }

.bsn-country__btn:hover { color: #FFFFFF !important; border-color: #5BC4C6 !important; }
.bsn-country__item:hover { background: #F3EFE7; color: #17777C !important; }

.bsn-h-cta:hover { color: #FFFFFF !important; opacity: .93; }
.bsn-h-out:hover { border-color: #F1552B !important; color: #F1552B !important; }
.bsn-h-out--teal:hover { border-color: #5BC4C6 !important; color: #5BC4C6 !important; }
.bsn-h-all:hover { color: #F1552B !important; }

/* Mega-menu cards lift with the accent shadow from the prototype. */
.bsn-mcard,
.bsn-card {
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.bsn-mcard:hover,
.bsn-card:hover {
  transform: translateY(-3px);
  border-color: var(--dot, #F1552B) !important;
  box-shadow: -7px 8px 0 var(--sh, rgba(241, 85, 43, .3));
  color: #17102B;
}
html[dir="ltr"] .bsn-mcard:hover,
html[dir="ltr"] .bsn-card:hover { box-shadow: 7px 8px 0 var(--sh, rgba(241, 85, 43, .3)); }

.bsn-pf { transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.bsn-pf:hover {
  transform: translateY(-3px);
  border-color: var(--dot) !important;
  box-shadow: -6px 7px 0 var(--dot);
  color: #EDE7FA;
}
html[dir="ltr"] .bsn-pf:hover { box-shadow: 6px 7px 0 var(--dot); }
.bsn-pf-all:hover { border-color: #5BC4C6 !important; background: #241447; color: #5BC4C6 !important; }

/* ---- Buttons --------------------------------------------------------------- */

.bsn-cta-hard:hover {
  color: #FFFFFF !important;
  transform: translate(-3px, 3px);
  box-shadow: -3px 3px 0 #5B27C4 !important;
}
html[dir="ltr"] .bsn-cta-hard:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 #5B27C4 !important; }
.bsn-cta-ghost:hover { border-color: #5BC4C6 !important; color: #5BC4C6 !important; }
.bsn-cta-wa:hover { background: #17853F !important; color: #FFFFFF !important; }
.bsn-btn-out { transition: background .15s ease, color .15s ease, border-color .15s ease; }
.bsn-btn-out:hover { background: #17102B; color: #FAF8F4 !important; border-color: #17102B !important; }

.bsn-cardlink:hover { color: var(--dot, #F1552B) !important; }
.bsn-more:hover { opacity: .8; }
.bsn-logochip:hover { border-color: #17777C !important; color: #17777C !important; }
.bsn-f:hover { color: #5BC4C6 !important; }

/* ---- Hero ------------------------------------------------------------------ */

.bsn-hero-dots a:hover span:last-child { color: #EDE7FA !important; }

/* ---- FAQ -------------------------------------------------------------------- */

.bsn-faq-q::-webkit-details-marker { display: none; }
.bsn-faq-q { list-style: none; }
details[open] > .bsn-faq-q .bsn-faq-i { transform: rotate(225deg); }
.bsn-faq-q:hover { color: #F1552B; }

/* ---- Mobile layout ----------------------------------------------------------- */

@media (max-width: 1080px) {
  .bsn-hero { min-height: auto !important; }
  .bsn-hero .bsn-wide { display: none !important; }
  .bsn-hero-pad { padding-bottom: 0 !important; margin-bottom: 18px !important; }
}

@media (max-width: 760px) {
  .bsn-hero { padding-bottom: 8px; }
  .bsn-hero-dots { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .bsn-hero-dots > a { min-width: 84px; }
}

/* ---- Motion preferences -------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}