/* Scoped styles for the Two Column Repeater Images element */
.two-column-repeater-images.tcr-wrapper { max-width: var(--site-container-width); margin: 75px auto; padding: 0; }
.two-column-repeater-images .tcr-two-col-card { display: flex; flex-wrap: wrap; width: 100%; background: var(--color-quaternary, #f9f9f9); border-radius: 25px; overflow: hidden; }
.two-column-repeater-images .tcr-image-column, .two-column-repeater-images .tcr-text-column { flex: 1 1 50%; max-width: 50%; width: 100%; }
.two-column-repeater-images .tcr-image-column { display: flex; min-height: 500px; position: relative; }

/* --- CAROUSEL STYLES (UPDATED FOR FADE) --- */
.two-column-repeater-images .tcr-carousel-wrapper { width: 100%; height: 100%; position: relative; }
/* Set slides container to absolute position so slides can be stacked on top of each other */
.two-column-repeater-images .tcr-carousel-slides { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } 

.two-column-repeater-images .tcr-carousel-slide { 
    /* Stack slides absolutely */
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    
    /* Fade transition properties */
    opacity: 0; /* Initially invisible */
    z-index: 1; /* Base layer for inactive slides */
    transition: opacity 1s ease-in-out; /* The fade effect */
    
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    border-radius:25px; 
}

.two-column-repeater-images .tcr-carousel-slide.active { 
    opacity: 1; /* Fully visible */
    z-index: 2; /* Top layer for the active slide */
}

.two-column-repeater-images .tcr-carousel-pagination { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 3; } /* Increased z-index for pagination to ensure it is always on top */
.two-column-repeater-images .tcr-dot { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); cursor: pointer; transition: background-color 0.3s; }
.two-column-repeater-images .tcr-dot.active { background-color: white; }
.two-column-repeater-images .tcr-placeholder-image { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-style: italic; color: #aaa; background: #f0f0f0; }
/* --- END CAROUSEL STYLES --- */


.two-column-repeater-images .tcr-text-column { display: flex; flex-direction: column; justify-content: center; padding-left:50px;padding-right:50px;padding-top:20px;padding-bottom:20px; text-align: center; }
.two-column-repeater-images .tcr-text-inner h2 { font-family: var(--font-secondary, 'Georgia, serif'); font-weight: normal; font-size: 2.5rem; color: var(--color-primary, #333); margin-bottom: 20px;text-transform:uppercase; }
.two-column-repeater-images .tcr-content { color: var(--color-secondary, #555); margin-bottom: 20px; }
.two-column-repeater-images .tcr-content h3 { font-family: var(--font-primary, 'Arial, sans-serif'); color: var(--color-primary, #333); }
.two-column-repeater-images .tcr-text-inner h4{ font-family: var(--font-primary); margin-top:20px; margin-bottom:20px;font-size:1.2em }
.two-column-repeater-images .text-column ul{ list-style-position:outside; }
.two-column-repeater-images .text-column li{ margin-top:20px; margin-bottom:20px; }
.two-column-repeater-images .tcr-repeater-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px; text-align: center; width: 100%; }
.two-column-repeater-images .tcr-repeater-item { display: flex; flex-direction: column; align-items: center; height: 100%; text-align: center; }
.two-column-repeater-images .tcr-repeater-image-container { display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; margin-bottom: 8px; }
.two-column-repeater-images .tcr-repeater-item img { max-width: 100%; max-height: 100%; height: auto; width: auto; object-fit: contain; }
.two-column-repeater-images .tcr-placeholder-repeater-image { width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: 15px; background: #f0f0f0; font-style: italic; color: #aaa; }
.two-column-repeater-images .tcr-repeater-item p { color: var(--color-secondary, #555); line-height: 1.5; padding: 0 5px; font-size:0.85em; margin-bottom: 10px; }
.two-column-repeater-images .tcr-repeater-button, .two-column-repeater-images .tcr-bottom-button { display: inline-block; margin-top: auto; padding: 10px 28px; background-color: var(--color-primary); color: #fff; text-decoration: none; border-radius: 25px; transition: background-color 0.3s; font-size: 0.8em; text-transform: uppercase; border: none; cursor: pointer; }
.two-column-repeater-images .tcr-bottom-button-wrapper { text-align: center; margin-top: 30px; }


.two-column-repeater-images a.tcr-repeater-button {
    text-decoration: none !important;
    display: inline-block;
    border-bottom: none !important;
    box-shadow: none !important;
}

.two-column-repeater-images .tcr-repeater-button:hover {
    text-decoration: none;
}


/* Target links that are NOT buttons and NOT inside the bottom wrapper */
.two-column-repeater-images .tcr-text-column a:not(.button):not(.tcr-bottom-button-wrapper a) {
    text-decoration: underline;
}

.two-column-repeater-images .tcr-text-column a:not(.button):not(.tcr-bottom-button-wrapper a):hover {
    text-decoration: none;
}

/* --- Mobile Styles --- */
@media screen and (max-width: 768px) {
    .two-column-repeater-images .tcr-two-col-card { flex-direction: column; }
    .two-column-repeater-images .tcr-image-column, .two-column-repeater-images .tcr-text-column { max-width: 100%; flex-basis: auto; }
    .two-column-repeater-images .tcr-image-column { order: 0; min-height: 400px; }
    .two-column-repeater-images .tcr-text-column { order: 1; padding: 20px;padding-bottom:0px; }
    .two-column-repeater-images .tcr-repeater-grid { grid-template-columns: repeat(2, 1fr);padding-bottom:20px; }
    .two-column-repeater-images .tcr-carousel-slide { height: 400px; border-radius:0px; } 
    .two-column-repeater-images.tcr-wrapper { margin-top: 2px; margin-bottom: 2px; }

    .two-column-repeater-images {
        margin-left:0px !important;
        margin-right:0px !important;
        padding-left:0px !important;
        padding-right:0px !important;
    }

    .two-column-repeater-images .tcr-two-col-card {
        border-radius: 0px;
    }

    .two-column-repeater-images .rounded-corners{
        border-radius:0px;
    }

    .two-column-repeater-images .tcr-bottom-button-wrapper { margin-bottom:30px; }
}

/* --- NEW: FORMSTACK MODAL STYLES --- */
.form-modal-overlay {
    position: fixed;
    inset: 0; 
    background-color: rgba(0, 0, 0, 0.8); 
    z-index: 9999; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow-y: auto; 
    padding: 20px; 
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.35s ease-in-out;
}

.form-modal-overlay.is-open {
    opacity: 1;
}

.form-modal-content {
    background: white; 
    padding: 30px;
    border-radius: 8px;
    max-width: 938px; 
    width: 100%;
    position: relative; 
    max-height: 95dvh; 
    max-height: 95vh; 
    overflow-y: auto; 
    transform: translateY(20px);
    transition: transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.form-modal-overlay.is-open .form-modal-content {
    transform: translateY(0);
}

.modal-close-button {
    position: absolute; 
    top: -10px;
    right: 0px;
    background: none;
    border: none;
    font-size: 40px;
    color: #ffffff;
    cursor: pointer;
    line-height: 1;
    z-index: 10000;
}

#formModalOverlay #form-modal-title {
    color: var(--color-primary);
    font-family: var(--font-secondary);
    margin-bottom: 20px;
    margin-top: 10px;
    font-size: 2.5rem;
    text-transform: uppercase;
    text-align: center;
    padding: 20px 0 0 0;
}

#formModalOverlay .form-placeholder-block {
    background-color: #fff !important;
    padding: 0;
    margin: 0 auto;
    text-align: center;
    max-width: 100%;
    border: 2px solid var(--color-primary); 
    border-radius: 8px;
    padding-bottom: 20px;
}

/* Scrollbar styling for modal */
.form-modal-content::-webkit-scrollbar { width: 8px; }
.form-modal-content::-webkit-scrollbar-thumb { background-color: var(--color-primary); border-radius: 10px; }
.form-modal-content { scrollbar-color: var(--color-primary) transparent; scrollbar-width: thin; }

/* Formstack internal overrides */
#formModalOverlay .fsSubmitButton {
    background-color: var(--color-primary); border-radius: 25px; padding: 15px 35px;
    font-family: var(--font-secondary); color: #fff; border: none; cursor: pointer;
    text-transform: uppercase;
}
#formModalOverlay input, #formModalOverlay select, #formModalOverlay .fsForm textarea { 
    background-color: var(--color-quaternary) !important; 
    border: none !important; 
}

/* --- COMBINED MOBILE FIXES --- */
@media screen and (max-width: 768px) {
    /* 1. Prevents iOS zoom */
    #formModalOverlay input, 
    #formModalOverlay select, 
    #formModalOverlay .fsForm textarea { 
        font-size: 16px !important; 
    }

    /* 2. Tighten space above the white box */
    .form-modal-content { 
        padding-top: 40px !important; /* Reduced from 60px/80px */
        border-radius: 0 !important; 
        height: auto !important; 
        max-height: 100dvh !important; 
        margin-top: 10px !important; /* Pulls the whole box higher if needed */
    }

    /* 3. Move the X closer to the top of the modal box */
    #formModalOverlay .modal-close-button { 
        position: fixed !important; 
        /* Adjusted to sit right at the top edge of the box */
        top: calc(25px + env(safe-area-inset-top)) !important; 
        right: 10px !important; 
        background: #000000 !important; 
        width: 36px !important; /* Slightly smaller for a tighter look */
        height: 36px !important; 
        border-radius: 50% !important; 
        display: flex !important; 
        align-items: center !important; 
        justify-content: center !important; 
        z-index: 2147483647 !important; 
        color: #ffffff !important;
        font-size: 18px !important;
        line-height: 1 !important;
        border: 2px solid #ffffff !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}