/* «جشن‌نامه» as a product (script 95): its product page, the start page and the builder.
   The site's own tokens (digicard.css) for the frame, and the page's ivory and gold for what
   belongs to the wedding page itself. Everything is prefixed ws- / wsb-. */

.ws-hero,
.ws-features,
.ws-steps,
.ws-price,
.ws-start,
.wsb-head,
.wsb,
.wsb-notice {
    --ws-gold: #b98a3e;
    --ws-gold-soft: #f6ecd8;
    --ws-ivory: #fbf7f0;
    --ws-ink: #3a302b;
}

/* ------------------------------------------------ the product page */

.ws-hero {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    align-items: center;
    gap: 40px;
    padding: 28px 0 40px;
}

.ws-badge {
    display: inline-block;
    margin: 18px 0 10px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--ws-gold-soft);
    color: #8a6526;
    font-size: 13px;
    font-weight: 600;
}

.ws-hero h1 { margin: 0 0 14px; font-size: clamp(30px, 6vw, 44px); line-height: 1.5; text-wrap: balance; }
.ws-hero h1 em { font-style: normal; color: var(--ws-gold); }
.ws-lead { margin: 0 0 22px; color: var(--dc-muted); font-size: 16px; line-height: 2.1; max-width: 60ch; }
.ws-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ws-note { margin: 14px 0 0; color: var(--dc-muted); font-size: 13.5px; }

/* A phone with the sealed envelope on it, as the guest first sees it. */
.ws-phone {
    justify-self: center;
    display: block;
    width: min(290px, 78vw);
    padding: 12px;
    border-radius: 42px;
    background: #1f1a17;
    box-shadow: 0 40px 80px rgba(60, 40, 20, .28), 0 0 0 1px rgba(0, 0, 0, .3) inset;
    text-decoration: none;
}

.ws-phone-screen {
    position: relative;
    display: block;
    aspect-ratio: 9 / 18.5;
    border-radius: 31px;
    overflow: hidden;
    background: #efe2cc;
}

.ws-phone-screen > img:first-child {
    position: absolute;
    left: 50%;
    top: 46%;
    width: auto;
    height: 100%;
    max-width: none;
    transform: translate(-50%, -45%);
}

.ws-phone-seal {
    position: absolute;
    left: 50%;
    top: 46%;
    width: 46%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 6px 8px rgba(110, 50, 50, .35));
    animation: ws-breathe 2.6s ease-in-out infinite;
}

@keyframes ws-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.05); }
}

.ws-phone-tap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    text-align: center;
    color: #6b5a4e;
    font-size: 12.5px;
}

.ws-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 10px 0 46px;
}

.ws-features article {
    padding: 22px 20px;
    border-radius: var(--dc-radius);
    background: var(--ws-ivory);
    border: 1px solid #efe6d6;
}

.ws-icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--ws-gold-soft);
    color: var(--ws-gold);
}

.ws-icon svg { width: 22px; height: 22px; }
.ws-features h2 { margin: 12px 0 6px; font-size: 17px; }
.ws-features p { margin: 0; color: var(--dc-muted); font-size: 14px; line-height: 1.95; }

.ws-steps { margin: 0 0 46px; }
.ws-steps h2, .ws-price h2 { margin: 0 0 16px; font-size: 22px; }

.ws-steps ol {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ws;
}

.ws-steps li {
    counter-increment: ws;
    padding: 20px;
    border-radius: var(--dc-radius);
    border: 1px solid var(--dc-line);
}

.ws-steps li::before {
    content: counter(ws, persian);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-bottom: 10px;
    border-radius: 50%;
    background: var(--dc-brand);
    color: #fff;
    font-weight: 700;
}

.ws-steps b { display: block; margin-bottom: 4px; }
.ws-steps span { color: var(--dc-muted); font-size: 14px; line-height: 1.95; }

