/* ==========================================================================
   UPay Payment Service — styles
   Driven by the shared Utopia design tokens. Local names below are thin
   aliases onto those tokens, so the rules that follow need no edit and the
   whole universe still re-themes from one file. Change colours in
   shared/theme/common/resources/www/utopia-theme.css, never here.
   ========================================================================== */

@import "utopia-theme.css";

:root {
    --page-bg:      var(--utopia-bg);
    --card-bg:      var(--utopia-surface);
    --border:       var(--utopia-border);
    --ink:          var(--utopia-ink);
    --ink-soft:     var(--utopia-ink-soft);
    --label:        var(--utopia-ink);
    --input-bg:     var(--utopia-surface-raised);
    --input-border: var(--utopia-border-strong);
    --placeholder:  var(--utopia-ink-faint);
    --success-bg:   var(--utopia-success);
    --success-ink:  var(--utopia-success-ink);
    --error-bg:     var(--utopia-danger);
    /* Cream on the shared red. */
    --error-ink:    var(--utopia-ink-inverse);
    --danger:       var(--utopia-danger);
    --radius:       var(--utopia-radius);
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    min-height: 100%;
}

body {
    background-color: var(--page-bg);
    color: var(--ink);
    font-family: var(--utopia-font-sans);
    font-size: 15px;
    line-height: 1.45;
    margin: 0;
}

/* Page column. The artboards put UPay on a two-column split: the explanation
   on the left, the form card on the right. */
.up-page {
    max-width: var(--utopia-page-max);
    margin: 0 auto;
    padding: 48px 28px 40px;
}

.up-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 52px;
    align-items: start;
}

@media (max-width: 900px) {
    .up-split { grid-template-columns: 1fr; gap: 28px; }
    .up-page { padding: 32px 18px; }
}

/* The account statement is a single focused column rather than a split. On the
   index the card is a grid item and takes its spacing from the grid gap; here
   it follows the lead paragraph directly and needs its own. */
.up-page--narrow {
    max-width: 620px;
}

.up-page--narrow .up-card {
    margin-top: 26px;
}

.up-eyebrow {
    font-size: 12px;
    letter-spacing: var(--utopia-tracking-label);
    text-transform: uppercase;
    color: var(--utopia-emphasis);
    margin: 0 0 10px;
}

.up-title {
    font-family: var(--utopia-font-display);
    font-size: 42px;
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0 0 12px;
}

.up-lead {
    max-width: 34em;
    margin: 0;
    color: color-mix(in srgb, var(--utopia-ink) 62%, transparent);
}

/* Dashed panel — the artboards use a dashed edge for explanatory asides, to
   separate them from the solid panels that carry real controls. */
.up-facts {
    border: 1px dashed var(--utopia-border-strong);
    border-radius: var(--utopia-radius);
    padding: 26px;
    margin-top: 26px;
}

.up-facts h5 {
    font-family: var(--utopia-font-display);
    font-size: 16px;
    margin: 0 0 12px;
}

.up-fact {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 14px;
    color: color-mix(in srgb, var(--utopia-ink) 72%, transparent);
}

.up-fact:last-child { margin-bottom: 0; }

.up-fact-mark {
    width: 18px;
    height: 18px;
    flex: none;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--utopia-accent-soft);
    color: var(--utopia-emphasis);
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.up-card {
    background-color: var(--utopia-surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--utopia-radius);
    padding: 30px;
    box-shadow: var(--utopia-shadow-md);
}

/* ---- Status banner (above the card) ---- */

.banner {
    max-width: var(--utopia-page-max);
    margin: 0 auto;
    border-radius: var(--radius);
    padding: 14px 18px;
    margin-bottom: 18px;
    box-shadow: var(--utopia-shadow-sm);
}

.banner[hidden] {
    display: none;
}

.banner.success {
    background-color: var(--success-bg);
    color: var(--success-ink);
}

.banner.error {
    background-color: var(--error-bg);
    color: var(--error-ink);
}

.banner-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 6px;
}

