/* ==========================================================================
   HOCO REDESIGN — 60 ACCOUNT (My-Account area)
   Owns: login/register card, logged-in dashboard nav + content, orders table.
   Scoped under .woocommerce-account so it never leaks to cart(50)/checkout(55).
   Matches /test: brand purple, Tajawal, radius 14, soft shadow, clean cards.
   RTL-safe (logical props). Nav stacks above content on mobile.
   ========================================================================== */

/* ---------- shared page canvas ---------- */
.woocommerce-account .woocommerce{max-width:1180px;margin-inline:auto}

/* =====================================================================
   1) LOGIN / REGISTER  — centered clean card
   ===================================================================== */
.woocommerce-account .wd-registration-page{
  max-width:1000px;margin:26px auto 40px;
  background:var(--hoco-surface);
  border:1px solid var(--hoco-line);
  border-radius:var(--hoco-radius);
  box-shadow:var(--hoco-shadow);
  padding:36px 34px;
}

/* column layout inside the card */
.woocommerce-account #customer_login.row{margin-inline:0}
.woocommerce-account #customer_login > [class*="col-"]{padding-block:4px}

/* divider between the login column and the register/switch column (desktop) */
@media(min-width:769px){
  .woocommerce-account #customer_login .col-register-text,
  .woocommerce-account #customer_login .col-register{
    border-inline-start:1px solid var(--hoco-line);
    padding-inline-start:34px;
  }
}

/* headings — brand accent bar like /test section titles */
.woocommerce-account .wd-login-title{
  font-size:22px;font-weight:800;color:var(--hoco-ink);
  text-transform:none;letter-spacing:0;
  margin:0 0 20px;display:flex;align-items:center;gap:10px;line-height:1.2;
}
.woocommerce-account .wd-login-title::before{
  content:"";flex:0 0 auto;width:6px;height:22px;border-radius:3px;
  background:var(--hoco-brand);
}

/* labels */
.woocommerce-account .woocommerce-form .form-row label,
.woocommerce-account .woocommerce-form label:not(.woocommerce-form__label-for-checkbox){
  display:block;font-weight:600;color:var(--hoco-ink);
  margin-bottom:7px;font-size:14px;
}
.woocommerce-account .required{color:var(--hoco-brand-2);border:0}

