/* Maketou Account Pro - WooCommerce My Account Design (Responsive) */

body.woocommerce-account{
  /* defaults (JS will override to match the theme) */
  --mk-page-bg: #ffffff;
  --mk-card-bg: rgba(255,255,255,.92);
  --mk-border:rgba(0,0,0,.10);
  --mk-text:#111827;
  --mk-muted:rgba(17,24,39,.62);
  --mk-shadow:0 10px 28px rgba(0,0,0,.08);
  --mk-radius:18px;

  --mk-accent: rgb(109,40,217);
  --mk-accent-rgb: 109,40,217;
}

@media (prefers-color-scheme: dark){
  body.woocommerce-account{
    --mk-page-bg:#0b0f14;
    --mk-card-bg:rgba(17,24,39,.72);
    --mk-border:rgba(255,255,255,.12);
    --mk-text:#f3f5f7;
    --mk-muted:rgba(243,245,247,.68);
    --mk-shadow:0 10px 28px rgba(0,0,0,.35);
  }
}

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

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

/* Navigation (sidebar) */
body.woocommerce-account .woocommerce-MyAccount-navigation{
  width:290px;
  background:var(--mk-card-bg);
  border:1px solid var(--mk-border);
  border-radius:var(--mk-radius);
  padding:10px;
  box-shadow:var(--mk-shadow);
  position:sticky;
  top:14px;
}

@media (max-width: 900px){
  body.woocommerce-account .woocommerce-MyAccount-navigation{position:relative; top:auto;}
}

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

