/**
 * Custom Dashboard – My Account (SaaS-style)
 * Scoped to .woocommerce-account. Wrapper: .custom-dashboard.
 * Ignores default WooCommerce CSS via reset. Use in stylesheet or <style>.
 */

/* ==========================================================================
   RESET: .woocommerce-account only (no legacy WooCommerce padding/float/list)
   ========================================================================== */
.woocommerce-account .woocommerce,
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-account .custom-dashboard {
  padding: 0;
  margin: 0;
  float: none;
  list-style: none;
  background: none;
  border: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul,
.woocommerce-account .woocommerce-MyAccount-navigation li {
  margin: 0;
  padding: 0;
  list-style: none;
  float: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation a {
  padding: 0;
  margin: 0;
  float: none;
}

/* Hide default WC nav when using custom dashboard */
.woocommerce-account .custom-dashboard ~ .woocommerce-MyAccount-navigation,
.woocommerce-account .custom-dashboard .woocommerce-MyAccount-navigation {
  display: none !important;
}

/* ==========================================================================
   LAYOUT: .custom-dashboard (2-col grid)
   ========================================================================== */
.woocommerce-account .custom-dashboard {
  --db-primary: #0f172a;
  --db-primary-soft: rgba(15, 23, 42, 0.07);
  --db-bg: #f8fafc;
  --db-text: #1e293b;
  --db-text-muted: #64748b;
  --db-card-bg: #fff;
  --db-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  --db-radius: 12px;
  --db-sidebar-w: 280px;

  display: grid;
  grid-template-columns: var(--db-sidebar-w) 1fr;
  min-height: 60vh;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--db-text);
  background: var(--db-bg);
  margin: 1.5rem 0 2rem;
  border-radius: var(--db-radius);
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

/* ==========================================================================
   SIDEBAR: .db-sidebar (fixed 280px)
   ========================================================================== */
.woocommerce-account .custom-dashboard .db-sidebar {
  width: var(--db-sidebar-w);
  min-width: var(--db-sidebar-w);
  background: var(--db-card-bg);
  border-right: 1px solid rgba(0, 0, 0, 0.06);
  padding: 1.5rem 0;
  display: flex;
  flex-direction: column;
}

.woocommerce-account .custom-dashboard .db-nav {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0 1rem;
}

.woocommerce-account .custom-dashboard .db-nav__btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  color: var(--db-text);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 10px;
  transition: background 0.2s ease, color 0.2s ease;
}

.woocommerce-account .custom-dashboard .db-nav__btn:hover {
  background: var(--db-primary-soft);
  color: var(--db-primary);
}

.woocommerce-account .custom-dashboard .db-nav__btn.is-active {
  background: var(--db-primary-soft);
  color: var(--db-primary);
  font-weight: 600;
}

.woocommerce-account .custom-dashboard .db-nav__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  flex-shrink: 0;
}

.woocommerce-account .custom-dashboard .db-nav__icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.woocommerce-account .custom-dashboard .db-nav__label {
  flex: 1;
  min-width: 0;
}

/* Logout separated at bottom */
.woocommerce-account .custom-dashboard .db-sidebar__footer {
  margin-top: auto;
  padding: 1rem 1rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.woocommerce-account .custom-dashboard .db-nav__btn--logout {
  color: var(--db-text-muted);
}

.woocommerce-account .custom-dashboard .db-nav__btn--logout:hover {
  color: #b91c1c;
  background: rgba(185, 28, 28, 0.08);
}

/* ==========================================================================
   MAIN CONTENT: .db-main-content
   ========================================================================== */
.woocommerce-account .custom-dashboard .db-main-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 2rem 2rem;
}

/* Header: avatar, name, breadcrumb */
.woocommerce-account .custom-dashboard .db-header {
  margin-bottom: 1.5rem;
}

.woocommerce-account .custom-dashboard .db-header__user {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.woocommerce-account .custom-dashboard .db-header__avatar {
  flex-shrink: 0;
}

.woocommerce-account .custom-dashboard .db-header__gravatar {
  display: block;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--db-card-bg);
  box-shadow: var(--db-card-shadow);
}

.woocommerce-account .custom-dashboard .db-header__name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--db-text);
  margin: 0 0 0.25rem 0;
  line-height: 1.25;
}

.woocommerce-account .custom-dashboard .db-header__breadcrumb {
  font-size: 0.875rem;
  color: var(--db-text-muted);
  margin: 0;
}

.woocommerce-account .custom-dashboard .db-header__breadcrumb-label {
  font-weight: 500;
  color: var(--db-text);
}

