/* =========================
   Saipa Parts — My Account (RTL)
   Scoped: only WooCommerce Account pages
   ========================= */

body.woocommerce-account {
  direction: rtl;
  background: #f5f6f8;
}

/* Container */
body.woocommerce-account .woocommerce {
  max-width: 1160px;
  margin: 0 auto;
  padding: 28px 16px 60px;
}

/* Kill Woo default floats/widths that break layouts */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* Root grid layout */
body.woocommerce-account .woocommerce-MyAccount {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* Prevent children from expanding grid and causing wrap/overlap */
body.woocommerce-account .woocommerce-MyAccount > * {
  min-width: 0;
}

/* Mobile */
@media (max-width: 900px) {
  body.woocommerce-account .woocommerce-MyAccount {
    grid-template-columns: 1fr;
  }
}

/* ====== Navigation Card ====== */
.sp-account__nav {
  position: sticky;
  top: 14px;
}

@media (max-width: 900px) {
  .sp-account__nav {
    position: relative;
    top: auto;
  }
}

.sp-account__menu {
  list-style: none;
  margin: 0;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.05);
}

.sp-account__menuItem { margin: 0; }

.sp-account__menuLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 12px;
  border-radius: 14px;
  text-decoration: none;
  color: #111;
  font-size: 14px;
  line-height: 1.2;
  transition: background .15s ease, color .15s ease;
}

.sp-account__menuLink:hover {
  background: rgba(0, 92, 255, 0.08);
}

.sp-account__menuItem.is-active .sp-account__menuLink {
  background: rgba(0, 92, 255, 0.12);
  color: #0b2a66;
}

/* ====== Content Card ====== */
.sp-account__panel,
body.woocommerce-account .woocommerce-MyAccount-content > *:first-child {
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.05);
}

/* Header text */
.sp-account__title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
}
.sp-account__subtitle {
  margin: 0 0 16px;
  opacity: .75;
  font-size: 13px;
  line-height: 1.8;
}

/* ====== Dashboard quick links (Woo default) fix ======
   If our custom dashboard not loaded or some default parts appear,
   force them into a stable grid.
*/
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-content {
  min-width: 0;
}

body.woocommerce-account .woocommerce-MyAccount-content a {
  max-width: 100%;
}

/* Default Woo dashboard links are inside <p> with <a> — make it stable */
body.woocommerce-account .woocommerce-MyAccount-content p,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-MyAccount-content p {
  margin: 0 0 10px;
  line-height: 1.9;
}

/* ====== Cards grid (our custom dashboard) ====== */
.sp-account__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

@media (max-width: 900px) {
  .sp-account__cards { grid-template-columns: 1fr; }
}

.sp-card {
  display: block;
  padding: 14px;
  border-radius: 16px;
  background: #f6f8ff;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(0,0,0,.05);
  min-width: 0;
}

.sp-card__title { font-weight: 800; margin-bottom: 6px; }
.sp-card__desc { opacity: .75; font-size: 13px; line-height: 1.7; }

/* Latest order block */
.sp-account__latest {
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.05);
  padding: 14px;
  background: #fbfbfc;
}

.sp-account__latestHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.sp-account__latestHead h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
}

.sp-latestOrder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 700px) {
  .sp-latestOrder { grid-template-columns: 1fr; }
}

.sp-latestOrder span { display:block; opacity:.7; font-size: 12px; }
.sp-latestOrder b { display:block; margin-top: 3px; }

/* ====== Orders Cards (our custom orders.php) ====== */
.sp-orders { display: grid; gap: 12px; }

.sp-orderCard {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 14px;
  background: #fff;
  min-width: 0;
}

.sp-orderCard__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.sp-orderCard__id { font-weight: 800; }

.sp-orderCard__status {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
  white-space: nowrap;
}

.sp-orderCard__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 12px;
}

@media (max-width: 700px) {
  .sp-orderCard__meta { grid-template-columns: 1fr; }
}

.sp-orderCard__meta span { display:block; opacity:.7; font-size: 12px; }
.sp-orderCard__meta b { display:block; margin-top: 3px; }

.sp-orderCard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Buttons */
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.10);
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

.sp-btn--primary {
  background: #005CFF; /* آبی برند */
  color: #fff;
  border-color: transparent;
}

