/* Client account page, loaded after the shared brand stylesheet. The page
carries the same inline base (reset, brand colours, nav, footer) as the
other content pages, so only what is particular to the account lives here.
The nav is fixed, as on every page, so the content starts below it. */
body.wpj-account { background: var(--charcoal, #1a1a1a); color: var(--sand, #f5ede0); line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; }
/* Links inside the account content choose their own colour and underline;
the nav and footer keep the site's. */
.acct-wrap a { color: inherit; }
.acct-wrap a:hover { text-decoration: none; }
.acct-link-btn { border: 0; background: transparent; color: #edc68c; font: inherit; font-size: .94rem; text-decoration: underline; text-underline-offset: 4px; padding: 6px 0; cursor: pointer; }
.acct-link-btn:hover { color: var(--gold-light, #d4a85c); }
/* Text buttons keep their look and get a target a finger can find: 44px tall,
centred on the words, without moving anything around them. */
.acct-link-btn, .acct-heart { position: relative; }
.acct-link-btn::after, .acct-heart::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
.acct-signout { text-align: center; margin: 10px 0 0; }
.acct-signout:empty { display: none; }
.acct-wrap { width: min(1120px, 100% - 32px); margin: 0 auto; padding: 124px 0 72px; flex: 1 0 auto; }
.acct-head { text-align: center; margin-bottom: 28px; }
.acct-eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .3em; color: var(--gold); margin: 0 0 14px; }
.acct-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.125rem, 4.4vw, 3.25rem); line-height: 1.1; margin: 0 0 12px; }
.acct-lede { max-width: 40em; margin: 0 auto; color: #ddd5c9; font-size: 1.04rem; line-height: 1.55; }
.acct-status { text-align: center; min-height: 1.4em; color: #c9c0b2; font-size: .95rem; margin: 0 0 18px; }
.acct-status:empty { margin: 0; min-height: 0; }
.acct-status.is-good { color: #b9dcb0; }
.acct-card { background: var(--wpj-card, #161616); border: 1px solid var(--wpj-hair-30, rgba(196, 148, 74, .3)); border-top: 2px solid var(--gold); padding: 26px 28px; }
.acct-card + .acct-card { margin-top: 20px; }
.acct-card h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; margin: 0 0 10px; }
.acct-notice { max-width: 40em; margin: 0 auto; text-align: center; }
.acct-notice p { color: #ddd5c9; line-height: 1.6; }
.acct-notice a, .acct-side-note a, .acct-aside a { color: #edc68c; text-decoration: underline; text-underline-offset: 3px; }
.acct-auth { max-width: 520px; margin: 0 auto; }
.acct-tabs { display: flex; border-bottom: 1px solid var(--wpj-hair-30, rgba(196, 148, 74, .3)); margin: -6px 0 22px; }
.acct-tab { flex: 1; border: 0; background: transparent; color: #c9c0b2; font: inherit; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 12px 6px 14px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.acct-tab.is-active { color: var(--sand); border-bottom-color: var(--gold); }
.acct-tab:focus-visible, .acct-btn:focus-visible, .acct-link-btn:focus-visible, .acct-field :is(input, select, textarea):focus-visible, .acct-details summary:focus-visible { outline: 2px solid #edc68c; outline-offset: 3px; }
.acct-field { margin-bottom: 16px; }
.acct-field label { display: block; font-size: .688rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--off-white, #e8e0d4); margin-bottom: 7px; }
.acct-opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: #c9c0b2; }
.acct-field input, .acct-field select, .acct-field textarea { width: 100%; box-sizing: border-box; background: var(--wpj-input, #101010); border: 1px solid rgba(196, 148, 74, .32); padding: 12px 14px; min-height: 48px; font-family: var(--font-body); font-size: 1rem; color: var(--sand); border-radius: 0; }
.acct-field select { -webkit-appearance: none; appearance: none; padding-right: 42px; color-scheme: dark; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; }
.acct-field select option, .acct-field select optgroup { background: var(--wpj-card, #161616); color: var(--sand); }
.acct-field textarea { resize: vertical; min-height: 84px; }
.acct-field input:focus, .acct-field select:focus, .acct-field textarea:focus { border-color: var(--gold); }
.acct-field :is(input, select, textarea):focus:not(:focus-visible) { outline: none; }
.acct-field input[aria-invalid="true"], .acct-field select[aria-invalid="true"] { border-color: #f59a8e; }
.acct-field input::placeholder, .acct-field textarea::placeholder { color: #8f877b; opacity: 1; }
.acct-help { color: #c9c0b2; font-size: .88rem; line-height: 1.5; margin: 6px 0 0; }
.acct-card > .acct-help { margin: 0 0 18px; }
.acct-err { color: #ffb7ac; font-size: .9rem; min-height: 1.3em; margin: 0 0 10px; }
.acct-err:empty { min-height: 0; margin: 0; }
.acct-btn { display: inline-block; width: 100%; border: 1px solid var(--gold); background: var(--gold); color: #111; font: inherit; font-size: .95rem; font-weight: 600; letter-spacing: .06em; padding: 14px 18px; min-height: 50px; cursor: pointer; }
.acct-btn:hover:not(:disabled) { background: var(--gold-light, #d4a85c); border-color: var(--gold-light, #d4a85c); }
.acct-btn:disabled { opacity: .6; cursor: progress; }
.acct-btn--ghost { background: transparent; color: var(--gold); }
.acct-btn--ghost:hover:not(:disabled) { color: #111; }
.acct-btn--small { width: auto; min-height: 40px; padding: 8px 14px; font-size: .85rem; }
.acct-aside { color: #c9c0b2; font-size: .875rem; line-height: 1.55; text-align: center; margin: 12px 0 0; }
/* Continue with Google: Google's light button, the G in its own colours. */
.acct-or { display: flex; align-items: center; gap: 14px; margin: 18px 0 14px; color: #8f877b; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.acct-or::before, .acct-or::after { content: ''; flex: 1; border-top: 1px solid var(--wpj-hair-30, rgba(196, 148, 74, .3)); }
.acct-google { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 50px; padding: 12px 18px; background: #fff; color: #1f1f1f !important; border: 1px solid #dadce0; font-size: .95rem; font-weight: 600; letter-spacing: .02em; text-decoration: none !important; }
.acct-google:hover { background: #f3f1ee; border-color: #c9c5bd; }
.acct-google:focus-visible { outline: 2px solid #edc68c; outline-offset: 3px; }
.acct-google svg { width: 20px; height: 20px; flex: none; }
.acct-google + .acct-aside { margin-top: 16px; }
.acct-dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.acct-section + .acct-section { margin-top: 30px; }
.acct-section-title { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--wpj-hair-30, rgba(196, 148, 74, .3)); }
.acct-section-help { color: #c9c0b2; font-size: .9rem; margin: -6px 0 14px; }
.acct-list { display: grid; gap: 14px; }
.acct-heart { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: #edc68c; font: inherit; font-size: .9rem; padding: 0; cursor: pointer; }
.acct-heart svg { width: 18px; height: 18px; fill: var(--gold); stroke: var(--gold); stroke-width: 1.6; stroke-linejoin: round; }
.acct-heart:hover { color: var(--gold-light, #d4a85c); }
.acct-heart:hover svg { fill: none; }
.acct-empty { color: #c9c0b2; font-size: .95rem; margin: 0; }
.acct-empty a { color: #edc68c; text-decoration: underline; text-underline-offset: 3px; }
.acct-trip { display: grid; grid-template-columns: 148px minmax(0, 1fr); background: var(--wpj-card, #161616); border: 1px solid rgba(196, 148, 74, .22); }
.acct-trip-photo { background: #0e0e0e; min-height: 112px; }
.acct-trip-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.acct-trip-body { padding: 16px 18px; min-width: 0; }
.acct-trip-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.acct-trip h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.22rem; margin: 0; line-height: 1.25; }
.acct-badge { font-size: .66rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; padding: 4px 8px; border: 1px solid rgba(196, 148, 74, .5); color: #edc68c; white-space: nowrap; }
.acct-badge--good { border-color: rgba(120, 180, 110, .6); color: #b9dcb0; }
.acct-badge--muted { border-color: rgba(201, 192, 178, .4); color: #c9c0b2; }
.acct-badge--live { border-color: var(--gold); background: var(--gold); color: #111; }
.acct-trip-meta { margin: 8px 0 0; color: #ddd5c9; font-size: .93rem; line-height: 1.5; }
.acct-trip-meta span { display: inline-block; white-space: nowrap; }
.acct-trip-meta span + span::before { content: '\00b7'; margin: 0 8px; color: #8f877b; }
.acct-verify { border-top-color: #edc68c; margin-bottom: 24px; }
.acct-verify p { color: #ddd5c9; line-height: 1.55; margin: 0 0 14px; }
.acct-verify strong { color: var(--sand); }
.acct-book-jump { display: none; margin: 0 0 22px; text-align: center; }
#bookCard { scroll-margin-top: 84px; }
.acct-trip-note { margin: 8px 0 0; color: #c9c0b2; font-size: .9rem; line-height: 1.5; }
.acct-trip-actions { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; align-items: center; }
.acct-trip-actions a { color: #edc68c; font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; }
.acct-side .acct-card h2 { font-size: 1.35rem; }
.acct-details { padding: 0; }
.acct-details summary { cursor: pointer; list-style: none; padding: 18px 28px; font-family: var(--font-display); font-size: 1.2rem; position: relative; }
.acct-details summary::-webkit-details-marker { display: none; }
.acct-details summary::after { content: '+'; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); color: var(--gold-light, #d4a85c); font-size: 1.3rem; font-weight: 300; }
.acct-details[open] summary::after { content: '\2212'; }
.acct-details form { padding: 0 28px 24px; }
/* A phone number: its country code, picked from a list of full country names,
joined to the number. The select is the real control, transparent over its
compact label ("GB +44"), so the list, the keyboard and screen readers all
stay native. The ring of a focused part goes round the whole field (where
:has() works; elsewhere the number box keeps its own ring). */
.acct-phone { display: flex; }
.acct-phone-cc { position: relative; flex: none; display: flex; align-items: center; min-width: 7rem; padding: 0 36px 0 14px; border: 1px solid rgba(196, 148, 74, .32); background: var(--wpj-input, #101010) url("data:image/svg+xml;utf8,") no-repeat right 14px center / 12px 8px; color: var(--sand); font-size: 1rem; white-space: nowrap; }
.acct-field .acct-phone-cc select { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.acct-field .acct-phone input { flex: 1; width: auto; min-width: 0; margin-left: -1px; }
.acct-phone-cc:focus-within { border-color: var(--gold); }
.acct-phone-cc:focus-within, .acct-field .acct-phone input:focus { z-index: 1; }
@supports selector(:has(*)) {
.acct-field .acct-phone input:focus-visible { outline: none; }
.acct-phone:has(:focus-visible) { outline: 2px solid #edc68c; outline-offset: 3px; }
}
.acct-facts { margin: 0 0 18px; }
.acct-facts dt { font-size: .688rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--off-white, #e8e0d4); margin-bottom: 4px; }
.acct-facts dd { margin: 0; overflow-wrap: anywhere; }
.acct-saved { color: #b9dcb0; font-size: .9rem; margin: 0 0 10px; }
.acct-saved:empty { display: none; }
.acct-side-note { color: #c9c0b2; font-size: .88rem; line-height: 1.55; margin: 18px 4px 0; }
body.wpj-account .footer { margin-top: auto; }
/* Phones read the trips first; the booking form follows, one tap away. */
@media (max-width: 900px) {
.acct-dash-grid { grid-template-columns: 1fr; }
.acct-book-jump { display: block; }
}
@media (max-width: 560px) {
.acct-link-btn { white-space: nowrap; }
.acct-wrap { width: calc(100% - 32px); padding-top: 104px; }
.acct-card { padding: 20px 18px; }
.acct-details summary { padding: 16px 18px; }
.acct-details form { padding: 0 18px 20px; }
.acct-trip { grid-template-columns: 1fr; }
.acct-trip-photo { aspect-ratio: 16 / 9; min-height: 0; }
}
/* ---------------------------------------------------------------------------
Payments on a booking (js/account-payments.js): the trip total, what is
paid and what is left, a friendly reminder when a payment is close or late,
the scheduled payments and a Pay invoice button for each open invoice. It
runs as a band across the foot of the expedition card, and the invoices no
trip claims get their own short list under "Invoices to pay". Sizes stay at
or above the body text so the figures read easily.
--------------------------------------------------------------------------- */
.acct-trip > .acct-pay { grid-column: 1 / -1; }
.acct-pay { border-top: 1px solid rgba(196, 148, 74, .22); padding: 18px 20px 20px; background: rgba(196, 148, 74, .045); }
.acct-pay[hidden], .acct-pay-row[hidden], .acct-pay-general[hidden] { display: none; }
.acct-pay-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin: 0 0 12px; }
.acct-pay-title { font-family: var(--font-body); font-size: .74rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0; }
.acct-pay-chip { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 4px 9px; border: 1px solid rgba(196, 148, 74, .5); color: #edc68c; white-space: nowrap; }
.acct-pay-chip--good { border-color: rgba(120, 180, 110, .6); color: #b9dcb0; }
.acct-pay-chip--soon { border-color: #edc68c; background: rgba(237, 198, 140, .12); }
.acct-pay-chip--late { border-color: rgba(255, 183, 172, .7); background: rgba(255, 140, 120, .1); color: #ffcfc7; }
.acct-pay-chip--calm { border-color: rgba(201, 192, 178, .45); color: #ddd5c9; }
.acct-pay-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 0; background: rgba(196, 148, 74, .2); border: 1px solid rgba(196, 148, 74, .2); }
.acct-pay-fig { background: var(--wpj-card, #161616); padding: 12px 14px 13px; min-width: 0; }
.acct-pay-fig dt { font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #c9c0b2; }
.acct-pay-fig dd { margin: 4px 0 0; font-size: 1.32rem; font-weight: 600; line-height: 1.2; color: var(--sand); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.acct-pay-fig--balance dd { color: #edc68c; }
.acct-pay-meter { height: 6px; margin: 12px 0 0; background: rgba(245, 237, 224, .1); overflow: hidden; }
.acct-pay-meter span { display: block; height: 100%; background: linear-gradient(90deg, var(--gold, #c4944a), #edc68c); }
.acct-pay[data-pay-status="paid"] .acct-pay-meter span { background: #8fbf84; }
.acct-pay[data-pay-status="paid"] .acct-pay-fig--balance dd { color: #b9dcb0; }
.acct-pay-when { margin: 14px 0 0; color: #ddd5c9; font-size: 1rem; line-height: 1.5; }
.acct-pay-when strong { color: var(--sand); font-weight: 600; white-space: nowrap; }
.acct-pay-remind { display: flex; gap: 12px; align-items: flex-start; margin: 14px 0 0; padding: 13px 16px; border: 1px solid rgba(237, 198, 140, .4); border-left: 3px solid #edc68c; background: rgba(196, 148, 74, .1); }
.acct-pay-remind svg { flex: none; width: 22px; height: 22px; margin-top: 1px; fill: none; stroke: #edc68c; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.acct-pay-remind p { margin: 0; min-width: 0; color: var(--sand); font-size: 1rem; line-height: 1.55; }
.acct-pay-remind strong { font-weight: 600; color: #f7dcb0; }
.acct-pay-remind a { color: #edc68c; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.acct-pay-date { white-space: nowrap; }
.acct-pay-remind--late { border-color: rgba(255, 183, 172, .45); border-left-color: #ffb7ac; background: rgba(255, 140, 120, .07); }
.acct-pay-remind--late svg { stroke: #ffb7ac; }
.acct-pay-remind--late strong { color: #ffd6cf; }
.acct-pay-subtitle { margin: 18px 0 0; font-family: var(--font-body); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #c9c0b2; }
.acct-pay-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid rgba(196, 148, 74, .18); }
/* A row: the date and what it is on the left, the amount on the right, and on
an invoice the Pay invoice button beside it. A list holding an invoice keeps
the button's column on every row, so the amounts line up. */
.acct-pay-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date amt" "what amt"; align-items: center; column-gap: 18px; row-gap: 2px; padding: 12px 0; border-bottom: 1px solid rgba(196, 148, 74, .18); }
.acct-pay-list.has-invoice > .acct-pay-row { grid-template-columns: minmax(0, 1fr) auto 9.5em; grid-template-areas: "date amt btn" "what amt btn"; }
.acct-pay-row-date { grid-area: date; color: var(--sand); font-size: 1rem; font-weight: 600; }
.acct-pay-row-what { grid-area: what; color: #c9c0b2; font-size: .94rem; overflow-wrap: anywhere; }
.acct-pay-row-note { display: block; font-size: .88rem; }
.acct-pay-row.is-late .acct-pay-row-what, .acct-pay-row--invoice.is-late .acct-pay-row-date { color: #ffcfc7; }
.acct-pay-row-amt { grid-area: amt; color: var(--sand); font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.acct-wrap a.acct-pay-btn { grid-area: btn; display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 10px 16px; border: 1px solid var(--gold); background: var(--gold); color: #111; font-size: .95rem; font-weight: 600; letter-spacing: .04em; line-height: 1.2; text-align: center; text-decoration: none; }
.acct-wrap a.acct-pay-btn:hover { background: var(--gold-light, #d4a85c); border-color: var(--gold-light, #d4a85c); }
.acct-wrap a.acct-pay-btn:focus-visible { outline: 2px solid #edc68c; outline-offset: 3px; }
.acct-pay-foot { margin: 14px 0 0; color: #c9c0b2; font-size: .88rem; line-height: 1.5; }
.acct-pay-general .acct-pay-list { margin: 0; padding: 0 20px; background: var(--wpj-card, #161616); border: 1px solid rgba(196, 148, 74, .22); border-top: 2px solid var(--gold); }
.acct-pay-general .acct-pay-row:last-child { border-bottom: 0; }
@media (max-width: 560px) {
.acct-pay { padding: 16px 16px 18px; }
.acct-pay-general .acct-pay-list { padding: 0 16px; }
.acct-pay-row, .acct-pay-list.has-invoice > .acct-pay-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "date amt" "what what" "btn btn"; }
.acct-wrap a.acct-pay-btn { margin-top: 10px; min-height: 50px; font-size: 1rem; }
}
@media (max-width: 480px) {
.acct-pay-figures { grid-template-columns: 1fr; }
.acct-pay-fig { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 14px; }
.acct-pay-fig dd { margin: 0; font-size: 1.2rem; text-align: right; }
}
/* Days to go, over the photo of a booked expedition that has yet to start. */
.acct-trip-photo { position: relative; }
.acct-countdown { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; background: linear-gradient(to bottom, rgba(10, 10, 10, 0), rgba(10, 10, 10, .8)); color: var(--sand, #f5ede0); font-size: .62rem; font-weight: 600; letter-spacing: .18em; line-height: 1.2; text-transform: uppercase; }
.acct-countdown b { display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: 1.75rem; font-weight: 400; letter-spacing: 0; line-height: 1; text-transform: none; }
@media (max-width: 560px) {
.acct-countdown { padding: 44px 16px 14px; font-size: .68rem; }
.acct-countdown b { font-size: 2.6rem; }
}
/* Text for screen readers only. */
.acct-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Where next: three expeditions picked from the client's own trips and saved
list (js/account-recs.js). Three across when the column has room for them,
a row to swipe through when it does not. */
.acct-next-wrap { container-type: inline-size; }
.acct-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.acct-next-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--wpj-card, #161616); border: 1px solid rgba(196, 148, 74, .22); transition: border-color .2s ease; }
.acct-next-card:hover { border-color: rgba(196, 148, 74, .55); }
/* The name is the link, so it reads as one short name; its ::after stretches
over the card so all of it can be tapped. The heart sits above it. */
.acct-wrap .acct-next-link { color: inherit; text-decoration: none; }
.acct-next-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.acct-next-link:focus-visible { outline: none; }
.acct-next-link:focus-visible::after { outline: 2px solid #edc68c; outline-offset: 3px; }
.acct-next-photo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #0e0e0e; }
.acct-next-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.acct-next-card:hover .acct-next-photo img { transform: scale(1.04); }
.acct-next-photo::after { content: ''; position: absolute; inset: 50% 0 0; background: linear-gradient(to bottom, rgba(10, 10, 10, 0), rgba(10, 10, 10, .7)); pointer-events: none; }
.acct-next-region { position: absolute; left: 14px; bottom: 11px; z-index: 1; color: var(--sand, #f5ede0); font-size: .64rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; }
.acct-next-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.acct-next-text { flex: 1; padding-bottom: 14px; }
.acct-next-name { margin: 0; font-family: var(--font-display); font-size: 1.18rem; font-weight: 400; line-height: 1.25; }
.acct-next-sub { margin: 4px 0 0; color: #c9c0b2; font-size: .88rem; line-height: 1.45; }
.acct-next-meta { margin: 8px 0 0; color: #ddd5c9; font-size: .86rem; }
.acct-next-why { margin: 0; padding-top: 11px; border-top: 1px solid rgba(196, 148, 74, .2); color: #edc68c; font-family: var(--font-display); font-size: .92rem; font-style: italic; line-height: 1.4; }
.acct-next-save { position: absolute; top: 10px; right: 10px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(245, 237, 224, .5); border-radius: 999px; background: rgba(17, 17, 17, .58); cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: transform .15s ease, background .2s ease; }
.acct-next-save svg { width: 20px; height: 20px; fill: none; stroke: var(--sand, #f5ede0); stroke-width: 1.8; stroke-linejoin: round; transition: fill .15s ease, stroke .15s ease; }
.acct-next-save[aria-pressed="true"] svg { fill: var(--gold); stroke: var(--gold); }
.acct-next-save:hover { transform: scale(1.06); background: rgba(17, 17, 17, .78); }
.acct-next-save:focus-visible { outline: 2px solid #edc68c; outline-offset: 3px; }
.acct-next-save:disabled { opacity: .7; cursor: progress; }
@container (max-width: 640px) {
.acct-next { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78%, 280px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-color: rgba(196, 148, 74, .5) transparent; scrollbar-width: thin; }
.acct-next-card { scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
.acct-next-card, .acct-next-photo img, .acct-next-save, .acct-next-save svg { transition: none; }
.acct-next-card:hover .acct-next-photo img, .acct-next-save:hover { transform: none; }
}
/* Social buttons stay hidden until the server confirms configuration. */
[data-provider][hidden], [data-link-provider][hidden], [data-social-divider][hidden], [data-social-notice][hidden], #socialCard[hidden] { display: none !important; }
.acct-facebook { margin-top: 12px; }
.acct-facebook-icon { font: 700 24px/1 Arial, sans-serif; color: #1877f2; width: 20px; text-align: center; }
.acct-social-links { padding: 20px; }
.acct-social-links .acct-google { width: 100%; margin-top: 12px; font: inherit; cursor: pointer; }
.acct-social-links .acct-google:disabled { cursor: default; opacity: .65; }