/* =================================
   RESET
================================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Segoe UI, sans-serif;
    background:#0e2418;
    color:#fff;
    overflow-x:hidden;
}


/* =================================
   CONTAINER
================================= */
.page-container{
    width:96%;
    max-width:1800px;
    margin:8px auto;
}


/* =================================
   NAVBAR
================================= */
.navbar{
    position:sticky;
    top:0;
    z-index:9999;

    background:#123826;
    padding:18px 40px;

    display:flex;
    align-items:center;
    justify-content:space-between;
}

.site-logo{
    height:60px;
}

.nav-links{
    display:flex;
    align-items:center;
    gap:26px;
}

.nav-links a{
    color:#fff;
    font-size:16px;
    font-weight:800;
    text-decoration:none;
    padding:8px 14px;
    border-radius:8px;
    transition:.25s;
}

.nav-links a:hover{
    background:#36d17a;
    color:#0e2418;
}


/* =================================
   DROPDOWN
================================= */
.dropdown{
    position:relative;
}

.dropdown-content{
    display:none;
    position:absolute;
    top:100%;
    left:0;

    background:#123826;
    min-width:240px;

    border-radius:10px;
    overflow:hidden;
    z-index:10000;
}

.dropdown-content a{
    display:block;
    padding:12px 16px;
    font-weight:600;
}

.dropdown-content a:hover{
    background:#36d17a;
    color:#0e2418;
}

.dropdown:hover .dropdown-content{
    display:block;
}


/* =================================
   HERO
================================= */
.hero-slider{
    position:relative;
    height:490px;
    overflow:hidden;
    border-radius:12px;
}

.hero-slider img{
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:.7s;
}

.hero-slider img.active{
    opacity:1;
}


/* =================================
   PROMO SLIDER
================================= */
.promo-slider{
    width:100%;
    overflow:hidden;
    margin:12px 0;
}

.promo-track{
    display:flex;
    gap:15px;
    animation:promoSlide 25s linear infinite;
}

.promo-track img{
    width:490px;
    height:200px;
    object-fit:cover;
    border-radius:10px;
    flex-shrink:0;
}

@keyframes promoSlide{
    from{transform:translateX(0)}
    to{transform:translateX(-50%)}
}

/* =====================================================
   RECENT SERVICES (🔥 FIXED CLEAN)
===================================================== */
.recent-services{
    margin:70px 0 90px;
}

.section-title{
    text-align:center;
    font-size:28px;
    font-weight:800;
    margin-bottom:30px;
}

.service-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.service-card{
    background:#123826;
    padding:22px;
    border-radius:12px;
    text-align:center;
    transition:.25s;
}

.service-card:hover{
    transform:translateY(-6px);
    background:#174632;
}

.price{
    font-weight:700;
    margin:8px 0;
}

/* =================================
   FLOAT BUTTONS (RIGHT SIDE WITH POPUP TEXT)
================================= */

.float-buttons{
    position:fixed;
    right:20px;
    bottom:20px;

    display:flex;
    flex-direction:column;
    gap:12px;

    z-index:12000;
}

/* each row */
.float-item{
    position:relative;
    display:flex;
    align-items:center;
}

/* popup text */
.float-item span{
    position:absolute;

    right:65px;              /* show LEFT of icon */
    background:#111;
    color:#fff;

    padding:6px 12px;
    border-radius:6px;

    font-size:13px;
    white-space:nowrap;

    opacity:0;
    transform:translateX(10px);

    transition:.25s;
}

/* show on hover */
.float-item:hover span{
    opacity:1;
    transform:translateX(0);
}

/* icon button */
.float-item a{
    width:56px;
    height:56px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:0 6px 14px rgba(0,0,0,.4);

    transition:.25s;
}

/* icon size */
.float-item img{
    width:26px;
}

/* hover grow */
.float-item a:hover{
    transform:scale(1.15);
}