.sp-btn--secondary {
  background: #fff;
  color: #111;
}

/* Empty state */
.sp-empty {
  text-align: center;
  padding: 28px 10px;
}

.sp-empty__title {
  font-weight: 800;
  margin-bottom: 12px;
}

.sp-link {
  text-decoration: none;
  color: #005CFF;
}

/* ====== Fix Woo default tables/forms inside account to not break grid ====== */
body.woocommerce-account .woocommerce-MyAccount-content table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 14px;
}

body.woocommerce-account .woocommerce-MyAccount-content table,
body.woocommerce-account .woocommerce-MyAccount-content form,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
  max-width: 100%;
}

body.woocommerce-account .woocommerce-MyAccount-content * {
  box-sizing: border-box;
}

/* Important: prevent long strings/urls pushing layout */
body.woocommerce-account .woocommerce-MyAccount-content {
  overflow-wrap: anywhere;
}

/* Remove default list bullets if any stray ul appear */
body.woocommerce-account .woocommerce-MyAccount-content ul,
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
/* =========================
   Sticky FIX — prevent overlap
   ========================= */

/* Desktop: sticky ok, but never cover content */
.sp-account__nav {
  position: relative;
  top: 14px;
  z-index: 1;              /* پایین‌تر از هدر/مودال‌ها، بالاتر از بک‌گراند */
}

/* make sure nav has its own paint layer & background */
.sp-account__menu {
  position: relative;
  z-index: 1;
  background: #fff;        /* حتماً سفید، شفاف نباشه */
}

/* Content always above page background but below sticky */
.sp-account__panel {
  position: relative;
  z-index: 1;
}

/* ✅ Mobile: turn sticky OFF completely to avoid overlay */
@media (max-width: 900px) {
  .sp-account__nav {
    position: static !important;
    top: auto !important;
  }
}

/* Extra safety: if any parent has overflow that breaks sticky, neutralize */
body.woocommerce-account .woocommerce,
body.woocommerce-account .woocommerce-MyAccount,
body.woocommerce-account .woocommerce-MyAccount-content {
  overflow: visible !important;
}

/* ===== Trendyol-like dashboard layout (scoped) ===== */
.sp-acc { width: 100%; }
.sp-acc__top {
  margin-bottom: 14px;
}
.sp-acc__h1 { margin: 0 0 6px; font-size: 18px; font-weight: 900; }
.sp-acc__sub { margin: 0; opacity: .75; font-size: 13px; line-height: 1.9; }

.sp-acc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}
.sp-acc__grid > * { min-width: 0; }

@media (max-width: 900px) {
  .sp-acc__grid { grid-template-columns: 1fr; }
}

.sp-acc__cols{
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 900px) {
  .sp-acc__cols { grid-template-columns: 1fr; }
}

.sp-box{
  background:#fff;
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  padding: 14px;
}
.sp-box__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.sp-box__title{ margin:0; font-size: 14px; font-weight: 900; }

.sp-box--spot{
  background: linear-gradient(0deg, #ffffff 60%, rgba(0,92,255,.06));
}

.sp-badge{
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.06);
  white-space: nowrap;
}

.sp-spot__row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 700px) {
  .sp-spot__row{ grid-template-columns: 1fr; }
}
.sp-kv span{ display:block; opacity:.7; font-size: 12px; }
.sp-kv b{ display:block; margin-top: 3px; font-weight: 900; }

.sp-spot__actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sp-list{ display:grid; gap: 10px; }
.sp-item{
  display:block;
  text-decoration:none;
  color:inherit;
  padding: 12px;
  border-radius: 14px;
  background: #f6f8ff;
  border: 1px solid rgba(0,0,0,.04);
}
.sp-item__t{ font-weight: 900; margin-bottom: 4px; }
.sp-item__d{ opacity:.75; font-size: 12.5px; line-height: 1.8; }

.sp-item--disabled{
  opacity: .65;
  cursor: default;
}

.sp-box--mini{ padding: 12px; }
.sp-mini__title{ font-weight: 900; margin-bottom: 10px; }
.sp-mini__row{
  display:flex;
  justify-content:space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid rgba(0,0,0,.05);
}
.sp-mini__row:first-of-type{ border-top: 0; padding-top: 0; }
.sp-mini__row span{ opacity:.75; font-size: 12px; }
.sp-mini__row b{ font-weight: 900; font-size: 12px; }

