/*
 Theme Name: Custom Woo Account (Plugin Styles)
 Description: Scoped styles for the Custom Woo Account plugin. Mobile-first, accessible, dark-mode ready.
 Author: Your Name
 Version: 1.0.0
*/

/* CSS Variables for light/dark theming */
.cwa-my-account-active :where(:root, .cwa-account) {
  /* Cake-themed palette: teal primary, pink accent, white text */
  --cwa-bg: #0b1220;
  --cwa-surface: #10172a;
  --cwa-card: #0f1630;
  --cwa-text: #ffffff;
  --cwa-muted: rgba(255,255,255,0.78);
  --cwa-border: rgba(255, 255, 255, 0.12);
  --cwa-primary: #04A4AA; /* teal */
  --cwa-pink: #FF4FA3;   /* pink accent */
  --cwa-primary-contrast: #0b1220;
  --cwa-focus: 0 0 0 3px rgba(4, 164, 170, 0.5);
  --cwa-radius: 16px;
  --cwa-elev: 0 8px 24px rgba(3, 7, 18, 0.4), inset 0 1px 0 rgba(255,255,255,0.04);
}

@media (prefers-color-scheme: dark) {
  .cwa-my-account-active :where(:root, .cwa-account) {
    --cwa-bg: #0a0f1f;
    --cwa-surface: #0e1833;
    --cwa-card: #0b132e;
    --cwa-text: #ffffff;
    --cwa-muted: rgba(255,255,255,0.78);
    --cwa-border: rgba(255,255,255,0.14);
    --cwa-primary: #04A4AA;
    --cwa-primary-contrast: #0a0f1f;
    --cwa-focus: 0 0 0 3px rgba(4, 164, 170, 0.55);
  }
}

/* Reset-ish scoped to plugin wrapper */
.cwa-account {
  color: var(--cwa-text);
  background: var(--cwa-bg);
  border-radius: var(--cwa-radius);
  padding: 0.75rem;
}
.cwa-account .screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.cwa-account a {
  color: #ffffff;
}
.cwa-account a:hover {
  color: var(--cwa-pink);
}
.cwa-account a:focus {
  outline: none;
  box-shadow: var(--cwa-focus);
  border-radius: 6px;
}

/* Header */
.cwa-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid var(--cwa-border);
  border-radius: var(--cwa-radius);
  padding: 0.75rem 0.75rem;
  box-shadow: var(--cwa-elev);
}
.cwa-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.cwa-avatar {
  border-radius: 999px;
  border: 1px solid var(--cwa-border);
}
.cwa-user-meta {
  line-height: 1.2;
}
.cwa-user-name {
  display: block;
  font-weight: 700;
}
.cwa-user-email {
  display: block;
  font-size: 0.875rem;
  color: var(--cwa-muted);
}

/* Menu toggle */
.cwa-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--cwa-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  color: var(--cwa-text);
  box-shadow: var(--cwa-elev);
}
.cwa-menu-toggle:hover { filter: brightness(1.05); }
.cwa-hamburger {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.cwa-hamburger::before,
.cwa-hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.cwa-hamburger::before { top: -6px; }
.cwa-hamburger::after { top: 6px; }

/* Layout shell */
.cwa-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* Navigation */
.cwa-nav {
  background: linear-gradient(180deg, rgba(10,35,39,0.95) 0%, rgba(32,14,28,0.95) 100%);
  border: 1px solid var(--cwa-border);
  border-radius: var(--cwa-radius);
  padding: 0.75rem;
  box-shadow: var(--cwa-elev);
}
.cwa-menu {
  list-style: none;
  margin: 0;
  padding: 0.25rem;
  display: grid;
  gap: 4px;
}
.cwa-menu-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  text-decoration: none;
  color: var(--cwa-text);
  padding: 0.75rem 0.875rem 0.75rem 2.6rem; /* extra left space for icon */
  border-radius: 12px;
  transition: background-color 160ms ease, color 160ms ease;
}
.cwa-menu-link:hover {
  background: rgba(255,255,255,0.05);
}
.cwa-menu-item.is-active .cwa-menu-link,
.cwa-menu-item.is-active a {
  background: linear-gradient(135deg, rgba(4,164,170,0.22), rgba(255,79,163,0.18));
  color: var(--cwa-text);
  box-shadow: inset 0 0 0 1px rgba(4,164,170,0.45);
}

/* Navigation icons */
.cwa-menu-link::before {
  content: '';
  position: absolute;
  left: 0.9rem;
  top: 50%;
  width: 1.15rem;
  height: 1.15rem;
  transform: translateY(-50%);
  background: currentColor;
  opacity: 0.95;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}

