/* ═══════════════════════════════════════════════════════════════
   DIWP — Account Fullscreen Shell  v2.0
   شاشة كاملة مستقلة — نظام متكامل بدون أي أثر للثيم
═══════════════════════════════════════════════════════════════ */
:root {
  --fs-sidebar-w:    260px;
  --fs-font:         'Alexandria','Segoe UI',Tahoma,sans-serif;
  --fs-bg:           #080810;
  --fs-sidebar-bg:   rgba(12,11,22,0.95);
  --fs-main-bg:      #0a0a14;
  --fs-border:       rgba(255,255,255,0.08);
  --fs-text:         #f0f0f8;
  --fs-text-muted:   rgba(200,200,220,0.65);
  --fs-accent:       var(--acct-accent, #5b8dee);
  --fs-accent-glow:  rgba(91,141,238,0.20);
  --fs-radius:       18px;
  --fs-nav-active-bg: linear-gradient(90deg,var(--fs-accent),rgba(91,141,238,0.55));
  --fs-speed:        0.28s;
  --fs-ease:         cubic-bezier(.25,.46,.45,.94);
}

/* ── Global reset for fullscreen ───────────────────────────────────────── */
html, body.diwp-account-fullscreen {
  height: 100% !important; margin: 0 !important; padding: 0 !important;
  background: var(--fs-bg) !important; color: var(--fs-text) !important;
  font-family: var(--fs-font) !important; overflow: hidden !important;
  direction: rtl !important;
}

/* ── Background animated gradients ─────────────────────────────────────── */
body.diwp-account-fullscreen::before {
  content: '' !important; position: fixed !important; inset: 0 !important;
  background:
    radial-gradient(ellipse 700px 500px at 15% 20%, rgba(91,141,238,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 600px 400px at 85% 80%, rgba(120,80,220,0.05) 0%, transparent 70%) !important;
  pointer-events: none !important; z-index: 0 !important;
  animation: diwp-bg-shift 12s ease-in-out infinite alternate !important;
}
@keyframes diwp-bg-shift {
  0%   { opacity: 1; }
  100% { opacity: 0.6; }
}

/* ── Shell layout ───────────────────────────────────────────────────────── */
.diwp-fs-shell {
  display: flex !important; flex-direction: row !important;
  height: 100vh !important; width: 100vw !important;
  position: relative !important; z-index: 1 !important;
  overflow: hidden !important;
}

/* ════════════════════════
   SIDEBAR
════════════════════════ */
.diwp-fs-sidebar {
  width: var(--fs-sidebar-w) !important;
  min-height: 100vh !important;
  flex-shrink: 0 !important;
  display: flex !important; flex-direction: column !important;
  background: var(--fs-sidebar-bg) !important;
  backdrop-filter: blur(32px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
  border-left: 1px solid var(--fs-border) !important;
  padding: 80px 12px 24px !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  position: relative !important;
  transition: transform var(--fs-speed) var(--fs-ease) !important;
  /* Subtle inner glow */
  box-shadow: inset -1px 0 0 rgba(91,141,238,0.07) !important;
}
/* Subtle top gradient accent */
.diwp-fs-sidebar::before {
  content: '' !important; position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important; height: 3px !important;
  background: linear-gradient(90deg, transparent, var(--fs-accent), transparent) !important;
  opacity: 0.6 !important;
}

/* ── User card ── */
.diwp-fs-user {
  display: flex !important; align-items: center !important; gap: 12px !important;
  padding: 16px 12px !important; margin-bottom: 8px !important;
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid var(--fs-border) !important;
  border-radius: var(--fs-radius) !important;
  position: relative !important;
}
.diwp-fs-avatar {
  position: relative !important; flex-shrink: 0 !important;
}
.diwp-fs-avatar img {
  width: 44px !important; height: 44px !important; border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid rgba(91,141,238,0.4) !important;
  display: block !important;
}
.diwp-fs-userinfo {
  flex: 1 !important; min-width: 0 !important; display: flex !important;
  flex-direction: column !important; gap: 2px !important;
}
.diwp-fs-username {
  font-size: 0.88rem !important; font-weight: 700 !important;
  color: #ffffff !important; white-space: nowrap !important;
  overflow: hidden !important; text-overflow: ellipsis !important;
}
.diwp-fs-email {
  font-size: 0.72rem !important; color: var(--fs-text-muted) !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
}

/* ── Nav ── */
.diwp-fs-nav {
  display: flex !important; flex-direction: column !important; gap: 2px !important;
  flex: 1 !important; margin-top: 8px !important;
}
.diwp-fs-nav-item {
  display: flex !important; align-items: center !important; gap: 12px !important;
  padding: 11px 14px !important; border-radius: 12px !important;
  color: rgba(210,210,235,0.85) !important;
  text-decoration: none !important; font-family: var(--fs-font) !important;
  font-size: 0.86rem !important; font-weight: 500 !important;
  transition:
    background var(--fs-speed),
    color var(--fs-speed),
    transform var(--fs-speed),
    box-shadow var(--fs-speed) !important;
  background: transparent !important; border: none !important; outline: none !important;
  cursor: pointer !important; position: relative !important; overflow: hidden !important;
}
/* Shimmer on hover */
.diwp-fs-nav-item::before {
  content: '' !important; position: absolute !important;
  inset: 0 !important; background: rgba(255,255,255,0.05) !important;
  transform: translateX(100%) !important;
  transition: transform 0.4s var(--fs-ease) !important;
  border-radius: 12px !important;
}
.diwp-fs-nav-item:hover::before { transform: translateX(0) !important; }
.diwp-fs-nav-item:hover {
  background: rgba(255,255,255,0.08) !important; color: #ffffff !important;
  transform: translateX(-3px) !important;
}
.diwp-fs-nav-item.is-active,
.diwp-fs-nav-item.current-menu-item {
  background: var(--fs-nav-active-bg) !important;
  color: #ffffff !important; font-weight: 600 !important;
  box-shadow: 0 4px 20px var(--fs-accent-glow) !important;
  transform: none !important;
}
.diwp-fs-nav-item.is-active::before { display: none !important; }
.diwp-fs-nav-icon {
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important; width: 20px !important; height: 20px !important;
  opacity: 0.8 !important;
}
.diwp-fs-nav-item:hover .diwp-fs-nav-icon,
.diwp-fs-nav-item.is-active .diwp-fs-nav-icon { opacity: 1 !important; }
.diwp-fs-nav-label { flex: 1 !important; }

/* Logout item — red hint */
.diwp-fs-logout {
  margin-top: 12px !important; border-top: 1px solid var(--fs-border) !important;
  padding-top: 14px !important;
  color: rgba(255,120,120,0.75) !important;
}
.diwp-fs-logout:hover { color: #ff8080 !important; background: rgba(255,80,80,0.08) !important; }

/* Close button (mobile) */
.diwp-fs-sidebar-close {
  display: none !important; position: absolute !important;
  top: 16px !important; left: 16px !important;
  background: rgba(255,255,255,0.08) !important; border: none !important;
  color: var(--fs-text) !important; width: 32px !important; height: 32px !important;
  border-radius: 50% !important; cursor: pointer !important;
  font-size: 14px !important; transition: background .2s !important;
}

/* ════════════════════════
   MAIN CONTENT AREA
════════════════════════ */
.diwp-fs-main {
  flex: 1 !important; min-width: 0 !important;
  display: flex !important; flex-direction: column !important;
  background: var(--fs-main-bg) !important;
  overflow: hidden !important;
}

/* ── Mobile topbar ── */
.diwp-fs-topbar {
  display: none !important; /* hidden on desktop */
  align-items: center !important; justify-content: space-between !important;
  padding: 12px 18px !important;
  background: rgba(12,11,22,0.95) !important;
  backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--fs-border) !important;
  flex-shrink: 0 !important; position: sticky !important; top: 0 !important; z-index: 100 !important;
}
.diwp-fs-menu-btn {
  background: rgba(255,255,255,0.08) !important; border: none !important;
  color: var(--fs-text) !important; width: 38px !important; height: 38px !important;
  border-radius: 10px !important; cursor: pointer !important; display: flex !important;
  align-items: center !important; justify-content: center !important;
}
.diwp-fs-topbar-title {
  font-size: 0.9rem !important; font-weight: 700 !important; color: #fff !important;
}
.diwp-fs-topbar-avatar {
  width: 32px !important; height: 32px !important; border-radius: 50% !important;
  object-fit: cover !important; border: 2px solid rgba(91,141,238,0.4) !important;
}

/* ── Scrollable content ── */
.diwp-fs-content {
  flex: 1 !important; overflow-y: auto !important;
  padding: 32px 36px 48px !important;
  scroll-behavior: smooth !important;
  /* Gradient top for depth */
  background: linear-gradient(180deg,
    rgba(91,141,238,0.02) 0%,
    transparent 120px) !important;
}
/* Custom scrollbar */
.diwp-fs-content::-webkit-scrollbar { width: 5px !important; }
.diwp-fs-content::-webkit-scrollbar-track { background: transparent !important; }
.diwp-fs-content::-webkit-scrollbar-thumb {
  background: rgba(91,141,238,0.3) !important; border-radius: 4px !important;
}
.diwp-fs-content::-webkit-scrollbar-thumb:hover { background: rgba(91,141,238,0.55) !important; }

/* ── Strip WC navigation (we have our own sidebar) ── */
.diwp-fs-content .woocommerce-MyAccount-navigation,
.diwp-account-fullscreen .woocommerce-MyAccount-navigation { display: none !important; }
.diwp-fs-content .woocommerce-MyAccount-content,
.diwp-account-fullscreen .woocommerce-MyAccount-content {
  width: 100% !important; float: none !important; padding: 0 !important; margin: 0 !important;
}

/* ── Page entry animation ── */
.diwp-fs-content .woocommerce {
  animation: diwp-content-in 0.4s var(--fs-ease) both !important;
}
@keyframes diwp-content-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ── Mobile overlay ── */
.diwp-fs-overlay {
  display: none !important; position: fixed !important; inset: 0 !important;
  background: rgba(0,0,0,0.6) !important; backdrop-filter: blur(4px) !important;
  z-index: 999 !important; opacity: 0 !important;
  transition: opacity var(--fs-speed) !important;
}
.diwp-fs-overlay.active { opacity: 1 !important; display: block !important; }

/* ════════════════════════
   RESPONSIVE
════════════════════════ */
@media (max-width: 900px) {
  html, body.diwp-account-fullscreen { overflow: auto !important; }
  .diwp-fs-shell { flex-direction: column !important; height: auto !important; min-height: 100vh !important; }

  .diwp-fs-sidebar {
    position: fixed !important; right: 0 !important; top: 0 !important;
    height: 100vh !important; z-index: 1000 !important; padding-top: 56px !important;
    transform: translateX(100%) !important; /* hidden by default */
    width: min(var(--fs-sidebar-w), 80vw) !important;
  }
  .diwp-fs-sidebar.open { transform: translateX(0) !important; }
  .diwp-fs-sidebar-close { display: flex !important; align-items: center !important; justify-content: center !important; }

  .diwp-fs-main { min-height: 100vh !important; }
  .diwp-fs-topbar { display: flex !important; }
  .diwp-fs-content { padding: 20px 18px 60px !important; }
}


/* ── Mobile account menu: bottom app-style navigation ───────────────────── */
.diwp-fs-mobile-nav {
  display: none !important;
}

@media (max-width: 900px) {
  .diwp-fs-content {
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
  }

  .diwp-fs-mobile-nav {
    display: flex !important;
    align-items: stretch !important;
    gap: 6px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom)) !important;
    background: rgba(12,11,22,0.96) !important;
    border-top: 1px solid var(--fs-border) !important;
    box-shadow: 0 -14px 34px rgba(0,0,0,0.28) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    scrollbar-width: none !important;
    position: fixed !important;
    top: auto !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 2147483000 !important;
  }
  .diwp-fs-mobile-nav::-webkit-scrollbar { display: none !important; }
  .diwp-fs-mobile-nav-item {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    flex: 1 0 74px !important;
    min-width: 74px !important;
    max-width: 110px !important;
    min-height: 54px !important;
    padding: 7px 8px !important;
    border-radius: 16px !important;
    color: rgba(235,235,248,0.86) !important;
    text-decoration: none !important;
    font-family: var(--fs-font) !important;
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    white-space: nowrap !important;
  }
  .diwp-fs-mobile-nav-item .diwp-fs-nav-icon {
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .diwp-fs-mobile-nav-item.is-active,
  .diwp-fs-mobile-nav-item.woocommerce-MyAccount-navigation-link--active {
    background: var(--fs-nav-active-bg) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.08) !important;
  }
}