/* ============================================================
   IZOATE NAME BLENDER — Floating Button
   Loads on every front-end page (when enabled in Settings).
   Deliberately self-contained and separate from name-blender.css
   — this has no blending logic to support, just a teaser that
   links out to the real page, so it stays tiny.

   Every rule below is scoped under #inb-float (an ID selector) and
   the properties that control whether this is even visible at all
   (display, position, visibility, opacity, size, placement, z-index)
   carry !important. This site's theme has already been found to
   silently override this plugin's unscoped selectors elsewhere
   (the button-hover and meaning-box-centering issues) — likely via
   its own higher-specificity or !important rules for generic
   buttons/fixed-position elements — so this bundle gets the same
   defensive treatment from the start instead of waiting to hit the
   same bug again.
   ============================================================ */

#inb-float, #inb-float *, #inb-float *::before, #inb-float *::after {
    box-sizing: border-box !important;
}

#inb-float .inb-float-btn {
    display:          flex !important;
    position:         fixed !important;
    right:            20px !important;
    bottom:           20px !important;
    left:             auto !important;
    top:              auto !important;
    width:            58px !important;
    height:           58px !important;
    margin:           0 !important;
    border-radius:    50% !important;
    background:       #E30B5C !important;
    border:           none !important;
    align-items:      center;
    justify-content:  center;
    box-shadow:       0 8px 24px rgba(227,11,92,0.35);
    cursor:           pointer;
    z-index:          999998 !important;
    padding:          0 !important;
    opacity:          1 !important;
    visibility:       visible !important;
    -webkit-tap-highlight-color: transparent;
    transition:       transform 250ms cubic-bezier(0.34,1.56,0.64,1),
                       box-shadow 250ms ease;
}
#inb-float .inb-float-btn:hover {
    transform:  translateY(-3px) scale(1.05);
    box-shadow: 0 12px 32px rgba(227,11,92,0.45);
}
#inb-float .inb-float-heart {
    width:  26px !important;
    height: 26px !important;
    color:  #FFFFFF !important;
    display: block;
}

#inb-float .inb-float-overlay {
    display:    block !important;
    position:   fixed !important;
    inset:      0 !important;
    background: rgba(20,8,12,0.45);
    opacity:    0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 0ms 300ms;
    z-index:    999997 !important;
}
#inb-float .inb-float-overlay.show {
    opacity:    1;
    visibility: visible;
    transition: opacity 300ms ease;
}

#inb-float .inb-float-panel {
    display:       block !important;
    position:      fixed !important;
    left:          50% !important;
    right:         auto !important;
    top:           auto !important;
    bottom:        0 !important;
    transform:     translate(-50%, 100%);
    width:         100% !important;
    max-width:     400px !important;
    margin:        0 !important;
    background:    linear-gradient(160deg, #FFE0E9 0%, #FFF8FA 100%) !important;
    border-radius: 28px 28px 0 0 !important;
    padding:       44px 28px 32px !important;
    box-shadow:    0 -12px 40px rgba(227,11,92,0.25);
    z-index:       999999 !important;
    opacity:       1 !important;
    visibility:    visible !important;
    transition:    transform 380ms cubic-bezier(0.34,1.56,0.64,1);
    text-align:    center !important;
    font-family:   'DM Sans', sans-serif;
}
#inb-float .inb-float-panel.show {
    transform: translate(-50%, 0);
}
@media (min-width: 480px) {
    #inb-float .inb-float-panel {
        bottom:        24px !important;
        border-radius: 28px !important;
    }
}

#inb-float .inb-float-close {
    display:         flex !important;
    position:        absolute !important;
    top:             16px !important;
    right:           16px !important;
    left:            auto !important;
    bottom:          auto !important;
    width:           32px !important;
    height:          32px !important;
    margin:          0 !important;
    border-radius:   50% !important;
    border:          none !important;
    background:      rgba(227,11,92,0.08) !important;
    color:           #E30B5C !important;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    padding:         0 !important;
    opacity:         1 !important;
    visibility:      visible !important;
    transition:      background 200ms ease;
}
#inb-float .inb-float-close:hover {
    background: rgba(227,11,92,0.16) !important;
}
#inb-float .inb-float-close svg {
    width:  16px !important;
    height: 16px !important;
}

#inb-float .inb-float-title {
    display:       block !important;
    font-family:   'Merienda', serif !important;
    font-weight:   700 !important;
    font-size:     28px !important;
    color:         #1A0A10 !important;
    margin:        0 0 6px !important;
    line-height:   1.2 !important;
    text-align:    center !important;
}
#inb-float .inb-float-sub {
    display:        block !important;
    font-size:      13px !important;
    font-weight:    600 !important;
    color:          #E30B5C !important;
    margin:         0 0 14px !important;
    text-align:     center !important;
}
#inb-float .inb-float-desc {
    display:     block !important;
    font-size:   14px !important;
    line-height: 1.6 !important;
    color:       rgba(26,10,16,0.62) !important;
    margin:      0 0 24px !important;
    text-align:  center !important;
}
#inb-float .inb-float-cta {
    display:         block !important;
    position:        static !important;
    width:           100% !important;
    margin:          0 !important;
    padding:         16px !important;
    background:      #E30B5C !important;
    color:           #FFFFFF !important;
    font-family:     'DM Sans', sans-serif !important;
    font-weight:     600 !important;
    font-size:       14px !important;
    letter-spacing:  0.04em !important;
    text-transform:  uppercase !important;
    text-align:      center !important;
    text-decoration: none !important;
    border:          none !important;
    border-radius:   100px !important;
    box-shadow:      0 8px 24px rgba(227,11,92,0.30);
    opacity:         1 !important;
    visibility:      visible !important;
    transition:      background 250ms ease, transform 250ms ease, box-shadow 250ms ease;
}
#inb-float .inb-float-cta:hover {
    background: #B5094A !important;
    transform:  translateY(-2px);
    box-shadow: 0 12px 32px rgba(227,11,92,0.40);
}

@media (prefers-reduced-motion: reduce) {
    #inb-float .inb-float-btn,
    #inb-float .inb-float-panel,
    #inb-float .inb-float-overlay,
    #inb-float .inb-float-cta {
        transition: none !important;
    }
}