/* Offers Grid Styles */
.offers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

@media (max-width: 1024px) {
    .offers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .offers-grid {
        grid-template-columns: 1fr;
    }
}

.offer-card {
    background: #fff;
    border: none;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}


.offer-image img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
  /*  border-radius: 6px 6px 0 0; /* only top corners */
}

.offer-image img {
  transition: transform 0.3s ease;
}

.offer-image img:hover {
  transform: scale(1.02);
}

.offer-content {
    padding: 20px;
    text-align: center;
}

.offer-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
    font-weight: 500;
    margin: 3px;
    color: #caa938 !important;
}

.offer-hotel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-size: 13px;
    text-align: center;
    width: 100%;
    margin-bottom: 20px;
}

.offer-hotel svg {
    flex-shrink: 0;
}

.offer-hotel a {
    color: #555 !important;
    text-decoration: none;
}

.offer-hotel a:hover {
    color: #caa938 !important;
}

.offer-desc {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 20px;
}

.offer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 30px;
    font-size: 14px !important;
    font-weight: normal;
    color: #caa938 !important;
    background: #fff !important;
    border: 1px solid #caa938;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.offer-btn:hover {
    background: #caa938 !important;
    color: #fff !important;
}

.offer-inner {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 100%;
}

.offer-inner .offer-content,
.offer-inner .offer-image {
    flex: 1 1 50%;
}

.offer-inner .offer-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 30px;
}

.offer-logo img {
    max-height: 110px;
    margin-bottom: 10px;
}

.offer-logo img {
  transition: transform 0.3s ease;
}

.offer-logo img:hover {
  transform: scale(1.03);
}

.offer-inner .offer-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Mobile styles for featured offers */
@media (max-width: 768px) {
    .offer-inner {
        flex-direction: column;
    }

    .offer-inner .offer-content {
        padding: 20px;
    }

    .offer-logo img {
        max-height: 80px;
    }

    .offer-inner .offer-image img {
        height: 250px;
    }
}

/* Swiper pagination */
.swiper-pagination {
    position: relative !important;
    margin-top: 10px;
}

.swiper-pagination-bullet {
    background: #caa938 !important;
    width: 10px !important;
    height: 10px !important;
}

.swiper-pagination-bullet-active {
    background: #a88b1e !important;
    width: 13px !important;
    height: 13px !important;
}

/* Merged Subsite Offer Styles */
.offer-filters-wrap {
    width: 100%;
    display: block;
}

.offer-filters-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    padding: 18px 16px;
}

.offer-filters {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
}

/* ── Primary filter: content-type — pill/badge style ──────────────
   On the main site this is the top (primary) filter row.
   On subsites this class is not rendered.
------------------------------------------------------------------ */
.offers-filter--content-type {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.offers-filter--content-type .filter-btn {
    font-family: 'Titillium Web', sans-serif !important;
    font-size: 12px;
    border: 1px solid #999;
    padding: 3px 14px;
    border-radius: 30px;
    background: #fff;
    color: #999;
    cursor: pointer;
    transition: all 0.25s ease;
}

.offers-filter--content-type .filter-btn.active {
    background: #caa938;
    border-color: #caa938;
    color: #ffffff;
}

.offers-filter--content-type .filter-btn:hover {
    background: #caa938;
    border-color: #caa938;
    color: #ffffff;
}

/* ── Sub-filter: hotel on subsite / location on main site ─────────
   Text-only style with vertical dividers between buttons.
   On the main site this becomes the secondary (location) filter.
   On subsites it is the only (hotel) filter and uses pill style
   via the .offer-filter rules below — it is rendered WITHOUT
   the offers-filter--hotel class in subsite mode, so both
   selectors can coexist safely.
------------------------------------------------------------------ */
.offers-filter--hotel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-top: 0;
}

.offers-filter--hotel .filter-btn {
    font-family: 'Titillium Web', sans-serif !important;
    font-size: 12px;
    border: none;
    background: transparent;
    color: #999;
    cursor: pointer;
    padding: 3px 14px;
    font-weight: normal;
    transition: color 0.25s ease;
    position: relative;
}

