/* ==========================================================================
   FlexPresets - My Account Custom Styles
   All rules use !important and high specificity to guarantee
   they override Flatsome parent theme and WooCommerce defaults.
   ========================================================================== */

/* CSS Variables */
:root {
  --ma-bg: #FAFAF8;
  --ma-fg: #141414;
  --ma-card: #ffffff;
  --ma-muted: #f5f3ef;
  --ma-muted-fg: #737373;
  --ma-border: #e8e5df;
  --ma-primary: #b8976d;
  --ma-primary-fg: #ffffff;
  --ma-primary-10: rgba(184, 151, 109, 0.1);
  --ma-primary-20: rgba(184, 151, 109, 0.2);
  --ma-green-bg: #f0fdf4;
  --ma-green-fg: #16a34a;
  --ma-radius: 0.75rem;
  --ma-radius-xl: 1rem;
}

/* ==========================================================================
   1. NEUTRALIZE FLATSOME / WOOCOMMERCE DEFAULTS
   ========================================================================== */

/* Kill the Flatsome page-wrapper defaults */
.page-wrapper.my-account-redesign {
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: var(--ma-bg) !important;
  min-height: 60vh !important;
}

/* Our custom container replaces Flatsome's .container */
.page-wrapper.my-account-redesign .my-account-container {
  max-width: 672px !important;
  margin: 0 auto !important;
  padding: 24px 16px 40px !important;
  width: 100% !important;
}

@media (min-width: 640px) {
  .page-wrapper.my-account-redesign .my-account-container {
    padding: 40px 16px 60px !important;
  }
}

/* Hide the default Flatsome my-account header bar */
.my-account-header.page-title,
.my-account-header.featured-title,
div.my-account-header {
  display: none !important;
}

/* Reset any WooCommerce default .woocommerce wrapper styles */
.my-account-redesign .woocommerce {
  margin: 0 !important;
  padding: 0 !important;
}

/* Kill Flatsome vertical-tabs layout if somehow still present */
.my-account-redesign .vertical-tabs,
.my-account-redesign .row.vertical-tabs {
  display: block !important;
}

/* Hide default WooCommerce navigation that may be injected */
.my-account-redesign .woocommerce-MyAccount-navigation {
  display: none !important;
}

/* Reset Flatsome body background for my-account */
body.woocommerce-account .page-wrapper.my-account-redesign {
  background: var(--ma-bg) !important;
}

/* ==========================================================================
   2. PAGE HEADER
   ========================================================================== */

.my-account-redesign .ma-page-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-bottom: 32px !important;
  animation: maFadeInUp 0.3s ease-out;
}

.my-account-redesign .ma-page-header-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--ma-radius) !important;
  background: var(--ma-primary-10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.my-account-redesign .ma-page-header-icon svg {
  width: 20px !important;
  height: 20px !important;
  color: var(--ma-primary) !important;
}

.my-account-redesign .ma-page-header h1 {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  line-height: 1.4 !important;
  color: var(--ma-fg) !important;
  border: none !important;
}

/* ==========================================================================
   3. TAB NAVIGATION
   ========================================================================== */

.my-account-redesign .ma-tabs-container {
  position: relative !important;
  display: flex !important;
  gap: 4px !important;
  margin-bottom: 24px !important;
  padding: 4px !important;
  border-radius: var(--ma-radius) !important;
  background: var(--ma-muted) !important;
  overflow-x: auto !important;
  border: none !important;
}

@media (min-width: 640px) {
  .my-account-redesign .ma-tabs-container {
    margin-bottom: 32px !important;
  }
}

.my-account-redesign .ma-tab-btn,
.my-account-redesign button.ma-tab-btn {
  position: relative !important;
  z-index: 2 !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 12px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 8px !important;
  background: transparent !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--ma-muted-fg) !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: color 0.2s !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  min-height: auto !important;
  height: auto !important;
  font-family: inherit !important;
}

@media (min-width: 640px) {
  .my-account-redesign .ma-tab-btn,
  .my-account-redesign button.ma-tab-btn {
    font-size: 0.875rem !important;
    padding: 10px 16px !important;
  }
}

.my-account-redesign .ma-tab-btn:hover,
.my-account-redesign button.ma-tab-btn:hover {
  color: var(--ma-fg) !important;
  text-decoration: none !important;
  background: transparent !important;
}