.ws-price {
    max-width: 520px;
    margin: 0 auto 56px;
    padding: 28px 26px;
    border-radius: 22px;
    background: linear-gradient(160deg, #fffaf1, #f4e7cf);
    text-align: center;
    box-shadow: 0 24px 50px rgba(110, 80, 40, .14);
}

.ws-price-amount { margin: 0 0 6px; font-size: 26px; font-weight: 800; color: #7e5a1f; }
.ws-price p { margin: 0 0 14px; color: #6b5a4e; }

.ws-price ul { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; text-align: right; }
.ws-price li { display: flex; gap: 8px; align-items: center; font-size: 14.5px; }
.ws-price li svg { width: 18px; height: 18px; flex: none; color: var(--ws-gold); }

/* ------------------------------------------------ the start page */

.ws-start {
    max-width: 460px;
    margin: 40px auto 60px;
    padding: 30px 24px;
    border-radius: 22px;
    background: var(--ws-ivory);
    border: 1px solid #efe6d6;
    text-align: center;
}

.ws-start img { width: 96px; height: auto; filter: drop-shadow(0 8px 12px rgba(110, 50, 50, .3)); }
.ws-start h1 { margin: 12px 0 8px; font-size: 26px; }
.ws-start p { color: var(--dc-muted); line-height: 2; }
.ws-start form { margin: 18px 0 12px; }
.ws-error { color: #a2453b !important; }

/* ------------------------------------------------ the builder */

.wsb-head { display: grid; gap: 10px; margin: 6px 0 14px; }
.wsb-head h1 { margin: 0; font-size: clamp(22px, 5vw, 30px); }
.wsb-status { display: flex; flex-wrap: wrap; gap: 8px; }

.wsb-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--ws-gold-soft);
    color: #7e5a1f;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.wsb-chip svg { width: 16px; height: 16px; }
.wsb-chip.is-ok { background: #e6f3ea; color: #2e6b45; }
.wsb-chip.is-live { background: var(--dc-brand-soft); color: var(--dc-brand-ink); }

.wsb-notice {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #e6f3ea;
    color: #2e6b45;
    font-size: 14px;
}

.wsb-notice.is-error { background: #fbeceb; color: #a2453b; }

.wsb { display: grid; gap: 12px; max-width: 640px; padding-bottom: 96px; }
.wsb *, .wsb *::before, .wsb *::after { box-sizing: border-box; }

.wsb details {
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--dc-line);
    padding: 0 16px;
}

.wsb details[open] { padding-bottom: 18px; }

.wsb summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 0;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    list-style: none;
}

.wsb summary::-webkit-details-marker { display: none; }

.wsb summary::after {
    content: "";
    width: 9px;
    height: 9px;
    margin-inline-start: auto;
    border: solid var(--dc-muted);
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg);
    transition: transform .2s ease;
}

.wsb details[open] > summary::after { transform: rotate(135deg); }

.wsb summary span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ws-gold-soft);
    color: #7e5a1f;
    font-size: 14px;
}

.wsb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.wsb-field { display: grid; gap: 6px; margin-bottom: 12px; font-size: 13.5px; color: var(--dc-muted); }

.wsb input:not([type=checkbox]):not([type=radio]):not([type=file]),
.wsb select,
.wsb textarea {
    width: 100%;
    min-height: 46px;
    padding: 10px 12px;
    border: 1px solid var(--dc-line);
    border-radius: 12px;
    background: #fff;
    color: var(--dc-ink);
    font: inherit;
    font-size: 16px;
}

.wsb textarea { line-height: 1.9; resize: vertical; }