/* Vertical divider between buttons */
.offers-filter--hotel .filter-btn + .filter-btn::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 12px;
    width: 1px;
    background: #ccc;
}

.offers-filter--hotel .filter-btn.active {
    color: #caa938;
    font-weight: bold;
    background: transparent;
    border: none;
}

.offers-filter--hotel .filter-btn:hover {
    color: #caa938;
    background: transparent;
    border: none;
}

/* Subsite-only: standalone hotel filter uses pill style
   (the subsite template does NOT add offers-filter--content-type,
    so these rules only take effect when there is no primary filter) */
.offers-filter--hotel:first-child:last-child .filter-btn,
.offer-filters-inner > .offers-filter--hotel:only-child .filter-btn {
    border: 1px solid #999;
    border-radius: 30px;
    background: #fff;
    padding: 3px 14px;
    color: #999;
}

.offers-filter--hotel:first-child:last-child .filter-btn::before,
.offer-filters-inner > .offers-filter--hotel:only-child .filter-btn::before {
    display: none;
}

.offers-filter--hotel:first-child:last-child .filter-btn.active,
.offer-filters-inner > .offers-filter--hotel:only-child .filter-btn.active {
    background: #caa938;
    border-color: #caa938;
    color: #ffffff;
    font-weight: normal;
}

.offers-filter--hotel:first-child:last-child .filter-btn:hover,
.offer-filters-inner > .offers-filter--hotel:only-child .filter-btn:hover {
    background: #caa938;
    border-color: #caa938;
    color: #ffffff;
}

/* Legacy standalone pill class (used outside filter rows) */
.offer-filter {
    font-family: 'Titillium Web', sans-serif !important;
    font-size: 12px;
    border: 1px solid #999;
    padding: 3px 14px;
    border-radius: 30px;
    background: #fff;
    color: #999;
    cursor: pointer;
    transition: all 0.25s ease;
}

.offer-filter.active {
    background: #caa938;
    border: 1px solid #caa938;
    color: #ffffff;
}

.offer-filter:hover {
    background: #caa938;
    border: 1px solid #caa938;
    color: #ffffff;
}

.featured-offer-card {
    background: #fff;
    border: 1px solid #E3E3E3;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Featured Offers Carousel Styles */
.featured-offers-carousel .swiper-button-prev,
.featured-offers-carousel .swiper-button-next,
.featured-offers-carousel .swiper-button-prev.swiper-button-disabled,
.featured-offers-carousel .swiper-button-next.swiper-button-disabled {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.featured-offers-carousel {
    width: 100%;
    position: relative;
}

/* Ensure each slide stretches to a consistent height */
.featured-offers-carousel .swiper-slide {
    height: auto;          /* let flexbox determine height per slide */
    display: flex;
    align-items: stretch;
}

.featured-offers-carousel .featured-offer-card {
    width: 100%;           /* card fills the slide */
    min-height: 380px;     /* prevents a collapsed card when image is slow */
}

.featured-offers-carousel .offer-card {
    margin-bottom: 10px;
}

.featured-offers-list {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.featured-offers-list .offer-card {
    display: block;
    margin-bottom: 35px;
    border: 1px solid #e3e3e3;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}

.featured-offers-list .offer-inner {
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.featured-offers-list .offer-card.reverse-layout .offer-inner {
    flex-direction: row-reverse;
}

.featured-offers-list .offer-content {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 30px;
}

.featured-offers-list .offer-image {
    flex: 1 1 50%;
}

.featured-offers-list .offer-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    margin: 0;
}

.featured-offers-list .offer-logo,
.featured-offers-list .offer-image {
    transition: transform 0.3s ease;
}

.featured-offers-list .offer-logo:hover,
.featured-offers-list .offer-image:hover {
    transform: scale(1.02);
}

@media (max-width: 768px) {
    .featured-offers-list .offer-inner {
        flex-direction: column;
    }

    .featured-offers-list .offer-content,
    .featured-offers-list .offer-image {
        flex: 1 1 auto;
        width: 100%;
    }

    .featured-offers-list .offer-image {
        order: -1;
    }

    .featured-offers-list .offer-image img {
        height: 250px;
    }
}