:root{
  --ikram-brand: #0B3A2A;
  --ikram-accent: #1a73e8;
  --ikram-border: rgba(0,0,0,.12);
}

/* HEADER ICONS (search + member) */
.ast-primary-header-bar,
.site-header,
header{ position: relative; }

.ikram-hdr-actions{
  position: absolute;
  right: var(--ikram-right, 18px);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--ikram-gap, 14px);
  z-index: 9999;
}
.ikram-hdr-btn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0;
}
.ikram-hdr-btn svg{
  width: 22px;
  height: 22px;
  fill: currentColor;
  opacity: .95;
}
.ikram-hdr-btn:hover svg{ opacity: 1; }

@media (max-width: 921px){
  .ikram-hdr-actions{ right: 12px; gap: 12px; }
}

/* POPUP OVERLAY */
.ikram-popup[aria-hidden="true"]{ display:none; }
.ikram-popup{
  position: fixed;
  inset: 0;
  z-index: 999999;
}
.ikram-popup-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
}
.ikram-popup-panel{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: min(92vw, 460px);
  max-height: 88vh;
  overflow: auto;
  border-radius: 16px;
}
.ikram-popup-close{
  position:absolute;
  right: 10px;
  top: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.35);
  color:#fff;
  font-size: 22px;
  line-height: 1;
  cursor:pointer;
  z-index: 2;
}
.ikram-popup-body{ padding: 0; }

/* CARD + FORM (match your screenshot) */
.ikram-auth-card{
  background: #fff;
  border: 1px solid var(--ikram-border);
  border-radius: 16px;
  padding: 18px 18px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}
.ikram-auth-card h2{
  margin: 0 0 12px;
  font-size: 20px;
  letter-spacing: .4px;
  text-transform: uppercase;
  text-align: left;
}
.ikram-mini{ margin: 6px 0 10px; color: rgba(0,0,0,.7); }

