.wedding-photo-page { --wedding-ink:#392b27; --wedding-muted:#82766f; --wedding-line:#e9ded2; --wedding-paper:#fffdfa; background:linear-gradient(180deg,#faf6f0 0,#fdfbf7 480px); }
.wedding-main { width:min(1120px,calc(100% - 40px)); margin:0 auto; padding:26px 0 110px; }
.wedding-back { display:inline-flex; align-items:center; gap:9px; color:var(--wedding-muted); text-decoration:none; font-size:13px; font-weight:650; }
.wedding-back:hover { color:var(--primary); }
.wedding-hero { position:relative; overflow:hidden; margin:25px 0 28px; padding:44px clamp(24px,5vw,58px) 30px; border:1px solid rgba(170,132,92,.2); border-radius:25px; background:radial-gradient(ellipse at 82% 7%,rgba(221,188,148,.22),transparent 34%),linear-gradient(125deg,#fffdfa,#f7eee4); box-shadow:0 16px 42px rgba(70,48,34,.06); }
.wedding-hero::after { position:absolute; top:-74px; right:40px; width:215px; height:215px; border:1px solid rgba(154,112,72,.13); border-radius:50%; box-shadow:0 0 0 22px rgba(154,112,72,.025),0 0 0 46px rgba(154,112,72,.025); content:""; pointer-events:none; }
.wedding-eyebrow { display:inline-flex; align-items:center; gap:8px; color:#9b6f45; font:800 10px/1.2 'Outfit',sans-serif; letter-spacing:.17em; }
.wedding-hero h2 { position:relative; z-index:1; margin:15px 0 10px; color:var(--wedding-ink); font-size:clamp(31px,5vw,46px); letter-spacing:-.045em; line-height:1.25; }
.wedding-hero h2 em { color:#aa7650; font-style:normal; }
.wedding-hero > p { max-width:580px; margin:0; color:var(--wedding-muted); font-size:14px; line-height:1.8; }
.wedding-steps { display:flex; align-items:center; gap:12px; margin-top:28px; color:#71655c; font-size:11px; font-weight:700; }
.wedding-steps span { display:flex; align-items:center; gap:7px; white-space:nowrap; }
.wedding-steps b { display:grid; width:26px; height:26px; place-items:center; border:1px solid #dfc7ae; border-radius:50%; color:#9b6f45; font:700 9px 'Outfit',sans-serif; }
.wedding-steps i { width:clamp(12px,4vw,54px); height:1px; background:#e4d7c9; }
.wedding-panel { margin:15px 0; padding:clamp(20px,3.3vw,30px); border:1px solid var(--wedding-line); border-radius:19px; background:rgba(255,253,250,.92); box-shadow:0 10px 30px rgba(63,43,30,.035); }
.wedding-section-heading { display:flex; align-items:flex-start; gap:14px; margin-bottom:22px; }
.wedding-section-heading h3 { margin:1px 0 5px; color:var(--wedding-ink); font-size:19px; line-height:1.4; }
.wedding-section-heading p { margin:0; color:var(--wedding-muted); font-size:12px; line-height:1.7; }
.wedding-step-number { display:grid; flex:0 0 35px; width:35px; height:35px; place-items:center; border-radius:11px; color:#986d49; background:#f4e9dc; font:800 10px 'Outfit',sans-serif; }
.wedding-people-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.wedding-person { position:relative; display:flex; min-width:0; flex-direction:column; align-items:center; padding:17px; border:1px dashed #d8c6b4; border-radius:15px; background:#fffefa; cursor:pointer; transition:border-color .18s,background .18s; }
.wedding-person:hover,.wedding-person:focus-within { border-color:#aa7954; background:#fdf8f1; }
.wedding-person input { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.person-role { align-self:flex-start; color:#927455; font:800 9px 'Outfit',sans-serif; letter-spacing:.13em; }
.person-preview { display:flex; width:100%; min-height:172px; flex-direction:column; align-items:center; justify-content:center; gap:8px; margin:13px 0; overflow:hidden; border-radius:11px; color:#968a80; background:linear-gradient(135deg,#f3eee8,#f9f7f2); text-align:center; font-size:11px; }
.person-preview > i { font-size:24px; color:#b49a7c; }
.person-preview img { width:100%; height:210px; object-fit:cover; }
.person-upload { display:flex; min-height:38px; align-items:center; justify-content:center; gap:8px; padding:0 16px; border:1px solid #e2d4c7; border-radius:9px; color:#574438; background:#fff; font-size:12px; font-weight:700; }
.wedding-hint { display:flex; align-items:center; gap:8px; margin:15px 1px 0; color:#8a7e73; font-size:11px; line-height:1.6; }
.wedding-hint i { color:#a27a53; }
.wedding-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.wedding-field { display:flex; min-width:0; flex-direction:column; gap:7px; color:#57473c; font-size:12px; font-weight:700; }
.wedding-field > span { display:flex; align-items:center; gap:8px; }
.wedding-field small { color:#a0958b; font-size:10px; font-weight:500; }
.wedding-field input,.wedding-field select,.wedding-field textarea,.scene-field select,.scene-field input { width:100%; min-height:43px; padding:10px 12px; border:1px solid #e3d9cf; border-radius:10px; outline:none; color:#47392f; background:#fff; font-family:inherit; font-size:12px; font-weight:500; line-height:1.5; }
.wedding-field textarea { resize:vertical; }
.wedding-field input:focus,.wedding-field select:focus,.wedding-field textarea:focus,.scene-field input:focus,.scene-field select:focus { border-color:#b38b66; box-shadow:0 0 0 3px rgba(177,135,94,.12); }
.wedding-field-wide { grid-column:1 / -1; }
.attire-note { display:flex; align-items:flex-start; gap:9px; margin-top:16px; padding:11px 13px; border:1px solid #f0e5d9; border-radius:10px; color:#806d5c; background:#fcf8f2; font-size:11px; line-height:1.6; }
.attire-note i { color:#a7784f; }
.wedding-destination { max-width:360px; margin-bottom:16px; }
.wedding-scene-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.wedding-scene { min-width:0; padding:15px; border:1px solid #ede3d9; border-radius:13px; background:#fffefa; }
.wedding-scene-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:11px; color:#735a45; font-size:11px; font-weight:750; }
.wedding-scene-head b { display:grid; width:24px; height:24px; place-items:center; border-radius:8px; color:#9c744d; background:#f5ece2; font:800 9px 'Outfit',sans-serif; }
.scene-field { display:flex; flex-direction:column; gap:6px; margin-top:9px; color:#88796d; font-size:10px; font-weight:650; }
.scene-field input,.scene-field select { min-height:38px; padding:8px 10px; font-size:11px; }
.wedding-text-button { display:inline-flex; align-items:center; gap:8px; margin-top:14px; padding:8px 0; border:0; color:#98714f; background:transparent; font-family:inherit; font-size:11px; font-weight:700; cursor:pointer; }
.wedding-text-button:hover { color:#684a35; }
.wedding-quote-panel { background:linear-gradient(135deg,#fffdf9,#f7f0e7); }
.wedding-quote { display:flex; min-height:58px; align-items:center; justify-content:space-between; gap:15px; padding:14px 16px; border:1px solid #eaddcf; border-radius:12px; color:#605043; background:rgba(255,255,255,.82); font-size:12px; }
.wedding-model-field { margin-bottom:8px; }
.wedding-model-note { margin:0 0 12px; color:#8a7e73; font-size:11px; line-height:1.6; }
.quote-model { color:#887665; font-size:11px; }
.quote-total { color:#8c5e39; font-size:19px; font-weight:800; white-space:nowrap; }
.quote-error { color:#aa5149; font-weight:650; line-height:1.6; }
.quote-spinner { width:16px; height:16px; flex:0 0 auto; border:2px solid #e4d6c7; border-top-color:#98714f; border-radius:50%; animation:wedding-spin .8s linear infinite; }
@keyframes wedding-spin { to { transform:rotate(360deg); } }
.wedding-submit { display:flex; width:100%; min-height:51px; align-items:center; justify-content:center; gap:10px; margin-top:14px; border:0; border-radius:12px; color:#fff; background:linear-gradient(105deg,#a46f49,#62483b); box-shadow:0 8px 18px rgba(104,72,53,.16); font-size:13px; font-weight:800; cursor:pointer; transition:transform .18s,box-shadow .18s,opacity .18s; }
.wedding-submit:not(:disabled):hover { transform:translateY(-1px); box-shadow:0 12px 22px rgba(104,72,53,.22); }
.wedding-submit:disabled { opacity:.48; cursor:not-allowed; }
.wedding-refund-note { margin:11px 2px 0; color:#8b7e72; font-size:10px; line-height:1.7; }
.wedding-results { margin-top:26px; padding:clamp(20px,3vw,29px); border:1px solid var(--wedding-line); border-radius:19px; background:#fffdfa; }
.wedding-results-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:16px; }
.wedding-results-heading h3 { margin:8px 0 0; color:var(--wedding-ink); font-size:21px; }
.wedding-history-link { display:inline-flex; align-items:center; gap:8px; color:#98714f; font-size:11px; font-weight:700; text-decoration:none; }
.wedding-result-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.wedding-result-card { overflow:hidden; border:1px solid #ece2d8; border-radius:13px; background:#fff; }
.wedding-result-card img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#f3eee8; }
.wedding-result-placeholder { display:grid; min-height:150px; place-content:center; gap:13px; padding:18px; color:#8b7766; background:linear-gradient(145deg,#faf6f0,#f1e9df); text-align:center; font-size:11px; }
.wedding-progress-row { display:flex; width:min(calc(100% - 24px),280px); align-items:center; gap:9px; margin:0 auto 8px; }
.wedding-progress { flex:1 1 auto; overflow:hidden; width:auto; max-width:220px; height:7px; margin:0; border-radius:999px; background:#e5d9cb; }
.wedding-progress-fill { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#bc8a60,#70503c); transition:width .35s ease; }
.wedding-progress--indeterminate .wedding-progress-fill { width:38%; animation:wedding-progress-slide 1.5s ease-in-out infinite alternate; }
.wedding-progress-percent { min-width:38px; color:#75665b; text-align:right; font-size:10px; font-weight:800; font-variant-numeric:tabular-nums; }
.wedding-animation-progress { width:auto; margin:0 12px 10px; }
@keyframes wedding-progress-slide { from { transform:translateX(0); } to { transform:translateX(165%); } }
.wedding-result-meta { display:flex; min-height:52px; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; color:#665548; font-size:11px; font-weight:700; }
.wedding-result-state { color:#998c80; font-size:10px; font-weight:600; }
.wedding-result-download { display:inline-flex; align-items:center; justify-content:center; gap:7px; margin:0 12px 12px; padding:9px 13px; border:1px solid #d9c4ae; border-radius:9px; color:#79583d; background:#fffaf3; font-size:11px; font-weight:800; text-decoration:none; }
.wedding-result-download:hover { background:#f7eddf; }
.wedding-photo-page [hidden] { display:none !important; }
.wedding-result-animation { display:inline-flex; align-items:center; justify-content:center; gap:7px; margin:0 12px 12px; padding:10px 14px; border:0; border-radius:9px; color:#fff; background:linear-gradient(135deg,#a96e38,#684632); font:inherit; font-size:12px; font-weight:800; cursor:pointer; }
.wedding-result-animation:hover:not(:disabled) { filter:brightness(1.06); }
.wedding-result-animation:disabled { opacity:.65; cursor:wait; }
.wedding-animation-state { margin:0 12px 12px; color:#75665b; font-size:12px; line-height:1.55; }
.wedding-result-video { display:block; width:calc(100% - 24px); max-height:360px; margin:0 12px 12px; border-radius:10px; background:#171717; }
.wedding-status { position:sticky; z-index:5; bottom:14px; margin:14px auto 0; padding:12px 16px; border:1px solid #eadbc9; border-radius:12px; color:#594638; background:#fffaf2; box-shadow:0 8px 22px rgba(60,43,30,.13); font-size:12px; line-height:1.6; }
.wedding-status[data-type="error"] { border-color:#edc9c5; color:#914b45; background:#fff7f5; }
.wedding-status[data-type="success"] { border-color:#d7e7d4; color:#4f744a; background:#f7fff5; }
@media (max-width:700px) { .wedding-main { width:calc(100% - 28px); padding-top:18px; } .wedding-hero { margin:19px 0 18px; padding:31px 20px 22px; border-radius:19px; } .wedding-hero::after { right:-93px; opacity:.55; } .wedding-hero > p { font-size:13px; } .wedding-steps { gap:6px; justify-content:space-between; margin-top:22px; font-size:9px; } .wedding-steps span { gap:5px; } .wedding-steps b { width:22px; height:22px; font-size:8px; } .wedding-steps i { width:12px; } .wedding-panel { margin:12px 0; padding:18px 15px; border-radius:15px; } .wedding-section-heading { gap:10px; margin-bottom:17px; } .wedding-section-heading h3 { font-size:17px; } .wedding-section-heading p { font-size:11px; } .wedding-step-number { flex-basis:31px; width:31px; height:31px; } .wedding-people-grid { gap:9px; } .wedding-person { padding:10px; } .person-preview { min-height:128px; margin:10px 0; font-size:10px; } .person-preview img { height:155px; } .person-upload { min-height:35px; padding:0 10px; font-size:11px; } .wedding-form-grid,.wedding-scene-list { grid-template-columns:1fr; gap:12px; } .wedding-field-wide { grid-column:auto; } .wedding-destination { max-width:none; } .wedding-results-heading { align-items:flex-start; flex-direction:column; } .wedding-result-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .wedding-result-meta { align-items:flex-start; flex-direction:column; min-height:55px; padding:9px; font-size:10px; } }
@media (prefers-reduced-motion:reduce) { .quote-spinner,.wedding-progress--indeterminate .wedding-progress-fill { animation:none; } .wedding-submit,.wedding-progress-fill { transition:none; } }
.wedding-review { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:16px 0 10px; }
.wedding-review-person,.wedding-review-summary { min-width:0; padding:12px; border:1px solid #eadbcb; border-radius:12px; background:#fffaf4; }
.wedding-review-person { display:flex; align-items:center; gap:11px; }
.wedding-review-person img { width:58px; height:68px; flex:none; object-fit:cover; border-radius:8px; background:#eee5dc; }
.wedding-review-person strong,.wedding-review-person span { display:block; }
.wedding-review-person span,.wedding-review-summary { color:#78695c; font-size:11px; line-height:1.65; }
.wedding-review-summary { grid-column:1/-1; }
.wedding-identity-confirm { display:flex; align-items:flex-start; gap:9px; margin:12px 0 16px; color:#574537; font-size:12px; line-height:1.65; cursor:pointer; }
.wedding-identity-confirm input { margin-top:3px; accent-color:#8d603d; }
.wedding-results-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.wedding-result-retry { min-height:36px; padding:0 12px; border:1px solid #c69a70; border-radius:9px; background:#fffaf4; color:#765136; font-weight:700; cursor:pointer; }
.wedding-result-retry:disabled { opacity:.6; cursor:wait; }
@media(max-width:640px) { .wedding-review { grid-template-columns:1fr; } .wedding-review-summary { grid-column:auto; } .wedding-results-actions { width:100%; } }