/* Add spacing above the Engraving button */
.cl-img-engraving {
    margin-top: 25px;
    /* adjust as needed: try 20–40px */
}

/* ====== Engraving Option Images ====== */
.cl-img-label img {
    max-width: 140px !important;
    height: auto !important;
    border: none !important;
    /* no border */
}

/* ====== Engraving Button ====== */
.engraving-button {
    font-family: Candara, sans-serif !important;
    font-size: 12pt !important;
    font-weight: 300 !important;
    background-color: #F0EFEF !important;
    color: #000080 !important;
    border: none !important;
    padding: 10px 20px !important;
    cursor: pointer !important;
    animation: pulse 2s infinite !important;
    transform: translateZ(0);
    /* fixes blurry text */
    backface-visibility: hidden;
    /* fixes blurry text */
    margin-top: 10px !important;
    /* 10px gap above button */
}

/* ====== Pulse Animation ====== */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.01);
    }

    /* very subtle scale to reduce blur */
    100% {
        transform: scale(1);
    }
}

/* ====== Dropdown Options ====== */
.engraving-options {
    display: none;
    /* JS toggles this */
    margin-top: 12px;
}

/* ====== Optional: Styling labels ====== */
.cl-img-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    cursor: pointer;
}

/* ====== Text Input ====== */
#cl_img_text {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 12px;
}