/* My account — page-scoped additions */
@media (min-width: 992px) { .page-account .account-sidebar { position: sticky; top: 96px; } }
.page-account .account-nav .list-group-item.active i, .page-account .account-nav .list-group-item.active span[class*="fa-"] { color: inherit; }
.page-account .order-detail-card .card-header { background: var(--brand-bg-soft); }
.page-account .order-thumb { flex: none; width: 96px; aspect-ratio: 3 / 2; object-fit: contain; background: var(--bs-white); border: 1px solid var(--brand-border); border-radius: var(--radius-sm); }
.page-account .track-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; padding-top: .25rem; }
.page-account .track-steps li { position: relative; display: flex; flex-direction: column; align-items: center; gap: .4rem; text-align: center; font-size: var(--text-xs); color: var(--brand-text-secondary); }
.page-account .track-steps li::before { content: ""; position: absolute; top: .7rem; left: -50%; width: 100%; height: 3px; background: var(--brand-border); z-index: 0; }
.page-account .track-steps li:first-child::before { display: none; }
.page-account .track-steps li.is-done::before, .page-account .track-steps li.is-current::before { background: var(--bs-success); }
.page-account .track-steps i, .page-account .track-steps span[class*="fa-"] { position: relative; z-index: 1; font-size: 1.4rem; background: var(--bs-white); color: var(--brand-border-strong); }
.page-account .track-steps .is-done i, .page-account .track-steps .is-done span[class*="fa-"] { color: var(--bs-success); }
.page-account .track-steps .is-current i, .page-account .track-steps .is-current span[class*="fa-"] { color: var(--brand-primary); }
.page-account .track-steps strong { display: block; color: var(--brand-text); font-size: var(--text-sm); }
@media (max-width: 575.98px) { .page-account .track-steps { grid-template-columns: 1fr; } .page-account .track-steps li { flex-direction: row; text-align: left; } .page-account .track-steps li::before { display: none; } }
.page-account .saved-card-icon { font-size: 2.5rem; color: var(--brand-text); }
.page-account .add-card-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; border-style: dashed; border-width: 2px; background: var(--brand-bg-soft); color: var(--brand-text); }
.page-account .add-card-tile:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.page-account .password-form {}

/* Order detail / address edit: panel header + card system ported from the invicta
   reference layouts (templates/natural/html/com_j2commerce/myprofile/bootstrap5/
   order.php, address.php, default_addresses.php) — those files shipped with no
   natural CSS at all for panel-*/address-card*/order-status/order-thumbs/account-table/
   badge-c/form-*-c. Tokens translated 1:1 from the invicta --space-*/--weight-*
   scale to natural's own rem values / --brand-*/--text-*/--tracking-* tokens. */