/* ==========================================================================
   CONTENT CARD: .db-card (white, radius, shadow, padding)
   ========================================================================== */
.woocommerce-account .custom-dashboard .db-card {
  background: var(--db-card-bg);
  border-radius: var(--db-radius);
  box-shadow: var(--db-card-shadow);
  padding: 30px;
  flex: 1;
  min-height: 0;
}

.woocommerce-account .custom-dashboard .db-card .woocommerce-MyAccount-content {
  padding: 0;
}

.woocommerce-account .custom-dashboard .db-card h2,
.woocommerce-account .custom-dashboard .db-card h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--db-text);
  margin: 0 0 1rem 0;
}

/* Notices & messages – SaaS style */
.woocommerce-account .custom-dashboard .db-card .woocommerce-info,
.woocommerce-account .custom-dashboard .db-card .woocommerce-message,
.woocommerce-account .custom-dashboard .db-card .woocommerce-error,
.woocommerce-account .custom-dashboard .db-card > p {
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.woocommerce-account .custom-dashboard .db-card .woocommerce-message {
  border-left: 4px solid #22c55e;
}

.woocommerce-account .custom-dashboard .db-card .woocommerce-error {
  border-left: 4px solid #ef4444;
}

.woocommerce-account .custom-dashboard .db-card .woocommerce-error ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   TABLES: force clean look (collapse, 1px light grey bottom border, padding)
   ========================================================================== */
.woocommerce-account .custom-dashboard .db-card table,
.woocommerce-account .custom-dashboard table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1.5rem;
  background: var(--db-card-bg);
  border: none;
}

.woocommerce-account .custom-dashboard .db-card table th,
.woocommerce-account .custom-dashboard .db-card table td,
.woocommerce-account .custom-dashboard table th,
.woocommerce-account .custom-dashboard table td {
  padding: 14px 18px;
  text-align: left;
  border: none;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: middle;
}

.woocommerce-account .custom-dashboard .db-card table th,
.woocommerce-account .custom-dashboard table th {
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--db-text-muted);
  background: var(--db-bg);
}

.woocommerce-account .custom-dashboard .db-card table tr:last-child td,
.woocommerce-account .custom-dashboard table tr:last-child td {
  border-bottom: none;
}

/* ==========================================================================
   FORMS & INPUTS inside .db-card (Edit Account + all WooCommerce forms)
   ========================================================================== */

/* 1. Form layout – grid, no WooCommerce floats */
.woocommerce-account .custom-dashboard .db-card .woocommerce-EditAccountForm,
.woocommerce-account .custom-dashboard .db-card form.edit-account,
.woocommerce-account .custom-dashboard .db-card .woocommerce-form,
.woocommerce-account .custom-dashboard .db-card form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
  margin-bottom: 0;
}

.woocommerce-account .custom-dashboard .db-card .form-row {
  float: none !important;
  width: 100% !important;
  margin-bottom: 1.25rem;
  padding: 0;
}

.woocommerce-account .custom-dashboard .db-card .form-row-first,
.woocommerce-account .custom-dashboard .db-card .form-row-last {
  grid-column: span 1;
}

.woocommerce-account .custom-dashboard .db-card .form-row-wide,
.woocommerce-account .custom-dashboard .db-card .form-row.form-row-wide {
  grid-column: 1 / -1;
}

.woocommerce-account .custom-dashboard .db-card .clear {
  grid-column: 1 / -1;
  height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: none;
  clear: none;
}

/* 2. Labels */
.woocommerce-account .custom-dashboard .db-card .form-row label,
.woocommerce-account .custom-dashboard .db-card label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
  margin-bottom: 8px;
}

/* 2. Inputs: text, email, password, select */
.woocommerce-account .custom-dashboard .db-card input[type="text"],
.woocommerce-account .custom-dashboard .db-card input[type="email"],
.woocommerce-account .custom-dashboard .db-card input[type="password"],
.woocommerce-account .custom-dashboard .db-card input.input-text,
.woocommerce-account .custom-dashboard .db-card select {
  width: 100%;
  max-width: 100%;
  padding: 12px 16px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--db-text);
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.woocommerce-account .custom-dashboard .db-card input[type="text"]:focus,
.woocommerce-account .custom-dashboard .db-card input[type="email"]:focus,
.woocommerce-account .custom-dashboard .db-card input[type="password"]:focus,
.woocommerce-account .custom-dashboard .db-card input.input-text:focus,
.woocommerce-account .custom-dashboard .db-card select:focus {
  outline: none;
  border-color: var(--db-primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.12);
}

