/* Header is injected by JS on My Account; keep it visible by default */
.opd-ma-temu-header{
  display:flex !important;
  align-items:center;
  gap:12px;
  padding:14px 14px 8px 14px;
}

/* Activate only when JS adds .opd-ma-temu-phone */
body.opd-ma-temu-phone{
  background:#f5f6f8 !important;
}

body.opd-ma-temu-phone .woocommerce-account .woocommerce{
  background:transparent !important;
}

/* Hide the default Woo "Hello ..." block on dashboard */
body.opd-ma-temu-phone.woocommerce-account.woocommerce-page .woocommerce-MyAccount-content > p:first-of-type{
  display:none !important;
}
body.opd-ma-temu-phone.woocommerce-account.woocommerce-page .woocommerce-MyAccount-content > p.woocommerce-MyAccount-content-hello{
  display:none !important;
}

/* Header pieces */
.opd-ma-temu-avatar{
  width:44px; height:44px;
  border-radius:999px;
  background:#fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  display:flex; align-items:center; justify-content:center;
  font-weight:700;
}
.opd-ma-temu-title{
  display:flex; flex-direction:column;
  line-height:1.1;
}
.opd-ma-temu-title strong{
  font-size:16px;
}
.opd-ma-temu-title span{
  font-size:12px;
  color:rgba(0,0,0,0.55);
}

/* Make nav full width on phone */
body.opd-ma-temu-phone .woocommerce-account .woocommerce{
  display:block !important;
}
body.opd-ma-temu-phone .woocommerce-MyAccount-navigation{
  width:100% !important;
  float:none !important;
  margin:0 !important;
}
body.opd-ma-temu-phone .woocommerce-MyAccount-content{
  width:100% !important;
  float:none !important;
  margin:0 !important;
}

/* Cards: style navigation links as cards */
body.opd-ma-temu-phone .woocommerce-MyAccount-navigation ul{
  list-style:none !important;
  margin:0 !important;
  padding:10px 12px 18px 12px !important;
}
body.opd-ma-temu-phone .woocommerce-MyAccount-navigation ul li{
  margin:0 0 10px 0 !important;
}
body.opd-ma-temu-phone .woocommerce-MyAccount-navigation ul li a{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  padding:14px 14px !important;
  background:#fff !important;
  border-radius:16px !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
  text-decoration:none !important;
  color:#111 !important;
  font-size:15px !important;
  position:relative !important;
}
body.opd-ma-temu-phone .woocommerce-MyAccount-navigation ul li a:active{
  background:rgba(0,0,0,0.04) !important;
}
body.opd-ma-temu-phone .woocommerce-MyAccount-navigation ul li a::after{
  content:"›";
  position:absolute;
  right:14px;
  font-size:20px;
  color:rgba(0,0,0,0.35);
}

/* Icon placeholder span injected by JS */
body.opd-ma-temu-phone .opd-ma-temu-ico{
  width:22px; height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 22px;
  color:#111;
}
body.opd-ma-temu-phone .opd-ma-temu-ico svg{
  width:22px; height:22px;
  stroke: currentColor;
  fill: none;
  stroke-width:1.8;
}

/* Logout subtle red */
body.opd-ma-temu-phone .woocommerce-MyAccount-navigation-link--customer-logout a{
  color:#d64545 !important;
}
body.opd-ma-temu-phone .woocommerce-MyAccount-navigation-link--customer-logout a .opd-ma-temu-ico{
  color:#d64545 !important;
}

/* Bottom safe space (avoid bottom nav overlap) */
body.opd-ma-temu-phone .woocommerce-MyAccount-navigation{
  padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
}


/* Subpage mode: DO NOT hide header/nav (failsafe).
   Reason: if JS/topbar logic misfires on some endpoints, hiding these can leave a blank screen.
   We still allow the optional topbar to show when enabled. */
