/*
 * Hibabox Pro kiosk mock-up (website/pro/partials/kiosk + reader). Draws the product UI itself —
 * kept separate from the page design in hibabox-pro.css so the two can change independently.
 */
/* =====================================================================
 * Kiosk mock-up (website/pro/partials/kiosk). Portrait 21.5" screen with
 * the real Pro kiosk chrome (#14161c) and per-tenant theme via --k-btn/--k-acc.
 * Inner sizes are in em off a container-relative font size, so one markup
 * scales from the hero render down to small tab previews.
 * ===================================================================== */
.hp-kiosk { --k-btn: #1b8a4b; --k-acc: #e3f4ea; --k-chrome: #14161c; position: relative; width: 100%; max-width: 360px; margin: 0 auto; }
.hp-kiosk--sm { max-width: 290px; }
.hp-kiosk--lg { max-width: 290px; }
.hp-kiosk--reader.hp-kiosk--lg { max-width: 320px; }
.hp-kiosk--reader.hp-kiosk--sm { max-width: 320px; }
.hp-kiosk--reader:not(.hp-kiosk--lg):not(.hp-kiosk--sm) { max-width: 340px; }
.hp-kiosk-frame {
    position: relative; background: linear-gradient(145deg, #2b2f36, #0d0f13);
    border-radius: 22px; padding: 4.2% 3.6% 4.6%;
    box-shadow: 0 2px 0 rgba(255, 255, 255, .08) inset, 0 18px 36px rgba(28, 31, 35, .22);
}
.hp-kiosk-frame::before { content: ""; position: absolute; top: 1.6%; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #3b4048; }
.hp-kiosk-screen { container-type: inline-size; aspect-ratio: 9 / 16; background: var(--k-chrome); border-radius: 8px; overflow: hidden; position: relative; }
.hp-kiosk-ui { font-size: 3.6cqw; height: 100%; display: flex; flex-direction: column; color: #eef0f2; font-family: 'Open Sans', sans-serif; line-height: 1.3; }
/* Reader mounted on a side bracket at the kiosk's lower right (wall-mount product, no pedestal). */
.hp-kiosk--reader { padding-right: 9%; }
.hp-kiosk-reader-wrap { position: absolute; right: 0; bottom: 6%; width: 22%; z-index: 2; }
.hp-kiosk-reader-wrap::before { content: ""; position: absolute; left: -30%; top: 38%; width: 40%; height: 14%; background: linear-gradient(#2b2f36, #111317); border-radius: 4px; }
.hp-kiosk-reader-wrap .hp-reader { position: relative; width: 100%; }

/* UI pieces */
.k-top { display: flex; align-items: center; gap: .6em; padding: .9em 1em .6em; }
.k-logo { width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--k-btn); display: grid; place-items: center; color: #fff; font-size: .8em; font-weight: 800; font-family: 'Montserrat', sans-serif; flex: 0 0 auto; }
.k-org { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .86em; color: #fff; line-height: 1.15; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-org small { display: block; font-weight: 600; font-size: .78em; color: rgba(238, 240, 242, .55); }
.k-clock { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1em; color: #fff; text-align: right; }
.k-clock small { display: block; font-size: .6em; font-weight: 600; color: rgba(238, 240, 242, .55); }
.k-ticker { display: flex; align-items: center; gap: .6em; margin: 0 .8em; padding: .5em .7em; border-radius: .5em; background: color-mix(in srgb, var(--k-btn) 12%, #000); font-size: .66em; color: #eef0f2; white-space: nowrap; overflow: hidden; }
.k-ticker b { flex: 0 0 auto; background: var(--k-btn); color: #fff; padding: .15em .55em; border-radius: .3em; font-size: .9em; text-transform: uppercase; letter-spacing: .04em; }
.k-ticker span { overflow: hidden; text-overflow: ellipsis; }
.k-body { flex: 1; padding: .7em .8em; display: flex; flex-direction: column; gap: .6em; min-height: 0; }
.k-block { background: #fff; color: #2b2f36; border-radius: .7em; padding: .75em .8em; }
.k-title { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .74em; color: #2b2f36; display: flex; justify-content: space-between; align-items: center; margin-bottom: .45em; }
.k-title em { font-style: normal; font-weight: 700; color: var(--k-btn); font-size: .95em; }

.k-body > .k-featured:first-child { flex: 1 1 auto; }
.k-featured { position: relative; border-radius: .7em; overflow: hidden; color: #fff; padding: .9em .9em .8em; min-height: 8.4em; display: flex; flex-direction: column; justify-content: flex-end;
    background: radial-gradient(circle at 85% 15%, rgba(255, 255, 255, .28), transparent 40%), linear-gradient(140deg, var(--k-btn), color-mix(in srgb, var(--k-btn) 55%, #000)); }
.k-featured .k-feat-ico { position: absolute; right: .5em; top: .2em; font-size: 4.2em; opacity: .16; }
.k-tag { align-self: flex-start; font-size: .56em; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; background: rgba(255, 255, 255, .22); padding: .25em .6em; border-radius: 1em; margin-bottom: .45em; }
.k-featured h4 { color: #fff; font-family: 'Montserrat', sans-serif; font-size: .98em; font-weight: 800; margin: 0 0 .25em; }
.k-featured p { font-size: .6em !important; line-height: 1.4; color: rgba(255, 255, 255, .85); margin: 0 0 .5em; }
.k-bar { height: .42em; border-radius: 1em; background: rgba(255, 255, 255, .25); overflow: hidden; }
.k-bar i { display: block; height: 100%; background: #fff; border-radius: 1em; }
.k-bar-meta { display: flex; justify-content: space-between; font-size: .56em; margin-top: .3em; color: rgba(255, 255, 255, .85); font-weight: 700; }

.k-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4em; }
.k-amount { background: var(--k-acc); color: var(--k-btn); border-radius: .5em; text-align: center; padding: .55em 0; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .78em; }
.k-amount.on { background: var(--k-btn); color: #fff; }
.k-donate { margin-top: .5em; background: var(--k-btn); color: #fff; text-align: center; border-radius: .5em; padding: .6em; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .74em; letter-spacing: .02em; }
.k-freq { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3em; margin-top: .5em; }
.k-freq span { text-align: center; font-size: .56em; font-weight: 700; padding: .45em 0; border-radius: .4em; border: 1px solid #e5e7eb; color: #6b7280; }
.k-freq span.on { border-color: var(--k-btn); color: var(--k-btn); background: var(--k-acc); }

.k-sched-row { display: flex; justify-content: space-between; align-items: center; font-size: .64em; padding: .38em .5em; border-radius: .4em; color: #2b2f36; }
.k-sched-row + .k-sched-row { margin-top: .12em; }
.k-sched-row b { font-family: 'Montserrat', sans-serif; font-weight: 800; }
.k-sched-row.is-next { background: var(--k-btn); color: #fff; }
.k-countdown { font-size: .58em; color: #6b7280; display: flex; align-items: center; gap: .35em; margin-top: .45em; }
.k-countdown b { color: var(--k-btn); font-family: 'Montserrat', sans-serif; }

.k-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6em; }
.k-qr { background: var(--k-acc); border-radius: .7em; padding: .6em; display: flex; align-items: center; gap: .55em; color: #2b2f36; }
.k-qr svg { width: 3.4em; height: 3.4em; flex: 0 0 auto; background: #fff; border-radius: .3em; padding: .2em; }
.k-qr b { display: block; font-family: 'Montserrat', sans-serif; font-size: .6em; font-weight: 800; }
.k-qr small { display: block; font-size: .5em; color: #6b7280; line-height: 1.3; }
.k-qr--big { flex-direction: column; text-align: center; padding: 1em .6em; }
.k-qr--big svg { width: 7.5em; height: 7.5em; }
.k-qr--big b { font-size: .78em; margin-top: .3em; }
.k-qr--big small { font-size: .6em; }

.k-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: .25em; padding: .55em .6em .75em; background: rgba(255, 255, 255, .04); border-top: 1px solid rgba(255, 255, 255, .06); }
.k-nav span { display: flex; flex-direction: column; align-items: center; gap: .3em; font-size: .5em; text-align: center; color: rgba(238, 240, 242, .62); font-weight: 600; line-height: 1.15; }
.k-nav span i { font-size: 1.7em; }
.k-nav span.on { color: #fff; }
.k-nav span.on i { color: var(--k-btn); filter: brightness(1.35); }

.k-camp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.k-camp { background: #fff; border-radius: .6em; overflow: hidden; color: #2b2f36; }
.k-camp-img { height: 3.6em; background: linear-gradient(140deg, var(--k-btn), color-mix(in srgb, var(--k-btn) 50%, #000)); position: relative; }
.k-camp-img::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .3), transparent 45%); }
.k-camp-body { padding: .45em .55em .55em; }
.k-camp-body b { display: block; font-family: 'Montserrat', sans-serif; font-size: .62em; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.k-camp-body .k-bar { background: #eef0f2; height: .3em; margin-top: .35em; }
.k-camp-body .k-bar i { background: var(--k-btn); }
.k-camp-urgent { position: absolute; z-index: 1; left: .4em; top: .4em; font-size: .46em; font-weight: 800; text-transform: uppercase; background: #ef4444; color: #fff; padding: .2em .5em; border-radius: .3em; }

.k-list-item { display: flex; gap: .6em; align-items: center; background: #fff; border-radius: .6em; padding: .55em; color: #2b2f36; }
.k-list-ico { width: 2.3em; height: 2.3em; flex: 0 0 auto; border-radius: .5em; background: var(--k-acc); color: var(--k-btn); display: grid; place-items: center; font-size: .82em; }
.k-list-item b { display: block; font-family: 'Montserrat', sans-serif; font-size: .66em; font-weight: 800; }
.k-list-item small { display: block; font-size: .54em; color: #6b7280; }
.k-list-item .k-pill { margin-left: auto; font-size: .5em; font-weight: 800; padding: .3em .6em; border-radius: 1em; background: var(--k-acc); color: var(--k-btn); white-space: nowrap; }
.k-pill--alert { background: #fee2e2 !important; color: #b91c1c !important; }

.k-big-next { text-align: center; padding: 1em .6em; border-radius: .7em; background: linear-gradient(140deg, var(--k-btn), color-mix(in srgb, var(--k-btn) 55%, #000)); color: #fff; }
.k-big-next small { display: block; font-size: .6em; text-transform: uppercase; letter-spacing: .08em; opacity: .85; font-weight: 700; }
.k-big-next b { display: block; font-family: 'Montserrat', sans-serif; font-size: 1.25em; font-weight: 800; margin: .15em 0; }
.k-big-next span { font-family: 'Montserrat', sans-serif; font-size: 1.8em; font-weight: 800; letter-spacing: .02em; }

.k-pay { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .6em; padding: 1em; }
.k-pay-amount { font-family: 'Montserrat', sans-serif; font-size: 2.4em; font-weight: 800; color: #fff; }
.k-pay-ring { width: 6em; height: 6em; border-radius: 50%; display: grid; place-items: center; background: var(--k-acc); color: var(--k-btn); font-size: 1em; position: relative; }
.k-pay-ring i { font-size: 2.4em; }
.k-pay-ring::before, .k-pay-ring::after { content: ""; position: absolute; inset: -.6em; border-radius: 50%; border: 2px solid var(--k-btn); opacity: .5; animation: hp-pulse 2s ease-out infinite; }
.k-pay-ring::after { animation-delay: 1s; }
@keyframes hp-pulse { from { transform: scale(.85); opacity: .6; } to { transform: scale(1.35); opacity: 0; } }
.k-pay p { margin: 0; font-size: .74em !important; color: rgba(238, 240, 242, .75); }
.k-pay h4 { color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.1em; margin: 0; }
.k-methods { display: flex; gap: .4em; justify-content: center; flex-wrap: wrap; }
.k-methods span { font-size: .52em; font-weight: 700; padding: .35em .7em; border-radius: 1em; background: rgba(255, 255, 255, .08); color: rgba(238, 240, 242, .8); }
.k-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; width: 100%; }
.k-btn { text-align: center; border-radius: .5em; padding: .65em; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: .7em; background: rgba(255, 255, 255, .08); color: #fff; }
.k-btn.on { background: var(--k-btn); }

/* Stripe-style card reader (decorative) */
.hp-reader { aspect-ratio: 10 / 17; background: linear-gradient(160deg, #3a3f47, #15171b 70%); border-radius: 18% / 10%; padding: 9% 8%; box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .1); display: flex; flex-direction: column; container-type: inline-size; }
.hp-reader-screen { flex: 0 0 58%; background: #fff; border-radius: 8%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4cqw; color: #111827; font-family: 'Montserrat', sans-serif; }
.hp-reader-screen b { font-size: 13cqw; font-weight: 800; }
.hp-reader-screen small { font-size: 6cqw; color: #6b7280; font-family: 'Open Sans', sans-serif; }
.hp-reader-screen i { font-size: 14cqw; color: var(--hp-green); }
.hp-reader-slot { margin: auto auto 6%; width: 60%; height: 5%; background: #0b0c0e; border-radius: 4px; }

/* Per-screen scale so each mock-up fills the portrait display */
.k-body { overflow: hidden; }
.hp-kiosk-ui--donate { font-size: 5.5cqw; }
.hp-kiosk-ui--recurring { font-size: 4.8cqw; }
.hp-kiosk-ui--campaigns { font-size: 5.35cqw; }
.hp-kiosk-ui--programmes { font-size: 5.1cqw; }
.hp-kiosk-ui--announcements { font-size: 5.6cqw; }
.hp-kiosk-ui--services { font-size: 5.7cqw; }
.hp-kiosk-ui--connect { font-size: 4.6cqw; }
.hp-kiosk-ui--connect .k-qr--big { flex: 1; justify-content: center; }
.hp-kiosk-ui--connect .k-qr--big svg { width: 8em; height: 8em; }
.hp-kiosk-ui--campaigns .k-camp-img { height: 5.2em; }
.hp-kiosk-ui--donate .k-row, .hp-kiosk-ui--campaigns .k-block:last-child { margin-top: auto; }
.hp-kiosk-ui--announcements .k-featured { flex: 1; }
.hp-kiosk-ui--services .k-list-item { margin-top: auto; }
.hp-kiosk-ui--giftaid { font-size: 4.2cqw; }
.hp-kiosk-ui--stripe { font-size: 4.4cqw; }

@media (prefers-reduced-motion: reduce) { .k-pay-ring::before, .k-pay-ring::after { animation: none !important; } }