/* ============================================
   MY ACCOUNT THEME — Login, Register, Lost Password,
   Dashboard, Orders, Addresses, Account Details, Downloads
   ============================================
   Restyles WooCommerce's classic (non-block) My Account templates to
   match the Berry design language (see assets/css/berry-reference.css /
   woo-blocks-theme.css for the same treatment applied to the block
   Checkout/Cart). Unlike Checkout/Cart, My Account renders via classic
   PHP templates (wp-content/plugins/woocommerce/templates/myaccount/*),
   so this targets WooCommerce core's stable classic class names
   (.woocommerce-MyAccount-*, .woocommerce-Address, .shop_table, etc.)
   rather than wc-block-* Blocks markup.

   Scoping: enqueued only on is_account_page() (see functions.php), and
   every selector below is namespaced under body.woocommerce-account so
   this file is inert anywhere else even if accidentally loaded elsewhere.
   ============================================ */

body.woocommerce-account {
  --berry-bg:          #f7f5f2;
  --berry-surface:     #ffffff;
  --berry-surface-2:   #f2f0ec;
  --berry-border:      rgba(0,0,0,0.08);
  --berry-border-2:    rgba(0,0,0,0.14);

  --berry-purple:      #5b21b6;
  --berry-purple-dark: #3b0768;
  --berry-purple-soft: #9c50ff;
  --berry-grad-brand:  linear-gradient(135deg, #8d5bf5 0%, #d347ee 100%);
  --berry-mint:        #00f08b;

  --berry-text:        #1a0a1e;
  --berry-text-muted:  #5c4466;
  --berry-text-dim:    #a08ab0;

  --berry-shadow-sm:   0 2px 8px rgba(0,0,0,0.07);
  --berry-shadow-md:   0 8px 24px rgba(0,0,0,0.10);

  --berry-radius-card: 20px;
  --berry-radius-field:12px;
  --berry-radius-pill: 50px;
  --berry-radius-xl:   24px;

  --berry-font-display:'Space Grotesk', system-ui, sans-serif;
  --berry-font-sans:   'Inter', system-ui, sans-serif;

  background-color: var(--berry-bg);
}

body.woocommerce-account .wp-site-blocks,
body.woocommerce-account main {
  background-color: var(--berry-bg);
  font-family: var(--berry-font-sans);
  color: var(--berry-text);
  padding-bottom: 48px;
}

body.woocommerce-account .wp-block-post-title,
body.woocommerce-account h1.entry-title {
  font-family: var(--berry-font-display);
  color: var(--berry-purple-dark);
  font-weight: 700;
}

/* ---------- ACCOUNT SHELL (nav tile menu, then a SEPARATE content card
   below it) ----------
   Was a two-column layout (240px sidebar list + content card side by
   side) — nav restyled per request into the same tile-card language the
   dashboard's own quick-stats already use (Любими/Поръчки/За преглед —
   see inc/account-dashboard.php), so "Табло/Поръчки/Изтегляния/Адреси/
   Детайли на профила/Излизане" reads as one consistent tile menu instead
   of a plain underlined link list. A brief follow-up merged nav and
   content into one single continuous card, but that made clicking a menu
   tile just grow the SAME box taller with the new page's content stacked
   underneath instead of feeling like it opened its own view — reverted
   that specific part per request ("it should open like separately not
   just come down below all the things"): nav is its own card again, the
   page you navigate to (Orders table, Address form, the Dashboard's own
   greeting+stats, ...) renders in its own separate card below it, same
   as core's original two-box structure, just with the new tile design.
   :not(:has(#customer_login)) — this stacked layout is only meant for
   the LOGGED-IN view; logged out, .woocommerce instead wraps the login/
   register tab bar + #customer_login, untouched by this rule. */
body.woocommerce-account .woocommerce:not(:has(#customer_login)) {
  display: flex;
  flex-direction: column;
  /* No `gap` here on purpose. Was 24px, back when nav and content could
     both be simultaneously visible (two separate stacked cards). That
     stopped being true once (a) the nav callback skips rendering the
     <nav> entirely on every sub-page (inc/account-dashboard.php — only
     the Dashboard shows it) and (b) the Dashboard's own greeting moved
     INSIDE the nav card, leaving .woocommerce-MyAccount-content genuinely
     empty there (collapsed via display:none below) — so exactly one of
     the two is ever visible at a time now, never both, and `gap` has
     nothing left to separate. Worse, it was actively causing a bug: with
     content hidden via display:none, this gap still reserved ~24-48px of
     empty space above the visible card instead of collapsing to nothing
     (confirmed live via getBoundingClientRect — removing gap entirely,
     independent of root cause, was what actually closed it). */
}

body.woocommerce-account .woocommerce-MyAccount-navigation {
  /* WooCommerce core's own default stylesheet still styles this as the
     LEFT column of an old floated two-column layout (float:left; a ~30%
     width), left over from before this became a flex-stacked card design.
     A flex item ignores `float` itself, but the explicit % `width` core
     sets is NOT ignored — it beats `align-items:stretch`, which only
     applies when an item's cross-axis size is auto — so without this
     reset the card only rendered ~30% as wide as it should, looking cut
     off on the right (the actual bug behind "this white square its like
     cut off"). float:none + width:100% forces it back to auto/stretch
     sizing, filling the row like content's card does. */
  float: none;
  width: 100%;
  background: var(--berry-surface);
  border-radius: var(--berry-radius-card);
  box-shadow: var(--berry-shadow-sm);
  border: 1px solid var(--berry-border);
  padding: 20px;
}

body.woocommerce-account .woocommerce-MyAccount-content,
body.woocommerce-account .woocommerce-MyAccount-navigation ~ p {
  /* Same core-CSS leftover as nav above (float:right; ~68% width) —
     reset for the same reason. */
  float: none;
  width: 100%;
  min-width: 0;
  background: var(--berry-surface);
  border-radius: var(--berry-radius-card);
  box-shadow: var(--berry-shadow-sm);
  border: 1px solid var(--berry-border);
  padding: 28px 32px;
}

@media (max-width: 782px) {
  body.woocommerce-account .woocommerce-MyAccount-content {
    padding: 20px;
  }
}

/* woocommerce/myaccount/dashboard.php (theme override) no longer prints
   anything into this div on the Dashboard — the old greeting/description
   paragraphs were removed — so .woocommerce-MyAccount-content is always
   empty there (just WC's own notices wrapper). Without this it still
   rendered as its own full card (background/border/shadow/padding),
   showing as a blank white box between the search bar and the tile grid.
   Collapsed to nothing ONLY on the Dashboard (.berry-account-is-dashboard,
   set via body_class in inc/account-dashboard.php) — every sub-page
   (Orders, Addresses, ...) has real content in this div and keeps its
   card exactly as before. */
body.berry-account-is-dashboard.woocommerce-account .woocommerce-MyAccount-content {
  display: none;
}

/* ---------- DASHBOARD GREETING ----------
   Lives INSIDE the nav card itself (see berry_render_account_menu() in
   inc/account-dashboard.php — a <p class="berry-account-greeting"> right
   before .berry-account-tiles), not in its own card, per request ("this
   greeting should come and then directly the whole dashboard no spaces
   inbetween") — a tight margin here, not a second bordered box with a
   gap before it, is what actually satisfies "no spaces inbetween". */
body.woocommerce-account .berry-account-greeting {
  margin: 0 0 16px;
  font-size: 15px;
  color: var(--berry-text-muted);
}
body.woocommerce-account .berry-account-greeting strong {
  color: var(--berry-text);
}

/* Profile-overview stats strip (order count / lifetime spend / Berry-ta
   points) — see berry_render_account_menu() in inc/account-dashboard.php
   for why this lives here, right after the greeting, rather than in
   .woocommerce-MyAccount-content (deliberately display:none on the
   Dashboard — see that rule further down this file). */
/* Matches the reference dashboard's .account-stats/.stat-card exactly
   (gradient-clipped number, bordered surface-2 card) — see
   https://www.aquaphor.bg/promo/Berry_store_7/account.html, fetched and
   compared directly against its own inline <style> block rather than
   guessed. */
body.woocommerce-account .berry-account-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 20px;
}

body.woocommerce-account .berry-account-stat {
  background: var(--berry-surface-2, #f2f0ec);
  border: 1.5px solid var(--berry-border);
  border-radius: var(--berry-radius-card);
  padding: 16px 8px;
  text-align: center;
}

body.woocommerce-account .berry-account-stat__value {
  display: block;
  font-family: var(--berry-font-display);
  font-size: 22px;
  font-weight: 800;
  /* Solid, not gradient-clipped — checked directly against the reference's
     own rendered page (not just its CSS source) after an earlier gradient
     guess turned out visually indistinguishable from solid on numbers
     this short anyway: it really does render solid purple there. */
  color: var(--berry-purple-soft);
}

body.woocommerce-account .berry-account-stat__label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--berry-text-dim);
  margin-top: 3px;
}

