/**
 * Location: /assets/css/myaccount-page.css
 * Purpose:
 * - Premium My Account UI styling (100% custom look, not Woo default).
 * - Account pages only (enqueued via STM_Feature_MyAccount_Page).
 *
 * Linkage/Loader:
 * - Enqueued only on is_account_page() inside:
 *   /inc/features/account/myaccount-page.php
 */

/* Hard reset for Woo account area so it doesn't look like Woo */
.woocommerce-account .woocommerce,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .woocommerce-MyAccount-navigation{
  float: none !important;
  width: auto !important;
}

.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content{
  display: none !important; /* We do our own shell */
}

/* Full width container – remove reserved sidebar/columns from theme layouts */
.woocommerce-account #primary,
.woocommerce-account .site-content,
.woocommerce-account .content-area,
.woocommerce-account .container,
.woocommerce-account .stm-container,
.woocommerce-account .stm-wrap{
  max-width: 100% !important;
}

.stm-acct2{
  padding: 44px 18px;
}

.stm-acct2__wrap{
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 22px;
}

@media (max-width: 980px){
  .stm-acct2__wrap{ grid-template-columns: 1fr; }
}

/* Sidebar */
.stm-acct2__side{
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}

.stm-acct2__brand{
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.stm-acct2__brandTitle{
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .2px;
}

.stm-acct2__brandSub{
  margin-top: 6px;
  color: rgba(0,0,0,.55);
  font-size: 12px;
}

.stm-acct2__nav{
  padding: 10px;
  display: grid;
  gap: 8px;
}

.stm-acct2__link{
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 12px 12px;
  border-radius: 12px;
  text-decoration: none !important;

  border: 1px solid rgba(0,0,0,.06);
  background: #fafafa;
  color: #111;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}

.stm-acct2__link:hover{
  transform: translateY(-1px);
  background: #fff;
  border-color: rgba(0,0,0,.12);
}

.stm-acct2__link.is-active{
  background: #111;
  color: #fff;
  border-color: #111;
}

.stm-acct2__chev{
  opacity: .65;
  font-size: 18px;
  line-height: 1;
}

.stm-acct2__help{
  padding: 14px 18px 18px;
  border-top: 1px solid rgba(0,0,0,.06);
}

.stm-acct2__helpTitle{
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: rgba(0,0,0,.6);
  margin-bottom: 10px;
}

.stm-acct2__mini{
  display: inline-block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px dashed rgba(0,0,0,.18);
  color: #111;
  text-decoration: none !important;
}

/* Main */
.stm-acct2__main{
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
}

.stm-acct2__head{
  padding: 18px 18px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.stm-acct2__kicker{
  font-size: 11px;
  letter-spacing: .35px;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
}

.stm-acct2__title{
  margin: 6px 0 0;
  font-size: 22px;
  font-weight: 800;
}

.stm-acct2__ghost{
  display: inline-block;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  color: #111;
  text-decoration: none !important;
}

.stm-acct2__notices{
  padding: 12px 18px 0;
}

.stm-acct2__content{
  padding: 18px;
}

/* Cards / grids */
.stm-acct2Grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 980px){
  .stm-acct2Grid{ grid-template-columns: 1fr; }
}

.stm-acct2Card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 16px;
  background: #fff;
}

.stm-acct2Card--hero{
  grid-column: 1 / -1;
  background: linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,0));
}

.stm-acct2Card--link{
  text-decoration: none !important;
  color: inherit;
  transition: transform .15s ease, border-color .15s ease;
}
.stm-acct2Card--link:hover{
  transform: translateY(-1px);
  border-color: rgba(0,0,0,.16);
}

.stm-acct2Card__title{
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: rgba(0,0,0,.72);
}

.stm-acct2Card__big{
  font-size: 24px;
  font-weight: 900;
  margin-top: 8px;
}

.stm-acct2Card__muted{
  margin-top: 8px;
  color: rgba(0,0,0,.6);
  font-size: 13px;
  line-height: 1.45;
}

/* Orders list */
.stm-acct2List{
  display: grid;
  gap: 12px;
}

.stm-acct2Order{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: center;
}

@media (max-width: 720px){
  .stm-acct2Order{ grid-template-columns: 1fr; }
}

.stm-acct2Order__meta{
  display: flex;
  gap: 10px;
  align-items: baseline;
}

.stm-acct2Order__no{
  font-weight: 900;
}

.stm-acct2Order__date{
  color: rgba(0,0,0,.55);
  font-size: 12px;
}

.stm-acct2Badge{
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  font-size: 12px;
  font-weight: 700;
  color: rgba(0,0,0,.8);
}

.stm-acct2Order__right{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

@media (max-width: 720px){
  .stm-acct2Order__right{ justify-content: flex-start; flex-wrap: wrap; }
}

.stm-acct2Order__total{
  font-weight: 900;
}

/* Buttons */
.stm-acct2Btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid #111;
  background: #111;
  color: #fff;
  text-decoration: none !important;
  font-weight: 800;
  font-size: 13px;
}

.stm-acct2Btn--ghost{
  background: #fff;
  color: #111;
}

.stm-acct2Order__actions{
  display: inline-flex;
  gap: 10px;
}

/* Panels / forms */
.stm-acct2Panel{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.stm-acct2Panel__head{
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.stm-acct2Panel__title{
  font-weight: 900;
  font-size: 14px;
}

.stm-acct2Panel__sub{
  margin-top: 4px;
  font-size: 12px;
  color: rgba(0,0,0,.6);
}

.stm-acct2Panel__body{
  padding: 14px;
}

.stm-acct2Form input[type="text"],
.stm-acct2Form input[type="email"],
.stm-acct2Form input[type="password"],
.stm-acct2Form textarea,
.stm-acct2Form select{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  padding: 11px 12px;
  outline: none;
  background: #fff;
}

.stm-acct2Row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px){
  .stm-acct2Row{ grid-template-columns: 1fr; }
}

.stm-acct2Field label{
  display: block;
  font-weight: 800;
  font-size: 12px;
  color: rgba(0,0,0,.75);
  margin-bottom: 6px;
}

.stm-acct2Hint{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
}

.stm-acct2Divider{
  height: 1px;
  background: rgba(0,0,0,.06);
  margin: 14px 0;
}

.stm-acct2SectionTitle{
  font-weight: 900;
  margin-bottom: 10px;
}

.stm-acct2Actions{
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Empty states */
.stm-acct2Empty{
  padding: 22px;
  border: 1px dashed rgba(0,0,0,.18);
  border-radius: 14px;
  background: rgba(0,0,0,.02);
}

.stm-acct2Empty__title{
  font-weight: 900;
  font-size: 16px;
}

.stm-acct2Empty__muted{
  margin-top: 6px;
  color: rgba(0,0,0,.6);
}