.sp-mini__actions{ display:flex; gap: 10px; flex-wrap: wrap; }

/* Empty state */
.sp-empty2{ text-align:center; padding: 18px 10px; }
.sp-empty2__icon{ font-size: 34px; margin-bottom: 6px; }
.sp-empty2__title{ font-weight: 900; margin-bottom: 6px; }
.sp-empty2__desc{ opacity:.75; font-size: 13px; margin-bottom: 12px; line-height: 1.8; }

/* Buttons refinement */
.sp-btn--ghost{
  background: rgba(0,92,255,.08);
  color: #0b2a66;
  border-color: transparent;
}

/* =========================
   Trendyol-like Account Nav
   Desktop: sidebar card
   Mobile: dropdown toggle
   ========================= */

.sp-accnav { position: sticky; top: 14px; z-index: 2; }
@media (max-width: 900px) { .sp-accnav { position: static; top: auto; } }

/* Toggle button (only visible on mobile) */
.sp-accnav__toggle{
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  font-weight: 900;
}
.sp-accnav__chev{ opacity:.7; }

@media (max-width: 900px){
  .sp-accnav__toggle{ display: flex; }
}

/* Menu card */
.sp-account__menu{
  list-style: none;
  margin: 0;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
}

/* Compact items like Trendyol */
.sp-account__menuLink{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  color:#111;
  font-size: 13.5px;
  line-height: 1.2;
}

.sp-account__menuArrow{
  opacity:.55;
  transform: rotate(180deg); /* چون RTL */
}

.sp-account__menuItem.is-active .sp-account__menuLink{
  background: rgba(0,92,255,.10);
  color: #0b2a66;
}

.sp-account__menuLink:hover{
  background: rgba(0,92,255,.08);
}

/* ✅ Mobile: dropdown behavior (collapsed by default) */
@media (max-width: 900px){
  .sp-account__menu{
    display: none;
    margin-top: 10px;
  }
  .sp-accnav.is-open .sp-account__menu{
    display: block;
  }
}

/* =========================
   Saipa Parts — My Account (RTL)
   Scoped: only WooCommerce Account pages
   Updated to hide the sidebar navigation on desktop and improve
   the overall layout to more closely follow the Trendyol
   user experience. The navigation now only appears on mobile
   via a dropdown toggle. On larger screens the account area
   becomes a single-column layout without any sidebar.
   ========================= */

/* Base RTL direction and background colour */
body.woocommerce-account {
  direction: rtl;
  background: #f5f6f8;
}

/* Container constraining width and padding */
body.woocommerce-account .woocommerce {
  max-width: 1160px;
  margin: 0 auto;
  padding: 28px 16px 60px;
}

/* Remove WooCommerce default floats and widths which break our grid */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* Root grid layout: by default show two columns (nav + content) */
body.woocommerce-account .woocommerce-MyAccount {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

/* Ensure children do not expand the grid unexpectedly */
body.woocommerce-account .woocommerce-MyAccount > * {
  min-width: 0;
}

/* On smaller screens the layout stacks to a single column */
@media (max-width: 900px) {
  body.woocommerce-account .woocommerce-MyAccount {
    grid-template-columns: 1fr;
  }
}

/*
 * ========================= Navigation Styles =========================
 * We provide styles for a sidebar navigation card on small screens.
 * On desktop (>= 900px) the navigation is completely removed,
 * following the Trendyol pattern. A toggle button is shown on mobile.
 */

/* Wrapper for the account navigation */
.sp-accnav {
  position: sticky;
  top: 14px;
  z-index: 2;
}

/* On mobile we turn sticky off so it doesn’t cover content */
@media (max-width: 900px) {
  .sp-accnav {
    position: static;
    top: auto;
  }
}

/* Hide the sidebar navigation entirely on desktop */
@media (min-width: 900px) {
  .sp-accnav,
  .sp-account__nav,
  .woocommerce-MyAccount .woocommerce-MyAccount-navigation {
    display: none !important;
  }
  /* When the nav is hidden the grid becomes single column */
  body.woocommerce-account .woocommerce-MyAccount {
    grid-template-columns: 1fr;
  }
}

/* Toggle button for mobile navigation */
.sp-accnav__toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  font-weight: 900;
  cursor: pointer;
}
.sp-accnav__chev {
  opacity: .7;
}
@media (max-width: 900px) {
  .sp-accnav__toggle {
    display: flex;
  }
}

