/* --- ULTRA ISOLATED CSS MODULE --- */
        
/* Root Wrapper: Resets and Isolation */
#cms-integrated-module-v1 {
    font-family: 'Inter', sans-serif;
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    background-color: transparent; 
    width: 100%;
    display: flex;
    justify-content: center;
    /* Protect against external text-aligns */
    text-align: left; 
}

/* Component Reset: Ensure box-sizing doesn't break layout if the host site uses content-box */
#cms-integrated-module-v1 * {
    box-sizing: border-box;
}

/* --- ANIMATIONS --- */

/* The Wiggle Animation for icons */
@keyframes cms-iso-wiggle {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    50% { transform: rotate(10deg); }
    75% { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

/* ANIMATION 1: The "Jump" (On Hover) */
@keyframes cms-iso-bounceIn {
    0% { transform: translateY(50px) scale(0.8); opacity: 0; }
    40% { transform: translateY(-25px) scale(1.1); opacity: 1; }
    70% { transform: translateY(8px) scale(0.95); }
    85% { transform: translateY(-4px) scale(1.02); }
    100% { transform: translateY(0px) scale(1); opacity: 1; }
}

/* ANIMATION 2: The "Smooth Zoom Out" (On Click/Active) */
@keyframes cms-iso-zoomOutSettle {
    0% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* --- LAYOUT & COMPONENTS --- */

/* Icon Wiggle Trigger */
#cms-integrated-module-v1 .cms-iso-tab-wrapper:hover .cms-iso-tab-icon {
    animation: cms-iso-wiggle 0.5s ease-in-out;
}

/* Tab Container */
#cms-integrated-module-v1 .cms-iso-tab-container {
    position: relative;
    z-index: 10;
    align-items: flex-end;
    display: flex;
    justify-content: center;
    padding-left: 1rem;
    padding-right: 1rem;
    height: 85px; /* Default Desktop Height */
    /* Custom Scrollbar Hiding */
    overflow-x: auto;
    overflow-y: hidden; /* FIXED: Prevent vertical scrolling on mouse wheel */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE */
}
#cms-integrated-module-v1 .cms-iso-tab-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
}

/* Tab Wrapper (Static Hover Target) */
#cms-integrated-module-v1 .cms-iso-tab-wrapper {
    position: relative;
    flex-shrink: 0;
    z-index: 10;
    margin-right: 0.25rem; /* space-x-1 equivalent */
}

/* The Tab Button */
#cms-integrated-module-v1 .cms-iso-tab-btn {
    position: relative;
    transform-origin: bottom center;
    opacity: 0.9;
    top: 4px;
    /* Styling */
    display: flex;
    align-items: center;
    padding: 1rem 0.75rem; /* px-3 py-4 */
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-top: 3px solid transparent;
    background-clip: padding-box;
    width: 100%;
    cursor: pointer;
    border-left: none;
    border-right: none;
    border-bottom: none;

    /* Transitions */
    transition: top 0.8s cubic-bezier(0.3, 1, 0.3, 1), 
                transform 0.5s ease,
                opacity 0.3s ease, 
                background-color 0.3s ease,
                background-image 0.3s ease,
                color 0.3s ease,
                border-top-color 0.3s ease;
}

/* The 400px "Skirt" Extension - NOW CLICKABLE */
#cms-integrated-module-v1 .cms-iso-tab-btn::after {
    content: "";
    position: absolute;
    top: calc(100% - 2px); /* Moved up slightly to overlap and hide the gap */
    left: 0;
    right: 0;
    height: 400px; 
    background-color: inherit; 
    z-index: -1;
    /* EDITED: Changed from none to auto so the skirt captures mouse events */
    pointer-events: auto; 
}

/* HOVER BEHAVIOR: Trigger Jump Animation */
#cms-integrated-module-v1 .cms-iso-tab-wrapper:hover .cms-iso-tab-btn:not(.active) {
    top: 0px; 
    opacity: 1;
    z-index: 25; 
    animation: cms-iso-bounceIn 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* ACTIVE STATE: Zoom Settle Animation */
