/*
 * Flip box carousel with uniform heights
 *
 * Uses CSS custom properties for theming.
 * Defaults match the original purple gradient theme.
 *
 * NOTE: All selectors are prefixed with .cc-carousel-wrapper for
 * increased specificity, preventing WP Google Maps from overriding them.
 */

/* ========== CSS CUSTOM PROPERTIES (defaults = purple theme) ========== */
:root {
    --cc-gradient-start: #667eea;
    --cc-gradient-end: #764ba2;
    --cc-front-text: #fff;
    --cc-accent: #667eea;
    --cc-accent-hover: #764ba2;
}

/* ========== DEFENSIVE: HIDE WP GOOGLE MAPS CAROUSEL/LISTING ELEMENTS ========== */
/* Prevent WP Google Maps from injecting its own carousel/listing into the page */
.wpgmza_marker_listing {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.wpgmza_carousel {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.wpgmza-gallery-container {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.cc-map-container .wpgmza-popout-panel,
.cc-map-container .wpgmza-modern-marker-listing,
.cc-map-container .wpgmza-modern-marker-listing-marker-view,
.cc-map-container [data-wpgmza-marker-listing] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.wpgmza_map .wpgmza-listing-container {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Map Container - ensure it doesn't inherit WP Maps overrides */
.cc-map-container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    position: relative !important;
}

.cc-map-container > * {
    width: 100% !important;
}

/* Carousel Layout */
.cc-carousel-wrapper {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 30px auto !important;
    padding: 0 15px !important;
    box-sizing: border-box !important;
    position: relative !important;
}

/* ========== CAROUSEL NAVIGATION (positioned on left and right sides) ========== */
.cc-carousel-wrapper .cc-nav-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border: 2px solid var(--cc-accent) !important;
    background: #fff !important;
    color: var(--cc-accent) !important;
    font-size: 28px !important;
    line-height: 1 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    user-select: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    text-indent: 0 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
}

.cc-carousel-wrapper .cc-nav-arrow i {
    font-size: 28px !important;
    line-height: 1 !important;
}

.cc-carousel-wrapper .cc-nav-prev {
    left: -22px !important;
}

.cc-carousel-wrapper .cc-nav-next {
    right: -22px !important;
}

.cc-carousel-wrapper .cc-nav-arrow:hover {
    background: var(--cc-accent) !important;
    color: #fff !important;
}

.cc-carousel-wrapper .cc-nav-arrow:disabled {
    opacity: 0.3 !important;
    cursor: default !important;
    border-color: #ccc !important;
    color: #ccc !important;
    background: #fff !important;
}

.cc-carousel-wrapper .cc-nav-arrow:disabled:hover {
    background: #fff !important;
    color: #ccc !important;
}

/* Carousel track wrapper - used when navigation is active */
.cc-carousel-wrapper .cc-carousel-track-wrapper {
    overflow: hidden !important;
    width: 100% !important;
}

/* Carousel - static grid mode (no nav) */
.cc-carousel-wrapper .cc-carousel {
    display: grid !important;
    gap: 20px !important;
    margin: 0 auto !important;
}

/* Carousel - sliding track mode (with nav) */
.cc-carousel-wrapper .cc-carousel.is-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    transition: transform 0.4s ease-in-out !important;
    will-change: transform !important;
}

.cc-carousel-wrapper .cc-carousel.is-track .cc-flip-box {
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
}

/* Column widths for grid mode */
.cc-carousel-wrapper .cc-columns-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

.cc-carousel-wrapper .cc-columns-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

.cc-carousel-wrapper .cc-columns-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* Column widths for track (flex) mode */
.cc-carousel-wrapper .cc-carousel.is-track.cc-columns-2 .cc-flip-box {
    width: calc((100% - 20px) / 2) !important;
}

.cc-carousel-wrapper .cc-carousel.is-track.cc-columns-3 .cc-flip-box {
    width: calc((100% - 40px) / 3) !important;
}

.cc-carousel-wrapper .cc-carousel.is-track.cc-columns-4 .cc-flip-box {
    width: calc((100% - 60px) / 4) !important;
}

/* ========== FLIP BOX ========== */
.cc-carousel-wrapper .cc-flip-box {
    background-color: transparent !important;
    perspective: 1000px !important;
    height: 100% !important;
    min-height: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.cc-carousel-wrapper .cc-flip-box-inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 320px !important;
    text-align: center !important;
    transition: transform 0.6s ease-in-out !important;
    transform-style: preserve-3d !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Flipped state (click mode) */
.cc-carousel-wrapper .cc-flip-box.flipped .cc-flip-box-inner {
    transform: rotateY(180deg) !important;
}

/* Hover flip mode */
.cc-carousel-wrapper[data-flipbox-mode="hover"] .cc-flip-box:hover .cc-flip-box-inner {
    transform: rotateY(180deg) !important;
}

/* No flip mode - hide back face */
.cc-carousel-wrapper[data-flipbox-mode="none"] .cc-flip-box-back {
    display: none !important;
}

.cc-carousel-wrapper[data-flipbox-mode="none"] .cc-flip-box-inner {
    cursor: default !important;
}

/* Front and Back faces */
.cc-carousel-wrapper .cc-flip-box-front,
.cc-carousel-wrapper .cc-flip-box-back {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 320px !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    box-sizing: border-box !important;
}

/* Front face */
.cc-carousel-wrapper .cc-flip-box-front {
    background: linear-gradient(135deg, var(--cc-gradient-start) 0%, var(--cc-gradient-end) 100%) !important;
    color: var(--cc-front-text) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 15px !important;
}

.cc-carousel-wrapper .cc-flip-box-front-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

.cc-carousel-wrapper .cc-marker-icon {
    font-size: 40px !important;
    margin-bottom: 12px !important;
    line-height: 1 !important;
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 50% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.cc-carousel-wrapper .cc-marker-icon i {
    display: inline-block !important;
}

.cc-carousel-wrapper .cc-church-name {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.3 !important;
    color: var(--cc-front-text) !important;
    word-wrap: break-word !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.cc-carousel-wrapper .cc-church-address {
    font-size: 13px !important;
    line-height: 1.5 !important;
    opacity: 0.9 !important;
    color: var(--cc-front-text) !important;
    padding: 0 8px !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

.cc-carousel-wrapper .cc-address-street {
    font-size: 13px !important;
    line-height: 1.5 !important;
    margin-bottom: 2px !important;
}

.cc-carousel-wrapper .cc-address-city {
    font-size: 12px !important;
    line-height: 1.4 !important;
    opacity: 0.85 !important;
}

/* Flip hint on front */
.cc-carousel-wrapper .cc-flip-hint {
    font-size: 11px !important;
    opacity: 0.7 !important;
    margin-top: 10px !important;
    padding-bottom: 5px !important;
    color: var(--cc-front-text) !important;
}

/* Back face */
.cc-carousel-wrapper .cc-flip-box-back {
    background: #ffffff !important;
    color: #333 !important;
    transform: rotateY(180deg) !important;
    padding: 20px 15px !important;
    border: 1px solid #e8e8e8 !important;
    display: flex !important;
    flex-direction: column !important;
}

.cc-carousel-wrapper .cc-flip-box-back-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    width: 100% !important;
    overflow-y: auto !important;
}

.cc-carousel-wrapper .cc-church-name-back {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 0 12px 0 !important;
    color: #333 !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid var(--cc-accent) !important;
    line-height: 1.3 !important;
    background: transparent !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Service times - top section with separator */
.cc-carousel-wrapper .cc-service-times {
    margin-bottom: 14px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #e8e8e8 !important;
}

.cc-carousel-wrapper .cc-service-heading {
    font-size: 13px !important;
    margin-bottom: 6px !important;
    color: #333 !important;
}

.cc-carousel-wrapper .cc-service-heading strong {
    color: #333 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    font-size: 11px !important;
}

.cc-carousel-wrapper .cc-service-line {
    font-size: 13px !important;
    line-height: 1.7 !important;
    padding: 4px 0 !important;
    color: #555 !important;
}

/* Pastor */
.cc-carousel-wrapper .cc-pastor {
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    color: #555 !important;
}

.cc-carousel-wrapper .cc-pastor strong {
    color: #333 !important;
    font-weight: 700 !important;
}

/* Phone */
.cc-carousel-wrapper .cc-phone {
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin-bottom: 10px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    color: #555 !important;
}

.cc-carousel-wrapper .cc-phone strong {
    color: #333 !important;
    font-weight: 700 !important;
}

/* Website link */
.cc-carousel-wrapper .cc-website {
    font-size: 13px !important;
    line-height: 1.7 !important;
    margin-top: 6px !important;
    padding-top: 6px !important;
}

.cc-carousel-wrapper .cc-website a {
    color: var(--cc-accent) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
    display: inline-block !important;
    padding: 4px 0 !important;
}

.cc-carousel-wrapper .cc-website a:hover {
    color: var(--cc-accent-hover) !important;
}

/* No details */
.cc-carousel-wrapper .cc-no-details {
    font-size: 13px !important;
    color: #999 !important;
    font-style: italic !important;
}

/* Flip hint on back */
.cc-carousel-wrapper .cc-flip-hint-back {
    font-size: 11px !important;
    opacity: 0.6 !important;
    margin-top: 10px !important;
    padding-top: 5px !important;
    color: #999 !important;
}

/* No churches found */
.cc-carousel-wrapper .cc-no-churches {
    text-align: center !important;
    padding: 40px 20px !important;
    font-size: 16px !important;
    color: #999 !important;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .cc-carousel-wrapper .cc-columns-4 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .cc-carousel-wrapper .cc-carousel.is-track.cc-columns-4 .cc-flip-box {
        width: calc((100% - 40px) / 3) !important;
    }
}

@media (max-width: 768px) {
    .cc-carousel-wrapper .cc-columns-4,
    .cc-carousel-wrapper .cc-columns-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .cc-carousel-wrapper .cc-carousel.is-track.cc-columns-4 .cc-flip-box,
    .cc-carousel-wrapper .cc-carousel.is-track.cc-columns-3 .cc-flip-box {
        width: calc((100% - 20px) / 2) !important;
    }

    .cc-carousel-wrapper .cc-columns-2 {
        grid-template-columns: 1fr !important;
    }

    .cc-carousel-wrapper .cc-flip-box-inner {
        min-height: 280px !important;
    }

    .cc-carousel-wrapper .cc-flip-box-front,
    .cc-carousel-wrapper .cc-flip-box-back {
        min-height: 280px !important;
    }

    .cc-carousel-wrapper .cc-nav-prev {
        left: -5px !important;
    }

    .cc-carousel-wrapper .cc-nav-next {
        right: -5px !important;
    }

    .cc-carousel-wrapper .cc-nav-arrow {
        width: 36px !important;
        height: 36px !important;
        font-size: 22px !important;
    }
}

@media (max-width: 480px) {
    .cc-carousel-wrapper .cc-carousel,
    .cc-carousel-wrapper .cc-carousel.is-track {
        grid-template-columns: 1fr !important;
    }

    .cc-carousel-wrapper .cc-carousel.is-track .cc-flip-box {
        width: 100% !important;
    }

    .cc-carousel-wrapper .cc-flip-box-inner {
        min-height: 260px !important;
    }

    .cc-carousel-wrapper .cc-flip-box-front,
    .cc-carousel-wrapper .cc-flip-box-back {
        min-height: 260px !important;
    }

    .cc-carousel-wrapper .cc-nav-prev {
        left: -2px !important;
    }

    .cc-carousel-wrapper .cc-nav-next {
        right: -2px !important;
    }

    .cc-carousel-wrapper .cc-nav-arrow {
        width: 32px !important;
        height: 32px !important;
        font-size: 18px !important;
    }
}

.cc-carousel-wrapper .cc-flip-box.cc-map-hover-match .cc-flip-box-front,
.cc-carousel-wrapper .cc-flip-box.cc-map-hover-match .cc-flip-box-back {
    box-shadow: 0 0 0 3px var(--cc-accent), 0 8px 24px rgba(0, 0, 0, 0.22) !important;
}