.woocommerce-account .custom-dashboard .db-card select {
  appearance: auto;
  cursor: pointer;
}

/* 3. Fieldsets & legends – section heading style */
.woocommerce-account .custom-dashboard .db-card fieldset {
  grid-column: 1 / -1;
  margin: 30px 0 0 0;
  padding: 0;
  border: none;
  background: transparent;
}

.woocommerce-account .custom-dashboard .db-card fieldset legend {
  font-size: 18px;
  font-weight: 700;
  margin-top: 30px;
  margin-bottom: 20px;
  padding: 0;
  color: #2d3748;
  display: block;
  width: 100%;
}

.woocommerce-account .custom-dashboard .db-card fieldset .form-row {
  margin-bottom: 1.25rem;
}

/* 4. Buttons */
.woocommerce-account .custom-dashboard .db-card .woocommerce-Button.button,
.woocommerce-account .custom-dashboard .db-card .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-transform: none;
  border-radius: 8px;
  background: var(--db-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.05s ease;
}

.woocommerce-account .custom-dashboard .db-card .woocommerce-Button.button:hover,
.woocommerce-account .custom-dashboard .db-card .button:hover {
  background: #0c1222;
  color: #fff;
}

.woocommerce-account .custom-dashboard .db-card .button.alt {
  background: transparent;
  color: var(--db-primary);
  border: 2px solid var(--db-primary);
}

.woocommerce-account .custom-dashboard .db-card .button.alt:hover {
  background: var(--db-primary-soft);
  color: var(--db-primary);
}

/* Submit row – full width */
.woocommerce-account .custom-dashboard .db-card form p:last-of-type {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
  margin-bottom: 0;
}

/* 5. Password input container – relative, eye inside */
.woocommerce-account .custom-dashboard .db-card .password-input {
  position: relative;
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 100%;
}

.woocommerce-account .custom-dashboard .db-card .password-input .input-text,
.woocommerce-account .custom-dashboard .db-card .password-input input[type="password"] {
  flex: 1;
  min-width: 0;
  padding-right: 52px;
}

.woocommerce-account .custom-dashboard .db-card .password-input .show-password-input {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.woocommerce-account .custom-dashboard .db-card .password-input .show-password-input:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--db-text);
}

/* Description under field (e.g. display name) */
.woocommerce-account .custom-dashboard .db-card .form-row em,
.woocommerce-account .custom-dashboard .db-card #account_display_name_description {
  display: block;
  font-size: 0.8125rem;
  color: var(--db-text-muted);
  margin-top: 6px;
  font-style: italic;
}

/* ==========================================================================
   Edit Account Form – CSS Grid cleanup (.woocommerce-EditAccountForm only)
   ========================================================================== */

/* 1. Reset & Grid setup */
.woocommerce-EditAccountForm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.woocommerce-EditAccountForm .clear {
  display: none !important;
}

.woocommerce-EditAccountForm p.form-row {
  width: 100% !important;
  float: none !important;
  margin: 0;
}

/* 2. Field positioning */
.woocommerce-EditAccountForm .form-row-first,
.woocommerce-EditAccountForm .form-row-last {
  grid-column: span 1;
}

.woocommerce-EditAccountForm .form-row-wide,
.woocommerce-EditAccountForm .form-row.form-row-wide {
  grid-column: span 2;
}

.woocommerce-EditAccountForm fieldset {
  grid-column: span 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.woocommerce-EditAccountForm fieldset legend {
  margin: 0 0 10px 0;
  padding: 0;
}

.woocommerce-EditAccountForm fieldset .form-row {
  margin: 0;
}

/* Submit row full width */
.woocommerce-EditAccountForm p:last-of-type {
  grid-column: span 2;
  margin-top: 10px;
  margin-bottom: 0;
}

/* 3. Visual polish – inputs */
.woocommerce-EditAccountForm input[type="text"],
.woocommerce-EditAccountForm input[type="email"],
.woocommerce-EditAccountForm input[type="password"],
.woocommerce-EditAccountForm .input-text {
  height: 45px;
  padding: 0 15px;
  background: #fcfcfc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-sizing: border-box;
}

/* 3. Labels */
.woocommerce-EditAccountForm .form-row label {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 5px;
  display: block;
}

/* 3. Small description (span under field) */
.woocommerce-EditAccountForm .form-row span[id],
.woocommerce-EditAccountForm #account_display_name_description,
.woocommerce-EditAccountForm .form-row em {
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
  margin-top: 5px;
  display: block;
}

/* 4. Button – modern high-contrast action */
.woocommerce-EditAccountForm .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  padding: 0 24px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-transform: none;
  border-radius: 8px;
  border: none;
  background: var(--db-primary, #0f172a);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.woocommerce-EditAccountForm .button:hover {
  background: #0c1222;
  color: #fff;
}

/* 5. Responsive – single column under 600px */
@media (max-width: 600px) {
  .woocommerce-EditAccountForm {
    grid-template-columns: 1fr;
  }

  .woocommerce-EditAccountForm .form-row-first,
  .woocommerce-EditAccountForm .form-row-last,
  .woocommerce-EditAccountForm .form-row-wide,
  .woocommerce-EditAccountForm .form-row.form-row-wide,
  .woocommerce-EditAccountForm fieldset,
  .woocommerce-EditAccountForm p:last-of-type {
    grid-column: span 1;
  }
}

/* ==========================================================================
   Clean Edit Account form (.db-edit-account-form) – semantic structure
   ========================================================================== */
.db-edit-account-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.db-edit-account-form .db-form-row--two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.db-edit-account-form .db-field {
  display: block;
}

.db-edit-account-form .db-field label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 5px;
}

