/* VISTORA — WooCommerce My Account, rendered inside the dashboard shell (.vd-content).
   The dashboard sidebar is the primary app nav; the WC account nav becomes a
   horizontal tab bar that scrolls (not wraps) on mobile, and data tables stack into
   labelled cards on small screens. Brand tokens fall back to literal values so the
   skin holds even if the theme's CSS variables aren't present on this page. */

.vd-content .woocommerce { display: block; max-width: 960px; margin: 0 auto; }
.vd-content .woocommerce::after { content: ""; display: block; clear: both; }

/* ---------- Account nav → horizontal tab bar ---------- */
.vd-content .woocommerce-MyAccount-navigation {
  float: none !important; width: 100% !important; margin: 0 0 1.5rem;
  background: #fff; border: 1px solid var(--border, #E5E5E5);
  border-radius: 16px; padding: .4rem; box-shadow: 0 10px 30px -24px rgba(74,59,107,.5);
}
.vd-content .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.vd-content .woocommerce-MyAccount-navigation li { margin: 0; border: 0; }
.vd-content .woocommerce-MyAccount-navigation li a {
  display: block; padding: .6rem 1.1rem; border-radius: 999px; text-decoration: none;
  color: var(--muted, #5A5A5A); font-weight: 600; font-size: .88rem; white-space: nowrap;
  transition: background .15s, color .15s;
}
.vd-content .woocommerce-MyAccount-navigation li a:hover { background: color-mix(in srgb, var(--secondary, #F5E6D3) 55%, #fff); color: var(--primary, #4A3B6B); }
.vd-content .woocommerce-MyAccount-navigation li.is-active a { background: var(--primary, #4A3B6B); color: #fff; box-shadow: 0 8px 18px -10px rgba(74,59,107,.8); }
/* Log out reads as a distinct, gentle-destructive action */
.vd-content .woocommerce-MyAccount-navigation-link--customer-logout a { color: #9a3b3b; }
.vd-content .woocommerce-MyAccount-navigation-link--customer-logout a:hover { background: #fbeaea; color: #8a2b2b; }

/* ---------- Content card ---------- */
.vd-content .woocommerce-MyAccount-content {
  float: none !important; width: 100% !important;
  background: #fff; border: 1px solid var(--border, #E5E5E5); border-radius: 18px;
  padding: 2rem; box-shadow: 0 16px 38px -28px rgba(74,59,107,.5);
}
.vd-content .woocommerce-MyAccount-content > p:first-child { margin-top: 0; }
/* .vd-btn is the shared "filled button" component (dashboard.css) — it must never
   be treated as a plain link here, or its own white-on-purple styling loses this
   fight on specificity alone (neither side used !important, so whichever rule has
   more classes wins; excluding it here is the real fix, not another arms race). */
.vd-content .woocommerce-MyAccount-content a:not(.button):not(.woocommerce-button):not(.vd-btn) { color: var(--primary, #4A3B6B); font-weight: 600; }
.vd-content .woocommerce-MyAccount-content h2, .vd-content .woocommerce-MyAccount-content h3 { font-family: 'Playfair Display', Georgia, serif; color: var(--fg, #2D2D2D); margin-top: 0; font-weight: 700; }
.lang-ar .vd-content .woocommerce-MyAccount-content h2, .lang-ar .vd-content .woocommerce-MyAccount-content h3 { font-family: 'Cairo', sans-serif; }

/* ---------- Buttons ---------- */
.vd-content .button, .vd-content .woocommerce-button, .vd-content button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--primary, #4A3B6B) !important; color: #fff !important; border: 0 !important;
  border-radius: 999px !important; padding: .75rem 1.5rem !important; font-weight: 700 !important;
  box-shadow: none !important; transition: transform .2s, box-shadow .2s !important; cursor: pointer;
}
.vd-content .button:hover, .vd-content button[type="submit"]:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -14px rgba(74,59,107,.7) !important; }
/* Inline/secondary buttons (e.g. order "View") — filled brand purple, white text.
   Targets the exact WooCommerce order-actions cell directly (not just .button), and
   matches the ".woocommerce-MyAccount-content" ancestor too so this is at least as
   specific as the generic link-color rule above — belt-and-suspenders alongside
   !important, so it can't lose to any other link-color rule on this page. */
.vd-content .woocommerce-orders-table .button,
.vd-content td .button,
.vd-content .woocommerce-orders-table__cell-order-actions a,
.vd-content .woocommerce-MyAccount-content .woocommerce-orders-table__cell-order-actions a {
  background: var(--primary, #4A3B6B) !important; color: #fff !important; border: 0 !important;
  padding: .5rem 1.1rem !important; text-decoration: none !important; display: inline-block !important;
}
.vd-content .woocommerce-orders-table .button:hover,
.vd-content td .button:hover,
.vd-content .woocommerce-orders-table__cell-order-actions a:hover {
  background: #3a2e57 !important; color: #fff !important;
}

/* ---------- Tables ---------- */
.vd-content .shop_table, .vd-content table.account-orders-table, .vd-content .woocommerce-orders-table {
  border-collapse: separate; border-spacing: 0; width: 100%;
  border: 1px solid var(--border, #E5E5E5); border-radius: 14px; overflow: hidden;
}
.vd-content .shop_table th { background: color-mix(in srgb, var(--secondary, #F5E6D3) 35%, #fff); padding: .85rem 1rem; text-align: start; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fg, #2D2D2D); }
.vd-content .shop_table td { padding: .85rem 1rem; border-top: 1px solid color-mix(in srgb, var(--border, #E5E5E5) 70%, transparent); vertical-align: middle; }
.vd-content .woocommerce-orders-table__row:hover td, .vd-content .woocommerce-orders-table__row:hover th { background: color-mix(in srgb, var(--secondary, #F5E6D3) 14%, #fff); }

/* Order status → coloured pill (mark reset so it isn't the browser's yellow) */
.vd-content .vd-ostatus { display: inline-block; padding: .28rem .75rem; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .01em; background: #eef0f6; color: #3a3a44; }
.vd-content .vd-ostatus--completed, .vd-content .vd-ostatus--processing { background: #e6f4ea; color: #1e7e34; }
.vd-content .vd-ostatus--pending, .vd-content .vd-ostatus--on-hold      { background: #fdf2e2; color: #9a6a00; }
.vd-content .vd-ostatus--cancelled, .vd-content .vd-ostatus--failed, .vd-content .vd-ostatus--refunded { background: #fdecea; color: #b3261e; }

/* Branded empty state (orders/courses/favorites) */
.vd-content .vd-acct-empty { text-align: center; padding: 2.5rem 1rem 1rem; }
.vd-content .vd-acct-empty-ic { width: 64px; height: 64px; margin: 0 auto 1.1rem; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--secondary, #F5E6D3) 45%, #fff); color: var(--primary, #4A3B6B); }
.vd-content .vd-acct-empty h3 { margin: 0 0 .4rem; font-size: 1.3rem; }
.vd-content .vd-acct-empty p { color: var(--muted, #5A5A5A); margin: 0 0 1.4rem; }
.vd-content .vd-acct-empty .vd-btn { display: inline-flex; align-items: center; gap: .4rem; background: var(--primary, #4A3B6B) !important; color: #fff !important; border-radius: 999px; padding: .75rem 1.5rem; font-weight: 700; text-decoration: none !important; transition: transform .2s, box-shadow .2s; }
.vd-content .vd-acct-empty .vd-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 24px -14px rgba(74,59,107,.7); }

/* ---------- Forms ---------- */
.vd-content .woocommerce-form-row label, .vd-content form .form-row label { font-weight: 600; font-size: .85rem; color: var(--fg, #2D2D2D); display: block; margin-bottom: .35rem; }
.vd-content input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.vd-content select, .vd-content textarea {
  width: 100%; box-sizing: border-box; font: inherit; line-height: 1.4; color: var(--fg, #2D2D2D);
  border: 1px solid var(--border, #E5E5E5) !important; border-radius: 10px !important;
  padding: .65rem .85rem !important; height: 2.9rem; background: #fff;
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.vd-content textarea { height: auto; }
.vd-content input:focus, .vd-content select:focus, .vd-content textarea:focus {
  outline: none; border-color: var(--primary, #4A3B6B) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #4A3B6B) 14%, transparent) !important;
}
.vd-content fieldset { border: 1px solid var(--border, #E5E5E5); border-radius: 14px; padding: 1.25rem; margin: 1.5rem 0 0; }
.vd-content fieldset legend { font-weight: 700; padding: 0 .5rem; color: var(--primary, #4A3B6B); }
.vd-content .woocommerce-form-row { margin-bottom: 1rem; }
.vd-content .woocommerce-form-row em, .vd-content form .form-row .description { color: var(--muted, #5A5A5A); font-size: .8rem; }

/* ---------- Branded Dashboard tab ---------- */
.vd-content .vd-acct-welcome { margin-bottom: 1.5rem; }
.vd-content .vd-acct-welcome h2 { margin: 0 0 .35rem; font-size: 1.5rem; }
.vd-content .vd-acct-welcome p { margin: 0; color: var(--muted, #5A5A5A); }
.vd-content .vd-acct-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.vd-content .vd-acct-card {
  display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem;
  border: 1px solid var(--border, #E5E5E5); border-radius: 14px; background: #fff;
  text-decoration: none; transition: transform .25s, border-color .25s, box-shadow .25s;
}
.vd-content .vd-acct-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent, #C9A961) 70%, transparent); box-shadow: 0 18px 38px -26px rgba(74,59,107,.55); }
.vd-content .vd-acct-card-ic { flex: 0 0 auto; width: 2.9rem; height: 2.9rem; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--secondary, #F5E6D3) 45%, #fff); color: var(--primary, #4A3B6B); }
.vd-content .vd-acct-card-ic svg { width: 22px; height: 22px; }
.vd-content .vd-acct-card-tx { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.vd-content .vd-acct-card-tx strong { color: var(--fg, #2D2D2D); font-size: 1rem; }
.vd-content .vd-acct-card-tx span { color: var(--muted, #5A5A5A); font-size: .82rem; line-height: 1.4; }
.vd-content .vd-acct-card-go { margin-inline-start: auto; color: var(--accent, #C9A961); font-weight: 700; font-size: 1.1rem; }

/* My Courses grid inside the account uses the catalog cards (course.css) — keep flush */
.vd-content .vlms-catalog { padding: 0; }

/* ---------- Notices ---------- */
.vd-content .woocommerce-message, .vd-content .woocommerce-error, .vd-content .woocommerce-info {
  border: 0 !important; border-radius: 12px !important; padding: .9rem 1.15rem !important;
  margin: 0 0 1.25rem !important; font-weight: 600; list-style: none;
  background: #e6f4ea !important; color: #1e7e34 !important; box-shadow: none !important;
}
.vd-content .woocommerce-error { background: #fdecea !important; color: #b3261e !important; }
.vd-content .woocommerce-info  { background: #eef0f6 !important; color: #3a3a44 !important; }
.vd-content .woocommerce-message::before, .vd-content .woocommerce-error::before, .vd-content .woocommerce-info::before { display: none !important; }
.vd-content .woocommerce-message:focus, .vd-content .woocommerce-error:focus, .vd-content .woocommerce-info:focus { outline: none !important; }
.vd-content .woocommerce-message a.button { float: none; }

/* ============================ Mobile ============================ */
@media (max-width: 768px) {
  /* Tabs: a single swipeable row instead of a wrapping pill cloud */
  .vd-content .woocommerce-MyAccount-navigation { padding: .35rem; }
  .vd-content .woocommerce-MyAccount-navigation ul {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .vd-content .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }
  .vd-content .woocommerce-MyAccount-content { padding: 1.25rem; border-radius: 14px; }
}

@media (max-width: 600px) {
  /* Stack data tables into labelled cards (uses WooCommerce td[data-title]) */
  .vd-content .shop_table thead { display: none; }
  .vd-content .shop_table tr { display: block; border: 1px solid var(--border, #E5E5E5); border-radius: 12px; margin: 0 0 .85rem; overflow: hidden; }
  .vd-content .shop_table td {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .7rem .9rem; text-align: end;
    border-top: 1px solid color-mix(in srgb, var(--border, #E5E5E5) 70%, transparent);
  }
  .vd-content .shop_table td:first-child { border-top: 0; }
  .vd-content .shop_table td::before { content: attr(data-title); font-weight: 700; color: var(--fg, #2D2D2D); text-align: start; font-size: .82rem; }
  .vd-content .shop_table td.woocommerce-orders-table__cell-order-actions { justify-content: flex-end; }
  .vd-content .shop_table td.woocommerce-orders-table__cell-order-actions::before { display: none; }
  /* Two-up form rows go full width */
  .vd-content .form-row-first, .vd-content .form-row-last { width: 100% !important; float: none !important; margin-right: 0 !important; }
  .vd-content fieldset { padding: 1rem; }
  .vd-content .button, .vd-content button[type="submit"] { width: 100%; }
  .vd-content .vd-acct-cards { grid-template-columns: 1fr; }
}

/* Lost-password / reset-password forms: full-width inputs. */
.woocommerce-ResetPassword .woocommerce-Input,
.woocommerce-ResetPassword input.input-text,
.woocommerce-LostPassword input.input-text {
  width: 100%;
  box-sizing: border-box;
}