.custom-coupons-grid {
    display: grid !important;
    gap: 10px !important;
}

.coupon-item {
    border: 1px solid #ddd !important;
    padding: 5px !important;
    text-align: center !important;
    border-radius: 5px !important;
    background: #f9f9f9 !important;
}

/* Parent container */
.image-crop-container {
    width: 400px !important; /* Desired width */
    height: 400px !important; /* Desired height */
    overflow: hidden !important; /* Hide overflow */
    position: relative !important;
}

/* Child image */
.image-crop-container img {
    width: 100% !important; /* Ensure the image covers the container */
    height: auto !important; /* Maintain aspect ratio */
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* Center the image */
}

    /* Container styling */
.coupon-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important; /* Adjust as needed */
    margin: 5px auto !important;
    padding: 5px !important;
}

/* Image styling */
.image-block {
    border-radius: 8px !important;
}

.coupon-image {
    height: auto !important;
    max-width:100% !important;
}

/* Button styling */
.apply-coupon-btn {
    margin-top: 7px !important;
    padding: 5px 16px !important;
    font-size: 13px !important;
    font-weight: bold !important;
    color: #fff !important;
    background-color: #e40d36 !important;
    border: none !important;
    border-radius: 18px !important;
    cursor: pointer !important;
    text-transform: uppercase !important;
    min-height: var(--btn-height, 32px) !important;
    transition: background-color 0.3s ease, transform 0.2s ease !important;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2) !important;
    transition: box-shadow 0.3s ease, transform 0.2s ease !important;
}

.apply-coupon-btn:hover {
    background-color: #e40d36 !important;
    color: #fff !important;
    transform: scale(1.05) !important;
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.3) !important; /* Slightly larger and darker shadow */
    transform: translateY(-2px) !important; /* Adds a lifting effect */
}

.apply-coupon-btn:active {
    background-color: #e40d36 !important;
    color: #fff !important;
    transform: scale(0.95) !important;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2) !important; /* Smaller and softer shadow */
    transform: translateY(1px) !important; /* Simulates a pressed button */
}

@media (max-width: 768px) {
    .apply-coupon-btn {
        padding: 8px 16px !important; /* Smaller padding for mobile */
        font-size: 12px !important; /* Slightly smaller font size for better fit */
        /* border-radius: 6px !important; Adjusted border radius */
        background-color: #d10c32 !important; /* Slightly darker background for mobile */
    }
}

@media (max-width: 548px) {
    .apply-coupon-btn {
        padding: 5px 16px !important; /* Smaller padding for mobile */
        font-size: 10px !important; /* Slightly smaller font size for better fit */
        /* border-radius: 6px !important; Adjusted border radius */
        background-color: #d10c32 !important; /* Slightly darker background for mobile */
    }
}