/* inputs — rounded, soft fill, brand focus (core sets base radius/border) */
.woocommerce-account .woocommerce-form .form-row input.input-text,
.woocommerce-account form.login input.input-text,
.woocommerce-account form.register input.input-text{
  width:100%;padding:12px 14px;background:#faf9fb;
  font-family:inherit;font-size:15px;color:var(--hoco-ink);
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.woocommerce-account .woocommerce-form .form-row input.input-text:focus,
.woocommerce-account form.login input.input-text:focus,
.woocommerce-account form.register input.input-text:focus{
  border-color:var(--hoco-brand)!important;background:#fff;
  box-shadow:0 0 0 3px rgba(84,4,87,.09);outline:0;
}

/* submit buttons — brand purple, full width */
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account form.login button[type="submit"],
.woocommerce-account .woocommerce-form-register button[type="submit"],
.woocommerce-account .woocommerce-form-register .woocommerce-Button,
.woocommerce-account form.register button[name="register"]{
  width:100%;background:var(--hoco-brand)!important;color:#fff!important;
  border:0!important;border-radius:10px!important;
  padding:13px 22px!important;font-weight:700!important;font-size:15px!important;
  cursor:pointer;transition:background .18s,transform .05s;box-shadow:none!important;
}
.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account form.login button[type="submit"]:hover,
.woocommerce-account .woocommerce-form-register button[type="submit"]:hover,
.woocommerce-account .woocommerce-form-register .woocommerce-Button:hover,
.woocommerce-account form.register button[name="register"]:hover{
  background:var(--hoco-brand-dark)!important;color:#fff!important;
}
.woocommerce-account .woocommerce-form-login__submit:active,
.woocommerce-account form.register button[name="register"]:active{transform:translateY(1px)}

/* login footer: remember-me + lost password */
.woocommerce-account .login-form-footer{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-top:4px;
}
.woocommerce-account .woocommerce-form-login__rememberme{
  display:inline-flex;align-items:center;gap:7px;margin:0;
  font-size:13.5px;color:var(--hoco-muted);font-weight:500;cursor:pointer;
}
.woocommerce-account .woocommerce-form-login__rememberme input{accent-color:var(--hoco-brand)}
.woocommerce-account .lost_password a,
.woocommerce-account .woocommerce-LostPassword a{
  color:var(--hoco-brand);font-weight:600;font-size:13.5px;
}
.woocommerce-account .lost_password a:hover{color:var(--hoco-brand-dark);text-decoration:underline}

/* register-text / switch column */
.woocommerce-account .col-register-text{text-align:center}
.woocommerce-account .wd-login-divider{
  color:var(--hoco-muted);font-weight:600;margin-bottom:16px;
}
.woocommerce-account .registration-info,
.woocommerce-account .login-info{color:var(--hoco-muted);font-size:14px;line-height:1.7}
.woocommerce-account .wd-switch-to-register,
.woocommerce-account .wd-switch-to-login{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  margin-top:8px;background:#fff!important;color:var(--hoco-brand)!important;
  border:1.5px solid var(--hoco-brand)!important;border-radius:10px!important;
  padding:11px 24px!important;font-weight:700!important;
  transition:background .18s,color .18s;box-shadow:none!important;
}
.woocommerce-account .wd-switch-to-register:hover,
.woocommerce-account .wd-switch-to-login:hover{
  background:var(--hoco-brand)!important;color:#fff!important;
}

/* register privacy text */
.woocommerce-account .woocommerce-privacy-policy-text{
  font-size:13px;color:var(--hoco-muted);margin-top:6px;
}
.woocommerce-account .woocommerce-privacy-policy-text a{color:var(--hoco-brand);font-weight:600}

/* lost-password page (also under .woocommerce-account) */
.woocommerce-account .woocommerce-ResetPassword.lost_reset_password{
  max-width:460px;margin:26px auto 40px;background:var(--hoco-surface);
  border:1px solid var(--hoco-line);border-radius:var(--hoco-radius);
  box-shadow:var(--hoco-shadow);padding:32px 30px;
}
.woocommerce-account .lost_reset_password .button{
  background:var(--hoco-brand)!important;color:#fff!important;border:0!important;
  border-radius:10px!important;font-weight:700!important;
}
.woocommerce-account .lost_reset_password .button:hover{background:var(--hoco-brand-dark)!important}

/* =====================================================================
   2) LOGGED-IN DASHBOARD — sidebar nav + content panels
   ===================================================================== */
.woocommerce-account .woocommerce-my-account-wrapper{align-items:flex-start}

/* ---- sidebar nav as a clean card ---- */
.woocommerce-account .wd-my-account-sidebar{border-inline-end:none!important}
.woocommerce-account .wd-my-account-sidebar .sidebar-container{
  margin-top:0;margin-bottom:24px;padding:14px!important;
  background:var(--hoco-surface);border:1px solid var(--hoco-line)!important;
  border-radius:var(--hoco-radius);box-shadow:var(--hoco-shadow);
}

.woocommerce-account .woocommerce-MyAccount-navigation{margin-bottom:0}
.woocommerce-account .woocommerce-MyAccount-navigation ul{margin:0;padding:0;list-style:none}
.woocommerce-account .woocommerce-MyAccount-navigation ul li{margin:0 0 4px;border:0}
.woocommerce-account .woocommerce-MyAccount-navigation ul li:last-child{margin-bottom:0}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a{
  display:block;padding:11px 15px;border-radius:10px;
  font-size:14.5px;font-weight:600;color:var(--hoco-ink);
  transition:background .15s,color .15s;
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover{
  background:#f4f1f6;color:var(--hoco-brand);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active > a{
  background:var(--hoco-brand);color:#fff;box-shadow:0 4px 12px rgba(84,4,87,.22);
}

/* ---- content column as a clean panel ---- */
.woocommerce-account .woocommerce-MyAccount-content{
  background:var(--hoco-surface);border:1px solid var(--hoco-line);
  border-radius:var(--hoco-radius);box-shadow:var(--hoco-shadow);
  padding:26px 30px 30px!important;
}
.woocommerce-account .woocommerce-MyAccount-content > h2,
.woocommerce-account .woocommerce-MyAccount-content header > h2{
  text-transform:none;font-size:20px;font-weight:800;color:var(--hoco-ink);
  margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--hoco-line);
}
.woocommerce-account .woocommerce-MyAccount-content p{color:var(--hoco-ink)}
.woocommerce-account .woocommerce-MyAccount-content mark,
.woocommerce-account .order-info mark{
  background:var(--hoco-brand);color:#fff;border-radius:5px;padding:1px 7px;
}
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.wd-switch-to-register){
  color:var(--hoco-brand);font-weight:600;
}

/* content primary buttons -> brand */
.woocommerce-account .woocommerce-MyAccount-content .button,
.woocommerce-account .woocommerce-MyAccount-content button.button,
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"],
.woocommerce-account .woocommerce-Address .edit.button{
  background:var(--hoco-brand)!important;color:#fff!important;border:0!important;
  border-radius:10px!important;font-weight:700!important;padding:11px 22px!important;
  box-shadow:none!important;transition:background .18s;
}
.woocommerce-account .woocommerce-MyAccount-content .button:hover,
.woocommerce-account .woocommerce-MyAccount-content button.button:hover,
.woocommerce-account .woocommerce-EditAccountForm button[type="submit"]:hover,
.woocommerce-account .woocommerce-Address .edit.button:hover{
  background:var(--hoco-brand-dark)!important;color:#fff!important;
}

