/* Covers the payment iframe. Must be fixed, not absolute: absolute anchors to the document, so on a
   long checkout the layer lands at the top of the page and the shopper never sees it. */
#netsEasyModal{
    display: none;
    background-color: rgba(0, 0, 0,0.25);
    height: 100vh;
    width: 100vw;
    position: fixed;
    top:0;
    left:0;
    z-index: 1060; /* above the payment loader (1050) and the iframe */
}

/* Sized for the narrowest phone first: without an explicit width the box shrink-wraps and the message
   wraps to three words per line, and a tall box centred on 40% pushes its heading off the screen. */
#netsEasyModal-content{
    background-color: #fff;
    width: min(92vw, 420px);
    max-height: 90vh;
    overflow-y: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 12px;
}

#netsEasyModal-content h2{
    border-radius: 12px 12px 0px 0px;
    color: white;
    background-color: #005E8C;
    padding: 12px 16px;
    font-size: 1.25rem;
    margin-bottom: 0;
}

#netsEasyModal-content p{
    color: black;
    padding: 20px;
    font-size: 1rem;
    text-align: center;
    white-space: pre-line; /* the server sends one sentence per line */
    margin-bottom: 0;
}

#netsEasyModal-content .button_container{
    display: flex;
    flex-wrap: wrap; /* long labels drop to their own row instead of squeezing into three-line buttons */
    justify-content: center;
    gap: 10px;
    padding: 0 20px 20px;
}

#netsEasyModal-content .button_container button{
    cursor: pointer;
    background-color: #005E8C;
    color: white;
    border: 0;
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 1rem;
}