/* =============================================================================
   WooCommerce "My Account" styling
   Scoped to .woocommerce-account so nothing else on the site is affected.
   Fixes Bootstrap conflicts (notably the .col-1 / .col-2 grid collision that
   crushes the Addresses columns) and brings the account pages on-brand.
   Brand: navy #0d2b4e, red #c8102e
   ============================================================================= */

/* ----- Left navigation (Bootstrap card + list-group) ----------------------- */
.woocommerce-account .woocommerce-MyAccount-navigation .card {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
  overflow: hidden;
}
.woocommerce-account .woocommerce-MyAccount-navigation .list-group-item {
  border: none;
  border-bottom: 1px solid #eef0f2;
  padding: 13px 18px;
  color: #333;
  font-size: 15px;
  background: #fff;
}
.woocommerce-account .woocommerce-MyAccount-navigation .list-group-item:last-child {
  border-bottom: none;
}
/* Kill the theme's forced 20px bottom margin so list-group items sit flush */
.woocommerce-account .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link {
  margin-bottom: 0 !important;
}
.woocommerce-account .woocommerce-MyAccount-navigation .list-group-item-action:hover,
.woocommerce-account .woocommerce-MyAccount-navigation .list-group-item-action:focus {
  background: #f6f7f9;
  color: #0d2b4e;
}
.woocommerce-account .woocommerce-MyAccount-navigation .list-group-item.active {
  background: #f2f4f7;      /* subtle highlight instead of Bootstrap's bold blue */
  color: #0d2b4e;
  font-weight: 600;
  border-left: 3px solid #0d2b4e;   /* navy accent on the active tab */
  padding-left: 15px;               /* compensate for the 3px accent border */
}

/* ----- Layout: sidebar + content card grid --------------------------------- */
/* Force the account wrapper + grid to fill the available width. Without this,
   the WooCommerce wrapper sizes to its content's intrinsic width — fine for the
   paragraph-based Dashboard, but it collapses on table-based pages (Orders) whose
   natural width is narrower than the page. */
.woocommerce-account .woocommerce,
.woocommerce-account .woocommerce-account-grid {
  width: 100%;
  max-width: 100%;
}
.woocommerce-account .woocommerce-account-grid {
  margin-top: 8px;
}
/* Pin the two column widths explicitly so a Bootstrap grid/col collision can't
   crush the sidebar (the .col-1/.col-2 problem, just in a different place). */
