/**
 * Contact Button Neo v1.1 — Frontend CSS
 * Desktop: Tooltip hover animation
 * Mobile: Icon + Text layout
 */

/* Reset */
#cfbn-wrapper, #cfbn-wrapper * { box-sizing: border-box; margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }

/* Variables */
:root {
    --cfbn-btn-size: 52px;
    --cfbn-icon-size: 24px;
    --cfbn-mobile-h: 58px;
    --cfbn-tooltip-gap: 12px;
    --cfbn-dur: 0.25s;
    --cfbn-ease: cubic-bezier(0.34, 1.56, 0.64, 1);
    --cfbn-z: 9990;
    --cfbn-z-mobile: 9991;
}

/* Wrapper */
#cfbn-wrapper { position: fixed; z-index: var(--cfbn-z); pointer-events: none; }
#cfbn-wrapper * { pointer-events: auto; }

/* Positions */
.cfbn-pos-right-top { top: var(--cfbn-padding-y, 20px); right: var(--cfbn-padding-x, 20px); }
.cfbn-pos-right-center { top: 50%; right: var(--cfbn-padding-x, 20px); transform: translateY(-50%); }
.cfbn-pos-right-bottom { bottom: calc(var(--cfbn-padding-y, 20px) + 8px); right: var(--cfbn-padding-x, 20px); }
.cfbn-pos-left-top { top: var(--cfbn-padding-y, 20px); left: var(--cfbn-padding-x, 20px); }
.cfbn-pos-left-center { top: 50%; left: var(--cfbn-padding-x, 20px); transform: translateY(-50%); }
.cfbn-pos-left-bottom { bottom: calc(var(--cfbn-padding-y, 20px) + 8px); left: var(--cfbn-padding-x, 20px); }
.cfbn-pos-center-top { top: var(--cfbn-padding-y, 20px); left: 50%; transform: translateX(-50%); }
.cfbn-pos-center-bottom { bottom: calc(var(--cfbn-padding-y, 20px) + 8px); left: 50%; transform: translateX(-50%); }

/* Desktop group */
.cfbn-desktop-group { display: flex; flex-direction: column; align-items: center; gap: var(--cfbn-gap, 10px); }

/* Desktop button */
.cfbn-btn--desktop { position: relative; display: flex; align-items: center; justify-content: center; width: var(--cfbn-btn-size); height: var(--cfbn-btn-size); border-radius: var(--cfbn-radius, 50px); text-decoration: none !important; border: none; outline: none; cursor: pointer; overflow: visible; transition: transform var(--cfbn-dur) var(--cfbn-ease), box-shadow var(--cfbn-dur) ease, filter var(--cfbn-dur) ease; animation: cfbn-pop var(--cfbn-dur) var(--cfbn-ease) both; }
.cfbn-btn--desktop:nth-child(1) { animation-delay: 0.05s; }
.cfbn-btn--desktop:nth-child(2) { animation-delay: 0.10s; }
.cfbn-btn--desktop:nth-child(3) { animation-delay: 0.15s; }
.cfbn-btn--desktop:nth-child(4) { animation-delay: 0.20s; }
.cfbn-btn--desktop:nth-child(5) { animation-delay: 0.25s; }
.cfbn-btn--desktop:nth-child(6) { animation-delay: 0.30s; }
.cfbn-btn--desktop:nth-child(7) { animation-delay: 0.35s; }
.cfbn-btn--desktop:nth-child(8) { animation-delay: 0.40s; }
.cfbn-btn--desktop:nth-child(9) { animation-delay: 0.45s; }
.cfbn-btn--desktop:nth-child(10) { animation-delay: 0.50s; }

/* Hover animation */
.cfbn-btn--desktop:hover { transform: scale(1.13) translateY(-2px); filter: brightness(1.08); z-index: 2; }
.cfbn-btn--desktop:hover .cfbn-tooltip { opacity: 1; }
.cfbn-btn--desktop:active { transform: scale(0.93); transition-duration: 0.1s; }
.cfbn-btn--desktop:focus-visible { outline: 3px solid rgba(255,255,255,0.85); outline-offset: 2px; }

