/* Card Image Container */
.cg-img-container {
    width: 100%;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Card Image */
.cg-card-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: none; /* Initially hidden */
}

.cg-card-image.loaded {
    display: block; /* Display when loaded */
}

.cg-card-image.error {
    background-color: #f9dcdc; /* Optional: Error-specific styling */
}

#cg-card-container {
    margin: 0;
    padding: 0;
}


/* Allow the parent container to adapt dynamically */
div.wpb_wrapper {
    width: 100%; /* Allow full-width scaling */
    max-width: none; /* Remove width constraints */
    height: auto; /* Adjust height dynamically */
    padding: 0; /* Remove internal padding */
}

/* Card container with vertical aspect ratio */
#cg-card-container {
    width: 100%; /* Full width of parent container */
    max-width: 300px; /* Set the correct width for vertical cards */
    aspect-ratio: 3 / 5; /* Maintain vertical card aspect ratio */
    margin: 20px auto; /* Center the container horizontally */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden; /* Prevent clipping */
}

/* Inner image container */
.cg-img-container {
    width: 100%; /* Match the width of the container */
    height: 100%; /* Match the height of the container */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* Card image */
.cg-img-container img {
    width: 100%; /* Fit within the container width */
    height: auto; /* Maintain vertical aspect ratio */
    object-fit: contain; /* Ensure the entire card image is visible */
    display: block; /* Prevent inline gaps */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    #cg-card-container {
        max-width: 90%; /* Slightly smaller width for mobile devices */
    }

    .cg-img-container img {
        width: 100%; /* Scale image for smaller screens */
        height: auto;
    }
}

/* Larger size for ultra-wide screens */
@media (min-width: 1920px) {
    #cg-card-container {
        max-width: 400px; /* Slightly larger for very wide screens */
    }
}

#cg-card-explanation {
    max-width: 600px; /* Set a standard horizontal width */
    margin: 20px auto; /* Center the box horizontally */
    padding: 20px; /* Add padding for text readability */
    background-color: rgba(249, 249, 249, 0.6); /* Light background with opacity */
    border: 2px solid rgba(204, 204, 204, 0.8); /* Subtle border with matching opacity */
    border-radius: 10px; /* Rounded corners for a softer look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    font-size: 16px; /* Consistent text size */
    color: #333; /* Text color for readability */
    word-wrap: break-word; /* Handle long words or links gracefully */
    overflow: hidden; /* Avoid overflow issues */
    backdrop-filter: blur(4px); /* Optional: Add a slight blur to the background */
}
/* Instruction Text */
#cg-instruction-text {
    text-align: center;
    margin-top: 10px; /* Space below the card */
    font-size: 16px; /* Default font size */
    color: #555; /* Gray text color */
}

/* Buttons Container */
#cg-buttons {
    text-align: center; /* Center the buttons */
    margin-top: 20px; /* Space below the explanation */
    width: 100%; /* Full width */
    display: block; /* Ensure proper block layout */
}

/* Buttons Styling */
#cg-buttons button {
    display: inline-block; /* Inline for consistent spacing */
    margin: 10px auto; /* Center each button */
    background-color: #0073aa; /* Button background */
    color: #fff; /* Text color */
    border: none; /* Remove default borders */
    padding: 10px 20px; /* Padding for button size */
    font-size: 16px; /* Font size */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor for interactivity */
    position: relative; /* Reset position to relative */
    float: none; /* Remove any floating behavior */
    clear: both; /* Clear floats from parent containers */
}

#cg-buttons button:hover {
    background-color: #005177; /* Darker blue on hover */
}

/* Responsive Design */
@media (max-width: 600px) {
    #cg-card-container {
        max-width: 100%; /* Full width on smaller screens */
        max-height: 60vh; /* Reduce height for better usability */
    }

    #cg-card-container img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* Ensure the entire image is visible */
    }
}

    #cg-card-explanation {
        font-size: 14px; /* Smaller font size for readability */
        padding: 8px; /* Adjust padding */
    }

    #cg-buttons button {
        font-size: 14px; /* Adjust font size */
        padding: 8px 16px; /* Adjust button padding */
    }
}


/* Desktop-specific size adjustments */
@media (min-width: 1024px) {
    #cg-card-container {
        max-width: 320px; /* Larger size for desktops */
        max-height: 400px; /* Adjust height proportionally */
    }

    #cg-card-container img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* Maintain image aspect ratio */
    }
}