* { box-sizing: border-box; }
body {
    font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    margin: 0; padding: 0; background: #f4f5f7; color: #1a1d23;
}
.public-wrapper { max-width: 460px; margin: 0 auto; padding: 0 0 32px; }
.brand-header {
    background: var(--brand, #1f3a5f);
    color: #fff; padding: 28px 24px; text-align: center;
    border-bottom-left-radius: 16px; border-bottom-right-radius: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.brand-header h1 { margin: 0; font-size: 22px; font-weight: 700; }
.brand-header .tagline { margin-top: 6px; font-size: 13px; opacity: .85; }

.card-panel {
    background: #fff; border-radius: 14px; margin: 24px 16px;
    padding: 24px; box-shadow: 0 1px 4px rgba(0,0,0,.06);
    text-align: center;
}
.greeting { font-size: 14px; color: #6b7280; margin-bottom: 16px; }
.qr-wrapper {
    display: inline-block; padding: 16px;
    background: #fff; border: 4px solid var(--brand, #1f3a5f); border-radius: 12px;
    margin-bottom: 16px;
}
#qr-canvas, .qr-img { display: block; width: 260px; height: 260px; max-width: 60vw; max-height: 60vw; }

.card-socials {
    text-align: center; margin: 16px 0 8px;
    display: flex; justify-content: center; gap: 18px; flex-wrap: wrap;
}
.card-socials a {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #f3f4f6; color: #1f3a5f;
    text-decoration: none; font-size: 18px; transition: background .12s, color .12s;
}
.card-socials a:hover { background: var(--brand, #1f3a5f); color: #fff; }
.balance { font-size: 36px; font-weight: 800; color: #1f3a5f; margin: 12px 0 4px; }
.state-tag {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    background: #ecfdf5; color: #15803d;
}
.state-tag.exhausted { background: #f3f4f6; color: #6b7280; }
.state-tag.expired   { background: #fff7ed; color: #c2410c; }
.state-tag.void      { background: #fee2e2; color: #991b1b; }
.expiration { font-size: 13px; color: #6b7280; margin-top: 12px; }
.code-fallback {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 12px; color: #6b7280; margin-top: 16px; word-break: break-all;
    background: #f9fafb; border-radius: 6px; padding: 8px;
}
.message-box {
    background: #f9fafb; border-left: 4px solid var(--brand, #1f3a5f);
    padding: 14px 16px; margin: 16px; border-radius: 8px;
    font-style: italic; color: #4b5563; font-size: 15px;
}
.banner-state {
    background: #fff7ed; color: #9a3412; padding: 18px;
    border-radius: 12px; margin: 24px 16px; text-align: center; font-size: 15px;
}
.banner-state.void    { background: #fee2e2; color: #991b1b; }
.banner-state.expired { background: #fff7ed; color: #c2410c; }
.banner-state.exhausted { background: #f3f4f6; color: #4b5563; }
.banner-state .icon { font-size: 32px; display: block; margin-bottom: 8px; }
.error-card {
    background: #fee2e2; color: #991b1b; padding: 24px;
    border-radius: 12px; margin: 24px 16px; text-align: center;
}
.footer {
    text-align: center; padding: 32px 16px 40px;
    color: #6b7280; border-top: 1px solid #e5e7eb; margin-top: 32px;
}
.footer .brand-line {
    font-size: 22px; font-weight: 700; color: #1f3a5f; letter-spacing: -.01em;
    margin-bottom: 12px;
}
.footer .brand-line .sep { opacity: .4; margin: 0 10px; font-weight: 400; }
.footer .by-line {
    display: inline-flex; align-items: center; gap: 8px;
    text-decoration: none; color: #374151;
}
.footer .by-line:hover .dps-logo { filter: brightness(.6); }
.footer .by-line .by-label { font-size: 15px; font-weight: 500; }
.footer .dps-logo { height: 50px; width: auto; vertical-align: middle; display: inline-block; }
.footer .privacy-link {
    display: block; margin-top: 18px; font-size: 12px; color: #6b7280; text-decoration: none;
}
.footer .privacy-link:hover { color: #1f3a5f; text-decoration: underline; }
@media (min-width: 768px) {
    .footer .brand-line { font-size: 26px; }
    .footer .dps-logo { height: 64px; }
}

@media (min-width: 768px) {
    .public-wrapper { padding-top: 24px; }
}

/* ============ Storefront ============ */
.shop-panel {
    background: #fff; border-radius: 14px; margin: 16px;
    padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.shop-panel h2 {
    margin: 0 0 14px; font-size: 16px; color: #1f3a5f;
    border-bottom: 1px solid #e5e7eb; padding-bottom: 8px;
}
/* Denomination chips carry a full it-IT amount ("100,00 €"), not the old bare "€ 100": a fixed
   repeat(4, 1fr) floors each track at min-content, so on a 360px phone the longer string pushed the
   grid past the panel instead of wrapping. auto-fit keeps 4 columns at the 460px wrapper width and
   drops to 3 when the viewport cannot hold them. */
.den-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin-bottom: 12px; }
.den-chip {
    background: #f3f4f6; color: #374151; padding: 12px 4px;
    border-radius: 8px; text-align: center; font-weight: 700; font-size: 15px;
    cursor: pointer; user-select: none; border: 2px solid transparent;
    transition: background .12s, border-color .12s;
}
.den-chip.selected { background: var(--brand, #1f3a5f); color: #fff; border-color: var(--brand, #1f3a5f); }
.den-chip:hover:not(.selected) { background: #e5e7eb; }
.shop-form .form-row { margin-bottom: 14px; }
.shop-form label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin-bottom: 4px; }
.shop-form input, .shop-form textarea {
    width: 100%; padding: 10px 12px; border: 1px solid #d1d5db;
    border-radius: 8px; font-size: 16px; background: #fff;
}
.shop-form textarea { resize: vertical; min-height: 70px; }
.payment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.payment-tile {
    padding: 12px; border: 2px solid #d1d5db; border-radius: 8px;
    text-align: center; cursor: pointer; user-select: none; font-size: 13px; font-weight: 600;
}
.payment-tile.selected { border-color: var(--brand, #1f3a5f); background: #f0f9ff; color: #1f3a5f; }
.payment-tile.disabled { opacity: .4; cursor: not-allowed; }
.btn-buy {
    background: var(--brand, #1f3a5f); color: #fff; padding: 14px;
    border-radius: 10px; font-size: 16px; font-weight: 700; border: 0;
    width: 100%; cursor: pointer; margin-top: 8px;
}
.btn-buy:disabled { opacity: .5; cursor: not-allowed; }
.stub-banner {
    background: #fef3c7; color: #92400e; padding: 10px 14px;
    border-radius: 8px; font-size: 13px; margin: 16px;
    display: flex; align-items: center; gap: 8px;
}

/* ============ Brand surface: font + patterns + shapes ============ */

/* Merchant font override. The page script sets body[data-brand-font] and --brand-font; the
   @font-face rules are self-hosted in RESOURCES/fonts/brand-fonts.css, linked by the page.
 * Falls back to the system stack if the font fails to load. */
body[data-brand-font] { font-family: var(--brand-font), -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; }

/* Background patterns. Each rule colors the body background via a tiled SVG mask.
 * Pattern color is fixed at a soft neutral so it never overpowers the brand color
 * (the header/footer stay opaque brand-color and sit above the pattern). */
.brand-pattern-DOTS_SOFT       { background-color: #f4f5f7;
    background-image: radial-gradient(rgba(31,58,95,.10) 1.2px, transparent 1.2px);
    background-size: 14px 14px; }
.brand-pattern-DIAGONAL_STRIPES { background-color: #f4f5f7;
    background-image: repeating-linear-gradient(45deg, rgba(31,58,95,.06) 0 8px, transparent 8px 16px); }
.brand-pattern-GRID            { background-color: #f4f5f7;
    background-image:
        linear-gradient(rgba(31,58,95,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31,58,95,.06) 1px, transparent 1px);
    background-size: 20px 20px; }
.brand-pattern-CHECKERBOARD    { background-color: #f4f5f7;
    background-image:
        linear-gradient(45deg, rgba(31,58,95,.05) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(31,58,95,.05) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(31,58,95,.05) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(31,58,95,.05) 75%);
    background-size: 22px 22px; background-position: 0 0, 0 11px, 11px -11px, -11px 0; }
.brand-pattern-TOPOGRAPHY      { background-color: #f4f5f7;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'><path d='M0 20 Q 20 0 40 20 T 80 20' fill='none' stroke='%231f3a5f' stroke-opacity='.10' stroke-width='1'/><path d='M0 30 Q 20 10 40 30 T 80 30' fill='none' stroke='%231f3a5f' stroke-opacity='.08' stroke-width='1'/></svg>"); }
.brand-pattern-CONFETTI        { background-color: #f4f5f7;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 60'><rect x='5' y='10' width='4' height='4' fill='%231f3a5f' opacity='.18'/><circle cx='30' cy='20' r='2' fill='%23e07a1f' opacity='.20'/><rect x='45' y='35' width='3' height='3' transform='rotate(20 46.5 36.5)' fill='%231f3a5f' opacity='.16'/><circle cx='15' cy='45' r='2' fill='%23e07a1f' opacity='.20'/></svg>"); }
.brand-pattern-WAVES           { background-color: #f4f5f7;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'><path d='M0 10 Q 15 0 30 10 T 60 10' fill='none' stroke='%231f3a5f' stroke-opacity='.12' stroke-width='1.5'/></svg>"); }
.brand-pattern-HEXAGONS        { background-color: #f4f5f7;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 32'><path d='M14 1 L27 8 V22 L14 29 L1 22 V8 Z M42 1 L55 8 V22 L42 29 L29 22 V8 Z' fill='none' stroke='%231f3a5f' stroke-opacity='.10' stroke-width='1'/></svg>"); }
.brand-pattern-PLUS            { background-color: #f4f5f7;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path d='M15 8 V22 M8 15 H22' stroke='%231f3a5f' stroke-opacity='.12' stroke-width='1.2'/></svg>"); }
.brand-pattern-ZIG_ZAG         { background-color: #f4f5f7;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'><path d='M0 12 L10 4 L20 12 L30 4 L40 12' fill='none' stroke='%231f3a5f' stroke-opacity='.12' stroke-width='1.2'/></svg>"); }

/* Header shape modifiers. All sit on .brand-header — clip the BOTTOM edge to a custom curve.
 * Footer modifiers sit on .footer — clip the TOP edge symmetrically.
 * SHAPE-ROUNDED keeps the original status-quo rounded-bottom-corners look (was the default
 * before Phase 2). SHAPE-RECT explicitly flattens to a pure rectangle. */
.brand-header.shape-RECT      { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.brand-header.shape-ROUNDED   { border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; }
.brand-header.shape-TRAPEZOID { border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), 0 100%); }
.brand-header.shape-JAGGED    { border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%,
        95% calc(100% - 10px), 90% 100%, 85% calc(100% - 10px), 80% 100%,
        75% calc(100% - 10px), 70% 100%, 65% calc(100% - 10px), 60% 100%,
        55% calc(100% - 10px), 50% 100%, 45% calc(100% - 10px), 40% 100%,
        35% calc(100% - 10px), 30% 100%, 25% calc(100% - 10px), 20% 100%,
        15% calc(100% - 10px), 10% 100%, 5% calc(100% - 10px), 0 100%); }
.brand-header.shape-MELTING   { border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    -webkit-mask-image:
        radial-gradient(circle at 20% 100%, transparent 18px, #000 18px),
        radial-gradient(circle at 50% 100%, transparent 12px, #000 12px),
        radial-gradient(circle at 80% 100%, transparent 22px, #000 22px),
        linear-gradient(#000, #000);
    -webkit-mask-composite: source-over;
            mask-image:
        radial-gradient(circle at 20% 100%, transparent 18px, #000 18px),
        radial-gradient(circle at 50% 100%, transparent 12px, #000 12px),
        radial-gradient(circle at 80% 100%, transparent 22px, #000 22px),
        linear-gradient(#000, #000); }
.brand-header.shape-LACE      { border-bottom-left-radius: 0; border-bottom-right-radius: 0;
    -webkit-mask-image: radial-gradient(circle 8px at 8px 100%, transparent 98%, #000 100%);
    -webkit-mask-position: 0 0;
    -webkit-mask-size: 16px 100%;
    -webkit-mask-repeat: repeat-x;
            mask-image: radial-gradient(circle 8px at 8px 100%, transparent 98%, #000 100%);
            mask-position: 0 0;
            mask-size: 16px 100%;
            mask-repeat: repeat-x;
    padding-bottom: 36px; }

/* Footer shape modifiers — mirror images applied to TOP edge. */
.footer.shape-TRAPEZOID { clip-path: polygon(0 18px, 100% 0, 100% 100%, 0 100%); padding-top: 48px; }
.footer.shape-JAGGED    { clip-path: polygon(
        0 10px, 5% 0, 10% 10px, 15% 0, 20% 10px, 25% 0, 30% 10px, 35% 0,
        40% 10px, 45% 0, 50% 10px, 55% 0, 60% 10px, 65% 0, 70% 10px,
        75% 0, 80% 10px, 85% 0, 90% 10px, 95% 0, 100% 10px,
        100% 100%, 0 100%); padding-top: 48px; }
.footer.shape-MELTING   {
    -webkit-mask-image:
        radial-gradient(circle at 20% 0, transparent 18px, #000 18px),
        radial-gradient(circle at 50% 0, transparent 12px, #000 12px),
        radial-gradient(circle at 80% 0, transparent 22px, #000 22px),
        linear-gradient(#000, #000);
            mask-image:
        radial-gradient(circle at 20% 0, transparent 18px, #000 18px),
        radial-gradient(circle at 50% 0, transparent 12px, #000 12px),
        radial-gradient(circle at 80% 0, transparent 22px, #000 22px),
        linear-gradient(#000, #000);
    padding-top: 48px; }
.footer.shape-LACE      {
    -webkit-mask-image: radial-gradient(circle 8px at 8px 0, transparent 98%, #000 100%);
    -webkit-mask-position: 0 0;
    -webkit-mask-size: 16px 100%;
    -webkit-mask-repeat: repeat-x;
            mask-image: radial-gradient(circle 8px at 8px 0, transparent 98%, #000 100%);
            mask-position: 0 0;
            mask-size: 16px 100%;
            mask-repeat: repeat-x;
    padding-top: 48px; }
.footer.shape-ROUNDED   { border-top-left-radius: 16px; border-top-right-radius: 16px; background: rgba(255,255,255,.4); margin: 32px 16px 0; }
.footer.shape-RECT      { /* no override; native rectangle */ }

/* ----- Ricarica / customer-facing reload (P1-1) ----- */
.reload-panel {
    margin: 18px 16px 0; padding: 16px;
    background: #fff; border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.reload-title { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: #1a1d23; }
.reload-cap { font-size: 12px; color: #6b7280; margin-bottom: 10px; }
.reload-row { display: flex; gap: 8px; }
.reload-row input {
    flex: 1; min-width: 0; padding: 10px 12px; font-size: 15px;
    border: 1px solid #d1d5db; border-radius: 8px;
}
.reload-row button {
    padding: 10px 18px; font-size: 14px; font-weight: 600; cursor: pointer;
    color: #fff; background: var(--brand, #1f3a5f); border: 0; border-radius: 8px;
}
.reload-row button:disabled { opacity: .6; cursor: default; }
.reload-msg { margin-top: 10px; font-size: 13px; min-height: 18px; }
.reload-msg.ok { color: #16a34a; }
.reload-msg.error { color: #dc2626; }

/* ============ Cardly Feel Phase 2 — buyer flagship flows ============ */

/* -- Storefront: sticky live gift preview ("crafting an object") -- */
.gift-preview-wrap {
    position: sticky; top: 0; z-index: 50;
    padding: 10px 16px 12px; margin: 0 0 4px;
    background: rgba(244, 245, 247, .97);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.gift-preview {
    position: relative; max-width: 300px; margin: 0 auto;
    aspect-ratio: 1.586 / 1; border-radius: 12px; overflow: hidden;
    box-shadow: var(--shadow-2, 0 4px 14px rgba(15, 26, 42, .12));
    transition: transform var(--dur-base, 200ms) var(--ease-spring, ease);
}
.gift-preview.bump { transform: scale(1.03); }
.gift-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gift-preview .gp-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    justify-content: flex-end; padding: 12px 14px; text-align: left; color: #fff;
    background: linear-gradient(transparent 45%, rgba(10, 14, 20, .55));
}
.gift-preview .gp-merchant {
    font-size: 11px; letter-spacing: .06em; text-transform: uppercase; opacity: .85;
}
.gift-preview .gp-name {
    font-family: var(--brand-font, var(--font-display, Georgia)), serif;
    font-size: 17px; font-weight: 600; line-height: 1.2; min-height: 21px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gift-preview .gp-amount {
    font-family: var(--brand-font, var(--font-display, Georgia)), serif;
    font-size: 26px; font-weight: 700; text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
/* Press micro-interaction on pick targets (spec 5.1) */
.den-chip, .payment-tile:not(.disabled), .occasion-tile {
    transition: transform var(--dur-fast, 120ms) var(--ease-out, ease),
                background .12s, border-color .12s;
}
.den-chip:active, .payment-tile:not(.disabled):active, .occasion-tile:active { transform: scale(.96); }

.gift-steps { display: flex; gap: 6px; max-width: 300px; margin: 10px auto 0; }
.gift-steps span {
    flex: 1; height: 4px; border-radius: 999px; background: #d9dee5;
    transition: background var(--dur-base, 200ms) var(--ease-out, ease);
}
.gift-steps span.done { background: var(--brand, #1f3a5f); }

@media (max-height: 700px) {
    .gift-preview { max-width: 200px; }
    .gift-steps { max-width: 200px; margin-top: 6px; }
}

/* -- Card wallet: dark-elegant stage (deliberate: replaces brand patterns on this page) -- */
body.card-stage { background: #12151b; }
body.card-stage .footer { border-top-color: rgba(255, 255, 255, .08); color: #9aa5b1; }
body.card-stage .footer .brand-line { color: #e7ebf0; }
body.card-stage .footer .privacy-link { color: #9aa5b1; }
body.card-stage .footer .by-line { color: #c4ccd6; }

/* -- Unwrap moment -- */
.unwrap-overlay {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 18px; padding: 24px; text-align: center; color: #fff;
    background: radial-gradient(circle at 50% 35%, #232a36 0%, #0d1015 70%);
    transition: opacity var(--dur-slow, 350ms) var(--ease-out, ease);
}
.unwrap-overlay.leaving { opacity: 0; pointer-events: none; }
.unwrap-title {
    font-family: var(--font-display, Georgia), serif;
    font-size: 30px; font-weight: 600; margin: 0; line-height: 1.25;
}
.unwrap-sub { font-size: 14px; color: #9aa5b1; margin: 0; }
.unwrap-btn {
    margin-top: 8px; padding: 14px 32px; font-size: 16px; font-weight: 700;
    color: var(--brand, #1f3a5f); background: #fff; border: 0; border-radius: 999px;
    cursor: pointer; box-shadow: 0 6px 24px rgba(0, 0, 0, .4);
    transition: transform var(--dur-fast, 120ms) var(--ease-out, ease);
}
.unwrap-btn:active { transform: scale(.96); }
.reveal-in { animation: cly-reveal var(--dur-slow, 350ms) var(--ease-spring, ease) both; }
@keyframes cly-reveal {
    from { opacity: 0; transform: scale(.9) translateY(14px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.light-sweep { position: relative; overflow: hidden; }
.light-sweep::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: translateX(-220%) skewX(-18deg);
    animation: cly-sweep 900ms 250ms var(--ease-out, ease) forwards;
    pointer-events: none;
}
@keyframes cly-sweep { to { transform: translateX(480%) skewX(-18deg); } }

/* -- Thanks: order timeline + hero -- */
.thanks-check {
    width: 72px; height: 72px; margin: 4px auto 10px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #ecfdf5; color: #15803d; font-size: 38px;
    animation: cly-reveal var(--dur-slow, 350ms) var(--ease-spring, ease) both;
}
.thanks-title { font-family: var(--font-display, Georgia), serif; }
.order-timeline { display: flex; flex-direction: column; margin: 6px 0 18px; text-align: left; }
.ot-step { display: flex; gap: 12px; align-items: flex-start; position: relative; padding-bottom: 18px; }
.ot-step::before {
    content: ""; position: absolute; left: 13px; top: 28px; bottom: 0;
    width: 2px; background: #e3e7ec;
}
.ot-step:last-child { padding-bottom: 0; }
.ot-step:last-child::before { display: none; }
.ot-dot {
    width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px;
    display: flex; align-items: center; justify-content: center;
    background: #ecfdf5; color: #15803d; font-size: 13px; font-weight: 700;
}
.ot-step.pending .ot-dot { background: #eef2f7; color: #6b7280; }
.ot-label { font-size: 14px; color: #17202b; font-weight: 600; padding-top: 4px; }
.ot-sub { font-size: 12px; color: #6b7280; font-weight: 400; display: block; margin-top: 2px; }