/* ==========================================================================
   account.css - Моят акаунт (правило R11)
   Префикс: .mg-acct
   Регистрацията на клиенти е ИЗКЛЮЧЕНА в Woo -> само форма за вход, една колона.

   Източник: magia/makets/final/assets/account.css (копие 1:1).
   Добавено към копието:
   1) `body.mg` пред линковите правила - base.css има
      `body.mg a:any-link` (0,2,2) и правилата на макета губеха от него;
   2) живият селектор на WooCommerce до всеки клас от макета - маркъпът е на
      Woo, шаблоните не се презаписват (design/live/akaunt-dom.md):
        .mg-acct__login  -> form.woocommerce-form.woocommerce-form-login.login
        .mg-acct__layout -> div.woocommerce (nav + content)
        .mg-acct__nav    -> nav.woocommerce-MyAccount-navigation > ul > li
        активен линк     -> li.woocommerce-MyAccount-navigation-link.is-active
        .mg-acct__panel  -> div.woocommerce-MyAccount-content
        .mg-acct__table  -> table.woocommerce-orders-table.shop_table
        .mg-acct__addr   -> div.woocommerce-Addresses.col2-set.addresses
   3) трите структурни реда, без които живият DOM не се подрежда
      (`.mg-entry`, `display:contents`, дублираната навигация на Elementor).

   Класовете `.mg-acct`, `.mg-acct__layout`, `.mg-acct__login` и body класът
   `mg-acct-page` идват от `inc/woo-account.php` (hooks + обвивка).
   ========================================================================== */

/* Страницата минава през page.php, тоест през `.mg-entry` (760px).
   R11 иска навигация 260px + съдържание, затова таблото е на ширината на
   контейнера. Само на акаунта, по body класа от inc/woo-account.php. */
.mg-acct-page .mg-entry{ max-width:none; }

.mg-acct{ padding-block:clamp(28px,3.5vw,48px); }

/* ---------- Вход (гост) ---------- */
.mg-acct__login{
  max-width:460px; margin-inline:auto;
  padding:clamp(24px,3vw,36px);
  background:var(--mg-white); border:1px solid var(--mg-line);
  border-radius:var(--mg-r-lg); box-shadow:var(--mg-sh-sm);
}
.mg-acct__login h2{ font-size:26px; margin-bottom:6px; }
.mg-acct__login > p{ font-size:15px; color:var(--mg-meta); margin-bottom:22px; }
.mg-acct__login .mg-btn{ width:100%; margin-top:6px; }
.mg-acct__lost,
body.mg a.mg-acct__lost,
body.mg .mg-acct__login .woocommerce-LostPassword{
  display:block; margin-top:16px; text-align:center; font-size:15px;
}

/* Две колони само ако регистрацията бъде включена (R11). Днес е изключена и
   Woo не рендира втората колона - класът `--two` идва от inc/woo-account.php. */
@media (min-width:1024px){
  .mg-acct__login--two{ max-width:880px; }
  .mg-acct__login--two .col2-set{
    display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,40px); align-items:start;
  }
}

/* ---------- Табло (логнат) ---------- */
.mg-acct__layout{ display:grid; grid-template-columns:260px 1fr; gap:clamp(24px,3vw,40px); align-items:start; }
/* резерва: ако класът не е стигнал до `div.woocommerce`, обвивката на
   шорткода стои между мрежата и двете колони на Woo и се вдига */
.mg-acct__layout > .woocommerce{ display:contents; }
/* Elementor Pro рендира навигацията втори път (akaunt-dom.md); след B3 я няма */
.mg-acct__layout > .e-wc-account-tabs-nav{ display:none; }

.mg-acct__nav,
body.mg .woocommerce-MyAccount-navigation > ul{ list-style:none; margin:0; padding:0; }
body.mg .mg-acct__nav a,
body.mg .woocommerce-MyAccount-navigation > ul > li > a{
  display:flex; align-items:center; gap:10px;
  min-height:44px; padding:10px 14px; border-radius:var(--mg-r-sm);
  font-size:16px; font-weight:500; color:var(--mg-ink); text-decoration:none;
}
body.mg .mg-acct__nav a:hover,
body.mg .woocommerce-MyAccount-navigation > ul > li > a:hover{
  background:var(--mg-cream); color:var(--mg-pink-text); text-decoration:none;
}
body.mg .mg-acct__nav a.is-active,
body.mg li.woocommerce-MyAccount-navigation-link.is-active > a{
  background:var(--mg-powder); color:var(--mg-pink-text); font-weight:600;
}

/* И7: клетка с широко дете (таблицата) не разпъва реда */
.mg-acct__panel,
body.mg .woocommerce-MyAccount-content{ min-width:0; }
.mg-acct__panel h2,
body.mg .woocommerce-MyAccount-content h2{ font-size:26px; margin-bottom:14px; }

.mg-acct__table,
body.mg table.woocommerce-orders-table{ width:100%; border-collapse:collapse; font-size:16px; }
.mg-acct__table th,.mg-acct__table td,
body.mg table.woocommerce-orders-table th,
body.mg table.woocommerce-orders-table td{ border-bottom:1px solid var(--mg-line); padding:14px 12px; text-align:left; }
.mg-acct__table th,
body.mg table.woocommerce-orders-table th{ font-family:var(--mg-font-body); font-size:13px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--mg-meta); }

