/* ── Cookbook Preorder Registry Page ── */

/* ── Hero ── */
#preorder-hero {
    width: 100%;
    padding: 56px 15px 40px;
    background: var(--cb-cream-light);
    text-align: center;
    /* The fanned cards and orbs are rotated and translated well past the hero
       box. Without this they widen the document on narrow screens, which lets
       the page scroll sideways and drags the navbar off to the right. Matches
       #preorder-bonus on the landing page, which carries the same graphic. */
    overflow: hidden;
}

.preorder-hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 860px;
    margin: 0 auto;
}

.preorder-hero-inner h1 {
    color: var(--col-green-0);
    margin-bottom: 14px;
}

/* Editor preview: page reachable via signed link while the campaign is closed. */
.preorder-preview-banner {
    margin: 0 0 22px;
    padding: 8px 18px;
    background: var(--col-yellow-1);
    color: white;
    font-size: 0.88rem;
    font-weight: 600;
    border-radius: 50px;
}

/* Staff test mode: the form is live here, so the green accent separates it
   from the mustard read-only preview. Must follow the rule above to win. */
.preorder-staff-banner {
    background: var(--cb-accent);
    max-width: 620px;
    padding: 10px 24px;
    line-height: 1.45;
    border-radius: 16px;
}

#preorder-submit-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ── Form section ── */
/* White arc over the cream hero, matching the landing page seam. The ellipse
   is anchored at the bottom so only the top edge curves — the section can be
   arbitrarily tall without clipping its sides or bottom (unlike .curved-top). */
.preorder-form-sect {
    background: white;
    clip-path: ellipse(150% 100% at 50% 100%);
    margin-top: -70px;
    padding-top: 85px;
    padding-bottom: 70px;
}

/* ── How to claim steps ── */
.preorder-steps-title {
    margin-top: 10px;
    scroll-margin-top: 90px;  /* clears the sticky navbar when deep-linked */
}

.preorder-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 980px;
    margin-bottom: 45px;
    padding: 0;
    list-style: none;
}

.preorder-step {
    flex: 1 1 260px;
    max-width: 320px;
    padding: 0 10px;
}

/* Matches the bonus-graphic orbs: green disc, white geometric numeral. */
.preorder-step-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    /* Jost digits carry unused descender space, so the ink rides ~0.1em above
       the flex-centered line box; this pushes it to the optical center. */
    padding-top: 0.21em;
    margin: 0 auto 16px;
    background: var(--cb-accent);
    color: white;
    font-family: 'URW Geometric', 'Jost', var(--font-2), sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1;
    border-radius: 50%;
    box-shadow: 0 10px 22px rgba(27, 35, 26, 0.18);
}

.preorder-step h3 {
    font-size: 1.25rem;
    color: var(--col-green-0);
    margin-bottom: 8px;
}

.preorder-step p {
    font-size: 15.5px;
    line-height: 1.55;
    color: var(--cb-body-text);
    margin-bottom: 0;
}

.preorder-step a {
    color: var(--cb-accent);
    text-decoration: underline;
    font-weight: 600;
}

.preorder-step a:hover {
    color: var(--cb-accent-hover);
}

#preorder-card {
    width: 100%;
    max-width: 620px;
    background: var(--cb-cream-light);
    border-radius: 20px;
    padding: 40px 34px;
    margin-top: 10px;
    text-align: left;
}

.preorder-card-title {
    text-align: center;
    font-size: 1.6rem;
    margin-bottom: 24px;
}

#preorder-feedback {
    text-align: center;
    color: var(--col-red-1);
    margin: 0 0 12px;
    min-height: 0;
}

/* ── Fields ── */
.preorder-field {
    margin-bottom: 18px;
}

.preorder-field label {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--col-green-0);
    margin-bottom: 6px;
}

.preorder-field input,
.preorder-field select {
    width: 100%;
    padding: 12px 16px;
    font-size: 1rem;
    font-family: var(--font-2), sans-serif;
    color: #333;
    background: #fff;
    border: 1.5px solid #d8d4cc;
    border-radius: 12px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    -webkit-appearance: none;
    appearance: none;
}

.preorder-field select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23555' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.preorder-field input:focus,
.preorder-field select:focus {
    outline: none;
    border-color: var(--cb-accent);
    box-shadow: 0 0 0 3px rgba(60, 103, 69, 0.12);
}

.preorder-field input.field-invalid,
.preorder-field select.field-invalid {
    border-color: var(--col-red-1);
}

.order-hint {
    display: block;
    color: #888;
    font-size: 0.83rem;
    margin-top: 5px;
}

.order-warning {
    display: block;
    color: var(--col-yellow-1);
    font-size: 0.86rem;
    margin-top: 5px;
}