/* Navigation menu card */
.sp-account__menu {
  list-style: none;
  margin: 0;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
}

/* Individual navigation items */
.sp-account__menuLink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  color: #111;
  font-size: 13.5px;
  line-height: 1.2;
  transition: background .15s ease, color .15s ease;
}
.sp-account__menuArrow {
  opacity: .55;
  transform: rotate(180deg); /* Because of RTL */
}
.sp-account__menuItem.is-active .sp-account__menuLink {
  background: rgba(0,92,255,.10);
  color: #0b2a66;
}
.sp-account__menuLink:hover {
  background: rgba(0,92,255,.08);
}

/* On mobile the menu is hidden by default and toggled open */
@media (max-width: 900px) {
  .sp-account__menu {
    display: none;
    margin-top: 10px;
  }
  .sp-accnav.is-open .sp-account__menu {
    display: block;
  }
}

/*
 * ========================= Panel & Dashboard Styles =========================
 * These classes style the content panels, cards and dashboard elements.
 */

/* Generic panel wrapper: account content and custom panels */
.sp-account__panel,
body.woocommerce-account .woocommerce-MyAccount-content > *:first-child {
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.05);
}

/* Titles and subtitles */
.sp-account__title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
}
.sp-account__subtitle {
  margin: 0 0 16px;
  opacity: .75;
  font-size: 13px;
  line-height: 1.8;
}

/* Dashboard cards grid for quick links */
.sp-account__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 900px) {
  .sp-account__cards {
    grid-template-columns: 1fr;
  }
}

.sp-card {
  display: block;
  padding: 14px;
  border-radius: 16px;
  background: #f6f8ff;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(0,0,0,.05);
  min-width: 0;
}
.sp-card__title {
  font-weight: 800;
  margin-bottom: 6px;
}
.sp-card__desc {
  opacity: .75;
  font-size: 13px;
  line-height: 1.7;
}

/* Latest order block */
.sp-account__latest {
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.05);
  padding: 14px;
  background: #fbfbfc;
}
.sp-account__latestHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.sp-account__latestHead h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
}
.sp-latestOrder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 700px) {
  .sp-latestOrder {
    grid-template-columns: 1fr;
  }
}
.sp-latestOrder span {
  display: block;
  opacity: .7;
  font-size: 12px;
}
.sp-latestOrder b {
  display: block;
  margin-top: 3px;
}

/* Orders listing cards */
.sp-orders {
  display: grid;
  gap: 12px;
}
.sp-orderCard {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 14px;
  background: #fff;
  min-width: 0;
}
.sp-orderCard__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.sp-orderCard__id {
  font-weight: 800;
}
.sp-orderCard__status {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
  white-space: nowrap;
}
.sp-orderCard__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 700px) {
  .sp-orderCard__meta {
    grid-template-columns: 1fr;
  }
}
.sp-orderCard__meta span {
  display: block;
  opacity: .7;
  font-size: 12px;
}
.sp-orderCard__meta b {
  display: block;
  margin-top: 3px;
}
.sp-orderCard__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Buttons */
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.10);
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}
.sp-btn--primary {
  background: #005CFF; /* Brand blue */
  color: #fff;
  border-color: transparent;
}
.sp-btn--secondary {
  background: #fff;
  color: #111;
}
.sp-btn--ghost {
  background: rgba(0,92,255,.08);
  color: #0b2a66;
  border-color: transparent;
}

/* Empty state styling */
.sp-empty {
  text-align: center;
  padding: 28px 10px;
}
.sp-empty__title {
  font-weight: 800;
  margin-bottom: 12px;
}
.sp-link {
  text-decoration: none;
  color: #005CFF;
}