/* ---- dashboard quick-link cards ---- */
.woocommerce-account .wd-my-account-links a{
  border:1px solid var(--hoco-line);border-radius:var(--hoco-radius);
  box-shadow:0 2px 10px rgba(40,10,50,.05);color:var(--hoco-ink);
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.woocommerce-account .wd-my-account-links a:hover{
  background:#fff!important;transform:translateY(-3px);
  box-shadow:var(--hoco-shadow);border-color:#e6d8ea;color:var(--hoco-brand);
}
.woocommerce-account .wd-my-account-links a:before{color:var(--hoco-brand-2)!important}

/* =====================================================================
   3) ORDERS / TABLES / ADDRESSES  (account-scoped only)
   ===================================================================== */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
.woocommerce-account .woocommerce-orders-table,
.woocommerce-account .woocommerce-table--order-details{
  border-collapse:separate;border-spacing:0;width:100%;
  border:1px solid var(--hoco-line);border-radius:12px;overflow:hidden;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table th,
.woocommerce-account .woocommerce-orders-table th{
  background:#f4f1f6;color:var(--hoco-ink);font-weight:700;
  padding:13px 15px;text-align:start;font-size:13.5px;border:0;
}
.woocommerce-account .woocommerce-MyAccount-content table.shop_table td,
.woocommerce-account .woocommerce-orders-table td{
  padding:13px 15px;border:0;border-top:1px solid var(--hoco-line);
  vertical-align:middle;color:var(--hoco-ink);
}
.woocommerce-account .woocommerce-orders-table tbody tr:hover td{background:#faf8fb}
.woocommerce-account .woocommerce-orders-table .woocommerce-orders-table__cell-order-total,
.woocommerce-account .woocommerce-table--order-details .amount{
  color:var(--hoco-price);font-weight:800;
}
/* order status pill */
.woocommerce-account .woocommerce-orders-table__cell-order-status{font-weight:700;color:var(--hoco-brand)}

/* small "view / order-again" buttons inside table -> brand */
.woocommerce-account .woocommerce-orders-table td .button{
  background:var(--hoco-brand)!important;color:#fff!important;border:0!important;
  border-radius:9px!important;font-weight:700!important;padding:8px 16px!important;
  box-shadow:none!important;
}
.woocommerce-account .woocommerce-orders-table td .button:hover{background:var(--hoco-brand-dark)!important}

/* addresses grid */
.woocommerce-account .woocommerce-MyAccount-content .u-columns{
  display:flex;flex-wrap:wrap;gap:20px;margin:0;
}
.woocommerce-account .woocommerce-MyAccount-content .u-column1,
.woocommerce-account .woocommerce-MyAccount-content .u-column2{
  flex:1 1 260px;width:auto;float:none;padding:0;
}
.woocommerce-account .woocommerce-Address{
  border:1px solid var(--hoco-line);border-radius:var(--hoco-radius);
  padding:20px;background:#faf9fb;height:100%;
}
.woocommerce-account .woocommerce-Address-title h3{
  font-size:16px;font-weight:800;color:var(--hoco-ink);margin:0 0 10px;
}
.woocommerce-account .woocommerce-Address address{
  color:var(--hoco-muted);font-style:normal;line-height:1.9;
}

/* notices inside account */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-Message{
  border-radius:10px;
}

/* =====================================================================
   4) RESPONSIVE
   ===================================================================== */
@media(max-width:768px){
  .woocommerce-account .wd-registration-page{padding:24px 18px;margin-top:16px}
  .woocommerce-account #customer_login > [class*="col-"]:not(:last-child){margin-bottom:26px}
  /* nav stacks ABOVE content (sidebar is first in DOM) */
  .woocommerce-account .woocommerce-my-account-wrapper{flex-wrap:wrap}
  .woocommerce-account .wd-my-account-sidebar .sidebar-container{margin-bottom:18px}
  .woocommerce-account .woocommerce-MyAccount-content{padding:20px 18px 24px!important}
  .woocommerce-account .login-form-footer{gap:8px}
}

/* responsive orders table (Woodmart stacks with data-title labels) */
@media(max-width:600px){
  .woocommerce-account .woocommerce-orders-table.shop_table_responsive tr{
    border:1px solid var(--hoco-line);border-radius:12px;margin-bottom:14px;
    display:block;overflow:hidden;
  }
  .woocommerce-account .woocommerce-orders-table.shop_table_responsive td{
    border-top:1px solid var(--hoco-line);
  }
  .woocommerce-account .woocommerce-orders-table.shop_table_responsive td:first-child{border-top:0}
}