/* /done/ — order confirmation + per-attendee QR ticket stubs.
   Visual language mirrors the designer's confirmation mockup:
   serif headline, green pill eyebrow, ticket cards with side notches
   and an orange brand strip at the top. Canonical brand orange #e65d33. */

.done-shell {
    position: relative;
    min-height: 100vh;
    padding: 96px 20px 56px;
    background: #ffffff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.done-shell::before,
.done-shell::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.done-shell::before {
    width: 480px;
    height: 480px;
    right: -110px;
    top: -130px;
    background: radial-gradient(circle, rgba(230, 93, 51, 0.07), transparent 70%);
}
.done-shell::after {
    width: 360px;
    height: 360px;
    left: -80px;
    bottom: -110px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.06), transparent 70%);
}

.done-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.done-content--centered { justify-content: center; }

/* Author display: flex above outranks the UA [hidden] { display: none },
   so the HTML hidden attribute on #done-paid/#done-stalled/#done-actions
   would otherwise be a no-op and all states would render at once. */
.done-content[hidden],
.done-actions[hidden] { display: none; }

.done-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(22, 163, 74, 0.25);
    background: rgba(22, 163, 74, 0.08);
    color: #16a34a;
    border-radius: 999px;
    padding: 5px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.done-pill--warn {
    border-color: rgba(217, 119, 6, 0.25);
    background: rgba(217, 119, 6, 0.08);
    color: #b45309;
}
.done-pill__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.done-headline {
    font-family: var(--font-display, 'Playfair Display'), Georgia, serif;
    font-size: 42px;
    line-height: 1.13;
    margin: 0 0 12px;
    font-weight: 700;
    color: #0d1f3c;
}
.done-accent { color: #e65d33; }

.done-sub {
    font-size: 16px;
    color: #4B5A72;
    margin: 0 0 8px;
}
.done-note {
    font-size: 14px;
    color: #718096;
    line-height: 1.65;
    margin: 0 auto 36px;
    max-width: 460px;
    width: 100%;
}

.done-spinner {
    width: 44px;
    height: 44px;
    margin: 8px auto 16px;
    border-radius: 50%;
    border: 4px solid #e2e8f0;
    border-top-color: #e65d33;
    animation: done-spin 0.9s linear infinite;
}
@keyframes done-spin { to { transform: rotate(360deg); } }

.done-tickets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 460px));
    gap: 24px;
    width: 100%;
    justify-content: center;
}

.done-ticket {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 4px 32px rgba(13, 31, 60, 0.08);
    padding: 28px 32px 26px;
    text-align: left;
    overflow: hidden;
}
.done-ticket::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: #e65d33;
}
.done-ticket__notch {
    position: absolute;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}
.done-ticket__notch--l { left: -11px; }
.done-ticket__notch--r { right: -11px; }

.done-ticket__label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #94a3b8;
    margin: 0 0 18px;
    text-align: center;
}

.done-ticket__qr-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.done-ticket__qr-frame {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px;
}
.done-ticket__qr {
    display: block;
    width: 160px;
    height: 160px;
    background: #ffffff;
    border-radius: 6px;
}

.done-ticket__divider {
    border: 0;
    border-top: 1px dashed #cbd5e1;
    margin: 0 0 20px;
}

.done-ticket__manual {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;
    margin-bottom: 16px;
}
.done-ticket__manual-label {
    font-size: 12px;
    color: #94a3b8;
    flex: 0 0 auto;
}
.done-ticket__manual-code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    line-height: 18px;
    color: #475569;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 6px 10px;
    max-width: 230px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1 1 auto;
    min-width: 0;
}
.done-ticket__copy {
    background: #0d1f3c;
    border: 0;
    color: #ffffff;
    border-radius: 6px;
    padding: 7px 14px;
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex: 0 0 auto;
    transition: background-color 0.2s ease;
}
.done-ticket__copy:hover,
.done-ticket__copy:focus-visible {
    background: #1a3260;
    outline: none;
}
.done-ticket__copy.is-copied {
    background: #e65d33;
}

