/* ═══ Checkout page: the site header, then the Mevalim checkout iframe filling the rest of the screen ═══ */
body.checkout-page{min-height:100%}
body.checkout-page{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;background:#f7f8fa}
/* logged in: the WordPress admin bar takes the top 32px (46px on phones); the page starts under it */
body.checkout-page.admin-bar{height:calc(100vh - 32px);height:calc(100dvh - 32px)}
@media (max-width:782px){body.checkout-page.admin-bar{height:calc(100vh - 46px);height:calc(100dvh - 46px)}}
body.checkout-page .rainbow,body.checkout-page .top{flex:none}
.checkout{flex:1;min-height:0;display:flex}
.checkout iframe{flex:1;width:100%;min-height:0;border:0;display:block;background:#fff}
.co-msg{margin:auto;text-align:center;padding:40px 24px}
.co-msg p{font-size:22px;font-weight:800;margin:0 0 18px}
.co-msg a{display:inline-block;background:var(--pink);color:var(--ink);font-weight:800;font-size:16px;padding:11px 30px;border-radius:999px;text-decoration:none}
.co-msg a:hover{background:#edbb21}
/* the bar: dark ink like the checkout's own bar under it, the white logo at the start, "back to the show page" with the poster at the end; the rainbow line sits under the bar as the split (the mz-show checkout bar) */
body.checkout-page > .rainbow:not(.rainbow--split){display:none}
.rainbow--split{flex:none}
.top--checkout{background:var(--ink);border-bottom:0}
.top--checkout .wrap{justify-content:space-between}
.top--checkout .logo{translate:0 2px}   /* the mark sits a touch high next to the button: nudged down so it reads centred */
.co-back{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 12px;border:2px solid rgba(255,255,255,.45);border-radius:999px;font-weight:800;font-size:15px;color:#fff;transition:background .2s,border-color .2s,transform .2s}
.co-back:hover{background:rgba(255,206,50,.18);border-color:var(--pink);transform:translateY(-2px)}
.co-back img{width:26px;height:31px;object-fit:cover;border-radius:6px;flex:none}
.co-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:760px){
  .co-back{height:40px;padding:0 12px 0 10px;font-size:14px;gap:8px}
  .co-back svg{display:none}
}