/* =========================================
   REVIEWS GRAPHIC WIDGET (Interactive)
   File: assets/css/bali-reviews-image.css
   ========================================= */

.bl-reviews-graphic-wrap {
    max-width: 500px;
    margin: 20px auto 60px;
    padding: 0 20px;
    position: relative;
    font-family: 'Delight', sans-serif;
}

/* The Card Container */
.bl-reviews-link-wrap {
    display: block;
    position: relative;
    box-shadow: none;
    overflow: hidden;
    /* FORCE 4:5 ASPECT RATIO (Kept from your code) */
    aspect-ratio: 4 / 5;
    background: #f0f0f0;
    cursor: pointer; /* Changed to pointer so user knows to click */
    -webkit-tap-highlight-color: transparent;
}

.bl-reviews-img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; 
}

/* --- 1. HIDDEN OVERLAY (Blue Glass) --- */
.bali-card-overlay {
    position: absolute;
    inset: 0; /* Cover the whole image */
    background-color: rgba(76, 110, 245, 0.9); /* Brand Blue */
    opacity: 0; /* Hidden by default */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
    color: white;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(5px);
    z-index: 20; 
}

/* Overlay Typography */
.overlay-content h3 { 
    margin: 0 0 10px 0; 
    font-size: 28px; 
    color: #fff;
}
.overlay-content p { 
    font-family: 'Open Sans', sans-serif;
    font-size: 16px; 
    line-height: 1.6; 
}

/* --- 2. NAVIGATION CROSS (Bottom Left) --- */
.bali-fab-btn {
    position: absolute;
    bottom: 5px;  /* Position: Bottom */
    left: 5px;    /* Position: LEFT (As requested) */
    width: 44px;  
    height: 44px; 
    
    /* Glassy Look */
    background-color: rgba(0, 0, 0, 0.3); 
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    backdrop-filter: blur(8px);
    
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30; 
    transition: all 0.3s ease;
    padding: 0; /* Reset browser default */
}

.bali-plus-icon {
    transition: transform 0.3s ease;
}

/* --- 3. EXISTING SUBTLE TEXT (Bottom Right) --- */
.bl-reviews-subtle-link {
    position: absolute;
    bottom: 2px; 
    right: 45px;
    z-index: 30; 
    color: #000000; /* Starts Black */
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    /* Underline Style (Kept from your code) */
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-decoration-color: #EE9F86 !important;
    text-underline-offset: 4px;
    
    transition: color 0.3s ease;
}

/* --- INTERACTIVE STATES (When Clicked) --- */

/* Reveal Overlay */
.interactive-card.is-open .bali-card-overlay {
    opacity: 1;
}

/* Button turns White */
.interactive-card.is-open .bali-fab-btn {
    background-color: #ffffff; 
    color: #000;
}

/* Icon Rotates to X */
.interactive-card.is-open .bali-plus-icon {
    transform: rotate(45deg);
}

/* Change "Based on..." text to White */
.interactive-card.is-open .bl-reviews-subtle-link {
    color: #ffffff; 
}

/* =========================================
   MOBILE FIXES (Maximum Space Optimization)
   ========================================= */
@media (max-width: 480px) {
    .bl-reviews-graphic-wrap {
        padding: 0 10px;
        margin-bottom: 40px;
    }

    /* 1. Container Padding */
    .bali-card-overlay {
        padding: 20px 15px; /* Tighter padding on sides */
        align-items: center; /* Vertically center content */
    }

    /* 2. HEADINGS (The "Fast collection..." text) */
    .overlay-content h3 { 
        font-size: 16px !important; /* Reduced from 20px */
        line-height: 1.2 !important; /* Tighter spacing */
        margin-bottom: 4px;
    }
    
    /* 3. PARAGRAPH (The review body) */
    .overlay-content p { 
        font-size: 13px !important; /* Reduced from 15px */
        line-height: 1.4 !important; /* Readable but compact */
        margin-bottom: 0;
    }

    /* 4. Spacing Between Reviews */
    .review-block {
        margin-bottom: 10px; /* Space between reviews */
        padding-bottom: 8px;
        border-bottom: 1px solid rgba(255,255,255,0.15);
    }
    
    /* Remove border/margin from the last one so it fits */
    .review-block:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    /* 5. Positioning Adjustments */
    .bali-fab-btn {
        bottom: 10px; 
        left: 10px;   
        width: 38px;
        height: 38px;
    }
    
    .bl-reviews-subtle-link {
        font-size: 10px;
        bottom: 5px; 
        right: 45px; 
    }
}