/* ==================================================
   GLOBAL NO-GAP FIXES
   ================================================== */

/* Remove all edge gaps */
html {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
    width: 100%;
}

/* Ensure main content has no gaps */
main {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Full-width sections */
section {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

/* Hero sections edge-to-edge */
.page-hero,
.hero-slider,
.swiper-container {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Container adjustments */
.container {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
}

@media (max-width: 575.98px) {
    .container {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* ==================================================
   PAGE-SPECIFIC RESPONSIVE STYLES
   ================================================== */

/* News Page Responsive Styles */
@media (max-width: 900px) {
    .news-layout {
        grid-template-columns: 1fr !important;
    }

    .page-hero {
        padding: 80px 0 60px;
    }

    .page-hero h1 {
        font-size: 2.5rem !important;
    }
}

@media (max-width: 575.98px) {
    .news-layout {
        grid-template-columns: 1fr !important;
    }

    .page-hero {
        padding: 60px 0 40px !important;
    }

    .page-hero h1 {
        font-size: 2rem !important;
    }

    .page-hero p {
        font-size: 1rem !important;
    }

    .news-image,
    div[style*="height: 350px"] {
        height: 200px !important;
    }

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

    .news-card:hover {
        transform: none !important;
    }

    .sidebar {
        margin-top: 30px;
    }
}

/* Dashboard Responsive Styles */
@media (max-width: 768px) {
    .dashboard-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 15px;
    }

    .stats-grid {
        grid-template-columns: 1fr !important;
    }

    .booking-card {
        padding: 20px 15px;
    }

    .card-header {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .card-header h3 {
        font-size: 1.4rem !important;
    }

    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 600px;
    }
}

/* Booking Success Responsive Styles */
@media (max-width: 768px) {
    .success-container {
        padding: 20px 10px !important;
    }

    .status-banner {
        padding: 30px 20px !important;
        border-radius: 15px !important;
    }

    .status-banner h1 {
        font-size: 1.6rem !important;
    }

    .status-icon {
        width: 80px !important;
        height: 80px !important;
    }

    .status-icon i {
        font-size: 40px !important;
    }

    .ticket-container {
        border-radius: 15px !important;
    }

    .ticket-header {
        padding: 25px 20px !important;
    }

    .ticket-header h2 {
        font-size: 1.5rem !important;
    }

    .ticket-body {
        grid-template-columns: 1fr !important;
        padding: 25px 20px !important;
        gap: 20px !important;
    }

    .qr-section {
        order: -1;
        margin-bottom: 20px !important;
    }

    .detail-group {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .detail-item {
        min-width: 100% !important;
    }

    .detail-value {
        font-size: 1rem !important;
    }

    .detail-value.highlight {
        font-size: 1.2rem !important;
    }

    .ticket-footer {
        padding: 20px 15px !important;
    }

    .action-buttons {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .action-btn {
        width: 100% !important;
        justify-content: center !important;
        padding: 14px 24px !important;
        font-size: 0.95rem !important;
    }
}

/* About Page Responsive Styles */
@media (max-width: 575.98px) {
    .section-title {
        margin-bottom: 30px !important;
    }

    .section-title h2 {
        font-size: 1.8rem !important;
    }

    .section-title p {
        font-size: 0.95rem !important;
    }

    .card[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }

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

/* Contact Page Additional Responsive Styles */
@media (max-width: 768px) {
    .contact-section {
        padding: 60px 0 !important;
    }

    .contact-container {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .contact-form-box {
        padding: 35px 25px !important;
    }

    .section-title h2 {
        font-size: 2rem !important;
    }
}

/* Turf Booking Page Responsive */
@media (max-width: 575.98px) {
    .booking-container {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .calendar-section,
    .slots-section {
        margin-bottom: 20px;
    }

    .calendar-grid {
        gap: 3px !important;
    }

    .slot-table {
        font-size: 0.85rem;
    }

    .slot-table th,
    .slot-table td {
        padding: 10px 8px;
    }
}

/* Tablet Enhancements for Specific Pages */
@media (min-width: 576px) and (max-width: 991.98px) {

    /* News - Tablet */
    .news-layout {
        grid-template-columns: 1fr !important;
    }

    .sidebar {
        margin-top: 40px;
    }

    /* Dashboard - Tablet */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .dashboard-header {
        flex-wrap: wrap;
    }

    /* Booking Success - Tablet */
    .ticket-body {
        grid-template-columns: 1fr 250px !important;
        gap: 25px !important;
    }

    .status-banner h1 {
        font-size: 2rem !important;
    }

    .action-buttons {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Page Hero - Tablet */
    .page-hero {
        padding: 90px 0 70px !important;
    }

    .page-hero h1 {
        font-size: 2.8rem !important;
    }

    /* Booking Grid - Tablet */
    .booking-container {
        grid-template-columns: 1fr 1fr;
    }
}

/* Desktop (large screens) optimizations */
@media (min-width: 992px) {

    /* News layout - Desktop */
    .news-layout {
        grid-template-columns: 2fr 1fr;
    }

    /* Dashboard - Desktop */
    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Booking Success - Desktop */
    .success-container {
        max-width: 1000px;
    }

    .ticket-body {
        grid-template-columns: 1fr auto;
    }

    /* Full-width option for specific pages */
    .page-wrapper-full {
        max-width: 100% !important;
    }
}

/* Utility classes for responsive design */
.hide-mobile {
    display: block;
}

.show-mobile {
    display: none;
}

@media (max-width: 575.98px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    /* Text utilities for mobile */
    .text-center-mobile {
        text-align: center !important;
    }

    .text-left-mobile {
        text-align: left !important;
    }

    /* Width utilities */
    .w-100-mobile {
        width: 100% !important;
    }

    /* Spacing utilities */
    .p-small-mobile {
        padding: 15px !important;
    }

    .m-small-mobile {
        margin: 10px !important;
    }

    /* Flex utilities */
    .flex-column-mobile {
        flex-direction: column !important;
    }
}

/* Admin Panel Responsive (if needed) */
@media (max-width: 768px) {
    .admin-sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        height: 100vh;
        transition: all 0.3s ease;
        z-index: 1000;
    }

    .admin-sidebar.active {
        left: 0;
    }

    .admin-content {
        margin-left: 0 !important;
    }

    .admin-toggle {
        display: block !important;
    }
}