.woocommerce-MyAccount-navigation-link--dashboard .cwa-menu-link::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M3 10.5 12 3l9 7.5V21a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1V10.5Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M3 10.5 12 3l9 7.5V21a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1V10.5Z"/></svg>');
}
.woocommerce-MyAccount-navigation-link--orders .cwa-menu-link::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M6 2h12a1 1 0 0 1 1 1v17l-3-2-3 2-3-2-3 2V3a1 1 0 0 1 1-1Zm3 6h6v2H9V8Zm0 4h6v2H9v-2Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M6 2h12a1 1 0 0 1 1 1v17l-3-2-3 2-3-2-3 2V3a1 1 0 0 1 1-1Zm3 6h6v2H9V8Zm0 4h6v2H9v-2Z"/></svg>');
}
.woocommerce-MyAccount-navigation-link--downloads .cwa-menu-link::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M11 3h2v8l3-3 1.4 1.4L12 16 6.6 9.4 8 8l3 3V3Zm-7 14h16v2H4v-2Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M11 3h2v8l3-3 1.4 1.4L12 16 6.6 9.4 8 8l3 3V3Zm-7 14h16v2H4v-2Z"/></svg>');
}
.woocommerce-MyAccount-navigation-link--edit-address .cwa-menu-link::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7Zm0 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 2a7 7 0 0 1 7 7c0 5-7 13-7 13S5 14 5 9a7 7 0 0 1 7-7Zm0 4a3 3 0 1 0 0 6 3 3 0 0 0 0-6Z"/></svg>');
}
.woocommerce-MyAccount-navigation-link--payment-methods .cwa-menu-link::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm1 4h16V8H4v1Zm0 6h6v-2H4v2Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M3 5h18a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1Zm1 4h16V8H4v1Zm0 6h6v-2H4v2Z"/></svg>');
}
.woocommerce-MyAccount-navigation-link--edit-account .cwa-menu-link::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.239-8 5v1h16v-1c0-2.761-3.58-5-8-5Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5Zm0 2c-4.42 0-8 2.239-8 5v1h16v-1c0-2.761-3.58-5-8-5Z"/></svg>');
}
.woocommerce-MyAccount-navigation-link--customer-logout .cwa-menu-link::before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M10 3h4v2h-4v14h4v2h-4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm7.586 8-3.293-3.293 1.414-1.414L21.414 12l-5.707 5.707-1.414-1.414L17.586 13H9v-2h8.586Z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M10 3h4v2h-4v14h4v2h-4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2Zm7.586 8-3.293-3.293 1.414-1.414L21.414 12l-5.707 5.707-1.414-1.414L17.586 13H9v-2h8.586Z"/></svg>');
}

/* Content area */
.cwa-content {
  background:
    radial-gradient(1200px 400px at 12% -10%, rgba(255,79,163,0.20) 0%, rgba(255,79,163,0) 60%),
    radial-gradient(1000px 400px at 88% -10%, rgba(4,164,170,0.22) 0%, rgba(4,164,170,0) 55%),
    var(--cwa-card);
  border: 1px solid var(--cwa-border);
  border-radius: var(--cwa-radius);
  padding: 1rem;
  min-height: 320px;
  box-shadow: var(--cwa-elev);
}
.cwa-content table.shop_table {
  border-radius: 12px;
  overflow: hidden;
  background: transparent;
  border: 1px solid var(--cwa-border);
}
.cwa-content table.shop_table thead th {
  background: rgba(255,255,255,0.03);
  color: var(--cwa-text);
}
.cwa-content table.shop_table tbody tr:hover {
  background: rgba(91,140,255,0.06);
}
.cwa-content table.shop_table th,
.cwa-content table.shop_table td {
  border-color: var(--cwa-border);
}

