/* =========================================================
   PRIME DATA GH - customer account pages
   Loaded AFTER style.css and extras.css. style.css already
   styles the login / signup / dashboard / wallet / orders /
   profile layouts; this file only adds what those pages need
   that does not exist yet (alerts, loading state, small fixes).
   It uses the same colour tokens (--bg, --surface, --border ...).
========================================================= */


/* ---------- Hidden means hidden (classes below set display) ---------- */

.cx-alert[hidden],
.cx-notice[hidden],
.cx-state[hidden],
[data-cx-content][hidden],
.cx-state [hidden] {
    display: none !important;
}


/* ---------- Guest pages: no flash of the form while a saved session is checked ---------- */

html.cx-checking .cx-guest {
    visibility: hidden;
}

html.cx-leaving body {
    opacity: 0;
}


/* ---------- Form messages ---------- */

.cx-alert,
.cx-notice {
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-size: 13.5px;
    line-height: 1.5;
}

.cx-alert {
    border: 1px solid rgba(227, 91, 91, 0.45);
    background: rgba(227, 91, 91, 0.1);
    color: #f3b1b1;
}

.cx-notice {
    margin-bottom: 18px;
    border: 1px solid rgba(21, 159, 168, 0.45);
    background: rgba(21, 159, 168, 0.1);
    color: #b7e9ec;
}

/* Neutral helper text (extras.css uses .field-hint for red error text, so this is separate) */
.cx-hint {
    color: var(--muted-dim);
    font-size: 12.5px;
    line-height: 1.45;
}

.primary-btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.cx-legal {
    margin-top: 2px;
    color: var(--muted-dim);
    font-size: 12.5px;
    line-height: 1.55;
    text-align: center;
}

.cx-legal a,
.cx-guest-link a {
    color: var(--teal);
    font-weight: 600;
    text-decoration: none;
}

.cx-guest-link {
    margin-top: 14px;
    color: var(--muted-dim);
    font-size: 13.5px;
    text-align: center;
}


/* ---------- Loading / error state on protected pages ---------- */

.cx-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 46px 24px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
}

.cx-state.is-error {
    border-color: rgba(227, 91, 91, 0.45);
    color: #f3b1b1;
}

.cx-spinner {
    width: 26px;
    height: 26px;
    border: 3px solid var(--border);
    border-top-color: var(--teal);
    border-radius: 50%;
    animation: cx-spin 0.8s linear infinite;
}

.cx-state.is-error .cx-spinner {
    display: none;
}

@keyframes cx-spin {
    to { transform: rotate(360deg); }
}

.cx-state .small-button {
    margin-top: 0;
    border: none;
    cursor: pointer;
}


/* ---------- Shared inline icons ---------- */

.cx-icon {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ---------- Small fixes so existing classes work on links / buttons ---------- */

/* wallet-action is styled for a button; allow it on links too */
a.wallet-action {
    text-decoration: none;
}

button.wallet-action {
    width: 100%;
    cursor: pointer;
}

/* ---------- Fund Wallet modal ---------- */
/* Sits on the shared .sheet-backdrop / .sheet-handle / .sheet-head / .sheet-close
   from style.css (same bottom-sheet language as the data.html payment sheet). */

.fund-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    max-width: 480px;
    max-height: 92vh;
    max-height: 92dvh;
    margin: 0 auto;
    padding: 10px 20px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -20px 40px -20px rgba(0, 0, 0, 0.6);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fund-sheet.open {
    transform: translateY(0);
}

.fund-balance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg);
}

.fund-balance-row span {
    font-size: 13px;
    color: var(--muted);
}

.fund-balance-row strong {
    font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    font-size: 17px;
    font-weight: 700;
    color: var(--teal);
    white-space: nowrap;
}

.fund-amount-group {
    margin-bottom: 14px;
}

/* Same shape as .phone-field: a bordered box with a fixed prefix + free input */
.fund-amount-field {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}

.fund-amount-field:focus-within {
    border-color: var(--border-focus);
    background: var(--surface-focus);
    box-shadow: 0 0 0 3px rgba(18, 99, 184, 0.16);
}

.fund-currency {
    display: flex;
    align-items: center;
    padding: 0 12px;
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
    border-right: 1px solid var(--border);
    white-space: nowrap;
}

.fund-amount-field input {
    flex: 1;
    min-width: 0;
    height: 54px;
    border: none;
    background: transparent;
    color: var(--text);
    padding: 0 16px;
    font-size: 18px;
    font-weight: 600;
    outline: none;
}

.fund-amount-field input::placeholder {
    color: var(--muted-dim);
    font-weight: 400;
}

/* Chrome/Safari/Firefox: hide the native up/down stepper on the amount field */
.fund-amount-field input::-webkit-outer-spin-button,
.fund-amount-field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.fund-amount-field input[type="number"] {
    -moz-appearance: textfield;
}

.fund-quick-amounts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 6px;
}

.fund-quick {
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.fund-quick:hover {
    border-color: var(--border-focus);
    background: var(--surface-focus);
}

.fund-quick:active {
    transform: scale(0.97);
}

.fund-quick.is-active {
    border-color: var(--teal);
    background: rgba(21, 159, 168, 0.14);
    color: var(--teal);
}

.fund-message {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(227, 91, 91, 0.35);
    border-radius: var(--radius-sm);
    background: rgba(227, 91, 91, 0.08);
    color: #f0a0a0;
    font-size: 13px;
    line-height: 1.5;
}

.fund-message[hidden] {
    display: none;
}

.fund-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.fund-cancel {
    flex: 1;
    height: 54px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg);
    color: var(--text);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.fund-cancel:hover {
    border-color: var(--border-focus);
}

.fund-actions .fund-continue {
    flex: 1.4;
    margin-top: 0;
}

.fund-continue:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}


/* ---------- Wallet transaction list (funding history) ---------- */

.transaction-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.transaction-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
}

.transaction-main {
    min-width: 0;
}

.transaction-desc {
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    overflow-wrap: anywhere;
}

.transaction-date {
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--muted);
}

.transaction-amount {
    flex-shrink: 0;
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
}

.transaction-amount.is-credit {
    color: var(--teal);
}

.transaction-amount.is-debit {
    color: var(--text);
}

.wallet-action-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* dashboard wallet button is a <button>; keep it on-brand */
.wallet-button {
    font-family: inherit;
}

/* profile shortcuts and logout as buttons */
button.logout-button {
    cursor: pointer;
    font-family: inherit;
}

button.logout-button[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

.profile-item strong {
    overflow-wrap: anywhere;
}

/* Long names / emails must never push the layout sideways */
.profile-card h2,
.profile-card p,
.dashboard-top h1 {
    overflow-wrap: anywhere;
}

.dashboard-top > div {
    min-width: 0;
}

/* Small-phone safety for the 4-column quick actions */
@media (max-width: 340px) {
    .quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ---------- Cookie banner (from site-extras.js) must not cover the last buttons ---------- */

/* While the banner is open it sits over the bottom of the screen and the bottom bar.
   Extra bottom room lets people scroll Log out (and other last items) clear of it. */
body:has(.consent:not([hidden])) .dashboard-page,
body:has(.consent:not([hidden])) .wallet-page,
body:has(.consent:not([hidden])) .orders-page,
body:has(.consent:not([hidden])) .profile-page {
    padding-bottom: calc(280px + env(safe-area-inset-bottom));
}