/* =====================================================
   NemG Profile — Theme v3.0 (Educational Platform Style)
   Inspired by: LearnHub / Edu Platform Modern UI
   ===================================================== */

@view-transition { navigation: auto; }

/* ── Design Tokens ─────────────────────────────────── */
:root {
  --primary:        #6366f1;
  --primary-dark:   #4f46e5;
  --primary-light:  #e0e7ff;
  --secondary:      #8b5cf6;
  --accent:         #06b6d4;
  --success:        #10b981;
  --warning:        #f59e0b;
  --danger:         #ef4444;

  --grad-primary:   linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --grad-hero:      linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
  --grad-accent:    linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
  --grad-warm:      linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  --grad-green:     linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
  --grad-card:      linear-gradient(145deg, #ffffff 0%, #f8faff 100%);

  --bg:             #f1f5f9;
  --bg-card:        #ffffff;
  --bg-glass:       rgba(255,255,255,0.82);
  --border:         #e2e8f0;
  --border-strong:  #c7d2fe;

  --text:           #0f172a;
  --text-secondary: #475569;
  --text-muted:     #94a3b8;
  --text-white:     #ffffff;

  --shadow-sm:  0 1px 4px rgba(99,102,241,0.08);
  --shadow-md:  0 4px 20px rgba(99,102,241,0.12);
  --shadow-lg:  0 10px 40px rgba(99,102,241,0.18);
  --shadow-xl:  0 20px 64px rgba(99,102,241,0.22);

  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-full: 9999px;

  --ease:    cubic-bezier(0.4, 0, 0.2, 1);
  --spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --t:       0.3s var(--ease);
}

/* ── Reset & Base ────────────────────────────────────── */
html, body {
  background: var(--bg) !important;
  color: var(--text) !important;
  scroll-behavior: smooth;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.2s;
  animation-timing-function: ease-out;
}

/* ── Typography ──────────────────────────────────────── */
body,
body button, body input, body textarea, body select,
body .btn, body .card, body .dropdown-item,
body h1, body h2, body h3, body h4, body h5, body h6,
body p, body span, body a, body label, body small {
  font-family: "Plus Jakarta Sans", "Nunito Sans", system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif !important;
}

body h1, body h2, body h3, body .logo-text,
body .name, body .brand-name, body .section-title {
  font-weight: 800 !important;
  color: var(--text) !important;
  letter-spacing: -0.02em !important;
}

body .text-muted,
body .text-secondary,
body .text-main,
body .section-subtitle,
body .brand-description,
body .copyright,
body .credits,
body .user-role,
body .social-stats,
body .website-provide {
  color: var(--text-muted) !important;
}

/* ── Global Body Background ──────────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(99,102,241,0.09) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(139,92,246,0.07) 0%, transparent 55%);
  pointer-events: none;
  z-index: -1;
}

/* ── Cards ───────────────────────────────────────────── */
body .card,
body .social-card-inner,
body .website-card-inner,
body .bank-card,
body .note-card,
body .ta-account,
body .appleid-card,
body .tf-card,
body .section-header,
body .note-header,
body .modal-content,
body .empty-state,
body .error-container,
body .transfer-note,
body .card-section,
body .loader-wrapper,
body .alert {
  background: var(--bg-card) !important;
  background-image: none !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  clip-path: none !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t) !important;
}

body .card:hover,
body .social-card-inner:hover,
body .website-card-inner:hover,
body .bank-card:hover,
body .note-card:hover,
body .ta-account:hover {
  box-shadow: var(--shadow-md) !important;
  border-color: var(--border-strong) !important;
  transform: translateY(-2px) !important;
}

