/**



 * Vactours Tours Styles - Updated for Full Itinerary Popup



 * File: wp-content/themes/your-theme/assets/css/vactours.css



 */







/* CSS Variables for easy customization */



:root {

    /* Updated to match Vactours color scheme */

    --vactours-primary: var(--primary-color, #247ba0);      /* Ocean Blue */

    --vactours-secondary: var(--accent-color, #ffc107);     /* Golden Yellow */

    --vactours-heading: var(--heading-color, #0e80bf);      /* Blue for headings */

    --vactours-dark: var(--text-primary, #333333);          /* Dark text */

    --vactours-light: var(--background-light, #f8f9fa);     /* Light background */

    --vactours-white: var(--background-white, #ffffff);     /* White background */

    --vactours-gray: var(--text-secondary, #666666);        /* Medium gray text */

    --vactours-border: var(--border-light, #e7e7e7);        /* Light borders */

    --vactours-shadow: 0 4px 15px rgba(0,0,0,0.1);

    --vactours-shadow-hover: 0 8px 25px rgba(0,0,0,0.15);

    --vactours-border-radius: 12px;

    --vactours-transition: all 0.3s ease;

}







/* Main Section */



.vactours-tours-section {



    padding: 40px 20px;



    max-width: 1200px;



    margin: 0 auto;



    position: relative;



}







.vactours-section-title {



    display: none !important;



}







/* Grid Layout */



.vactours-grid {



    display: grid;



    grid-template-columns: repeat(3, 1fr);



    gap: 20px;



    margin-bottom: 30px;



}







/* Tour Cards */



.vactours-card {



    background: var(--vactours-white);



    border-radius: var(--vactours-border-radius);



    overflow: hidden;



    box-shadow: var(--vactours-shadow);



    transition: var(--vactours-transition);



    position: relative;



    opacity: 1;



    transform: translateY(0);



}







.vactours-card:hover {



    transform: translateY(-8px);



    box-shadow: var(--vactours-shadow-hover);



}







.vactours-card.vactours-hidden {



    display: none;



}







/* Card Image */



.vactours-card-image {



    position: relative;



    height: 197px;



    overflow: hidden;



    background: var(--vactours-light);



}







.vactours-card-image img {



    width: 100%;



    height: 100%;



    object-fit: fill !important;



    object-position: center !important;



    transition: transform 0.4s ease;



}







.vactours-card:hover .vactours-card-image img {



    transform: scale(1.05);



}







.vactours-placeholder-image {



    width: 100%;



    height: 100%;



    display: flex;



    align-items: center;



    justify-content: center;



    background: linear-gradient(135deg, var(--vactours-light) 0%, #bdc3c7 100%);



    font-size: 3rem;



    color: var(--vactours-gray);



}







/* Price Badge */



.vactours-price-badge {

    position: absolute;

    top: 12px;

    right: 12px;

    background: var(--vactours-primary);

    color: var(--vactours-white);

    padding: 5px 12px;

    border-radius: 15px;

    font-weight: 600;

    font-size: 12px;

    box-shadow: 0 2px 8px rgba(36, 123, 160, 0.25);

    z-index: 2;

    transition: var(--vactours-transition);

}



.vactours-card:hover .vactours-price-badge {

    box-shadow: 0 4px 12px rgba(36, 123, 160, 0.35);

    transform: translateY(-1px);

}







/* Rating */



.vactours-rating {

    position: absolute;

    bottom: 9px;

    left: 15px;

    background: rgba(255, 255, 255, 0.95);

    color: var(--vactours-dark);

    border: 1px solid rgba(36, 123, 160, 0.2);

    padding: 5px 12px;

    border-radius: 15px;

    font-size: 12px;

    font-weight: bold;

    backdrop-filter: blur(10px);

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    z-index: 2;

}







.vactours-stars {



    color: var(--vactours-secondary);



    margin-right: 5px;



}







/* Card Content */



.vactours-card-content {



    padding: 18px;



}







.vactours-card-title {



    font-size: 1.25rem;



    font-weight: 700 !important;



    margin-bottom: 5px;



    color: var(--vactours-dark);



    line-height: 1.2;



    display: -webkit-box;



    -webkit-line-clamp: 2;



    -webkit-box-orient: vertical;



    overflow: hidden;



}







.vactours-card-subtitle {



    color: var(--vactours-gray);



    margin-bottom: 13px;



    line-height: 1.3;



    font-size: 0.95rem;



    display: -webkit-box;



    -webkit-line-clamp: 2;



    -webkit-box-orient: vertical;



    overflow: hidden;



}







/* Tour Info */



.vactours-tour-info {



    display: grid;



    grid-template-columns: 1fr 1fr;



    gap: 9px;



    margin-bottom: 13px;



}







.vactours-info-item {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 14px !important;

    color: var(--vactours-dark);

    background: rgba(36, 123, 160, 0.1);

    padding: 6px 12px;

    border-radius: 20px;

    transition: var(--vactours-transition);

}







.vactours-info-item:hover {

    background: rgba(36, 123, 160, 0.2);

}







.vactours-icon {



    font-size: 16px;



}







/* Destinations */



.vactours-destinations {



    margin-bottom: 13px;



}







.vactours-destinations strong {



    display: block;



    margin-bottom: 10px;



    color: var(--vactours-dark);



    font-size: 0.9rem;



}







.vactours-destination-tags {



    display: flex;



    flex-wrap: wrap;



    gap: 8px;



}







.vactours-tag {



    background: var(--vactours-light);



    color: var(--vactours-dark);



    padding: 6px 12px;



    border-radius: 15px;



    font-size: 14px;



    font-weight: 500;



    transition: var(--vactours-transition);



    border: 1px solid transparent;



}







.vactours-tag:hover {



    background: var(--vactours-primary);



    color: var(--vactours-white);



    border-color: var(--vactours-primary);



}







/* Buttons */



.vactours-btn {



    padding: 12px 24px;



    border: none;



    border-radius: 6px;



    font-weight: 600;



    cursor: pointer;



    transition: var(--vactours-transition);



    text-decoration: none;



    display: inline-block;



    text-align: center;



    font-size: 14px;



    position: relative;



    overflow: hidden;



}







.vactours-btn::before {



    content: '';



    position: absolute;



    top: 0;



    left: -100%;



    width: 100%;



    height: 100%;



    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);



    transition: left 0.5s;



}







.vactours-btn:hover::before {



    left: 100%;



}







.vactours-btn-primary {

    background: transparent;

    border: 2px solid var(--vactours-primary);

    color: var(--vactours-primary);

    width: 100%;

    font-weight: 700;

    transition: var(--vactours-transition);

}







.vactours-btn-primary:hover {

    background: var(--vactours-primary);

    color: var(--vactours-white);

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(36, 123, 160, 0.4);

}







.vactours-btn-secondary {

    background: transparent;

    color: var(--vactours-primary);

    border: 2px solid var(--vactours-primary);

    padding: 12px 25px;

    font-size: 14px;

    font-weight: 600;

    border-radius: 6px;

}







.vactours-btn-secondary:hover {

    background: var(--vactours-primary);

    color: var(--vactours-white);

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(36, 123, 160, 0.3);

}







/* Load More */



.vactours-load-more-container {



    text-align: center;



    margin-top: 30px;



}







/* Updated Popup Styles */



.vactours-popup-overlay {



    display: none;



    position: fixed;



    top: 0;



    left: 0;



    width: 100%;



    height: 100%;



    background: rgba(0,0,0,0.8);



    z-index: 99999;



    align-items: center;



    justify-content: center;



    backdrop-filter: blur(5px);



    opacity: 0;



    transition: opacity 0.3s ease;



}







.vactours-popup-overlay.show {



    opacity: 1;



}







.vactours-popup-content {



    background: var(--vactours-white);



    border-radius: var(--vactours-border-radius);



    max-width: 800px; /* Increased width for itinerary */



    width: 90%;



    max-height: 90vh;



    overflow-y: auto;



    position: relative;



    transform: scale(0.9);



    transition: transform 0.3s ease;



}







.vactours-popup-overlay.show .vactours-popup-content {



    transform: scale(1);



}







.vactours-popup-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 25px;

    border-bottom: 1px solid var(--vactours-light);

    background: linear-gradient(135deg, var(--vactours-primary) 0%, var(--vactours-heading) 100%);

    color: var(--vactours-white);

    position: sticky;

    top: 0;

    z-index: 10;

}







.vactours-popup-header h3 {



    margin: 0;



    font-size: 1.3rem;



    font-weight: 600;



    color: #ffffff !important;



}







.vactours-popup-close {



    background: none;



    border: none;



    font-size: 24px;



    cursor: pointer;



    color: var(--vactours-white);



    padding: 5px;



    border-radius: 50%;



    transition: var(--vactours-transition);



    width: 35px;



    height: 35px;



    display: flex;



    align-items: center;



    justify-content: center;



}







.vactours-popup-close:hover {



    background: rgba(255,255,255,0.2);







}







.vactours-popup-body {

    padding: 25px;

    color: var(--vactours-dark);

    font-size: 16px;

    font-weight: 500;

    line-height: 1.6;

}







/* New Popup Section Styles */



.vactours-popup-section {



    margin-bottom: 30px;



}







.vactours-popup-section-title {



    color: var(--vactours-dark);



    font-size: 1.2rem;



    font-weight: 600;



    margin-bottom: 15px;



    padding-bottom: 8px;



    border-bottom: 2px solid var(--vactours-primary);



    display: flex;



    align-items: center;



    gap: 10px;



}







.vactours-popup-description {



    margin-bottom: 25px;



    line-height: 1.6;



    color: #555;



}







/* Tour Overview Styles */



.vactours-popup-overview .vactours-tour-highlights {



    display: grid;



    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));



    gap: 15px;



    margin-top: 15px;



}







.vactours-highlight-item {

    background: var(--vactours-light);

    padding: 12px 15px;

    border-radius: 8px;

    border-left: 4px solid var(--vactours-primary);

    font-size: 16px;

    color: var(--vactours-dark);

    display: flex;

    align-items: center;

    gap: 10px;

}







/* Itinerary Styles */



.vactours-itinerary-day {



    background: #fefefe;



    border: 1px solid #e9ecef;



    border-radius: 10px;



    margin-bottom: 20px;



    overflow: hidden;



    box-shadow: 0 2px 8px rgba(0,0,0,0.05);



}







.vactours-day-header {

    background: linear-gradient(135deg, var(--vactours-light) 0%, #e9ecef 100%);

    padding: 15px 20px;

    border-bottom: 1px solid var(--vactours-border);

    display: flex;

    align-items: center;

    gap: 12px;

}







.vactours-day-number {



    background: var(--vactours-primary);



    color: white;



    width: 35px;



    height: 35px;



    border-radius: 50%;



    display: flex;



    align-items: center;



    justify-content: center;



    font-weight: bold;



    font-size: 14px;

    min-width: 90px !important;



}







.vactours-day-title {



    font-weight: 600;



    font-size: 1.1rem;



    color: var(--vactours-dark);



    margin: 0;



}







.vactours-day-activities {



    padding: 20px;



}







.vactours-activity-item {



    display: flex;



    align-items: flex-start;



    gap: 12px;



    margin-bottom: 12px;



    padding: 10px 0;



    border-bottom: 1px solid #f1f3f4;



}







.vactours-activity-item:last-child {



    border-bottom: none;



    margin-bottom: 0;



}







.vactours-activity-bullet {



    background: var(--vactours-secondary);



    width: 8px;



    height: 8px;



    border-radius: 50%;



    margin-top: 6px;



    flex-shrink: 0;



}







.vactours-activity-text {



    color: #555;



    line-height: 1.5;



    font-size: 14px;



}







/* Testimonial Styles */



.vactours-popup-testimonial {



    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);



    padding: 20px;



    border-radius: 10px;



    text-align: center;



    margin: 25px 0;



    border: 1px solid #ffcc02;



}







.vactours-popup-testimonial .vactours-stars {



    font-size: 1.2rem;



    color: var(--vactours-secondary);



    margin-bottom: 15px;



    display: block;



}







.vactours-testimonial-text {



    font-style: italic;



    margin-bottom: 15px;



    color: #444;



    line-height: 1.6;



    font-size: 16px !important;



}







.vactours-testimonial-author {



    font-weight: 600;



    color: var(--vactours-dark);



}







/* CTA Section */



.vactours-popup-cta {



    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);



    padding: 20px;



    border-radius: 10px;



    text-align: center;



    border: 1px solid var(--vactours-primary);



}







.vactours-popup-cta h4 {



    color: var(--vactours-dark);



    margin-bottom: 10px;



    font-size: 1.1rem;



}







.vactours-popup-cta p {



    color: #555;



    margin: 0;



    line-height: 1.5;



}







.vactours-popup-footer {



    padding: 20px 25px;



    border-top: 1px solid var(--vactours-light);



    display: flex;



    gap: 15px;



    justify-content: flex-end;



    background: #f8f9fa;



    position: sticky;



    bottom: 0;



}







/* No Data Message */



.vactours-no-data {



    text-align: center;



    padding: 40px 20px;



    background: var(--vactours-light);



    border-radius: var(--vactours-border-radius);



    color: var(--vactours-gray);



}







/* Loading Animation */



@keyframes vactours-fadeInUp {



    from {



        opacity: 0;



        transform: translateY(30px);



    }



    to {



        opacity: 1;



        transform: translateY(0);



    }



}







.vactours-card {



    animation: vactours-fadeInUp 0.6s ease forwards;



}







.vactours-card:nth-child(1) { animation-delay: 0.1s; }



.vactours-card:nth-child(2) { animation-delay: 0.2s; }



.vactours-card:nth-child(3) { animation-delay: 0.3s; }







/* Responsive Design */



@media (max-width: 1200px) {



    .vactours-grid {



        grid-template-columns: repeat(3, 1fr);



        gap: 15px;



    }



}







@media (max-width: 900px) {



    .vactours-tours-section {



        padding: 20px 15px;



    }



    



    .vactours-grid {



        grid-template-columns: repeat(2, 1fr);



        gap: 15px;



    }



    



    .vactours-section-title {



        font-size: 2rem;



        margin-bottom: 30px;



        padding: 0 15px;



    }



    



    .vactours-tour-info {



        display: flex;



        flex-wrap: wrap;



        gap: 6px;



        justify-content: space-around;



    }



    



    .vactours-popup-content {



        width: calc(100vw - 40px) !important;



        height: calc(100vh - 40px) !important;



        max-width: calc(100vw - 40px) !important;



        max-height: calc(100vh - 40px) !important;



        margin: 20px !important;



        border-radius: 9px !important;



        position: relative !important;



        top: auto !important;



        left: auto !important;



        right: auto !important;



        bottom: auto !important;



        display: flex !important;



        flex-direction: column !important;



    }







    .vactours-popup-footer {



        flex-direction: column;



    }



    



    .vactours-popup-header {



        padding: 15px 20px;



    }



    



    .vactours-popup-body {



        padding: 20px;



    }



    



    .vactours-btn-secondary {



        padding: 12px 24px;



        font-size: 14px;



    }



    



    /* Itinerary responsive adjustments */



    .vactours-popup-overview .vactours-tour-highlights {



        grid-template-columns: 1fr;



        gap: 10px;



    }



    



    .vactours-day-header {



        padding: 12px 15px;



        flex-direction: row;



        text-align: left;



        gap: 8px;



    }



    



    .vactours-day-activities {



        padding: 15px;



    }



}







@media (max-width: 600px) {



    .vactours-grid {



        grid-template-columns: 1fr;



        gap: 20px;



        padding: 0 0px;



    }





    .vactours-tour-info {



        display: flex;



        flex-wrap: wrap;



        gap: 6px;



    }



    



    .vactours-popup-content {



        width: calc(100vw - 20px) !important;



        height: calc(100vh - 20px) !important;



        max-width: calc(100vw - 20px) !important;



        max-height: calc(100vh - 20px) !important;



        margin: 10px !important;



        border-radius: 9px !important;



        position: relative !important;



        top: auto !important;



        left: auto !important;



        right: auto !important;



        bottom: auto !important;



        display: flex !important;



        flex-direction: column !important;



    }







    .vactours-popup-header h3 {



        font-size: 1.1rem;



    }



    



    .vactours-popup-section-title {



        font-size: 1.1rem;



    }



    



    .vactours-day-header {



        padding: 10px 12px;



    }



    



    .vactours-day-number {



        width: 30px;



        height: 30px;



        font-size: 12px;



    }



    



    .vactours-day-title {



        font-size: 1rem;



    }



    



    .vactours-activity-item {



        gap: 8px;



    }



    



    .vactours-activity-text {



        font-size: 13px;



    }



}







/* Mobile responsive styles for popup body text size */

@media (max-width: 768px) {

    .vactours-popup-body {

        font-size: 16px !important;

    }



    .vactours-popup-body * {

        font-size: 16px !important;

    }



    .vactours-popup-section-title {

        margin-bottom: 0px !important;

    }



    .vactours-day-number {

        font-size: 14px !important;

        white-space: nowrap !important;

        min-width: 90px !important;

        padding: 0px !important;

        border-radius: 12px !important;

        background: #1a3d4d !important;

        color: white !important;

        font-weight: 600 !important;

        text-align: center !important;

    }



    .vactours-popup-header h3 {

        margin-bottom: 0px !important;

    }



    .vactours-day-info {

        flex-wrap: wrap !important;

        overflow: visible !important;

    }



    .vactours-day-title {

        flex: 1 !important;

        min-width: 100% !important;

        overflow: visible !important;

        text-overflow: clip !important;

        white-space: normal !important;

        margin-top: 8px !important;

        line-height: 1.3 !important;

    }

}



@media (max-width: 480px) {



    .vactours-card-content {



        padding: 20px;



    }



    



    .vactours-section-title {



        font-size: 1.8rem;



    }



    



    .vactours-card-image {



        height: 200px;



    }



    



    .vactours-price-badge {



        font-size: 12px;



        padding: 6px 12px;



    }



    



    .vactours-destination-tags {



        justify-content: center;



    }







    .vactours-btn-primary {



        font-size: 15px !important;



        font-weight: 700;



        padding: 8px 12px;



        white-space: nowrap;



        overflow: hidden;



        text-overflow: ellipsis;



    }



    



    .vactours-popup-header {



        padding: 12px 15px;



    }



    



    .vactours-popup-body {



        padding: 15px;



    }



    



    .vactours-popup-footer {



        padding: 15px;



    }



    



    .vactours-popup-testimonial,



    .vactours-popup-cta {



        padding: 15px;



    }



}







/* Print Styles */



@media print {



    .vactours-popup-overlay,



    .vactours-btn {



        display: none !important;



    }



    



    .vactours-card {



        break-inside: avoid;



        box-shadow: none;



        border: 1px solid #ddd;



    }



}



/* Itinerary Accordion Styles */

.vactours-itinerary-controls {

    margin-bottom: 20px;

    text-align: right;

    display: flex;

    gap: 10px;

    justify-content: flex-end;

    flex-wrap: wrap;

}



/* Switch style for accordion controls */

.vactours-accordion-switch {

    display: inline-flex !important;

    background: #f1f3f4 !important;

    border-radius: 25px !important;

    padding: 3px !important;

    position: relative !important;

}



.vactours-switch-btn {

    background: transparent !important;

    color: #666 !important;

    border: none !important;

    padding: 8px 20px !important;

    border-radius: 20px !important;

    cursor: pointer !important;

    font-size: 14px !important;

    transition: all 0.3s ease !important;

    font-weight: 500 !important;

    position: relative !important;

    z-index: 2 !important;

}



.vactours-switch-btn.active {

    background: #247ba0 !important;

    color: white !important;

    box-shadow: 0 2px 8px rgba(26, 61, 77, 0.3) !important;

}



.vactours-switch-btn:hover:not(.active) {

    color: #1a3d4d !important;

}



.vactours-itinerary-day {

    border: 1px solid #e0e0e0;

    border-radius: 8px;

    margin-bottom: 10px;

    overflow: hidden;

    transition: var(--vactours-transition);

}



.vactours-itinerary-day:hover {

    border-color: var(--vactours-primary);

    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.1);

}



.vactours-day-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 15px 20px;

    background: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);

    cursor: pointer;

    transition: var(--vactours-transition);

    border-bottom: 1px solid transparent;

}



.vactours-day-header:hover {

    background: #e9ecef;

}



.vactours-itinerary-day.expanded .vactours-day-header {

    background: linear-gradient(135deg, #1a3d4d 0%, #bbdefb 100%);

    color: white;

    border-bottom-color: #dee2e6;

}



.vactours-day-info {

    display: flex;

    align-items: center;

    gap: 15px;

    flex: 1;

    margin: 0;

}



.vactours-day-info * {

    margin: 0 !important;

}



.vactours-day-number {

    background: #1a3d4d;

    color: white;

    padding: 0px;

    border-radius: 20px;

    font-weight: 600;

    font-size: 16px;

    min-width: 80px;

    text-align: center;

    flex-shrink: 0;

}



.vactours-itinerary-day.expanded .vactours-day-number {

    background: white;

    color: #1a3d4d;

}



.vactours-day-title {

    margin: 0;

    margin-bottom: 0px;

    font-size: 18px;

    font-weight: 600;

    color: #1a3d4d;

    line-height: 1.4;

}



.vactours-itinerary-day.expanded .vactours-day-title {

    color: white;

}



.vactours-accordion-icon {

    font-size: 16px;

    font-weight: bold;

    transition: transform 0.3s ease;

    color: var(--vactours-primary);

    flex-shrink: 0;

    margin-left: 10px;

}



.vactours-itinerary-day.expanded .vactours-accordion-icon {

    transform: rotate(180deg);

    color: white;

}



.vactours-day-activities {

    padding: 20px;

    background: white;

    border-top: 1px solid #dee2e6;

    display: none;

    animation: slideDown 0.3s ease;

}



.vactours-activities-text {

    line-height: 1.6;

    color: #1a3d4d;

    font-size: 16px;

    text-align: justify;

}



@keyframes slideDown {

    from {

        opacity: 0;

        max-height: 0;

    }

    to {

        opacity: 1;

        max-height: 500px;

    }

}



/* Mobile styles for accordion */

@media (max-width: 768px) {

    /* Mobile popup full screen */

    .vactours-popup-content {

        width: calc(100vw - 40px) !important;

        height: calc(100vh - 40px) !important;

        max-width: calc(100vw - 40px) !important;

        max-height: calc(100vh - 40px) !important;

        margin: 20px !important;

        border-radius: 9px !important;

        position: relative !important;

        transform: none !important;

    }



    /* Hide fermer button on mobile */

    .vactours-popup-footer .vactours-btn-secondary {

        display: none !important;

    }



    /* Center accordion controls on mobile */

    .vactours-itinerary-controls {

        justify-content: center;

        text-align: center;

        gap: 8px;

    }



    /* Hide fermer button on mobile */

    .vactours-popup-footer .vactours-btn-secondary {

        display: none !important;

    }



    /* Center accordion controls on mobile */

    .vactours-itinerary-controls {

        justify-content: center;

        text-align: center;

        gap: 8px;

    }



    .vactours-btn-expand-all,

    .vactours-btn-collapse-all {

        padding: 6px 12px;

        font-size: 12px;

    }



    .vactours-day-header {

        padding: 12px 15px;

    }



    .vactours-day-info {

        gap: 10px;

        text-align: left;

    }



    .vactours-day-number {

        padding: 0px;

        font-size: 12px;

        min-width: 60px;

    }



    .vactours-day-title {

        font-size: 16px;

        text-align: left;

    }



    .vactours-day-activities {

        padding: 15px;

    }



    .vactours-activities-text {

        font-size: 15px;

    }

}



.vactours-popup-footer .vactours-btn {

    min-width: 180px;

    white-space: nowrap;

    font-size: 16px;

    font-weight: 700 !important;

    padding: 12px 24px;

    height: 48px;

}