/* ── Proof of purchase: OR divider between the two methods ── */
.preorder-or {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 16px 0;
    color: #999;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* The flex rule above would beat the UA [hidden] style. */
.preorder-or[hidden] {
    display: none;
}

.preorder-or::before,
.preorder-or::after {
    content: '';
    flex: 1;
    height: 1.5px;
    background: #d8d4cc;
}

/* ── Receipt drop zone ── */
#preorder-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 2px dashed var(--cb-accent);
    border-radius: 14px;
    padding: 26px 18px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}

#preorder-dropzone:hover,
#preorder-dropzone:focus-visible {
    background: var(--col-green-5);
    outline: none;
}

#preorder-dropzone.dz-over {
    background: var(--col-green-5);
    border-style: solid;
}

#preorder-dropzone .dz-icon {
    width: 34px;
    height: 34px;
    color: var(--cb-accent);
    margin-bottom: 8px;
}

.dz-text {
    margin: 0 0 4px;
    font-size: 0.95rem;
    color: var(--col-green-0);
}

.dz-browse {
    color: var(--cb-accent);
    font-weight: 600;
    text-decoration: underline;
}

.dz-hint {
    display: block;
    color: #888;
    font-size: 0.8rem;
    line-height: 1.4;
}

.dz-hint-privacy {
    margin-top: 6px;
}

#dz-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

#dz-preview[hidden] {
    display: none;
}

#dz-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 10px;
    border: 2px solid white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#dz-preview .dz-icon {
    margin-bottom: 0;
}

#dz-filename {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    font-size: 0.92rem;
    color: var(--col-green-0);
}

#dz-remove {
    border: none;
    background: none;
    color: var(--col-red-1);
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
    padding: 4px;
}

/* ── Checkboxes ── */
.preorder-checkboxes {
    margin: 22px 0 6px;
}

.preorder-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 0.94rem;
    color: var(--cb-body-text);
    line-height: 1.45;
}

.preorder-checkbox input[type="checkbox"] {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    margin-top: 2px;
    accent-color: var(--cb-accent);
    cursor: pointer;
}

/* ── Turnstile ── */
.preorder-turnstile {
    display: flex;
    justify-content: center;
    margin: 14px 0 6px;
    min-height: 65px;
}

/* ── Submit ── */
#preorder-card .wave-button-cont {
    margin-top: 14px;
}

#preorder-submit-btn {
    border: none;
    cursor: pointer;
}

.preorder-fineprint {
    margin: 22px 0 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: #999;
    text-align: center;
}

/* ── Verifying state ── */
#preorder-verifying {
    text-align: center;
    padding: 40px 0;
}

.preorder-spinner {
    width: 44px;
    height: 44px;
    margin: 0 auto 22px;
    border: 4px solid var(--col-green-4);
    border-top-color: var(--cb-accent);
    border-radius: 50%;
    animation: preorder-spin 0.9s linear infinite;
}

@keyframes preorder-spin {
    to { transform: rotate(360deg); }
}

.preorder-verifying-text {
    font-size: 1.05rem;
    color: var(--cb-body-text);
    transition: opacity 0.3s ease;
}

@keyframes preorder-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Fulfillment page ── */
/* ID selector needed: #preorder-hero's own padding rule outranks a class. */
#preorder-hero.fulfill-hero {
    padding-bottom: 130px;
}

/* Mini device with a check badge pinned to its corner. */
.fulfill-hero-device {
    position: relative;
    width: 150px;
    aspect-ratio: 1327 / 1830;
    margin: 0 auto 10px;
    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.18));
}

.fulfill-device-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 1;
}

.fulfill-device-screen {
    position: absolute;
    top: 3%;
    left: 3.5%;
    width: 92.5%;
    height: 94.5%;
    object-fit: cover;
    border-radius: 4% / 3%;
    z-index: 2;
}

/* Corner badge shared by the three states: check, clock, or spinner. */
.fulfill-device-badge {
    position: absolute;
    right: -16px;
    bottom: -8px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border: 3px solid white;
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.fulfill-device-check {
    background: var(--cb-accent);
}

/* The app's checkmark is a stroked path, so it is sized rather than set in
   a font size. Nudged up slightly: the glyph sits low in its own viewBox. */
.fulfill-device-check svg {
    width: 24px;
    height: 24px;
    margin-top: -2px;
}

/* Expired: same device, faded to the past; a clock takes the badge slot. */
.fulfill-device--expired .fulfill-device-frame,
.fulfill-device--expired .fulfill-device-screen {
    filter: grayscale(1);
    opacity: 0.65;
}

.fulfill-expired-badge {
    background: var(--col-yellow-1);
}

.fulfill-expired-badge svg {
    width: 24px;
    height: 24px;
}

#fulfill-expired {
    animation: preorder-fade-up 0.45s ease both;
}