/* Icon */
.cfbn-btn__icon { display: flex; align-items: center; justify-content: center; width: var(--cfbn-icon-size); height: var(--cfbn-icon-size); line-height: 1; flex-shrink: 0; pointer-events: none; }
.cfbn-btn__icon svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.cfbn-btn__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Tooltip - Professional redesign */
.cfbn-tooltip { position: absolute; white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; padding: 8px 14px; border-radius: 8px; background: linear-gradient(135deg, rgba(17, 24, 39, 0.95), rgba(31, 41, 55, 0.95)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #ffffff; pointer-events: none; opacity: 0; z-index: 10; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1); line-height: 1.4; transition: opacity 0.2s ease, transform 0.2s ease; border: 1px solid rgba(255, 255, 255, 0.08); }

/* Tooltip position — right side */
.cfbn-pos-right-top .cfbn-tooltip, .cfbn-pos-right-center .cfbn-tooltip, .cfbn-pos-right-bottom .cfbn-tooltip { right: calc(100% + var(--cfbn-tooltip-gap)); top: 50%; transform: translateY(-50%) translateX(6px); }
.cfbn-pos-right-top .cfbn-btn--desktop:hover .cfbn-tooltip, .cfbn-pos-right-center .cfbn-btn--desktop:hover .cfbn-tooltip, .cfbn-pos-right-bottom .cfbn-btn--desktop:hover .cfbn-tooltip { transform: translateY(-50%) translateX(0); }

/* Tooltip position — left side */
.cfbn-pos-left-top .cfbn-tooltip, .cfbn-pos-left-center .cfbn-tooltip, .cfbn-pos-left-bottom .cfbn-tooltip { left: calc(100% + var(--cfbn-tooltip-gap)); top: 50%; transform: translateY(-50%) translateX(-6px); }
.cfbn-pos-left-top .cfbn-btn--desktop:hover .cfbn-tooltip, .cfbn-pos-left-center .cfbn-btn--desktop:hover .cfbn-tooltip, .cfbn-pos-left-bottom .cfbn-btn--desktop:hover .cfbn-tooltip { transform: translateY(-50%) translateX(0); }

/* Tooltip position — center */
.cfbn-pos-center-top .cfbn-tooltip, .cfbn-pos-center-bottom .cfbn-tooltip { left: calc(100% + var(--cfbn-tooltip-gap)); top: 50%; transform: translateY(-50%) translateX(-6px); }
.cfbn-pos-center-top .cfbn-btn--desktop:hover .cfbn-tooltip, .cfbn-pos-center-bottom .cfbn-btn--desktop:hover .cfbn-tooltip { transform: translateY(-50%) translateX(0); }

/* Phone pulse ring */
.cfbn-type-phone.cfbn-btn--desktop::after { content: ''; position: absolute; inset: -4px; border-radius: calc(var(--cfbn-radius, 50px) + 4px); background: inherit; animation: cfbn-pulse 2.4s ease-out infinite; opacity: 0; z-index: -1; }

/* Mobile bar — hidden on desktop */
.cfbn-mobile-bar { display: none; }

/* Keyframes */
@keyframes cfbn-pop { from { opacity: 0; transform: scale(0.4) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes cfbn-pulse { 0% { opacity: 0.45; transform: scale(1); } 70% { opacity: 0; transform: scale(1.65); } 100% { opacity: 0; transform: scale(1.65); } }
@keyframes cfbn-rise { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }

/* Mobile ≤ 768px */
@media screen and (max-width: 768px) {
    .cfbn-desktop-group { display: none !important; }
    #cfbn-wrapper { position: static !important; transform: none !important; }
    
    .cfbn-mobile-bar { display: flex !important; position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--cfbn-z-mobile); height: var(--cfbn-mobile-h); background: #111827; box-shadow: 0 -2px 20px rgba(0,0,0,0.28); animation: cfbn-rise 0.38s var(--cfbn-ease) 0.15s both; padding-bottom: env(safe-area-inset-bottom, 0px); height: calc(var(--cfbn-mobile-h) + env(safe-area-inset-bottom, 0px)); }
    
    .cfbn-mobile-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; height: 100%; gap: 5px; text-decoration: none !important; border: none; outline: none; cursor: pointer; position: relative; overflow: hidden; border-right: 1px solid rgba(255,255,255,0.07); transition: filter 0.15s ease; animation: cfbn-rise 0.35s var(--cfbn-ease) both; }
    .cfbn-mobile-btn:nth-child(1) { animation-delay: 0.20s; }
    .cfbn-mobile-btn:nth-child(2) { animation-delay: 0.26s; }
    .cfbn-mobile-btn:nth-child(3) { animation-delay: 0.32s; }
    .cfbn-mobile-btn:nth-child(4) { animation-delay: 0.38s; }
    .cfbn-mobile-btn:nth-child(5) { animation-delay: 0.44s; }
    .cfbn-mobile-btn:last-child { border-right: none; }
    .cfbn-mobile-btn:active { filter: brightness(1.25); }
    .cfbn-mobile-btn::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.12); opacity: 0; transition: opacity 0.25s ease; }
    .cfbn-mobile-btn:active::after { opacity: 1; }
    .cfbn-mobile-btn:focus-visible { outline: 2px solid rgba(255,255,255,0.5); outline-offset: -2px; }
    
    .cfbn-mobile-btn__icon { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; line-height: 1; }
    .cfbn-mobile-btn__icon svg { width: 100%; height: 100%; fill: currentColor; display: block; }
    .cfbn-mobile-btn__icon img { width: 100%; height: 100%; object-fit: contain; display: block; }
    
    .cfbn-mobile-btn__label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 72px; }
}

/* Tablet 769–1023px */
@media screen and (min-width: 769px) and (max-width: 1023px) { .cfbn-desktop-group { display: flex !important; } .cfbn-mobile-bar { display: none !important; } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) { .cfbn-btn--desktop, .cfbn-mobile-bar, .cfbn-mobile-btn, .cfbn-tooltip { animation: none !important; transition: opacity 0.1s ease !important; } .cfbn-type-phone.cfbn-btn--desktop::after { animation: none !important; } }