/* ==========================================
   Maa Bhagwati Temple Responsive Styles
   ========================================== */

/* Global overflow safety */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* Large desktops / laptops */
@media (min-width: 1200px) {
    .header__bottom .container {
        max-width: 1170px;
    }
}

/* Medium devices (tablets, less than 1200px) */
@media (max-width: 1199px) {
    .header__top .right {
        text-align: center;
        margin-top: 5px;
    }
    .header__top .right a {
        margin: 5px 10px;
        font-size: 13px;
    }
    .navbar-collapse {
        background-color: #ffffff;
        padding: 15px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        border-radius: 4px;
        max-height: 400px;
        overflow-y: auto;
        margin-top: 10px;
    }
    .header .main-menu li a {
        color: #333333;
        border-bottom: 1px solid #f1f1f1;
        padding: 10px 15px;
    }
    .header .main-menu li.menu_has_children > a::before {
        color: #333333;
        right: 15px;
        top: 12px;
    }
    .header .main-menu li .sub-menu {
        border-top: none;
        background-color: #f9f9f9;
        box-shadow: none;
        padding-left: 15px;
    }
    .header .main-menu li .sub-menu li a {
        color: #555555;
        border-bottom: 1px solid #eee;
    }
    .header .main-menu li .sub-menu li a:hover {
        color: #d4600b;
        background: transparent;
    }
    .header .nav-right {
        margin-top: 15px;
        text-align: center;
    }
    .header .nav-right .cmn-btn {
        display: inline-block;
        width: 100%;
        text-align: center;
    }
    
    /* Stats grid tablet view */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .stat {
        border-right: 1px solid #e6e1da !important;
        border-bottom: 1px solid #e6e1da !important;
    }
    .stat:nth-child(2n) {
        border-right: none !important;
    }
    .stat:nth-last-child(-n+2) {
        border-bottom: none !important;
    }

    /* Sticky event title on tablet */
    .event-area div[style*="position: sticky"] {
        position: relative !important;
        top: 0 !important;
        margin-bottom: 30px;
        text-align: center;
    }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767px) {
    .hero {
        min-height: 60vh !important;
    }
    .hero-content h1 {
        font-size: 28px !important;
    }
    .hero-content h2 {
        font-size: 18px !important;
    }
    .hero-actions {
        gap: 10px;
    }
    .hero-actions a {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
    .play-btn span {
        width: 60px;
        height: 60px;
        font-size: 30px;
    }
    
    /* Typography overrides */
    .big {
        font-size: 32px !important;
        line-height: 42px !important;
    }
    h1 {
        font-size: 36px !important;
    }
    
    /* Footer widget alignments */
    .footer-widget {
        text-align: center;
    }
    .footer-widget__title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .social-links {
        justify-content: center;
    }
    .company-info-list li {
        justify-content: center;
    }
    .footer-bottom .link-list {
        justify-content: center !important;
    }
    
    /* Modal content */
    .ft-modal-content {
        width: 90% !important;
        margin: 40px auto !important;
        padding: 15px !important;
    }
    
    /* Donation Cart Bar */
    #flip1 {
        padding: 8px 0 !important;
    }
    .form-bottom {
        font-size: 13px !important;
    }
    .form-bottom .cmn-btn {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }
    .shop_tigger {
        font-size: 1.2em !important;
    }
    #panel1 {
        max-height: 200px;
        overflow-y: auto;
    }
    
    /* Contact Form Layout */
    .contact-form-area .contact-forms {
        padding-right: 0 !important;
        border-right: none !important;
        margin-bottom: 40px;
    }
    .contact-form-area .address-info {
        padding-left: 0 !important;
    }

    /* Gallery collapse on mobile */
    .gallery-area .gallery-items .pf-item {
        width: 100% !important;
    }
    .colums-3 .pf-item {
        width: 100% !important;
    }
    .colums-2 .pf-item {
        width: 100% !important;
    }

    /* Timer negative margin fix */
    .help-sourse.text-center .fun-fact .timer {
        margin-left: 0 !important;
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
    .header__top {
        display: block !important;
    }
    .header__top .left {
        justify-content: center !important;
        flex-wrap: wrap;
    }
    .header__top .left a {
        margin-bottom: 5px;
    }
    .header__top .left .language {
        margin-left: 15px !important;
    }
    .header__top .right {
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 5px;
        margin-top: 5px;
    }
    
    /* Stats Grid mobile view */
    .stats-grid {
        grid-template-columns: 1fr !important;
    }
    .stat {
        border-right: none !important;
        border-bottom: 1px solid #e6e1da !important;
        padding: 20px 15px !important;
    }
    .stat:last-child {
        border-bottom: none !important;
    }
    .stat-number {
        font-size: 32px !important;
    }
    
    /* Event cards stacking */
    .event-item-card {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 15px !important;
    }
    .event-date-badge {
        margin-right: 0 !important;
        margin-bottom: 15px !important;
        width: 100% !important;
    }
    .event-info {
        width: 100%;
    }
    .event-thumb {
        margin-left: 0 !important;
        margin-top: 15px !important;
        width: 100% !important;
        height: 140px !important;
    }
    
    /* WhatsApp Chat Popup responsive */
    .chat-popup {
        right: 10px !important;
        bottom: 10px !important;
        left: 10px !important;
    }
    .form-container {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* CTA Banner image */
    .section.pt-40.pb-40 img {
        height: auto;
        max-height: 180px;
        object-fit: cover;
    }
    
    /* Inner page hero styling */
    .inner-page-hero {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    /* Typography overrides for phones */
    .big {
        font-size: 24px !important;
        line-height: 32px !important;
    }
    h1 {
        font-size: 26px !important;
    }
}

/* Very small devices (phones less than 375px) */
@media (max-width: 375px) {
    .subscribe-form {
        flex-direction: column;
    }
    .subscribe-form input {
        width: 100% !important;
        border-bottom: 1px solid #ccc !important;
        padding: 10px !important;
    }
    .subscribe-form button {
        width: 100% !important;
        margin-top: 5px;
        height: 45px !important;
        border: none !important;
    }
}

/* Donation page amount buttons overflow fix */
@media (max-width: 480px) {
    .amount-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .amount-grid button, .amount-grid div {
        min-width: 0 !important;
        width: 100% !important;
    }
}