/* MyPayKit Block Editor Styles */

.mypaykit-placeholder {
    display: block;
    padding: 16px;
    text-align: center;
}

.mypaykit-placeholder img {
    display: block;
    margin: 0 auto 12px;
    max-width: 160px;
    height: auto;
}

.mypaykit-placeholder .components-base-control {
    width: 100%;
    text-align: left;
}

.mypaykit-form-container{
    padding: 25px;
}

.overlay {
    position: relative;
}

.overlay::before {
    /* Gradient overlay */
    background-image: linear-gradient(top, 
        rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: -moz-linear-gradient(top, 
        rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: -ms-linear-gradient(top, 
        rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: -o-linear-gradient(top, 
        rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    background-image: -webkit-linear-gradient(top, 
        rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    content: attr(data-preview-text); /* Use data attribute for text */
    height: 100%;
    position: absolute;
    width: 100%;
    font-size:14px;
    text-align:center;
}

.mypaykit-preview-button {
    position: absolute;
    width: 207px;
    text-align: center;
    left: 0;
    right: 0;
    color: #fff !important;
    margin-left: auto !important;
    margin-right: auto !important;
    top: 610px;
}

.mypaykit-preview-button:hover {
    background-color: #1d4ed8; /* Darker blue on hover */
}