/* ===================================================== */
/* GLOBAL FIX */
/* ===================================================== */

*{
    box-sizing:border-box;
}

/* ===================================================== */
/* UK SERVICE AREA WRAPPER */
/* ===================================================== */

.hw-uk-service-area{
    display:flex;
    gap:30px;
    padding:40px;
    background:#f5f7fb;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
    flex-wrap:wrap;
    align-items:flex-start;
}

/* ===================================================== */
/* SIDEBAR */
/* ===================================================== */

.hw-sidebar{
    width:260px;
    background:linear-gradient(180deg,#0f172a,#16243d);
    padding:30px;
    border-radius:18px;
    flex-shrink:0;
}

.hw-sidebar h2{
    color:#fff;
    font-size:24px;
    margin-bottom:25px;
    text-align:center;
}

/* ===================================================== */
/* BUTTONS */
/* ===================================================== */

.hw-country-btn{
    width:100%;
    padding:15px;
    margin-bottom:12px;
    border:none;
    border-radius:12px;
    background:#1e293b;
    color:#fff;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:all 0.3s ease;
    text-align:center;
    -webkit-tap-highlight-color:transparent;
}

.hw-country-btn:hover{
    background:#2563eb;
    transform:translateX(5px);
}

.hw-country-btn.uk-active-btn{
    background:#2563eb;
    box-shadow:0 10px 25px rgba(37,99,235,0.3);
}

/* ===================================================== */
/* CONTENT AREA */
/* ===================================================== */

.hw-content{
    flex:1;
    min-width:0;
}

/* ===================================================== */
/* COUNTRY CONTENT (IMPORTANT FIX - DO NOT BREAK JS) */
/* ===================================================== */

/* ❌ DO NOT force display here */
/* JS controls display: none / grid */

.hw-country-content{
    width:100%;
    display:none;
    gap:15px;
}

/* ACTIVE TAB ONLY */
.hw-country-content.uk-active-content{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
}

/* ===================================================== */
/* CITY CARDS */
/* ===================================================== */

.hw-city-card{
    background:#fff;
    padding:18px;
    border-radius:12px;
    text-align:center;
    font-weight:600;
    box-shadow:0 5px 15px rgba(0,0,0,0.06);
    transition:all 0.3s ease;
    cursor:pointer;
}

.hw-city-card:hover{
    background:#2563eb;
    color:#fff;
    transform:translateY(-4px);
}

/* ===================================================== */
/* TABLET RESPONSIVE */
/* ===================================================== */

@media (max-width: 992px){

    .hw-uk-service-area{
        gap:20px;
        padding:25px;
    }

    .hw-sidebar{
        width:220px;
        padding:20px;
    }

    .hw-sidebar h2{
        font-size:20px;
    }

    .hw-country-btn{
        font-size:15px;
        padding:12px;
    }
}

/* ===================================================== */
/* MOBILE RESPONSIVE */
/* ===================================================== */

@media (max-width: 768px){

    .hw-uk-service-area{
        flex-direction:column;
        padding:18px;
    }

    .hw-sidebar{
        width:100%;
        border-radius:14px;
        padding:18px;
        overflow-x:auto;
        white-space:nowrap;
    }

    .hw-country-btn{
        display:inline-block;
        width:auto;
        min-width:140px;
        margin-right:10px;
    }

    /* 🔥 FIX: ONLY ACTIVE CONTENT IS GRID */
    .hw-country-content.uk-active-content{
        grid-template-columns:repeat(2, 1fr);
        gap:12px;
    }
}

/* ===================================================== */
/* SMALL MOBILE */
/* ===================================================== */

@media (max-width: 480px){

    .hw-uk-service-area{
        padding:12px;
        border-radius:14px;
    }

    /* keep 2 columns for better UX */
    .hw-country-content.uk-active-content{
        grid-template-columns:repeat(2, 1fr);
        gap:10px;
    }

    .hw-city-card{
        padding:14px;
        font-size:14px;
    }

    .hw-country-btn{
        min-width:120px;
        font-size:14px;
    }
}