/* Folanja v1.22.62 — mobile header icon visibility + brand micro-polish */

/* Keep all header SVG controls readable in both themes. */
.site-header .header-search button,
.site-header .core-account-link,
.site-header .header-logout-button,
.site-header .theme-toggle,
.site-header .menu-toggle,
.site-header .mobile-fortune-shortcut{
  color:#563071!important;
  border-color:rgba(104,62,133,.18)!important;
  background:rgba(255,255,255,.72)!important;
  box-shadow:0 8px 20px rgba(77,43,101,.07)!important;
}
html[data-theme="dark"] .site-header .header-search button,
html[data-theme="dark"] .site-header .core-account-link,
html[data-theme="dark"] .site-header .header-logout-button,
html[data-theme="dark"] .site-header .theme-toggle,
html[data-theme="dark"] .site-header .menu-toggle,
html[data-theme="dark"] .site-header .mobile-fortune-shortcut{
  color:#eee4f7!important;
  border-color:rgba(225,198,239,.16)!important;
  background:rgba(31,22,38,.78)!important;
  box-shadow:0 8px 20px rgba(0,0,0,.18)!important;
}

/* Explicit icon colors — do not depend on legacy text/icon rules. */
.site-header .ui-ico{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  color:inherit!important;
  stroke:currentColor!important;
}
.site-header .core-user-glyph{
  color:#fff!important;
  background:linear-gradient(135deg,#67349b,#d8812e)!important;
  box-shadow:0 7px 16px rgba(91,50,123,.18)!important;
}
.site-header .core-user-avatar{
  color:#fff!important;
  background:linear-gradient(135deg,#67349b,#d8812e)!important;
}
.site-header .header-logout-button{color:#c74854!important}
html[data-theme="dark"] .site-header .header-logout-button{color:#ff9ba4!important}
.site-header .mobile-fortune-shortcut{color:#d57b20!important}
html[data-theme="dark"] .site-header .mobile-fortune-shortcut{color:#f2b55e!important}

/* Theme icon: always show exactly the correct SVG. */
.site-header .theme-toggle .sun{
  display:grid!important;
  place-items:center!important;
  visibility:visible!important;
  opacity:1!important;
  color:#6a3d83!important;
}
.site-header .theme-toggle .moon{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}
html[data-theme="dark"] .site-header .theme-toggle .sun{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
}
html[data-theme="dark"] .site-header .theme-toggle .moon{
  display:grid!important;
  place-items:center!important;
  visibility:visible!important;
  opacity:1!important;
  color:#f5d899!important;
}

/* Search magnifier: smaller, lighter and not a large purple block. */
.site-header .header-search button{
  width:27px!important;
  min-width:27px!important;
  height:27px!important;
  min-height:27px!important;
  padding:0!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#6b38a0!important;
}
html[data-theme="dark"] .site-header .header-search button{
  background:transparent!important;
  color:#d8bbf0!important;
}
.site-header .header-search .ui-ico-search{
  width:13px!important;
  height:13px!important;
  min-width:13px!important;
  min-height:13px!important;
  flex-basis:13px!important;
  stroke-width:1.75!important;
}

/* Brand copy: slightly larger, lower and closer to the /1.png logo. */
.site-header .fol-header-brand{
  gap:4px!important;
}
.site-header .fol-header-brand-copy{
  transform:translate(3px,3px)!important;
}
.site-header .fol-header-brand-name{
  font-size:31px!important;
  line-height:.98!important;
  font-weight:400!important;
  font-synthesis:none!important;
}
.site-header .fol-header-brand-subtitle{
  margin-top:3px!important;
  font-weight:400!important;
}

/* Mobile: keep one row; brand gets a little more visual presence without moving controls. */
@media(max-width:820px){
  .site-header .fol-header-brand{
    gap:3px!important;
  }
  .site-header .fol-header-brand-copy{
    transform:translate(3px,3px)!important;
  }
  .site-header .fol-header-brand-name{
    font-size:26px!important;
    line-height:.94!important;
    font-weight:400!important;
    font-synthesis:none!important;
  }
  .site-header .fol-header-brand-subtitle{
    margin-top:4px!important;
    font-size:7.4px!important;
    line-height:1.08!important;
  }

  .site-header .header-search button,
  .site-header .core-account-link,
  .site-header .header-logout-button,
  .site-header .theme-toggle,
  .site-header .menu-toggle,
  .site-header .mobile-fortune-shortcut{
    display:grid!important;
    place-items:center!important;
  }

  .site-header .theme-toggle .ui-ico,
  .site-header .menu-toggle .ui-ico,
  .site-header .header-logout-button .ui-ico,
  .site-header .mobile-fortune-shortcut .ui-ico,
  .site-header .core-account-link .ui-ico{
    width:16px!important;
    height:16px!important;
    min-width:16px!important;
    min-height:16px!important;
  }

  .site-header .header-search button{
    width:26px!important;
    min-width:26px!important;
    height:26px!important;
    min-height:26px!important;
  }
  .site-header .header-search .ui-ico-search{
    width:12px!important;
    height:12px!important;
    min-width:12px!important;
    min-height:12px!important;
  }
}

@media(max-width:520px){
  .site-header .fol-header-brand-name{font-size:25px!important}
  .site-header .fol-header-brand-subtitle{font-size:7.1px!important}
  .site-header .fol-header-brand-copy{transform:translate(3px,3px)!important}
}

@media(max-width:430px){
  .site-header .fol-header-brand-name{font-size:23px!important}
  .site-header .fol-header-brand-subtitle{font-size:6.7px!important}
  .site-header .fol-header-brand-copy{transform:translate(2px,3px)!important}
}

@media(max-width:380px){
  .site-header .fol-header-brand-name{font-size:21px!important}
  .site-header .fol-header-brand-subtitle{font-size:6.2px!important}
}


/* v1.22.63 — BRAND ONLY. Mobile header icons/controls are frozen above. */
.site-header .fol-header-brand-copy{
  display:grid!important;
  grid-template-rows:auto auto!important;
  grid-auto-flow:row!important;
  align-content:center!important;
  justify-items:start!important;
  flex-wrap:nowrap!important;
  white-space:nowrap!important;
  text-align:right!important;
}
.site-header .fol-header-brand-name{
  display:block!important;
  grid-row:1!important;
  margin:0!important;
  padding:0!important;
  font-family:"FolanjaNastaliq",serif!important;
  font-weight:400!important;
  font-style:normal!important;
  font-synthesis:none!important;
  color:#9751E8!important;
  -webkit-text-fill-color:#9751E8!important;
  font-size:32px!important;
  line-height:1.35!important;
  letter-spacing:0!important;
  white-space:nowrap!important;
  text-shadow:none!important;
}
.site-header .fol-header-brand-subtitle{
  display:block!important;
  grid-row:2!important;
  margin:-4px 0 0!important;
  padding:0!important;
  font-family:"Vazirmatn",sans-serif!important;
  font-size:9px!important;
  line-height:1.2!important;
  font-weight:400!important;
  color:var(--muted)!important;
  white-space:nowrap!important;
}

@media(min-width:821px){
  .site-header .fol-header-brand-copy{transform:translate(4px,4px)!important}
  .site-header .fol-header-brand-name{font-size:33px!important;line-height:1.35!important}
  .site-header .fol-header-brand-subtitle{font-size:9px!important;margin-top:-5px!important}
}

@media(max-width:820px){
  .site-header .fol-header-brand-copy{transform:translate(3px,4px)!important}
  .site-header .fol-header-brand-name{font-size:28px!important;line-height:1.36!important}
  .site-header .fol-header-brand-subtitle{font-size:7.4px!important;line-height:1.15!important;margin-top:-4px!important}
}
@media(max-width:520px){
  .site-header .fol-header-brand-name{font-size:27px!important}
  .site-header .fol-header-brand-subtitle{font-size:7.1px!important}
}
@media(max-width:430px){
  .site-header .fol-header-brand-name{font-size:25px!important}
  .site-header .fol-header-brand-subtitle{font-size:6.6px!important}
}
@media(max-width:380px){
  .site-header .fol-header-brand-name{font-size:23px!important}
  .site-header .fol-header-brand-subtitle{font-size:6.1px!important}
}


/* Folanja v1.22.64 — Auth Autofill + Premium Tabs ONLY
   Header/mobile icons/brand are intentionally untouched. */

.core-auth-page{
  --fol-auth-field-bg:#fffaf7;
  --fol-auth-field-bg-focus:#fffdfb;
  --fol-auth-field-border:rgba(126,76,151,.20);
  --fol-auth-field-text:#2f2430;
  --fol-auth-tab-bg:rgba(255,251,247,.55);
  --fol-auth-tab-border:rgba(112,75,126,.13);
  --fol-auth-tab-text:#74656f;
  --fol-auth-tab-active:#43254f;
  --fol-auth-tab-active-bg-1:rgba(151,81,232,.14);
  --fol-auth-tab-active-bg-2:rgba(226,133,37,.10);
  color-scheme:light;
}
html[data-theme="dark"] .core-auth-page{
  --fol-auth-field-bg:#1b1421;
  --fol-auth-field-bg-focus:#211727;
  --fol-auth-field-border:rgba(197,157,219,.20);
  --fol-auth-field-text:#f6eef8;
  --fol-auth-tab-bg:rgba(24,17,29,.64);
  --fol-auth-tab-border:rgba(216,181,233,.12);
  --fol-auth-tab-text:#b9a9bd;
  --fol-auth-tab-active:#fff7ff;
  --fol-auth-tab-active-bg-1:rgba(151,81,232,.24);
  --fol-auth-tab-active-bg-2:rgba(226,133,37,.13);
  color-scheme:dark;
}

/* -------- Saved credentials / browser autofill -------- */
.core-auth-form input{
  background:var(--fol-auth-field-bg)!important;
  background-color:var(--fol-auth-field-bg)!important;
  background-image:none!important;
  color:var(--fol-auth-field-text)!important;
  border-color:var(--fol-auth-field-border)!important;
  -webkit-text-fill-color:var(--fol-auth-field-text)!important;
  caret-color:var(--fol-auth-field-text)!important;
}
.core-auth-form input:focus{
  background:var(--fol-auth-field-bg-focus)!important;
  background-color:var(--fol-auth-field-bg-focus)!important;
  border-color:rgba(151,81,232,.58)!important;
  box-shadow:0 0 0 4px rgba(151,81,232,.08)!important;
}
.core-auth-form input:-webkit-autofill,
.core-auth-form input:-webkit-autofill:hover,
.core-auth-form input:-webkit-autofill:focus,
.core-auth-form input:-webkit-autofill:active{
  -webkit-text-fill-color:var(--fol-auth-field-text)!important;
  caret-color:var(--fol-auth-field-text)!important;
  -webkit-box-shadow:0 0 0 1000px var(--fol-auth-field-bg) inset!important;
  box-shadow:0 0 0 1000px var(--fol-auth-field-bg) inset!important;
  background-color:var(--fol-auth-field-bg)!important;
  background-image:none!important;
  border-color:var(--fol-auth-field-border)!important;
  -webkit-background-clip:padding-box!important;
  background-clip:padding-box!important;
  filter:none!important;
  transition:background-color 999999s 0s,color 999999s 0s!important;
}
.core-auth-form input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px var(--fol-auth-field-bg-focus) inset,0 0 0 4px rgba(151,81,232,.08)!important;
  box-shadow:0 0 0 1000px var(--fol-auth-field-bg-focus) inset,0 0 0 4px rgba(151,81,232,.08)!important;
  border-color:rgba(151,81,232,.58)!important;
}
.core-auth-form input:autofill,
.core-auth-form input:autofill:hover,
.core-auth-form input:autofill:focus{
  color:var(--fol-auth-field-text)!important;
  -webkit-text-fill-color:var(--fol-auth-field-text)!important;
  background:var(--fol-auth-field-bg)!important;
  background-color:var(--fol-auth-field-bg)!important;
  background-image:none!important;
  box-shadow:0 0 0 1000px var(--fol-auth-field-bg) inset!important;
  border-color:var(--fol-auth-field-border)!important;
}

/* -------- Premium login/register segmented tabs -------- */
.core-auth-tabs{
  position:relative!important;
  isolation:isolate!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:7px!important;
  padding:6px!important;
  margin-bottom:21px!important;
  border:1px solid var(--fol-auth-tab-border)!important;
  border-radius:20px!important;
  background:linear-gradient(145deg,var(--fol-auth-tab-bg),color-mix(in srgb,var(--fol-auth-tab-bg) 80%,transparent))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 26px rgba(65,38,78,.05)!important;
  backdrop-filter:blur(14px)!important;
  -webkit-backdrop-filter:blur(14px)!important;
}
html[data-theme="dark"] .core-auth-tabs{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035),0 12px 28px rgba(0,0,0,.15)!important;
}
.core-auth-tabs a{
  position:relative!important;
  z-index:1!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:48px!important;
  padding:0 16px!important;
  border:1px solid transparent!important;
  border-radius:15px!important;
  color:var(--fol-auth-tab-text)!important;
  background:transparent!important;
  text-decoration:none!important;
  font-size:12.5px!important;
  font-weight:700!important;
  letter-spacing:0!important;
  box-shadow:none!important;
  transition:color .18s ease,transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.core-auth-tabs a:hover{
  color:var(--fol-auth-tab-active)!important;
  background:rgba(151,81,232,.055)!important;
}
.core-auth-tabs a.active{
  color:var(--fol-auth-tab-active)!important;
  background:
    radial-gradient(120px 44px at 12% 0%,rgba(255,255,255,.40),transparent 70%),
    linear-gradient(135deg,var(--fol-auth-tab-active-bg-1),var(--fol-auth-tab-active-bg-2))!important;
  border-color:rgba(151,81,232,.23)!important;
  box-shadow:0 10px 24px rgba(88,47,116,.10),inset 0 1px 0 rgba(255,255,255,.45)!important;
  transform:translateY(-1px)!important;
}
html[data-theme="dark"] .core-auth-tabs a.active{
  border-color:rgba(193,143,224,.23)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.core-auth-tabs a.active::after{
  content:""!important;
  position:absolute!important;
  left:22%!important;
  right:22%!important;
  bottom:5px!important;
  height:2px!important;
  border-radius:999px!important;
  background:linear-gradient(90deg,#9751E8,#D98229)!important;
  box-shadow:0 0 10px rgba(151,81,232,.22)!important;
}

@media(max-width:620px){
  .core-auth-tabs{
    gap:6px!important;
    padding:5px!important;
    margin-bottom:16px!important;
    border-radius:18px!important;
  }
  .core-auth-tabs a{
    min-height:45px!important;
    border-radius:13px!important;
    font-size:12px!important;
  }
  .core-auth-tabs a.active::after{
    left:24%!important;
    right:24%!important;
    bottom:4px!important;
  }
}