/* =============================================================================
   18-myaccount.css — WooCommerce „Fiókom" oldal az ICF arculaton

   ⚠️ SZÁNDÉKOSAN LAYEREN KÍVÜL, ugyanazért, amiért a 16-shop.css és a
   17-checkout.css is: a WooCommerce stíluslapjai layer nélküliek, ezért
   ERŐSEBBEK a téma teljes layerezett készleténél. A 15-account.css nem
   használható erre — az `@layer components`-ben van, tehát a saját
   bejelentkező és profil oldalunkat szolgálja ki, a plugin markupját nem.

   MIÉRT VAN EGYÁLTALÁN: a tagi adatokat a saját `/profilom/` szerkesztő
   kezeli, a `/fiokom/` nem kap menüpontot. A WooCommerce rendelés-e-mailjei
   viszont tartalmaznak egy „Fiókom megtekintése" linket, és a korábbi
   rendelések listája is csak itt érhető el — aki odakattint, ne egy csupasz
   felsorolást lásson.

   A markuphoz nem nyúlunk: sablont nem írunk felül, így a plugin frissítése
   nem töri el.
   ============================================================================= */

/* --- A teljes fiók-terület egy fehér kártyában --------------------------- */

body.woocommerce-account .page-body__inner > .woocommerce {
  padding: var(--space-10);
  border-radius: var(--radius-card);
  background-color: var(--color-bg-alt);
  box-shadow: var(--shadow-card);
}

/* --- Menü + tartalom ------------------------------------------------------

   A WooCommerce float-okkal oldja meg (`nav` balra 30%, tartalom jobbra
   68%), ami két gondot okoz: a kártya nem zárja a lebegtetést (ugyanaz a
   csapda, mint a termékoldalon), és a két hasáb magassága független, tehát
   a menü mögött nem lehet elválasztó vonalat húzni. Rács helyette. */

body.woocommerce-account .page-body__inner > .woocommerce {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

/* ⚠️ CLEARFIX + RÁCS = ELCSÚSZOTT ELEMEK.

   A WooCommerce a burkolóira clearfixet tesz (`::before` / `::after`,
   `content: " "; display: table`). Rácsban ezek NEM ártalmatlanok: a
   generált pszeudo-elem ugyanúgy RÁCS- (illetve FLEX-) ELEM, tehát
   elfoglalja az első cellát vagy helyet. HÁROM helyen fogott meg minket:

   1. a fiók-rács burkolóján — a menü a MÁSODIK oszlopba csúszott, a
      tartalom az elsőbe, egy sorral lejjebb;
   2. a „Címek" két hasábján (`.u-columns`) — a számlázási és a szállítási
      cím cserélt helyet;
   3. a cím-kártyák fejlécsorán (`.woocommerce-Address-title`) — a
      `space-between` a láthatatlan pszeudo-elemet tette balra, a címsort
      a sor JOBB szélére, a gombot pedig új sorba tördelte.

   Ezért MINDEN burkolónál, amit rácsba teszünk, ki kell nullázni. A
   floatokat amúgy is a rács váltja ki, clearfixre nincs szükség. */
body.woocommerce-account .page-body__inner > .woocommerce::before,
body.woocommerce-account .page-body__inner > .woocommerce::after,
body.woocommerce-account .woocommerce-MyAccount-content .u-columns::before,
body.woocommerce-account .woocommerce-MyAccount-content .u-columns::after,
body.woocommerce-account .woocommerce-Address-title::before,
body.woocommerce-account .woocommerce-Address-title::after {
  content: none;
}

@media (min-width: 768px) {
  body.woocommerce-account .page-body__inner > .woocommerce {
    grid-template-columns: 15rem 1fr;
    gap: var(--space-10);
  }

  /* Az értesítés-sáv a teljes szélességet kapja, a rács fölött. */
  body.woocommerce-account .page-body__inner > .woocommerce > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
  }
}

body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
  float: none;
  inline-size: auto;
  margin: 0;
}

/* --- Az oldalsó menü ------------------------------------------------------ */

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

/* A 05-base.css szövegre szánt `li + li` térköze itt elcsúsztatná a
   menüpontokat — ugyanaz a buktató, mint a mega menü paneljénél. */
body.woocommerce-account .woocommerce-MyAccount-navigation li + li {
  margin-block-start: var(--space-1);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--text-nav);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background-color: var(--color-bg);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
  background-color: var(--color-primary);
  color: var(--color-text-invert);
}

/* --- A tartalom ----------------------------------------------------------- */

body.woocommerce-account .woocommerce-MyAccount-content > p {
  max-inline-size: 60ch;
  color: var(--color-text-muted);
  line-height: var(--lh-body);
}

body.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
  color: var(--color-primary);
}

/* A rendelés- és letöltéstáblákra a téma TARTALMI táblázat-stílusa ül rá
   (99-wp-overrides.css): keret, lekerekítés, árnyék és 34rem MINIMUM
   szélesség. A kártyán belül ez kártya-a-kártyában, a 34rem pedig a szűkebb
   jobb hasábból lógatja ki. Ugyanaz a hiba, mint a pénztár összegzőjénél, a
   termékoldal variáció-választójánál és a kosár tételtáblájánál. */
body.woocommerce-account .page-body__inner table.shop_table {
  min-inline-size: 0;
  inline-size: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
}

body.woocommerce-account .page-body__inner table.shop_table thead :is(th, td):first-child {
  border-start-start-radius: var(--radius-lg);
}

body.woocommerce-account .page-body__inner table.shop_table thead :is(th, td):last-child {
  border-start-end-radius: var(--radius-lg);
}

