
/* Frontend styles for Invinary Elements */
/*------- Audio -------*/
.inv-audio-wrapper{width:100%;display:flex;justify-content:center;align-items:center}
.inv-audio-button{--inv-audio-size:50px;--inv-audio-icon-size:18px;--inv-audio-icon-color:#111;position:relative;display:inline-flex;align-items:center;justify-content:center;width:var(--inv-audio-size);height:var(--inv-audio-size);background:#fffffff2;color:var(--inv-audio-icon-color);cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,opacity .25s ease;padding:0;overflow:hidden}
.inv-audio-button:hover{transform:translateY(-2px)}
.inv-audio-button:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.inv-audio-button,.inv-audio-button i,.inv-audio-button svg{color:inherit;fill:currentColor}
.inv-audio-icon-set{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:2}
.inv-audio-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--inv-audio-icon-size);line-height:1;opacity:0;transform:scale(0.84);transition:opacity .25s ease,transform .25s ease}
.inv-audio-state i{font-size:inherit}
.inv-audio-state svg{width:1em;height:1em}
.inv-audio-state.is-visible{opacity:1;transform:scale(1)}

/*------- RSVP -------*/
.inv-rsvp-wrapper{--inv-rsvp-field-gap:14px;--inv-rsvp-avatar-size:40px;--inv-rsvp-radius:5px;--inv-rsvp-border:#00000014;--inv-rsvp-bg:#fff;--inv-rsvp-text:#374151;--inv-rsvp-muted:#6b7280;--inv-rsvp-primary:#111827;--inv-rsvp-primary-hover:#000;color:var(--inv-rsvp-text)}
.inv-rsvp-form{display:grid;gap:var(--inv-rsvp-field-gap);margin-bottom:30px}
.inv-rsvp-form.is-disabled{opacity:.6;pointer-events:none}
.inv-rsvp-field{display:grid;gap:6px}
.inv-rsvp-label{font-size:14px;font-weight:600}
.inv-rsvp-badge-text{font-size:10px;font-weight:600}
.inv-rsvp-page svg{height:14px}
.inv-rsvp-page.prev{margin-right:10px}
.inv-rsvp-page.next{margin-left:10px}
.inv-rsvp-input,.inv-rsvp-textarea,.inv-rsvp-select{width:100%;border:1px solid var(--inv-rsvp-border);border-radius:5px;background:var(--inv-rsvp-bg);color:var(--inv-rsvp-text);padding:10px 14px;font-size:14px;transition:border-color .2s}
.inv-rsvp-input:focus,.inv-rsvp-textarea:focus,.inv-rsvp-select:focus{outline:none;border-color:var(--inv-rsvp-primary)}
.inv-rsvp-form-message.is-error{font-size:14px;color:#ba1b1b}
.inv-rsvp-form-message.is-success{font-size:14px;color:#15a843}
.inv-rsvp-form-message.is-loading{font-size:14px;color:#525252}
.inv-rsvp-textarea{min-height:100px;resize:vertical;overflow-x:hidden}
.inv-rsvp-submit{padding:12px 24px;font-weight:600;border-radius:5px;cursor:pointer;border:none}
.inv-rsvp-reply-info{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#0000000a;border-radius:10px;font-size:13px}
.inv-rsvp-cancel-reply{background:none;border:none;color:#ef4444;cursor:pointer;font-weight:600}
.inv-rsvp-guest-notice{padding:16px;background:#fef2f2;color:#991b1b;border-radius:12px;margin-bottom:20px;text-align:center;font-size:14px;border:1px solid #fecaca}
.inv-rsvp-list{display:grid;gap:16px}
.inv-rsvp-item{display:grid;gap:12px}
.inv-rsvp-item-inner{display:flex;gap:14px;padding:16px;border-radius:var(--inv-rsvp-radius);border:1px solid var(--inv-rsvp-border);background:var(--inv-rsvp-bg)}
.inv-rsvp-avatar{width:var(--inv-rsvp-avatar-size);height:var(--inv-rsvp-avatar-size);border-radius:50%;overflow:hidden;flex:0 0 auto;background:#f3f4f6}
.inv-rsvp-avatar img{width:100%;height:100%;object-fit:cover}
.inv-rsvp-body{flex:1;min-width:0}
.inv-rsvp-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:5px}
.inv-rsvp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;width:100%;justify-content:space-between}
.inv-rsvp-name{font-size:16px;font-weight:700}
.inv-rsvp-badge{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:6px;background:#f3f4f6;font-size:10px;font-weight:700}
.inv-rsvp-message{font-size:13px;line-height:1.4;margin-bottom:5px}
.inv-rsvp-footer{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--inv-rsvp-muted)}
.inv-rsvp-footer span{font-size:12px}
.inv-rsvp-actions{display:flex;gap:12px}
.inv-rsvp-reply-btn,.inv-rsvp-delete-btn{background:none;border:none;padding:0;font:inherit;font-weight:600;cursor:pointer;color:var(--inv-rsvp-primary)}
.inv-rsvp-delete-btn{color:#ef4444}
.inv-rsvp-replies{margin-left:54px;display:grid;gap:12px;position:relative;padding-left:0}
.inv-rsvp-item-reply{position:relative}
.inv-rsvp-item-reply::before{content:"";position:absolute;left:-28px;top:-12px;width:20px;height:45px;border-left:1px solid var(--inv-rsvp-reply-line,var(--inv-rsvp-border));border-bottom:1px solid var(--inv-rsvp-reply-line,var(--inv-rsvp-border));border-bottom-left-radius:12px}
.inv-rsvp-item-reply:first-child::before{top:0;height:32px}
.inv-rsvp-item-reply:not(:last-child)::after{content:"";position:absolute;left:-28px;top:20px;bottom:-12px;width:1px;background:var(--inv-rsvp-reply-line,var(--inv-rsvp-border))}
.inv-rsvp-item-reply .inv-rsvp-item-inner{padding:12px;border-radius:12px}
.inv-rsvp-pagination{display:flex;justify-content:center;gap:6px;margin-top:24px}
.inv-rsvp-page{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--inv-rsvp-border);background:var(--inv-rsvp-bg);cursor:pointer;font-size:13px;transition:all .2s}
.inv-rsvp-page:hover,.inv-rsvp-page.is-active{background:var(--inv-rsvp-primary);color:#fff;border-color:var(--inv-rsvp-primary)}
.inv-rsvp-page:disabled{opacity:.5;cursor:not-allowed}.inv-rsvp-dots{display:flex;align-items:flex-end;padding-bottom:6px}

/*------- Copy Button -------*/
.inv-copy-button{--inv-copy-icon-size:16px;cursor:pointer;transition: all 0.3s ease;}
.inv-copy-button:hover,.invinary-save-date .elementor-button:hover{opacity:.98}
.inv-copy-button .elementor-button-content-wrapper,.invinary-save-date .elementor-button-content-wrapper,.inv-rsvp-submit .elementor-button-content-wrapper{display:inline-flex;align-items:center;justify-content:center;flex-wrap:nowrap}
.inv-copy-icon-wrap{display:inline-flex;align-items:center}
.inv-copy-icon,.inv-copy-icon-copied{display:inline-flex;align-items:center;justify-content:center;line-height:1;font-size:var(--inv-copy-icon-size)}
.inv-copy-icon-copied{display:none}
.inv-copy-button.is-copied .inv-copy-icon{display:none}
.inv-copy-button.is-copied .inv-copy-icon-copied{display:inline-flex}

/*------- Save to Date -------*/
.inv-save-date-wrap .elementor-button-content-wrapper{display:inline-flex;align-items:center;justify-content:center}

/*------- Guest Name -------*/
.inv-guest-name{display:inline-block}

/*------- Mix -------*/
.inv-copy-button,.invinary-save-date .elementor-button,.inv-rsvp-submit{display:inline-flex;align-items:center;justify-content:center}
.inv-copy-button,.invinary-save-date-wrapper .elementor-button{background:var(--color-main);color:#fff;border:none}
.inv-copy-button .elementor-button-icon,.invinary-save-date .elementor-button-icon,.inv-rsvp-submit .elementor-button-icon{display:inline-flex;align-items:center;justify-content:center;line-height:1}

/*------- Responsive -------*/
@media (max-width: 767px){
.inv-rsvp-item{grid-template-columns:1fr}
.inv-rsvp-head{align-items:flex-start}
.inv-audio-wrapper--floating{left:50%;top:auto;bottom:24px;transform:translateX(-50%)}}