/* Form / table fixes inside account pages to prevent breakage */
body.woocommerce-account .woocommerce-MyAccount-content table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 14px;
}
body.woocommerce-account .woocommerce-MyAccount-content table,
body.woocommerce-account .woocommerce-MyAccount-content form,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
  max-width: 100%;
}
body.woocommerce-account .woocommerce-MyAccount-content * {
  box-sizing: border-box;
}
/* Ensure long strings or URLs wrap instead of breaking the layout */
body.woocommerce-account .woocommerce-MyAccount-content {
  overflow-wrap: anywhere;
}
/* Remove bullets from stray unordered lists */
body.woocommerce-account .woocommerce-MyAccount-content ul,
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Additional safety for sticky nav where overflow might interfere */
body.woocommerce-account .woocommerce,
body.woocommerce-account .woocommerce-MyAccount,
body.woocommerce-account .woocommerce-MyAccount-content {
  overflow: visible !important;
}

/* =========================
   Saipa Parts — My Account (RTL)
   Scoped: WooCommerce Account pages
   ========================= */

body.woocommerce-account {
  direction: rtl;
  background: #f5f6f8;
}

/* Container */
body.woocommerce-account .woocommerce {
  max-width: 1160px;
  margin: 0 auto;
  padding: 28px 16px 60px;
}

/* Kill Woo default floats/widths */
body.woocommerce-account .woocommerce-MyAccount-navigation,
body.woocommerce-account .woocommerce-MyAccount-content {
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* Root layout (default: 2 columns) */
body.woocommerce-account .woocommerce-MyAccount {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
body.woocommerce-account .woocommerce-MyAccount > * { min-width: 0; }

/* ===== IMPORTANT: Desktop => NO MENU (as you asked) ===== */
@media (min-width: 901px) {
  /* hide your custom menu/nav completely on desktop */
  .sp-account__nav,
  .sp-account__menu,
  .sp-accnav,
  .sp-accnav__toggle {
    display: none !important;
  }

  /* switch to single column content */
  body.woocommerce-account .woocommerce-MyAccount {
    grid-template-columns: 1fr !important;
  }
}

/* Mobile: single column */
@media (max-width: 900px) {
  body.woocommerce-account .woocommerce-MyAccount {
    grid-template-columns: 1fr;
  }
}

/* ===== Content Card ===== */
.sp-account__panel,
body.woocommerce-account .woocommerce-MyAccount-content > *:first-child {
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.05);
}

/* Header text (your custom dashboard) */
.sp-account__title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
}
.sp-account__subtitle {
  margin: 0 0 16px;
  opacity: .75;
  font-size: 13px;
  line-height: 1.8;
}

/* ====== Cards grid (dashboard) ====== */
.sp-account__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 900px) {
  .sp-account__cards { grid-template-columns: 1fr; }
}

.sp-card {
  display: block;
  padding: 14px;
  border-radius: 16px;
  background: #f6f8ff;
  text-decoration: none;
  color: inherit;
  border: 1px solid rgba(0,0,0,.05);
  min-width: 0;
}
.sp-card__title { font-weight: 800; margin-bottom: 6px; }
.sp-card__desc { opacity: .75; font-size: 13px; line-height: 1.7; }

/* Latest order block */
.sp-account__latest {
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.05);
  padding: 14px;
  background: #fbfbfc;
}
.sp-account__latestHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.sp-account__latestHead h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
}
.sp-latestOrder {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 700px) {
  .sp-latestOrder { grid-template-columns: 1fr; }
}
.sp-latestOrder span { display:block; opacity:.7; font-size: 12px; }
.sp-latestOrder b { display:block; margin-top: 3px; }

/* ===== Orders Cards (orders.php) ===== */
.sp-orders { display: grid; gap: 12px; }

.sp-orderCard {
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 14px;
  background: #fff;
  min-width: 0;
}
.sp-orderCard__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.sp-orderCard__id { font-weight: 800; }
.sp-orderCard__status {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
  white-space: nowrap;
}
.sp-orderCard__meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px;
  margin-bottom: 12px;
}
@media (max-width: 700px) {
  .sp-orderCard__meta { grid-template-columns: 1fr; }
}
.sp-orderCard__meta span { display:block; opacity:.7; font-size: 12px; }
.sp-orderCard__meta b { display:block; margin-top: 3px; }
.sp-orderCard__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Buttons */
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.10);
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}
.sp-btn--primary {
  background: #005CFF;
  color: #fff;
  border-color: transparent;
}
.sp-btn--secondary {
  background: #fff;
  color: #111;
}

