/* ============================================
   MY ACCOUNT — form fields, buttons, toggles, alerts, danger zone
   ============================================
   Matches the reference dashboard's .ap-* component system exactly
   (https://www.aquaphor.bg/promo/Berry_store_7/account.html, fetched and
   read directly — values below are copied from its own <style> block, not
   guessed). Uses the SAME global custom properties the reference itself
   defines (--clr-*, --radius-*, --font-*, --grad-*) — those come from
   berry-reference.css's own :root block, loaded site-wide, rather than
   the separate --berry-* set my-account-theme.css keeps for its own
   older components, since matching the reference's literal variable
   names/values here is more direct than translating through a second set.

   Scoped to body.woocommerce-account, loaded only on account pages.
   ============================================ */

/* Defensive final-pass override for the account tab-bar width chain.
   Two earlier fixes (site-main's parent-theme max-width; MyAccount-
   navigation's core float:left/width:30%) each checked out correct in
   isolation — live-served CSS byte-for-byte matches disk, specificity and
   load order both favor the override, no competing rule exists in any
   stylesheet on the page — yet the tabs bar still rendered squeezed to a
   fraction of the card's width in real testing. Restating the same
   properties with !important here, since this file loads last of the
   three account stylesheets, removes any remaining doubt about which rule
   is actually winning in a real browser instead of on paper. */
body.woocommerce-account .woocommerce {
  width: 100% !important;
}
body.woocommerce-account .woocommerce-MyAccount-navigation {
  display: block !important;
  float: none !important;
  width: 100% !important;
}
body.woocommerce-account .berry-account-tabs-card {
  display: block !important;
  width: 100% !important;
  max-width: 1100px !important;
}
body.woocommerce-account .berry-account-tabs {
  display: flex !important;
  width: 100% !important;
}
/* Per-tab flex/min-width is NOT forced here on purpose — account-hero.css
   sets flex:1 1 auto with a 128px min-width floor (grows to fill a wide
   container, never shrinks past legible, scrolls instead once it can't
   fit) and an !important here would fight that. */

body.woocommerce-account .ap-section-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--clr-text);
  margin-bottom: 6px;
  font-family: var(--font-display);
}

body.woocommerce-account .ap-section-sub {
  font-size: 13.5px;
  color: var(--clr-text-dim);
  margin-bottom: 28px;
}

/* ---------- form fields ---------- */

body.woocommerce-account .ap-form-group,
body.woocommerce-account .woocommerce-EditAccountForm .woocommerce-form-row,
body.woocommerce-account .woocommerce-address-fields .form-row {
  margin-bottom: 20px;
}

body.woocommerce-account .ap-form-label,
body.woocommerce-account .woocommerce-EditAccountForm label,
body.woocommerce-account .woocommerce-address-fields label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-text-muted);
  margin-bottom: 8px;
}

body.woocommerce-account .ap-form-input,
body.woocommerce-account .woocommerce-EditAccountForm input:not([type="checkbox"]):not([type="radio"]),
body.woocommerce-account .woocommerce-EditAccountForm select,
body.woocommerce-account .woocommerce-address-fields input,
body.woocommerce-account .woocommerce-address-fields select {
  width: 100%;
  box-sizing: border-box;
  padding: 13px 16px;
  border: 1.5px solid var(--clr-border-2) !important;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--clr-text);
  background: var(--clr-surface);
  transition: border-color 0.2s, box-shadow 0.2s;
  outline: none;
}

body.woocommerce-account .ap-form-input:focus,
body.woocommerce-account .woocommerce-EditAccountForm input:focus,
body.woocommerce-account .woocommerce-EditAccountForm select:focus,
body.woocommerce-account .woocommerce-address-fields input:focus,
body.woocommerce-account .woocommerce-address-fields select:focus {
  border-color: var(--clr-primary) !important;
  box-shadow: 0 0 0 3px rgba(156,80,255,0.12);
}

body.woocommerce-account .ap-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  body.woocommerce-account .ap-form-row {
    grid-template-columns: 1fr;
  }
}

/* ---------- buttons ---------- */

