/* =============================================================
 * WIRENPOWER — ACCOUNT PAGES
 * Sign in, My Account, Orders, Addresses and the order lookup.
 * Loaded only by those pages, after styles.css, whose colours,
 * buttons and form fields it reuses.
 * ============================================================= */

.acct-page { padding: 40px 0 64px; }
.acct-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.acct-head h1 { margin: 0 0 4px; font-size: 2rem; }
.acct-head p { margin: 0; color: var(--gray-600); }
.acct-crumb { display: inline-block; margin-bottom: 8px; font-size: .9rem; color: var(--primary); text-decoration: none; font-weight: 600; }
.acct-crumb:hover { text-decoration: underline; }

.acct-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 24px; }
.acct-columns { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
@media (max-width: 900px) { .acct-columns { grid-template-columns: minmax(0, 1fr); } }

.acct-card { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 22px 24px; margin-bottom: 20px; }
.acct-card h2 { font-size: 1.1rem; margin: 0 0 6px; }
.acct-card h3 { font-size: .95rem; margin: 18px 0 8px; }
.acct-card > p { color: var(--gray-600); font-size: .92rem; line-height: 1.55; margin: 0 0 14px; }
.acct-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.acct-card-head h2 { margin: 0; }
.acct-stat { font-size: 2rem; font-weight: 800; color: var(--dark); line-height: 1.1; margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
.acct-muted { color: var(--gray-600); font-size: .9rem; }
.acct-small { font-size: .82rem; color: var(--gray-500); }
.acct-link { color: var(--primary); font-weight: 600; text-decoration: none; }
.acct-link:hover { text-decoration: underline; }
.acct-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.acct-row .btn { font-size: .9rem; padding: 9px 18px; }
.btn.acct-quiet { background: #fff; color: var(--dark-700); border: 1px solid var(--gray-300); }
.btn.acct-quiet:hover, .btn.acct-quiet:focus { border-color: var(--primary); color: var(--primary); }
.btn.acct-danger-btn { background: #fff; color: #b42318; border: 1px solid #fecaca; }
.btn.acct-danger-btn:hover, .btn.acct-danger-btn:focus { background: #fef2f2; }

.acct-list { margin: 0; }
.acct-list div { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--gray-100); font-size: .92rem; }
.acct-list div:last-child { border-bottom: 0; }
.acct-list dt { color: var(--gray-600); }
.acct-list dd { margin: 0; font-weight: 600; text-align: right; word-break: break-word; }

/* Messages. role="alert"/"status" is set in the markup, so these are read out when shown. */
.acct-alert { border-radius: 10px; padding: 12px 16px; font-size: .92rem; line-height: 1.5; margin: 0 0 16px; }
.acct-alert[hidden] { display: none; }
.acct-alert.is-error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.acct-alert.is-ok { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.acct-alert.is-info { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; }
.acct-unavailable { background: #fff7ed; border: 1px solid #fdba74; border-radius: 14px; padding: 24px 26px; margin: 8px 0 24px; }
.acct-unavailable h2 { margin: 0 0 8px; font-size: 1.2rem; color: #9a3412; }
.acct-unavailable p { margin: 0 0 14px; color: #7c2d12; line-height: 1.6; }
.acct-loading { color: var(--gray-500); padding: 24px 0; }

.acct-empty { text-align: center; padding: 48px 20px; background: #fff; border: 1px dashed var(--gray-300); border-radius: 12px; }
.acct-empty h2 { font-size: 1.15rem; margin: 0 0 8px; }
.acct-empty p { color: var(--gray-600); margin: 0 0 18px; }

/* Forms. Fields reuse .form-input from the main stylesheet. */
.acct-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.acct-form-grid .is-wide { grid-column: 1 / -1; }
@media (max-width: 560px) { .acct-form-grid { grid-template-columns: 1fr; } }
.acct-field { display: flex; flex-direction: column; gap: 6px; font-size: .85rem; font-weight: 600; color: var(--gray-700); }
.acct-field .acct-optional { font-weight: 400; color: var(--gray-500); }
.acct-field .form-input, .acct-field select { width: 100%; box-sizing: border-box; }
.acct-field select.form-input { padding-right: 32px; }
.acct-check { display: flex; align-items: center; gap: 8px; font-size: .92rem; margin: 14px 0 4px; cursor: pointer; }
.acct-check input { width: 18px; height: 18px; accent-color: var(--primary); }
.acct-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.acct-badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; background: var(--primary); color: #fff; vertical-align: middle; }
.acct-badge.is-quiet { background: var(--gray-100); color: var(--gray-700); }

/* ------------------------------------------------------------------ orders */
.acct-status { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .8rem; font-weight: 700; background: #eff6ff; color: #1d4ed8; }
.acct-status.is-fulfilled { background: #ecfdf5; color: #047857; }
.acct-status.is-partially_refunded, .acct-status.is-refunded { background: #fff7ed; color: #9a3412; }
.acct-status.is-cancelled, .acct-status.is-disputed { background: #fef2f2; color: #991b1b; }

.acct-order { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 18px 22px; margin-bottom: 14px; }
.acct-order-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 10px; }
.acct-order-number { font-weight: 800; font-size: 1.05rem; color: var(--dark); text-decoration: none; }
a.acct-order-number:hover { color: var(--primary); text-decoration: underline; }
.acct-order-date { color: var(--gray-600); font-size: .9rem; }
.acct-order-total { margin-left: auto; font-weight: 800; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.acct-order-items { margin: 0; padding: 0; list-style: none; font-size: .92rem; color: var(--gray-700); line-height: 1.7; }
.acct-order-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 12px; font-size: .9rem; }

.acct-track { background: #f8fbff; border: 1px solid #cfe1f7; border-radius: 10px; padding: 12px 16px; margin: 0 0 16px; font-size: .92rem; }
.acct-track strong { display: block; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--primary); margin-bottom: 4px; }

.acct-steps { display: flex; list-style: none; margin: 8px 0 22px; padding: 0; counter-reset: step; }
.acct-steps li { flex: 1; position: relative; text-align: center; font-size: .78rem; color: var(--gray-500); padding-top: 30px; }
.acct-steps li::before { content: ''; position: absolute; top: 8px; left: 50%; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--gray-200); z-index: 1; }
.acct-steps li::after { content: ''; position: absolute; top: 14px; left: -50%; width: 100%; height: 4px; background: var(--gray-200); }
.acct-steps li:first-child::after { display: none; }
.acct-steps li.is-done { color: var(--primary); font-weight: 700; }
.acct-steps li.is-done::before, .acct-steps li.is-done::after { background: var(--primary); }

.acct-lines { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: .95rem; }
.acct-lines td { padding: 12px 0; border-bottom: 1px solid var(--gray-100); vertical-align: top; }
.acct-lines td.num { text-align: right; white-space: nowrap; padding-left: 16px; font-variant-numeric: tabular-nums; }
.acct-lines .acct-line-name { font-weight: 600; }
.acct-build { margin: 6px 0 0; font-size: .82rem; color: var(--gray-600); line-height: 1.6; }
.acct-totals { margin: 0 0 0 auto; max-width: 320px; }
.acct-totals div { display: flex; justify-content: space-between; padding: 4px 0; font-size: .92rem; }
.acct-totals div.is-total { border-top: 1px solid var(--gray-200); margin-top: 6px; padding-top: 10px; font-weight: 800; font-size: 1.05rem; }
.acct-totals dd { margin: 0; font-variant-numeric: tabular-nums; }

.acct-pager { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }

/* --------------------------------------------------------------- addresses */
.acct-address-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-bottom: 24px; }
.acct-address { background: #fff; border: 1px solid var(--gray-200); border-radius: 12px; padding: 20px 22px; position: relative; }
.acct-address.is-default { border: 2px solid var(--primary); }
.acct-address .acct-badge { position: absolute; top: 14px; right: 14px; }
.acct-address address { font-style: normal; color: var(--gray-700); font-size: .92rem; line-height: 1.6; margin: 0 0 14px; padding-right: 64px; }
.acct-address address strong { color: var(--dark); display: block; margin-bottom: 2px; }
.acct-address .acct-row .btn { font-size: .82rem; padding: 6px 14px; }

/* ----------------------------------------------------------------- devices */
.acct-devices { list-style: none; margin: 0 0 14px; padding: 0; font-size: .9rem; }
.acct-devices li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--gray-100); }
.acct-devices li:last-child { border-bottom: 0; }
.acct-devices .acct-small { text-align: right; }
.acct-danger { border-color: #fecaca; }
.acct-danger h2 { color: #991b1b; }

/* ----------------------------------------------------------------- sign in */
/* Laid out like the cart page: the site header and footer, and one step at a time in a panel
   styled like the cart's Order Summary (site/pages/cart.html). Buttons are the navy of Send
   Message on the contact page. */
.signin-wrap { padding: 24px 20px 48px; }
.signin-step { max-width: 440px; margin: 0 auto; background: #f8f9fa; border: 1px solid var(--gray-200); border-radius: 8px; padding: 24px; }
.signin-step[hidden] { display: none; }
/* A short fade as the panel changes step, and none for anyone who has asked for less motion. */
.signin-step:not([hidden]) { animation: signin-in .2s ease-out; }
@keyframes signin-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* The panel's heading is the page's heading: one step shows at a time. */
.signin-title { font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin: 0 0 8px; color: var(--dark); }
.signin-sub { font-size: .9rem; line-height: 1.55; color: #666; margin: 0 0 20px; }
.signin-sub strong { color: var(--dark); font-weight: 600; word-break: break-all; }
/* Label and field as in the cart's promo code box; the field reuses .form-input. */
.signin-label { display: block; font-size: .875rem; font-weight: 600; color: var(--dark); margin: 0 0 6px; }
/* 16px text, so phones do not zoom in when the field is tapped. */
.form-input.signin-input { display: block; height: 46px; font-size: 1rem; }
.signin-input[aria-invalid="true"] { border-color: #cc0000; }
.signin-input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(204, 0, 0, .12); }
.signin-input:disabled { background: var(--gray-50); color: var(--gray-400); }
/* The code: large, evenly spaced digits. The extra left padding balances the letter-spacing
   after the last digit, so the six digits sit in the middle. */
.signin-code { text-align: center; font-size: 1.55rem; font-weight: 600; letter-spacing: .5em; padding-left: calc(14px + .5em); font-variant-numeric: tabular-nums; }
.signin-error { margin: 6px 0 0; font-size: .85rem; line-height: 1.45; color: #cc0000; }
.signin-error[hidden] { display: none; }

/* Sized like the cart's Proceed to Checkout, in the navy of Send Message on the contact page
   (#contact-submit-btn in site/styles.css). The line height is a button's own, so the
   signed-in step's Continue link is the same height as the buttons. */
.btn.signin-btn { position: relative; width: 100%; margin-top: 16px; padding: 14px; font-size: 1rem; line-height: normal; }
.btn-primary.signin-btn { background: #0a2540; color: #fff; }
.btn-primary.signin-btn:hover, .btn-primary.signin-btn:focus { background: #143b66; color: #fff; box-shadow: 0 4px 12px rgba(10, 37, 64, .3); }
.signin-btn:focus-visible { outline: 3px solid rgba(10, 37, 64, .35); outline-offset: 2px; }
/* The spinner and "Signed in" stay at full strength while the button is disabled. */
.signin-btn.is-busy, .signin-btn.is-done { opacity: 1; }
.signin-btn.is-busy { color: transparent; }
.signin-btn.is-busy::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%; animation: signin-spin .7s linear infinite; }
.btn-primary.signin-btn.is-done { background: #047857; box-shadow: none; }
@keyframes signin-spin { to { transform: rotate(360deg); } }

.signin-note { margin: 16px 0 0; text-align: center; font-size: .875rem; line-height: 1.5; color: #666; }
.signin-note[hidden], .signin-note [hidden] { display: none; }
/* Links in the cart's link blue. */
.signin-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: #004a99; text-decoration: none; cursor: pointer; }
.signin-link:hover, .signin-link:focus-visible { color: var(--primary-dark); text-decoration: underline; text-underline-offset: 3px; }
/* "Change", beside the bold email address: underlined, so it reads as a link and not as part of the address. */
.signin-sub .signin-link { margin-left: 6px; text-decoration: underline; text-underline-offset: 3px; }

/* Accounts switched off (the build decides): the button is disabled inside the site's shared
   hint, which reads "Coming soon" on hover, focus or tap. The hint spans the form, as it does
   on Track Order, and takes over the button's spacing. */
#sign-in-form .wnp-service-hint { display: block; margin-top: 16px; }
#sign-in-form .wnp-service-hint > .signin-btn { display: flex; margin-top: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .signin-step:not([hidden]) { animation: none; }
  .signin-btn.is-busy::after { animation-duration: 1.6s; }
}

/* ------------------------------------------------------------------- print */
/* A receipt: the order and nothing around it. */
@media print {
  .top-bar, header, nav, footer, .site-header, .main-nav, .footer, .no-print, .chat-widget, .shopify-cart-drawer,
  .shopify-cart-overlay, .compare-bar, .cookie-banner { display: none !important; }
  .acct-page { padding: 0; }
  .acct-card, .acct-order { border: 0; padding: 0; }
  .acct-columns { display: block; }
}