/* Gender radios on the profile form — inc/account-profile-fields.php,
   styled to match the reference dashboard's inline gender-radio row
   exactly (see that file's own comment for the source URL). */
body.woocommerce-account .berry-gender-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}

body.woocommerce-account .berry-gender-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--berry-text-muted);
}

body.woocommerce-account .berry-gender-option input[type="radio"] {
  accent-color: var(--berry-purple-soft);
}

/* "Известия" (notification preferences) form — inc/account-notifications.php. */
body.woocommerce-account .berry-notifications-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
}

body.woocommerce-account .berry-notifications-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--berry-bg);
  border-radius: var(--berry-radius-field);
  cursor: pointer;
}

body.woocommerce-account .berry-notifications-toggle input[type="checkbox"] {
  margin-top: 3px;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  accent-color: var(--berry-purple-soft);
}

body.woocommerce-account .berry-notifications-toggle span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.woocommerce-account .berry-notifications-toggle strong {
  color: var(--berry-text);
  font-size: 14px;
}

body.woocommerce-account .berry-notifications-toggle small {
  color: var(--berry-text-muted);
  font-size: 12.5px;
}

body.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
  color: var(--berry-text-muted);
  line-height: 1.7;
}
body.woocommerce-account .woocommerce-MyAccount-content mark {
  background: none;
  color: var(--berry-purple);
  font-weight: 700;
}
body.woocommerce-account .woocommerce-MyAccount-content a:not(.button) {
  color: var(--berry-purple);
  text-decoration: underline;
}

