/* ========================================
   HOMEPAGE SPECIFIC RESPONSIVE STYLES
   ======================================== */

/* GLOBAL: Remove border-top from header elements */
.container-fluid {
    border-top: none !important;
}

.waisaka-top-bar {
    border-top: none !important;
}

/* MOBILE: Make decorative branch and leaf SVG visible on top but shifted to corners */
@media (max-width: 767px) {
    section.donation-join svg {
        z-index: 9999 !important;
        pointer-events: none !important;
    }

    /* Shift right branch slightly to the right */
    section.donation-join svg:first-of-type {
        right: 3% !important;
        margin-right: -10px !important;
    }

    /* Shift left branch slightly to the left */
    section.donation-join svg:last-of-type {
        left: 3% !important;
        margin-left: -10px !important;
    }
}

/* CRITICAL MOBILE OVERRIDES - Must be at top to override waisaka-custom.css */
@media (max-width: 767px) {

    /* Fix body overflow */
    html,
    body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* HEADER: Make entire header full-width BLACK BOX */
    header,
    header.header-style-3,
    .waisaka-header-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        background-color: #000000 !important;
        border-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    /* Remove all decorative effects from header */
    .waisaka-header-container::before,
    .waisaka-header-container::after {
        display: none !important;
    }

    /* Make container-fluid full width with black background */
    header .container-fluid,
    .waisaka-header-container .container-fluid {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        background-color: #000000 !important;
        border-top: none !important;
    }

    /* Top bar full width black */
    .waisaka-top-bar {
        width: 100% !important;
        max-width: 100% !important;
        background-color: #000000 !important;
        padding: 10px 15px !important;
        margin: 0 !important;
        border-top: none !important;
    }

    /* Remove decorative box/glow from playstore badge */
    .playstore-badge {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 5px 10px !important;
    }

    /* Ensure social icons are visible on black background */
    .header-social a {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
    }

    /* ULTRA-SPECIFIC: Override waisaka-custom.css line 905 border-radius: 20px !important */
    section.donation-join .container .row .col-sm-12>div,
    .donation-join .container .row .col-sm-12>div,
    section.donation-join.wf100 .container .row .col-sm-12>div {
        -webkit-border-radius: 0 !important;
        -moz-border-radius: 0 !important;
        border-radius: 0 !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* Search Container Responsive Width */
.search-container-responsive {
    width: 75%;
    margin: 0 auto;
}

@media (max-width: 767px) {
    .search-container-responsive {
        width: 100% !important;
        padding: 0 10px;
    }

    /* Force search container div to full width on mobile */
    section.donation-join .container .row .col-sm-12 .col-lg-12>div[style*="width:75%"],
    section.donation-join .container .row .col-sm-12>div,
    section.donation-join .container .row>div>div {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 15px !important;
        border-radius: 0 !important;
    }

    /* Remove border-radius from search section on mobile - FORCE RECTANGULAR */
    section.donation-join,
    section.donation-join.wf100,
    .donation-join {
        border-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Make search section full width */
    section.donation-join .container,
    .donation-join .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* BUT allow search-main-container to have negative margin for overlap effect */
    section.donation-join .container.search-main-container,
    .donation-join .container.search-main-container,
    .search-main-container {
        margin-top: -120px !important;
        /* Lowered from -280px for bottom alignment */
        padding: 15px !important;
    }



    /* Remove padding from search form container */
    section.donation-join .p-2 {
        padding: 1rem !important;
    }

    /* Ensure buttons are properly sized */
    section.donation-join .btn-group {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    section.donation-join .btn-home {
        flex: 1;
        margin: 0 2px;
    }

    /* Force header to be full width rectangular */
    header,
    .waisaka-header-container,
    header.waisaka-header-container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        border-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }

    /* Force top bar full width */
    .waisaka-top-bar {
        max-width: 100% !important;
        width: 100% !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .search-container-responsive {
        width: 85%;
    }
}

@media (min-width: 1441px) {
    .search-container-responsive {
        width: 70%;
    }
}

/* Property Card Grid Responsive */
@media (max-width: 767px) {

    /* Single column on mobile */
    .about .row>[class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {

    /* 2 columns on tablet */
    .about .row>.col-md-4,
    .about .row>.col-lg-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

@media (min-width: 992px) {

    /* 3 columns on desktop */
    .about .row>.col-lg-4 {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
}

/* Blog Section Responsive */
@media (max-width: 767px) {

    .h2-news .col-md-4,
    .h2-news .col-sm-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .h2-news .col-md-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* Service Cards Responsive */
@media (max-width: 767px) {
    section.about .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .katalog-layanan {
        min-height: 0 !important;
        margin-bottom: 30px;
    }

    .katalog-layanan img {
        height: 220px !important;
    }
}

/* ========================================
   MOBILE FILTER COLLAPSE FIX
   Ensure filter is collapsed by default on mobile
   ======================================== */
@media (max-width: 767px) {
    /* Ensure filter section is collapsed by default on mobile */
    #collapseExample:not(.show) {
        display: none !important;
    }
    
    /* Override Bootstrap collapse animation on mobile */
    #collapseExample.collapsing {
        height: auto !important;
        transition: none !important;
    }
    
    /* When filter is shown, limit height and add scroll */
    #collapseExample.show {
        display: block !important;
        max-height: 70vh;
        overflow-y: auto;
    }
    
    /* Make filter card body more compact on mobile */
    .filter-collapse-card {
        padding: 10px !important;
    }
    
    /* Adjust filter button styling on mobile */
    .donation-join button[data-toggle="collapse"],
    .donation-join button[data-bs-toggle="collapse"] {
        font-size: 0.9rem;
        padding: 8px 12px;
    }
}