/* ======================================================
   MY ACCOUNT – BASE WRAPPER
====================================================== */
.mg-account-wrapper{
  max-width:1250px;
  margin:40px auto;
  padding:0 16px;
}

/* ======================================================
   LOGIN / REGISTER GRID (LOGGED OUT)
====================================================== */
body:not(.logged-in) .mg-account-grid{
  display:grid;
  grid-template-columns:minmax(0,440px) minmax(0,440px);
  justify-content:center;
  gap:100px;
}

/* ======================================================
   GLASS CARD (LOGIN / REGISTER)
====================================================== */
.mg-account-card{
  width:100%;
  max-width:440px;

  background:linear-gradient(
    135deg,
    rgba(185,205,255,.32),
    rgba(155,180,245,.36)
  );

  border-radius:26px;
  padding:22px;

  border:1px solid rgba(255,255,255,.4);
  backdrop-filter:blur(26px);

  box-shadow:0 14px 28px rgba(0,0,0,.07);
}

/* ======================================================
   TITLES
====================================================== */
.mg-account-card h2{
  font-size:26px;
  font-weight:800;
  color:#0b1a39;
  margin-bottom:20px;
}

/* ======================================================
   FORMS
====================================================== */
.mg-account-card form{
  display:grid;
  gap:12px;
}

.mg-account-card p{
  margin:0;
}

/* ======================================================
   INPUTS
====================================================== */
.mg-account-card input{
  width:100%;
  max-width:100%;
  box-sizing:border-box;

  padding:14px 16px;
  border-radius:14px;

  border:1px solid rgba(175,195,255,.7);
  background:#f6f8ff;

  font-size:14px;
  font-weight:600;
  color:#0b1a39;
}

.mg-account-card input:focus{
  border-color:#238CFF;
  background:#ffffff;
  outline:none;
}

