/* Full-screen checkout page (/checkout/<id>/): the site logo bar (same look as the site header: navy, white logo, 72px; logo at the start, a "back to <show>" button with the poster at the end, both lead to the event page), the Mevalim rainbow line as the split, then only the checkout. */
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body.mem-checkout{display:flex;flex-direction:column;height:100vh;height:100dvh;background:#f7f8fa;color:#1f2937;font-family:Heebo,system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
.mem-co__rainbow{flex:none;height:7px;background:linear-gradient(90deg,#2bb673,#8dc63f,#ffd23f,#f7941d,#ef4136,#ec1e79,#92278f,#1c75bc)}
/* header box: a theme can match its own header through these variables (hook mem_checkout_head) */
.mem-co__head{flex:none;height:var(--mem-co-head-h,72px);background:#2E3192}
.mem-co__head-in{max-width:var(--mem-co-wrap,1200px);margin:0 auto;height:100%;padding:0 var(--mem-co-pad,20px);display:flex;align-items:center}   /* the same box as the Mevalim checkout bar inside the iframe (1200px, 20px padding), so the logo lines up with its back arrow */
.mem-co__head--light{background:#fff;border-bottom:1px solid #E2E3EC}   /* only a dark logo exists: white bar */
.mem-co__logo{display:inline-flex;align-items:center;height:100%;color:#fff;text-decoration:none;margin-inline-start:1px}   /* measured on pixels: the logo ink edge lines up with the iframe bar's back arrow */
.mem-co__logo img{display:block;height:44px;width:auto;position:relative;top:2px}   /* the mark reads high when it is box-centered: lowered 2px for the eye */
.mem-co__logo span{font-weight:900;font-size:20px}
.mem-co__head--light .mem-co__logo{color:#2E3192}
.mem-co__back{margin-inline-start:auto;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 4px;color:#fff;text-decoration:none;max-width:min(60%,440px);opacity:.92;transition:opacity .15s}   /* quiet: no box, a plain link with the poster */
.mem-co__back:hover{opacity:1}
.mem-co__back img{width:30px;height:36px;object-fit:cover;border-radius:4px;flex:none;display:block}
.mem-co__back span{font-size:15px;font-weight:700;white-space:nowrap}
.mem-co__back:hover span{text-decoration:underline;text-underline-offset:3px}
.mem-co__back svg{width:16px;height:16px;flex:none;opacity:.7}   /* the arrow points out of the bar: left in RTL, right in LTR */
[dir="rtl"] .mem-co__back svg{transform:scaleX(-1)}
.mem-co__head--light .mem-co__back{color:#2E3192}
.mem-co__head--light .mem-co__back{color:#2E3192;border-color:#2E3192}
.mem-co__head--light .mem-co__back:hover{background:#EEF0FA}
@media (max-width:760px){.mem-co__head{height:var(--mem-co-head-h-m,56px)}.mem-co__head-in{padding:0 var(--mem-co-pad-m,20px)}.mem-co__logo img{height:36px}.mem-co__back{height:40px;gap:8px}.mem-co__back img{width:26px;height:31px}.mem-co__back span{font-size:14px}.mem-co__back svg{display:none}}
.mem-co__skip{position:absolute;top:0;inset-inline-start:0;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.mem-co__skip:focus{width:auto;height:auto;clip:auto;clip-path:none;inset-inline-start:12px;top:12px;background:#fff;padding:8px 12px;border-radius:8px;z-index:5;color:#2E3192;font-weight:700}
.mem-co__frame{flex:1;min-height:0;display:flex}
.mem-co__frame iframe{flex:1;width:100%;min-height:0;border:0;display:block;background:#fff}   /* fills the visible screen exactly (dvh): the checkout's own bottom bar stays on screen on phones */
.mem-co__msg{margin:auto;padding:32px;background:#fff;border-radius:16px;font-size:18px;font-weight:700;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.06)}
.mem-co__msg a{display:inline-block;margin-top:14px;color:#2E3192;font-weight:700}