/* ═══════════════════════════════════════════════════════
   Wedding Invite Woo — card.css v1.0
   Classic Gold · Silver Elegance · Rose Gold
   White Roses · Large Flip Card · Timeless
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,600&family=EB+Garamond:ital,wght@0,400;0,500;1,400&display=swap');

/* ── FORM ── */
.wiw-form-wrap {
    margin: 1.4rem 0 1rem;
    padding: 1.8rem 2rem;
    background: #0c0a08;
    border: 1px solid rgba(220,190,130,.2);
    border-radius: 16px;
    font-family: 'EB Garamond', Georgia, serif;
}
.wiw-form-header { display:flex; align-items:center; gap:14px; margin-bottom:1.4rem; }
.wiw-form-icon   { font-size:36px; }
.wiw-form-title  { font-size:17px; font-weight:500; color:#e8d8a0; font-family:'Cormorant Garamond',serif; letter-spacing:.05em; }
.wiw-form-sub    { font-size:13px; color:#7a6a4a; margin-top:3px; font-style:italic; }

/* Theme chips */
.wiw-theme-row { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:1.2rem; }
.wiw-theme-label { font-size:11px; color:#7a6a4a; font-weight:600; text-transform:uppercase; letter-spacing:.1em; }
.wiw-theme-opt  { cursor:pointer; }
.wiw-theme-opt input { display:none; }
.wiw-chip {
    display:inline-block; padding:7px 18px;
    border-radius:20px; border:1px solid rgba(255,255,255,.1);
    font-size:13px; font-family:'Cormorant Garamond',serif; font-weight:500; letter-spacing:.08em;
    color:#9a8a6a; background:rgba(255,255,255,.04);
    transition:all .25s; user-select:none;
}
.wiw-theme-opt input:checked ~ .wiw-chip { color:#fff; }
.wiw-theme-opt input:checked ~ .wiw-gold    { background:rgba(212,170,60,.2);  border-color:#d4aa3c; }
.wiw-theme-opt input:checked ~ .wiw-silver  { background:rgba(200,200,220,.15); border-color:#c0c0d0; }
.wiw-theme-opt input:checked ~ .wiw-rosegold{ background:rgba(210,140,110,.18); border-color:#e0a080; }

/* Fields */
.wiw-field { margin-bottom:1.1rem; }
.wiw-field-hero {
    background:rgba(212,170,60,.06); border:1px dashed rgba(212,170,60,.25);
    border-radius:10px; padding:.9rem 1.1rem; margin-bottom:1.2rem;
}
.wiw-field-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:1.1rem; }
.wiw-field-row .wiw-field { margin-bottom:0; }
.wiw-field label {
    display:block; font-size:11px; font-weight:600;
    color:#b0986a; letter-spacing:.1em; text-transform:uppercase; margin-bottom:7px;
    font-family:'EB Garamond',serif;
}
.wiw-lang-note { font-size:11px; color:#6a5a3a; text-transform:none; font-weight:400; letter-spacing:0; font-style:italic; }
.wiw-field input, .wiw-field textarea {
    width:100%; padding:11px 15px;
    background:rgba(255,255,255,.04); border:1px solid rgba(212,170,60,.15);
    border-radius:8px; font-size:15px; color:#f0e8d0;
    font-family:'EB Garamond',Georgia,serif; resize:vertical; outline:none;
    transition:border-color .22s, background .22s; box-sizing:border-box;
}
.wiw-field input::placeholder, .wiw-field textarea::placeholder { color:#4a3a22; font-style:italic; }
.wiw-field input:focus, .wiw-field textarea:focus { border-color:#d4aa3c; background:rgba(255,255,255,.07); }

/* Sound toggle */
.wiw-sound-toggle { margin-bottom:1.2rem; }
.wiw-toggle-label  { display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.wiw-toggle-track  { position:relative; width:42px; height:24px; background:rgba(255,255,255,.08); border:1px solid rgba(212,170,60,.2); border-radius:12px; flex-shrink:0; transition:background .25s; }
.wiw-toggle-thumb  { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#5a4a22; transition:transform .25s, background .25s; }
.wiw-toggle-label input:checked ~ .wiw-toggle-track { background:rgba(212,170,60,.2); border-color:#d4aa3c; }
.wiw-toggle-label input:checked ~ .wiw-toggle-track .wiw-toggle-thumb { transform:translateX(18px); background:#d4aa3c; }
.wiw-toggle-label input { display:none; }
.wiw-toggle-text { font-size:14px; color:#a0906a; font-family:'EB Garamond',serif; font-style:italic; }

.wiw-preview-btn {
    width:100%; padding:14px;
    background:linear-gradient(135deg, #5a3a08 0%, #a07020 50%, #d4aa3c 80%, #f0d070 100%);
    color:#fff; border:none; border-radius:10px;
    font-size:15px; font-weight:500; font-family:'Cormorant Garamond',serif; letter-spacing:.12em;
    cursor:pointer; transition:opacity .2s, transform .15s;
}
.wiw-preview-btn:hover  { opacity:.86; }
.wiw-preview-btn:active { transform:scale(.98); }

/* ── MODAL ── */
.wiw-modal {
    position:fixed; inset:0; z-index:99999;
    background:rgba(0,0,0,.82);
    display:flex; align-items:center; justify-content:center;
    animation:wiwFadeIn .4s ease;
}
@keyframes wiwFadeIn { from{opacity:0} to{opacity:1} }
.wiw-modal-inner { width:min(96vw, 580px); border-radius:20px; overflow:hidden; }

/* SCENE */
.wiw-scene {
    position:relative; width:100%; height:520px; overflow:hidden;
    background:radial-gradient(ellipse at 50% 20%, #1a150a 0%, #0d0a06 55%, #000 100%);
    transition:background .5s;
}
.wiw-scene.theme-silver   { background:radial-gradient(ellipse at 50% 20%, #12141a 0%, #080a10 55%, #000 100%); }
.wiw-scene.theme-rosegold { background:radial-gradient(ellipse at 50% 20%, #1a0e0c 0%, #0d0806 55%, #000 100%); }

.wiw-layer-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }

/* White roses layer */
.wiw-roses-layer  { position:absolute; inset:0; pointer-events:none; z-index:2; overflow:hidden; }
.wiw-rose-float   { position:absolute; bottom:-160px; animation:wiwRoseRise ease-in-out infinite; }
@keyframes wiwRoseRise {
    0%   { transform:translateY(0) rotate(-4deg) scale(.9); opacity:0; }
    8%   { opacity:.9; }
    50%  { transform:translateY(-260px) rotate(3deg) scale(1); }
    92%  { opacity:.6; }
    100% { transform:translateY(-600px) rotate(-3deg) scale(.85); opacity:0; }
}

/* Lights/bokeh */
.wiw-lights-layer { position:absolute; inset:0; pointer-events:none; z-index:2; }
.wiw-bokeh {
    position:absolute; border-radius:50%;
    animation:wiwBokeh ease-in-out infinite;
    filter:blur(8px);
}
@keyframes wiwBokeh {
    0%,100%{ opacity:.08; transform:scale(.8); }
    50%    { opacity:.22; transform:scale(1.2); }
}

/* ── LARGE 3-D CARD ── */
.wiw-scene-ui {
    position:absolute; inset:0; z-index:10;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:14px;
    pointer-events:none;
}
#wiw-card-wrap { perspective:1200px; cursor:pointer; pointer-events:all; }
#wiw-card3d {
    width:360px; height:240px;
    position:relative; transform-style:preserve-3d;
    transition:transform 1s cubic-bezier(.35,.1,.2,1);
    animation:wiwFloat 5s ease-in-out infinite;
}
#wiw-card3d.wiw-flipped {
    transform:rotateY(180deg);
    animation:wiwFloatF 5s ease-in-out infinite;
}
@keyframes wiwFloat  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes wiwFloatF { 0%,100%{transform:rotateY(180deg) translateY(0)} 50%{transform:rotateY(180deg) translateY(-10px)} }

.wiw-face {
    position:absolute; inset:0;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
    border-radius:12px; overflow:hidden;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    padding:18px 24px; text-align:center;
}

/* ── FRONT — Gold ── */
.wiw-front {
    background:linear-gradient(160deg, #0e0a04 0%, #261800 20%, #3d2800 40%, #5a3c08 55%, #3d2800 70%, #1a1000 85%, #0a0600 100%);
    border:1.5px solid #d4aa3c;
    box-shadow:0 0 50px rgba(180,140,40,.35), inset 0 0 40px rgba(0,0,0,.6);
    gap:4px;
    transition:background .5s, border-color .5s, box-shadow .5s;
}
.wiw-front.theme-silver {
    background:linear-gradient(160deg, #080a10 0%, #121a28 20%, #1e2840 40%, #2e3c58 55%, #1e2840 70%, #101828 85%, #060810 100%);
    border-color:#b0b8d0;
    box-shadow:0 0 50px rgba(160,180,220,.25), inset 0 0 40px rgba(0,0,0,.6);
}
.wiw-front.theme-rosegold {
    background:linear-gradient(160deg, #100806 0%, #221010 20%, #381818 40%, #5a2828 55%, #381818 70%, #1a0e0e 85%, #0a0606 100%);
    border-color:#e0a080;
    box-shadow:0 0 50px rgba(200,130,100,.3), inset 0 0 40px rgba(0,0,0,.6);
}

/* Gold shine sweep — wider, slower, more elegant */
.wiw-shine {
    position:absolute; inset:0; border-radius:12px; pointer-events:none;
    background:linear-gradient(105deg, transparent 20%, transparent 35%,
        rgba(255,240,160,.05) 42%, rgba(255,255,220,.18) 50%, rgba(255,240,160,.05) 58%,
        transparent 65%, transparent 100%);
    animation:wiwShine 4.5s ease-in-out infinite;
}
@keyframes wiwShine {
    0%,100%{ opacity:0; transform:translateX(-130%); }
    10%    { opacity:1; }
    60%    { opacity:1; transform:translateX(130%); }
    61%    { opacity:0; }
}

/* Front typography */
.wiw-front-top-ornament {
    font-size:20px; color:#c8a030; opacity:.7;
    font-family:'Cormorant Garamond',serif; letter-spacing:.1em;
    margin-bottom:1px;
    transition:color .4s;
}
.wiw-front.theme-silver   .wiw-front-top-ornament { color:#a0b0c8; }
.wiw-front.theme-rosegold .wiw-front-top-ornament { color:#d09080; }

.wiw-front-heading {
    font-family:'Cormorant Garamond',serif; font-size:15px; font-style:italic;
    letter-spacing:.15em; line-height:1.3;
    background:linear-gradient(180deg, #fff8e0 0%, #f0d060 50%, #c8980a 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    filter:drop-shadow(0 1px 4px rgba(180,140,20,.5));
    word-break:break-word; max-width:320px;
    transition:filter .4s;
}
.wiw-front.theme-silver .wiw-front-heading {
    background:linear-gradient(180deg, #ffffff 0%, #d0d8e8 50%, #8090b0 100%);
    -webkit-background-clip:text; background-clip:text;
    filter:drop-shadow(0 1px 4px rgba(100,120,180,.4));
}
.wiw-front.theme-rosegold .wiw-front-heading {
    background:linear-gradient(180deg, #fff0ec 0%, #e8b090 50%, #c06840 100%);
    -webkit-background-clip:text; background-clip:text;
    filter:drop-shadow(0 1px 4px rgba(180,90,60,.4));
}

/* Rings SVG container */
.wiw-front-rings { width:80px; height:44px; margin:3px 0 2px; flex-shrink:0; }

.wiw-front-names {
    font-family:'Cormorant Garamond',serif; font-size:19px; font-weight:600;
    color:#f5e8b0; letter-spacing:.08em; line-height:1.2;
    text-shadow:0 1px 8px rgba(180,140,20,.5);
    transition:color .4s;
}
.wiw-front.theme-silver   .wiw-front-names { color:#e8eef8; text-shadow:0 1px 8px rgba(100,120,180,.4); }
.wiw-front.theme-rosegold .wiw-front-names { color:#fceae0; text-shadow:0 1px 8px rgba(180,90,60,.4); }

.wiw-front-ampersand {
    font-family:'Cormorant Garamond',serif; font-size:22px; font-style:italic;
    color:#d4aa3c; opacity:.8; line-height:1; margin:-2px 0;
    transition:color .4s;
}
.wiw-front.theme-silver   .wiw-front-ampersand { color:#a0b0c8; }
.wiw-front.theme-rosegold .wiw-front-ampersand { color:#e09070; }

.wiw-front-date-line {
    font-family:'Cormorant Garamond',serif; font-size:12px; font-style:italic;
    color:rgba(240,220,140,.65); letter-spacing:.12em;
    transition:color .4s;
}
.wiw-front.theme-silver   .wiw-front-date-line { color:rgba(180,200,240,.65); }
.wiw-front.theme-rosegold .wiw-front-date-line { color:rgba(240,190,160,.65); }

.wiw-front-bottom-ornament {
    font-size:16px; color:#c8a030; opacity:.5; transform:rotate(180deg);
    font-family:'Cormorant Garamond',serif; margin-top:2px;
    transition:color .4s;
}
.wiw-front.theme-silver   .wiw-front-bottom-ornament { color:#a0b0c8; }
.wiw-front.theme-rosegold .wiw-front-bottom-ornament { color:#d09080; }

.wiw-front-hint { font-size:10px; color:rgba(200,175,80,.4); letter-spacing:.06em; margin-top:3px; font-family:'EB Garamond',serif; font-style:italic; }

/* ── BACK ── */
.wiw-back {
    background:linear-gradient(160deg, #080600 0%, #180e00 40%, #0e0800 70%, #060400 100%);
    border:1.5px solid rgba(212,170,60,.35);
    transform:rotateY(180deg);
    box-shadow:0 10px 50px rgba(140,110,20,.3);
    gap:5px;
}
.wiw-back-shine {
    position:absolute; inset:0; border-radius:12px;
    background:radial-gradient(ellipse at 50% 50%, rgba(212,170,60,.06) 0%, transparent 70%);
}
.wiw-back-ornament { font-size:16px; color:#c8a030; opacity:.6; font-family:'Cormorant Garamond',serif; }
.wiw-back-names-lg {
    font-family:'Cormorant Garamond',serif; font-size:20px; font-style:italic; font-weight:600;
    background:linear-gradient(180deg,#fff8e0,#f0d060,#c8980a);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    letter-spacing:.06em; line-height:1.2;
}
.wiw-back-divider { width:55%; height:1px; background:linear-gradient(90deg,transparent,rgba(212,170,60,.4),transparent); margin:4px 0; }
.wiw-back-row {
    font-family:'Cormorant Garamond',serif; font-size:12px; color:#d8c890;
    line-height:1.55; text-align:center; letter-spacing:.05em;
}
.wiw-back-row strong { color:#f0e0a0; font-weight:600; }
.wiw-back-msg {
    font-family:'EB Garamond',serif; font-size:11px; color:#a08a50;
    line-height:1.65; font-style:italic; text-align:center;
    max-width:320px; word-break:break-word; margin-top:3px;
}
.wiw-back-bottom-ornament { font-size:14px; color:#c8a030; opacity:.45; margin-top:2px; font-family:'Cormorant Garamond',serif; }
.wiw-back-hint { font-size:10px; color:rgba(180,155,60,.35); letter-spacing:.06em; font-family:'EB Garamond',serif; font-style:italic; }

/* Modal actions */
.wiw-modal-actions { display:flex; flex-direction:column; align-items:center; gap:9px; pointer-events:all; }
.wiw-sound-btn {
    padding:8px 24px;
    background:rgba(212,170,60,.1); border:1px solid rgba(212,170,60,.3);
    border-radius:20px; color:#d4aa3c;
    font-size:13px; font-family:'Cormorant Garamond',serif; font-style:italic; font-weight:500;
    cursor:pointer; letter-spacing:.08em; transition:background .2s;
}
.wiw-sound-btn:hover { background:rgba(212,170,60,.2); }
.wiw-close-btn {
    padding:11px 32px;
    background:linear-gradient(135deg, #5a3a08, #a07020, #d4aa3c, #f0d070);
    color:#fff; border:none; border-radius:10px;
    font-size:14px; font-weight:500; font-family:'Cormorant Garamond',serif; letter-spacing:.1em;
    cursor:pointer; transition:opacity .2s;
}
.wiw-close-btn:hover { opacity:.86; }

/* ═══════════════════════════════
   THANK-YOU PAGE
   ═══════════════════════════════ */
.wiw-ty-wrap {
    margin:2rem 0; padding:2rem 1.8rem;
    background:#0c0a08; border:1px solid rgba(212,170,60,.2);
    border-radius:18px; font-family:'EB Garamond',Georgia,serif;
}
.wiw-ty-heading {
    text-align:center; font-family:'Cormorant Garamond',serif; font-size:26px; font-style:italic; font-weight:500;
    background:linear-gradient(180deg,#fff8e0,#f0d060,#c8980a);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    letter-spacing:.05em; margin-bottom:.3rem;
}
.wiw-ty-heading.theme-silver   { background:linear-gradient(180deg,#fff,#d0d8e8,#8090b0); -webkit-background-clip:text; background-clip:text; }
.wiw-ty-heading.theme-rosegold { background:linear-gradient(180deg,#fff0ec,#e8b090,#c06840); -webkit-background-clip:text; background-clip:text; }
.wiw-ty-sub { text-align:center; font-size:14px; color:#6a5a3a; margin-bottom:1rem; font-style:italic; }

.wiw-ty-scene {
    position:relative; width:100%; height:420px;
    border-radius:14px; overflow:hidden; margin-bottom:1.4rem;
    background:radial-gradient(ellipse at 50% 20%, #1a150a 0%, #0d0a06 55%, #000 100%);
}
.wiw-ty-scene.theme-silver   { background:radial-gradient(ellipse at 50% 20%, #12141a 0%, #080a10 55%, #000 100%); }
.wiw-ty-scene.theme-rosegold { background:radial-gradient(ellipse at 50% 20%, #1a0e0c 0%, #0d0806 55%, #000 100%); }

#wiw-ty-card3d {
    width:340px; height:228px;
    position:relative; transform-style:preserve-3d;
    transition:transform 1s cubic-bezier(.35,.1,.2,1);
    animation:wiwFloat 5s ease-in-out infinite; cursor:pointer;
}
#wiw-ty-card3d.wiw-flipped { transform:rotateY(180deg); animation:wiwFloatF 5s ease-in-out infinite; }

/* Share */
.wiw-share-label {
    font-family:'Cormorant Garamond',serif; font-size:13px; font-style:italic;
    color:#7a6a4a; letter-spacing:.12em; text-align:center; margin-bottom:.8rem;
}
.wiw-share-grid  { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.wiw-sh-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 8px; border-radius:10px; border:1px solid;
    font-size:13px; font-family:'Cormorant Garamond',serif; font-style:italic; letter-spacing:.05em;
    cursor:pointer; background:none; text-decoration:none;
    transition:opacity .2s, transform .15s;
}
.wiw-sh-btn:hover  { opacity:.82; }
.wiw-sh-btn:active { transform:scale(.97); }
.wiw-sh-btn .ic { font-size:16px; font-style:normal; }
.wiw-sh-btn svg { width:20px; height:20px; flex-shrink:0; }

.sh-native { grid-column:1/-1; background:rgba(212,170,60,.12); border-color:rgba(212,170,60,.4); color:#d4aa3c; }
.sh-viber  { background:rgba(115,96,242,.12); border-color:rgba(115,96,242,.35); color:#c0a0f0; }
.sh-wa     { background:rgba(37,211,102,.1);  border-color:rgba(37,211,102,.3);  color:#60e090; }
.sh-sms    { background:rgba(90,160,255,.1);  border-color:rgba(90,160,255,.25); color:#80b8f0; }
.sh-copy   { background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1); color:#b0a080; }

.wiw-sound-ty-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:11px; margin-bottom:10px;
    background:rgba(212,170,60,.08); border:1px solid rgba(212,170,60,.25);
    border-radius:10px; color:#d4aa3c;
    font-size:14px; font-family:'Cormorant Garamond',serif; font-style:italic; letter-spacing:.06em;
    cursor:pointer; transition:background .2s;
}
.wiw-sound-ty-btn:hover { background:rgba(212,170,60,.18); }