.shopypaste-iframe-fill-data-panel,
.shopypaste-iframe-save-item-panel,
.shopypaste-iframe-save-cart-panel,
.shopypaste-iframe-order-placed-panel {
    border: 0;
    width: 100%;
    /* width: 100%; */
    /* 20250209 only checked for Save item */
}

.shopypaste-iframe-fill-data-panel,
.shopypaste-iframe-save-item-panel,
.shopypaste-iframe-save-cart-panel {
    height: 75px;
    /* TODO 50px; make it responsive */
    /* 20250209 reduced from 100px to 75px */
}

.shopypaste-iframe-order-placed-panel {
    height: 160px;
    /* TODO 50px; make it responsive */
}

.shopypaste-iframe-fill-cart-panel {
    border: 0;
    width: 100%;
    height: 100%;
    margin: auto;
}

.shopypaste-modal-container {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 1000000;
    /* TODO allow to be overridden by setting (in case another plugin conflicts with it) */
}

.shopypaste-modal-blanket {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 1000001;
    /* TODO if container z-index overridden, use a value greater than that */
    opacity: 75%;
    background-color: #127464;
    /* TODO use brand color, based on theme */
}

.shopypaste-modal-iframe-container {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    margin: auto;
    /* text-align: center; */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    max-width: 700px;
    max-height: 900px;
    padding: 32px;
    margin: auto;
    z-index: 1000002;
    /* TODO if container z-index overridden, use a value greater than that and greater than that of the blanket */
}

.shopypaste-modal-close-button-container {
    position: absolute;
    border-radius: 16px;
    width: 32px;
    height: 32px;
    overflow: hidden;
    right: 0;
    top: 0;
    margin: 16px;
    z-index: 1000003;
    /* TODO if container z-index overridden, use a value greater than that and greater than that of the blanket */
    cursor: pointer;
    background-color: #E5FAF6;
    /* TODO use brand color, based on theme */
    color: #00AA89;
    /* TODO use brand color, based on theme */
}