/* Service Box Block Styles */

/* Editor styles */
.service-box-container {
    border: 2px dashed #ddd;
    padding: 20px;
    border-radius: 8px;
    background: #f9f9f9;
    position: relative;
}

.service-box-preview {
    position: relative;
}

.service-box-link-indicator {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #0073aa;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 10;
}

.service-box-no-link-indicator {
    position: absolute;
    top: -10px;
    left: -10px;
    background: #f0ad4e;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 10;
    white-space: nowrap;
}

/* Front-end styles */
.wp-block-msb-banking-service-box {
    display: block;
    text-decoration: none;
    color: inherit;
    text-align: center;
    position: relative;
    min-height:332px;
}

.wp-block-msb-banking-service-box:hover {
    text-decoration: none;
    color: inherit;
}

.wp-block-msb-banking-service-box .wp-block-image {
    margin-bottom: 16px;
    margin-left: auto;
    margin-right: auto;
}

.wp-block-msb-banking-service-box .wp-block-heading {
    margin-bottom: 17px;
    text-align: center;
}

.wp-block-msb-banking-service-box .wp-block-paragraph {
    margin-bottom: 0;
    text-align: center;
}

/* Hover effect for the entire box */
.wp-block-msb-banking-service-box:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

/* Reset hover on individual elements inside */
.wp-block-msb-banking-service-box:hover .wp-block-image,
.wp-block-msb-banking-service-box:hover .wp-block-heading,
.wp-block-msb-banking-service-box:hover .wp-block-paragraph {
    transform: none;
}

.wp-block-msb-banking-service-box .service-box-content {
    position: relative;
    display: block;
    margin-bottom: 32px;
}

.wp-block-msb-banking-service-box::after {
    content: "";
    display: block;
    width: 54px;
    height: 15px;
    margin-left: 9px;
    background: url('data:image/svg+xml;utf8,<svg width="54" height="15" viewBox="0 0 54 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 6.41406C0.447715 6.41406 4.82823e-08 6.86178 0 7.41406C-4.82823e-08 7.96635 0.447715 8.41406 1 8.41406L1 7.41406L1 6.41406ZM53.7071 8.12117C54.0976 7.73065 54.0976 7.09748 53.7071 6.70696L47.3431 0.342999C46.9526 -0.0475257 46.3195 -0.0475257 45.9289 0.342999C45.5384 0.733523 45.5384 1.36669 45.9289 1.75721L51.5858 7.41407L45.9289 13.0709C45.5384 13.4614 45.5384 14.0946 45.9289 14.4851C46.3195 14.8757 46.9526 14.8757 47.3431 14.4851L53.7071 8.12117ZM1 7.41406L1 8.41406L53 8.41407L53 7.41407L53 6.41407L1 6.41406L1 7.41406Z" fill="%23D90077"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.3s ease;
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
}