/* =========================================================
   Wupex Gift Cards — Reveal Page v1.2.1
   ========================================================= */

:root {
    --wupex-success:   #059669;
    --wupex-surface:   #ffffff;
    --wupex-text:      #111827;
    --wupex-muted:     #6b7280;
    --wupex-border:    #e5e7eb;
    --wupex-bg-subtle: #f9fafb;
    --wupex-radius:    14px;
    --wupex-shadow:    0 4px 24px rgba(0,0,0,.10);
    --wupex-btn-bg:    #05FC4C;
    --wupex-btn-text:  #0a1a0a;
    --wupex-btn-hover: #04d941;
}

@keyframes wupex-fadein {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Page wrapper ──────────────────────────────────────────────────── */
.wupex-reveal-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px 64px;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    animation: wupex-fadein .35s ease both;
}

/* ── Multi-code order header ──────────────────────────────────────── */
.wupex-order-header {
    text-align: center;
    margin-bottom: 24px;
    width: 100%;
}

.wupex-order-title {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 6px;
}

.wupex-order-meta-line {
    color: rgba(255,255,255,.65);
    font-size: 14px;
    margin: 0;
}

/* ── Cards container ──────────────────────────────────────────────── */
.wupex-reveal-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

/* ── Individual card ──────────────────────────────────────────────── */
.wupex-reveal-card {
    background: var(--wupex-surface);
    border-radius: var(--wupex-radius);
    box-shadow: var(--wupex-shadow);
    width: 100%;
    overflow: hidden;
}

.wupex-details-card {
    margin-top: 8px;
}

/* ── Body ─────────────────────────────────────────────────────────── */
.wupex-reveal-body {
    padding: 28px 28px 24px;
}

/* ── Product label ────────────────────────────────────────────────── */
.wupex-product-name {
    font-size: 11px;
    font-weight: 700;
    color: var(--wupex-muted);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 16px;
}

/* ── Code box ─────────────────────────────────────────────────────── */
.wupex-code-wrap {
    background: var(--wupex-bg-subtle);
    border: 2px solid #1a1a1a;
    border-radius: 10px;
    padding: 18px 16px 14px;
    margin-bottom: 12px;
    text-align: center;
}

.wupex-code-label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--wupex-muted);
    margin-bottom: 10px;
}

.wupex-pin {
    display: block;
    font-family: 'Courier New', 'Lucida Console', monospace;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: .15em;
    color: var(--wupex-text);
    word-break: break-all;
    line-height: 1.4;
    user-select: all;
    -webkit-user-select: all;
}

.wupex-serial-number {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: var(--wupex-muted);
    margin-top: 8px;
    letter-spacing: .03em;
}

/* ── Copy button ──────────────────────────────────────────────────── */
.wupex-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: var(--wupex-btn-bg);
    color: var(--wupex-btn-text);
    border: none;
    border-radius: 8px;
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .01em;
    transition: background .18s ease, transform .12s ease;
    font-family: inherit;
}

.wupex-copy-btn:hover  { background: var(--wupex-btn-hover); }
.wupex-copy-btn:active { transform: scale(.97); }
.wupex-copy-btn.wupex-copied { background: var(--wupex-success); color: #fff; }
.wupex-copy-btn svg { flex-shrink: 0; }

/* ── Order details grid (single-code) ─────────────────────────────── */
.wupex-details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}

.wupex-detail-item {
    background: var(--wupex-bg-subtle);
    border-radius: 8px;
    padding: 12px 14px;
}

.wupex-detail-item.wupex-detail-full { grid-column: 1 / -1; }

.wupex-detail-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--wupex-muted);
    margin-bottom: 4px;
}

.wupex-detail-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--wupex-text);
    word-break: break-word;
}

/* ── Footer note ──────────────────────────────────────────────────── */
.wupex-reveal-note {
    font-size: 12px;
    color: var(--wupex-muted);
    text-align: center;
    border-top: 1px solid var(--wupex-border);
    padding-top: 16px;
    margin: 0;
    line-height: 1.65;
}

.wupex-reveal-note--standalone {
    color: rgba(255,255,255,.5);
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 20px;
    margin-top: 8px;
    width: 100%;
    text-align: center;
    font-size: 12px;
    line-height: 1.65;
}

/* ── Error ────────────────────────────────────────────────────────── */
.wupex-reveal-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 32px 28px;
    color: #991b1b;
    max-width: 520px;
    margin: 40px auto;
    text-align: center;
    animation: wupex-fadein .35s ease both;
}

.wupex-reveal-error p { margin: 0 0 12px; }
.wupex-reveal-error p:last-child { margin-bottom: 0; }
.wupex-reveal-error a { color: #991b1b; font-weight: 600; }

/* ── Mobile ───────────────────────────────────────────────────────── */
@media (max-width: 500px) {
    .wupex-reveal-page  { padding: 20px 12px 48px; }
    .wupex-reveal-body  { padding: 20px 16px 18px; }
    .wupex-pin          { font-size: 20px; letter-spacing: .10em; }
    .wupex-details-grid { grid-template-columns: 1fr; }
}