/* ── Navigation ──────────────────────────────────────── */
body .modern-nav,
body nav.modern-nav {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

body .logo-wrapper {
  background: var(--grad-primary) !important;
  box-shadow: var(--shadow-sm) !important;
}

body .logo-text {
  background: var(--grad-primary) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

body .user-name {
  color: var(--text) !important;
  font-weight: 700 !important;
}

body .user-role {
  color: var(--text-muted) !important;
  font-size: 0.72rem !important;
}

/* ── Profile Navigation Tabs ─────────────────────────── */
body .shop-profile .shop-navigation .profile-navigation {
  background: var(--bg-card) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--t) !important;
  overflow: hidden !important;
  position: relative !important;
}

body .shop-profile .shop-navigation .profile-navigation::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-primary);
  opacity: 0;
  transition: opacity var(--t);
}

body .shop-profile .shop-navigation .profile-navigation:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-md) !important;
  border-color: var(--border-strong) !important;
}

body .shop-profile .shop-navigation .profile-navigation a {
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 9px 4px !important;
  text-decoration: none !important;
  position: relative !important;
  z-index: 1 !important;
  transition: color var(--t) !important;
}

body .shop-profile .shop-navigation .profile-navigation.active {
  background: var(--grad-primary) !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-md) !important;
}

body .shop-profile .shop-navigation .profile-navigation.active a,
body .shop-profile .shop-navigation .profile-navigation.active a:hover {
  color: #fff !important;
}

body .shop-profile .shop-navigation .profile-navigation.active.review {
  background: var(--grad-warm) !important;
  box-shadow: 0 4px 16px rgba(245,158,11,0.3) !important;
}

body .shop-profile .shop-navigation .profile-navigation.active.utility {
  background: linear-gradient(135deg, #f59e0b 0%, #10b981 100%) !important;
  box-shadow: 0 4px 16px rgba(16,185,129,0.3) !important;
}

body .shop-profile .shop-navigation .profile-navigation.active.community {
  background: var(--grad-accent) !important;
  box-shadow: 0 4px 16px rgba(6,182,212,0.3) !important;
}

/* ── Section Headers ─────────────────────────────────── */
body .section-header {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  clip-path: none !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 14px 18px !important;
}

body .section-header .icon-wrapper {
  background: var(--grad-primary) !important;
  border-radius: var(--r-sm) !important;
  box-shadow: 0 4px 12px rgba(99,102,241,0.28) !important;
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  font-size: 18px !important;
}

body .section-title {
  color: var(--text) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* ── Social Cards ────────────────────────────────────── */
body .social-card-inner {
  background: var(--bg-card) !important;
  border-radius: var(--r-md) !important;
  clip-path: none !important;
}

body .social-btn {
  background: var(--primary-light, #e0e7ff) !important;
  color: var(--primary) !important;
  border: none !important;
  border-radius: var(--r-sm) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  transition: all var(--t) !important;
}

body .social-btn:hover {
  background: var(--grad-primary) !important;
  color: #fff !important;
  box-shadow: var(--shadow-md) !important;
}

body .social-name {
  color: var(--text) !important;
  font-weight: 700 !important;
}

body .social-stats {
  color: var(--text-muted) !important;
}

body .social-stats i {
  color: var(--danger) !important;
}

/* ── Banking Cards ───────────────────────────────────── */
body .bank-card {
  background: var(--bg-card) !important;
  clip-path: none !important;
  border-radius: var(--r-lg) !important;
}

body .bank-name {
  color: var(--text) !important;
  font-weight: 800 !important;
}

body .account-number {
  color: var(--primary) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.1em !important;
}

/* ── Buttons ─────────────────────────────────────────── */
body .btn-primary,
body .btn-gradient {
  background: var(--grad-primary) !important;
  border: none !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: var(--r-full) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all var(--t) !important;
}

body .btn-primary:hover,
body .btn-gradient:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
  opacity: 0.92 !important;
}

/* ── Avatar Profile Area ─────────────────────────────── */
body .shop-profile .py-4.border-bottom {
  background: var(--grad-hero) !important;
  border-bottom: none !important;
  padding: 2.5rem 0 !important;
  position: relative;
  overflow: hidden;
}

body .shop-profile .py-4.border-bottom::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 80%, rgba(139,92,246,0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(99,102,241,0.2) 0%, transparent 50%);
  pointer-events: none;
}

body .shop-profile .name {
  color: #fff !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.3) !important;
}

body .shop-profile .username {
  color: rgba(255,255,255,0.8) !important;
}

body .shop-profile .typing-text {
  color: #fff !important;
  border-color: rgba(255,255,255,0.6) !important;
}

/* ── Footer ──────────────────────────────────────────── */
body .modern-footer {
  background: var(--grad-hero) !important;
  clip-path: none !important;
}

/* ── Dropdown ────────────────────────────────────────── */
body .modern-dropdown {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-lg) !important;
  clip-path: none !important;
}

