/* ==========================================================================
   Popup and Floating Button Styles
   ========================================================================== */

/* Floating Actions Container */
.floating-actions {
    position: fixed;
    bottom: 30px;
    right: 20px;
    z-index: 990;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

/* Floating Contact Button - Reset Positioning */
.floating-contact {
    position: static;
    font-family: 'Open Sans', sans-serif;
}

.float-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border: none;
    color: white;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(37, 99, 235, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
}

.float-btn:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.6);
}

.phone-icon {
    width: 25px;
    height: 25px;
    animation: phone-shake 3s infinite;
}

/* Tooltip remains absolutely positioned relative to the container/button */
.float-tooltip {
    position: absolute;
    right: 70px;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    background: white;
    padding: 8px 16px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.float-tooltip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px 0 6px 6px;
    border-style: solid;
    border-color: transparent transparent transparent white;
}

.float-btn:hover .float-tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Waves Effect */
.float-waves {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.wave {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid var(--primary);
    opacity: 0;
    animation: wave-pulse 2s infinite;
    pointer-events: none;
}

.wave:nth-child(2) {
    animation-delay: 0.5s;
}

@keyframes phone-shake {

    0%,
    90% {
        transform: rotate(0);
    }

    92% {
        transform: rotate(-15deg);
    }

    94% {
        transform: rotate(15deg);
    }

    96% {
        transform: rotate(-15deg);
    }

    98% {
        transform: rotate(15deg);
    }

    100% {
        transform: rotate(0);
    }
}

@keyframes wave-pulse {
    0% {
        width: 100%;
        height: 100%;
        opacity: 0.8;
    }

    100% {
        width: 250%;
        height: 250%;
        opacity: 0;
    }
}

/* Back To Top Button */
.back-to-top {
    position: static;
    /* Controlled by flex container */
    width: 56px;
    height: 56px;
    background: white;
    /* Changed to white/light to differentiate */
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    /* Match shape */
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    border: 2px solid transparent;
    z-index: 990;
    /* Normally hidden until scrolled */
    /* When hidden, we want it to not take space? No, transition transform/opacity is better. 
       Actually, if it takes space when hidden, adequate gap remains. 
       But display: none breaks transition.
       Let's keep it visible: hidden.
    */
    /* If we want it to NOT take space when hidden, we'd need height:0 / margin:0 transition. 
       For now, let's let it take space or just fade in. 
       If it takes space, layout jumps. 
       Let's use absolute positioning relative to container if we want to avoid layout shift? 
       No, user wants them stacked. */

    /* Better approach: 
       When hidden: height: 0, margin: 0, opacity: 0, transform: scale(0)
    */
    height: 0;
    margin: 0;
    overflow: hidden;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    height: 56px;
    margin-top: 0;
    /* Natural gap from flex container gap if we used gap, but here we might want manual margin if height transitions */
    overflow: visible;
}

.back-to-top svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    transition: transform 0.3s ease;
}

.back-to-top:hover {
    background: var(--primary);
    color: white;
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.4);
    transform: translateY(-3px);
}

.back-to-top:hover svg {
    transform: translateY(-3px);
}


/* Modal Styles */
.popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.popup-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: opacity 0.3s ease;
}

.popup-container {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: var(--bg-white);
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 2.5rem;
    transform: translateY(20px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.popup-overlay.is-active .popup-container {
    transform: translateY(0) scale(1);
}

.popup-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: color 0.2s;
    padding: 0.5rem;
    border-radius: 50%;
}

.popup-close:hover {
    color: var(--text-main);
    background: var(--bg-light);
}

.popup-title {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
    color: var(--text-main);
    text-align: center;
    margin-top: 0;
}

.popup-subtitle {
    text-align: center;
    color: var(--text-muted);
    margin-bottom: 2rem;
    font-size: 0.95rem;
}

.form-group {
    margin-bottom: 1.5rem;
    position: relative;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 1rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    pointer-events: none;
    transition: color 0.2s;
}

.area-icon {
    top: 1rem;
}

.form-input {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 3rem;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s;
    background: var(--bg-light);
    color: var(--text-main);
}

.form-input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--bg-white);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.form-input:focus+.input-icon,
.input-wrapper:focus-within .input-icon {
    color: var(--primary);
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
    line-height: 1.5;
}

.required {
    color: #ef4444;
}

.btn-submit {
    width: 100%;
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.btn-loader {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    display: none;
}

.is-loading .btn-text {
    opacity: 0;
}

.is-loading .btn-loader {
    display: block;
    position: absolute;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.form-privacy {
    margin-top: 1rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.4;
}

.form-error {
    display: none;
    color: #ef4444;
    font-size: 0.8rem;
    margin-top: 0.4rem;
    padding-left: 0.5rem;
}

.form-group.has-error .form-input {
    border-color: #ef4444;
}

.form-group.has-error .form-error {
    display: block;
}

/* Success Message State */
.popup-success {
    text-align: center;
    padding: 2rem 0;
    animation: fadeIn 0.5s ease;
}

.success-icon {
    width: 80px;
    height: 80px;
    background: #dcfce7;
    color: #16a34a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2.5rem;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}