/* ==========================================================================
   URSUS — fiókom
   --------------------------------------------------------------------------
   A checkout.css MELLÉ töltődik be, nem helyette: az űrlapmezők, a
   .u-panel és a jelölőnégyzetek stílusa ott van, és a fiók-űrlapok
   ugyanazokat az osztályokat használják. Itt csak az van, ami kizárólag
   a fiók oldalain kell.

   Mobile first: az alapállapot a telefon.
   ========================================================================== */

.u-acc{padding-block:22px 44px}
@media (min-width:900px){ .u-acc{padding-block:32px 64px} }

.u-acc__lede{margin-top:12px;max-width:52ch;color:var(--u-tx-d2);font-size:.92rem;line-height:1.6}
.u-acc__note{margin:0 0 16px;color:var(--u-tx-l2);font-size:.88rem;line-height:1.6}

.u-acc__link{
  color:var(--u-bronze-ink);font-size:.84rem;text-decoration:none;
  border-bottom:1px solid transparent;
}
.u-acc__link:hover{border-bottom-color:currentColor}

/* --- Belépés és regisztráció ---------------------------------------------
   Egy oszlop telefonon. 900px felett kettő, egyenlő szélességgel: egyik
   sem fontosabb a másiknál. A `align-items:start` kell, különben a
   rövidebb panel a magasabbhoz nyúlna. */
.u-acc__auth{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:900px){
  .u-acc__auth--2{grid-template-columns:1fr 1fr;gap:24px;align-items:start}
}

/* A „maradjak belépve" és az „elfelejtett jelszó" egy sorban, két szélen. */
.u-acc__row{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin:0 0 16px;
}
.u-acc__row .u-check{margin:0}

/* --- Bejelentkezett elrendezés -------------------------------------------
   Telefonon a menü FELÜL, vízszintesen görgethető sávként. Asztali
   nézetben bal oldali oszlop, ami görgetéskor a helyén marad. */
.u-acc__grid{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:900px){
  .u-acc__grid{grid-template-columns:minmax(200px,240px) minmax(0,1fr);gap:36px;align-items:start}
}

