/* Birthday Invitation v9 — style.css */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Lato:wght@400;600;700&display=swap');

.hbi-app {
    --hbi-w-bg:#fdf6f9;--hbi-w-border:#fce4ee;--hbi-w-accent:#e8407a;
    --hbi-w-head:#3a1a2e;--hbi-w-text:#555;--hbi-w-iborder:#ebd5e2;
    --hbi-w-ibg:#fffafb;--hbi-w-btnbg:linear-gradient(135deg,#e8407a,#ff6fa8);
    --hbi-w-btnc:#fff;--hbi-w-br:16px;--hbi-w-shadow:0 8px 40px rgba(232,64,122,.10);
    font-family:'Lato',sans-serif;max-width:980px;margin:0 auto;padding:20px 0 48px;color:var(--hbi-w-text);
}
.hbi-box { background:var(--hbi-w-bg);border:1.5px solid var(--hbi-w-border);border-radius:var(--hbi-w-br);padding:22px 24px 20px;margin-bottom:18px;box-shadow:var(--hbi-w-shadow); }
.hbi-step-title { display:flex;align-items:center;gap:10px;font-family:'Playfair Display',serif;font-size:1.1rem;color:var(--hbi-w-head);margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--hbi-w-border); }
.hbi-snum { width:26px;height:26px;border-radius:50%;background:var(--hbi-w-accent);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;flex-shrink:0;font-family:'Lato',sans-serif; }
.hbi-inst-banner { text-align:center;font-family:'Playfair Display',serif;font-size:1rem;color:var(--hbi-w-accent);font-style:italic;margin-bottom:10px;opacity:.85; }

/* Canvas */
.hbi-canvas-wrap { position:relative;width:100%;line-height:0; }
.hbi-canvas { display:block;max-width:100%;height:auto;border-radius:inherit;box-shadow:0 16px 52px rgba(0,0,0,.18); }
.hbi-loader { position:absolute;inset:0;background:rgba(255,245,248,.88);display:flex;align-items:center;justify-content:center;border-radius:inherit; }
.hbi-loader-inner { text-align:center; }
.hbi-loader-inner span { font-size:3rem;display:block;margin-bottom:10px;animation:hbi-bob 1.4s ease-in-out infinite; }
.hbi-loader-inner p { font-size:.88rem;color:#aaa;margin:0;line-height:1.5; }
.hbi-loader-inner strong { color:var(--hbi-w-accent); }
@keyframes hbi-bob { 0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);} }

/* Download */
.hbi-dl-area { text-align:center;margin-top:18px; }
.hbi-dl-btn { background:var(--hbi-w-btnbg);color:var(--hbi-w-btnc);border:none;border-radius:12px;padding:13px 40px;font-size:1rem;font-weight:700;font-family:'Lato',sans-serif;cursor:pointer;box-shadow:0 6px 20px rgba(232,64,122,.30);transition:transform .15s,box-shadow .2s; }
.hbi-dl-btn:hover { transform:translateY(-2px);box-shadow:0 12px 30px rgba(232,64,122,.42); }
.hbi-dl-btn:disabled { opacity:.65;cursor:not-allowed;transform:none; }

/* Form */
.hbi-form-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px; }
.hbi-fw label { display:block;font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--hbi-w-text);margin-bottom:5px; }
.hbi-input { width:100%;box-sizing:border-box;padding:9px 12px;border:1.5px solid var(--hbi-w-iborder);border-radius:9px;font-size:.9rem;font-family:'Lato',sans-serif;color:#333;background:var(--hbi-w-ibg);transition:border-color .18s,box-shadow .18s;-webkit-appearance:none; }
.hbi-input:focus { outline:none;border-color:var(--hbi-w-accent);box-shadow:0 0 0 3px rgba(232,64,122,.12); }
.hbi-fw-lg { grid-column:span 2; }
.hbi-fw-xl { grid-column:1/-1; }
.hbi-input-lg { font-size:1rem;padding:11px 14px; }
.hbi-textarea-xl { font-size:1rem;padding:11px 14px;min-height:80px;resize:vertical;line-height:1.5;font-family:'Lato',sans-serif; }

/* Photo upload */
.hbi-fw-photo { display:flex;flex-direction:column; }
.hbi-optional { font-size:.7rem;font-weight:400;color:#bbb;text-transform:none;letter-spacing:0; }
.hbi-photo-wrap { display:flex;flex-direction:column;align-items:center;gap:8px; }
.hbi-photo-circle { width:90px;height:90px;border-radius:50%;border:3px dashed var(--hbi-w-accent);cursor:pointer;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;background:rgba(232,64,122,.05);transition:background .15s;flex-shrink:0; }
.hbi-photo-circle:hover { background:rgba(232,64,122,.10); }
.hbi-photo-preview { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%; }
.hbi-photo-placeholder { display:flex;flex-direction:column;align-items:center;gap:4px;pointer-events:none; }
.hbi-photo-icon { font-size:1.5rem;display:block; }
.hbi-photo-placeholder span:last-child { font-size:.62rem;color:var(--hbi-w-accent);font-weight:600;text-align:center; }
.hbi-photo-clear { background:none;border:1px solid #fcc;color:#c00;border-radius:6px;padding:3px 10px;font-size:.72rem;cursor:pointer;font-family:'Lato',sans-serif; }

/* Update button */
.hbi-update-row { text-align:center;margin-top:20px; }
.hbi-update-btn { background:var(--hbi-w-btnbg);color:var(--hbi-w-btnc);border:none;border-radius:12px;padding:13px 44px;font-size:1rem;font-weight:700;font-family:'Lato',sans-serif;cursor:pointer;box-shadow:0 6px 20px rgba(232,64,122,.28);transition:transform .15s,box-shadow .2s; }
.hbi-update-btn:hover { transform:translateY(-2px);box-shadow:0 12px 30px rgba(232,64,122,.42); }
.hbi-update-btn:disabled { opacity:.65;cursor:not-allowed;transform:none; }
.hbi-update-hint { color:#bbb;font-size:.74rem;margin:8px 0 0; }

/* Responsive */
@media(max-width:640px){ .hbi-app{padding:10px 0 28px;} .hbi-box{padding:14px 12px;} .hbi-form-grid{grid-template-columns:1fr 1fr;} .hbi-fw-lg{grid-column:1/-1;} }
@media(max-width:400px){ .hbi-form-grid{grid-template-columns:1fr;} }
@media print { .hbi-box:not(.hbi-card-box){display:none!important;} .hbi-dl-area,.hbi-update-row{display:none!important;} .hbi-canvas{box-shadow:none!important;} }