.wsb-hint { margin: 0 0 12px; color: var(--dc-muted); font-size: 13px; line-height: 1.9; }
.wsb-hint.is-ok { color: #2e6b45; }
.wsb-hint.is-warned { color: #9a4b1c; }

/* The venue map: the editor's .ed-map box (digicard.css), a little shorter on a phone. */
.wsb-map-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 8px; font-size: 14px; font-weight: 600; }
.wsb .wsb-locate { padding: 6px 12px; border: 1px solid var(--dc-line, #ddd); border-radius: 999px; background: #fff; color: inherit; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.wsb .wsb-map { height: 280px; margin-bottom: 8px; }
.wsb .wsb-map[hidden] { display: none; }
.wsb-hint svg { width: 16px; height: 16px; vertical-align: -3px; }
.wsb-inline { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: 10px; color: var(--dc-muted); }

.wsb-date { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; }
.wsb-date legend, .wsb-music legend { margin-bottom: 6px; padding: 0; font-size: 13.5px; color: var(--dc-muted); }
.wsb-music { margin: 6px 0 0; padding: 0; border: 0; }

.wsb-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }

.wsb-photos li {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--ws-ivory);
    border: 1px solid var(--dc-line);
}

.wsb-photos li:first-child { outline: 2px solid var(--ws-gold); outline-offset: -2px; }
.wsb-photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }

.wsb-photo-tools { position: absolute; top: 6px; left: 6px; display: flex; gap: 4px; }

.wsb .wsb-photo-tools button {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .9);
    color: var(--dc-ink);
    font-size: 12px;
    cursor: pointer;
}

.wsb-venue { display: flex; align-items: center; gap: 4px; padding: 6px 8px; font-size: 12.5px; color: var(--dc-muted); }
.wsb-venue-only { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; vertical-align: middle; }

.wsb-upload { position: relative; display: inline-block; }
.wsb-upload input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.wsb-upload span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: 1.5px dashed var(--ws-gold);
    border-radius: 12px;
    color: #7e5a1f;
    font-weight: 600;
}

.wsb-upload span svg { width: 20px; height: 20px; }
.wsb-upload input:focus-visible + span { outline: 2px solid var(--dc-brand); outline-offset: 2px; }
.wsb-own-music { display: grid; justify-items: start; gap: 6px; margin: 2px 0 10px; padding-inline-start: 28px; }
.wsb-own-music audio { width: 100%; max-width: 360px; height: 40px; }
.wsb-own-music audio[hidden] { display: none; }
.wsb-own-music .wsb-hint { margin: 0; }
.wsb-upload-state { min-height: 1.6em; margin: 8px 0 0; font-size: 13px; color: var(--dc-muted); }

.wsb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }

.wsb .wsb-chips button {
    padding: 6px 12px;
    border: 1px solid #efe6d6;
    border-radius: 999px;
    background: var(--ws-ivory);
    color: var(--ws-ink);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.wsb-plan { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.wsb-plan li { display: grid; grid-template-columns: 96px 1fr 120px; gap: 8px; }
.wsb-plan li[hidden] { display: none; }

.wsb-switch { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; font-size: 15px; line-height: 1.8; cursor: pointer; }
.wsb-switch input { width: 20px; height: 20px; margin-top: 4px; accent-color: var(--ws-gold); flex: none; }

/* The two buttons stay at the foot of the screen while the form scrolls. */
.wsb-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    gap: 10px;
    margin: 0 -16px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .94);
    border-top: 1px solid var(--dc-line);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.wsb-bar button { flex: 1; }
/* Three buttons on a phone: the two quiet ones narrower, "send" the widest. Selectors strong
   enough to beat the site's own submit-button rule in digicard.css. */
.wsb .wsb-bar button[type=submit] { min-width: 0; padding-inline: 10px; font-size: 14px; white-space: nowrap; }
.wsb .wsb-bar button[type=submit].btn-primary { flex: 1.8; }
.wsb .wsb-bar button[type=submit].btn-quiet,
.wsb .wsb-bar button[type=submit].btn-quiet:hover { background: #fff; color: var(--dc-ink, #2b2b2b); box-shadow: inset 0 0 0 1px var(--dc-line, #ddd); }

@media (max-width: 760px) {
    .ws-hero { grid-template-columns: 1fr; gap: 26px; }
    .ws-features, .ws-steps ol { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .wsb-grid { grid-template-columns: 1fr; gap: 0; }
    .wsb-plan li { grid-template-columns: 84px 1fr; }
    .wsb-plan li select { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .ws-phone-seal { animation: none; }
}