.db-edit-account-form .db-field input[type="text"],
.db-edit-account-form .db-field input[type="email"],
.db-edit-account-form .db-field input[type="password"] {
  width: 100%;
  height: 45px;
  padding: 0 15px;
  background: #fcfcfc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 0.9375rem;
}

.db-edit-account-form .db-field-desc {
  display: block;
  font-size: 12px;
  color: #94a3b8;
  font-style: italic;
  margin-top: 5px;
}

.db-edit-account-form .db-password-fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 15px;
}

.db-edit-account-form .db-password-fieldset legend {
  font-size: 18px;
  font-weight: 700;
  color: #2d3748;
  margin-bottom: 5px;
  padding: 0;
}

.db-edit-account-form .db-form-actions {
  margin-top: 10px;
}

.db-edit-account-form .db-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  padding: 0 24px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-transform: none;
  border-radius: 8px;
  border: none;
  background: var(--db-primary, #0f172a);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.db-edit-account-form .db-button:hover {
  background: #0c1222;
  color: #fff;
}

@media (max-width: 600px) {
  .db-edit-account-form .db-form-row--two-cols {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Dane Firmy (Company Data) form – .db-main-content / .db-card
   ========================================================================== */

/* 1. Form structure */
.db-main-content .db-card form,
.db-card form {
  width: 100%;
  max-width: 100%;
}

.db-main-content .db-card .form-group,
.db-card .form-group {
  display: block;
  margin-bottom: 25px;
}

.db-main-content .db-card .form-group label,
.db-card .form-group label {
  display: block;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 8px;
}

/* 2. Inputs & textarea */
.db-main-content .db-card input[type="text"],
.db-main-content .db-card input[type="file"],
.db-main-content .db-card textarea,
.db-card input[type="text"],
.db-card input[type="file"],
.db-card textarea {
  width: 100%;
  max-width: 100%;
  padding: 12px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #fcfcfc;
  box-sizing: border-box;
  font-size: 0.9375rem;
  font-family: inherit;
}

.db-main-content .db-card textarea,
.db-card textarea {
  min-height: 100px;
  resize: vertical;
}

/* 3. WP Editor (TinyMCE) – Opis Firmy – layout & visual fixes */

/* Form-group containing editor: full width, new line (grid or block) */
.db-main-content .db-card .form-group:has(#wp-description-wrap),
.db-card .form-group:has(#wp-description-wrap) {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both !important;
}

/* Fallback when :has() not supported – target by sibling/context */
.db-main-content .db-card #wp-description-wrap,
.db-card #wp-description-wrap {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  clear: both !important;
  margin-top: 20px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.db-main-content .db-card .wp-editor-tools,
.db-card .wp-editor-tools {
  background: #f1f5f9;
  padding: 8px 12px;
  border-bottom: 1px solid #e2e8f0;
}

.db-main-content .db-card .wp-editor-tabs,
.db-card .wp-editor-tabs {
  margin-bottom: -1px;
}

.db-main-content .db-card .wp-editor-container,
.db-card .wp-editor-container {
  width: 100% !important;
  max-width: 100% !important;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
}

.db-main-content .db-card .wp-editor-container textarea,
.db-card .wp-editor-container textarea {
  border: none;
  border-radius: 0;
  min-height: 120px;
  width: 100% !important;
}

.db-main-content .db-card #wp-description-editor-container,
.db-card #wp-description-editor-container {
  max-width: 100%;
}

/* TinyMCE container – full width */
.db-main-content .db-card .mce-tinymce.mce-container,
.db-card .mce-tinymce.mce-container {
  width: 100% !important;
  max-width: 100% !important;
}

.db-main-content .db-card .mce-panel,
.db-card .mce-panel {
  border: none !important;
  border-radius: 0 0 8px 8px !important;
}

/* Iframe – full width */
.db-main-content .db-card #wp-description-wrap iframe,
.db-main-content .db-card #description_ifr,
.db-card #wp-description-wrap iframe,
.db-card #description_ifr {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* 4. Logo preview & description */
.db-main-content .db-card .company-logo-preview,
.db-card .company-logo-preview {
  display: inline-block;
  padding: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-top: 8px;
}

.db-main-content .db-card .company-logo-preview img,
.db-card .company-logo-preview img {
  display: block;
  max-width: 100%;
  height: auto;
}

.db-main-content .db-card .form-group .description,
.db-card .form-group .description {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 5px;
  display: block;
}

/* 5. Submit button */
.db-main-content .db-card .btn-primary,
.db-main-content .db-card form .button[type="submit"],
.db-main-content .db-card form button[type="submit"],
.db-card .btn-primary,
.db-card form .button[type="submit"],
.db-card form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 30px;
  font-weight: 600;
  font-size: 0.9375rem;
  text-transform: none;
  border-radius: 8px;
  border: none;
  background: var(--db-primary, #0f172a);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.db-main-content .db-card .btn-primary:hover,
.db-main-content .db-card form .button[type="submit"]:hover,
.db-main-content .db-card form button[type="submit"]:hover,
.db-card .btn-primary:hover,
.db-card form .button[type="submit"]:hover,
.db-card form button[type="submit"]:hover {
  background: #0c1222;
  color: #fff;
}

/* 6. Responsive */
@media (max-width: 768px) {
  .db-main-content .db-card form,
  .db-card form {
    width: 100%;
  }

  .db-main-content .db-card #wp-description-wrap,
  .db-card #wp-description-wrap {
    width: 100%;
  }

  .db-main-content .db-card .wp-editor-tools .wp-editor-buttons,
  .db-card .wp-editor-tools .wp-editor-buttons {
    flex-wrap: wrap;
  }
}

/* ==========================================================================
   MOBILE: drawer (sidebar hidden, toggle opens overlay)
   ========================================================================== */
.woocommerce-account .custom-dashboard .db-mobile-toggle {
  display: none;
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 1001;
  width: 56px;
  height: 56px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--db-primary);
  color: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.35);
  transition: transform 0.2s ease;
}