.my-account-redesign .ma-tab-btn.active,
.my-account-redesign button.ma-tab-btn.active {
  color: var(--ma-primary) !important;
  background: transparent !important;
}

.my-account-redesign .ma-tab-btn svg {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
}

/* Sliding indicator */
.my-account-redesign .ma-tab-indicator {
  position: absolute !important;
  top: 4px !important;
  bottom: 4px !important;
  border-radius: 8px !important;
  background: var(--ma-card) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   4. CARDS
   ========================================================================== */

.my-account-redesign .ma-card {
  border-radius: var(--ma-radius-xl) !important;
  padding: 16px !important;
  background: var(--ma-card) !important;
  border: 1px solid var(--ma-border) !important;
  box-shadow: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (min-width: 640px) {
  .my-account-redesign .ma-card {
    padding: 24px !important;
  }
}

.my-account-redesign .ma-card + .ma-card {
  margin-top: 16px !important;
}

.my-account-redesign .ma-card-title {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  margin-bottom: 16px !important;
  color: var(--ma-fg) !important;
}

/* ==========================================================================
   5. FORM ELEMENTS
   ========================================================================== */

.my-account-redesign .ma-form-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
  margin-bottom: 16px !important;
}

@media (min-width: 640px) {
  .my-account-redesign .ma-form-grid-2 {
    grid-template-columns: 1fr 1fr !important;
  }
}

.my-account-redesign .ma-form-group {
  margin-bottom: 16px !important;
}

.my-account-redesign .ma-form-group:last-child {
  margin-bottom: 0 !important;
}

.my-account-redesign .ma-form-label,
.my-account-redesign label.ma-form-label {
  display: block !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: var(--ma-muted-fg) !important;
  margin-bottom: 6px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.my-account-redesign .ma-form-input,
.my-account-redesign input.ma-form-input,
.my-account-redesign input[type="text"].ma-form-input,
.my-account-redesign input[type="email"].ma-form-input,
.my-account-redesign input[type="password"].ma-form-input {
  width: 100% !important;
  padding: 10px 12px !important;
  border-radius: var(--ma-radius) !important;
  border: 1px solid var(--ma-border) !important;
  background: var(--ma-muted) !important;
  color: var(--ma-fg) !important;
  font-size: 0.875rem !important;
  outline: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  font-family: inherit !important;
  line-height: 1.5 !important;
  box-shadow: none !important;
  height: auto !important;
  margin: 0 !important;
}

.my-account-redesign .ma-form-input:focus,
.my-account-redesign input.ma-form-input:focus {
  border-color: rgba(184, 151, 109, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(184, 151, 109, 0.15) !important;
}

.my-account-redesign .ma-form-input::placeholder {
  color: var(--ma-muted-fg) !important;
}

.my-account-redesign .ma-input-wrapper {
  position: relative !important;
}

.my-account-redesign .ma-input-toggle,
.my-account-redesign button.ma-input-toggle {
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: none !important;
  border: none !important;
  color: var(--ma-muted-fg) !important;
  cursor: pointer !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.my-account-redesign .ma-input-toggle svg {
  width: 16px !important;
  height: 16px !important;
}

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

/* Global reset: Flatsome applies min-height:2.5em, line-height:2.4em,
   padding:0 1.2em, letter-spacing:.03em to ALL button elements.
   Kill these for every button inside our redesigned container. */
.my-account-redesign button,
.my-account-redesign .ma-card button,
.my-account-redesign .ma-card a {
  min-height: auto !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

.my-account-redesign .ma-btn-primary,
.my-account-redesign button.ma-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 20px !important;
  border-radius: var(--ma-radius) !important;
  border: none !important;
  background: var(--ma-primary) !important;
  color: var(--ma-primary-fg) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: opacity 0.2s !important;
  font-family: inherit !important;
  line-height: 1.5 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  /* Override Flatsome base button: min-height:2.5em, line-height:2.4em */
  min-height: auto !important;
  height: auto !important;
  margin: 0 !important;
}

.my-account-redesign .ma-btn-primary:hover,
.my-account-redesign button.ma-btn-primary:hover {
  opacity: 0.9 !important;
  color: var(--ma-primary-fg) !important;
  background: var(--ma-primary) !important;
}

.my-account-redesign .ma-btn-ghost,
.my-account-redesign button.ma-btn-ghost {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 20px !important;
  border-radius: var(--ma-radius) !important;
  border: none !important;
  background: transparent !important;
  color: var(--ma-muted-fg) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: color 0.2s !important;
  font-family: inherit !important;
  text-transform: none !important;
  box-shadow: none !important;
  min-height: auto !important;
  height: auto !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

.my-account-redesign .ma-btn-ghost:hover,
.my-account-redesign button.ma-btn-ghost:hover {
  color: var(--ma-fg) !important;
  background: transparent !important;
}

.my-account-redesign .ma-btn-download,
.my-account-redesign a.ma-btn-download,
.my-account-redesign a.ma-btn-download:link,
.my-account-redesign a.ma-btn-download:visited {
  padding: 8px 16px !important;
  border-radius: var(--ma-radius) !important;
  border: none !important;
  background: var(--ma-primary-10) !important;
  color: var(--ma-primary) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  font-family: inherit !important;
  text-transform: none !important;
  box-shadow: none !important;
  /* Override Flatsome base button: min-height:2.5em, line-height:2.4em */
  min-height: auto !important;
  height: auto !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

.my-account-redesign .ma-btn-download:hover,
.my-account-redesign a.ma-btn-download:hover {
  background: var(--ma-primary-20) !important;
  color: var(--ma-primary) !important;
  text-decoration: none !important;
}

.my-account-redesign .ma-btn-link,
.my-account-redesign button.ma-btn-link {
  background: none !important;
  border: none !important;
  color: var(--ma-primary) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  font-family: inherit !important;
  padding: 0 !important;
  box-shadow: none !important;
  text-transform: none !important;
  min-height: auto !important;
  height: auto !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

.my-account-redesign .ma-btn-link:hover,
.my-account-redesign button.ma-btn-link:hover {
  text-decoration: underline !important;
  color: var(--ma-primary) !important;
}

/* ==========================================================================
   7. PASSWORD SECTION
   ========================================================================== */

.my-account-redesign .ma-pw-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.my-account-redesign .ma-pw-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--ma-fg) !important;
}

.my-account-redesign .ma-pw-title svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--ma-muted-fg) !important;
}

.my-account-redesign .ma-pw-fields {
  margin-top: 16px !important;
}

.my-account-redesign .ma-pw-fields.hidden {
  display: none !important;
}

.my-account-redesign .ma-btn-row {
  display: flex !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

/* ==========================================================================
   8. ORDER CARDS
   ========================================================================== */

.my-account-redesign .ma-order-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

@media (min-width: 640px) {
  .my-account-redesign .ma-order-card {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}

.my-account-redesign .ma-order-product {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
}

.my-account-redesign .ma-order-product a,
.my-account-redesign .ma-order-product a:link,
.my-account-redesign .ma-order-product a:visited {
  color: var(--ma-fg) !important;
  text-decoration: none !important;
}

.my-account-redesign .ma-order-product a:hover {
  color: var(--ma-primary) !important;
}

.my-account-redesign .ma-order-meta {
  font-size: 0.75rem !important;
  color: var(--ma-muted-fg) !important;
  margin-top: 4px !important;
}

.my-account-redesign .ma-order-price {
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  color: var(--ma-primary) !important;
}

/* Override WooCommerce .amount styles inside our price */
.my-account-redesign .ma-order-price .amount,
.my-account-redesign .ma-order-price .woocommerce-Price-amount,
.my-account-redesign .ma-order-price span {
  color: var(--ma-primary) !important;
  font-weight: 600 !important;
}

.my-account-redesign .ma-order-status {
  display: inline-block !important;
  font-size: 10px !important;
  padding: 2px 8px !important;
  border-radius: 9999px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  /* Default fallback for any unrecognized status */
  background: var(--ma-muted) !important;
  color: var(--ma-muted-fg) !important;
}

/* Order status color variants */
.my-account-redesign .ma-order-status--completed {
  background: var(--ma-green-bg) !important;
  color: var(--ma-green-fg) !important;
}

.my-account-redesign .ma-order-status--processing {
  background: #eff6ff !important;
  color: #2563eb !important;
}

.my-account-redesign .ma-order-status--on-hold {
  background: #fefce8 !important;
  color: #ca8a04 !important;
}

.my-account-redesign .ma-order-status--pending {
  background: #fefce8 !important;
  color: #ca8a04 !important;
}

.my-account-redesign .ma-order-status--cancelled,
.my-account-redesign .ma-order-status--failed {
  background: #fef2f2 !important;
  color: #dc2626 !important;
}

.my-account-redesign .ma-order-status--refunded {
  background: var(--ma-muted) !important;
  color: var(--ma-muted-fg) !important;
}

.my-account-redesign .ma-order-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

@media (min-width: 640px) {
  .my-account-redesign .ma-order-right {
    flex-direction: column !important;
    align-items: flex-end !important;
    text-align: right !important;
    gap: 4px !important;
  }
}

/* ==========================================================================
   9. DOWNLOAD CARDS
   ========================================================================== */

.my-account-redesign .ma-download-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

@media (min-width: 640px) {
  .my-account-redesign .ma-download-card {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}

.my-account-redesign .ma-download-info {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.my-account-redesign .ma-download-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  background: var(--ma-primary-10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

.my-account-redesign .ma-download-icon svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--ma-primary) !important;
}

.my-account-redesign .ma-download-name {
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--ma-fg) !important;
}

.my-account-redesign .ma-download-actions {
  align-self: flex-end !important;
}

@media (min-width: 640px) {
  .my-account-redesign .ma-download-actions {
    align-self: auto !important;
  }
}

/* ==========================================================================
   10. CONTENT & SPACING
   ========================================================================== */

.my-account-redesign .ma-tab-panel {
  display: none !important;
}

.my-account-redesign .ma-tab-panel.active {
  display: block !important;
  animation: maFadeInUp 0.3s ease-out;
}

.my-account-redesign .ma-space-y > * + * {
  margin-top: 12px !important;
}

/* ==========================================================================
   11. EMPTY STATE
   ========================================================================== */

.my-account-redesign .ma-empty-state {
  text-align: center !important;
  padding: 32px 16px !important;
  color: var(--ma-muted-fg) !important;
  font-size: 0.875rem !important;
}

.my-account-redesign .ma-empty-state a,
.my-account-redesign .ma-empty-state a:link,
.my-account-redesign .ma-empty-state a:visited {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-top: 16px !important;
  padding: 8px 20px !important;
  border-radius: var(--ma-radius) !important;
  background: var(--ma-primary) !important;
  color: var(--ma-primary-fg) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.my-account-redesign .ma-empty-state a:hover {
  opacity: 0.9 !important;
  color: var(--ma-primary-fg) !important;
}

/* ==========================================================================
   12. PAGINATION
   ========================================================================== */

.my-account-redesign .ma-pagination {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 24px !important;
}

.my-account-redesign .ma-pagination a,
.my-account-redesign .ma-pagination span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 36px !important;
  height: 36px !important;
  padding: 0 8px !important;
  border-radius: var(--ma-radius) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}

.my-account-redesign .ma-pagination a,
.my-account-redesign .ma-pagination a:link,
.my-account-redesign .ma-pagination a:visited {
  background: var(--ma-muted) !important;
  color: var(--ma-muted-fg) !important;
}

.my-account-redesign .ma-pagination a:hover {
  background: var(--ma-primary-10) !important;
  color: var(--ma-primary) !important;
}

.my-account-redesign .ma-pagination .current {
  background: var(--ma-primary) !important;
  color: var(--ma-primary-fg) !important;
}

/* ==========================================================================
   13. WOOCOMMERCE NOTICES
   ========================================================================== */

.my-account-redesign .woocommerce-message,
.my-account-redesign .woocommerce-error,
.my-account-redesign .woocommerce-info {
  border-radius: var(--ma-radius) !important;
  margin-bottom: 16px !important;
  font-size: 0.875rem !important;
}

/* Also style notices that appear outside our wrapper (Flatsome injects them after header) */
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-error,
body.woocommerce-account .woocommerce-info {
  max-width: 672px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ==========================================================================
   14. WOOCOMMERCE FORM OVERRIDES (catch any WC-generated form elements)
   ========================================================================== */

/* Reset WooCommerce form-row styles inside our cards */
.my-account-redesign .ma-card .form-row,
.my-account-redesign .ma-card .woocommerce-form-row,
.my-account-redesign .ma-card p.form-row {
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
}

/* Hide WooCommerce's default show-password toggle (we have our own) */
.my-account-redesign .show-password-input {
  display: none !important;
}

/* ==========================================================================
   15. ANIMATION
   ========================================================================== */

@keyframes maFadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}