/* ═══════════════════════════════════════════════════
   Birthday Invite Woo — card.css v1.0
   Boy (blue/rocket) · Girl (pink/butterfly) · Party (gold/rainbow)
   ═══════════════════════════════════════════════════ */

/* ── FORM ── */
.biw-form-wrap {
    margin: 1.4rem 0 1rem;
    padding: 1.6rem 1.8rem;
    background: #08060f;
    border: 1px solid rgba(200,160,255,.2);
    border-radius: 16px;
}
.biw-form-header { display:flex; align-items:center; gap:12px; margin-bottom:1.2rem; }
.biw-form-icon   { font-size:34px; }
.biw-form-title  { font-size:16px; font-weight:700; color:#d0b0ff; }
.biw-form-sub    { font-size:12px; color:#6a5a8a; margin-top:2px; }

/* Theme chips */
.biw-theme-row {
    display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:1.1rem;
}
.biw-theme-label { font-size:11px; color:#7a6a9a; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.biw-theme-opt   { cursor:pointer; }
.biw-theme-opt input { display:none; }
.biw-chip {
    display:inline-block; padding:6px 16px;
    border-radius:20px; border:1px solid rgba(255,255,255,.1);
    font-size:13px; font-weight:700; color:#9a8ab0;
    background:rgba(255,255,255,.05);
    transition:all .22s; user-select:none;
}
.biw-theme-opt input:checked ~ .biw-chip { color:#fff; }
.biw-boy  { }   .biw-theme-opt input:checked ~ .biw-boy  { background:rgba(60,130,255,.22); border-color:#5ab0ff; }
.biw-girl { }   .biw-theme-opt input:checked ~ .biw-girl { background:rgba(255,100,180,.22); border-color:#ff80d0; }
.biw-party{ }   .biw-theme-opt input:checked ~ .biw-party{ background:rgba(220,170,40,.22);  border-color:#f0c060; }

/* Fields */
.biw-field { margin-bottom:1rem; }
.biw-field-highlight {
    background:rgba(200,160,255,.07);
    border:1px dashed rgba(200,160,255,.3);
    border-radius:10px; padding:.9rem 1rem;
    margin-bottom:1.1rem;
}
.biw-field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:1rem; }
.biw-field-row .biw-field { margin-bottom:0; }

.biw-field label {
    display:block; font-size:12px; font-weight:700;
    color:#b0a0cc; letter-spacing:.07em; text-transform:uppercase; margin-bottom:6px;
}
.biw-lang-note { font-size:11px; color:#7a6a9a; text-transform:none; font-weight:400; letter-spacing:0; }

.biw-field input, .biw-field textarea {
    width:100%; padding:11px 14px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(200,160,255,.18);
    border-radius:8px; font-size:15px; color:#fff;
    font-family:inherit; resize:vertical; outline:none;
    transition:border-color .22s, background .22s;
    box-sizing:border-box;
}
.biw-field input::placeholder, .biw-field textarea::placeholder { color:#4a3a60; }
.biw-field input:focus, .biw-field textarea:focus { border-color:#c090ff; background:rgba(255,255,255,.08); }

/* Sound toggle */
.biw-sound-toggle { margin-bottom:1.1rem; }
.biw-toggle-label  { display:flex; align-items:center; gap:10px; cursor:pointer; user-select:none; }
.biw-toggle-track  {
    position:relative; width:42px; height:24px;
    background:rgba(255,255,255,.1); border:1px solid rgba(200,160,255,.25);
    border-radius:12px; flex-shrink:0; transition:background .25s;
}
.biw-toggle-thumb  { position:absolute; top:3px; left:3px; width:16px; height:16px; border-radius:50%; background:#5a4070; transition:transform .25s, background .25s; }
.biw-toggle-label input:checked ~ .biw-toggle-track { background:rgba(180,120,255,.25); border-color:#c090ff; }
.biw-toggle-label input:checked ~ .biw-toggle-track .biw-toggle-thumb { transform:translateX(18px); background:#c090ff; }
.biw-toggle-label input { display:none; }
.biw-toggle-text { font-size:13px; color:#a090c0; }

.biw-preview-btn {
    width:100%; padding:13px;
    background:linear-gradient(135deg, #3a1860 0%, #7030b0 50%, #c090ff 100%);
    color:#fff; border:none; border-radius:10px;
    font-size:15px; font-weight:700; font-family:inherit;
    cursor:pointer; letter-spacing:.04em;
    transition:opacity .2s, transform .15s;
}
.biw-preview-btn:hover  { opacity:.86; }
.biw-preview-btn:active { transform:scale(.98); }

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

/* Scene — per theme via JS class */
.biw-scene {
    position:relative; width:100%; height:480px; overflow:hidden;
    background:radial-gradient(ellipse at 50% 25%, #12063a 0%, #07021a 65%, #000 100%);
    transition:background .4s;
}
.biw-scene.theme-boy  { background:radial-gradient(ellipse at 50% 25%, #061430 0%, #020816 65%, #000 100%); }
.biw-scene.theme-girl { background:radial-gradient(ellipse at 50% 25%, #2a0420 0%, #140010 65%, #000 100%); }
.biw-scene.theme-party{ background:radial-gradient(ellipse at 50% 25%, #1a0e00 0%, #0a0600 65%, #000 100%); }

/* Canvas layers */
.biw-layer-canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
#biw-fw-canvas   { z-index:1; }
#biw-conf-canvas { z-index:2; }

/* Balloons */
.biw-balloons-layer { position:absolute; inset:0; pointer-events:none; z-index:3; overflow:hidden; }
.biw-balloon {
    position:absolute; bottom:-180px;
    animation:biwBalloon ease-in-out infinite;
}
@keyframes biwBalloon {
    0%   { transform:translateY(0) rotate(-3deg); opacity:0; }
    7%   { opacity:1; }
    50%  { transform:translateY(-260px) rotate(3deg); }
    93%  { opacity:.75; }
    100% { transform:translateY(-620px) rotate(-4deg); opacity:0; }
}

/* Stars */
.biw-stars-layer { position:absolute; inset:0; pointer-events:none; z-index:3; }
.biw-star { position:absolute; animation:biwStarPulse ease-in-out infinite; }
@keyframes biwStarPulse { 0%,100%{opacity:.12;transform:scale(.6)} 50%{opacity:1;transform:scale(1.4)} }

/* Streamers */
.biw-streamers-layer { position:absolute; inset:0; pointer-events:none; z-index:3; overflow:hidden; }
.biw-streamer {
    position:absolute; top:-60px; width:3px; border-radius:2px;
    animation:biwStreamer linear infinite;
    transform-origin:top center;
}
@keyframes biwStreamer {
    0%   { transform:translateY(0) rotate(0deg);   opacity:0; }
    5%   { opacity:1; }
    90%  { opacity:.6; }
    100% { transform:translateY(560px) rotate(360deg); opacity:0; }
}

/* ── 3-D CARD ── */
.biw-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;
}
#biw-card-wrap { perspective:1000px; cursor:pointer; pointer-events:all; }
#biw-card3d {
    width:310px; height:210px;
    position:relative; transform-style:preserve-3d;
    transition:transform .9s cubic-bezier(.4,0,.2,1);
    animation:biwFloat 3.6s ease-in-out infinite;
}
#biw-card3d.biw-flipped {
    transform:rotateY(180deg);
    animation:biwFloatF 3.6s ease-in-out infinite;
}
@keyframes biwFloat  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-13px)} }
@keyframes biwFloatF { 0%,100%{transform:rotateY(180deg) translateY(0)} 50%{transform:rotateY(180deg) translateY(-13px)} }

.biw-face {
    position:absolute; inset:0;
    backface-visibility:hidden; -webkit-backface-visibility:hidden;
    border-radius:16px; overflow:hidden;
    display:flex; flex-direction:column;
    align-items:center; justify-content:center;
    gap:5px; padding:18px 20px; text-align:center;
}

/* ── FRONT FACE — per theme ── */
.biw-front {
    background:linear-gradient(145deg, #06020e 0%, #180840 35%, #340c80 60%, #180840 80%, #06020e 100%);
    border:1.5px solid #9050e0;
    box-shadow:0 0 36px rgba(144,80,224,.45), inset 0 0 30px rgba(0,0,0,.5);
    transition:background .4s, border-color .4s, box-shadow .4s;
}
.biw-front.theme-boy {
    background:linear-gradient(145deg, #020814 0%, #061a40 35%, #0e3a90 60%, #061a40 80%, #020814 100%);
    border-color:#4a9aff;
    box-shadow:0 0 36px rgba(74,154,255,.4), inset 0 0 30px rgba(0,0,0,.5);
}
.biw-front.theme-girl {
    background:linear-gradient(145deg, #160210 0%, #3a0830 35%, #7a1060 60%, #3a0830 80%, #160210 100%);
    border-color:#ff70c0;
    box-shadow:0 0 36px rgba(255,112,192,.4), inset 0 0 30px rgba(0,0,0,.5);
}
.biw-front.theme-party {
    background:linear-gradient(145deg, #0e0800 0%, #2a1a00 35%, #6a4200 60%, #2a1a00 80%, #0e0800 100%);
    border-color:#f0b030;
    box-shadow:0 0 36px rgba(240,176,48,.45), inset 0 0 30px rgba(0,0,0,.5);
}

/* Shine sweep */
.biw-shine {
    position:absolute; inset:0; border-radius:16px; pointer-events:none;
    background:linear-gradient(110deg, transparent 28%, rgba(255,255,255,.13) 42%, rgba(255,255,255,.28) 50%, rgba(255,255,255,.13) 58%, transparent 72%);
    animation:biwShine 3.2s ease-in-out infinite;
}
@keyframes biwShine {
    0%,100%{ opacity:0; transform:translateX(-100%); }
    12%    { opacity:1; }
    55%    { opacity:1; transform:translateX(100%); }
    56%    { opacity:0; }
}

.biw-front-icon { font-size:26px; filter:drop-shadow(0 0 8px rgba(180,140,255,.8)); margin-bottom:2px; }

/* Title — customer text, gradient per theme */
.biw-front-title {
    font-size:18px; font-weight:900; letter-spacing:.5px; line-height:1.2;
    background:linear-gradient(180deg, #f0e0ff 0%, #c090ff 50%, #8040e0 100%);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    filter:drop-shadow(0 1px 4px rgba(144,80,224,.6));
    word-break:break-word; max-width:270px;
    transition:background .4s;
}
.biw-front.theme-boy  .biw-front-title { background:linear-gradient(180deg, #e0f0ff 0%, #70b0ff 50%, #1a60e0 100%); -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 1px 4px rgba(26,96,224,.6)); }
.biw-front.theme-girl .biw-front-title { background:linear-gradient(180deg, #fff0f8 0%, #ffb0e0 50%, #e040a0 100%); -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 1px 4px rgba(224,64,160,.6)); }
.biw-front.theme-party .biw-front-title{ background:linear-gradient(180deg, #fff8e0 0%, #ffc840 50%, #e08000 100%); -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 1px 4px rgba(224,128,0,.6)); }

.biw-front-name { font-size:14px; font-style:italic; color:#d8c8ff; font-weight:500; }
.biw-front.theme-boy  .biw-front-name { color:#b8d8ff; }
.biw-front.theme-girl .biw-front-name { color:#ffc0e8; }
.biw-front.theme-party .biw-front-name{ color:#ffe8a0; }

.biw-front-divider { width:60%; height:1px; background:rgba(255,255,255,.15); margin:3px 0; }
.biw-front-date { font-size:13px; color:rgba(220,200,255,.8); font-weight:600; }
.biw-front.theme-boy   .biw-front-date { color:rgba(160,210,255,.85); }
.biw-front.theme-girl  .biw-front-date { color:rgba(255,190,230,.85); }
.biw-front.theme-party .biw-front-date { color:rgba(255,220,120,.85); }
.biw-front-hint { font-size:10px; color:rgba(200,170,255,.45); margin-top:3px; }

/* ── BACK FACE ── */
.biw-back {
    background:linear-gradient(145deg, #060410 0%, #100830 50%, #060410 100%);
    border:1.5px solid rgba(160,120,255,.4);
    transform:rotateY(180deg);
    box-shadow:0 8px 40px rgba(80,50,180,.35);
}
.biw-back-shine {
    position:absolute; inset:0; border-radius:16px; pointer-events:none;
    background:radial-gradient(ellipse at 50% 50%, rgba(160,120,255,.08) 0%, transparent 70%);
}
.biw-back-icon { font-size:20px; margin-bottom:2px; }
.biw-back-row {
    font-size:12px; color:#c8b8f0; line-height:1.5; text-align:center;
    display:flex; align-items:center; justify-content:center; gap:6px;
}
.biw-back-row strong { color:#e0d0ff; font-weight:700; }
.biw-back-msg  { font-size:11px; color:#a090d0; line-height:1.6; font-style:italic; margin-top:4px; max-width:270px; word-break:break-word; }
.biw-back-hint { font-size:10px; color:rgba(160,130,220,.45); margin-top:5px; }

/* Modal actions */
.biw-modal-actions { display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:all; }
.biw-sound-btn {
    padding:8px 20px;
    background:rgba(160,120,255,.12); border:1px solid rgba(160,120,255,.35);
    border-radius:20px; color:#c090ff;
    font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; transition:background .2s;
}
.biw-sound-btn:hover { background:rgba(160,120,255,.25); }
.biw-close-btn {
    padding:11px 28px;
    background:linear-gradient(135deg, #3a1860, #7030b0, #c090ff);
    color:#fff; border:none; border-radius:10px;
    font-size:14px; font-weight:700; font-family:inherit;
    cursor:pointer; transition:opacity .2s;
}
.biw-close-btn:hover { opacity:.86; }

/* ═══════════════════════════════
   THANK-YOU PAGE
   ═══════════════════════════════ */
.biw-ty-wrap {
    margin:2rem 0; padding:2rem 1.6rem;
    background:#08060f;
    border:1px solid rgba(200,160,255,.2);
    border-radius:18px;
}
.biw-ty-heading {
    text-align:center; font-size:22px; font-weight:700;
    background:linear-gradient(180deg, #f0e0ff, #c090ff, #8040e0);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
    margin-bottom:.4rem;
}
.biw-ty-heading.theme-boy   { background:linear-gradient(180deg,#e0f0ff,#70b0ff,#1a60e0); -webkit-background-clip:text; background-clip:text; }
.biw-ty-heading.theme-girl  { background:linear-gradient(180deg,#fff0f8,#ffb0e0,#e040a0); -webkit-background-clip:text; background-clip:text; }
.biw-ty-heading.theme-party { background:linear-gradient(180deg,#fff8e0,#ffc840,#e08000); -webkit-background-clip:text; background-clip:text; }
.biw-ty-sub { text-align:center; font-size:13px; color:#5a4a80; margin-bottom:1rem; }

.biw-ty-scene {
    position:relative; width:100%; height:380px;
    border-radius:14px; overflow:hidden; margin-bottom:1.4rem;
    background:radial-gradient(ellipse at 50% 25%, #12063a 0%, #07021a 65%, #000 100%);
}
.biw-ty-scene.theme-boy  { background:radial-gradient(ellipse at 50% 25%, #061430 0%, #020816 65%, #000 100%); }
.biw-ty-scene.theme-girl { background:radial-gradient(ellipse at 50% 25%, #2a0420 0%, #140010 65%, #000 100%); }
.biw-ty-scene.theme-party{ background:radial-gradient(ellipse at 50% 25%, #1a0e00 0%, #0a0600 65%, #000 100%); }

#biw-ty-card3d {
    width:290px; height:196px;
    position:relative; transform-style:preserve-3d;
    transition:transform .9s cubic-bezier(.4,0,.2,1);
    animation:biwFloat 3.6s ease-in-out infinite;
    cursor:pointer;
}
#biw-ty-card3d.biw-flipped { transform:rotateY(180deg); animation:biwFloatF 3.6s ease-in-out infinite; }

/* Share */
.biw-share-label { font-size:11px; color:#6a5a8a; font-weight:700; letter-spacing:.1em; text-transform:uppercase; text-align:center; margin-bottom:.7rem; }
.biw-share-grid  { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.biw-sh-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:12px 8px; border-radius:11px; border:1px solid;
    font-size:13px; font-weight:700; font-family:inherit;
    cursor:pointer; background:none; text-decoration:none;
    transition:opacity .2s, transform .15s;
}
.biw-sh-btn:hover  { opacity:.82; }
.biw-sh-btn:active { transform:scale(.96); }
.biw-sh-btn .ic { font-size:17px; }
.biw-sh-btn svg { width:20px; height:20px; flex-shrink:0; }

.sh-native { grid-column:1/-1; background:rgba(160,120,255,.15); border-color:rgba(160,120,255,.4); color:#c090ff; }
.sh-viber  { background:rgba(115,96,242,.15); border-color:rgba(115,96,242,.4); color:#c8a0f5; }
.sh-wa     { background:rgba(37,211,102,.12); border-color:rgba(37,211,102,.35); color:#6fe8a0; }
.sh-sms    { background:rgba(90,160,255,.12); border-color:rgba(90,160,255,.3); color:#90c8ff; }
.sh-copy   { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.12); color:#b0a0d0; }

.biw-sound-ty-btn {
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:11px; margin-bottom:10px;
    background:rgba(160,120,255,.1); border:1px solid rgba(160,120,255,.3);
    border-radius:11px; color:#c090ff;
    font-size:14px; font-weight:700; font-family:inherit; cursor:pointer; transition:background .2s;
}
.biw-sound-ty-btn:hover { background:rgba(160,120,255,.2); }