/* Az összeg és a dátum ne törjön ketté a keskeny oszlopban. */
body.woocommerce-account .page-body__inner table.shop_table :is(td, th):is(.woocommerce-orders-table__cell-order-total, .woocommerce-orders-table__cell-order-date) {
  white-space: nowrap;
}

/* --- Űrlapok (Címek, Fiókadatok) ------------------------------------------

   Ugyanaz a pill forma, mint a bejelentkező és a profil oldalon
   (15-account.css) — csak itt a plugin markupjára kell illeszteni. */

body.woocommerce-account .woocommerce-MyAccount-content :is(input[type="text"], input[type="email"], input[type="tel"], input[type="password"], select) {
  inline-size: 100%;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-alt);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
}

body.woocommerce-account .woocommerce-MyAccount-content label {
  display: block;
  margin-block-end: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
}

body.woocommerce-account .woocommerce-MyAccount-content .form-row {
  margin-block-end: var(--space-5);
}

body.woocommerce-account .woocommerce-MyAccount-content fieldset {
  margin-block-start: var(--space-8);
  padding: 0;
  border: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content legend {
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--text-h5);
  font-weight: var(--fw-semibold);
}

/* --- „Címek" -------------------------------------------------------------

   A szerkesztő link a saját „magányos link → gomb" szűrőnkön is átmegy
   (`inc/content.php`): a `[woocommerce_my_account]` shortcode kimenete a
   `the_content`-en fut, ezért a link `<p class="content-cta">`-ba
   csomagolva, `.btn` osztállyal és 32px alsó margóval érkezik — a
   WooCommerce ezen felül jobbra is lebegteti. Így a gomb a címsor és a cím
   szövege KÖZÉ, jobb szélre került.

   Nem a szűrőt állítjuk át (az a szerkesztői tartalomra való, és máshol jól
   működik), hanem itt rendezzük a fejlécsort: cím balra, gomb jobbra, egy
   sorban. */

/* Cím fölött, gomb alatta, mindkettő balra — NEM egy sorban.
   A `space-between` egy 374px-es hasábban megbízhatatlan: a hosszabb
   feliratú oszlopban („Számlázási cím szerkesztése") a két elem nem fért
   ki egymás mellé, a címsor a sor JOBB szélére szorult, a gomb pedig új
   sorba tördelt — miközben a rövidebb feliratú oszlop rendben maradt.
   Ugyanaz a hasáb kétféleképpen nézett ki. Az oszlopos elrendezés a
   felirat hosszától független. */
body.woocommerce-account .woocommerce-Address-title {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  margin-block-end: var(--space-5);
}

body.woocommerce-account .woocommerce-Address-title h2 {
  margin: 0;
  font-size: var(--text-h5);
}

/* A szűrő `<p>` burkolója se margót, se lebegtetést ne vigyen. */
body.woocommerce-account .woocommerce-Address-title p.content-cta {
  margin: 0;
}

body.woocommerce-account .woocommerce-Address-title a.edit {
  float: none;
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
}

/* A `<address>` böngésző-alapból dőlt — a cím nem idézet. */
body.woocommerce-account .woocommerce-Address address {
  margin: 0;
  color: var(--color-text-muted);
  font-style: normal;
  line-height: var(--lh-relaxed);
}

/* A „Még nem állítottál be ilyen címet." sor ugyanazt a ritmust kapja. */
body.woocommerce-account .woocommerce-Address > p {
  margin: 0;
  color: var(--color-text-muted);
}

/* A bevezető mondat és a hasábok közé kell levegő. */
body.woocommerce-account .woocommerce-MyAccount-content > p:first-of-type {
  margin-block-end: var(--space-8);
}

/* A „Címek" két hasábja egymás mellett, szűk helyen egymás alatt. */
body.woocommerce-account .woocommerce-MyAccount-content .u-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-8);
}

body.woocommerce-account .woocommerce-MyAccount-content .u-column1,
body.woocommerce-account .woocommerce-MyAccount-content .u-column2 {
  inline-size: auto;
  float: none;
}

/* --- Gombok ---------------------------------------------------------------

   A `.btn` osztályt nem tehetjük a plugin markupjára, ezért a komponens
   TOKENJEIT ismételjük meg — hardcode-olt szín nincs benne, tehát a
   Testreszabó színcseréjét ugyanúgy követi. */

body.woocommerce-account .woocommerce-MyAccount-content :is(a.button, button.button, input.button),
body.woocommerce-account .woocommerce-MyAccount-content :is(a.button, button.button, input.button).alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);

  background-color: var(--color-accent);
  color: var(--icf-deep-blue);

  font-family: var(--font-display);
  font-size: var(--text-nav);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  text-transform: none;
}

body.woocommerce-account .woocommerce-MyAccount-content :is(a.button, button.button, input.button):hover {
  background-color: var(--color-accent-hover);
  color: var(--icf-deep-blue);
}

/* A táblán belüli „Megtekintés" gomb másodlagos: körvonalas. */
body.woocommerce-account .page-body__inner table.shop_table a.button {
  padding: var(--space-2) var(--space-4);
  border-color: var(--color-primary);
  background-color: transparent;
  color: var(--color-primary);
  font-size: var(--text-sm);
}

body.woocommerce-account .page-body__inner table.shop_table a.button:hover {
  background-color: var(--color-primary);
  color: var(--color-text-invert);
}

/* --- Értesítő dobozok (pl. „Még nincs letölthető anyagod") ---------------- */

body.woocommerce-account .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);

  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-bg);
  color: var(--color-text);
  list-style: none;
}

body.woocommerce-account .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message)::before {
  content: none;
}

body.woocommerce-account .woocommerce-MyAccount-content :is(.woocommerce-info, .woocommerce-message) .button {
  margin-inline-start: auto;
}