.page-account .panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.page-account .panel-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-tight); color: var(--brand-text); margin: 0; display: flex; align-items: center; gap: .6rem; }
.page-account .panel-title span[class*="fa-"] { color: var(--brand-primary); font-size: 1.1rem; }
.page-account .panel-sub { font-size: var(--text-sm); color: var(--brand-text-secondary); margin: .5rem 0 0; width: 100%; }
.page-account .panel-section { background: #fff; border: 1px solid var(--brand-border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 1.5rem; }
.page-account .panel-section-header { padding: .85rem 1.25rem; background: var(--brand-bg-soft); border-bottom: 1px solid var(--brand-border); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.page-account .panel-section-title { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--brand-text); margin: 0; }

/* Order status pill — same visual recipe as .status-pill (default_orderslist.php)
   so the orders list and the order-detail panel never disagree on treatment;
   modifiers keyed off J2htmlHelper::badgeClass()'s bg-*/text-bg-* output. */
.page-account .order-status { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .65rem; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: #EEF0F3; color: #3A4250; }
.page-account .order-status.bg-success, .page-account .order-status.text-bg-success { background: #E6F4EC !important; color: #155C34 !important; }
.page-account .order-status.bg-warning, .page-account .order-status.text-bg-warning { background: #FFF3DC !important; color: #7A4800 !important; }
.page-account .order-status.bg-info, .page-account .order-status.text-bg-info, .page-account .order-status.bg-primary, .page-account .order-status.text-bg-primary { background: #E3F6F5 !important; color: #15625F !important; }
.page-account .order-status.bg-danger, .page-account .order-status.text-bg-danger { background: #FDE8EA !important; color: #8A1024 !important; }
.page-account .order-status.bg-secondary, .page-account .order-status.text-bg-secondary { background: #EEF0F3 !important; color: #3A4250 !important; }

.page-account .order-thumbs { display: inline-flex; gap: .35rem; }
.page-account .order-thumbs img { border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--brand-border); background: var(--brand-bg-soft); }

.page-account .account-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.page-account .account-table-wrap { overflow-x: auto; border-radius: var(--radius-sm); border: 1px solid var(--brand-border); }
.page-account .account-table thead { background: var(--brand-bg-soft); border-bottom: 1px solid var(--brand-border); }
.page-account .account-table th { padding: .65rem 1.1rem; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-widest); color: var(--brand-text-secondary); white-space: nowrap; text-align: left; }
.page-account .account-table td { padding: .75rem 1.1rem; border-bottom: 1px solid var(--brand-border); color: var(--brand-text-body); vertical-align: middle; }
.page-account .account-table tbody tr:last-child td { border-bottom: none; }
.page-account .invoice-num { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-sm); color: var(--brand-text); white-space: nowrap; }

.page-account .badge-c { display: inline-block; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); padding: .15rem .5rem; border-radius: var(--radius-sm); }
.page-account .badge-copper { background: var(--brand-primary); color: var(--brand-text-on-primary); }

/* Address cards — 2-col grid at >=768px per the desktop mockup, 1 col below.
   `.address-body p` resets the browser's default paragraph margin, which is what
   made the shipping/billing lines render as huge-gapped stacked paragraphs. */
.page-account .address-cards { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .page-account .address-cards { grid-template-columns: repeat(2, 1fr); } }
.page-account .address-card { background: #fff; border: 1px solid var(--brand-border); border-radius: var(--radius-sm); padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; transition: border-color var(--transition-fast); }
.page-account .address-card:hover { border-color: var(--brand-border-strong); }
.page-account .address-card-default { border-color: var(--brand-primary); }
.page-account .address-card-header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.page-account .address-tag { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-heading); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--brand-text-secondary); }
.page-account .address-body { flex: 1; }
.page-account .address-body p { margin: 0; line-height: 1.45; font-size: var(--text-sm); color: var(--brand-text-body); }
.page-account .address-body p + p { margin-top: .2rem; }
.page-account .address-name { font-family: var(--font-heading); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--brand-text) !important; margin-bottom: .35rem !important; }
.page-account .address-phone { margin-top: .35rem !important; color: var(--brand-text-secondary) !important; }
.page-account .address-card-actions { display: flex; gap: .5rem; border-top: 1px solid var(--brand-border); padding-top: 1rem; margin-top: auto; flex-wrap: wrap; }
.page-account .address-delete-btn { color: var(--brand-primary); }
.page-account .address-delete-btn:hover { background: #FDE8EA; color: #8A1024; }
.page-account .address-add-card { border-style: dashed; border-width: 2px; border-color: var(--brand-border-strong); }
.page-account .address-add-card .address-body { display: flex; align-items: center; justify-content: center; }

/* Address edit form (address.php) — same "-c" suffixed system already used on the
   offline page (offline.css), scoped here so it only affects the account surface. */
.page-account .form-group-c { margin-bottom: 1rem; }
.page-account .form-label-c { display: block; font-weight: 600; margin-bottom: .35rem; color: var(--brand-text); }
.page-account .form-control-c, .page-account .form-select-c { width: 100%; border: 1px solid var(--brand-border-strong); border-radius: var(--radius-sm); padding: .65rem .9rem; background: #fff; color: var(--brand-text-body); }
.page-account .form-control-c:focus, .page-account .form-select-c:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 .2rem rgba(177, 17, 23, .25); }
.page-account .settings-form { background: #fff; border: 1px solid var(--brand-border); border-radius: var(--radius-sm); padding: 1.5rem; }
.page-account .address-form-actions { display: flex; gap: .75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--brand-border); flex-wrap: wrap; }

/* Signed-out My Account: sign-in card (+ optional View Order as Guest tab). */
.page-account .login-card-section { padding-block: clamp(2rem, 4vw, 3rem); }
.page-account .login-card { max-width: none; }
.page-account .login-tabs { display: flex; margin: calc(-1 * clamp(1.5rem, 4vw, 2.5rem)) calc(-1 * clamp(1.5rem, 4vw, 2.5rem)) 1.5rem; border-bottom: 1px solid var(--brand-border-strong); }
.page-account .login-tab { flex: 1 1 0; padding: .9rem 1rem; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; background: var(--brand-bg-soft); color: var(--brand-text-secondary); font-weight: 600; font-size: var(--text-sm); }
.page-account .login-tab:hover { color: var(--brand-text); }
.page-account .login-tab.active { background: #fff; color: var(--brand-text); border-bottom-color: var(--brand-primary); }
.page-account .login-tab:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: -4px; }
.page-account .login-field-group { margin-bottom: 1.25rem; }
.page-account .login-input-icon-wrap { position: relative; }
.page-account .login-input-icon { position: absolute; top: 50%; left: .9rem; transform: translateY(-50%); color: var(--brand-text-secondary); pointer-events: none; }
.page-account .login-field-input { padding-left: 2.6rem; min-height: 3rem; }
.page-account .login-field-input[type="password"], .page-account .login-input-icon-wrap:has(.login-pw-toggle) .login-field-input { padding-right: 3rem; }
.page-account .login-pw-toggle { position: absolute; top: 50%; right: .35rem; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 0; background: transparent; color: var(--brand-text-secondary); border-radius: var(--radius-sm); }
.page-account .login-pw-toggle:hover { color: var(--brand-text); }
.page-account .login-pw-toggle:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 0; }
.page-account .login-remember-row { margin-bottom: 1.25rem; }
.page-account .login-forgot-link { font-size: var(--text-sm); }
.page-account .login-card .auth-card-foot { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--brand-border); text-align: center; color: var(--brand-text-secondary); }
.page-account .login-card .auth-card-foot a { font-weight: 600; }