#fulfill-validating {
    padding: 24px 0 10px;
    text-align: center;
}

/* The device breathes while "verification" runs. */
.fulfill-device--validating {
    animation: fulfill-pulse 2.2s ease-in-out infinite;
}

.fulfill-device--validating .fulfill-device-screen {
    filter: saturate(0.85);
}

@keyframes fulfill-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
}

/* Spinner in the badge slot; the ready state's check takes its place. */
.fulfill-validating-badge {
    background: #fff;
    border-color: var(--col-green-5);
}

.fulfill-badge-spinner {
    width: 22px;
    height: 22px;
    border: 3px solid var(--col-green-4);
    border-top-color: var(--cb-accent);
    border-radius: 50%;
    animation: preorder-spin 0.9s linear infinite;
}

.fulfill-validating-sub {
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: #999;
}

@media (prefers-reduced-motion: reduce) {
    .fulfill-device--validating {
        animation: none;
    }
}

#fulfill-ready,
#fulfill-cards .abt-row {
    animation: preorder-fade-up 0.45s ease both;
}

#fulfill-ready h1,
#fulfill-expired h1 {
    color: var(--col-green-0);
    margin: 18px 0 14px;
}

.fulfill-cards-sect {
    padding-bottom: 70px;
}

.fulfill-card {
    width: 100%;
    max-width: 620px;
    background: var(--cb-cream-light);
    border-radius: 20px;
    padding: 34px 30px;
    margin-bottom: 22px;
    text-align: center;
}

.fulfill-card-title {
    font-size: 1.45rem;
    margin-bottom: 12px;
}

.fulfill-small {
    margin: 16px 0 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #999;
}

.fulfill-small a {
    color: var(--cb-accent);
    text-decoration: underline;
}

/* Gradient icon circle, matching the CTA button greens. */
.fulfill-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 18px;
    background: linear-gradient(135deg, #64825E 0%, var(--cb-accent) 55%, #2D3B2B 100%);
}

/* FontAwesome is a solid (filled) icon, so it reads heavier than a stroked
   one at the same box size; 32px matches the old optical weight. */
.fulfill-icon svg {
    width: 32px;
    height: 32px;
}

/* Download card: cover artwork beside the copy on desktop. */
.fulfill-card--download {
    display: flex;
    align-items: center;
    gap: 28px;
    text-align: left;
}

.fulfill-card--download .fulfill-card-body {
    flex: 1;
    min-width: 0;
}

.fulfill-cover {
    flex-shrink: 0;
    width: 150px;
    border-radius: 12px;
    border: 5px solid #fff;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.15);
    transform: rotate(-3deg);
}

/* Restrained confetti dots in the brand palette. */
.fulfill-card--raffle {
    background-image:
        radial-gradient(circle 4px at 12% 22%, #c99738 98%, transparent),
        radial-gradient(circle 3px at 88% 28%, #CB6852 98%, transparent),
        radial-gradient(circle 3px at 18% 80%, #64825E 98%, transparent),
        radial-gradient(circle 4px at 84% 76%, #dbbe5a 98%, transparent),
        radial-gradient(circle 3px at 56% 10%, #9AB295 98%, transparent);
}

.fulfill-app-icon {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    margin-bottom: 14px;
}

/* Framed, compact QR tile. */
.fulfill-qr {
    display: inline-block;
    background: #fff;
    padding: 12px;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);
    margin-top: 12px;
}

.fulfill-qr svg {
    display: block;
    width: 140px;
    height: 140px;
}

.fulfill-steps {
    list-style: none;
    padding: 0;
    margin: 26px auto 0;
    max-width: 540px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 26px;
}

.fulfill-steps li {
    flex: 1 1 0;
    min-width: 0;
}

.fulfill-steps p {
    margin: 10px 0 0;
    color: var(--cb-body-text);
}

.fulfill-mobile-only {
    display: none;
}

@media (max-width: 767px) {
    .fulfill-desktop-only {
        display: none;
    }
    .fulfill-mobile-only {
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: wrap;
    }
    .fulfill-card {
        padding: 26px 18px;
    }
    .fulfill-card--download {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }
    .fulfill-cover {
        width: 128px;
    }
    .fulfill-steps {
        flex-direction: column;
        gap: 26px;
    }
}

/* ── Mobile ── */
@media (max-width: 576px) {
    #preorder-card {
        padding: 30px 20px;
        border-radius: 16px;
    }
    #preorder-hero {
        padding: 36px 15px 30px;
    }
}