/* ======================================================
   BUTTONS
====================================================== */
.mg-account-card button{
  margin-top:10px;
  padding:14px 22px;

  border-radius:999px;
  border:none;

  background:linear-gradient(135deg,#238CFF,#5b7dff);
  color:#ffffff;

  font-size:15px;
  font-weight:700;
  cursor:pointer;

  box-shadow:0 6px 18px rgba(35,140,255,.45);
}

.mg-account-card button:hover{
  filter:brightness(1.05);
}

/* ======================================================
   LINKS
====================================================== */
.mg-account-card a{
  color:#238CFF;
  font-weight:600;
  text-decoration:none;
}

.mg-account-card a:hover{
  text-decoration:underline;
}

/* ======================================================
   WOOCOMMERCE NOTICES
====================================================== */
.mg-account-wrapper .woocommerce-error,
.mg-account-wrapper .woocommerce-message,
.mg-account-wrapper .woocommerce-info{
  background:rgba(255,255,255,.9);
  border-radius:16px;
  padding:14px 18px;
  border:1px solid rgba(200,215,255,.6);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  animation:mgFadeIn .25s ease;
}

@keyframes mgFadeIn{
  from{opacity:0; transform:translateY(-6px);}
  to{opacity:1; transform:none;}
}

/* ======================================================
   DASHBOARD (LOGGED IN)
====================================================== */
.logged-in .woocommerce-account .woocommerce{
  max-width:1250px;
  margin:40px auto 300px;
  padding:0 16px;

  display:grid;
  grid-template-columns:260px 1fr;
  column-gap:40px;
  align-items:start;
}

/* ======================================================
   NAVIGATION
====================================================== */
.woocommerce-MyAccount-navigation{
  background:linear-gradient(
    135deg,
    rgba(205,220,255,.22),
    rgba(175,195,255,.26)
  );
  border-radius:26px;
  padding:28px;

  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(26px);
  box-shadow:0 16px 40px rgba(0,0,0,.07);
}

.woocommerce-MyAccount-navigation ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.woocommerce-MyAccount-navigation a{
  display:block;
  padding:12px 16px;
  border-radius:14px;
  font-weight:600;
  color:#0b1a39;
  text-decoration:none;
}

.woocommerce-MyAccount-navigation a:hover{
  background:rgba(220,230,255,.7);
}

.woocommerce-MyAccount-navigation .is-active a{
  background:linear-gradient(135deg,#238CFF,#5b7dff);
  color:#fff;
  box-shadow:0 6px 18px rgba(35,140,255,.35);
}

/* ======================================================
   CONTENT
====================================================== */
.woocommerce-MyAccount-content{
  max-width:880px;
  width:100%;

  background:linear-gradient(
    135deg,
    rgba(205,220,255,.22),
    rgba(175,195,255,.26)
  );
  border-radius:26px;
  padding:28px;

  border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(26px);
  box-shadow:0 16px 40px rgba(0,0,0,.07);

  align-self:start;
}

/* Dashboard intro card ONLY (direct child paragraph) */
.woocommerce-MyAccount-content > p:first-of-type{
  background:linear-gradient(
    135deg,
    rgba(235,240,255,.65),
    rgba(215,225,255,.7)
  );
  border-radius:22px;
  padding:22px 24px;
  border:1px solid rgba(255,255,255,.45);
  box-shadow:0 12px 28px rgba(0,0,0,.06);
  margin-top:0;
}
/* ======================================================
   DESKTOP ONLY — VISUAL CENTERING FIX (LOGIN / REGISTER)
====================================================== */
@media (min-width: 901px) {
  body:not(.logged-in) .mg-account-grid{
    position: relative;
    left: -20px !important; /* desktop tweak only */
  }
}
/* ======================================================
   FINAL MOBILE FIX — MY ACCOUNT (ACTUALLY WORKING)
====================================================== */
@media (max-width: 900px) {

  /* ============================
     BASE WRAPPER RESET
  ============================ */
  .mg-account-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 20px auto;
    padding: 0 14px;
    box-sizing: border-box;
  }

  /* ============================
     LOGGED OUT — LOGIN / REGISTER
  ============================ */
  body:not(.logged-in) .mg-account-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;

    width: 100%;
    max-width: 100%;
    margin: 0 auto;

    /* HARD RESET (this is the missing part) */
    position: relative;
    left: 0;
    right: 0;
    transform: none;
  }

  .mg-account-card {
    width: 100%;
    max-width: 100%;
    padding: 20px;
    border-radius: 24px;
    box-sizing: border-box;
  }

  .mg-account-card h2 {
    font-size: 22px;
    line-height: 1.25;
  }

  /* ============================
     LOGGED IN — DASHBOARD
  ============================ */
  .logged-in .woocommerce-account .woocommerce {
    display: flex;
    flex-direction: column;
    gap: 20px;

    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 20px 14px 120px;

    /* HARD RESET */
    position: relative;
    left: 0;
    right: 0;
    transform: none;
    box-sizing: border-box;
  }

  /* NAVIGATION */
  .woocommerce-MyAccount-navigation {
    width: 100%;
    max-width: 100%;
    padding: 18px;
    box-sizing: border-box;
  }

  .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .woocommerce-MyAccount-navigation a {
    padding: 10px 14px;
    font-size: 14px;
    white-space: nowrap;
  }

  /* CONTENT */
  .woocommerce-MyAccount-content {
    width: 100%;
    max-width: 100%;
    padding: 20px;
    box-sizing: border-box;
  }

  /* ============================
     LAST LINE OF DEFENSE
     (prevents invisible width forcing)
  ============================ */
  .mg-account-wrapper,
  .mg-account-wrapper * {
    min-width: 0;
  }

}
/* ======================================================
   MY ACCOUNT (DESKTOP) — FINAL FIX
   - Stable 2-column grid (NAV + CONTENT always aligned)
   - Notices span full width above
   - Wider NAV so items don't wrap weirdly
   - Button styling applies everywhere in My Account
====================================================== */
@media (min-width: 901px){

  /* ---------- Main grid container ---------- */
  body.logged-in.woocommerce-account .woocommerce{
    display:grid !important;
    grid-template-columns: 300px minmax(0, 1fr) !important; /* NAV width */
    column-gap:200px !important;
    row-gap:24px !important;
    align-items:start !important;
  }

  /* Kill Woo floats that can fight grid */
  body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation,
  body.logged-in.woocommerce-account .woocommerce-MyAccount-content{
    float:none !important;
    clear:none !important;
  }

  /* ---------- Notices / messages always full width (row 1) ---------- */
  body.logged-in.woocommerce-account .woocommerce .woocommerce-notices-wrapper{
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }

  body.logged-in.woocommerce-account .woocommerce > .woocommerce-message,
  body.logged-in.woocommerce-account .woocommerce > .woocommerce-info,
  body.logged-in.woocommerce-account .woocommerce > .woocommerce-error{
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    margin:0 0 16px !important;
  }

  /* ---------- NAV left column (row 2) ---------- */
  body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation{
    grid-column: 1 !important;
    grid-row: 2 !important;
    width:100% !important;
    min-width:300px !important; /* keeps the pill from shrinking */
  }

  body.logged-in.woocommerce-account .woocommerce-MyAccount-navigation a{
    white-space: normal;
    word-break: normal;
  }

  /* ---------- CONTENT right column (row 2) ---------- */
  body.logged-in.woocommerce-account .woocommerce-MyAccount-content{
    grid-column: 2 !important;
    grid-row: 2 !important;
    min-width:0 !important;
  }

  /* ======================================================
     BUTTONS (incl. "Προβολή προϊόντων")
     Woo sometimes renders buttons inside notices/wrappers,
     so we style broadly inside My Account.
  ====================================================== */
  body.woocommerce-account a.button,
  body.woocommerce-account .woocommerce a.button,
  body.woocommerce-account .woocommerce-message a.button,
  body.woocommerce-account .woocommerce-info a.button{
    padding:12px 18px !important;
    border-radius:999px !important;
    border:none !important;
    background:linear-gradient(135deg,#238CFF,#5b7dff) !important;
    color:#fff !important;
    font-weight:800 !important;
    text-decoration:none !important;
    box-shadow:0 6px 18px rgba(35,140,255,.35) !important;
    transition:.18s ease;
  }

  body.woocommerce-account a.button:hover,
  body.woocommerce-account .woocommerce a.button:hover{
    filter:brightness(1.05);
  }
}