/* Reconstructed BlueCart Profile Page Styles (Clean 2025-09-04)
  This rebuild removes corruption introduced by prior incremental patches
  ensuring no malformed nesting that could break global navbar/footer/cart.
  Scope is intentionally self-contained and relies only on master tokens. */

/* ----------------------------------
  Scoped Semantic Tokens (profile)
---------------------------------- */
:root {
  --profile-status-pending: var(--bluecart-warning);
  --profile-status-confirmed: var(--bluecart-primary);
  --profile-status-processing: #673ab7;
  --profile-status-shipped: var(--bluecart-success);
  --profile-status-delivered: var(--bluecart-success);
  --profile-status-cancelled: var(--bluecart-danger);
  --profile-status-returned: var(--slate-700);
  --profile-surface-1: rgba(255,255,255,0.05);
  --profile-surface-2: rgba(255,255,255,0.08);
  --profile-surface-3: rgba(255,255,255,0.12);
  --profile-surface-4: rgba(255,255,255,0.18);
  --profile-border-translucent: rgba(255,255,255,0.12);
  --profile-primary-hover: var(--bluecart-primary-dark, #1B4F72);
  --profile-success-hover: #229954;
  --profile-warning-hover: #c97e05;
  --profile-danger-hover: #c0392b;
  --profile-secondary-bg: var(--slate-600);
  --profile-secondary-hover: var(--slate-700);
}

/* ----------------------------------
  Layout Containers
---------------------------------- */
.profile-main {
  min-height: calc(100vh - var(--navbar-height, 70px));
  background: var(--profile-premium-gradient);
  position: relative;
  overflow: hidden;
  padding: var(--spacing-8) var(--spacing-4) var(--spacing-16);
}
.profile-main::before { content:""; position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(circle at 30% 70%, rgba(96,165,250,.28) 0%, transparent 55%),
  radial-gradient(circle at 70% 30%, rgba(255,255,255,.12) 0%, transparent 55%); }
.profile-container { max-width:1100px; margin:0 auto; position:relative; z-index:1; }

/* ----------------------------------
  Header
---------------------------------- */
.profile-header { background:var(--profile-premium-gradient); color:var(--text-light); text-align:center; padding:var(--spacing-16) 0; border-radius:var(--radius-2xl); position:relative; overflow:hidden; margin-bottom:var(--spacing-12); box-shadow: var(--profile-card-shadow); border:1px solid var(--profile-glass-border); }
.profile-header::before { content:""; position:absolute; inset:0; background:url('data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 100 100\"><defs><pattern id=\"p\" width=\"20\" height=\"20\" patternUnits=\"userSpaceOnUse\"><circle cx=\"10\" cy=\"10\" r=\"1.5\" fill=\"%23ffffff\" opacity=\"0.15\"/></pattern></defs><rect width=\"100\" height=\"100\" fill=\"url(%23p)\"/></svg>'); }
.profile-header::after { content:""; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%); animation:profileFloat 8s ease-in-out infinite; }
@keyframes profileFloat { 0%,100%{transform:translate(0,0) rotate(0deg);} 33%{transform:translate(30px,-30px) rotate(120deg);} 66%{transform:translate(-20px,20px) rotate(240deg);} }
.profile-header-content { position:relative; z-index:1; max-width:720px; margin:0 auto; padding:0 var(--spacing-4); }

