/* ==========================================================================
   HibaVie — modern "My Account" area
   Loaded only for logged-in customers (via the account nav module).
   Page-level rules are scoped to body[class^="account-"] so nothing here can
   affect checkout, catalog or other pages. Component rules use the acct-*
   prefix.
   ========================================================================== */

/* ---------- Canvas ---------------------------------------------------- */
body[class^="account-"]:not(.account-login) {
  background-color: #f6f2e8;
}

@media (min-width: 992px) and (hover: hover) {
  body[class^="account-"]:not(.account-login) {
    background-image: url('/image/catalog/contact-us-background.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
  }
}

body[class^="account-"] [id^="account-"].container:not(#account-login) {
  width: 100%;
  max-width: 1320px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 40px;
}

/* The theme's script wraps the breadcrumb in .breadcrumb-back > .container and paints a
   1000px decorative olive behind it, which overflows narrow screens; align it with our grid. */
body[class^="account-"]:not(.account-login) .breadcrumb-back .container {
  width: 100%;
  max-width: 1320px;
  padding-left: 20px;
  padding-right: 20px;
}
body[class^="account-"]:not(.account-login) .breadcrumb-back .container::before { display: none; }
@media (max-width: 767px) {
  body[class^="account-"]:not(.account-login) .breadcrumb-back .container { padding-left: 16px; padding-right: 16px; }
}

body[class^="account-"] .breadcrumb {
  background: none;
  text-align: left;
  padding: 14px 0 12px;
  margin: 0;
  font-size: 13px;
  color: #8a8a7c;
}
body[class^="account-"] .breadcrumb a { color: #6f7a66; }
body[class^="account-"] .breadcrumb > li + li:before { color: #b9b4a2; }

/* ---------- Two-column layout: nav + content -------------------------- */
/* The theme's custom.js moves #column-left below #content under 992px, so the
   order is driven by CSS (flex order) instead of DOM position. */
body[class^="account-"] [id^="account-"].container:not(#account-login) > .row {
  display: flex;
  flex-direction: column;
}
body[class^="account-"] [id^="account-"].container:not(#account-login) > .row:before,
body[class^="account-"] [id^="account-"].container:not(#account-login) > .row:after {
  display: none;
}

body[class^="account-"] #column-left {
  display: block !important; /* Bootstrap hides it on phones; we show it as a scrolling tab bar */
  float: none;
  order: -1;
  padding: 0;
  margin: 0 15px 30px;
}

body[class^="account-"] #content {
  float: none;
  width: auto;
  min-height: 0;
}

@media (min-width: 992px) {
  body[class^="account-"] [id^="account-"].container:not(#account-login) > .row {
    flex-direction: row;
    align-items: flex-start;
  }
  body[class^="account-"] #column-left { flex: 0 0 270px; width: 270px; }
  body[class^="account-"] #content { flex: 1 1 0; min-width: 0; }
}

/* Any account sub-page renders inside one soft card. */
body[class^="account-"] #content:not(.acct-dash) {
  margin: 0 15px 30px;
  padding: 32px 36px;
  background: rgba(255, 253, 248, 0.96);
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(70, 60, 30, 0.07);
}
body[class^="account-"] #content.acct-dash {
  margin: 0 15px 30px;
  padding: 0;
}
/* Pages with no sidebar (guest pages such as register/forgotten): centre it. */
body[class^="account-"] #content.col-sm-12:not(.acct-dash) {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Sidebar navigation ---------------------------------------- */
.acct-nav {
  background: rgba(255, 253, 248, 0.95);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 8px 30px rgba(70, 60, 30, 0.07);
}
.acct-nav-list { list-style: none; margin: 0; padding: 0; }
.acct-nav-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  margin-bottom: 2px;
  border-radius: 10px;
  color: #2c2c2c;
  font-size: 15px;
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.15s ease;
}
.acct-nav-link:hover,
.acct-nav-link:focus { background: #f0efe4; color: #2e3d33; text-decoration: none; }
.acct-nav-link.is-active { background: #dfe8d3; color: #2e3d33; font-weight: 600; }
.acct-ico { flex: 0 0 22px; width: 22px; height: 22px; display: inline-flex; color: #46503f; }
.acct-ico svg { width: 22px; height: 22px; }
.acct-nav-link.is-active .acct-ico { color: #2e3d33; }

.acct-help { margin-top: 18px; padding: 14px; background: #f3f0e3; border-radius: 14px; }
.acct-help-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.acct-help-icon {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%;
  background: #e4ecdf; color: #2e3d33;
  display: flex; align-items: center; justify-content: center;
}
.acct-help-icon svg { width: 20px; height: 20px; }
.acct-help-text strong { display: block; font-family: 'Playfair Display', serif; font-size: 16px; font-weight: 600; color: #2c2c2c; }
.acct-help-text span { font-size: 12.5px; color: #6f6f64; }
.acct-help-btn {
  display: block; text-align: center; padding: 9px 12px;
  border: 1px solid #aab79d; border-radius: 20px;
  color: #2e3d33; font-size: 13px; text-decoration: none;
}
.acct-help-btn:hover { background: #e4ecdf; color: #2e3d33; text-decoration: none; }

.acct-tagline { margin: 22px 8px 6px; font-family: 'Caveat', cursive; font-size: 26px; line-height: 1.05; color: #7d8a74; }
.acct-tagline span { display: block; }
.acct-tagline span + span { padding-left: 34px; }

@media (max-width: 991px) {
  body[class^="account-"] [id^="account-"].container:not(#account-login) > .row { margin-left: 0; margin-right: 0; }
  body[class^="account-"] #column-left { margin: 0 0 14px; }
  .acct-nav { padding: 6px 0; background: transparent; box-shadow: none; }
  .acct-nav-list {
    display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 8px;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .acct-nav-list::-webkit-scrollbar { display: none; }
  .acct-nav-list li { flex: 0 0 auto; }
  .acct-nav-link {
    white-space: nowrap; padding: 9px 14px; gap: 8px; margin: 0;
    border: 1px solid #e3dccb; border-radius: 999px; background: #fffdf8; font-size: 14px;
  }
  .acct-nav-link.is-active { background: #2e3d33; border-color: #2e3d33; color: #fff; }
  .acct-nav-link.is-active .acct-ico { color: #fff; }
  .acct-ico { flex-basis: 18px; width: 18px; height: 18px; }
  .acct-ico svg { width: 18px; height: 18px; }
  .acct-help, .acct-tagline { display: none; }
  body[class^="account-"] #content:not(.acct-dash) { margin: 0 0 24px; padding: 22px 18px; }
  body[class^="account-"] #content.acct-dash { margin: 0 0 24px; }
}

/* ---------- Sub-page content skin ------------------------------------- */
body[class^="account-"] #content h1,
body[class^="account-"] #content h2 { text-align: left; }
body[class^="account-"] #content h1 {
  font-family: 'Playfair Display', serif;
  font-size: 34px; font-weight: 700; text-transform: none; letter-spacing: 0;
  color: #2e3d33; margin: 0 0 24px; text-align: left;
}
body[class^="account-"] #content h2 {
  font-family: 'Playfair Display', serif;
  font-size: 22px; font-weight: 600; text-transform: none; color: #2e3d33; margin: 26px 0 14px;
}
body[class^="account-"] #content h3 { font-size: 17px; font-weight: 700; color: #2c2c2c; text-transform: none; }
body[class^="account-"] #content p { color: #555; }
body[class^="account-"] #content a { color: #6b5a2c; }

body[class^="account-"] #content legend {
  display: flex; align-items: center; gap: 10px;
  border: 0; padding: 0; margin: 6px 0 20px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #2c2c2c;
}
body[class^="account-"] #content legend:after { content: ''; width: 30px; height: 2px; background: #c9a876; }
body[class^="account-"] #content fieldset { margin-bottom: 10px; }

/* Forms */
body[class^="account-"] #content .form-horizontal .control-label { text-align: left; font-size: 14px; font-weight: 600; color: #2c2c2c; padding-top: 12px; }
body[class^="account-"] #content .form-group.required .control-label:before { color: #b5514a; }
body[class^="account-"] #content .form-control {
  height: auto; padding: 11px 14px; font-size: 14px;
  border: 1px solid #e2ddce; border-radius: 8px; background: #fff; box-shadow: none;
}
body[class^="account-"] #content .form-control:focus { border-color: #c9a876; box-shadow: none; }
body[class^="account-"] #content select.form-control { padding-right: 30px; }
body[class^="account-"] #content textarea.form-control { min-height: 110px; }
body[class^="account-"] #content .text-danger { color: #b5514a; font-size: 13px; }
body[class^="account-"] #content .has-error .form-control { border-color: #d59a92; }
body[class^="account-"] #content .radio label,
body[class^="account-"] #content .checkbox label { color: #444; }

/* Buttons */
body[class^="account-"] #content .btn { border-radius: 30px; padding: 11px 26px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
body[class^="account-"] #content .btn-primary { background: #2e3d33; border-color: #2e3d33; color: #fff; }
body[class^="account-"] #content .btn-primary:hover,
body[class^="account-"] #content .btn-primary:focus { background: #24312a; border-color: #24312a; color: #fff; }
body[class^="account-"] #content .btn-default { background: #fff; border: 1px solid #d5cdb8; color: #2e3d33; }
body[class^="account-"] #content .btn-default:hover { background: #f3f0e3; color: #2e3d33; }
body[class^="account-"] #content .btn-info { background: #e4ecdf; border-color: #e4ecdf; color: #2e3d33; }
body[class^="account-"] #content .btn-info:hover { background: #d6e2ce; border-color: #d6e2ce; color: #2e3d33; }
body[class^="account-"] #content .btn-danger { background: #fff; border: 1px solid #e3b7b0; color: #a3453a; }
body[class^="account-"] #content .btn-danger:hover { background: #f8e6e3; color: #a3453a; }
body[class^="account-"] #content .btn-sm,
body[class^="account-"] #content .table .btn { padding: 8px 14px; letter-spacing: 0.04em; }
body[class^="account-"] #content .buttons { margin-top: 26px; overflow: hidden; }

/* Tables */
body[class^="account-"] #content .table-responsive { border: 0; margin-bottom: 20px; }
body[class^="account-"] #content .table { margin-bottom: 0; border-collapse: separate; border-spacing: 0; width: 100%; }
body[class^="account-"] #content .table-bordered,
body[class^="account-"] #content .table-bordered > thead > tr > th,
body[class^="account-"] #content .table-bordered > thead > tr > td,
body[class^="account-"] #content .table-bordered > tbody > tr > td,
body[class^="account-"] #content .table-bordered > tfoot > tr > td { border: 0; }
body[class^="account-"] #content .table > thead > tr > td,
body[class^="account-"] #content .table > thead > tr > th {
  background: #f3efe2; color: #6d6a58; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; padding: 13px 16px; vertical-align: middle;
}
body[class^="account-"] #content .table > thead > tr > td:first-child,
body[class^="account-"] #content .table > thead > tr > th:first-child { border-radius: 10px 0 0 10px; }
body[class^="account-"] #content .table > thead > tr > td:last-child,
body[class^="account-"] #content .table > thead > tr > th:last-child { border-radius: 0 10px 10px 0; }
body[class^="account-"] #content .table > tbody > tr > td,
body[class^="account-"] #content .table > tfoot > tr > td {
  border-top: 1px solid #f0ebdc; padding: 15px 16px; vertical-align: middle; font-size: 14px; color: #333;
}
body[class^="account-"] #content .table > tbody > tr:first-child > td { border-top: 0; }
body[class^="account-"] #content .table-hover > tbody > tr:hover { background: #faf7ee; }
body[class^="account-"] #content .table a { font-weight: 600; }
body[class^="account-"] #content .img-thumbnail { border: 1px solid #efe9d8; border-radius: 10px; padding: 3px; background: #fff; }

/* Alerts, wells, pagination */
body[class^="account-"] .alert { border: 0; border-radius: 10px; font-size: 14px; }
body[class^="account-"] .alert-success { background: #e4ecdf; color: #2f4a2b; }
body[class^="account-"] .alert-danger { background: #f8e4e0; color: #8f3a30; }
body[class^="account-"] .alert-warning { background: #f8eed3; color: #7d5c14; }
body[class^="account-"] #content .well { background: #faf7ee; border: 1px solid #efe9d8; border-radius: 12px; box-shadow: none; }
body[class^="account-"] #content .pagination > li > a,
body[class^="account-"] #content .pagination > li > span { border: 1px solid #e3dccb; border-radius: 8px; margin: 0 3px; color: #2e3d33; background: #fff; }
body[class^="account-"] #content .pagination > .active > span,
body[class^="account-"] #content .pagination > .active > a { background: #2e3d33; border-color: #2e3d33; color: #fff; }
body[class^="account-"] #content .text-right + .text-right { margin-top: 6px; }

/* ==========================================================================
   Dashboard (account/account)
   ========================================================================== */
body[class^="account-"] #content.acct-dash h1,
body[class^="account-"] #content.acct-dash h2 { margin-top: 0; }

.acct-dash-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 26px; }
body[class^="account-"] #content.acct-dash .acct-dash-title h1 { font-size: 44px; line-height: 1.05; margin: 4px 0 8px; }
.acct-welcome { font-family: 'Playfair Display', serif; font-size: 22px; color: #2c2c2c; margin: 0 0 4px; }
body[class^="account-"] #content.acct-dash .acct-intro { font-size: 15px; color: #555; margin: 0; }

.acct-profile { display: flex; align-items: center; gap: 16px; text-align: left; }
.acct-avatar {
  flex: 0 0 66px; width: 66px; height: 66px; border-radius: 50%;
  background: #e4ecdf; color: #2e3d33;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 600; letter-spacing: 0.04em;
}
.acct-profile-name { font-size: 16px; font-weight: 600; color: #2c2c2c; line-height: 1.3; }
.acct-profile-email { font-size: 13px; color: #6f6f64; margin-bottom: 6px; word-break: break-all; }
body[class^="account-"] #content .acct-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #2e3d33; text-decoration: none; }
body[class^="account-"] #content .acct-link:hover { text-decoration: underline; }
.acct-link svg { width: 14px; height: 14px; }

.acct-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; margin-bottom: 22px; }
.acct-card { background: rgba(255, 253, 248, 0.97); border-radius: 14px; box-shadow: 0 6px 22px rgba(70, 60, 30, 0.06); }
.acct-stat { display: flex; align-items: center; gap: 16px; padding: 20px; }
.acct-stat-icon { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #e4ecdf; color: #2e3d33; }
.acct-stat-icon svg { width: 26px; height: 26px; }
.acct-stat-icon.is-rose { background: #f8e6e2; color: #b5483c; }
.acct-stat-icon.is-gold { background: #f6ecd4; color: #b4862f; }
.acct-stat-num { font-size: 26px; font-weight: 700; color: #1f1f1f; line-height: 1.1; }
.acct-stat-label { font-size: 14px; color: #6f6f64; margin-bottom: 4px; }

.acct-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; margin-bottom: 22px; }
.acct-panel { padding: 22px 26px 12px; }
.acct-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #efe9d8; }
body[class^="account-"] #content.acct-dash .acct-panel-head h2 { font-family: 'Playfair Display', serif; font-size: 21px; font-weight: 600; margin: 0; color: #2c2c2c; }

.acct-order-row {
  display: grid; grid-template-columns: 58px 100px minmax(0, 1fr) 112px 16px;
  gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid #f0ebdc;
  color: inherit; text-decoration: none;
}
.acct-panel-head + .acct-order-row { border-top: 0; }
body[class^="account-"] #content .acct-order-row { color: #2c2c2c; }
.acct-order-row:hover { text-decoration: none; background: #fbf9f1; }
.acct-order-thumb { width: 58px; height: 58px; border-radius: 10px; object-fit: cover; background: #efe9d8; border: 1px solid #efe9d8; }
.acct-order-date { font-size: 13px; color: #8a8a7c; }
.acct-order-num { font-size: 14px; color: #2c2c2c; }
.acct-order-name { font-size: 14px; font-weight: 600; color: #2c2c2c; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.acct-order-meta { font-size: 13px; color: #6f6f64; margin-top: 2px; }
.acct-order-chevron { display: inline-flex; width: 16px; height: 16px; color: #2c2c2c; }
.acct-pill { display: inline-block; justify-self: start; padding: 5px 15px; border-radius: 20px; font-size: 12.5px; font-weight: 600; white-space: nowrap; background: #f6ecd3; color: #8a6a1f; }
.acct-pill.is-success { background: #e1ecd9; color: #3e6b3a; }
.acct-pill.is-info { background: #e7eaf0; color: #38455e; }
.acct-pill.is-danger { background: #f6dfdb; color: #9b3a30; }
.acct-pill.is-warn { background: #f6e7d3; color: #8a5a1f; }

.acct-empty { text-align: center; padding: 30px 10px 22px; color: #6f6f64; font-size: 14px; }
.acct-empty .acct-empty-icon { width: 56px; height: 56px; border-radius: 50%; background: #e4ecdf; color: #2e3d33; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.acct-empty .acct-empty-icon svg { width: 26px; height: 26px; }
.acct-empty .btn { margin-top: 12px; }

.acct-detail { display: grid; grid-template-columns: 22px 124px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid #f0ebdc; font-size: 14px; }
.acct-panel-head + .acct-detail { border-top: 0; }
.acct-detail > svg { width: 20px; height: 20px; color: #46503f; }
.acct-detail-label { color: #2c2c2c; }
.acct-detail-value { color: #555; overflow-wrap: anywhere; }
.acct-detail-value.is-muted { color: #9a9a8c; }

.acct-grid-b { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; margin-bottom: 10px; }
.acct-address, .acct-news { display: flex; gap: 18px; align-items: flex-start; padding: 20px 0 14px; }
.acct-round-icon { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 50%; background: #e4ecdf; color: #2e3d33; display: flex; align-items: center; justify-content: center; }
.acct-round-icon svg { width: 26px; height: 26px; }
.acct-address-lines { font-size: 15px; line-height: 1.65; color: #2c2c2c; }
.acct-address-lines strong { font-weight: 600; }
.acct-news-text strong { display: block; font-size: 15px; font-weight: 600; color: #2c2c2c; margin-bottom: 4px; }
.acct-news-text span { display: block; font-size: 13.5px; color: #6f6f64; line-height: 1.5; }
.acct-news-body { flex: 1; display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }

/* Toggle switch */
.acct-switch { position: relative; flex: 0 0 auto; width: 50px; height: 28px; border: 0; padding: 0; border-radius: 30px; background: #cfcabb; cursor: pointer; transition: background 0.2s ease; }
.acct-switch:after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.2s ease; }
.acct-switch[aria-checked="true"] { background: #2e3d33; }
.acct-switch[aria-checked="true"]:after { transform: translateX(22px); }
.acct-switch[disabled] { opacity: 0.6; cursor: progress; }
.acct-toast { font-size: 12.5px; color: #3e6b3a; min-height: 18px; margin-top: 8px; }
.acct-toast.is-error { color: #a3453a; }

@media (max-width: 1100px) {
  .acct-grid, .acct-grid-b { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .acct-dash-head { flex-direction: column; gap: 18px; }
  body[class^="account-"] #content.acct-dash .acct-dash-title h1 { font-size: 34px; }
  .acct-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .acct-stat { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
  .acct-panel { padding: 18px 16px 8px; }
  .acct-order-row { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "thumb info pill" "thumb prod prod"; gap: 6px 12px; }
  .acct-order-thumb { grid-area: thumb; width: 52px; height: 52px; }
  .acct-order-info { grid-area: info; }
  .acct-order-prod { grid-area: prod; }
  .acct-order-row .acct-pill { grid-area: pill; align-self: start; }
  .acct-order-row .acct-order-chevron { display: none; }
  .acct-detail { grid-template-columns: 22px minmax(0, 1fr); }
  .acct-detail-value { grid-column: 2; margin-top: -8px; }
}

/* Dashboard extras */
.acct-order-chevron svg { width: 100%; height: 100%; display: block; }
body[class^="account-"] #content .acct-edit {
  display: inline-block; padding: 6px 20px; border: 1px solid #c7d0bb; border-radius: 20px;
  background: #fff; color: #2e3d33; font-size: 13px; font-weight: 600; text-decoration: none;
}
body[class^="account-"] #content .acct-edit:hover { background: #e4ecdf; text-decoration: none; }

@media (max-width: 767px) {
  body[class^="account-"] [id^="account-"].container:not(#account-login) { padding-left: 16px; padding-right: 16px; }
}

/* Address book cards */
.acct-addr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-bottom: 8px; }
.acct-addr-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding: 22px; border: 1px solid #ece5d2; border-radius: 14px; background: #fff; }
.acct-addr-card.is-default { border-color: #b9c8ad; background: #fbfdf8; }
.acct-badge { position: absolute; top: 16px; right: 16px; padding: 3px 12px; border-radius: 20px; background: #e1ecd9; color: #3e6b3a; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; }
.acct-addr-lines { font-size: 15px; line-height: 1.7; color: #333; padding-right: 70px; }
.acct-addr-lines::first-line { font-weight: 600; color: #2c2c2c; }
.acct-addr-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Newsletter page card */
.acct-news-card { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border: 1px solid #ece5d2; border-radius: 14px; background: #fff; }
.acct-news-card .acct-news-text { flex: 1; }
.acct-news-card .acct-round-icon i { font-size: 22px; }

/* Phone-friendly list cards (order / return history) */
.acct-mlist { margin-bottom: 18px; }
body[class^="account-"] #content .acct-mcard { display: block; padding: 16px; margin-bottom: 12px; border: 1px solid #ece5d2; border-radius: 12px; background: #fff; color: #2c2c2c; text-decoration: none; }
.acct-mcard-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 16px; }
.acct-mcard-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: #6f6f64; margin-top: 4px; }
.acct-mcard-total { color: #2c2c2c; font-weight: 700; }

/* Native date input: match the height of the text inputs */
body[class^="account-"] #content input[type="date"].form-control { height: 45px; padding-top: 0; padding-bottom: 0; }
body[class^="account-"] #content .help-block { margin: 6px 0 0; font-size: 12.5px; color: #8a8a7c; }