.mg-acct__addr,
body.mg .woocommerce-Addresses{ display:grid; grid-template-columns:1fr 1fr; gap:var(--mg-gap); }
.mg-acct__addr > div,
body.mg .woocommerce-Addresses > div{ padding:22px; border-radius:var(--mg-r-lg); background:var(--mg-cream); }

/* ==========================================================================
   B5.10 - живият WooCommerce срещу мрежата на R11
   Селекторите са от design/live/akaunt-dom.md, измерени на staging.
   ========================================================================== */

/* КАПАНЪТ от PLAN.md раздел 7: `.woocommerce::before{content:" ";display:table}`
   е clearfix, но в грид контейнер става ПЪРВАТА клетка - навигацията се
   изместваше във втората, а съдържанието падаше на нов ред. */
body.mg-acct-page .mg-acct .woocommerce::before,
body.mg-acct-page .mg-acct .woocommerce::after{ content:none; }

/* `woocommerce-layout.css` плава двете колони:
   `.woocommerce-account .woocommerce-MyAccount-navigation{float:left;width:30%}`
   и `…-content{float:right;width:68%}` (0,2,0) - оттам 270px / 177px.
   Тук е (0,3,1); ширините идват от грида. */
body.mg-acct-page .mg-acct .woocommerce-MyAccount-navigation,
body.mg-acct-page .mg-acct .woocommerce-MyAccount-content{ width:auto; float:none; }

/* Картата е обвивката на темата - формата на Woo не носи втора рамка
   (`.woocommerce form.login{border:1px solid #d3ced2;padding:20px;…}`, (0,2,1)). */
body.mg-acct-page .mg-acct__login form.woocommerce-form-login,
body.mg-acct-page .mg-acct__login form.woocommerce-form-register{
  margin:0; padding:0; border:0; border-radius:0;
}

/* Бутонът „Влизане" носи класа `mg-btn` (inc/woo-account.php), но
   `.woocommerce button.button` (0,2,1) бие `.mg-btn` (0,1,0) и го оставяше сив.
   Тук е (0,3,2) - стойностите са на `.mg-btn` от base.css, цяла ширина. */
body.mg-acct-page .mg-acct__login button.woocommerce-form-login__submit,
body.mg-acct-page .mg-acct__login button.woocommerce-form-register__submit{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; min-height:48px; margin-top:6px; padding:12px 28px; float:none;
  font-family:var(--mg-font-body); font-size:16px; font-weight:700; line-height:1.2;
  color:var(--mg-white); background:var(--mg-pink);
  border:2px solid var(--mg-pink); border-radius:var(--mg-r-pill);
  text-transform:none; text-decoration:none; cursor:pointer;
  transition:background-color .15s, color .15s, border-color .15s;
}
body.mg-acct-page .mg-acct__login button.woocommerce-form-login__submit:hover,
body.mg-acct-page .mg-acct__login button.woocommerce-form-register__submit:hover{
  background:var(--mg-pink-hover); border-color:var(--mg-pink-hover); color:var(--mg-white);
}

/* ==========================================================================
   Мобилно - таблицата става карти
   ========================================================================== */
@media (max-width:1023px){
  /* B6.4: `1fr` е `minmax(auto,1fr)` - навигацията (flex ред без пренасяне, 7 линка)
     е грид елемент с `min-width:auto` и разтягаше страницата до 953px на 390.
     `minmax(0,1fr)` + `min-width:0` оставят скрола само в самата навигация. */
  .mg-acct__layout{ grid-template-columns:minmax(0,1fr); }
  body.mg .woocommerce-MyAccount-navigation,
  body.mg .woocommerce-MyAccount-content{ min-width:0; }
  .mg-acct__nav,
  body.mg .woocommerce-MyAccount-navigation > ul{ display:flex; gap:8px; overflow-x:auto; padding-bottom:6px; }
  .mg-acct__nav li,
  body.mg .woocommerce-MyAccount-navigation > ul > li{ flex:0 0 auto; }
  body.mg .mg-acct__nav a,
  body.mg .woocommerce-MyAccount-navigation > ul > li > a{
    border:1px solid var(--mg-line); border-radius:var(--mg-r-pill); white-space:nowrap;
  }
}
@media (max-width:767px){
  .mg-acct__table thead,
  body.mg table.woocommerce-orders-table thead{ display:none; }
  .mg-acct__table tr,
  body.mg table.woocommerce-orders-table tr{
    display:block; padding:14px 16px; margin-bottom:12px;
    border:1px solid var(--mg-line); border-radius:var(--mg-r-md);
  }
  .mg-acct__table td,
  body.mg table.woocommerce-orders-table td{
    display:flex; justify-content:space-between; gap:16px;
    border:0; padding:6px 0; text-align:right;
  }
  /* етикетът е `data-title` на самия Woo - без фиксирана ширина и без overflow-x */
  .mg-acct__table td::before,
  body.mg table.woocommerce-orders-table td::before{
    content:attr(data-title); font-weight:600; color:var(--mg-meta); text-align:left;
  }
  .mg-acct__addr,
  body.mg .woocommerce-Addresses{ grid-template-columns:1fr; }
}