/* colors */
.whatsapp{background:#25D366;}
.telegram{background:#229ED9;}
.facebook{background:#1877F2;}
.livechat{background:#36d17a;}

/* =================================
   LEFT SOCIAL SIDEBAR (NO BACKGROUND)
================================= */
.side-social-left{
    position:fixed;
    left:10px;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:14px;
    z-index:15000;
}

.ss-item{
    width:44px;
    height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:none;          /* тнР removed circle background */
    box-shadow:none;
}

.ss-item img{
    width:28px;
    height:28px;
    transition:.25s;
}

.ss-item img:hover{
    transform:scale(1.2);
}


/* =================================
   AUTH MODAL (FIXED CENTER CLEAN)
================================= */

.auth-modal{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,.75);

    display:none;

    align-items:center;
    justify-content:center;

    z-index:12000;
}

/* show */
.auth-modal.active{
    display:flex;
}

/* modal box */
.auth-box{
    width:420px;
    max-width:95%;

    background:#123826;
    padding:28px;

    border-radius:14px;

    box-shadow:0 20px 50px rgba(0,0,0,.7);

    position:relative;

    animation:pop .25s ease;
}

/* animation */
@keyframes pop{
    from{ transform:scale(.85); opacity:0; }
    to{ transform:scale(1); opacity:1; }
}

/* title */
.auth-box h2{
    text-align:center;
    margin-bottom:18px;
}

/* inputs */
.auth-box input,
.auth-box select{
    width:100%;
    height:42px;

    padding:10px;
    margin-bottom:12px;

    border-radius:8px;
    border:none;

    font-size:14px;
}

/* button */
.auth-box button{
    width:100%;
    height:42px;

    background:#36d17a;
    color:#000;

    border:none;
    border-radius:8px;

    font-weight:800;
    cursor:pointer;
}

/* =================================
   MODAL CLOSE BUTTON – PREMIUM RIGHT
================================= */

.auth-close{
    position:absolute;
    top:12px;
    right:12px;

    width:36px;
    height:36px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(255,255,255,0.12);
    color:#fff;

    border-radius:50%;
    font-size:18px;
    font-weight:900;

    cursor:pointer;

    transition:.25s;
    backdrop-filter:blur(6px);
}

/* hover effect */
.auth-close:hover{
    background:#36d17a;
    color:#000;
    transform:rotate(90deg) scale(1.1);
}

/* press */
.auth-close:active{
    transform:scale(.95);
}

/* =================================
   SERVICES PAGE – FINAL FOOTER FIX
================================= */

.services-page{
    width:100%;
    padding:25px 60px 80px; /* 🔥 bottom space for footer */
    display:block;
}

/* force normal document flow */
.service-table{
    width:100%;
    border-collapse:collapse;
    background:#123826;
    table-layout:fixed;
}

/* VERY IMPORTANT */
.page-container{
    min-height:100vh;   /* 🔥 pushes footer below content */
}

/* =================================
   TABLE – FINAL SAFE
================================= */

.service-table{
    width:100%;
    border-collapse:collapse;
    background:#123826;
    table-layout:fixed;
}


/* header */
.service-table th{
    background:#0f2e22;
    color:#fff;
    padding:14px;
    text-align:center;
    white-space:nowrap;
}


/* body */
.service-table td{
    padding:14px;
    text-align:center;
    white-space:nowrap;
}


/* first column */
.service-table th:first-child,
.service-table td:first-child{
    text-align:left;
    width:45%;
}


/* hover */
.service-table tbody tr:hover{
    background:#123a2c;
}

/* =================================
   TOP BAR – FINAL CLEAN BIG
================================= */

.service-topbar{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:22px;
}

/* search big */
#searchBox{
    flex:1;
    height:48px;
    padding:0 16px;
    border-radius:10px;
    border:none;
    font-size:16px;
}

/* 🔥 BIG DROPDOWN FIX */
.group-select{
    flex:0 0 500px;   /* 🔥 fixed clean size */
    width:500px;

    height:48px;
    padding:0 16px;

    border-radius:10px;
    border:none;

    background:#0f2e22;
    color:#fff;

    font-size:16px;
    font-weight:600;
}

/* checkbox */
.service-topbar label{
    display:flex;
    align-items:center;
    gap:8px;
    white-space:nowrap;
}

/* =================================
   ORDER BUTTON
================================= */

.order-btn{
    background:#22c55e;
    border:none;
    padding:8px 16px;
    border-radius:8px;
    font-weight:600;
    cursor:pointer;
    color:#000;
}

.order-btn:hover{
    background:#16a34a;
}

/* =================================
   FOOTER
================================= */
.site-footer{
    margin-top:60px;
    padding:40px 0;
    background:linear-gradient(#0f2d1f,#081811);
    text-align:center;
}

/* =================================
   MOBILE
================================= */
@media(max-width:700px){

    .nav-links{
        gap:14px;
    }

    .hero-slider{
        height:280px;
    }

    .side-social-left{
        display:none;
    }
}

/* =================================
   FLOAT BUTTONS POPUP (DESKTOP + MOBILE)
================================= */

.float-buttons{
    position:fixed;
    right:15px;
    bottom:15px;

    display:flex;
    flex-direction:column;
    gap:12px;

    z-index:99999;
}

.float-item{
    position:relative;
    display:flex;
    align-items:center;
}

/* popup text */
.float-item span{
    position:absolute;
    right:70px;

    background:#111;
    color:#fff;

    padding:6px 12px;
    border-radius:6px;

    font-size:13px;
    white-space:nowrap;

    opacity:0;
    transform:translateX(10px);

    transition:.25s;
}

/* SHOW ON HOVER */
.float-item:hover span{
    opacity:1;
    transform:translateX(0);
}

/* icon button */
.float-item a{
    width:56px;
    height:56px;
    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    box-shadow:0 6px 14px rgba(0,0,0,.4);
    transition:.25s;
}

.float-item img{
    width:26px;
}

.float-item a:hover{
    transform:scale(1.15);
}

/* colors */
.whatsapp{background:#25D366;}
.telegram{background:#229ED9;}
.facebook{background:#1877F2;}
.livechat{background:#36d17a;}

/* =================================
   FOOTER (FIXED CLEAN VERSION)
================================= */

.site-footer{
    width:100%;
    background:#0f2d1f;

    padding:30px 0 20px;
    margin-top:40px;

    text-align:center;
}

/* ===== TOP ROW ===== */
.footer-top{
    width:95%;
    max-width:1400px;
    margin:auto;

    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
}

/* ===== LOGO ===== */
.footer-logo{
    height:40px;
}

/* ===== SOCIAL ICONS ===== */
.footer-social{
    display:flex;
    gap:12px;
}

.social-btn{
    width:40px;
    height:40px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:.25s;
}

.social-btn img{
    width:18px;
}

/* hover */
.social-btn:hover{
    transform:scale(1.12);
}


/* =================================
   🔥 FOOTER LINKS (MAIN FIX)
================================= */

.footer-links{
    margin-top:18px;

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:14px;

    font-size:14px;
}

/* 🔥 THIS IS THE IMPORTANT PART */
.footer-links a{
    color:#ffffff;          /* bright white */
    font-weight:700;        /* bold */
    text-decoration:none;
    padding:4px 8px;

    transition:.25s;
}

.footer-links a:hover{
    color:#36d17a;          /* green hover */
}


/* ===== COPYRIGHT ===== */
.footer-copy{
    margin-top:14px;
    font-size:13px;
    color:#cccccc;
}


/* ===== MOBILE ===== */
@media(max-width:700px){
    .footer-top{
        flex-direction:column;
        gap:15px;
    }
}

/* =================================
   LEFT SIDE SOCIAL WITH POPUP
================================= */

.side-social-left{
    position:fixed;
    left:10px;
    top:40%;
    transform:translateY(-50%);

    display:flex;
    flex-direction:column;
    gap:14px;

    z-index:9999;
}

/* wrapper */
.ss-wrap{
    display:flex;
    align-items:center;
    position:relative;
}

/* popup text */
.ss-wrap span{
    position:absolute;
    left:60px;

    background:#111;
    color:#fff;

    padding:6px 12px;
    border-radius:6px;

    font-size:13px;
    font-weight:700;

    opacity:0;
    white-space:nowrap;

    transition:.25s;
}

/* show on hover */
.ss-wrap:hover span{
    opacity:1;
    left:55px;
}

/* icon button */
.ss-item{
    width:42px;
    height:42px;

    border-radius:8px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:#1b3a2a;

    transition:.25s;
}

.ss-item img{
    width:20px;
}

/* hover effect */
.ss-item:hover{
    transform:scale(1.15);
}

/* =================================
   REGISTER FORM – 2 COLUMN FIX
================================= */

.register-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:18px;
    width:100%;
}

/* full width fields */
.register-grid .full{
    grid-column:1 / -1;
}

/* inputs */
.register-grid input,
.register-grid select{
    width:100%;
    height:44px;   /* ✅ fixed */
    padding:10px 14px;
    border-radius:10px;
    border:none;
}

/* button */
.register-grid button{
    grid-column:1 / -1;
    height:48px;
}


/* PASSWORD EYE FINAL */

.pass-wrap{
    position:relative;
    width:100%;
}

.pass-wrap input{
    width:100%;
    height:44px;
    padding:10px 45px 10px 12px;
}

.pass-wrap .eye{
    position:absolute;
    right:12px;
    top:50%;
    transform:translateY(-50%);
    font-size:20px;
    cursor:pointer;
    z-index:999;   /* always visible */
    color:#333;
}

/* =================================
   🔥 BIG REGISTER POPUP WIDTH FIX
================================= */

/* make ONLY register popup big */
#registerBox{
    width:100%;
}

/* 🔥 THIS IS THE MAIN FIX */
.auth-box{
    width:1100px;       /* BIG like onlineunlockers */
    max-width:96%;
}

/* mobile */
@media(max-width:900px){
    .auth-box{
        width:95%;
    }

    .register-grid{
        grid-template-columns: 1fr; /* stack mobile */
    }
    
    /* ===============================
   AUTH POPUP TITLE – BIG CENTER
================================ */

.auth-title{
    text-align:center;

    font-size:28px;      /* bigger */
    font-weight:700;     /* bold */
    letter-spacing:.5px;

    color:#ffffff;

    margin-bottom:22px;
    margin-top:6px;
}

/* optional underline effect */
.auth-title::after{
    content:"";
    display:block;

    width:60px;
    height:3px;

    background:#36d17a;

    margin:10px auto 0;
    border-radius:10px;
}

/* =================================
   PAGE CONTAINER – FINAL CLEAN FIX
================================= */

.page-container{
    width:100%;
    max-width:100%;
    margin:0 auto;
    padding:0 60px;
}

/* =================================
   🔥 FORCE FOOTER VISIBILITY FIX
================================= */

html, body{
    height:100%;
}

.page-container{
    min-height:100vh;   /* push footer down */
    display:flex;
    flex-direction:column;
}

.site-footer{
    margin-top:auto;    /* stick footer bottom */
}