/* ---------- SUB-PAGE BACK ARROW + TITLE ----------
   See inc/account-dashboard.php — reuses .berry-page-head-row/
   .berry-breadcrumb-back from berry-reference.css as-is (that's a
   site-wide, non-account-scoped pattern), just needs its own title
   styling here since My Account's classic templates don't otherwise
   print a heading for this. */
body.woocommerce-account .berry-account-page-head-row {
  margin-bottom: 20px;
}
body.woocommerce-account .berry-account-page-title {
  font-family: var(--berry-font-display);
  color: var(--berry-purple-dark);
  font-weight: 700;
  font-size: 22px;
  margin: 0;
}

/* ---------- DASHBOARD QUICK TILES ----------
   Любими / Поръчки / За преглед / Купи отново — see
   inc/account-dashboard.php. Same "small icon-badge card" language the
   homepage category carousel already uses, so it reads as one consistent
   pattern rather than a one-off. */
body.woocommerce-account .berry-account-tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 24px;
}

@media (min-width: 480px) {
  body.woocommerce-account .berry-account-tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}

body.woocommerce-account .berry-account-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-radius: var(--berry-radius-field);
  /* Subtle purple-tinted gradient per request ("match the theme") — same
     135deg direction as --berry-grad-brand (the bold purple-to-magenta
     used for buttons/header) but far lighter, so it reads as a soft tint
     on a card rather than competing with the brand gradient itself. */
  background: linear-gradient(135deg, #faf8ff 0%, #f1e8ff 100%);
  border: 1px solid var(--berry-border);
  text-decoration: none !important;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

body.woocommerce-account .berry-account-tile:hover {
  border-color: var(--berry-purple-soft);
  transform: translateY(-2px);
  box-shadow: var(--berry-shadow-sm);
}

/* Current page's own tile (Табло on the Dashboard, Поръчки on the Orders
   list, ...) — light purple fill instead of the plain --berry-bg every
   other tile gets, same "this is where you are" convention the old
   gradient-pill nav previously used, just restyled to match the tile
   language instead of a solid-fill pill. */
body.woocommerce-account .berry-account-tile.is-active {
  background: linear-gradient(135deg, #f3ebff 0%, #e6d4ff 100%);
  border-color: var(--berry-purple);
}

/* Излизане (logout) — its own red "danger" accent instead of the shared
   purple icon badge, so it still reads as a distinct/destructive action
   rather than just another nav item, even though it now shares the exact
   same tile markup as everything else. */
body.woocommerce-account .berry-account-tile--danger .berry-account-tile__icon {
  background: rgba(239,68,68,0.1);
  color: #ef4444;
}
body.woocommerce-account .berry-account-tile--danger:hover {
  border-color: #ef4444;
}

/* Табло / Изтегляния — hidden per request, not removed from inc/account-
   dashboard.php (kept intentionally so the PHP/logic stays untouched and
   this is trivially reversible). Targeted by href rather than nth-child:
   the Изтегляния tile only renders at all when the customer has a
   downloadable purchase (see berry_render_account_menu()'s isset() guard),
   so its position in the grid isn't fixed — an nth-child rule would hide
   the wrong tile whenever that guard changes what's rendered. Both hrefs
   are stable regardless (wc_get_page_permalink('myaccount') / wc_get_
   endpoint_url('downloads') always resolve to .../my-account/ and
   .../downloads/). */
body.woocommerce-account .berry-account-tile[href$="/my-account/"],
body.woocommerce-account .berry-account-tile[href$="/downloads/"] {
  display: none;
}

body.woocommerce-account .berry-account-tile__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f6f0ff;
  color: var(--berry-purple);
}

body.woocommerce-account .berry-account-tile__label {
  font-weight: 700;
  color: var(--berry-text);
  font-size: 14px;
}

body.woocommerce-account .berry-account-tile__status {
  font-size: 12.5px;
  color: var(--berry-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- TABLES (orders, downloads, order-details) ---------- */
body.woocommerce-account table.shop_table,
body.woocommerce-account table.woocommerce-orders-table,
body.woocommerce-account table.woocommerce-table--order-details {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 20px;
}

body.woocommerce-account table.shop_table thead th {
  color: var(--berry-text-dim);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 700;
  text-align: left;
  border-bottom: 1px solid var(--berry-border);
  padding: 10px 12px;
}

body.woocommerce-account table.shop_table td,
body.woocommerce-account table.shop_table th {
  padding: 14px 12px;
  border-bottom: 1px solid var(--berry-border);
}

body.woocommerce-account table.shop_table tbody tr:last-child td,
body.woocommerce-account table.shop_table tbody tr:last-child th {
  border-bottom: none;
}

body.woocommerce-account table.shop_table tfoot th,
body.woocommerce-account table.shop_table tfoot td {
  border-bottom: none;
  border-top: 1px solid var(--berry-border);
}

body.woocommerce-account table.shop_table tfoot tr:last-child th,
body.woocommerce-account table.shop_table tfoot tr:last-child td {
  color: var(--berry-purple-dark);
  font-weight: 800;
  font-size: 1.05em;
}

/* Order status text (e.g. "Задържана" / "Завършена") as a pill */
body.woocommerce-account .woocommerce-orders-table__cell-order-status {
  font-weight: 700;
}

body.woocommerce-account .woocommerce-orders-table__row--status-completed .woocommerce-orders-table__cell-order-status,
body.woocommerce-account .woocommerce-orders-table__row--status-processing .woocommerce-orders-table__cell-order-status {
  color: #0d9488;
}
body.woocommerce-account .woocommerce-orders-table__row--status-on-hold .woocommerce-orders-table__cell-order-status,
body.woocommerce-account .woocommerce-orders-table__row--status-pending .woocommerce-orders-table__cell-order-status {
  color: var(--berry-gold, #b8860b);
}
body.woocommerce-account .woocommerce-orders-table__row--status-cancelled .woocommerce-orders-table__cell-order-status,
body.woocommerce-account .woocommerce-orders-table__row--status-failed .woocommerce-orders-table__cell-order-status,
body.woocommerce-account .woocommerce-orders-table__row--status-refunded .woocommerce-orders-table__cell-order-status {
  color: #ef4444;
}

/* Single order view: "Order #35 was placed on… and is now Задържана." */
body.woocommerce-account mark.order-number,
body.woocommerce-account mark.order-date,
body.woocommerce-account mark.order-status {
  background: none;
  color: var(--berry-purple);
  font-weight: 700;
}

body.woocommerce-account .woocommerce-order-details__title,
body.woocommerce-account .woocommerce-column__title {
  font-family: var(--berry-font-display);
  color: var(--berry-purple-dark);
  font-weight: 700;
  margin-bottom: 12px;
}

/* Orders list — real per-order cards (woocommerce/myaccount/orders.php,
   a theme override of core's <table>-based template) rather than CSS
   dressing up a table. One layout for every width: it's a flex row that
   wraps, not a separate "mobile view" that has to be kept in sync with a
   desktop one, so there's no @media split here the way the table-based
   version needed. Uses this section's own shadow/radius tokens — same
   language as the tile menu and review cards, not a one-off style. */
.berry-orders-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.berry-order-card {
  background: var(--berry-surface);
  border: 1px solid var(--berry-border);
  border-radius: var(--berry-radius-card);
  box-shadow: var(--berry-shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.berry-order-card:hover {
  box-shadow: var(--berry-shadow-md);
  transform: translateY(-2px);
}

/* Two-tone card — a tinted header strip over a plain white body, matching
   the reference dashboard's own order-history cards exactly (a single
   flat surface with a thin divider read noticeably flatter side by
   side). border-bottom removed since the color change itself is now the
   separator — a line on top of that read as a double border. */
.berry-order-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 24px;
  background: var(--berry-surface-2, #f2f0ec);
}

.berry-order-card__id {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.berry-order-card__number {
  font-family: var(--berry-font-display);
  font-size: 1.15em;
  font-weight: 700;
  color: var(--berry-purple-dark);
  text-decoration: none;
}

.berry-order-card__number:hover {
  color: var(--berry-purple);
  text-decoration: underline;
}

.berry-order-card__date {
  font-size: 12.5px;
  color: var(--berry-text-dim);
}

/* A real colored badge instead of core's plain tinted text (the earlier
   pass just recolored the status word itself — still just text sitting
   in a row, nothing to draw the eye). Same status→color mapping this
   file already used for the plain-text version, just as a filled pill. */
.berry-order-card__status {
  flex-shrink: 0;
  padding: 5px 14px;
  border-radius: var(--berry-radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.berry-order-card__status--completed,
.berry-order-card__status--processing {
  background: rgba(13,148,136,0.12);
  color: #0d9488;
}

.berry-order-card__status--on-hold,
.berry-order-card__status--pending {
  background: rgba(184,134,11,0.12);
  color: var(--berry-gold, #b8860b);
}

.berry-order-card__status--cancelled,
.berry-order-card__status--failed,
.berry-order-card__status--refunded {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
}

.berry-order-card__body {
  background: var(--berry-surface);
  padding: 20px 24px;
}

/* Product thumbnails — square, bordered, evenly spaced, matching the
   reference exactly. Wraps to a 2nd line instead of shrinking below a
   legible size once an order has enough items to overflow one row (same
   reasoning as the account tab bar's own flex-wrap fix elsewhere in this
   project: a floor on size, never an invisible squeeze). */
.berry-order-card__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.berry-order-card__thumb {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--berry-radius-field, 10px);
  border: 1px solid var(--berry-border);
  background: var(--berry-surface);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.berry-order-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.berry-order-card__thumb--more {
  background: var(--berry-surface-2, #f2f0ec);
  color: var(--berry-text-dim);
  font-size: 12.5px;
  font-weight: 700;
}

.berry-order-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.berry-order-card__total {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.berry-order-card__total-amount {
  font-family: var(--berry-font-display);
  font-size: 1.3em;
  font-weight: 700;
  color: var(--berry-text);
}

.berry-order-card__total-items {
  font-size: 12.5px;
  color: var(--berry-text-dim);
}

.berry-order-card__actions {
  display: flex;
  gap: 10px;
}

/* .button/.woocommerce-button already get the mint-pill treatment from
   this file's global button rule (further down) — nothing extra needed
   here beyond layout, so the "Преглед" action matches every other button
   in this section automatically instead of a second, slightly-different
   button style living only on this page. */
.berry-order-card__actions .button {
  padding: 10px 22px;
}

/* ---------- ADDRESSES ---------- */
body.woocommerce-account .woocommerce-Addresses {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

body.woocommerce-account .woocommerce-Address {
  flex: 1 1 240px;
  border: 1.5px solid var(--berry-border-2);
  border-radius: var(--berry-radius-field);
  padding: 18px 20px;
}

body.woocommerce-account .woocommerce-Address-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

body.woocommerce-account .woocommerce-Address-title h2 {
  font-family: var(--berry-font-display);
  color: var(--berry-purple-dark);
  font-size: 1.05em;
}

body.woocommerce-account .woocommerce-Address-title .edit {
  color: var(--berry-purple);
  font-weight: 600;
  font-size: 13px;
  text-decoration: underline;
}

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

/* ---------- FORMS (edit-account, edit-address) ---------- */
body.woocommerce-account form .form-row {
  margin-bottom: 16px;
}

body.woocommerce-account form label {
  display: block;
  margin-bottom: 6px;
  color: var(--berry-text-muted);
  font-weight: 600;
  font-size: 13.5px;
}

/* WooCommerce core's own woocommerce.css ships
   `.woocommerce form .form-row .input-text, .woocommerce form .form-row select`
   — 3 classes, out-specifying the 2-class selector above — so, same
   rationale/precedent as woo-blocks-theme.css's form-field override,
   `!important` is used here deliberately and narrowly (just these
   field-appearance properties, not a general habit). */
body.woocommerce-account form .woocommerce-Input,
body.woocommerce-account form select,
body.woocommerce-account form textarea {
  width: 100%;
  border-radius: var(--berry-radius-field) !important;
  border: 1.5px solid var(--berry-border-2) !important;
  background-color: var(--berry-bg) !important;
  font-family: var(--berry-font-sans);
  color: var(--berry-text);
  padding: 11px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.woocommerce-account form .woocommerce-Input:focus,
body.woocommerce-account form select:focus,
body.woocommerce-account form textarea:focus {
  border-color: var(--berry-purple-soft) !important;
  box-shadow: 0 0 0 3px rgba(156,80,255,0.15);
  outline: none;
}

body.woocommerce-account form fieldset {
  border: none;
  border-top: 1px solid var(--berry-border);
  margin-top: 20px;
  padding-top: 16px;
}
body.woocommerce-account form fieldset legend {
  font-family: var(--berry-font-display);
  color: var(--berry-purple-dark);
  font-weight: 700;
  padding-bottom: 8px;
}

body.woocommerce-account .select2-container .select2-selection--single {
  border-radius: var(--berry-radius-field) !important;
  border: 1.5px solid var(--berry-border-2) !important;
  height: auto !important;
  padding: 6px 4px !important;
}

/* ---------- BUTTONS (Save, View, Pay, Cancel, Download, Browse products…) ---------- */
/* Scoped to .woocommerce (not body) so this doesn't also repaint the
   global header's search submit button, which lives outside that wrapper
   but is still a `button[type="submit"]` on every page including this one. */
body.woocommerce-account .woocommerce .button,
body.woocommerce-account .woocommerce button[type="submit"],
body.woocommerce-account .woocommerce input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: var(--berry-radius-pill);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: var(--berry-font-sans);
  border: none;
  cursor: pointer;
  background: var(--berry-mint);
  color: var(--berry-purple);
  box-shadow: 0 8px 15px rgba(0,240,139,0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
  white-space: nowrap;
}

body.woocommerce-account .woocommerce .button:hover,
body.woocommerce-account .woocommerce button[type="submit"]:hover,
body.woocommerce-account .woocommerce input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,240,139,0.4);
  filter: brightness(1.03);
  color: var(--berry-purple);
}

/* "Регистриране" — the button itself is `display:inline-flex` (sizes to
   its own text, not the row), and its wrapper is just a plain
   `<p class="woocommerce-form-row form-row">` (the exact same generic
   class every other field row uses — WC's own form-login.php template,
   no unique hook to target) with no centering of its own, so the button
   sits at the LEFT edge with empty space to its right — while the
   Google/Facebook social-login row right below it (.berry-social-
   login__btn) IS width:100%, so the two visually don't line up
   (confirmed live via getBoundingClientRect: the button's right edge
   landed ~63px short of the social buttons' own right edge, despite both
   starting from nearly the same left edge — reads as "the button is over
   on the left", not lined up with everything under it). :has() picks out
   specifically the row containing the register button (not every other
   form-row) without needing a template override. Centering the row
   itself, not stretching the button to match, per request ("centre the
   registrate button with the other things"). */
body.woocommerce-account .woocommerce-form-register p.form-row:has(button[name="register"]) {
  display: flex;
  justify-content: center;
}

/* Destructive actions (Cancel order) get the quieter outline treatment
   instead of the mint CTA, same convention as "Return to cart" on
   Checkout — a cancel action shouldn't look like the primary CTA. */
body.woocommerce-account .woocommerce .button.cancel {
  background: transparent;
  border: 1.5px solid var(--berry-border-2);
  color: #ef4444;
  box-shadow: none;
}
body.woocommerce-account .woocommerce .button.cancel:hover {
  border-color: #ef4444;
  background: rgba(239,68,68,0.06);
  box-shadow: none;
}

/* ---------- NOTICES ---------- */
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-info {
  border-radius: var(--berry-radius-field);
  box-shadow: var(--berry-shadow-sm);
  background: var(--berry-surface);
  padding: 14px 18px;
  margin-bottom: 20px;
  list-style: none;
  /* WooCommerce core's own woocommerce.css puts a 3px colored border-TOP
     on these (blue for -info, green for -message, red for -error) that we
     never touch here — we only style border-LEFT below for the single
     accent-bar look used everywhere else in this design. Left alone, that
     unstyled top border combines with our rounded corners + left accent to
     render a smeared two-color gradient right at the top-left corner
     (reported as a "strange" purple-to-blue blend on the empty Orders/
     Downloads notice). Killing the core top border leaves just our clean
     single left accent. */
  border-top: none;
}
body.woocommerce-account .woocommerce-message {
  border-left: 4px solid var(--berry-mint);
}
body.woocommerce-account .woocommerce-error {
  border-left: 4px solid #ef4444;
}
body.woocommerce-account .woocommerce-info {
  border-left: 4px solid var(--berry-purple-soft);
}

/* WooCommerce core also prepends an icon glyph via ::before (font-family:
   WooCommerce, e.g. content:"\e028"), absolutely positioned assuming the
   core template's wide 3.5em left padding. We use a slim 18px padding
   instead (the left accent bar already communicates status), so that icon
   lands overlapping the notice text — and shows as a "missing glyph" box
   when the icon font doesn't load. Status is already conveyed by the
   accent bar, so just drop the icon rather than fighting its positioning. */
body.woocommerce-account .woocommerce-message::before,
body.woocommerce-account .woocommerce-error::before,
body.woocommerce-account .woocommerce-info::before {
  content: none;
}
body.woocommerce-account .woocommerce-message .button,
body.woocommerce-account .woocommerce-error .button {
  margin-left: 12px;
}

/* ---------- LOGIN / REGISTER / LOST PASSWORD ----------
   These render on the same My Account page/template when logged out
   (form-login.php, form-lost-password.php), so the same card shell
   above already wraps them via .woocommerce (u-columns col2-set when
   registration is enabled). Field-level styling reuses the rules above;
   this section covers the login-specific bits (checkbox, lost-password
   link, password toggle). */
body.woocommerce-account .woocommerce-form-login,
body.woocommerce-account .woocommerce-form-register,
body.woocommerce-account .woocommerce-ResetPassword {
  background: var(--berry-surface);
  border-radius: var(--berry-radius-card);
  box-shadow: var(--berry-shadow-sm);
  border: 1px solid var(--berry-border);
  padding: 28px 32px;
  flex: 1 1 320px;
}

body.woocommerce-account .u-columns.col2-set {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

/* Only one of .u-column1/.u-column2 is visible at a time — toggled via the
   [hidden] attribute by assets/js/my-account-tabs.js — so the flex item
   left standing grows to fill the row on its own. */
body.woocommerce-account .u-columns.col2-set [hidden] {
  display: none !important;
}

/* Tab bar injected by my-account-tabs.js right before #customer_login,
   switching between the Login and Register cards instead of showing both
   permanently side by side. Named berry-auth-tabs/-tab (NOT berry-account-
   tabs/-tab) — this used to share those class names with the unrelated
   logged-in dashboard tab bar (account-hero.css), and this rule's own
   max-width:420px was silently capping that dashboard tab row's width no
   matter what was set on the dashboard side, across multiple rounds of
   fixes there that all targeted the wrong element entirely. Renamed here
   instead of on the dashboard side since this is the smaller, older, more
   isolated of the two features (one JS file, no PHP). */
body.woocommerce-account .berry-auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  max-width: 420px;
}
body.woocommerce-account .berry-auth-tab {
  flex: 1 1 auto;
  padding: 12px 20px;
  border-radius: var(--berry-radius-pill);
  border: 1.5px solid var(--berry-border-2);
  background: var(--berry-surface);
  color: var(--berry-text-muted);
  font-family: var(--berry-font-sans);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body.woocommerce-account .berry-auth-tab:hover {
  border-color: var(--berry-purple-soft);
  color: var(--berry-purple);
}
body.woocommerce-account .berry-auth-tab.is-active {
  background: var(--berry-purple);
  border-color: var(--berry-purple);
  color: #fff;
}

body.woocommerce-account .woocommerce-form-login__rememberme {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0;
  color: var(--berry-text-muted);
  font-weight: 500;
}

body.woocommerce-account .woocommerce-LostPassword,
body.woocommerce-account .woocommerce-form-login p:has(> a.lost_password) {
  margin-top: 14px;
}
body.woocommerce-account .woocommerce-LostPassword a,
body.woocommerce-account a.lost_password {
  color: var(--berry-purple);
  font-weight: 600;
  text-decoration: underline;
}

body.woocommerce-account .show-password-input {
  color: var(--berry-text-dim);
}

/* ---------- SOCIAL LOGIN (Google / Facebook) ----------
   Injected by inc/social-login.php into both the login form
   (woocommerce_login_form_end) and the register form
   (woocommerce_register_form_end) — see that file's doc comment for the
   OAuth flow. Buttons render as real links (.berry-social-login__btn) when
   a provider is configured, or as an inert disabled <button> with the same
   class + .is-disabled when it isn't (empty Client ID/Secret). */
body.woocommerce-account .berry-social-login {
  margin-top: 20px;
}

body.woocommerce-account .berry-social-login__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 16px;
  color: var(--berry-text-dim);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
body.woocommerce-account .berry-social-login__divider::before,
body.woocommerce-account .berry-social-login__divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--berry-border);
}

body.woocommerce-account .berry-social-login__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 11px 20px;
  margin-bottom: 10px;
  border-radius: var(--berry-radius-pill);
  border: 1.5px solid var(--berry-border-2);
  background: var(--berry-surface);
  color: var(--berry-text);
  font-family: var(--berry-font-sans);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
body.woocommerce-account a.berry-social-login__btn:hover {
  border-color: var(--berry-purple-soft);
  background: #f6f0ff;
  color: var(--berry-text);
  transform: translateY(-1px);
}
body.woocommerce-account .berry-social-login__btn svg {
  flex: 0 0 auto;
}

/* Unconfigured provider: same shape, visibly inert — no href/click
   behavior at all (real <button disabled>), so there's no broken-flow risk
   while the layout stays inspectable. See inc/social-login.php doc comment
   for why this is shown instead of just omitting the button entirely. */
body.woocommerce-account .berry-social-login__btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================
   ACCOUNT AVATAR — upload widget (top of "Детайли на профила") + the
   pan/zoom crop modal. See inc/avatar-upload.php / assets/js/avatar-
   upload.js. The modal isn't scoped under body.woocommerce-account like
   the rest of this file (it's `position:fixed`, appended once at the top
   of the form, not nested inside anything account-page-specific) but only
   ever prints on this page anyway (see avatar-upload.php's single render
   call site), so no extra scoping is needed for it to stay inert
   elsewhere. */
.berry-avatar-upload {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 28px;
}

/* .berry-avatar-upload__preview is now the <label for="berry-avatar-
   upload-input"> itself (see inc/avatar-upload.php) — clicking the photo
   opens the same file picker as the "Смени снимката" button, per request
   ("when u click on the picture u can also change t[he picture]"). The
   hint badge (small camera icon, bottom-right of the circle) is the only
   affordance that this is clickable at rest; the darkened-image + scaled-
   up badge on :hover confirms it before the click, same as the "change
   photo" pattern most account UIs use. */
.berry-avatar-upload__preview {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  cursor: pointer;
}

.berry-avatar-upload__preview img {
  display: block;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--berry-purple-soft);
  transition: filter 0.2s ease;
}

.berry-avatar-upload__preview:hover img {
  filter: brightness(0.85);
}

.berry-avatar-upload__preview-hint {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--berry-purple);
  color: #fff;
  border: 2px solid var(--berry-surface);
  transition: transform 0.2s ease, background 0.2s ease;
}

.berry-avatar-upload__preview:hover .berry-avatar-upload__preview-hint {
  background: var(--berry-purple-dark);
  transform: scale(1.08);
}

/* Buttons row — was a plain stacked label+link with no real spacing logic
   of its own, which read as cramped/glued-together next to the round
   photo (reported on both mobile and desktop). A bordered pill for the
   primary action + a clearly-separated destructive text link, both with
   room to breathe, matches the button language used everywhere else in
   My Account (see the .woocommerce .button rules above) without pulling
   in the generic `.button` class here (this is a <label>, not a <button>/
   <input>, so that shared rule doesn't reach it). */
.berry-avatar-upload__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.berry-avatar-upload__pick {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: var(--berry-radius-pill);
  border: 1.5px solid var(--berry-border-2);
  background: var(--berry-surface);
  color: var(--berry-text);
  font-family: var(--berry-font-sans);
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.berry-avatar-upload__pick:hover {
  border-color: var(--berry-purple-soft);
  color: var(--berry-purple);
  background: #f6f0ff;
}

.berry-avatar-upload__remove {
  background: none;
  border: none;
  padding: 4px 2px;
  color: #ef4444;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.berry-avatar-upload__remove:hover {
  text-decoration: underline;
}

.berry-avatar-crop-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.6);
}

.berry-avatar-crop-modal__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 90vw;
  padding: 24px;
  background: var(--berry-surface);
  border-radius: 16px;
}

.berry-avatar-crop-modal__title {
  margin: 0;
  font-size: 18px;
  color: var(--berry-text);
}

.berry-avatar-crop-modal__stage {
  width: 280px;
  height: 280px;
  border-radius: 50%;
  overflow: hidden;
  cursor: grab;
}

.berry-avatar-crop-modal__canvas {
  display: block;
  touch-action: none;
}

.berry-avatar-crop-modal__zoom {
  width: 280px;
}

.berry-avatar-crop-modal__buttons {
  display: flex;
  gap: 12px;
}

/* The 96px preview reads fine on desktop (it's a small element in a wide
   layout) but at phone widths it's proportionally much bigger — around a
   quarter of the whole screen width — and dominates the "Детайли на
   профила" header more than a profile-photo control should. Shrunk here
   rather than lowering the base 96px everywhere, since desktop has the
   width to spare and a bigger target there is easier to work with. The
   crop modal itself (280px stage) is left alone: it still fits inside a
   375px-wide viewport with room for its own padding either side, so
   there's nothing to fix there. */
@media (max-width: 480px) {
  .berry-avatar-upload__preview,
  .berry-avatar-upload__preview img {
    width: 72px;
    height: 72px;
  }
  .berry-avatar-upload__preview-hint {
    width: 24px;
    height: 24px;
  }
  .berry-avatar-upload__preview-hint svg {
    width: 14px;
    height: 14px;
  }
  .berry-avatar-upload__actions {
    gap: 8px;
  }
  .berry-avatar-upload__pick {
    padding: 8px 16px;
    font-size: 12.5px;
  }
}

body.woocommerce-account .berry-social-login__notice {
  color: var(--berry-text-dim);
  font-size: 12px;
  text-align: center;
  margin-top: 6px;
}