.profile-avatar { width:140px; height:140px; border-radius:9999px; border:6px solid rgba(255,255,255,.9); margin:0 auto var(--spacing-6); background:var(--profile-glass); display:flex; align-items:center; justify-content:center; font-size:var(--font-size-5xl); color:var(--bluecart-primary); overflow:hidden; box-shadow: var(--shadow-2xl); transition: var(--profile-transition); position:relative; }
.profile-avatar:hover { transform:scale(1.05); box-shadow:0 25px 50px -12px rgba(0,0,0,.25); }
.avatar-upload-btn { position:absolute; bottom:12px; right:12px; background:var(--bluecart-gradient); color:#fff; width:46px; height:46px; border:none; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 18px -4px rgba(0,0,0,.4); transition:.25s; }
.avatar-upload-btn:hover { transform:scale(1.08); box-shadow:0 10px 24px -6px rgba(0,0,0,.5); }
.avatar-upload-btn:active { transform:scale(.94); }

.profile-name { font-size:var(--font-size-3xl); font-weight:800; margin:0 0 var(--spacing-3); background:linear-gradient(135deg,#ffffff 0%, #f0f9ff 100%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; text-shadow:0 2px 4px rgba(0,0,0,.25); }
.profile-email { font-size:var(--font-size-lg); opacity:.95; margin:0 0 var(--spacing-6); }

/* ----------------------------------
  Stats
---------------------------------- */
.profile-stats { display:flex; gap:var(--spacing-10); flex-wrap:wrap; justify-content:center; margin-top:var(--spacing-8); }
.profile-stat { text-align:center; background:rgba(255,255,255,0.12); padding:var(--spacing-6) var(--spacing-8); border-radius:var(--radius-xl); border:1px solid rgba(255,255,255,0.25); min-width:120px; transition: var(--profile-transition); backdrop-filter:blur(10px); }
.profile-stat:hover { transform:translateY(-3px); background:rgba(255,255,255,.18); box-shadow: var(--shadow-xl); }
.profile-stat-number { font-size:var(--font-size-3xl); font-weight:900; color:var(--text-light); display:block; }
.profile-stat-label { font-size:var(--font-size-sm); opacity:.9; font-weight:600; text-transform:uppercase; letter-spacing:.5px; margin-top:var(--spacing-2); }

/* ----------------------------------
  Sidebar + Content Grid
---------------------------------- */
.profile-content { display:grid; grid-template-columns:320px 1fr; gap:var(--spacing-10); align-items:start; }
.profile-sidebar { background:var(--profile-glass); border:1px solid var(--profile-glass-border); border-radius:var(--radius-xl); padding:var(--spacing-8); position:sticky; top:calc(var(--navbar-height,70px) + var(--spacing-4)); backdrop-filter:blur(20px); box-shadow:var(--profile-card-shadow); }
.profile-sidebar::before { content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--bluecart-gradient); }
.profile-nav-link { display:flex; align-items:center; gap:var(--spacing-4); padding:var(--spacing-4) var(--spacing-5); color:var(--text-secondary); text-decoration:none; border-radius:var(--radius-lg); font-weight:600; font-size:var(--font-size-base); position:relative; transition: var(--profile-transition); }
.profile-nav-link::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--bluecart-gradient); transform:scaleY(0); transition:transform var(--profile-transition); }
.profile-nav-link:hover, .profile-nav-link.active { background:var(--bluecart-gradient-subtle); color:var(--bluecart-primary); transform:translateX(3px); box-shadow:var(--shadow-md); }
.profile-nav-link:hover::before, .profile-nav-link.active::before { transform:scaleY(1); }
.profile-nav-link:focus-visible { outline:3px solid var(--bluecart-primary-alpha); outline-offset:2px; }
.profile-nav-icon { width:22px; height:22px; transition: var(--profile-transition); }
.profile-nav-link:hover .profile-nav-icon, .profile-nav-link.active .profile-nav-icon { transform:scale(1.1); }

/* ----------------------------------
  Tab Wrapper (cards area)
---------------------------------- */
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ----------------------------------
  Cards (Orders / Wishlist / Addresses)