/* Empty state */
.sp-empty { text-align: center; padding: 28px 10px; }
.sp-empty__title { font-weight: 800; margin-bottom: 12px; }
.sp-link { text-decoration: none; color: #005CFF; }

/* ===== Fix Woo tables/forms not breaking layout ===== */
body.woocommerce-account .woocommerce-MyAccount-content table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 14px;
}
body.woocommerce-account .woocommerce-MyAccount-content table,
body.woocommerce-account .woocommerce-MyAccount-content form,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
  max-width: 100%;
}
body.woocommerce-account .woocommerce-MyAccount-content * { box-sizing: border-box; }
body.woocommerce-account .woocommerce-MyAccount-content { overflow-wrap: anywhere; }

body.woocommerce-account .woocommerce-MyAccount-content ul,
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* =========================
   MOBILE ONLY: dropdown account menu
   ========================= */

/* nav wrapper */
.sp-accnav { width: 100%; }

/* toggle */
.sp-accnav__toggle{
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  font-weight: 900;
}

/* menu card */
.sp-account__menu {
  list-style: none;
  margin: 0;
  padding: 10px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
}
.sp-account__menuItem { margin: 0; }

.sp-account__menuLink{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 12px;
  border-radius: 14px;
  text-decoration: none;
  color:#111;
  font-size: 13.5px;
  line-height: 1.2;
}
.sp-account__menuItem.is-active .sp-account__menuLink{
  background: rgba(0,92,255,.10);
  color: #0b2a66;
}
.sp-account__menuLink:hover{
  background: rgba(0,92,255,.08);
}

/* ✅ Mobile behavior */
@media (max-width: 900px){
  .sp-accnav__toggle{ display: flex; }
  .sp-account__menu{ display: none; margin-top: 10px; }
  .sp-accnav.is-open .sp-account__menu{ display: block; }
}

/* =========================
   AUTH (Login/Register) UI
   ========================= */

.sp-auth { width: 100%; }
.sp-auth__wrap { max-width: 980px; margin: 0 auto; }

.sp-auth__head { margin-bottom: 14px; }
.sp-auth__title { margin: 0 0 6px; font-size: 22px; font-weight: 900; }
.sp-auth__sub { margin: 0; opacity: .75; font-size: 13px; line-height: 1.9; }

.sp-auth__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}
@media (max-width: 900px){
  .sp-auth__grid{ grid-template-columns: 1fr; }
}

.sp-auth__card{
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  padding: 16px;
  min-width: 0;
}
.sp-auth__card.is-muted{ opacity: .55; }

.sp-auth__cardHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.sp-auth__cardHead h2{ margin: 0; font-size: 15px; font-weight: 900; }
.sp-auth__switch{ text-decoration:none; color:#005CFF; font-weight: 800; font-size: 13px; }

.sp-auth__form label{ font-size: 12.5px; font-weight: 800; display:block; margin-bottom: 6px; }
.sp-auth__form input[type="text"],
.sp-auth__form input[type="email"],
.sp-auth__form input[type="password"]{
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  padding: 0 12px;
  outline: none;
  background: #fff;
}
.sp-auth__form input:focus{
  border-color: rgba(0,92,255,.55);
  box-shadow: 0 0 0 3px rgba(0,92,255,.10);
}

.sp-auth__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.sp-auth__forgot{ font-size: 12.5px; text-decoration:none; color:#111; opacity:.75; }
.sp-auth__forgot:hover{ opacity: 1; }

.sp-auth__remember{ display:flex; align-items:center; gap: 8px; margin: 0; }
.sp-auth__hint{ margin: 8px 0 0; font-size: 12.5px; opacity: .75; line-height: 1.8; }

.sp-auth__social{ margin-top: 12px; }
.sp-auth__or{ display:flex; align-items:center; gap: 10px; margin: 10px 0; opacity:.65; font-size: 12px; }
.sp-auth__or:before, .sp-auth__or:after{ content:""; height:1px; flex:1; background: rgba(0,0,0,.10); }
.sp-auth__or span{ white-space:nowrap; }

.sp-auth__google{
  display:flex;
  flex-direction:column;
  gap: 4px;
  text-decoration:none;
  padding: 12px;
  border-radius: 14px;
  border: 1px dashed rgba(0,0,0,.18);
  background: #fbfbfc;
  color:#111;
  font-weight: 900;
}
.sp-auth__google small{
  font-weight: 600;
  opacity: .7;
  font-size: 11.5px;
  line-height: 1.6;
}