.ikram-form{ margin-top: 8px; }
.ikram-field{ margin-bottom: 12px; }
.ikram-field label{
  display:block;
  font-weight: 700;
  color: var(--ikram-accent);
  font-size: 13px;
  margin-bottom: 6px;
}
.ikram-field input,
.ikram-field textarea{
  width: 100%;
  border: 1px solid rgba(26,115,232,.25);
  border-radius: 8px;
  padding: 11px 12px;
  outline: none;
  background: #fff;
  transition: box-shadow .15s, border-color .15s;
}
.ikram-field input:focus,
.ikram-field textarea:focus{
  border-color: rgba(26,115,232,.55);
  box-shadow: 0 0 0 4px rgba(26,115,232,.12);
}
.ikram-check{
  display:flex;
  align-items:center;
  gap:10px;
  margin: 10px 0 6px;
  font-size: 13px;
}
.ikram-check input{ width:18px; height:18px; }
.ikram-check a{ color: #d10000; font-weight: 700; text-decoration:none; }
.ikram-check a:hover{ text-decoration: underline; }

.ikram-btn{
  width: 100%;
  display:block;
  padding: 12px 14px;
  margin-top: 10px;
  border: 0;
  border-radius: 10px;
  background: var(--ikram-brand);
  color:#fff;
  font-weight: 800;
  letter-spacing: .8px;
  cursor:pointer;
  text-transform: uppercase;
}
.ikram-btn:hover{ filter: brightness(1.06); }
.ikram-btn-ghost{
  background: transparent;
  color: var(--ikram-brand);
  border: 2px solid rgba(11,58,42,.25);
  width: auto;
}
.ikram-actions{
  display:flex;
  gap:10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.ikram-actions .ikram-btn{ width:auto; }

.ikram-alert{
  padding:10px 12px;
  border-radius: 10px;
  background: #fff4f4;
  border: 1px solid #ffcdcd;
  margin-bottom: 12px;
}
.ikram-loading{ padding: 18px; background:#fff; border-radius: 16px; }

.ikram-msg{
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 700;
}
.ikram-msg.is-err{ background:#fff4f4; border:1px solid #ffcdcd; color:#8b0000; }
.ikram-msg.is-ok{ background:#f3fff7; border:1px solid #bfe8cc; color:#0a5a2a; }

/* Tabs */
.ikram-tabs{
  display:flex;
  gap:10px;
  margin-bottom: 10px;
}
.ikram-tab{
  flex:1;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 900;
  cursor:pointer;
}
.ikram-tab.is-on{
  background: rgba(11,58,42,.10);
  border-color: rgba(11,58,42,.25);
}

/* Follow bar */
.ikram-follow{ margin-top: 16px; }
.ikram-follow-title{
  text-align:center;
  color: rgba(0,0,0,.55);
  font-weight: 800;
  font-size: 12px;
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
}
.ikram-follow-title::before,
.ikram-follow-title::after{
  content:'';
  height:1px;
  width: 90px;
  background: rgba(0,0,0,.12);
  display:block;
}
.ikram-follow-icons{
  margin-top: 12px;
  display:flex;
  justify-content:center;
  gap:10px;
}
.ikram-si{
  width: 40px;
  height: 40px;
  border-radius: 6px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: #eee;
  position: relative;
  text-decoration:none;
}
.ikram-si::before{
  content:'';
  width: 22px;
  height: 22px;
  background: #fff;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}
.si-facebook{ background:#1877f2; }
.si-instagram{ background:#c13584; }
.si-tiktok{ background:#000; }
.si-youtube{ background:#ff0000; }
.si-facebook::before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.14 288l14.22-92.66h-88.91V117.78c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.2V288z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.14 288l14.22-92.66h-88.91V117.78c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.2V288z'/%3E%3C/svg%3E");
}
.si-tiktok::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448 209.9v125.1c-56.2 0-108.5-18.1-151-48.7v88.7c0 70.7-57.3 128-128 128s-128-57.3-128-128 57.3-128 128-128c9.5 0 18.7 1 27.6 3V292c-8.7-3.9-18.3-6-28.6-6-38.7 0-70 31.3-70 70s31.3 70 70 70 70-31.3 70-70V0h125.1c7.2 56.9 55.7 101 114.7 101v108.9c-41.9 0-80.3-13.7-111.8-36.9v0z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M448 209.9v125.1c-56.2 0-108.5-18.1-151-48.7v88.7c0 70.7-57.3 128-128 128s-128-57.3-128-128 57.3-128 128-128c9.5 0 18.7 1 27.6 3V292c-8.7-3.9-18.3-6-28.6-6-38.7 0-70 31.3-70 70s31.3 70 70 70 70-31.3 70-70V0h125.1c7.2 56.9 55.7 101 114.7 101v108.9c-41.9 0-80.3-13.7-111.8-36.9v0z'/%3E%3C/svg%3E");
}
.si-youtube::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M549.7 124.1c-6.3-23.6-24.8-42.2-48.3-48.5C458.8 64 288 64 288 64S117.2 64 74.6 75.6c-23.5 6.3-42 24.9-48.3 48.5C14.7 167 14.7 256 14.7 256s0 89 11.6 131.9c6.3 23.6 24.8 41.2 48.3 47.5C117.2 448 288 448 288 448s170.8 0 213.4-12.6c23.5-6.3 42-23.9 48.3-47.5C561.3 345 561.3 256 561.3 256s0-89-11.6-131.9zM232 334V178l142 78-142 78z'/%3E%3C/svg%3E");
          mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M549.7 124.1c-6.3-23.6-24.8-42.2-48.3-48.5C458.8 64 288 64 288 64S117.2 64 74.6 75.6c-23.5 6.3-42 24.9-48.3 48.5C14.7 167 14.7 256 14.7 256s0 89 11.6 131.9c6.3 23.6 24.8 41.2 48.3 47.5C117.2 448 288 448 288 448s170.8 0 213.4-12.6c23.5-6.3 42-23.9 48.3-47.5C561.3 345 561.3 256 561.3 256s0-89-11.6-131.9zM232 334V178l142 78-142 78z'/%3E%3C/svg%3E");
}
/* Instagram: show logo as white dot if mask not available (still ok visually) */
.si-instagram::before{
  content:'';
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background:#fff;
}


/* ===== FIX: Theme override protection ===== */
.ikram-popup .ikram-auth-card,
.ikram-popup .ikram-auth-card *{
  box-sizing: border-box;
}

.ikram-popup .ikram-field label{ color: var(--ikram-accent) !important; }
.ikram-popup .ikram-btn{
  background: var(--ikram-brand) !important;
  color: #fff !important;
}
.ikram-popup .ikram-btn-ghost{
  background: transparent !important;
  color: var(--ikram-brand) !important;
  border-color: rgba(11,58,42,.25) !important;
}

/* ===== FIX: Header icons above social icons, bigger ===== */
.ikram-hdr-actions{
  position: fixed !important;
  top: 18px !important;
  right: var(--ikram-right, 18px) !important;
  transform: none !important;
  z-index: 2147483000 !important;
}
.ikram-hdr-btn{
  width: 40px !important;
  height: 40px !important;
  background: rgba(0,0,0,.25) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  backdrop-filter: blur(3px);
}
.ikram-hdr-btn svg{ width: 26px !important; height: 26px !important; }
@media (max-width: 921px){
  .ikram-hdr-actions{ top: 12px !important; right: 12px !important; }
}


/* ===== MOBILE VISIBILITY GUARANTEE ===== */
.ikram-hdr-actions{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
body.admin-bar .ikram-hdr-actions{ top: 58px !important; }


/* ===== MOBILE: icons directly under hamburger ===== */
@media (max-width: 921px){
  .ikram-hdr-actions{
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
  }
  .ikram-hdr-actions.ikram-mobile-under-burger .ikram-hdr-btn{
    width: 44px !important;
    height: 44px !important;
  }
  .ikram-hdr-actions.ikram-mobile-under-burger .ikram-hdr-btn svg{ width: 28px !important; height: 28px !important; }
}

/* Desktop keep fixed */
@media (min-width: 922px){
  .ikram-hdr-actions{
    position: fixed !important;
    top: 18px !important;
    right: var(--ikram-right, 18px) !important;
    transform: none !important;
  }
}


/* ===== MOBILE SLOT: under hamburger/header bar ===== */
@media (max-width: 921px){
  .ikram-mobile-actions-slot{
    position: relative !important;
    width: 100% !important;
    min-height: 56px !important;
    background: #ffffff !important;
    z-index: 50 !important;
  }
  .ikram-hdr-actions.ikram-mobile-under-burger{
    position: absolute !important;
    top: 6px !important;
    right: 12px !important;
    left: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }
  .ikram-hdr-actions.ikram-mobile-under-burger .ikram-hdr-btn{
    width: 44px !important;
    height: 44px !important;
  }
  .ikram-hdr-actions.ikram-mobile-under-burger .ikram-hdr-btn svg{
    width: 28px !important;
    height: 28px !important;
  }
}


/* ===== MOBILE: INSIDE GREEN HEADER (no extra band) ===== */
@media (max-width: 921px){
  .ikram-mobile-actions-slot{ display:none !important; height:0 !important; }
  .ikram-hdr-actions.ikram-mobile-in-green{
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 2147483000 !important;
  }
  .ikram-hdr-actions.ikram-mobile-in-green .ikram-hdr-btn{
    width: 44px !important;
    height: 44px !important;
    background: rgba(0,0,0,.25) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    backdrop-filter: blur(3px);
  }
  .ikram-hdr-actions.ikram-mobile-in-green .ikram-hdr-btn svg{
    width: 28px !important;
    height: 28px !important;
  }
}


/* ===== MOBILE: fixed under hamburger INSIDE green header (clamped) ===== */
@media (max-width: 921px){
  .ikram-mobile-actions-slot{ display:none !important; height:0 !important; }
  .ikram-hdr-actions.ikram-mobile-burger-fixed{
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .ikram-hdr-actions.ikram-mobile-burger-fixed .ikram-hdr-btn{
    width: 44px !important;
    height: 44px !important;
    background: rgba(0,0,0,.25) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    backdrop-filter: blur(3px);
  }
  .ikram-hdr-actions.ikram-mobile-burger-fixed .ikram-hdr-btn svg{
    width: 28px !important;
    height: 28px !important;
  }
}