/* Responsive Fix for Travel Tours Plugin
 * This file ensures proper responsive behavior across all screen sizes
 */

/* Ensure proper box-sizing for all elements */
.tt-tour-container,
.tt-tour-content,
.tt-tour-sidebar,
.tt-tour-section,
.tt-tour-info-grid,
.tt-tour-description,
.tt-route-map,
.tt-tour-overview-content,
.tt-highlights-list,
.tt-includes-grid {
    box-sizing: border-box;
}

/* Main container responsive fix */
.tt-tour-container {
    width: var(--tt-tour-page-width, 90%);
    max-width: var(--tt-max-width, 1400px);
    margin: 40px auto;
    padding-left: var(--tt-gutter, 20px);
    padding-right: var(--tt-gutter, 20px);
    box-sizing: border-box;
}

/* Desktop Large Screens */
@media (min-width: 1200px) {
    .tt-tour-container {
        width: 90%;
        max-width: 1400px;
        margin: 40px auto;
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Desktop Medium Screens */
@media (min-width: 1024px) and (max-width: 1199px) {
    .tt-tour-container {
        width: 95%;
        max-width: 1200px;
        margin: 30px auto;
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Tablet Landscape */
@media (min-width: 768px) and (max-width: 1023px) {
    .tt-tour-container {
        width: 95%;
        max-width: 100%;
        margin: 25px auto;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Stack sidebar on top for tablets */
    .tt-tour-container {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    
    .tt-tour-sidebar {
        width: 100%;
        position: sticky; /* Keep sticky on tablets */
        order: -1;
        top: 20px;
    }
}

/* Tablet Portrait and Mobile Landscape */
@media (min-width: 481px) and (max-width: 767px) {
    .tt-tour-container {
        width: 100%;
        max-width: 100%;
        margin: 20px auto;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Stack sidebar on top for tablets */
    .tt-tour-container {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    
    .tt-tour-sidebar {
        width: 100%;
        position: sticky; /* Keep sticky on tablets */
        order: -1;
        top: 20px;
    }
    
    /* Adjust grid layouts for better mobile experience */
    .tt-tour-info-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .tt-includes-grid {
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

/* Mobile Portrait */
@media (max-width: 480px) {
    .tt-tour-container {
        width: 100%;
        max-width: 100%;
        margin: 15px auto;
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* Stack sidebar on top for mobile */
    .tt-tour-container {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .tt-tour-sidebar {
        width: 100%;
        position: sticky; /* Keep sticky on mobile */
        order: -1;
        top: 15px;
    }
    
    /* Stack all grid layouts for mobile */
    .tt-tour-info-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .tt-includes-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    /* Adjust font sizes for better readability */
    body.single-tour {
        font-size: 14px;
    }
    
    .tour-title {
        font-size: 24px;
    }
    
    .tt-section-title {
        font-size: 1.3rem;
    }
    
    .tt-price-amount {
        font-size: 24px;
    }
}

/* Ensure content doesn't overflow on any screen size */
.tt-tour-content,
.tt-tour-description,
.tt-tour-overview-content {
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

/* Fix for images to be responsive */
.tt-featured-image img,
.tt-tour-image img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Ensure buttons are properly sized on mobile */
.tt-book-now,
.tt-book-button {
    width: fit-content !important;
    padding: 12px !important;
    font-size: 16px;
    text-align: center;
    background: #00a884 !important; /* Sea pickle green */
    margin: 12px auto !important;
    display: block !important;
}

/* Fix for meta information on mobile */
.tour-meta-wrapper {
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: flex-start;
    text-align: left;
}

.travel-flexibly,
.tour-rating,
.tour-meta-item,
.tour-category-badge {
    flex-basis: auto;
    max-width: 100%;
    color: #00a884; /* Sea pickle green */
}

.tour-meta-item i,
.travel-flexibly i,
.tour-category-badge i {
    color: #00a884; /* Sea pickle green */
}

/* Ensure proper alignment for all elements */
.tt-tour-section,
.tt-tour-info-section,
.tt-tour-overview-section,
.tt-tour-highlights,
.tt-tour-itinerary,
.tt-tour-includes {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Improve readability of tour content */
.tt-tour-description,
.tt-tour-overview-content,
.tt-tour-info-content p {
    color: #333;
    font-size: 16px;
    line-height: 1.8;
}

/* Fix for tour grid responsiveness */
.tt-tour-grid {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.tt-tour-grid.tt-columns-1 {
    grid-template-columns: 1fr;
}

.tt-tour-grid.tt-columns-2 {
    grid-template-columns: repeat(2, 1fr);
}

.tt-tour-grid.tt-columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

.tt-tour-grid.tt-columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Adjust tour grid for different screen sizes */
@media (max-width: 1024px) {
    .tt-tour-grid.tt-columns-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .tt-tour-grid.tt-columns-3,
    .tt-tour-grid.tt-columns-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .tt-tour-grid {
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .tt-tour-grid.tt-columns-2,
    .tt-tour-grid.tt-columns-3,
    .tt-tour-grid.tt-columns-4 {
        grid-template-columns: 1fr;
    }
    
    .tt-tour-grid {
        gap: 1rem;
    }
}

/* Fix for centering on all devices */
body.single-tour {
    text-align: left;
}

.tt-tour-content,
.tt-tour-sidebar {
    text-align: left;
}

/* Ensure proper padding and margins on all devices */
.tt-tour-section,
.tt-tour-info-section,
.tt-tour-overview-section,
.tt-tour-highlights,
.tt-tour-itinerary {
    padding: 24px 0;
    margin: 0;
}

/* Fix for horizontal scrolling issues */
html, body {
    overflow-x: hidden;
    width: 100%;
}