/* ===== GRID CONTAINER ===== */
.hover-grid-wrapper {
    max-width: 100%; /* Ensures the grid container fills 100% width of the screen */
    margin: 0 auto 40px; /* Centers the grid with bottom margin */
    padding: 10px; /* Adds padding around the grid */
}

.hover-grid-container {
    display: grid; /* Uses grid layout */
    gap: 0px; /* No gap between squares, making them touch each other for a "pixel" effect */
    width: 100%; /* Ensures the grid container fills 100% width */
    background: #CCCCCC; /* Light grey background for the grid container */
}

/* ===== SQUARE STYLES ===== */
/* The individual squares in the grid */
.hover-square {
    background: #CCCCCC; /* Default background color for squares */
    border: 0px solid #9D9D9D; /* Optional: remove borders */
    position: relative; /* Used to position the "+" sign inside */
    transition: background-color 0.2s ease; /* Smooth transition for background color */
    cursor: pointer; /* Changes cursor on hover to indicate interactivity */
    width: 100%; /* Ensures square takes up full width of the grid cell */
    height: 100%; /* Ensures square takes up full height of the grid cell */
}

/* ===== PLUS SIGN (the + symbol inside each square) ===== */
.hover-square span {
    position: absolute; /* Positions the "+" sign absolutely within the square */
    top: 50%; left: 50%; /* Centers the "+" sign horizontally and vertically */
    transform: translate(-50%, -50%); /* Perfect centering */
    font-weight: bold; /* Makes the "+" bold */
    font-size: 1.5em; /* Controls the size of the "+" sign */
    color: white; /* White color for the plus sign */
    pointer-events: none; /* Prevents the plus sign from blocking hover events */
    display: none; /* Hides the plus sign by default */
    /* Removed text-shadow for no Gaussian blur effect */
}

/* ===== DOWNLOAD BUTTON STYLES ===== */
.download-btn {
    display: inline-block;
    margin-top: 15px;
    padding: 10px 20px; /* Adjusted padding */
    cursor: pointer;
    background: var(--button-bg-color); /* Background color for the button */
    color: var(--button-text-color); /* Button text color */
    border: var(--button-border-style); /* Border style (optional) */
    border-radius: var(--button-radius); /* Border-radius for rounded corners */
    transition: background 0.2s ease; /* Smooth transition on hover */
    font-family: 'YourFontFamily', sans-serif; /* Font family for the button text */
    text-transform: uppercase; /* Converts text to uppercase */
}

/* Hover state for the download button */
.download-btn:hover {
    background: var(--button-hover-bg-color); /* Background color when hovered */
    box-shadow: var(--button-shadow); /* Optional shadow effect on hover */
}

/* ===== GRID LAYOUT ADJUSTMENTS ===== */

/* For Larger Screens (Desktop and wider) */
.hover-grid-container {
    grid-template-columns: repeat(40, 1fr); /* More columns for even smaller squares on larger screens */
}