/* The tip page: one centred card. Colours, the brand and the paper note come from brand.css. */

:root {
    --brand-size: min(36px, 7.6vw);
    --radius: 26px;
}

body {
    min-height: 100vh;
    min-height: 100svh;
    background: radial-gradient(ellipse at 50% 40%, var(--bg-1) 0%, var(--bg-2) 75%) fixed, var(--bg-2);
    color: var(--cream);
    font-family: var(--font);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overflow-x: hidden;
}

.card {
    width: min(440px, 100%);
    background: linear-gradient(180deg, #2a1d14 0%, var(--card) 100%);
    border: 1px solid var(--card-edge);
    border-radius: var(--radius);
    padding: 26px 22px 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.masthead {
    text-align: center;
}

h1 {
    margin: 0;
    line-height: 1;
}

.for {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 15px;
    overflow-wrap: anywhere;
}

.for[hidden] {
    display: none;
}

.lede,
.loading {
    margin: 8px 0 0;
    color: var(--faint);
    font-size: 15px;
    text-align: center;
}

section {
    margin-top: 24px;
}

.label {
    display: block;
    font: 500 16px var(--font);
    margin: 0 0 10px;
    color: var(--cream);
}

.label label {
    font: inherit;
}

.optional {
    color: var(--faint);
    font-weight: 400;
}

/* Presets: rows of three, and the last row stretches to fill the width. */
.presets {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.amt {
    flex: 1 1 calc((100% - 20px) / 3);
    min-height: 54px;
    font: 600 20px var(--font);
    color: var(--cream);
    background: rgba(255, 255, 255, 0.045);
    border: 1.5px solid rgba(243, 227, 200, 0.16);
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1), background 0.2s, border-color 0.2s, color 0.2s,
        box-shadow 0.2s;
}

.amt:hover {
    border-color: rgba(233, 187, 82, 0.55);
}

.amt:focus-visible,
.stepper button:focus-visible,
.retry:focus-visible,
.watch:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

.amt[aria-pressed="true"] {
    color: var(--ink);
    border-color: #f6d98a;
    background: radial-gradient(circle at 35% 30%, #fbe8a6 0%, #e6b951 55%, #c9952f 100%);
    box-shadow: 0 6px 18px rgba(233, 187, 82, 0.28), inset 0 -2px 0 rgba(120, 80, 20, 0.35);
    transform: scale(1.03);
}

/* Own amount: a stepper that becomes the selection. */
.own {
    margin-top: 14px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1.5px dashed rgba(243, 227, 200, 0.2);
    border-radius: 18px;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.own-label {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.2;
    min-width: 64px;
}

.stepper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}

.stepper button {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    font: 600 24px/1 var(--font);
    color: var(--cream);
    background: rgba(255, 255, 255, 0.07);
    border: 1.5px solid rgba(243, 227, 200, 0.2);
    cursor: pointer;
    transition: transform 0.15s, background 0.2s;
}

.stepper button:active {
    transform: scale(0.9);
}

.stepper button:disabled {
    opacity: 0.35;
    cursor: default;
}

.value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    min-width: 0;
}

.value .cur {
    font: 600 24px var(--font);
    color: var(--muted);
    margin-right: 2px;
}

.value input {
    /* Grows with the amount where field-sizing is supported, otherwise fits "100.50". */
    width: 6ch;
    min-width: 2ch;
    max-width: 7ch;
    field-sizing: content;
    text-align: center;
    font: 700 34px var(--font);
    color: var(--cream);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0;
    caret-color: var(--gold);
}

.value input:focus {
    outline: none;
    border-bottom-color: rgba(233, 187, 82, 0.6);
}

.value input::placeholder {
    color: rgba(243, 227, 200, 0.3);
}

.chip {
    position: absolute;
    top: -11px;
    right: 14px;
    font: 600 12px var(--font);
    color: var(--ink);
    background: var(--gold);
    border-radius: 999px;
    padding: 3px 10px;
    opacity: 0;
    transform: translateY(4px) scale(0.9);
    transition: opacity 0.2s, transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.own.active {
    border-style: solid;
    border-color: #f0cd76;
    background: rgba(233, 187, 82, 0.09);
    box-shadow: 0 0 0 4px rgba(233, 187, 82, 0.12);
}

.own.active .chip {
    opacity: 1;
    transform: none;
}

.own.invalid {
    border-style: solid;
    border-color: var(--warn);
    box-shadow: 0 0 0 4px rgba(239, 143, 122, 0.12);
}

.own.invalid .value input {
    color: var(--warn);
}

.hint {
    margin: 8px 2px 0;
    font-size: 13px;
    color: var(--faint);
    min-height: 1.3em;
}

.hint.warn {
    color: var(--warn);
}

/* The note the panda holds: it wakes, blushes and follows the caret while you write. */
.peek {
    transform: translateX(-50%) translateY(5px);
    transition: transform 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}

.note-wrap.awake .peek {
    transform: translateX(-50%) translateY(0);
}

.peek .pupil {
    transition: transform 0.25s ease-out;
}

.peek .lid {
    transform-box: fill-box;
    transform-origin: top;
    transform: scaleY(0.55);
    transition: transform 0.3s;
}

.note-wrap.awake .peek .lid {
    transform: scaleY(0);
}

.peek .blush {
    opacity: 0;
    transition: opacity 0.4s;
}

.note-wrap.awake .peek .blush {
    opacity: 0.55;
}

.message-note {
    padding: 14px 16px 30px;
    transform: rotate(-0.6deg);
    transition: transform 0.3s;
}

.note-wrap.awake .message-note {
    transform: rotate(0deg);
}

.note-wrap:focus-within .note {
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(233, 187, 82, 0.45);
}

.message-note textarea {
    display: block;
    width: 100%;
    min-height: 112px;
    resize: none;
    font: 400 17px/28px var(--font);
    color: var(--paper-ink);
    background: repeating-linear-gradient(to bottom, transparent 0 27px, rgba(120, 80, 40, 0.2) 27px 28px);
    background-attachment: local;
    border: 0;
    padding: 0;
    outline: none;
}

.message-note textarea::placeholder {
    color: rgba(74, 48, 32, 0.5);
}

.count {
    position: absolute;
    right: 14px;
    bottom: 8px;
    font: 700 13px var(--font);
    color: rgba(74, 48, 32, 0.85);
}

.count.near {
    color: #b2452f;
}

/* Total and pay */
.total {
    margin: 22px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 17px;
    color: var(--muted);
}

.total strong {
    font: 700 22px var(--font);
    color: var(--cream);
    display: inline-block;
}

.total strong:empty {
    display: none;
}

.total strong.bump {
    animation: bump 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@keyframes bump {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.18);
    }
    100% {
        transform: scale(1);
    }
}

.coin-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    flex-shrink: 0;
    background: radial-gradient(circle at 35% 30%, #fbe8a6, #e6b951 55%, #b5832a);
    box-shadow: inset 0 0 0 2px #a9781f;
}

/* PayPal renders its own buttons in an iframe; they are disabled through the SDK, this only dims them.
   Its document is light, and an iframe whose colour scheme differs from its page gets an opaque white
   background, so the container is light too. */
/* PayPal's buttons and its inline card form sit on a paper panel: the card form draws dark text on a
   transparent background inside PayPal's iframe, which we cannot style, so it needs a light surface. */
.pay {
    color-scheme: light;
    margin-top: 14px;
    min-height: 76px;
    padding: 14px;
    background: var(--paper);
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px rgba(90, 60, 30, 0.25), 0 10px 24px rgba(0, 0, 0, 0.3);
    transition: opacity 0.2s;
}

.pay[aria-disabled="true"] {
    opacity: 0.45;
}

/* "Opening PayPal…" after a click, while PayPal loads its card form or window; empty otherwise. */
.opening {
    margin: 8px 0 0;
    min-height: 1.4em;
    text-align: center;
    font-size: 13px;
    color: var(--faint);
}

/* Under the buttons: a way to see the owner's side, the public sample dashboard. */
.foot {
    margin: 18px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--faint);
    line-height: 1.8;
}

.foot a {
    color: var(--muted);
    text-decoration-color: rgba(201, 176, 140, 0.4);
}

/* Errors: a small paper note with a friendly sentence and a way to try again. */
.error-note {
    margin-top: 16px;
    padding: 14px 16px;
    text-align: center;
    transform: rotate(-0.6deg);
}

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

.error-note p {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.4;
}

.retry {
    font: 600 14px var(--font);
    color: var(--paper-ink);
    background: rgba(255, 255, 255, 0.35);
    border: 1.5px solid rgba(90, 60, 30, 0.35);
    border-radius: 999px;
    padding: 6px 16px;
    cursor: pointer;
}

/* Success and pending: the panda over a paper note in the same card. */
.done {
    text-align: center;
}

.done:focus {
    outline: none;
}

.done-note {
    padding: 26px 20px 22px;
    transform: rotate(-0.6deg);
}

.done-note h2 {
    font: 600 24px var(--font);
    margin: 0 0 6px;
}

.done-note p {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
}

.done-note .paid {
    font: 700 40px/1.1 var(--font);
    color: #6b4426;
    margin: 4px 0 8px;
}

.heart {
    transform-box: fill-box;
    transform-origin: center;
    animation: heart 1.6s ease-in-out infinite;
}

@keyframes heart {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.18);
    }
}

.watch {
    display: block;
    margin-top: 22px;
    padding: 14px 18px;
    font: 600 18px var(--font);
    color: var(--ink);
    text-decoration: none;
    border-radius: 16px;
    background: radial-gradient(circle at 35% 30%, #fbe8a6 0%, #e6b951 55%, #c9952f 100%);
    box-shadow: 0 6px 18px rgba(233, 187, 82, 0.28), inset 0 -2px 0 rgba(120, 80, 20, 0.35);
}

/* Inside the side by side view (?embed) the panda is on screen beside the tip page, so the success
   screen offers another tip instead of the panda, and the sample dashboard link goes. */
.tip-again {
    display: none;
    margin-left: auto;
    margin-right: auto;
    border: 0;
    cursor: pointer;
}

html.embedded .tip-again {
    display: block;
}

html.embedded #watch-panda,
html.embedded .foot {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .amt,
    .chip,
    .peek,
    .peek .pupil,
    .peek .lid,
    .peek .blush,
    .message-note {
        transition: none;
    }

    .total strong.bump,
    .heart {
        animation: none;
    }
}