body .dropdown-item.modern-item:hover {
  background: var(--primary-light, #e0e7ff) !important;
  color: var(--primary) !important;
  border-radius: var(--r-sm) !important;
}

/* ── Loading Screen ──────────────────────────────────── */
body #loading-screen {
  background: var(--grad-hero) !important;
}

body .loader-wrapper {
  background: rgba(255,255,255,0.08) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: var(--r-xl) !important;
  clip-path: none !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
}

/* ── Window Controls (macOS dots) ────────────────────── */
body .window-controls .dot.red   { background: #ff5f57 !important; box-shadow: 0 0 0 1px #e0443e !important; }
body .window-controls .dot.yellow{ background: #ffbd2e !important; box-shadow: 0 0 0 1px #dfa123 !important; }
body .window-controls .dot.green { background: #28c840 !important; box-shadow: 0 0 0 1px #1fa932 !important; }

/* ── Page Title ──────────────────────────────────────── */
body .page-title {
  color: var(--text) !important;
  background: transparent !important;
  border-left: 4px solid var(--primary) !important;
  border-bottom: none !important;
  border-radius: var(--r-sm) !important;
  padding: 6px 14px !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  width: auto !important;
  margin-left: 0 !important;
  letter-spacing: -0.01em !important;
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 575px) {
  body .shop-profile .shop-navigation .profile-navigation a {
    font-size: 11.5px !important;
    padding: 7px 2px !important;
    gap: 3px !important;
  }
  body .section-header .icon-wrapper {
    width: 36px !important;
    height: 36px !important;
    font-size: 16px !important;
  }
}

/* ── Scrollbar ───────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--primary), var(--secondary));
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { opacity: 0.8; }

/* ── Selection ───────────────────────────────────────── */
::selection {
  background: rgba(99,102,241,0.2);
  color: var(--primary-dark, #4f46e5);
}

/* ── Focus ring ──────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ═══════════════════════════════════════════════════════
   Skeleton / Loading States
   ═══════════════════════════════════════════════════════ */

/* ── Shimmer keyframe ── */
@keyframes skeletonShimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* ── Base skeleton mixin ── */
.skeleton {
  background: linear-gradient(
    90deg,
    #e8eaf0 25%,
    #f4f5f8 50%,
    #e8eaf0 75%
  );
  background-size: 800px 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
}

/* ── Image shell pending state ── */
.image-shell.is-pending {
  background: linear-gradient(
    90deg,
    #e8eaf0 25%,
    #f4f5f8 50%,
    #e8eaf0 75%
  ) !important;
  background-size: 800px 100% !important;
  animation: skeletonShimmer 1.4s ease-in-out infinite !important;
}
.image-shell.is-pending img { opacity: 0; }
.image-shell.is-ready img { opacity: 1; transition: opacity 0.3s ease; }
.image-shell.is-failed {
  background: #f1f3f5 !important;
  display: flex; align-items: center; justify-content: center;
}
.image-shell.is-failed::before {
  content: '\f128';
  font-family: 'bootstrap-icons';
  color: #adb5bd;
  font-size: 16px;
  position: absolute;
}

/* ── Social card skeleton ── */
.social-card-inner.is-loading .social-logo,
.social-card-inner.is-loading .social-name,
.social-card-inner.is-loading .social-stats,
.social-card-inner.is-loading .social-btn {
  pointer-events: none;
}

/* Skeleton placeholder for social card logo */
.social-logo.sk {
  background: linear-gradient(90deg, #e8eaf0 25%, #f4f5f8 50%, #e8eaf0 75%);
  background-size: 800px 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
.social-logo.sk img { display: none; }

/* ── Card section content skeleton ── */
.sk-line {
  height: 12px;
  border-radius: 6px;
  margin-bottom: 8px;
  background: linear-gradient(90deg, #e8eaf0 25%, #f4f5f8 50%, #e8eaf0 75%);
  background-size: 800px 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
.sk-line--sm  { width: 40%; height: 10px; }
.sk-line--md  { width: 65%; }
.sk-line--lg  { width: 90%; }
.sk-line--full{ width: 100%; }
.sk-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(90deg, #e8eaf0 25%, #f4f5f8 50%, #e8eaf0 75%);
  background-size: 800px 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
  flex-shrink: 0;
}
.sk-badge {
  height: 22px; width: 70px;
  border-radius: 999px;
  background: linear-gradient(90deg, #e8eaf0 25%, #f4f5f8 50%, #e8eaf0 75%);
  background-size: 800px 100%;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}

/* ── API call overlay spinner (inside card) ── */
.loading-overlay {
  position: relative;
}
.loading-overlay::after {
  content: '';
  display: none;
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(3px);
  border-radius: inherit;
  z-index: 5;
}
.loading-overlay.is-fetching::after { display: block; }
.loading-overlay.is-fetching::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%; left: 50%;
  width: 32px; height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  border: 3px solid rgba(99,102,241,0.15);
  border-top-color: #6366f1;
  animation: spinRing 0.7s linear infinite;
  z-index: 6;
}

/* ── Banking card skeleton ── */
.bank-card-skeleton {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 20px;
  display: flex; flex-direction: column; gap: 12px;
}

/* ── Img inside social logo: fade in on load ── */
.social-logo img,
.website-logo img,
.footer-social-pill img {
  transition: opacity 0.35s ease;
}

/* ── Result panels (API responses) fade in ── */
[id$="Result"]:not([style*="display:none"]):not([style*="display: none"]) {
  animation: fadeInUp 0.3s ease both;
}


/* ═══════════════════════════════════════════════════════
   Lazy Image — skeleton → load → reveal
   ═══════════════════════════════════════════════════════ */

/* Every lazy-img starts invisible; parent shows shimmer */
img.lazy-img {
  opacity: 0;
  transition: opacity 0.4s ease;
  display: block;
  width: 100%; height: 100%;
  object-fit: contain;
}

img.lazy-img.loaded {
  opacity: 1;
}

/* Shimmer on the parent container while loading */
.social-logo:has(img.lazy-img:not(.loaded)):not(.has-error),
.footer-social-pill:has(img.lazy-img:not(.loaded)):not(.has-error) {
  background: linear-gradient(90deg, #e8eaf0 25%, #f4f5f8 50%, #e8eaf0 75%) !important;
  background-size: 800px 100% !important;
  animation: skeletonShimmer 1.4s ease-in-out infinite !important;
  border-radius: inherit;
}

/* Fallback icon when image fails */
.social-logo.has-error,
.footer-social-pill.has-error > img {
  display: none;
}
.social-logo.has-error::after,
.footer-social-pill.has-error::before {
  font-family: 'bootstrap-icons';
  content: '\f52a'; /* globe icon */
  font-size: 20px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
}
.footer-social-pill.has-error::before {
  font-size: 14px;
  width: 18px; height: 18px;
  flex-shrink: 0;
}

/* Fallback for browsers without :has() support */
.social-logo.img-shimmer {
  background: linear-gradient(90deg, #e8eaf0 25%, #f4f5f8 50%, #e8eaf0 75%) !important;
  background-size: 800px 100% !important;
  animation: skeletonShimmer 1.4s ease-in-out infinite !important;
}