.done-ticket__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.done-info {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 12px;
}
.done-info small {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #94a3b8;
    margin-bottom: 3px;
}
.done-info b {
    display: block;
    font-size: 13px;
    color: #1e3a5f;
    font-weight: 600;
    word-break: break-word;
}
.done-info__email { font-size: 12px; }
.done-info__ok { color: #16a34a !important; }

/* Order-not-found fallback button */
.done-cta {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 22px;
    border-radius: 8px;
    background: #0d1f3c;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
}

/* Add to Calendar dropdown — per-order, mounts under #done-tickets */
.done-actions {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.done-cal {
    position: relative;
    display: inline-block;
}
.done-cal__button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border: 0;
    border-radius: 9px;
    background: #e65d33;
    color: #ffffff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}
.done-cal__button:hover,
.done-cal__button:focus-visible {
    background: #cf4a21;
    outline: none;
}
.done-cal__caret {
    font-size: 10px;
    transition: transform 0.15s ease;
}
.done-cal[data-open="true"] .done-cal__caret {
    transform: rotate(180deg);
}
/* Opens upward — .done-shell uses overflow:hidden (clips the radial-
   gradient blobs from causing horizontal scroll), which would otherwise
   crop a downward-opening menu when the button sits near the shell's
   bottom edge. The button is always the last element in the paid state,
   so opening upward has plenty of room over the ticket cards. */
.done-cal__menu {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 220px;
    margin: 0;
    padding: 6px;
    list-style: none;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    z-index: 10;
}
.done-cal__menu li { margin: 0; }
.done-cal__menu button {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #0d1f3c;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.done-cal__menu button:hover,
.done-cal__menu button:focus-visible {
    background: #f1f5f9;
    outline: none;
}

/* ============================================================
   Tier summary card on /done/ — what was purchased + benefits
   ============================================================ */

.done-tier {
    max-width: 640px;
    margin: 24px auto 28px;
    padding: 22px 26px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #e65d33;
    border-radius: 12px;
    text-align: left;
    box-shadow: 0 1px 2px rgba(15, 25, 45, 0.04);
}
.done-tier[hidden] {
    display: none !important;
}
.done-tier__row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.done-tier__qty {
    font-family: var(--font-body, "DM Sans"), sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #e65d33;
    letter-spacing: 0.03em;
}
.done-tier__name {
    margin: 0;
    font-family: var(--font-display, "Source Serif 4"), serif;
    font-size: 22px;
    font-weight: 500;
    color: #011737;
    line-height: 1.25;
}
.done-tier__desc {
    margin: 10px 0 0;
    font-family: var(--font-body, "DM Sans"), sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: #5a6473;
}
.done-tier__desc:empty {
    display: none;
}
.done-tier__includes-label {
    margin: 16px 0 6px;
    font-family: var(--font-body, "DM Sans"), sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #011737;
}
.done-tier__includes-label[hidden] {
    display: none !important;
}
.done-tier__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}
.done-tier__features:empty {
    display: none;
}
.done-tier__features li {
    position: relative;
    padding-left: 22px;
    font-family: var(--font-body, "DM Sans"), sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #2a3142;
}
.done-tier__features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: #e65d33;
    font-weight: 700;
    font-size: 13px;
}

@media (max-width: 720px) {
    .done-shell { padding: 40px 16px 48px; }
    .done-headline { font-size: 32px; }
    .done-ticket { padding: 28px 22px; }
    .done-ticket__manual { gap: 8px; }
    .done-ticket__manual-code { max-width: 170px; }
    .done-ticket__grid { grid-template-columns: 1fr; }
    .done-tier { padding: 18px 18px; }
    .done-tier__name { font-size: 19px; }
}

/* ============================================================
   Order reference — buyer-facing confirmation number
   ============================================================ */

.done-ref {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto 28px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.done-ref[hidden] {
    display: none !important;
}
.done-ref__label {
    font-family: var(--font-body, "DM Sans"), sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
}
.done-ref__value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    font-weight: 600;
    color: #0d1f3c;
    background: #ffffff;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    letter-spacing: 0.04em;
}
.done-ref__copy {
    background: #0d1f3c;
    border: 0;
    color: #ffffff;
    border-radius: 6px;
    padding: 5px 11px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.done-ref__copy:hover,
.done-ref__copy:focus-visible {
    background: #1a3260;
    outline: none;
}
.done-ref__copy.is-copied {
    background: #e65d33;
}

@media (max-width: 480px) {
    .done-ref { flex-wrap: wrap; justify-content: center; gap: 6px; padding: 10px 12px; }
}

/* ============================================================
   Per-ticket share link (each ticket has a /attendee-ticket/ URL)
   ============================================================ */

.done-ticket__share {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
    text-align: center;
}
.done-ticket__share-label {
    display: block;
    font-family: var(--font-body, "DM Sans"), sans-serif;
    font-size: 11px;
    color: #5a6473;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.done-ticket__share-btn {
    background: #e65d33;
    color: #fff;
    padding: 8px 16px;
    font-size: 12px;
}
.done-ticket__share-btn:hover {
    background: #cf4a21;
}