/* DECOR-ONLY overlay. Based on the eight user-provided reference images.
   Do not edit main layout, content, image paths, scripts, forms or interactions. */
:root{--reference-olive:#4b573a;--reference-sage:#727c58;--reference-ivory:#faf6ec;--reference-champagne:#c9ae7b}
.invitation-shell{background:radial-gradient(ellipse at 50% 22%,#fffdf7 0%,#faf5eb 65%,#f3eddf 100%)}
.burgundy-panel.invitation-panel{background:radial-gradient(ellipse at center,#fffdf8,#f8f1e4)!important;color:#3e4b35!important;border:1px solid #d1b888!important;border-radius:19px;box-shadow:0 9px 24px #4c503021}
.invitation-panel .panel-title,.invitation-panel .couple-names,.invitation-panel .family-grid{color:#3e4b35}
.invitation-panel .panel-flower-left{opacity:1;filter:none}
.invitation-panel .ceremony-floral-bottom{opacity:1;filter:none}
.wedding-countdown{background:radial-gradient(ellipse at 30% 10%,#697650,#435039 85%)!important;border:1px solid #b9a477;border-radius:15px;box-shadow:0 8px 21px #404b3335}
.countdown-unit{background:#f1e8cb20!important;border:1px solid #f6edd226!important;border-radius:8px}
.album-section{background:radial-gradient(ellipse at center,#fffdf8,#f8f0e4)!important;border:1px solid #e5d7bf;border-radius:18px}
.album-floral-left,.album-floral-right{opacity:1;filter:none}
.burgundy-panel.reception-panel{background:radial-gradient(ellipse at 25% 12%,#64724b,#3c4b32 82%)!important;color:#faf3df!important;border:1px solid #c3a877!important;border-radius:16px;box-shadow:0 8px 24px #414c3438}
.burgundy-panel.timeline-panel{background:radial-gradient(ellipse at center,#fffdf7,#f8f1e5)!important;color:#405039!important;border:1px solid #d4b888!important;border-radius:17px}
.timeline-panel .panel-title,.timeline-panel li{color:#405039!important}
.guestbook-section,.gift-section{background:radial-gradient(ellipse at center,#fffdf7,#f8f1e6)!important;border:1px solid #e6d8bf;border-radius:17px}
.guestbook-flower,.gift-floral,.timeline-flower{opacity:1;filter:none}

/* Eight reference-specific botanical placements; original main image files retained. */
.invitation-panel>.panel-flower-left{top:-35px;left:-58px;right:auto;bottom:auto;width:clamp(130px,24vw,205px);height:auto;transform:rotate(-7deg);opacity:1;filter:none}
.invitation-panel>.ceremony-floral-bottom{position:absolute;right:-39px;bottom:-33px;width:clamp(140px,28vw,215px);height:auto;transform:scaleX(-1);opacity:1;filter:none}
.wedding-countdown>.countdown-floral{position:absolute;left:-34px;bottom:-24px;width:clamp(120px,25vw,175px);height:auto;filter:none;opacity:1}
.album-section>.album-floral-left,.album-section>.album-floral-right{position:absolute;bottom:10px;width:clamp(130px,25vw,200px);height:auto;filter:none;opacity:1;z-index:0}
.album-section>.album-floral-left{left:-28px;transform:none}
.album-section>.album-floral-right{right:-28px;transform:scaleX(-1)}
.album-section>.album-viewer,.album-section>.album-thumbs{position:relative;z-index:2}
.reception-panel>.panel-flower-reception{top:auto;right:auto;bottom:-33px;left:-49px;width:clamp(135px,27vw,205px);height:auto;transform:rotate(-8deg);filter:none;opacity:1}
.timeline-panel>.timeline-flower{top:auto;left:auto;right:-38px;bottom:-34px;width:clamp(130px,26vw,195px);height:auto;transform:scaleX(-1);filter:none;opacity:1}
.guestbook-section>.guestbook-flower{position:absolute;top:auto;left:auto;right:-24px;bottom:5px;width:clamp(110px,23vw,170px);height:auto;transform:scaleX(-1);filter:none;opacity:1}
.gift-section>.gift-floral{position:absolute;right:calc(50% - 155px);bottom:18px;width:clamp(130px,25vw,185px);height:auto;transform:scaleX(-1);filter:none;opacity:1}
@media(max-width:600px){.invitation-panel>.panel-flower-left{width:128px;left:-40px;top:-25px}.invitation-panel>.ceremony-floral-bottom{width:140px;right:-28px;bottom:-20px}.reception-panel>.panel-flower-reception{width:140px;left:-30px}.timeline-panel>.timeline-flower{width:135px;right:-25px}.album-section>.album-floral-left,.album-section>.album-floral-right{width:130px}}


/* Detailed reference pass: background grain, golden hairlines, botanical layering. */
.invitation-panel,.reception-panel,.timeline-panel{isolation:isolate}
.invitation-panel:before,.timeline-panel:before{opacity:.12!important;mix-blend-mode:multiply}
.reception-panel:before{opacity:.08!important;mix-blend-mode:soft-light}
.invitation-panel:after,.reception-panel:after,.timeline-panel:after{content:"";position:absolute;inset:7px;border:1px solid #c8b17b55;border-radius:inherit;pointer-events:none;z-index:0}
.invitation-panel .panel-title,.invitation-panel .announce,.invitation-panel .couple-names,.invitation-panel .ceremony-info,.invitation-panel .family-grid{color:#3d4b36!important}
.invitation-panel .couple-names h3{color:#3e4d36!important}
.invitation-panel .ceremony-date,.invitation-panel .lunar-date{color:#3e4b36!important}
.reception-panel .panel-title,.reception-panel h3,.reception-panel .lunar-date{color:#f9f0d8!important}
.timeline-panel .panel-title,.timeline-panel h3,.timeline-panel p,.timeline-panel span{color:#405039}
.wedding-countdown .countdown-unit strong{color:#f7edcf}
.wedding-countdown .countdown-unit span{color:#f8efd8}
.album-section .album-stack{filter:drop-shadow(0 8px 12px #5e61452b)}
.album-section .album-arrow{background:#fffdf6;color:#4c573d;border:1px solid #e2d7bd}
.guestbook-section input,.guestbook-section textarea{background:#fffefa;border:1px solid #cfc4b3;border-radius:7px}
.guestbook-section button[type="submit"]{background:#4c5a3e;color:#fff8e8}
.gift-section .gift-envelopes{filter:drop-shadow(0 8px 11px #414d3440)}
@media(max-width:600px){.invitation-panel:after,.reception-panel:after,.timeline-panel:after{inset:5px}.album-section .album-stack{filter:drop-shadow(0 5px 8px #5e61452b)}}


/* Asset mapping: user-supplied /assets/theme/ collection; visual changes only.
   CSS content replaces decorative <img> rendering, not src attributes or JS. */


/* Eight section-specific decorations sourced from existing assets/theme. */


/* Layered botanical art. Decoration-only DOM nodes, never interactive. */
.decor-layer{position:absolute;display:block;z-index:1;pointer-events:none!important;user-select:none;background-repeat:no-repeat;background-size:contain;background-position:center;filter:drop-shadow(0 3px 3px #34402a1c)}
.invitation-panel,.wedding-countdown,.album-section,.reception-panel,.timeline-panel,.guestbook-section,.gift-section{position:relative;isolation:isolate}
.decor-layer--ceremony-a{width:37%;height:32%;top:-5%;left:-13%;background-image:url("assets/theme/Cành hoa trắng rủ thanh nhã.png");transform:rotate(-7deg)}
.decor-layer--ceremony-b{width:46%;height:32%;right:-12%;bottom:-7%;background-image:url("assets/theme/Elegant White Calla Lily Bouquet olive.png");transform:rotate(8deg)}
.decor-layer--countdown-a{width:28%;height:95%;bottom:-24%;left:-9%;background-image:url("assets/theme/countdown-calla-bouquet-only-v1.png")}
.decor-layer--countdown-b{width:18%;height:50%;top:-20%;right:2%;background-image:url("assets/theme/Calla Lily Wedding Bouquet Clipart Collection 24.png");opacity:.7;transform:rotate(-20deg)}
.decor-layer--album-a{width:28%;height:48%;left:-9%;bottom:-11%;background-image:url("assets/theme/Elegant Calla Lily Floral Corner.png")}
.decor-layer--album-b{width:28%;height:48%;right:-9%;bottom:-11%;background-image:url("assets/theme/Elegant Calla Lily Floral Corner.png");transform:scaleX(-1)}
.decor-layer--reception-a{width:37%;height:29%;left:-13%;bottom:-6%;background-image:url("assets/theme/Elegant White Calla Lily Bouquet olive.png")}
.decor-layer--reception-b{width:31%;height:25%;right:-12%;bottom:-5%;background-image:url("assets/theme/Elegant Calla Lily Floral Corner.png");transform:scaleX(-1)}
.decor-layer--timeline-a{width:40%;height:26%;left:-12%;bottom:-5%;background-image:url("assets/theme/Elegant Calla Lily Floral Corner.png")}
.decor-layer--timeline-b{width:34%;height:23%;right:-11%;bottom:-6%;background-image:url("assets/theme/Elegant White Calla Lily Bouquet olive.png");transform:scaleX(-1)}
.decor-layer--wishes-a{width:35%;height:38%;right:-8%;bottom:-7%;background-image:url("assets/theme/Elegant Calla Lily Floral Corner.png");transform:scaleX(-1)}
.decor-layer--wishes-b{width:20%;height:25%;left:-6%;top:-5%;background-image:url("assets/theme/Botanical calla lily frame transparent 12.png");opacity:.75}
.decor-layer--gift-a{width:35%;height:42%;left:1%;bottom:0;background-image:url("assets/theme/White Calla Lily Bouquet Cutout.png")}
.decor-layer--gift-b{width:31%;height:40%;right:0;bottom:0;background-image:url("assets/theme/Elegant Calla Lily Floral Corner.png");transform:scaleX(-1)}
/* Existing content and clickable controls stay above botanical artwork. */
.wedding-countdown>*:not(.decor-layer):not(.floral-decor),.album-section>*:not(.decor-layer):not(.floral-decor),.guestbook-section>*:not(.decor-layer):not(.guestbook-art),.gift-section>*:not(.decor-layer):not(.floral-decor){position:relative;z-index:2}
@media(max-width:600px){.decor-layer--ceremony-a{left:-8%;width:36%}.decor-layer--ceremony-b{right:-9%;width:38%}.decor-layer--album-a,.decor-layer--album-b{width:30%;height:30%;bottom:-3%}.decor-layer--wishes-a{width:31%}.decor-layer--gift-a,.decor-layer--gift-b{width:30%}}


/* Reference palette + restrained floral composition, after asset inventory.
   Cream paper / olive / champagne gold; never touch event content or JS. */
:root{--decor-olive-deep:#414d37;--decor-olive:#59664b;--decor-olive-soft:#849075;--decor-cream:#faf6ed;--decor-paper:#fffdf7;--decor-gold:#c5ad7b}
.invitation-shell{background-color:var(--decor-cream)}
.invitation-panel,.timeline-panel,.album-section,.guestbook-section,.gift-section{background-color:var(--decor-paper)!important}
.reception-panel,.wedding-countdown{background-color:var(--decor-olive-deep)!important}
.invitation-panel,.timeline-panel,.reception-panel{border-color:var(--decor-gold)!important}
.decor-layer{background-size:contain;background-repeat:no-repeat;pointer-events:none;max-width:none}
.decor-layer--ceremony-a{width:31%;height:28%;left:-8%;top:-3%;opacity:.95}
.decor-layer--ceremony-b{width:36%;height:26%;right:-7%;bottom:-4%;opacity:.96}
.decor-layer--countdown-a{width:23%;height:88%;left:-6%;bottom:-22%}
.decor-layer--countdown-b{width:11%;height:35%;right:2%;top:-12%;opacity:.48}
.decor-layer--album-a,.decor-layer--album-b{width:22%;height:37%;bottom:-7%;opacity:.94}
.decor-layer--reception-a,.decor-layer--reception-b{width:27%;height:25%;bottom:-4%}
.decor-layer--timeline-a,.decor-layer--timeline-b{width:28%;height:23%;bottom:-5%}
.decor-layer--wishes-a{width:24%;height:27%;right:-4%;bottom:-4%}
.decor-layer--wishes-b{opacity:.28;width:14%;height:18%}
.decor-layer--gift-a,.decor-layer--gift-b{width:25%;height:31%;bottom:0}
@media(max-width:600px){
.decor-layer--ceremony-a{width:27%;left:-5%}.decor-layer--ceremony-b{width:30%;right:-5%}
.decor-layer--album-a,.decor-layer--album-b{width:23%;height:25%;bottom:-2%}
.decor-layer--wishes-a{width:22%;right:-3%}
.decor-layer--gift-a,.decor-layer--gift-b{width:23%;height:26%}
}


/* Third, independent floral layer per section. Every layer can be repositioned separately. */
.decor-layer--ceremony-c{width:18%;height:18%;right:3%;top:1%;background-image:url("assets/theme/Botanical calla lily frame transparent 12.png");opacity:.45;transform:rotate(12deg)}
.decor-layer--countdown-c{width:12%;height:44%;right:7%;bottom:-12%;background-image:url("assets/theme/Calla Lily Wedding Bouquet Clipart Collection 25.png");opacity:.7;transform:rotate(-16deg)}
.decor-layer--album-c{width:17%;height:20%;left:42%;bottom:-7%;background-image:url("assets/theme/Calla Lily Wedding Bouquet Clipart Collection 24.png");opacity:.32}
.decor-layer--reception-c{width:17%;height:22%;left:42%;bottom:-7%;background-image:url("assets/theme/Calla Lily Wedding Bouquet Clipart Collection 25.png");opacity:.5}
.decor-layer--timeline-c{width:17%;height:20%;left:43%;bottom:-5%;background-image:url("assets/theme/Calla Lily Wedding Bouquet Clipart Collection 24.png");opacity:.5}
.decor-layer--wishes-c{width:14%;height:18%;left:0;bottom:-3%;background-image:url("assets/theme/Calla Lily Wedding Bouquet Clipart Collection 25.png");opacity:.3}
.decor-layer--gift-c{width:16%;height:22%;left:42%;bottom:0;background-image:url("assets/theme/Calla Lily Wedding Bouquet Clipart Collection 24.png");opacity:.45}
/* Keep the overlay from capturing clicks, and don't replace the original envelope. */
.decor-layer,.decor-layer::before,.decor-layer::after{pointer-events:none!important}
@media(max-width:600px){.decor-layer--ceremony-c{width:15%}.decor-layer--album-c,.decor-layer--reception-c,.decor-layer--timeline-c,.decor-layer--gift-c{opacity:.22}}


/* DECOR REFINEMENT — approved deployment, 2026-10-30.
   Override applied after earlier reference-only rules; existing interactions unchanged. */
:root {
  --decor-deep-olive: #414d37;
  --decor-olive: #59664b;
  --decor-ivory: #faf6ed;
  --decor-champagne: #c5ad7b;
}
/* Restore nuanced panels; don't flatten existing radial gradients. */
.burgundy-panel.invitation-panel {
  background: radial-gradient(ellipse at 50% 34%, #fffdf8 0%, #f8f1e4 100%) !important;
  border-color: var(--decor-champagne) !important;
}
.burgundy-panel.reception-panel {
  background: radial-gradient(ellipse at 25% 12%, #64724b 0%, #3c4b32 85%) !important;
  border-color: var(--decor-champagne) !important;
}
.burgundy-panel.timeline-panel,
.album-section,.guestbook-section,.gift-section {
  background: radial-gradient(ellipse at 50% 30%, #fffdf8 0%, #f8f1e6 100%) !important;
}
.wedding-countdown {
  background: radial-gradient(ellipse at 30% 10%, #697650 0%, #435039 85%) !important;
}
/* Keep all decorative overlays noninteractive and behind form/buttons. */
.decor-layer {pointer-events:none !important; user-select:none;}
.invitation-panel > .decor-layer,
.reception-panel > .decor-layer,
.timeline-panel > .decor-layer {z-index:0;}
.invitation-panel > :not(.decor-layer):not(.panel-flower):not(.floral-decor),
.reception-panel > :not(.decor-layer):not(.panel-flower),
.timeline-panel > :not(.decor-layer):not(.timeline-flower) {
  position:relative; z-index:2;
}
/* Provisional third layers should not duplicate clipart sheets.
   Re-enable each only once a genuinely transparent botanical cutout is verified. */
.decor-layer--ceremony-c, .decor-layer--countdown-c,
.decor-layer--album-c, .decor-layer--reception-c,
.decor-layer--timeline-c, .decor-layer--wishes-c,
.decor-layer--gift-c, .decor-layer--envelope-petals {display:none;}
@media(max-width:600px) {
 .decor-layer--ceremony-a {width:27%;left:-4%;}
 .decor-layer--ceremony-b {width:30%;right:-4%;}
 .decor-layer--album-a,.decor-layer--album-b {width:22%;bottom:-2%;}
 .decor-layer--wishes-a {width:23%;right:-3%;}
}


/* Preserve the -9deg bouquet angle throughout the existing float animation.
   The earlier drFloat keyframes animated transform and silently erased rotate(). */
@keyframes envelopeCallaFloat {
  0%,100% { transform:translate3d(0,0,0) rotate(-9deg); }
  50% { transform:translate3d(0,-7px,0) rotate(-9deg); }
}

/* TASK 01 / ENVELOPE — isolated art direction.
   Uses existing olive envelope, couple photograph and calla bouquet (asset alpha still to be verified).
   Preserve JS-driven .is-opening/.is-open animations. No other section changes. */
.cover {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255,253,247,.86),rgba(250,246,237,.92) 64%,rgba(237,232,217,.8)),
    #faf6ed;
}
.cover .cover-castle {
  opacity:.075;
  filter:sepia(.25) saturate(.4);
}
.cover .envelope-open {
  filter:drop-shadow(0 14px 18px rgba(43,52,33,.12));
}
.cover .envelope-art {
  background:linear-gradient(155deg,#6c785c 0%,#48553d 56%,#354332 100%);
  box-shadow:0 18px 36px rgba(43,52,33,.22),0 2px 4px rgba(43,52,33,.10);
  isolation:isolate;
}
/* Paper-photo: gently lifted and angled, with its existing reveal animation untouched. */
.cover .envelope-photo-float {
  left:35%;
  width:59%;
  top:-5%;
}
.cover .envelope-photo {
  border-color:#fffdf7;
  box-shadow:0 9px 19px rgba(39,47,31,.22),0 0 0 1px rgba(197,173,123,.22);
}
/* Main white calla arrangement: long vertical drape on the left. */
.cover .envelope-flower {
  top:-19%;
  left:-10%;
  width:46%;
  max-width:none;
  object-fit:contain;
  filter:drop-shadow(1px 5px 4px rgba(31,42,26,.14));
  transform:rotate(-9deg);
  transform-origin:50% 50%;
  animation-name:envelopeCallaFloat;
  pointer-events:none;
}
/* Fine champagne accent, attached to envelope only, not the entire page. */
.cover .envelope-art::after {
  border:1px solid rgba(217,194,145,.62);
  box-shadow:0 0 0 5px rgba(197,173,123,.06),0 0 11px rgba(197,173,123,.12);
}
/* Keep the unverified clipart collage disabled. */
.cover .decor-layer--envelope-petals {display:none !important;}
@media(max-width:600px) {
  .cover .cover-castle{opacity:.06;}
  .cover .envelope-open{width:min(90vw,480px);}
  .cover .envelope-photo-float{left:35%;width:59%;top:-3%;}
  .cover .envelope-flower{left:-10%;top:-17%;width:46%;}
}
@media(prefers-reduced-motion:reduce) {
  .cover .envelope-flower{animation:none;}
}

/* TASK 02 / Ceremony: use independent botanical assets, avoid full-frame art. */
.invitation-panel>.panel-flower-left{content:normal;top:-5%;left:-9%;width:34%;max-width:190px;transform:rotate(-8deg);opacity:.94}
.invitation-panel>.ceremony-floral-bottom{content:normal;right:-7%;bottom:-5%;width:39%;max-width:215px;transform:scaleX(-1);opacity:.95}
.invitation-panel>.decor-layer--ceremony-a,.invitation-panel>.decor-layer--ceremony-b{display:none}
.invitation-panel .panel-title,.invitation-panel .ceremony-info,.invitation-panel .family-grid{position:relative;z-index:3}

/* TASK 03 / Countdown: use independent botanical assets, avoid full-frame art. */
.wedding-countdown>.countdown-floral{content:normal;left:-7%;bottom:-12%;width:28%;max-width:180px}
.wedding-countdown>.decor-layer--countdown-a{display:none}
.wedding-countdown>.decor-layer--countdown-b{display:none}
.wedding-countdown .countdown-grid{position:relative;z-index:3}
.wedding-countdown .countdown-unit{background:rgba(247,239,213,.11)!important;border:1px solid rgba(247,239,213,.26)!important}

/* TASK 04 / Album: use independent botanical assets, avoid full-frame art. */
.album-section>.album-floral-left,.album-section>.album-floral-right{content:normal;width:24%;max-width:180px;bottom:-3%;opacity:.92}
.album-section>.album-floral-left{left:-5%}
.album-section>.album-floral-right{right:-5%;transform:scaleX(-1)}
.album-section>.decor-layer--album-a,.album-section>.decor-layer--album-b{display:none}
.album-section .album-viewer,.album-section .album-thumbs{position:relative;z-index:3}

/* TASK 05 / Reception: use independent botanical assets, avoid full-frame art. */
.reception-panel>.panel-flower-reception{content:normal;left:-8%;bottom:-4%;width:33%;max-width:190px;opacity:.95}
.reception-panel>.decor-layer--reception-a{display:none}
.reception-panel>.decor-layer--reception-b{width:27%;right:-7%;bottom:-5%;opacity:.8}
.reception-panel .panel-title,.reception-panel .reception-content,.reception-panel a,.reception-panel button{position:relative;z-index:3}

/* TASK 06 / Timeline: use independent botanical assets, avoid full-frame art. */
.timeline-panel>.timeline-flower{content:normal;right:-7%;bottom:-5%;width:30%;max-width:180px}
.timeline-panel>.decor-layer--timeline-a{width:25%;left:-7%;bottom:-5%;opacity:.78}
.timeline-panel>.decor-layer--timeline-b{display:none}
.timeline-panel .timeline-list,.timeline-panel .timeline-content{position:relative;z-index:3}

/* TASK 07 / Wishes: use independent botanical assets, avoid full-frame art. */
.guestbook-section>.guestbook-flower{content:normal;right:-4%;bottom:-3%;width:25%;max-width:150px}
.guestbook-section>.decor-layer--wishes-a,.guestbook-section>.decor-layer--wishes-b{display:none}
.guestbook-section form,.guestbook-section button,.guestbook-section input,.guestbook-section textarea{position:relative;z-index:3}

/* TASK 08 / Gifts: use independent botanical assets, avoid full-frame art. */
.gift-section>.gift-floral{content:normal;right:3%;bottom:0;width:27%;max-width:175px}
.gift-section>.decor-layer--gift-a{width:24%;left:1%;bottom:0;opacity:.82}
.gift-section>.decor-layer--gift-b{display:none}
.gift-section button,.gift-section .gift-envelopes,.gift-section .gift-content{position:relative;z-index:3}

/* Shared accessibility: flowers never intercept controls; prevent horizontal overspill. */
.decor-layer,.floral-decor,.panel-flower{pointer-events:none!important}
@media(max-width:600px){.invitation-panel>.panel-flower-left{width:31%}.invitation-panel>.ceremony-floral-bottom{width:34%}.wedding-countdown>.countdown-floral{width:27%}.album-section>.album-floral-left,.album-section>.album-floral-right{width:22%}.reception-panel>.panel-flower-reception{width:29%}.timeline-panel>.timeline-flower{width:27%}.guestbook-section>.guestbook-flower{width:22%}.gift-section>.gift-floral{width:24%}}