.woocommerce-account .woocommerce-account-grid > .row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;   /* cancel Bootstrap's negative gutters so the forced 100% can't overflow */
}
.woocommerce-account .woocommerce-account-sidebar {
  flex: 0 0 25% !important;
  max-width: 25% !important;
  width: 25% !important;
  min-width: 0;
}
.woocommerce-account .woocommerce-account-main {
  flex: 0 0 75% !important;
  max-width: 75% !important;
  width: 75% !important;
  min-width: 0;   /* let the column shrink; a wide table can't force it wider */
}
@media (max-width: 991px) {
  .woocommerce-account .woocommerce-account-sidebar,
  .woocommerce-account .woocommerce-account-main {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}
/* Neutralize Twenty Twenty-One's float-based account layout. TT1 floats the nav
   and content to 20-30% / 70% widths — but now they live INSIDE our Bootstrap
   grid columns, so those percentages are of the column, not the page, which
   crushes them. Make each fill its column instead. */
.woocommerce-account .woocommerce-account-sidebar .woocommerce-MyAccount-navigation {
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}
.woocommerce-account .woocommerce-account-main .woocommerce-MyAccount-content {
  float: none !important;
  width: 100% !important;
}
.woocommerce-account .woocommerce-account-main .card {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.woocommerce-account .woocommerce-account-main .card-body {
  padding: 28px 30px;
}

/* Tame Twenty Twenty-One's oversized typography inside the account content */
.woocommerce-account .woocommerce-MyAccount-content {
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}
.woocommerce-account .woocommerce-MyAccount-content h2 { font-size: 22px; margin: 0 0 16px; }
.woocommerce-account .woocommerce-MyAccount-content h3 { font-size: 18px; margin: 0 0 12px; }
.woocommerce-page.woocommerce-account .woocommerce-account-main .woocommerce-MyAccount-content p {
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 15px;
}

/* ----- Addresses: Bootstrap columns, each a subtle panel ------------------- */
.woocommerce-account .woocommerce-Addresses-intro {
  color: #666;
  margin-bottom: 30px !important;
}
.woocommerce-account .woocommerce-Address {
  float: none !important;   /* neutralize any theme float */
  margin-bottom: 16px;
}
.woocommerce-account .woocommerce-Address-inner {
  height: 100%;
  background: #f7f8fa;
  border: 1px solid #eceff3;
  border-radius: 8px;
  padding: 20px 22px;
}
.woocommerce-account .woocommerce-Address-title.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.woocommerce-account .woocommerce-Address-title.title h3 {
  margin: 0;
  font-size: 17px;
  color: #0d2b4e;
}
.woocommerce-account .woocommerce-Address-title.title .edit {
  flex: 0 0 auto;
  color: #0d2b4e;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 12px;
  border: 1px solid #cdd5e0;
  border-radius: 4px;
  transition: all .15s ease;
}
.woocommerce-account .woocommerce-Address-title.title .edit:hover {
  background: #0d2b4e;
  color: #fff;
  border-color: #0d2b4e;
}
.woocommerce-account .woocommerce-Address address {
  font-style: normal;
  line-height: 1.7;
  color: #333;
  margin: 0;
}

/* ----- Tables (Orders, Downloads) ------------------------------------------ */
.woocommerce-account .woocommerce-MyAccount-content table.shop_table,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-orders-table,
.woocommerce-account .woocommerce-MyAccount-content table.woocommerce-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 20px;
}
.woocommerce-account .woocommerce-MyAccount-content table th,
.woocommerce-account .woocommerce-MyAccount-content table td {
  padding: 12px 14px;
  text-align: left;
  border: none;
  border-bottom: 1px solid #ececec;
  background: transparent !important;   /* kills the stray partial-gray row */
  vertical-align: middle;
}
.woocommerce-account .woocommerce-MyAccount-content table thead th {
  border-bottom: 2px solid #0d2b4e;
  color: #0d2b4e;
  font-weight: 600;
}

/* Order status badges — subtle, informative, on-brand (not loud) */
.woocommerce-account .order-status-badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  background: #eceff3;
  color: #4a5568;
}
.woocommerce-account .order-status-badge--completed  { background: #e3f3e8; color: #1e6b3a; }
.woocommerce-account .order-status-badge--processing { background: #e6f1fb; color: #185fa5; }
.woocommerce-account .order-status-badge--on-hold    { background: #fdf3e0; color: #8a6d0b; }
.woocommerce-account .order-status-badge--pending,
.woocommerce-account .order-status-badge--pending-payment { background: #f0f1f3; color: #5f5e5a; }
.woocommerce-account .order-status-badge--cancelled,
.woocommerce-account .order-status-badge--failed     { background: #fbeaea; color: #a32d2d; }
.woocommerce-account .order-status-badge--refunded   { background: #eceff3; color: #444; }

/* Action buttons inside tables are compact */
.woocommerce-account .woocommerce-MyAccount-content table .button,
.woocommerce-account .woocommerce-MyAccount-content table .woocommerce-button {
  padding: 6px 14px;
  font-size: 14px;
  white-space: nowrap;
}

/* ----- WooCommerce notices (empty states, messages, errors) ---------------- */
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 18px;
  padding: 14px 18px;
  border: 1px solid #d6e0ec;
  border-left: 4px solid #0d2b4e;
  border-radius: 6px;
  background: #f3f6fb;
  color: #333;
  font-size: 15px;
  list-style: none;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error::before {
  content: none;   /* drop WooCommerce's default icon so our flex layout stays clean */
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-message {
  border-left-color: #1e6b3a;
  background: #eef7f0;
}
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-error {
  border-left-color: #a32d2d;
  background: #fbeaea;
}

/* ----- Buttons (View, Save changes, Add address, etc.) --------------------- */
/* The extra selectors + !important beat Twenty Twenty-One's .wp-element-button
   styling (grey with a black hover) that WooCommerce adds to these buttons. */
.woocommerce-account .woocommerce-MyAccount-content a.button,
.woocommerce-account .woocommerce-MyAccount-content a.woocommerce-button,
.woocommerce-account .woocommerce-MyAccount-content a.wp-element-button,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"],
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"] {
  display: inline-block;
  background: #0d2b4e !important;
  color: #fff !important;
  padding: 9px 18px;
  border: none !important;
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  line-height: 1.4;
  transition: background .15s ease;
}
.woocommerce-account .woocommerce-MyAccount-content a.button:hover,
.woocommerce-account .woocommerce-MyAccount-content a.woocommerce-button:hover,
.woocommerce-account .woocommerce-MyAccount-content a.wp-element-button:hover,
.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover,
.woocommerce-account .woocommerce-MyAccount-content input[type="submit"]:hover {
  background: #09203a !important;
  color: #fff !important;
}

/* ----- Form fields --------------------------------------------------------- */
.woocommerce-account .woocommerce-MyAccount-content p.form-row,
.woocommerce-account .woocommerce-MyAccount-content .woocommerce-form-row {
  margin-bottom: 16px;
}
.woocommerce-account .woocommerce-MyAccount-content label {
  display: block;
  margin-bottom: 6px;
  color: #444;
  font-size: 15px !important;
  font-weight: 500;
  line-height: 1.4;
}
.woocommerce-account .woocommerce-MyAccount-content input[type="text"],
.woocommerce-account .woocommerce-MyAccount-content input[type="email"],
.woocommerce-account .woocommerce-MyAccount-content input[type="password"],
.woocommerce-account .woocommerce-MyAccount-content input[type="tel"],
.woocommerce-account .woocommerce-MyAccount-content select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 15px;
}
.woocommerce-account .woocommerce-MyAccount-content input:focus,
.woocommerce-account .woocommerce-MyAccount-content select:focus {
  outline: none;
  border-color: #0d2b4e;
  box-shadow: 0 0 0 2px rgba(13, 43, 78, .12);
}

/* ----- Account details form ------------------------------------------------ */
/* First/Last name: clean two-column flex (no Bootstrap negative-margin gutters,
   which pushed these wider than the full-width fields below). */
.woocommerce-account .woocommerce-EditAccountForm > .row {
  display: flex;
  flex-wrap: wrap;
  gap: 0 24px;
  margin: 0;
}
.woocommerce-account .woocommerce-EditAccountForm .form-row-first,
.woocommerce-account .woocommerce-EditAccountForm .form-row-last {
  flex: 1 1 0;
  min-width: 0;
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
}
@media (max-width: 767px) {
  .woocommerce-account .woocommerce-EditAccountForm > .row {
    display: block;
  }
}
/* Password change grouped in a clean fieldset */
.woocommerce-account .woocommerce-EditAccountForm fieldset {
  margin: 10px 0 0;
  padding: 22px 0 0;
  border: none;
  border-top: 1px solid #eceff3;
}
.woocommerce-account .woocommerce-EditAccountForm legend {
  width: auto;
  padding: 0;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
  color: #0d2b4e;
}
/* Display-name helper text */
.woocommerce-account .woocommerce-EditAccountForm #account_display_name_description {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #777;
}
/* Required asterisk */
.woocommerce-account .woocommerce-MyAccount-content .required {
  color: #c8102e;
  border: none;
  text-decoration: none;
}
/* Password fields: keep the input full width and the show/hide toggle tidy */
.woocommerce-account .woocommerce-EditAccountForm .password-input,
.woocommerce-account .woocommerce-EditAccountForm .woocommerce-password-input {
  display: block;
  position: relative;
  width: 100%;
}
.woocommerce-account .woocommerce-EditAccountForm .password-input input {
  width: 100%;
  padding-right: 44px;   /* leave room for the toggle */
}
.woocommerce-account .woocommerce-EditAccountForm .show-password-input,
.woocommerce-account .woocommerce-EditAccountForm .password-input button {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  padding: 6px;
  border: none;
  background: transparent !important;
  color: #666 !important;
  cursor: pointer;
  line-height: 0;
}

/* ----- Responsive: stack the address columns on small screens -------------- */
@media (max-width: 768px) {
  .woocommerce-account .woocommerce-Address {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ----- My Artwork tab ------------------------------------------------------ */
.woocommerce-account .ets-artwork-grid { margin-top: 10px; }
.woocommerce-account .ets-artwork-col { margin-bottom: 22px; }
.woocommerce-account .ets-artwork-card {
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
}
.woocommerce-account .ets-artwork-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  background: #f4f6fa;
  overflow: hidden;
}
.woocommerce-account .ets-artwork-img { max-width: 100%; max-height: 150px; object-fit: contain; }
.woocommerce-account .ets-artwork-file {
  font-size: 20px; font-weight: 700; color: #8a9098; letter-spacing: 1px;
}
.woocommerce-account .ets-artwork-card .card-body { padding: 14px 16px; }
.woocommerce-account .ets-artwork-id { font-weight: 600; color: #0d2b4e; font-size: 15px; }
.woocommerce-account .ets-artwork-date { color: #777; font-size: 13px; margin-bottom: 12px; }
.woocommerce-account .ets-artwork-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.woocommerce-account .ets-artwork-view {
  color: #0d2b4e; font-weight: 600; font-size: 14px; text-decoration: none;
}
.woocommerce-account .ets-artwork-view:hover { text-decoration: underline; }
.woocommerce-account .ets-artwork-delete-form { margin: 0; }
.woocommerce-account .ets-artwork-delete {
  background: transparent !important;
  color: #a32d2d !important;
  border: 1px solid #e0b4b4 !important;
  border-radius: 4px !important;
  padding: 4px 12px !important;
  font-size: 13px !important;
  font-weight: 600;
  cursor: pointer;
}
.woocommerce-account .ets-artwork-delete:hover {
  background: #a32d2d !important;
  color: #fff !important;
  border-color: #a32d2d !important;
}
.woocommerce-account .ets-artwork-locked {
  font-size: 12px; color: #8a6d0b; background: #fdf3e0;
  padding: 4px 10px; border-radius: 20px; white-space: nowrap;
}