/*
 * AFAQ DIGITAL PLATFORM
 * Shared Application Shell
 * Reusable by Developer Tools and other AFAQ applications.
 */

:root{
  --afaq-black:#080808;
  --afaq-paper:#eeeae2;
  --afaq-paper2:#e5e0d7;
  --afaq-ink:#111;
  --afaq-muted:#77736c;
  --afaq-line:rgba(17,17,17,.14);
  --afaq-header-h:68px;
}

#afaqPlatformShell{
  height:var(--afaq-header-h);
}

.afaq-app-header{
  position:fixed;
  inset:0 0 auto 0;
  height:var(--afaq-header-h);
  z-index:1000;

  display:flex;
  align-items:center;

  background:rgba(8,8,8,.92);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);

  border-bottom:1px solid rgba(255,255,255,.08);
}

.afaq-app-header .afaq-shell-nav{
  width:min(1440px,94%);
  margin:auto;

  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;

  direction:ltr;
}

.afaq-app-header .afaq-shell-side{
  display:flex;
  align-items:center;
  min-width:0;
}

.afaq-app-header .afaq-shell-side.left{
  justify-content:flex-start;
}

.afaq-app-header .afaq-shell-side.right{
  justify-content:flex-end;
}

.afaq-app-header .afaq-shell-account,
.afaq-app-header .afaq-shell-home{
  color:#aaa;
  text-decoration:none;
  white-space:nowrap;

  font-family:"Segoe UI","Noto Sans Arabic",Arial,sans-serif;
  font-size:11px;
  font-weight:400;
  letter-spacing:.12em;

  transition:color .2s ease;
}

.afaq-app-header .afaq-shell-account:hover,
.afaq-app-header .afaq-shell-home:hover{
  color:#fff;
}

.afaq-app-header .afaq-shell-logo{
  position:relative;

  display:inline-flex;
  align-items:baseline;

  direction:ltr;

  font-family:"Segoe UI",Arial,sans-serif;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.035em;
  line-height:1;
  white-space:nowrap;

  color:#fff;
  text-decoration:none;
}

.afaq-app-header .logo-main{
  position:relative;
}

.afaq-app-header .logo-dot{
  position:relative;
  display:inline-block;

  width:.22em;
  margin:0 .015em;

  text-align:center;
  color:var(--afaq-paper);
}

.afaq-app-header .logo-dot::after{
  content:"";

  position:absolute;
  left:50%;
  top:58%;

  width:.34em;
  height:.34em;

  border:1px solid rgba(238,234,226,.7);
  border-radius:50%;

  transform:translate(-50%,-50%) scale(.25);
  opacity:0;

  animation:afaqBrandPulse 4.6s ease-out infinite;
  pointer-events:none;
}

.afaq-app-header .logo-com{
  font-size:1em;
  font-weight:800;
  letter-spacing:-.035em;
  opacity:1;
}

@keyframes afaqBrandPulse{
  0%,72%,100%{
    transform:translate(-50%,-50%) scale(.25);
    opacity:0;
  }

  76%{
    opacity:.65;
  }

  88%{
    transform:translate(-50%,-50%) scale(2.6);
    opacity:0;
  }
}

@media(prefers-reduced-motion:reduce){
  .afaq-app-header .logo-dot::after{
    animation:none;
  }
}

@media(max-width:700px){
  :root{
    --afaq-header-h:62px;
  }

  .afaq-app-header .afaq-shell-nav{
    width:94%;
  }

  .afaq-app-header .afaq-shell-logo{
    font-size:19px;
  }

  .afaq-app-header .afaq-shell-account,
  .afaq-app-header .afaq-shell-home{
    font-size:9px;
    letter-spacing:.08em;
  }
}



/* AFAQ_SHELL_OFFICIAL_IDENTITY_BEGIN */

/* Synced directly from the official AFAQ platform. */

/* AFAQ_BRAND_MOTION_FINAL */
.logo-char{
  display:inline-block;
  transform-origin:50% 55%;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  animation:afaqBrandSlowSignature 9.8s cubic-bezier(.16,.84,.24,1) infinite both;
  animation-delay:calc(var(--i) * 280ms);
}

@keyframes afaqBrandSlowSignature{
  0%{
    opacity:.18;
    transform:perspective(600px) rotateY(-88deg) scale(.94);
  }

  10%{
    opacity:.72;
  }

  22%{
    opacity:1;
    transform:perspective(600px) rotateY(8deg) scale(1.015);
  }

  28.5%{
    opacity:1;
    transform:perspective(600px) rotateY(0deg) scale(1);
  }

  100%{
    opacity:1;
    transform:perspective(600px) rotateY(0deg) scale(1);
  }
}

@media(max-width:720px){
  .logo-char{
    animation-duration:9.8s;
    animation-delay:calc(var(--i) * 250ms);
  }
}

@media(prefers-reduced-motion:reduce){
  .logo-char{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

.afaq-header-clock{
  position:absolute;
  left:50%;
  bottom:6px;
  transform:translateX(-50%);
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  direction:ltr;
  color:#fff;
  white-space:nowrap;
  font-family:"Segoe UI",Arial,sans-serif;
  pointer-events:auto
}

.afaq-header-clock-time{
  color:#fff;
  font-size:10px;
  font-weight:600;
  line-height:1;
  letter-spacing:.08em;
  font-variant-numeric:tabular-nums
}

.afaq-clock-zone-wrap{
  position:relative
}

.afaq-clock-zone-btn{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:rgba(255,255,255,.72);
  font-family:"Segoe UI",Arial,sans-serif;
  font-size:8px;
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
  cursor:pointer
}

.afaq-clock-zone-btn:hover{
  color:#fff
}

.afaq-clock-menu{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translateX(-50%);
  width:190px;
  max-height:260px;
  overflow-y:auto;
  padding:6px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:12px;
  background:rgba(8,8,8,.96);
  box-shadow:0 14px 40px rgba(0,0,0,.34);
  display:none;
  z-index:400
}

.afaq-clock-menu.open{
  display:block
}

.afaq-clock-country{
  width:100%;
  border:0;
  border-radius:8px;
  padding:9px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:transparent;
  color:#ddd;
  font-family:inherit;
  font-size:11px;
  cursor:pointer;
  text-align:start
}

.afaq-clock-country:hover{
  background:rgba(255,255,255,.08);
  color:#fff
}

.afaq-clock-country b{
  color:#fff;
  font-size:9px;
  letter-spacing:.08em
}

/* Keep official clock above application content. */
.afaq-app-header .afaq-header-clock{
  z-index:20;
}

/* AFAQ_SHELL_OFFICIAL_IDENTITY_END */