---------------------------------- */
.profile-card-list { display:grid; gap:1rem; }
.profile-order-card, .profile-wishlist-card, .profile-address-card { background:var(--profile-surface-1); border:1px solid var(--profile-border-translucent); border-radius:12px; padding:1.1rem 1.3rem 1rem; transition:background .3s ease, border-color .3s ease, transform .3s ease; backdrop-filter:blur(12px); }
.profile-order-card:hover, .profile-wishlist-card:hover, .profile-address-card:hover { background:var(--profile-surface-2); border-color:var(--profile-surface-3); transform:translateY(-2px); }
.profile-order-header, .profile-address-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.85rem; }
.profile-order-title { color:var(--bluecart-primary); margin:0 0 .35rem; font-size:1.05rem; font-weight:600; }
.profile-order-meta { color:rgba(255,255,255,.65); font-size:.78rem; margin:0; }
.profile-order-summary { color:rgba(255,255,255,.85); margin:0 0 .75rem; font-size:.9rem; line-height:1.35; }
.profile-status-pill { background:var(--slate-500); color:#fff; padding:4px 12px; border-radius:20px; font-size:.7rem; font-weight:500; display:inline-block; }
.status-pending { background:var(--profile-status-pending); }
.status-confirmed { background:var(--profile-status-confirmed); }
.status-processing { background:var(--profile-status-processing); }
.status-shipped { background:var(--profile-status-shipped); }
.status-delivered { background:var(--profile-status-delivered); }
.status-cancelled { background:var(--profile-status-cancelled); }
.status-returned { background:var(--profile-status-returned); }
.profile-btn-row { display:flex; gap:.5rem; flex-wrap:wrap; }

/* Wishlist specific */
.profile-wishlist-card { display:flex; align-items:center; gap:1rem; padding:.9rem 1rem; }
.profile-wishlist-card img { width:60px; height:60px; object-fit:cover; border-radius:6px; }
.profile-wishlist-info h4 { color:#fff; margin:0 0 .4rem; font-size:1rem; }
.profile-wishlist-price { color:rgba(255,255,255,.75); margin:0 0 .4rem; font-size:1.05rem; font-weight:600; }
.profile-wishlist-meta { color:rgba(255,255,255,.45); margin:0; font-size:.72rem; }
.profile-wishlist-actions { display:flex; flex-direction:column; gap:.5rem; }

/* Address specific */
.profile-address-card h4 { color:#fff; margin:0; font-size:1rem; font-weight:600; }
.profile-address-body { color:rgba(255,255,255,.78); margin:0 0 .5rem; font-size:.83rem; line-height:1.4; }
.profile-address-badge { background:var(--bluecart-success); color:#fff; padding:2px 8px; border-radius:12px; font-size:.65rem; font-weight:600; }
.profile-address-actions { display:flex; gap:.5rem; margin-top:.75rem; }

/* ----------------------------------
  Buttons (Alias – keep markup backward compatible)
---------------------------------- */
.profile-btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--spacing-2); background:var(--bluecart-primary); color:#fff; border:none; padding:var(--spacing-2) var(--spacing-4); border-radius:var(--radius-md); font-size:var(--font-size-xs); font-weight:600; letter-spacing:.25px; min-height:34px; line-height:1.1; cursor:pointer; transition:background .25s ease, transform .15s ease; text-decoration:none; }
.profile-btn:hover { background:var(--profile-primary-hover); }
.profile-btn:focus-visible { outline:3px solid var(--bluecart-focus); outline-offset:2px; }
.profile-btn.success { background:var(--bluecart-success); }
.profile-btn.success:hover { background:var(--profile-success-hover); }
.profile-btn.warning { background:var(--bluecart-warning); }
.profile-btn.warning:hover { background:var(--profile-warning-hover); }
.profile-btn.danger { background:var(--bluecart-danger); }
.profile-btn.danger:hover { background:var(--profile-danger-hover); }
.profile-btn.secondary { background:var(--profile-secondary-bg); }
.profile-btn.secondary:hover { background:var(--profile-secondary-hover); }

/* ----------------------------------
  Forms inside profile (glass variant)
---------------------------------- */
.profile-main input.form-input,
.profile-main select.form-input,
.profile-main textarea.form-textarea { background:var(--profile-surface-1); border:1px solid var(--profile-surface-3); color:var(--text-light); backdrop-filter:blur(10px); transition: border-color .25s ease, background .25s ease; }
.profile-main input.form-input:focus,
.profile-main select.form-input:focus,
.profile-main textarea.form-textarea:focus { background:var(--profile-surface-2); border-color:var(--bluecart-primary); box-shadow:0 0 0 3px var(--bluecart-primary-alpha); outline:none; }

/* ----------------------------------
  Skeleton Loaders
---------------------------------- */
.profile-skeleton-list { display:grid; gap:1rem; }
.profile-skeleton-card { position:relative; overflow:hidden; border:1px solid var(--profile-surface-2); border-radius:8px; background:var(--profile-surface-1); height:92px; }
.profile-skeleton-card.large { height:140px; }
.profile-skeleton-bar { height:14px; width:60%; background:var(--profile-surface-3); border-radius:4px; margin:10px 14px; }
.profile-skeleton-bar.small { height:10px; width:40%; }
.profile-skeleton-bar.wide { width:85%; }
.profile-skeleton-card::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 0%, rgba(255,255,255,0.18) 40%, rgba(255,255,255,0.18) 60%, transparent 100%); animation:profileShimmer 1.4s linear infinite; transform:translateX(-100%); }
@keyframes profileShimmer { to { transform:translateX(100%);} }
html.reduced-motion .profile-skeleton-card::after { display:none; }
html.reduced-motion .profile-skeleton-bar { background:var(--profile-surface-4) !important; }

/* ----------------------------------
  Empty State Utility
---------------------------------- */
.profile-empty-state { color:rgba(255,255,255,.7); text-align:center; padding:2rem; font-size:.9rem; line-height:1.5; }

/* ----------------------------------
  High Contrast Mode Overrides
---------------------------------- */
html.high-contrast .profile-main { background:#0d0f15 !important; }
html.high-contrast .profile-header { background:#0d47a1 !important; }
html.high-contrast .profile-order-card,
html.high-contrast .profile-wishlist-card,
html.high-contrast .profile-address-card { background:#1a1d24 !important; border-color:#3a4354 !important; }
html.high-contrast .profile-order-title, html.high-contrast h1, html.high-contrast h2, html.high-contrast h3, html.high-contrast h4 { color:#ffffff !important; }
html.high-contrast .profile-order-meta, html.high-contrast .profile-order-summary, html.high-contrast .profile-wishlist-meta, html.high-contrast .profile-wishlist-price, html.high-contrast .profile-address-body { color:#e0e6ef !important; }
html.high-contrast .profile-status-pill { color:#fff !important; }
html.high-contrast .profile-btn { background:#1565c0 !important; }
html.high-contrast .profile-btn:hover { background:#0d47a1 !important; }
html.high-contrast .profile-btn.danger { background:#d32f2f !important; }
html.high-contrast .profile-btn.danger:hover { background:#b71c1c !important; }

/* ----------------------------------
  Animations (Reduced Motion Safety)
---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .profile-header::after { animation:none; }
  .profile-btn { transition:none; }
}

/* ----------------------------------
  Responsive
---------------------------------- */
@media (max-width: 900px) { .profile-content { grid-template-columns: 260px 1fr; } }
@media (max-width: 768px) {
  .profile-content { grid-template-columns:1fr; gap:var(--spacing-6); }
  .profile-sidebar { position:static; order:2; }
  .profile-main { padding: var(--spacing-8) var(--spacing-4) var(--spacing-12); }
  .profile-header { padding: var(--spacing-12) 0; }
  .profile-stats { gap:var(--spacing-6); }
}
@media (max-width: 520px) {
  .profile-header { padding: var(--spacing-8) 0; }
  .profile-avatar { width:96px; height:96px; font-size:var(--font-size-2xl); }
  .profile-name { font-size:var(--font-size-xl); }
  .profile-stats { flex-direction:column; gap:var(--spacing-4); }
}
