/*
 * MOBI – Turismo Inteligente styles
 *
 * These styles define responsive grids and cards for displaying travel
 * packages, photo albums and banners. The layout uses flexbox to
 * gracefully adjust to various screen sizes. Colours and spacing are
 * intentionally neutral to allow individual sites to override them via
 * custom CSS if desired.
 */

.mobi-packages-grid,
.mobi-albums-grid,
.mobi-banners-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

.mobi-package,
.mobi-album,
.mobi-banner {
    flex-basis: calc(33.333% - 1rem);
    display: flex;
    flex-direction: column;
}

/* Card container for packages */
.mobi-package-card {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mobi-package-card img,
.mobi-album img,
.mobi-banner img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.mobi-package-content,
.mobi-album-content,
.mobi-banner-content {
    padding: 1rem;
    flex-grow: 1;
}

.mobi-package-title,
.mobi-album-title,
.mobi-banner-title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.mobi-package-meta,
.mobi-album-meta {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: #666;
}

.mobi-package-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #0073aa;
    margin-bottom: 0.75rem;
}

.mobi-package-button,
.mobi-banner-link {
    display: inline-block;
    background: #0073aa;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9rem;
}

.mobi-package-button:hover,
.mobi-banner-link:hover {
    background: #005a87;
    color: #fff;
}

@media (max-width: 991px) {
    .mobi-package,
    .mobi-album,
    .mobi-banner {
        flex-basis: calc(50% - 1rem);
    }
}

@media (max-width: 767px) {
    .mobi-package,
    .mobi-album,
    .mobi-banner {
        flex-basis: 100%;
    }
}

/* Single package view styles */
/* Single package view styles */
/*
 * The package page uses a card layout with a prominent header section
 * similar to modern travel sites. The header presents the featured
 * image alongside a summary of the most important details: title,
 * dates, duration and price. On smaller screens the two columns
 * collapse into a single column. A subtle hover effect provides
 * feedback when the user moves the cursor over the card.
 */
.mobi-package-single {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.3s ease;
}
.mobi-package-single:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}
/* Header section with image and summary */
.mobi-package-header {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 1.5rem;
    align-items: flex-start;
}
.mobi-package-image {
    flex: 1 1 45%;
}
.mobi-package-image img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    object-fit: cover;
}
.mobi-package-summary {
    flex: 1 1 45%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.mobi-package-summary .mobi-package-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    color: #222;
    line-height: 1.2;
}
.mobi-package-summary .mobi-package-meta p {
    margin: 0.2rem 0;
    font-size: 0.95rem;
    color: #555;
}
.mobi-package-summary .mobi-package-price {
    font-size: 1.4rem;
    font-weight: 700;
    color: #0073aa;
    margin: 0.8rem 0 0.4rem 0;
}
.mobi-package-summary .mobi-package-buttons {
    margin-top: 0.5rem;
}
.mobi-package-summary .mobi-package-button {
    display: inline-block;
    margin-right: 0.5rem;
    margin-top: 0.5rem;
}
/* Description and section headings */
.mobi-package-description {
    margin-bottom: 1.5rem;
    line-height: 1.6;
    font-size: 1rem;
    color: #333;
}
.mobi-package-section {
    margin-top: 2rem;
}
.mobi-package-section h3 {
    font-size: 1.4rem;
    margin-bottom: 0.7rem;
    color: #0073aa;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 0.3rem;
}
.mobi-package-section p,
.mobi-package-section ol,
.mobi-package-section ul {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #555;
}
.mobi-package-section ol {
    padding-left: 1.2rem;
}
.mobi-package-section ul {
    list-style: disc inside;
}

/* Album section styles (used when appending galleries via the_content) */
.mobi-album-section {
    margin-top: 1.5rem;
}
.mobi-album-section h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: #0073aa;
}

/* Album gallery grid */
.mobi-album-gallery {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}
/* Dynamic column classes (1 to 6) */
.mobi-album-gallery.mobi-columns-1 { grid-template-columns: repeat(1, 1fr); }
.mobi-album-gallery.mobi-columns-2 { grid-template-columns: repeat(2, 1fr); }
.mobi-album-gallery.mobi-columns-3 { grid-template-columns: repeat(3, 1fr); }
.mobi-album-gallery.mobi-columns-4 { grid-template-columns: repeat(4, 1fr); }
.mobi-album-gallery.mobi-columns-5 { grid-template-columns: repeat(5, 1fr); }
.mobi-album-gallery.mobi-columns-6 { grid-template-columns: repeat(6, 1fr); }
.mobi-album-gallery .mobi-gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}
/* Term list */
.mobi-term-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1rem;
}
.mobi-term-list .mobi-term-item {
    margin-bottom: 0.5rem;
}
.mobi-term-list .mobi-term-item a {
    text-decoration: none;
    color: #0073aa;
}
.mobi-term-list .mobi-term-item a:hover {
    text-decoration: underline;
}

/* Cameras grid on destination pages */
.mobi-cameras-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
}
.mobi-camera-item {
    flex-basis: calc(50% - 0.75rem);
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.mobi-camera-item h3 {
    font-size: 1.2rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    color: #0073aa;
}
.mobi-camera-item .mobi-camera-thumb img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}
.mobi-camera-item .mobi-camera-embed iframe {
    width: 100%;
    max-width: 100%;
    border: none;
}

@media (max-width: 767px) {
    .mobi-camera-item {
        flex-basis: 100%;
    }
}