body.opd-ma-temu-subpage .opd-ma-temu-header{ display:none !important; }
body.opd-ma-temu-phone.opd-ma-temu-subpage .woocommerce-MyAccount-navigation{ display:none !important; }
body.opd-ma-temu-phone.opd-ma-temu-subpage .woocommerce-MyAccount-content{ width:100% !important; margin:0 !important; float:none !important; display:block !important; }
body.opd-ma-temu-phone .opd-ma-temu-topbar{
  display:none;
}
body.opd-ma-temu-phone.opd-ma-temu-subpage .opd-ma-temu-topbar{
  display:flex !important;
  align-items:center;
  gap:10px;
  padding:12px 12px 6px 12px;
}
body.opd-ma-temu-phone .opd-ma-temu-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  background:#fff;
  border-radius:14px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  text-decoration:none;
  color:#111;
  font-size:14px;
  font-weight:600;
}
body.opd-ma-temu-phone .opd-ma-temu-back span{
  font-size:18px;
  line-height:1;
  transform: translateY(-1px);
}

/* Ensure topbar never shows unless explicitly enabled */
body.opd-ma-temu-phone:not(.opd-ma-temu-subpage) .opd-ma-temu-topbar{display:none !important;}


/* =========================
   OPD: Fix "Your reviews" layout on PHONE
   Target: OPD Temu Reviews UX module (opd-trx-*)
   This is PHONE-ONLY (scoped under body.opd-ma-temu-phone).
   ========================= */
body.opd-ma-temu-phone .opd-trx-row{
  align-items:flex-start !important;
}
body.opd-ma-temu-phone .opd-trx-row-title{
  max-width:100% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
body.opd-ma-temu-phone .opd-trx-btn{
  white-space:nowrap !important;
  width:auto !important;
  max-width:none !important;
}
@media (max-width: 520px){
  body.opd-ma-temu-phone .opd-trx-row{
    flex-wrap:wrap !important;
  }
  body.opd-ma-temu-phone .opd-trx-row-right{
    flex:0 0 100% !important;
    display:flex !important;
    justify-content:flex-end !important;
    margin-top:10px !important;
  }
  body.opd-ma-temu-phone .opd-trx-row-thumb img{
    width:46px !important;
    height:46px !important;
    border-radius:12px !important;
  }
  body.opd-ma-temu-phone .opd-trx-btn.primary{
    height:42px !important;
    border-radius:16px !important;
    padding:0 18px !important;
  }
}



/* =========================
 * OPD TRX (Reviews) – force phone-friendly layout inside My Account
 * Fixes: Leave a review page showing desktop 2-column on some phones/in-app browsers
 * ========================= */
body.opd-ma-temu-phone .opd-trx-leave-grid{
  grid-template-columns: 1fr !important;
  gap: 12px !important;
}

body.opd-ma-temu-phone .opd-trx-product{
  width: 100% !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
}

body.opd-ma-temu-phone .opd-trx-thumb{
  width: 96px !important;
  flex: 0 0 96px !important;
}

body.opd-ma-temu-phone .opd-trx-thumb img{
  width: 96px !important;
  height: 96px !important;
  object-fit: cover !important;
  border-radius: 16px !important;
}

body.opd-ma-temu-phone .opd-trx-pinfo{
  width: auto !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.opd-ma-temu-phone .opd-trx-pname{
  -webkit-line-clamp: 2 !important;
}

body.opd-ma-temu-phone .opd-trx-form{
  width: 100% !important;
  min-width: 0 !important;
}

/* Make long labels / helper text wrap nicely */
body.opd-ma-temu-phone .opd-trx-text,
body.opd-ma-temu-phone .opd-trx-photo-help{
  word-break: break-word;
}

/* Keep action rows tidy */
body.opd-ma-temu-phone .opd-trx-submit-row{
  flex-wrap: wrap !important;
}

/* Prevent any theme 'button width:100%' rules from breaking CTA sizing in lists */
body.opd-ma-temu-phone .opd-trx-btn{
  width: auto !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}