/* Dashboard Pro for WooCommerce - Styles */
body.woocommerce-account.dpw-account{
  --dpw-radius: 18px;

  /*
    IMPORTANT:
    Light mode MUST follow the site's theme.
    We default to theme variables that are computed by dashboard.js.
    If JS fails, we keep backgrounds neutral (transparent) so the theme shows.
  */
  --dpw-accent: var(--dpw-theme-accent,
                  var(--wp--preset--color--link,
                  var(--wp--preset--color--primary,
                  var(--global-palette1,
                  var(--ast-global-color-0,
                  var(--e-global-color-primary, #5b3cf5))))));

  /* Fallback surface uses common theme "base" colors when available. */
  --dpw-surface: var(--dpw-theme-surface,
                var(--wp--preset--color--base,
                var(--wp--preset--color--background,
                var(--global-palette9,
                var(--ast-global-color-5,
                var(--e-global-color-secondary, #ffffff))))));

  --dpw-surface-2: var(--dpw-theme-surface-2, var(--dpw-surface));
  --dpw-border: var(--dpw-theme-border, rgba(0,0,0,.09));
  --dpw-muted: var(--dpw-theme-muted, rgba(0,0,0,.65));
  --dpw-shadow: var(--dpw-theme-shadow, 0 14px 40px rgba(0,0,0,.10));
}

/* Force a clean LIGHT style (recommended when the site is light by default).
   We do NOT try to "guess" the theme background; we use the theme's base/background tokens if present.
   This prevents the dark card issue in light mode on some devices/browsers. */
body.woocommerce-account.dpw-account.dpw-force-light{
  --dpw-theme-surface: var(--wp--preset--color--base,
                      var(--wp--preset--color--background,
                      var(--global-palette9,
                      var(--ast-global-color-5,
                      #ffffff))));

  --dpw-theme-surface-2: var(--dpw-theme-surface);
  --dpw-theme-border: rgba(0,0,0,.10);
  --dpw-theme-muted: rgba(0,0,0,.66);
  --dpw-theme-shadow: 0 12px 34px rgba(0,0,0,.08);
}

/* If the OS is in dark mode, keep safer defaults.
   Themes that implement dark mode switching will be detected by dashboard.js. */
@media (prefers-color-scheme: dark){
  body.woocommerce-account.dpw-account{
    --dpw-theme-border: rgba(255,255,255,.12);
    --dpw-theme-muted: rgba(255,255,255,.65);
  }
}

/* Layout */
body.woocommerce-account.dpw-account .woocommerce{
  display:flex;
  gap:18px;
  align-items:flex-start;
}

@media (max-width: 900px){
  body.woocommerce-account.dpw-account .woocommerce{flex-direction:column;}
  body.woocommerce-account.dpw-account .woocommerce-MyAccount-navigation{width:100%;}
}

/* Navigation card */
body.woocommerce-account.dpw-account .woocommerce-MyAccount-navigation{
  width:300px;
  background: var(--dpw-surface);
  border: 1px solid var(--dpw-border);
  border-radius: var(--dpw-radius);
  padding: 10px;
  box-shadow: var(--dpw-shadow);
  overflow:hidden;
}

body.woocommerce-account.dpw-account .woocommerce-MyAccount-navigation ul{
  list-style:none; margin:0; padding:0;
}

body.woocommerce-account.dpw-account .woocommerce-MyAccount-navigation li{margin:0;}

body.woocommerce-account.dpw-account .woocommerce-MyAccount-navigation li a{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 14px 14px;
  border-radius: 14px;
  text-decoration:none;
  font-weight: 800;
  color: inherit;
  line-height:1.1;
}

body.woocommerce-account.dpw-account .woocommerce-MyAccount-navigation li a:hover{
  background: color-mix(in srgb, var(--dpw-accent) 10%, transparent);
}
@supports not (color: color-mix(in srgb, white 50%, black)){
  body.woocommerce-account.dpw-account .woocommerce-MyAccount-navigation li a:hover{background: rgba(91,60,245,.10);}
}

body.woocommerce-account.dpw-account .woocommerce-MyAccount-navigation li.is-active a{
  background: color-mix(in srgb, var(--dpw-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--dpw-accent) 22%, transparent);
}
@supports not (color: color-mix(in srgb, white 50%, black)){
  body.woocommerce-account.dpw-account .woocommerce-MyAccount-navigation li.is-active a{background: rgba(91,60,245,.16); border-color: rgba(91,60,245,.25);}
}

/* SVG icons (mask) */
body.woocommerce-account.dpw-account .woocommerce-MyAccount-navigation li a:before{
  content:"";
  width: 22px; height: 22px;
  flex:0 0 22px;
  background: currentColor;
  opacity:.9;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}

/* Masks */
body.woocommerce-account.dpw-account .woocommerce-MyAccount-navigation-link--dashboard a:before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3l9 8h-3v9h-5v-6H11v6H6v-9H3z'/%3E%3C/svg%3E");
}
body.woocommerce-account.dpw-account .woocommerce-MyAccount-navigation-link--orders a:before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10v2h3v18H4V4h3V2zm0 4H6v14h12V6h-1V4H7v2zm2 3h6v2H9V9zm0 4h8v2H9v-2z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h10v2h3v18H4V4h3V2zm0 4H6v14h12V6h-1V4H7v2zm2 3h6v2H9V9zm0 4h8v2H9v-2z'/%3E%3C/svg%3E");
}
body.woocommerce-account.dpw-account .woocommerce-MyAccount-navigation-link--downloads a:before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3v10l4-4 1 1-6 6-6-6 1-1 4 4V3h2zm-7 16h14v2H5v-2z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3v10l4-4 1 1-6 6-6-6 1-1 4 4V3h2zm-7 16h14v2H5v-2z'/%3E%3C/svg%3E");
}
body.woocommerce-account.dpw-account .woocommerce-MyAccount-navigation-link--guide a:before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h12a2 2 0 0 1 2 2v16H6a2 2 0 0 0-2 2V3zm2 2v14a4 4 0 0 1 2-.5h8V5H6zm16 2h-2v12h2V7z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 3h12a2 2 0 0 1 2 2v16H6a2 2 0 0 0-2 2V3zm2 2v14a4 4 0 0 1 2-.5h8V5H6zm16 2h-2v12h2V7z'/%3E%3C/svg%3E");
}
body.woocommerce-account.dpw-account .woocommerce-MyAccount-navigation-link--edit-address a:before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath 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 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath 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 9a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3C/svg%3E");
}
body.woocommerce-account.dpw-account .woocommerce-MyAccount-navigation-link--edit-account a:before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-5 0-9 3-9 6v2h18v-2c0-3-4-6-9-6z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-5 0-9 3-9 6v2h18v-2c0-3-4-6-9-6z'/%3E%3C/svg%3E");
}
body.woocommerce-account.dpw-account .woocommerce-MyAccount-navigation-link--customer-logout a:before{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 17l1.41-1.41L9.83 14H20v-2H9.83l1.58-1.59L10 9l-5 5 5 5zm-6 4h8v-2H6V5h6V3H4v18z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M10 17l1.41-1.41L9.83 14H20v-2H9.83l1.58-1.59L10 9l-5 5 5 5zm-6 4h8v-2H6V5h6V3H4v18z'/%3E%3C/svg%3E");
}

/* Content card */
body.woocommerce-account.dpw-account .woocommerce-MyAccount-content{
  flex:1;
  min-width:0;
  background: var(--dpw-surface);
  border: 1px solid var(--dpw-border);
  border-radius: var(--dpw-radius);
  padding: 18px;
  box-shadow: var(--dpw-shadow);
}

/* Tables */
body.woocommerce-account.dpw-account .woocommerce table.shop_table{
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--dpw-border);
  border-radius: 14px;
  overflow:hidden;
  background: var(--dpw-surface-2);
}
body.woocommerce-account.dpw-account .woocommerce table.shop_table th,
body.woocommerce-account.dpw-account .woocommerce table.shop_table td{
  padding: 12px 14px;
  border-top: 1px solid var(--dpw-border);
}
body.woocommerce-account.dpw-account .woocommerce table.shop_table tr:first-child th,
body.woocommerce-account.dpw-account .woocommerce table.shop_table tr:first-child td{border-top:0;}

/* Guide blocks (lighter) */
.dpw-guide-card{
  border:1px solid var(--dpw-border);
  border-radius: var(--dpw-radius);
  padding:16px;
  margin: 16px 0;
  background: var(--dpw-surface);
}
.dpw-guide-card--mini{margin:14px 0; padding:14px;}

.dpw-badge{
  display:inline-block;
  font-size:12px;
  letter-spacing:.08em;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  background: color-mix(in srgb, var(--dpw-accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--dpw-accent) 22%, transparent);
  margin-bottom:10px;
}
@supports not (color: color-mix(in srgb, white 50%, black)){
  .dpw-badge{background: rgba(91,60,245,.16); border-color: rgba(91,60,245,.25);}
}
.dpw-guide-title{margin:0 0 6px 0; font-size:20px;}
.dpw-guide-sub{margin:0 0 8px 0; color: var(--dpw-muted);}

.dpw-video-block{
  border: 1px solid var(--dpw-border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--dpw-surface-2);
  margin-top: 10px;
}
.dpw-video-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: 10px;
  padding: 12px 12px;
}
.dpw-video-name{font-weight: 850; font-size:14px;}
.dpw-open{
  border: 1px solid var(--dpw-border);
  background: transparent;
  padding: 10px 12px;
  border-radius: 999px;
  font-weight: 850;
  cursor:pointer;
}
.dpw-open:hover{background: color-mix(in srgb, var(--dpw-accent) 10%, transparent);}

.dpw-player{background:#000;}
.dpw-player iframe{width:100%; aspect-ratio:16/9; border:0; display:block;}
.dpw-player video{width:100%; height:auto; display:block;}

/* Note */
.dpw-note{
  border:1px dashed var(--dpw-border);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--dpw-surface-2);
  margin: 0 0 14px 0;
}
.dpw-muted{color: var(--dpw-muted);}

/* Modal */
.dpw-modal{
  position:fixed; inset:0;
  background: rgba(0,0,0,.70);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 999999;
}
.dpw-modal.is-open{display:flex;}
.dpw-modal-card{
  width:min(980px, 100%);
  background: var(--dpw-surface);
  border: 1px solid var(--dpw-border);
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 20px 80px rgba(0,0,0,.45);
}
.dpw-modal-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 12px 14px;
  gap: 10px;
}
.dpw-modal-title{font-weight:900; font-size:14px; margin:0;}
.dpw-close{
  border: 1px solid var(--dpw-border);
  background: transparent;
  border-radius: 999px;
  padding: 10px 12px;
  font-weight: 900;
  cursor:pointer;
}
.dpw-modal-body iframe,
.dpw-modal-body video{
  width:100%;
  aspect-ratio:16/9;
  display:block;
  border:0;
  background:#000;
}