/* Destination archive layout */
.mobi-destination-header {
    margin-bottom: 2rem;
}
.mobi-destination-title {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.mobi-destination-intro {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.mobi-destination-description {
    flex: 1 1 50%;
    font-size: 1rem;
    line-height: 1.5;
}
.mobi-destination-featured {
    flex: 1 1 40%;
}
.mobi-destination-featured img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    object-fit: cover;
}
.mobi-destination-buttons {
    margin-top: 1rem;
    display: flex;
    gap: 1rem;
}
.mobi-destination-btn {
    display: inline-block;
    background: #0073aa;
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    text-decoration: none;
    font-size: 0.9rem;
}
.mobi-destination-btn:hover {
    background: #005a87;
    color: #fff;
}

/* Destination gallery grid */
.mobi-destination-gallery-grid {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}
.mobi-destination-gallery-grid .mobi-gallery-item img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
}
/* Default 3 columns for gallery; will be overridden by inline column classes if present */
.mobi-destination-gallery-grid.mobi-columns-1 { grid-template-columns: repeat(1, 1fr); }
.mobi-destination-gallery-grid.mobi-columns-2 { grid-template-columns: repeat(2, 1fr); }
.mobi-destination-gallery-grid.mobi-columns-3 { grid-template-columns: repeat(3, 1fr); }
.mobi-destination-gallery-grid.mobi-columns-4 { grid-template-columns: repeat(4, 1fr); }

/* Destination sections headings */
.mobi-destination-gallery h2,
.mobi-destination-cameras h2 {
    font-size: 1.6rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: #0073aa;
}

/* Popular packages carousel */
.mobi-popular-carousel-wrapper {
    margin: 2rem 0;
    overflow: hidden;
    position: relative;
}
.mobi-popular-carousel {
    display: flex;
    flex-wrap: nowrap;
    transition: transform 0.5s ease-in-out;
}
.mobi-popular-item {
    flex: 0 0 25%;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    margin-right: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.mobi-popular-item:last-child {
    margin-right: 0;
}
.mobi-popular-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.mobi-popular-content {
    padding: 1rem;
    flex-grow: 1;
}
.mobi-popular-title {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
    font-weight: 600;
}
.mobi-popular-meta {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 0.4rem;
}
.mobi-popular-price {
    font-size: 1rem;
    font-weight: 700;
    color: #0073aa;
    margin-top: 0.25rem;
}

/* Boarding list in single package */
.mobi-boarding-list {
    list-style: none;
    padding-left: 0;
}
.mobi-boarding-list li {
    margin-bottom: 0.5rem;
}

/* Attachments list */
.mobi-attachments-list {
    list-style: none;
    padding-left: 0;
}
.mobi-attachments-list li {
    margin-bottom: 0.5rem;
}
.mobi-attachments-list li a {
    color: #0073aa;
    text-decoration: none;
}
.mobi-attachments-list li a:hover {
    text-decoration: underline;
}

/* Highlight for packages marked as oferta */
.mobi-package-card.mobi-package-offer {
    border: 2px solid #28a745;
}

/* Search form styles */
.mobi-package-search-form {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.mobi-package-search-form .mobi-search-field {
    flex: 1;
    min-width: 150px;
}
.mobi-package-search-form label {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: 600;
    font-size: 0.85rem;
}
.mobi-package-search-form select,
.mobi-package-search-form input[type="date"] {
    width: 100%;
    padding: 0.45rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9rem;
}
.mobi-package-search-form .mobi-search-button {
    background: #0073aa;
    color: #fff;
    border: none;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    font-size: 0.9rem;
    cursor: pointer;
}
.mobi-package-search-form .mobi-search-button:hover {
    background: #005a87;
}

/* Search results wrapper */
.mobi-search-results {
    margin-top: 1.5rem;
}

/* WhatsApp reservation button styles */
.mobi-whatsapp-button {
    background: #25D366;
    color: #fff;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    display: inline-block;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    position: relative;
    transition: background 0.3s ease-in-out;
    animation: wa-pulse 3s infinite;
}
.mobi-whatsapp-button svg {
    /* Align icon with text and add spacing */
    margin-right: 0.4rem;
    vertical-align: middle;
}

/* Meta icons spacing */
.mobi-meta-icon {
    margin-right: 0.3rem;
    vertical-align: middle;
    font-size: 1rem;
}
.mobi-whatsapp-button:hover {
    background: #128C7E;
    color: #fff;
}
@keyframes wa-pulse {
    0% {
        box-shadow: rgba(37, 211, 102, 0.392) 0px 0px 0px 4.3704px;
    }
    50% {
        box-shadow: rgba(37, 211, 102, 0.09) 0px 0px 0px 16.4717px;
    }
    100% {
        box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 4.04107px;
    }
}

/* Filter bar styles */
.mobi-filter-bar {
    margin-bottom: 2rem;
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 6px;
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.mobi-filter-bar .mobi-filter-tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
.mobi-filter-bar .mobi-filter-tabs li {
    padding: 0.5rem 1rem;
    border: 1px solid #eaeaea;
    border-radius: 50px;
    background: #f7f7f7;
    cursor: pointer;
    font-size: 0.9rem;
    white-space: nowrap;
}
.mobi-filter-bar .mobi-filter-tabs li.active {
    background: #0073aa;
    color: #fff;
    border-color: #0073aa;
}

/* Modern improvements */
:root{
    --mobi-gap: 1.25rem;
    --mobi-card-radius: 10px;
}
.mobi-package-card,
.mobi-album-card,
.mobi-banner-card{
    border-radius: var(--mobi-card-radius);
}
@media (prefers-reduced-motion: reduce){
    * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* Dark mode support if theme uses it */
@media (prefers-color-scheme: dark){
    .mobi-package-card{
        background:#111; border-color:#1f1f1f; color:#f3f3f3;
    }
    .mobi-package-price{ color:#54a3ff;}
    .mobi-package-button{ background:#54a3ff; }
    .mobi-package-button:hover{ background:#3b80ca;}
}