/* ================================================================
   mobile-responsive.css - Karuda Computers
   Full website mobile responsive fixes
   Included in include/header.php for all pages
   ================================================================ */

/* ── Global Box Sizing ── */
*, *::before, *::after {
    box-sizing: border-box;
}
img {
    max-width: 100%;
    height: auto;
}

/* ================================================================
   NAVBAR / HEADER
   ================================================================ */
@media (max-width: 991px) {
    /* Logo sizing */
    #logo img {
        max-width: 130px !important;
        height: auto !important;
    }

    /* Top menu icons alignment */
    ul#top_menu {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    ul#top_menu li a {
        font-size: 13px;
        padding: 5px 8px;
    }

    /* Hamburger btn visible */
    .btn_mobile {
        display: block !important;
    }

    /* Desktop nav hidden, mobile nav shown */
    nav#menu {
        max-height: 90vh;
        overflow-y: auto;
    }
}

@media (max-width: 767px) {
    /* Full-width search on mobile */
    #myForm,
    #mobileSearchForm {
        width: 100%;
    }

    #myForm .col-lg-8,
    #mobileSearchForm .col-lg-8 {
        width: 100%;
        max-width: 100%;
        flex: 0 0 100%;
    }

    .form-control_search {
        width: 100% !important;
    }

    /* Cart & wishlist count badges */
    #cart_bt_top {
        font-size: 11px;
    }

    /* Top notification bell in admin */
    .top_notification_set {
        font-size: 16px;
    }
}

/* ================================================================
   HOMEPAGE - HERO SLIDER
   ================================================================ */
@media (max-width: 767px) {
    .carousel-item,
    .slideshow-container,
    .owl-carousel .owl-item img {
        height: 220px !important;
        object-fit: cover;
    }

    .carousel-caption h1,
    .slide-title {
        font-size: 20px !important;
    }

    .carousel-caption p,
    .slide-desc {
        font-size: 12px !important;
    }
}

/* ================================================================
   CATEGORY CARDS / PRODUCT CARDS (2 PRODUCTS PER ROW ON MOBILE)
   ================================================================ */
@media (max-width: 767px) {
    /* Main Featured Product Grid: 2 per row */
    .kc-prod-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 30px !important;
    }
    .kc-prod-card {
        padding: 8px 6px 10px !important;
        border-radius: 12px !important;
    }
    .kc-prod-img-box {
        height: 110px !important;
        margin-bottom: 6px !important;
        padding: 6px !important;
    }
    .kc-prod-img-box img {
        max-width: 70% !important;
        max-height: 70% !important;
    }
    .kc-prod-title {
        font-size: 11.5px !important;
        height: 30px !important;
        margin-bottom: 3px !important;
        line-height: 1.25 !important;
    }
    .kc-prod-rating {
        font-size: 9.5px !important;
        margin-bottom: 3px !important;
        gap: 1px !important;
    }
    .kc-prod-price-box {
        margin-bottom: 6px !important;
        gap: 4px !important;
        flex-wrap: wrap !important;
    }
    .kc-price-curr {
        font-size: 13.5px !important;
    }
    .kc-price-old {
        font-size: 10px !important;
    }
    .kc-card-actions {
        display: block !important;
        width: 100% !important;
        margin-top: 4px !important;
    }
    .kc-btn-cart-action {
        width: 100% !important;
        font-size: 10.5px !important;
        padding: 6px 4px !important;
        border-radius: 6px !important;
        letter-spacing: 0 !important;
        gap: 4px !important;
        white-space: nowrap !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* All Products & Related Products Grid Items: 2 per row */
    .kc-prod-grid-item,
    .products_grid .col-6,
    .products_grid [class*="col-"],
    .isotope_container [class*="col-"],
    .search_results [class*="col-"],
    #response_for_the_table [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding-left: 5px !important;
        padding-right: 5px !important;
        margin-bottom: 12px !important;
    }

    .kc-product-card {
        border-radius: 12px !important;
    }
    .kc-prod-img-wrap {
        height: 110px !important;
        padding: 6px !important;
    }
    .kc-prod-img-wrap img {
        max-width: 70% !important;
        max-height: 70% !important;
        object-fit: contain !important;
    }
    .kc-prod-body {
        padding: 8px 6px !important;
    }
    .kc-prod-cat {
        font-size: 9px !important;
        margin-bottom: 2px !important;
    }
    .kc-prod-stars {
        font-size: 9.5px !important;
        margin-bottom: 6px !important;
        gap: 1px !important;
    }
    .kc-curr-price, .uls-price-main {
        font-size: 15px !important;
        font-weight: 900 !important;
        color: #003B95 !important;
        opacity: 1 !important;
    }
    .kc-old-price, .uls-price-strikethrough {
        font-size: 11px !important;
    }
    .kc-prod-btn {
        font-size: 11px !important;
        padding: 6px 4px !important;
        border-radius: 6px !important;
    }
    .kc-prod-wish-btn {
        width: 26px !important;
        height: 26px !important;
        font-size: 11px !important;
        top: 6px !important;
        right: 6px !important;
    }

    .grid_item {
        margin-bottom: 12px;
    }

    /* Product card image height */
    .grid_item figure img,
    .product-img img,
    .item_data img {
        height: 140px !important;
        object-fit: contain;
        width: 100%;
    }

    /* Product card text */
    .grid_item .name,
    h3.product_title {
        font-size: 12px !important;
        line-height: 1.3;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .price_and_quantity .price,
    .price strong {
        font-size: 14px !important;
    }

    /* Add to cart button */
    .btn_add_to_cart,
    a.btn_1 {
        font-size: 11px !important;
        padding: 6px 8px !important;
    }

    /* Category carousel */
    .owl-carousel.categories {
        padding: 0 5px;
    }
}