#cms-integrated-module-v1 .cms-iso-tab-btn.active {
    opacity: 1;
    top: 0px; 
    z-index: 20; 
    background-color: white !important;
    background-image: none !important;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05), 0 -2px 4px -1px rgba(0, 0, 0, 0.03);
    animation: cms-iso-zoomOutSettle 0.5s ease-out forwards;
    transition: none; 
}

/* --- COLOR PALETTES (Specific to this module) --- */

/* INDIGO (For Info) */
#cms-integrated-module-v1 .cms-iso-color-indigo { 
    background-color: #e0e7ff; 
    background-image: linear-gradient(to bottom, #eef2ff, #e0e7ff); 
    color: #4338ca; 
}
#cms-integrated-module-v1 .cms-iso-tab-wrapper:hover .cms-iso-color-indigo:not(.active) { 
    background-color: #c7d2fe; 
    background-image: linear-gradient(to bottom, #e0e7ff, #c7d2fe); 
}
#cms-integrated-module-v1 .cms-iso-tab-btn.active.cms-iso-color-indigo { color: #4f46e5; border-top-color: #4f46e5; }

/* BLUE (For Templates) */
#cms-integrated-module-v1 .cms-iso-color-blue { 
    background-color: #dbeafe; 
    background-image: linear-gradient(to bottom, #eff6ff, #dbeafe);
    color: #1e40af; 
}
#cms-integrated-module-v1 .cms-iso-tab-wrapper:hover .cms-iso-color-blue:not(.active) { 
    background-color: #bfdbfe; 
    background-image: linear-gradient(to bottom, #dbeafe, #bfdbfe);
}
#cms-integrated-module-v1 .cms-iso-tab-btn.active.cms-iso-color-blue { color: #3b82f6; border-top-color: #3b82f6; }

/* GREEN (For Price List) */
#cms-integrated-module-v1 .cms-iso-color-green { 
    background-color: #dcfce7; 
    background-image: linear-gradient(to bottom, #f0fdf4, #dcfce7);
    color: #166534; 
}
#cms-integrated-module-v1 .cms-iso-tab-wrapper:hover .cms-iso-color-green:not(.active) { 
    background-color: #bbf7d0; 
    background-image: linear-gradient(to bottom, #dcfce7, #bbf7d0);
}
#cms-integrated-module-v1 .cms-iso-tab-btn.active.cms-iso-color-green { color: #22c55e; border-top-color: #22c55e; }

/* PURPLE (For Comparison) */
#cms-integrated-module-v1 .cms-iso-color-purple { 
    background-color: #f3e8ff; 
    background-image: linear-gradient(to bottom, #faf5ff, #f3e8ff);
    color: #6b21a8; 
}
#cms-integrated-module-v1 .cms-iso-tab-wrapper:hover .cms-iso-color-purple:not(.active) { 
    background-color: #e9d5ff; 
    background-image: linear-gradient(to bottom, #f3e8ff, #e9d5ff);
}
#cms-integrated-module-v1 .cms-iso-tab-btn.active.cms-iso-color-purple { color: #a855f7; border-top-color: #a855f7; }

/* RED (For FAQ) */
#cms-integrated-module-v1 .cms-iso-color-red { 
    background-color: #fee2e2; 
    background-image: linear-gradient(to bottom, #fef2f2, #fee2e2);
    color: #991b1b; 
}
#cms-integrated-module-v1 .cms-iso-tab-wrapper:hover .cms-iso-color-red:not(.active) { 
    background-color: #fecaca; 
    background-image: linear-gradient(to bottom, #fee2e2, #fecaca);
}
#cms-integrated-module-v1 .cms-iso-tab-btn.active.cms-iso-color-red { color: #ef4444; border-top-color: #ef4444; }

/* ORANGE (For Gallery) */
#cms-integrated-module-v1 .cms-iso-color-orange { 
    background-color: #ffedd5; 
    background-image: linear-gradient(to bottom, #fff7ed, #ffedd5);
    color: #9a3412; 
}
#cms-integrated-module-v1 .cms-iso-tab-wrapper:hover .cms-iso-color-orange:not(.active) { 
    background-color: #fed7aa; 
    background-image: linear-gradient(to bottom, #ffedd5, #fed7aa);
}
#cms-integrated-module-v1 .cms-iso-tab-btn.active.cms-iso-color-orange { color: #f97316; border-top-color: #f97316; }