body.woocommerce-account .ap-btn,
body.woocommerce-account .woocommerce-EditAccountForm button[type="submit"],
body.woocommerce-account .woocommerce-address-fields button[type="submit"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: none !important;
  background: var(--grad-brand) !important;
  color: #fff !important;
  box-shadow: 0 4px 18px rgba(141,91,245,0.28);
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}

body.woocommerce-account .ap-btn:hover,
body.woocommerce-account .woocommerce-EditAccountForm button[type="submit"]:hover,
body.woocommerce-account .woocommerce-address-fields button[type="submit"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(141,91,245,0.38);
}

body.woocommerce-account .ap-btn--ghost {
  background: var(--clr-surface-2) !important;
  color: var(--clr-text-muted) !important;
  border: 1.5px solid var(--clr-border-2) !important;
  box-shadow: none;
}

body.woocommerce-account .ap-btn--ghost:hover {
  background: var(--clr-surface-3) !important;
  color: var(--clr-text) !important;
}

body.woocommerce-account .ap-btn--danger {
  background: #fff1f1 !important;
  color: #dc2626 !important;
  border: 1.5px solid #fecaca !important;
  box-shadow: none;
}

body.woocommerce-account .ap-btn--danger:hover {
  background: #fee2e2 !important;
}

body.woocommerce-account .ap-btn-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* ---------- password fields (reveal toggle + strength bar) ---------- */

body.woocommerce-account .ap-pw-wrap {
  position: relative;
}

body.woocommerce-account .ap-pw-wrap input {
  padding-right: 44px !important;
}

body.woocommerce-account .ap-pw-toggle {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  background: none !important;
  border: none !important;
  color: var(--clr-text-dim);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
}

body.woocommerce-account .ap-pw-toggle:hover {
  color: var(--clr-primary);
}

body.woocommerce-account .ap-strength {
  height: 4px;
  border-radius: 2px;
  background: var(--clr-surface-3);
  margin-top: 8px;
  overflow: hidden;
}

body.woocommerce-account .ap-strength__bar {
  height: 100%;
  border-radius: 2px;
  width: 0%;
  background: var(--clr-surface-3);
  transition: width 0.35s ease, background 0.35s ease;
}

/* ---------- alerts ---------- */

body.woocommerce-account .ap-alert,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-size: 13.5px;
  margin-bottom: 16px;
  list-style: none;
}

body.woocommerce-account .woocommerce-message {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #15803d;
}

body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-error li {
  background: #fff1f1;
  border: 1px solid #fecaca;
  color: #b91c1c;
}

/* ---------- notification toggles ---------- */

body.woocommerce-account .berry-notif-group-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--clr-text-dim);
  margin-bottom: 8px;
}

body.woocommerce-account .berry-notif-group-title--spaced {
  margin-top: 24px;
}

body.woocommerce-account .notif-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--clr-border);
  gap: 16px;
}

body.woocommerce-account .notif-row:last-of-type {
  border-bottom: none;
}

body.woocommerce-account .notif-row__text h4 {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--clr-text);
  margin-bottom: 2px;
}

body.woocommerce-account .notif-row__text p {
  font-size: 12.5px;
  color: var(--clr-text-dim);
}

body.woocommerce-account .toggle-switch {
  position: relative;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
  display: block;
}

body.woocommerce-account .toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

body.woocommerce-account .toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--clr-surface-3);
  border-radius: 26px;
  transition: background 0.3s ease;
}

body.woocommerce-account .toggle-slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

body.woocommerce-account .toggle-switch input:checked + .toggle-slider {
  background: var(--clr-primary);
}

body.woocommerce-account .toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

body.woocommerce-account .berry-notif-btn-row {
  margin-top: 24px;
}

/* ---------- danger zone (logout section) ---------- */

body.woocommerce-account .ap-logout-section {
  background: #fff8f8;
  border: 1.5px solid #fecaca;
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
}

body.woocommerce-account .ap-logout-section__text h4 {
  font-size: 15px;
  font-weight: 700;
  color: #dc2626;
  margin-bottom: 3px;
}

body.woocommerce-account .ap-logout-section__text p {
  font-size: 13px;
  color: #b91c1c;
  opacity: 0.75;
}