/* ================================================================
   PRODUCT DETAIL PAGE
   ================================================================ */
@media (max-width: 767px) {
    /* Main product image */
    .prod_img_wrapper,
    .product_details .col-md-6:first-child {
        margin-bottom: 20px;
    }

    /* Product title */
    h1.product_name {
        font-size: 20px !important;
    }

    /* Price section */
    .price_and_options strong {
        font-size: 22px !important;
    }

    /* Tabs section */
    .nav-tabs .nav-link {
        font-size: 12px;
        padding: 6px 10px;
    }

    /* Related products grid */
    .col-md-3.col-6 {
        padding: 5px !important;
    }
}

/* ================================================================
   SHOPPING CART PAGE
   ================================================================ */
@media (max-width: 767px) {
    /* Cart table → card layout on mobile */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table.cart_table th,
    table.cart_table td {
        font-size: 12px;
        padding: 8px 5px;
        white-space: nowrap;
    }

    /* Cart item image */
    table.cart_table img {
        width: 55px !important;
        height: 55px !important;
        object-fit: cover;
    }

    /* Cart total section */
    .cart_total,
    .order_summary {
        margin-top: 20px;
    }

    .cart_total table {
        width: 100%;
    }
}

/* ================================================================
   CHECKOUT PAGE
   ================================================================ */
@media (max-width: 767px) {
    /* Stack order: form then summary */
    #checkout_form .col-md-8,
    #checkout_form .col-md-4 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Payment methods */
    .payment_select label {
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    /* Shipping address form */
    .form-group label {
        font-size: 13px;
    }

    .form-control {
        font-size: 14px;
    }

    /* Place order button */
    #submit-order,
    button.btn_1.full-width {
        width: 100%;
        font-size: 15px;
        padding: 12px;
    }

    /* Order summary box */
    .box_order {
        margin-top: 20px;
        position: static !important;
    }
}

/* ================================================================
   WISHLIST PAGE
   ================================================================ */
@media (max-width: 767px) {
    .wishlist_table .table td,
    .wishlist_table .table th {
        font-size: 12px;
        padding: 8px 5px;
    }

    .wishlist_table img {
        width: 55px !important;
        height: 55px !important;
        object-fit: cover;
    }
}

/* ================================================================
   FOOTER
   ================================================================ */
@media (max-width: 767px) {
    footer .row > div {
        border-bottom: 1px solid rgba(255,255,255,0.1);
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

    footer h3 {
        font-size: 15px;
        margin-bottom: 8px;
    }

    footer .links li,
    footer .contacts li {
        font-size: 13px;
        line-height: 1.8;
    }

    footer #newsletter input[type="email"] {
        width: 100%;
        margin-bottom: 8px;
    }

    footer #newsletter input[type="submit"] {
        width: 100%;
    }

    /* Footer bottom row */
    #footer-selector,
    #additional_links {
        justify-content: center;
        text-align: center;
    }

    footer .col-lg-6 {
        width: 100%;
        text-align: center;
    }

    footer #footer-selector li {
        margin: 5px auto;
    }
}