/* Dashboard cards */
.cwa-dashboard-title {
  margin: 0 0 0.25rem 0;
  font-size: clamp(1.125rem, 1.2vw + 1rem, 1.5rem);
}
.cwa-dashboard-subtitle {
  margin: 0 0 1rem 0;
  color: var(--cwa-muted);
}
.cwa-quick-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
@media (max-width: 600px) {
  .cwa-quick-actions { grid-template-columns: 1fr; }
}
.cwa-card {
  display: block;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.02));
  border: 1px solid var(--cwa-border);
  border-radius: 14px;
  padding: 0.875rem;
  color: var(--cwa-text);
  box-shadow: var(--cwa-elev);
}
.cwa-card:hover {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border-color: rgba(4,164,170,0.45);
}
.cwa-content a.button,
.cwa-content button.button,
.cwa-content .woocommerce-button {
  background: linear-gradient(135deg, #04A4AA, #FF4FA3);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 0.9rem;
  box-shadow: 0 6px 16px rgba(4,164,170,0.35);
}
.cwa-content a.button:hover,
.cwa-content button.button:hover,
.cwa-content .woocommerce-button:hover {
  filter: brightness(1.08);
}
.cwa-content a.button:focus,
.cwa-content button.button:focus,
.cwa-content .woocommerce-button:focus {
  outline: none;
  box-shadow: var(--cwa-focus);
}

/* WooCommerce notices inside content */
.cwa-content .woocommerce-message,
.cwa-content .woocommerce-info,
.cwa-content .woocommerce-error {
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid var(--cwa-border);
  color: var(--cwa-text);
  border-radius: 12px;
}
.cwa-content .woocommerce-error { border-color: rgba(239,68,68,0.45); }
.cwa-content .woocommerce-message { border-color: rgba(34,211,238,0.45); }
.cwa-card-title {
  display: block;
  font-weight: 600;
}
.cwa-card-desc {
  display: block;
  font-size: 0.875rem;
  color: var(--cwa-muted);
}

/* Dashboard hero & stats */
.cwa-hero {
  position: relative;
  padding: 1.25rem 1rem;
  border-radius: calc(var(--cwa-radius) + 6px);
  border: 1px solid var(--cwa-border);
  background:
    radial-gradient(900px 300px at 15% -20%, rgba(255,79,163,0.35) 0%, rgba(255,79,163,0) 60%),
    radial-gradient(900px 300px at 85% -20%, rgba(4,164,170,0.35) 0%, rgba(4,164,170,0) 60%),
    linear-gradient(135deg, #FF4FA3 0%, #04A4AA 70%);
  color: #ffffff;
  box-shadow: var(--cwa-elev);
}
.cwa-badge-row { margin-bottom: 0.5rem; display: flex; gap: 0.5rem; align-items: center; }
.cwa-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  color: #ffffff;
}
.cwa-hero-title {
  margin: 0.15rem 0 0.25rem 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: clamp(1.5rem, 2.2vw + 1.2rem, 2.75rem);
}
.cwa-hero-sub {
  margin: 0 0 0.875rem 0;
  color: rgba(255,255,255,0.9);
}
.cwa-hero-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cwa-btn { text-decoration: none; font-weight: 600; }
.cwa-btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 12px;
  padding: 0.5rem 0.75rem;
}
.cwa-btn--ghost:hover { background: rgba(255,255,255,0.18); }

.cwa-stat-grid {
  margin-top: 0.9rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}
@media (max-width: 1100px) {
  .cwa-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .cwa-stat-grid { grid-template-columns: 1fr; }
}
.cwa-stat-card {
  display: block;
  text-decoration: none;
  border-radius: 14px;
  border: 1px solid var(--cwa-border);
  padding: 0.9rem;
  color: var(--cwa-text);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  box-shadow: var(--cwa-elev);
}
.cwa-stat-card:hover { filter: brightness(1.03); }
.cwa-stat-card.is-green { background: linear-gradient(180deg, rgba(4,164,170,0.24), rgba(4,164,170,0.10)); border-color: rgba(4,164,170,0.45); }
.cwa-stat-card.is-orange { background: linear-gradient(180deg, rgba(255,173,105,0.28), rgba(255,173,105,0.10)); border-color: rgba(255,173,105,0.45); }
.cwa-stat-card.is-blue { background: linear-gradient(180deg, rgba(4,164,170,0.20), rgba(4,164,170,0.08)); border-color: rgba(4,164,170,0.40); }
.cwa-stat-card.is-slate { background: linear-gradient(180deg, rgba(148,163,184,0.18), rgba(148,163,184,0.08)); border-color: rgba(148,163,184,0.3); }
.cwa-stat-eyebrow { display:block; font-size: 0.75rem; color: var(--cwa-muted); margin-bottom: 0.35rem; }
.cwa-stat-value { display:block; font-weight: 800; font-size: clamp(1.25rem, 1.2vw + 1rem, 1.75rem); margin-bottom: 0.2rem; }
.cwa-stat-foot { display:block; font-size: 0.8rem; color: var(--cwa-muted); }

/* Overlay and off-canvas for mobile */
.cwa-overlay[hidden] { display: none !important; }
.cwa-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 999;
}

@media (max-width: 991px) {
  .cwa-shell { gap: 0.75rem; }
  .cwa-nav {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 82vw; max-width: 320px;
    padding: 0.75rem;
    transform: translateX(-100%);
    transition: transform 180ms ease;
    z-index: 1000;
  }
  .cwa-account.menu-open .cwa-nav {
    transform: translateX(0);
  }
}

@media (min-width: 992px) {
  .cwa-menu-toggle { display: none; }
  .cwa-shell {
    grid-template-columns: 260px 1fr;
  }
}