﻿/* Social Strip Container */
.social-strip {
    position: fixed; /* Always visible */
    top: 100%;
    right: 15px; /* Center vertically */
                  /* Change to left: 15px if needed */
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 99;
}

.social-strip {
    position: fixed; /* Always visible */
    top: 50%; /* Center vertically */
    right: 15px; /* Change to left: 15px if needed */
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 99;
}

    /* Individual Icon Buttons */
    .social-strip a {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-size: 20px;
        text-decoration: none;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

        /* Hover Effect */
        .social-strip a:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
        }

    /* Platform Colors */
    .social-strip .whatsapp {
        background-color: #25D366;
    }

    .social-strip .instagram {
        background: linear-gradient( 45deg, #f58529, #dd2a7b, #8134af, #515bd4 );
    }

    .social-strip .twitter {
        background-color: #000000;
    }

    .social-strip .telegram {
        background-color: #0088cc;
    }

    .social-strip .call {
        background: linear-gradient( 45deg, #2c29f5, #2aaddd, #8134af, #515bd4 );
    }

    .social-strip .facebook {
        background: linear-gradient( 45deg, #2c29f5, #422add, #344aaf, #515bd4 );
    }

    .social-strip .email {
        background: linear-gradient( 45deg, #f5299d, #dd2a2a, #af9034, #5ad451 );
    }

/* Mobile Adjustments */
@media (max-width: 768px) {
    .social-strip {
        right: 8px;
    }

        .social-strip a {
            width: 40px;
            height: 40px;
            font-size: 18px;
        }
}


/* Floating button wrapper */
.floating-download {
    position: fixed;
    left: 15px;
    top: 90%;
    transform: translateY(-50%);
    z-index: 9999;
}

    /* Button style */
    .floating-download a {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 16px;
        background: #1db954;
        color: white;
        font-family: Arial, sans-serif;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        border-radius: 50px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
        transition: 0.3s ease;
    }

        /* Icon style */
        .floating-download a i {
            font-size: 22px;
        }

        /* Hover effect */
        .floating-download a:hover {
            background: #169c45;
            transform: scale(1.05);
        }

/* Optional: On small screens show only icon */
/*@media (max-width: 600px) {
    .floating-download a span {
        display: none;
    }

    .floating-download a {
        padding: 12px;
        border-radius: 50%;
    }
}*/




/* Login Register */



/* Base container */
.sticky-auth-buttons {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom) + 50px);
    width: 100%;
    pointer-events: none;
    z-index: 99;
}

/* Buttons */
.auth-btn {
    pointer-events: auto;
    position: absolute;
    padding: 14px 22px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.25);
    transition: transform 0.2s ease;
}

    .auth-btn:hover {
        transform: translateY(-2px);
    }

/* Mobile positioning */
.login-btn {
    left: 16px;
    background-color: #ffffff;
    color: #ff7a00;
    border: 2px solid #ff7a00;
}

.register-btn {
    right: 16px;
    background-color: #ff7a00;
    color: #ffffff;
}

/* Desktop layout */
@media (min-width: 768px) {
    /*.sticky-auth-buttons {
        display: flex;
        justify-content: center;
        gap: 24px;
        pointer-events: auto;
    }

    .auth-btn {
        position: static;
    }*/
}
