/* Pixel-matched, clean layers from the user's two-sided club card design. */
.ems-card-gallery{display:flex;justify-content:center;align-items:flex-start;gap:18px;direction:ltr;margin:18px auto;max-width:730px;flex-wrap:wrap}
.ems-card-art{position:relative;container-type:inline-size;display:block;isolation:isolate;width:min(100%,320px);aspect-ratio:598 / 1046;background-size:100% 100%;background-position:center;border-radius:3.3%;overflow:hidden;box-shadow:0 16px 34px #0004;flex:0 0 320px;font-family:'Cairo','Almarai',Tahoma,sans-serif}
.ems-card-art *{box-sizing:border-box}
.ems-card-front{background-image:url('assets/membership-front-blank.webp')}
.ems-card-back{background-image:url('assets/membership-back-blank.webp');color:#fff}
.ems-card-top-school,.ems-card-back-school{position:absolute;top:7.4%;left:37%;width:57%;text-align:center;color:#0f4771;line-height:1.36;display:flex;flex-direction:column;gap:.2cqw}
.ems-card-top-school b,.ems-card-back-school b{font-size:4.35cqw;white-space:nowrap;font-weight:900}
.ems-card-top-school small,.ems-card-back-school small{font-size:2.30cqw;line-height:1.42;white-space:nowrap}
.ems-card-club-title,.ems-card-back-club{position:absolute;left:11%;width:78%;top:31%;display:flex;flex-direction:column;align-items:center;text-align:center;line-height:1.3;color:#062c4f}
.ems-card-club-title b,.ems-card-back-club b{font-size:5.9cqw;font-weight:900}
.ems-card-club-title span,.ems-card-back-club span{font-size:3.45cqw;font-weight:700}
.ems-card-club-title small,.ems-card-back-club small{font-size:2.55cqw;letter-spacing:1px;white-space:nowrap}
.ems-card-role{position:absolute;top:40.5%;left:22%;width:56%;height:6.8%;text-align:center;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.25}
.ems-card-role b{font-size:4.4cqw;font-weight:800;max-width:98%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ems-card-role small{font-size:2.65cqw}
.ems-card-avatar{position:absolute;top:48.4%;left:35.8%;width:29.3%;height:16.8%;object-fit:cover;border-radius:7%;border:1px solid #1b425f;background:#fff;z-index:2}
.ems-card-member-name{position:absolute;left:9%;width:82%;top:65.5%;height:7.6%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2cqw;line-height:1.22;color:#082c53}
.ems-card-member-name b{font-size:5.1cqw;font-weight:900;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ems-card-member-name span{font-size:3.6cqw;font-weight:600;color:#17568c;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ems-card-fields{position:absolute;left:11.3%;width:77.4%;top:73%;height:12%;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:0 8%;color:#06345f;text-align:center;direction:ltr}
.ems-card-fields>div{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;line-height:1.35}
.ems-card-fields strong{font-size:3.15cqw;white-space:nowrap;font-weight:900}
.ems-card-fields span{font-size:3.12cqw;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.ems-card-slogan,.ems-card-back-slogan{position:absolute;left:20%;width:60%;bottom:4.45%;height:5.2%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;line-height:1.3}
.ems-card-slogan b,.ems-card-back-slogan b{font-size:4.12cqw;white-space:nowrap;font-weight:700}
.ems-card-slogan small,.ems-card-back-slogan small{font-size:2.3cqw;white-space:nowrap}
.ems-card-back-school{color:#fff;top:8.6%;left:38%;width:57%}
.ems-card-back-club{top:34.5%;color:#fff}
.ems-card-disclaimer{position:absolute;left:10%;width:80%;top:48%;height:23%;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;text-align:center;line-height:1.57}
.ems-card-disclaimer p{margin:0 2%;font-size:3.25cqw}
.ems-card-disclaimer p:last-child{font-size:3.04cqw;line-height:1.44;color:#e4edf5}
.ems-card-social{position:absolute;top:75.2%;left:22%;width:59%;height:7.6%;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding-left:9%;line-height:1.36}
.ems-card-social span{font-size:3.25cqw}
.ems-card-social b{font-size:3.05cqw}
.ems-card-back-slogan{bottom:4.4%}
.ems-card-panel{margin:16px 0 30px;padding:18px;border:1px solid #24465a;border-radius:20px;background:linear-gradient(140deg,#081c2bf5,#0b2431f5)}
.ems-card-panel h3{margin:0 0 8px}
.ems-card-panel .ems-card-intro{font-size:13px;color:#a9c0ce}
.ems-card-controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;align-items:center;margin:12px 0}
.ems-card-controls button{min-width:150px}
.ems-card-status{border-radius:12px;padding:8px 12px;background:#063044;color:#b0dfde;text-align:center;font-size:13px}
.ems-card-en-form{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;justify-content:center;margin:14px auto;max-width:550px}
.ems-card-en-form label{flex:1;min-width:200px}
.ems-card-en-form input{display:block;width:100%;border:1px solid #39566b;border-radius:10px;background:#081c2b;color:#fff;padding:10px 12px;margin-top:5px;direction:ltr}
.ems-card-en-form button{white-space:nowrap}
.ems-card-gallery .ems-card-art:hover{box-shadow:0 20px 42px #0007,0 0 22px #8af9ff23;transition:box-shadow .2s}
.ems-card-modal{position:fixed;inset:0;z-index:1000;background:#03101aeb;overflow:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:24px 12px}
.ems-card-modal .ems-card-panel{max-width:900px;width:100%}
@media(max-width:760px){.ems-card-gallery{gap:14px}.ems-card-art{width:min(95%,320px);flex-basis:min(95%,320px)}.ems-card-panel{padding:12px}}
#emsCardPrintLayer{display:none!important}
@media print{
 @page{size:A4 landscape;margin:8mm}
 body.ems-card-printing{background:#fff!important;padding:0!important;margin:0!important}
 body.ems-card-printing > *:not(#emsCardPrintLayer){display:none!important}
 body.ems-card-printing #emsCardPrintLayer{display:flex!important;position:static!important;max-width:none!important;width:260mm!important;flex-wrap:nowrap!important;gap:14mm!important;justify-content:center;align-items:flex-start;margin:7mm auto 0!important;padding:0!important}
 body.ems-card-printing #emsCardPrintLayer .ems-card-art{width:88mm!important;flex:0 0 88mm!important;border-radius:3%;box-shadow:none!important;break-inside:avoid;print-color-adjust:exact!important;-webkit-print-color-adjust:exact!important}
}