/* ================================================================
   SIGN-IN / LOGIN / REGISTER PAGES
   ================================================================ */
@media (max-width: 576px) {
    .container_login,
    #custom-login-form {
        padding: 20px 15px;
        margin: 15px;
    }

    .login_title h2 {
        font-size: 22px;
    }

    .login_block .form-control {
        font-size: 14px;
    }

    .social_bt {
        font-size: 13px;
        padding: 10px;
    }
}

/* ================================================================
   SEARCH RESULTS PAGE
   ================================================================ */
@media (max-width: 767px) {
    .search_results .col-md-3,
    .search_results .col-sm-6 {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 5px;
    }

    .search_filters {
        margin-bottom: 15px;
    }

    .search_filters h5 {
        font-size: 14px;
    }
}

/* ================================================================
   ALL CATEGORIES PAGE
   ================================================================ */
@media (max-width: 767px) {
    .isotope_container .col-md-3,
    .products_grid .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
        padding: 5px;
    }

    /* Filter buttons */
    .filter_btn_group button {
        font-size: 12px;
        padding: 5px 10px;
        margin: 3px;
    }
}

/* ================================================================
   MY ORDERS / MY PROFILE PAGES
   ================================================================ */
@media (max-width: 767px) {
    .myorders_table .table {
        font-size: 12px;
    }

    .myorders_table .table td,
    .myorders_table .table th {
        padding: 8px 5px;
    }

    /* Status badges */
    .badge {
        font-size: 10px;
    }

    /* Profile form */
    .profile_form .row > div {
        margin-bottom: 10px;
    }
}

/* ================================================================
   ABOUT / CONTACT / FAQ PAGES
   ================================================================ */
@media (max-width: 767px) {
    .about_section h2,
    .contact_section h2,
    .faq_section h2 {
        font-size: 22px;
    }

    .about_section p,
    .contact_section p,
    .faq_section p {
        font-size: 14px;
    }

    /* Contact form */
    .contact_form .form-group {
        margin-bottom: 12px;
    }

    /* FAQ accordion */
    .accordion-button {
        font-size: 14px;
    }

    .accordion-body {
        font-size: 13px;
    }
}

/* ================================================================
   GENERAL UTILITY RESPONSIVE
   ================================================================ */
@media (max-width: 767px) {
    /* Prevent horizontal scroll */
    body {
        overflow-x: hidden;
    }

    /* Generic container padding */
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Section margins */
    .margin_60_35 {
        margin-top: 30px !important;
        margin-bottom: 20px !important;
    }

    /* Generic section padding */
    section {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    /* Breadcrumb */
    .breadcrumb {
        font-size: 12px;
        flex-wrap: wrap;
    }

    /* Pagination */
    .pagination .page-link {
        font-size: 12px;
        padding: 5px 9px;
    }

    /* Toastr notifications */
    .toast-bottom-right {
        bottom: 12px !important;
        right: 12px !important;
        max-width: calc(100vw - 24px) !important;
    }

    /* Hide decorative separators on mobile */
    .sep_line {
        display: none;
    }

    /* Sticky elements on mobile */
    .sticky_price,
    .box_order_sticky {
        position: static !important;
        top: auto !important;
    }
}

/* ================================================================
   SMALL PHONE (< 400px)
   ================================================================ */
@media (max-width: 400px) {
    #logo img {
        max-width: 110px !important;
    }

    ul#top_menu li a {
        font-size: 11px;
        padding: 4px 5px;
    }

    .grid_item figure img {
        height: 120px !important;
    }

    h1.product_name {
        font-size: 17px !important;
    }

    table.cart_table th,
    table.cart_table td {
        font-size: 11px;
        padding: 6px 3px;
    }
}