.u-acc__nav ul{
  display:flex;gap:8px;list-style:none;margin:0;padding:0 0 4px;
  overflow-x:auto;scrollbar-width:none;
}
.u-acc__nav ul::-webkit-scrollbar{display:none}
.u-acc__nav li{margin:0;flex:0 0 auto}
.u-acc__nav a{
  display:inline-flex;align-items:center;
  min-height:var(--u-tap);padding:0 14px;
  border:1px solid var(--u-line-l);border-radius:999px;
  background:#fff;color:var(--u-tx-l2);
  font-size:.86rem;text-decoration:none;white-space:nowrap;
  transition:border-color .15s,color .15s;
}
.u-acc__nav a:hover{border-color:var(--u-bronze-ink);color:var(--u-bronze-ink)}
.u-acc__nav .is-active a{background:var(--u-ink);border-color:var(--u-ink);color:#fff}

@media (min-width:900px){
  /* Asztali nézetben függőleges lista, csempék helyett sorok. */
  .u-acc__nav{position:sticky;top:96px}
  .u-acc__nav ul{flex-direction:column;gap:2px;overflow:visible;padding:0}
  .u-acc__nav a{
    width:100%;padding:0 14px;
    border:none;border-radius:var(--u-r);
    border-left:2px solid transparent;background:none;
  }
  .u-acc__nav a:hover{background:#fff}
  .u-acc__nav .is-active a{
    background:#fff;color:var(--u-ink);font-weight:600;
    border-left-color:var(--u-bronze-ink);
  }
}

/* A tartalomdoboz maga fehér lap, hogy elváljon a papír háttértől. */
.u-acc__main{
  background:#fff;border:1px solid var(--u-line-l);border-radius:var(--u-r-lg);
  padding:18px;
}
@media (min-width:600px){ .u-acc__main{padding:26px} }
/* A címeknél a panelek adják a lapot, ott nem kell dupla keret. */
.u-acc__main .u-panel{border-radius:var(--u-r)}

.u-acc__hello{margin:0 0 20px;font-size:1.05rem;color:var(--u-tx-l)}

/* --- Nyitólap csempéi ----------------------------------------------------- */
.u-acc__tiles{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:24px}
@media (min-width:700px){ .u-acc__tiles{grid-template-columns:1fr 1fr} }

.u-acc__tile{
  display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:4px 12px;
  padding:16px;
  border:1px solid var(--u-line-l);border-radius:var(--u-r);
  text-decoration:none;color:var(--u-tx-l);
  transition:border-color .15s,transform .15s;
}
.u-acc__tile:hover{border-color:var(--u-bronze-ink);transform:translateY(-1px)}
.u-acc__tile-title{font-weight:600;font-size:.98rem}
.u-acc__tile-desc{grid-column:1;color:var(--u-tx-l2);font-size:.82rem;line-height:1.5}
.u-acc__tile svg{grid-row:1 / span 2;color:var(--u-bronze-ink)}

.u-acc__logout{margin:0}

/* --- Rendelések kártyaként ------------------------------------------------
   A Woo táblázata helyett. Telefonon a táblázat vagy kilóg, vagy
   olvashatatlanul összenyomódik. */
.u-orders{display:grid;gap:12px}

.u-order{
  border:1px solid var(--u-line-l);border-radius:var(--u-r);
  padding:16px;
}
.u-order__head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:12px;
}
.u-order__no{
  font-family:var(--u-mono);font-size:.95rem;font-weight:500;
  color:var(--u-ink);text-decoration:none;
}
.u-order__no:hover{color:var(--u-bronze-ink)}

.u-order__status{
  display:inline-flex;align-items:center;
  padding:4px 10px;border-radius:999px;
  font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  background:var(--u-paper-2);color:var(--u-tx-l2);
  white-space:nowrap;
}
/* Az állapotok színe: a teljesített zöld, a megszakadt agyag, a többi semleges.
   Nem minden állapotot színezünk, csak amit a vásárló tényleg keres. */
/* Sötét zöld alap, fehér betű. A világos zöld alap + zöld betű párosítás
   mérve 1,66-os kontrasztot adott, a minimum 4,5. Egy állapotjelző, amit
   nem lehet elolvasni, semmit nem ér. */
.u-order__status.is-completed{background:var(--u-sage-ink);color:#fff}
.u-order__status.is-processing,
.u-order__status.is-on-hold{background:var(--u-bronze);color:#1a1206}
.u-order__status.is-cancelled,
.u-order__status.is-failed,
.u-order__status.is-refunded{background:var(--u-clay);color:#fff}

.u-order__meta{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
  margin:0 0 14px;
}
@media (min-width:600px){ .u-order__meta{grid-template-columns:repeat(3,1fr)} }
.u-order__meta div{margin:0}
.u-order__meta dt{
  font-family:var(--u-mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--u-tx-l2);margin-bottom:3px;
}
.u-order__meta dd{margin:0;font-size:.9rem;color:var(--u-tx-l)}
.u-order__total{font-weight:600;font-variant-numeric:tabular-nums}

.u-order__actions{display:flex;flex-wrap:wrap;gap:8px}
.u-order__actions .u-btn{flex:1 1 auto;min-width:140px}
@media (min-width:600px){ .u-order__actions .u-btn{flex:0 0 auto} }

.u-orders__nav{display:flex;gap:8px;margin-top:20px}

/* --- Címek ---------------------------------------------------------------- */
.u-addr{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:700px){ .u-addr{grid-template-columns:1fr 1fr;align-items:start} }
.u-addr__head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;margin-bottom:10px;
}
.u-addr__head .u-panel__title{margin:0}
.u-addr address{font-style:normal;line-height:1.65;color:var(--u-tx-l)}
.u-addr__empty{margin:0;color:var(--u-tx-l2);font-size:.88rem}

/* --- Üres állapot --------------------------------------------------------- */
.u-acc__empty{
  padding:40px 20px;text-align:center;
  border:1px dashed var(--u-line-l);border-radius:var(--u-r);
}
.u-acc__empty p{margin:0 0 16px;color:var(--u-tx-l2)}

/* A Woo néhány saját elemet is ide tesz (letöltések, fizetési módok
   táblázata). Legalább ne lógjanak ki a lapból. */
.u-acc__main table{width:100%;border-collapse:collapse;font-size:.9rem}
.u-acc__main table th,.u-acc__main table td{
  padding:10px 8px;text-align:left;border-bottom:1px solid var(--u-line-l);
}
.u-acc__main table th{
  font-family:var(--u-mono);font-size:.7rem;letter-spacing:.07em;
  text-transform:uppercase;color:var(--u-tx-l2);font-weight:500;
}