.banner-title svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.banner-line {
    font-size: 13px;
    opacity: 0.92;
}

.banner-line + .banner-line {
    margin-top: 2px;
}

/* ---- Card ---- */

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

.field-group {
    margin-bottom: 16px;
}

.field-group label,
.field-group .label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--label);
    margin-bottom: 6px;
}

input[type=text],
input[type=number],
select {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--ink);
    background-color: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--utopia-radius-control);
    outline: none;
    transition: border-color var(--utopia-transition), box-shadow var(--utopia-transition);
}

select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236B5E4E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

input[type=text]:focus,
input[type=number]:focus,
select:focus {
    border-color: var(--ink);
    box-shadow: var(--utopia-focus-ring);
}

input::placeholder {
    color: var(--placeholder);
}

input.invalid,
select.invalid,
input.invalid:focus,
select.invalid:focus {
    border-color: var(--danger);
    box-shadow: var(--utopia-focus-ring-danger);
}

.field-error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--danger);
}

.field-error[hidden] {
    display: none;
}

.check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 400;
    color: var(--label);
    margin-bottom: 8px;
    cursor: pointer;
}

.check input {
    width: 17px;
    height: 17px;
    flex: none;
    accent-color: var(--utopia-accent);
    margin: 0;
}

#pay-btn,
#lookup-btn {
    width: 100%;
    margin-top: 8px;
    padding: 13px;
    font-size: 15px;
    font-weight: 600;
    color: var(--utopia-bg);
    background-color: var(--utopia-accent);
    border: none;
    border-radius: var(--utopia-radius-control);
    cursor: pointer;
    transition: background-color var(--utopia-transition);
}

#pay-btn:hover,
#lookup-btn:hover {
    background-color: var(--utopia-accent-hover);
}

#pay-btn:disabled,
#lookup-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

/* Secondary action beneath a primary button. Outlined rather than filled, so it reads as a real
   way out of this page without competing with the action the page is actually for. */
.secondary-action {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: var(--ink-soft);
    background-color: transparent;
    border: 1px solid var(--input-border);
    border-radius: var(--utopia-radius-control);
    cursor: pointer;
    transition: border-color var(--utopia-transition), color var(--utopia-transition);
}

.secondary-action:hover {
    border-color: var(--ink);
    color: var(--ink);
}

/* ---- Account dashboard ---- */

.intro-text {
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--ink-soft);
}

.balance-block {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.balance-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--label);
}

.balance-amount {
    font-family: var(--utopia-font-display);
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.balance-amount.negative {
    color: var(--danger);
}

.balance-meta {
    font-size: 13px;
    color: var(--ink-soft);
}

.transactions-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0 8px;
}

.transactions-header .label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--label);
}

#refresh-btn {
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    background-color: transparent;
    border: 1px solid var(--input-border);
    border-radius: var(--utopia-radius-pill);
    cursor: pointer;
    transition: border-color var(--utopia-transition), color var(--utopia-transition);
}

#refresh-btn:hover {
    border-color: var(--ink);
    color: var(--ink);
}

#refresh-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

.transaction {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.transaction:last-child {
    border-bottom: none;
}

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

.transaction-name {
    font-size: 14px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.transaction-note {
    margin-top: 2px;
    font-size: 12px;
    color: var(--ink-soft);
    overflow-wrap: anywhere;
}

.transaction-amount {
    flex: none;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.transaction-amount.outgoing {
    color: var(--danger);
}

.transaction-amount.incoming {
    color: var(--success-ink);
}

.empty-note {
    margin: 16px 0;
    text-align: center;
    font-size: 13px;
    color: var(--ink-soft);
}

.empty-note[hidden] {
    display: none;
}

/* ---- Footer ---- */

.card-footer {
    margin: 22px 0 4px;
    text-align: center;
    font-size: 12px;
    color: var(--ink-soft);
}

.card-footer a {
    color: var(--ink-soft);
    text-decoration: none;
}

.card-footer a:hover {
    text-decoration: underline;
}