.woocommerce-account .custom-dashboard .db-mobile-toggle:hover {
  transform: scale(1.05);
}

.woocommerce-account .custom-dashboard .db-mobile-toggle[aria-expanded="true"] {
  background: #0f172a;
}

@media (max-width: 1024px) {
  .woocommerce-account .custom-dashboard {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .woocommerce-account .custom-dashboard .db-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: min(320px, 85vw);
    height: 100vh;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: none;
  }

  .woocommerce-account .custom-dashboard .db-sidebar.is-open {
    transform: translateX(0);
  }

  .woocommerce-account .custom-dashboard .db-sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .woocommerce-account .custom-dashboard .db-sidebar-backdrop.is-open {
    display: block;
    opacity: 1;
  }

  .woocommerce-account .custom-dashboard .db-mobile-toggle {
    display: flex;
  }

  .woocommerce-account .custom-dashboard .db-main-content {
    padding: 1rem 1.25rem 5rem;
  }

  .woocommerce-account .custom-dashboard .db-header__gravatar {
    width: 64px;
    height: 64px;
  }

  .woocommerce-account .custom-dashboard .db-header__name {
    font-size: 1.25rem;
  }

  .woocommerce-account .custom-dashboard .db-card {
    padding: 1.25rem 1.25rem;
  }

  .woocommerce-account .custom-dashboard .db-card form {
    grid-template-columns: 1fr;
  }

  .woocommerce-account .custom-dashboard .db-card .form-row-first,
  .woocommerce-account .custom-dashboard .db-card .form-row-last {
    grid-column: 1 / -1;
  }

  .woocommerce-account .custom-dashboard .db-card table th,
  .woocommerce-account .custom-dashboard .db-card table td {
    padding: 10px 12px;
    font-size: 0.875rem;
  }
}

@media (max-width: 480px) {
  .woocommerce-account .custom-dashboard .db-header__user {
    flex-direction: column;
    align-items: flex-start;
  }
}