body.woocommerce-account .woocommerce-MyAccount-navigation li a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  text-decoration:none;
  color:var(--mk-text);
  font-weight:800;
  transition: transform .05s ease, background .15s ease, border-color .15s ease;
  border:1px solid transparent;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover{
  background:rgba(var(--mk-accent-rgb),.08);
  border-color: rgba(var(--mk-accent-rgb),.18);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:active{
  transform: translateY(1px);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{
  background:rgba(var(--mk-accent-rgb),.12);
  border-color: rgba(var(--mk-accent-rgb),.24);
}

/* Pro icons (SVG mask) */
body.woocommerce-account .woocommerce-MyAccount-navigation li a:before{
  content:"";
  width:18px;
  height:18px;
  flex:0 0 18px;
  display:inline-block;
  background-color: currentColor;
  opacity:.75;
  -webkit-mask: var(--mk-ico) no-repeat center / contain;
  mask: var(--mk-ico) no-repeat center / contain;
}

.woocommerce-MyAccount-navigation-link--dashboard a{--mk-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M3 10.5L12 3l9 7.5V21a1 1 0 0 1-1 1h-5v-7H9v7H4a1 1 0 0 1-1-1V10.5z%22/%3E%3C/svg%3E");}
.woocommerce-MyAccount-navigation-link--orders a{--mk-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M7 3h10a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2zm2 5h6v2H9V8zm0 4h8v2H9v-2zm0 4h8v2H9v-2z%22/%3E%3C/svg%3E");}
.woocommerce-MyAccount-navigation-link--downloads a{--mk-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 3a1 1 0 0 1 1 1v9.59l2.3-2.3a1 1 0 1 1 1.4 1.42l-4.0 4.0a1 1 0 0 1-1.4 0l-4.0-4.0a1 1 0 1 1 1.4-1.42L11 13.59V4a1 1 0 0 1 1-1zm-7 16h14v2H5v-2z%22/%3E%3C/svg%3E");}
.woocommerce-MyAccount-navigation-link--guide a{--mk-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M4 5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V5zm7 4v6l5-3-5-3z%22/%3E%3C/svg%3E");}
.woocommerce-MyAccount-navigation-link--edit-address a{--mk-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 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%22/%3E%3C/svg%3E");}
.woocommerce-MyAccount-navigation-link--edit-account a{--mk-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5zm0 2c-5 0-9 2.5-9 5.5V22h18v-2.5C21 16.5 17 14 12 14z%22/%3E%3C/svg%3E");}
.woocommerce-MyAccount-navigation-link--customer-logout a{--mk-ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M10 3h8a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-8v-2h8V5h-8V3zm-1 5 1.4 1.4L8.8 11H16v2H8.8l1.6 1.6L9 16l-5-5 5-5z%22/%3E%3C/svg%3E");}

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

/* Tables */
body.woocommerce-account .woocommerce table.shop_table{
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--mk-border);
  border-radius:16px;
  overflow:hidden;
  background: var(--mk-card-bg);
}

body.woocommerce-account .woocommerce table.shop_table th,
body.woocommerce-account .woocommerce table.shop_table td{
  padding:12px 14px;
  vertical-align:top;
}

body.woocommerce-account .woocommerce table.shop_table thead th{
  background: linear-gradient(180deg, rgba(var(--mk-accent-rgb),.08), transparent 80%);
}

/* Keep theme buttons (only adjust our own) */
.mk-btn{ border-radius:14px !important; font-weight:900 !important; }

/* Guide cards */
.mk-guide-card{
  border:1px solid var(--mk-border);
  border-radius:var(--mk-radius);
  padding:16px;
  margin:18px 0;
  background: var(--mk-card-bg);
  box-shadow: var(--mk-shadow);
  position:relative;
}

.mk-guide-card:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  border-radius:18px 0 0 18px;
  background: rgba(var(--mk-accent-rgb),.75);
}

.mk-guide-head{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.mk-guide-label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:900;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(var(--mk-accent-rgb),.10);
  border:1px solid rgba(var(--mk-accent-rgb),.18);
}

.mk-guide-context{
  font-size:12px;
  font-weight:800;
  color: var(--mk-muted);
  background: rgba(0,0,0,.04);
  border: 1px solid var(--mk-border);
  padding:6px 10px;
  border-radius:999px;
}

.mk-guide-title{
  margin:0 0 6px 0;
  font-size:20px;
}

.mk-guide-sub{
  margin:0 0 14px 0;
  color:var(--mk-muted);
}

.mk-guide-player{
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--mk-border);
  background: rgba(0,0,0,.02);
}

.mk-guide-player iframe{width:100%; aspect-ratio:16/9; border:0; display:block;}
.mk-guide-player video{width:100%; height:auto; display:block;}

.mk-guide-actions{ margin-top:12px; display:flex; gap:10px; flex-wrap:wrap; }

.mk-guide-actions .mk-btn{
  background: rgba(var(--mk-accent-rgb), .10) !important;
  border: 1px solid rgba(var(--mk-accent-rgb), .22) !important;
  color: var(--mk-text) !important;
}
.mk-guide-actions .mk-btn:hover{ background: rgba(var(--mk-accent-rgb), .14) !important; }

.mk-guide-support{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.mk-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--mk-border);
  background: rgba(17,24,39,.05);
  color: var(--mk-text);
  font-weight:800;
  text-decoration:none;
}

.mk-chip:hover{ border-color: rgba(var(--mk-accent-rgb),.22); background: rgba(var(--mk-accent-rgb),.08); }

/* Modal fullscreen */
html.mk-modal-open, html.mk-modal-open body{ overflow:hidden; }

.mk-modal{ position:fixed; inset:0; z-index:999999; display:none; }
.mk-modal.is-open{ display:block; }

.mk-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }

.mk-modal__dialog{
  position:relative;
  width:min(980px, 92vw);
  margin:6vh auto;
  background: var(--mk-card-bg);
  border:1px solid var(--mk-border);
  border-radius:18px;
  box-shadow: var(--mk-shadow);
  overflow:hidden;
}

.mk-modal__header{
  padding:14px 16px;
  border-bottom:1px solid var(--mk-border);
}

.mk-modal__title{ font-weight:900; color: var(--mk-text); }

.mk-modal__close{
  position:absolute;
  top:10px;
  right:10px;
  width:38px;
  height:38px;
  border-radius:999px;
  border:1px solid var(--mk-border);
  background: rgba(0,0,0,.04);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.mk-modal__body{ padding:0; }

.mk-modal__player{
  width:100%;
  aspect-ratio: 16 / 9;
  display:block;
  border:0;
  background:#000;
}

@media (max-width: 600px){
  .mk-modal__dialog{ margin:10vh auto; width:94vw; }
}

/* Grid wrapper in Guide endpoint */
.mk-guide-grid{ display:block; }