/* ============================================
   RESPONSIVE CSS - CLEAN VERSION
   ============================================ */

/* ============================================
   HOMEPAGE RESPONSIVE
   ============================================ */

@media (max-width: 767.98px) {
    /* Category Buttons */
    .category-btn {
        font-size: 12px;
        padding: 6px 12px !important;
        margin-bottom: 8px !important;
    }

    /* Escort Cards */
    .image_container {
        height: 200px !important;
    }

    /* Tags */
    .tags {
        top: 10px;
        left: 5px;
    }

    .tags span {
        max-width: 24px;
    }

    /* Load More Button */
    #load-more-btn {
        width: 100%;
    }

    /* Pagination */
    .pagination {
        font-size: 12px;
    }

    .page-link {
        padding: 6px 10px;
    }
}

/* ============================================
   LISTING PROFILE PAGE RESPONSIVE
   ============================================ */

@media (max-width: 767.98px) {
    .single-profile-page {
        padding: 20px 0 !important;
    }

    .profile-box {
        height: 180px;
        width: 180px;
        margin: 0 auto 20px;
    }

    .profile-card {
        margin-bottom: 20px;
    }

    .social-link {
        height: 35px !important;
        width: 35px !important;
        margin-right: 3px !important;
    }

    .pro-social-icon {
        font-size: 16px !important;
    }
}

/* ============================================
   LOGIN/REGISTER PAGES RESPONSIVE
   ============================================ */

@media (max-width: 767.98px) {
    /* Login Page */
    .login-page {
        padding: 20px 10px;
    }

    .glass-card {
        padding: 1.5rem;
        width: 95%;
    }

    .title {
        font-size: 1.5rem;
    }

    /* Spheres */
    .sphere-1 {
        width: 150px;
        height: 150px;
        top: 5%;
        left: 5%;
    }

    .sphere-2 {
        width: 120px;
        height: 120px;
        bottom: 30%;
        right: 10%;
    }

    .sphere-3 {
        width: 80px;
        height: 80px;
        top: 65%;
        left: 10%;
    }

    /* Register Page */
    .register-page,
    .fan-register-page,
    .escort-register-page {
        padding: 20px 10px;
    }

    .register-page-inner-div,
    .fan-register-inner,
    .escort-register-inner {
        padding: 20px 15px;
    }

    .regiter-card-img {
        height: 80px;
        width: 80px;
    }

    .bottom-img {
        height: 60px;
        width: 60px;
    }

    /* Range Slider */
    .range-slider__range {
        width: 100% !important;
    }

    .range-slider__value {
        width: 50px;
        font-size: 12px;
    }

    /* Category Labels */
    .category-label {
        font-size: 12px;
        padding: 6px 12px;
    }
}

/* ============================================
   SUBSCRIPTION/PAYMENT PAGES RESPONSIVE
   ============================================ */

@media (max-width: 767.98px) {
    /* Plan Cards */
    .plan-card {
        margin-bottom: 20px;
    }

    /* Billing Form */
    .billing-card {
        padding: 15px;
    }

    /* Payment Instructions */
    .payment-instructions {
        padding: 15px;
    }

    /* Checkout */
    .checkout-summary {
        margin-bottom: 20px;
    }
}

/* ============================================
   CHAT/MESSAGES RESPONSIVE
   ============================================ */

@media (max-width: 767.98px) {
    /* Chat Layout */
    .msg-left-body {
        height: 300px !important;
    }

    .chat-body {
        height: 300px !important;
    }

    /* User List */
    .user-row-li {
        grid-template-columns: 45px auto 45px;
        padding: 5px !important;
    }

    .user-row-img-wrapper {
        height: 45px;
        width: 45px;
    }

    .user-photo {
        width: 35px;
        height: 35px;
    }

    .user-row-content .username {
        font-size: 11px;
    }

    .user-row-content .description {
        font-size: 10px;
    }

    /* Chat Header */
    .chat-header-li {
        grid-template-columns: 45px auto 35px 35px 35px 20px;
        padding: 5px;
    }

    .chat-header-li-btn {
        font-size: 12px;
    }

    /* Chat Footer */
    .chat-footer-input {
        padding: 0px 45px 0px 80px !important;
        font-size: 14px;
    }

    .chat-footer-btn {
        height: 30px;
        width: 30px;
        font-size: 14px;
    }

    .chat-footer-btn-attach {
        left: 40px;
    }

    .chat-footer-btn-send {
        right: 10px;
    }

    /* Messages */
    .message {
        max-width: 80%;
        padding: 8px;
        font-size: 13px;
    }

    .message .chat-image {
        max-width: 80px;
    }

    /* Incoming Call */
    .incoming-call-box {
        grid-template-columns: 50px auto 110px;
        margin: 0px 10px;
    }

    .incomming-btn {
        height: 40px;
        width: 40px;
        margin: 2px;
    }
}

/* ============================================
   HEADER RESPONSIVE
   ============================================ */

@media (max-width: 767.98px) {
    /* Header Top */
    #header-top {
        padding: 10px !important;
    }

    .login-btn,
    .ads1-btn {
        font-size: 12px !important;
        padding: 8px 12px !important;
    }
}

@media (max-width: 480px) {
    .login-btn,
    .ads1-btn {
        font-size: 11px !important;
        padding: 6px 8px !important;
    }
}

/* ============================================
   ESCORT CARDS RESPONSIVE
   ============================================ */

@media (max-width: 575.98px) {
    .escort-card {
        margin-bottom: 10px;
    }

    .escort-card h6 {
        font-size: 12px;
    }

    .escort-card .image_container {
        height: 150px !important;
    }

    .escort-card .image_footer p {
        font-size: 11px;
        margin: 0;
    }
}

/* ============================================
   VIP SECTION RESPONSIVE
   ============================================ */

@media (max-width: 767.98px) {
    .vip-escort-card {
        margin-bottom: 15px;
    }

    .vip-escort-card .badge {
        font-size: 8px !important;
        padding: 2px 5px;
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Hide on Mobile */
@media (max-width: 767.98px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Show only on Mobile */
@media (min-width: 768px) {
    .show-mobile {
        display: none !important;
    }
}

/* ============================================
   LANDSCAPE ORIENTATION
   ============================================ */

@media (max-width: 767.98px) and (orientation: landscape) {
    .chat-body,
    .msg-left-body {
        height: 250px !important;
    }
}