/* =====================================================
   CallbackRequest – Floating Button & Popup
   ===================================================== */

/* ---- Wrapper ---- */
#cb-wrapper {
    position: fixed;
    bottom: 28px;
    z-index: 8;
}
#cb-wrapper.cb-position-right { right: 28px; }
#cb-wrapper.cb-position-left  { left:  28px; }

/* ---- Floating button ---- */
.cb-float-btn {
    position: relative;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(0,0,0,.28);
    transition: transform .2s ease, box-shadow .2s ease;
    outline: none;
}
.cb-float-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
.cb-float-btn:active { transform: scale(.97); }

/* Pulse ring */
.cb-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 3px solid currentColor;
    opacity: 0;
    animation: cb-pulse 2.2s ease-out infinite;
    pointer-events: none;
    color: inherit;
}
@keyframes cb-pulse {
    0%   { transform: scale(.85); opacity: .6; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { opacity: 0; }
}

/* ---- Popup ---- */
.cb-popup {
    position: absolute;
    bottom: 72px;
    width: 320px;
    background: #fff;
    border-radius: 18px;
    padding: 28px 24px 22px;
    box-shadow: 0 12px 48px rgba(0,0,0,.18);
    transform: translateY(12px) scale(.97);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
}
.cb-position-right .cb-popup { right: 0; }
.cb-position-left  .cb-popup { left:  0; }

.cb-popup.cb-open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
	z-index: 99999;
}

/* Close button */
.cb-popup-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #9aa;
    padding: 0 4px;
    transition: color .15s;
}
.cb-popup-close:hover { color: #333; }

/* Icon */
.cb-popup-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #00646d21;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    color: #00646d;
}

/* Title & desc */
.cb-popup-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    margin: 0 0 8px !important;
    color: #1a1a2e !important;
    line-height: 1.3 !important;
}
.cb-popup-desc {
    font-size: 13px !important;
    color: #667 !important;
    margin: 0 0 18px !important;
    line-height: 1.5 !important;
}

/* Input group */
.cb-input-group {
    display: flex;
    gap: 8px;
}
.cb-phone-input {
    flex: 1;
    border: 2px solid #e8eaf0;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
    min-width: 0;
}
.cb-phone-input:focus {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231,76,60,.12);
}
.cb-phone-input::placeholder { color: #bbb; }

/* Submit button */
.cb-submit-btn {
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: filter .2s, transform .15s;
    flex-shrink: 0;
}
.cb-submit-btn:hover  { filter: brightness(1.1); }
.cb-submit-btn:active { transform: scale(.97); }
.cb-submit-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Spinner */
.cb-spin {
    animation: cb-spinner .7s linear infinite;
}
@keyframes cb-spinner {
    to { transform: rotate(360deg); }
}

/* Error */
.cb-error {
    background: #fef3f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    color: #dc2626;
    margin-bottom: 12px;
}

/* Privacy */
.cb-privacy {
    display: flex;
    align-items: flex-start;
    gap: 5px;
    font-size: 10.5px !important;
    color: #aab !important;
    margin: 10px 0 0 !important;
    line-height: 1.4 !important;
}
.cb-privacy svg { margin-top: 1px; flex-shrink: 0; }

/* Success view */
.cb-success-view {
    text-align: center;
    padding: 10px 0;
}
.cb-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #f0fdf4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    color: #22c55e;
    animation: cb-pop .35s cubic-bezier(.36,1.56,.64,1) both;
}
@keyframes cb-pop {
    from { transform: scale(.5); opacity: 0; }
    to   { transform: scale(1);  opacity: 1; }
}
.cb-success-msg {
    font-size: 14px !important;
    color: #334 !important;
    font-weight: 500 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* Backdrop (mobile) */
.cb-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 99998;
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
    #cb-wrapper.cb-position-right,
    #cb-wrapper.cb-position-left {
        left: 0;
        right: 0;
        bottom: 0;
    }
    .cb-popup {
        width: calc(100% - 2rem);
        border-radius: 20px 20px 20px 20px;
		margin: auto;
        bottom: 200px;
        right: 0 !important;
        left: 0 !important;
        padding: 28px 20px 32px;
    }
    .cb-float-btn {
        position: fixed;
        right: 20px;
        bottom: 190px;
    }
    .cb-position-left .cb-float-btn {
        right: auto;
        left: 20px;
    }
}