/* YELLOW (For Reviews) */
#cms-integrated-module-v1 .cms-iso-color-yellow { 
    background-color: #fef9c3; 
    background-image: linear-gradient(to bottom, #fefce8, #fef9c3);
    color: #854d0e; 
}
#cms-integrated-module-v1 .cms-iso-tab-wrapper:hover .cms-iso-color-yellow:not(.active) { 
    background-color: #fde047; 
    background-image: linear-gradient(to bottom, #fef9c3, #fde047);
}
#cms-integrated-module-v1 .cms-iso-tab-btn.active.cms-iso-color-yellow { color: #eab308; border-top-color: #eab308; }


/* Typography */
#cms-integrated-module-v1 .cms-iso-tab-btn span {
    white-space: nowrap;
    overflow: hidden; 
    display: inline-block; 
}
#cms-integrated-module-v1 .cms-iso-tab-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.625rem;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke: currentColor;
    fill: none;
}

/* The White Wall */
#cms-integrated-module-v1 .cms-iso-content-wall {
    position: relative;
    z-index: 30; 
    background: white;
    border-radius: 0 0 12px 12px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    min-height: 400px;
    width: 100%;
    padding: 2rem 3rem; /* p-8 md:p-12 */
}

/* Simulated Shadows & Vanishing Mask */
#cms-integrated-module-v1 .cms-iso-content-wall::before {
    content: "";
    position: absolute;
    top: -10px; 
    left: -20px;
    right: -20px;
    height: 250px; 
    z-index: -1; 
    
    background-image: 
        linear-gradient(to bottom, rgba(0,0,0,0.08), transparent 15px),
        linear-gradient(to left, rgba(0,0,0,0.06), transparent 15px),
        linear-gradient(to right, rgba(0,0,0,0.06), transparent 15px);
    
    background-size: 100% 20px, 20px 100%, 20px 100%;
    background-position: 0 10px, 0 10px, 100% 10px;
    background-repeat: no-repeat;
    
    mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 40%, transparent 100%);
    pointer-events: none;
}

/* Content Sections */
#cms-integrated-module-v1 .cms-iso-tab-pane {
    display: block; 
    padding-bottom: 4rem; 
    margin-bottom: 4rem; 
    border-bottom: 1px solid #f3f4f6; 
    scroll-margin-top: 180px; 
    min-height: 100px; 
}
#cms-integrated-module-v1 .cms-iso-tab-pane:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* --- RESPONSIVE: Tablet & Mobile (<1200px) --- */
@media (max-width: 1200px) {
    /* Hide the text label */
    #cms-integrated-module-v1 .cms-iso-tab-btn span {
        display: none;
    }
    
    /* Center the icon and remove spacing since text is gone */
    #cms-integrated-module-v1 .cms-iso-tab-icon {
        margin-right: 0;
        width: 1.5rem; /* Make icon slightly larger for visibility */
        height: 1.5rem;
    }
    
    /* Adjust button to center content */
    #cms-integrated-module-v1 .cms-iso-tab-btn {
        justify-content: center;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* --- MOBILE RESPONSIVENESS (Small Phones) --- */
@media (max-width: 640px) {
    /* Shrink tabs container */
    #cms-integrated-module-v1 .cms-iso-tab-container {
        height: 60px !important;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Shrink buttons further */
    #cms-integrated-module-v1 .cms-iso-tab-btn {
        padding: 0.5rem 0.5rem; /* Reduced padding */
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
    }
    
    /* Shrink icons for very small screens */
    #cms-integrated-module-v1 .cms-iso-tab-icon {
        width: 1.25rem;
        height: 1.25rem;
    }
    
    /* Adjust content wall padding */
    #cms-integrated-module-v1 .cms-iso-content-wall {
        padding: 1.5rem 1rem;
        min-height: 300px;
    }
    
    /* Adjust shadow walls for mobile */
    #cms-integrated-module-v1 .cms-iso-content-wall::before {
        left: -10px;
        right: -10px;
    }
}