/* ============================================================
   SKARPETORAJ — My Account page
   Styluje standardowe klasy WooCommerce
   ============================================================ */

/* ─── Layout — sidebar + content ─────────────────────────────────────────── */
.woocommerce-account .woocommerce {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  align-items: start;
  padding: 2rem 0 4rem;
}

/* ─── Sidebar navigation ──────────────────────────────────────────────────── */
.woocommerce-MyAccount-navigation {
  position: sticky;
  top: 2rem;
  background: #fff;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: 4px 4px 0 var(--color-ink);
  overflow: hidden;
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}

.woocommerce-MyAccount-navigation ul li {
  margin: 0;
}

.woocommerce-MyAccount-navigation ul li a {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}

.woocommerce-MyAccount-navigation ul li a:hover {
  background: var(--color-bg-alt, #F5F5F0);
  color: var(--color-ink);
  border-left-color: var(--color-ink);
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a {
  background: var(--color-yellow);
  color: var(--color-ink);
  border-left-color: var(--color-ink);
  font-weight: var(--weight-bold);
}

.woocommerce-MyAccount-navigation ul li + li {
  border-top: 1px solid var(--color-border, #E4E4E4);
}

/* ─── Content area ────────────────────────────────────────────────────────── */
.woocommerce-MyAccount-content {
  min-width: 0;
}

.woocommerce-MyAccount-content p {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* ─── Orders table ────────────────────────────────────────────────────────── */
table.woocommerce-orders-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 3px 3px 0 var(--color-ink);
}

table.woocommerce-orders-table thead th {
  background: var(--color-ink);
  color: rgba(255,255,255,0.75);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.75rem 1rem;
  text-align: left;
  border: none;
}

table.woocommerce-orders-table tbody td {
  padding: 0.875rem 1rem;
  border-top: 1px solid var(--color-border, #E4E4E4);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: #fff;
  vertical-align: middle;
}

table.woocommerce-orders-table tbody tr:hover td {
  background: var(--color-bg-alt, #F5F5F0);
}

/* Order number link */
.woocommerce-orders-table__cell-order-number a {
  font-weight: var(--weight-bold);
  color: var(--color-ink);
  text-decoration: none;
}

.woocommerce-orders-table__cell-order-number a:hover {
  color: var(--color-red);
}

/* Status badges */
.woocommerce-orders-table__cell-order-status mark {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  background: none;
}

mark.order-status.status-completed  { background: #E8F8EE !important; color: #1B6B3A !important; }
mark.order-status.status-processing { background: #FEF9E8 !important; color: #92660A !important; }
mark.order-status.status-on-hold    { background: #EEF2FF !important; color: #3730A3 !important; }
mark.order-status.status-pending    { background: var(--color-bg-alt) !important; color: var(--color-text-muted) !important; }
mark.order-status.status-cancelled,
mark.order-status.status-refunded   { background: #FEE2E2 !important; color: #B91C1C !important; }

/* Action buttons */
.woocommerce-orders-table__cell-order-actions .button,
.woocommerce-orders-table__cell-order-actions a {
  display: inline-flex !important;
  align-items: center !important;
  padding: 5px 12px !important;
  font-size: 12px !important;
  font-weight: var(--weight-semibold) !important;
  border: 1.5px solid var(--color-ink) !important;
  border-radius: var(--radius-full) !important;
  background: #fff !important;
  color: var(--color-ink) !important;
  text-decoration: none !important;
  transition: background 0.14s ease, color 0.14s ease !important;
  box-shadow: 2px 2px 0 var(--color-ink) !important;
}

.woocommerce-orders-table__cell-order-actions .button:hover,
.woocommerce-orders-table__cell-order-actions a:hover {
  background: var(--color-ink) !important;
  color: #fff !important;
  transform: translate(-1px, -1px) !important;
  box-shadow: 3px 3px 0 var(--color-ink) !important;
}

/* No orders notice */
.woocommerce-message--info,
.woocommerce-info {
  background: var(--color-yellow) !important;
  border: 2px solid var(--color-ink) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 3px 3px 0 var(--color-ink) !important;
  padding: 0.875rem 1.25rem !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-semibold) !important;
  color: var(--color-ink) !important;
  list-style: none !important;
}

/* ─── Forms (edit address, edit account) ─────────────────────────────────── */
.woocommerce-MyAccount-content .woocommerce-address-fields__field-wrapper,
.woocommerce-MyAccount-content fieldset {
  margin-bottom: 1.5rem;
}

.woocommerce-MyAccount-content h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  color: var(--color-ink);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2.5px solid var(--color-ink);
}

.woocommerce-MyAccount-content .input-text,
.woocommerce-MyAccount-content input[type="text"],
.woocommerce-MyAccount-content input[type="email"],
.woocommerce-MyAccount-content input[type="password"],
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
  border: 2px solid var(--color-border, #E4E4E4) !important;
  border-radius: var(--radius-md) !important;
  padding: 10px 14px !important;
  font-size: var(--text-sm) !important;
  color: var(--color-ink) !important;
  background: #fff !important;
  width: 100% !important;
  transition: border-color 0.14s ease, box-shadow 0.14s ease !important;
}

.woocommerce-MyAccount-content .input-text:focus,
.woocommerce-MyAccount-content input:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus {
  border-color: var(--color-ink) !important;
  box-shadow: 3px 3px 0 var(--color-ink) !important;
  outline: none !important;
}

.woocommerce-MyAccount-content label {
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--color-text-muted) !important;
  margin-bottom: 0.375rem !important;
  display: block !important;
}

.woocommerce-MyAccount-content .button[type="submit"],
.woocommerce-MyAccount-content button[type="submit"] {
  background: var(--color-red) !important;
  color: #fff !important;
  border: 2px solid var(--color-ink) !important;
  border-radius: var(--radius-full) !important;
  box-shadow: 3px 3px 0 var(--color-ink) !important;
  padding: 11px 24px !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-bold) !important;
  cursor: pointer !important;
  transition: transform 0.15s var(--ease-spring), box-shadow 0.15s !important;
}

.woocommerce-MyAccount-content .button[type="submit"]:hover,
.woocommerce-MyAccount-content button[type="submit"]:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 5px 5px 0 var(--color-ink) !important;
}

/* ─── Addresses section ───────────────────────────────────────────────────── */
.woocommerce-Addresses {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.woocommerce-Address {
  background: #fff;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-lg);
  box-shadow: 3px 3px 0 var(--color-ink);
  padding: 1.25rem;
}

.woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.875rem;
  padding-bottom: 0.625rem;
  border-bottom: 1.5px solid var(--color-border);
}

.woocommerce-Address-title h3 {
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-bold) !important;
  color: var(--color-ink) !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.woocommerce-Address-title a {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 3px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  transition: color 0.14s ease, border-color 0.14s ease;
}

.woocommerce-Address-title a:hover {
  color: var(--color-ink);
  border-color: var(--color-ink);
}

.woocommerce-Address address {
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* ─── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .woocommerce-account .woocommerce {
    grid-template-columns: 1fr;
    padding: 1rem 0 3rem;
    gap: 1.25rem;
  }

  .woocommerce-MyAccount-navigation {
    position: static;
  }

  .woocommerce-MyAccount-navigation ul {
    display: flex;
    overflow-x: auto;
    padding: 0;
    scrollbar-width: none;
  }

  .woocommerce-MyAccount-navigation ul::-webkit-scrollbar { display: none; }

  .woocommerce-MyAccount-navigation ul li {
    flex-shrink: 0;
    border-top: none !important;
    border-right: 1px solid var(--color-border);
  }

  .woocommerce-MyAccount-navigation ul li a {
    border-left: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    padding: 0.75rem 1rem;
  }

  .woocommerce-MyAccount-navigation ul li a:hover,
  .woocommerce-MyAccount-navigation ul li.is-active a,
  .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--active a {
    border-left: none;
    border-bottom-color: var(--color-ink);
  }

  table.woocommerce-orders-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .woocommerce-Addresses {
    grid-template-columns: 1fr;
  }
}