/* Modal - single-column centered card matching the provided design
	 Desktop and mobile share the same visual style (stacked, centered card).
*/
:root{
	--kem-grad-start: #08324a; /* deep teal-blue */
	--kem-grad-end: #0b7a3a;   /* vibrant green */
	--kem-accent: #f0b400;     /* yellow CTA */
	--kem-white: #ffffff;
}

.kem-hidden{display:none}
.kem-modal{position:fixed;inset:0;z-index:9999;font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial}
.kem-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.6)}

.kem-modal-panel{position:relative;max-width:420px;margin:6vh auto;background:linear-gradient(180deg,var(--kem-grad-start),var(--kem-grad-end));border-radius:20px;padding:34px 30px;color:var(--kem-white);box-shadow:0 30px 80px rgba(3,11,18,0.7);overflow:hidden}
.kem-modal-close{position:absolute;right:14px;top:12px;background:transparent;border:0;font-size:22px;z-index:5;color:rgba(255,255,255,0.9)}

.kem-modal-content{display:block;text-align:center}
.kem-modal-logo{display:block;margin:0 auto 8px auto}
.kem-modal-logo img{max-width:220px;height:auto;display:block;margin:0 auto}

.kem-modal-card{padding:0 6px 6px 6px}

.kem-modal-copy h3{font-size:1.6rem;margin:8px 0 12px 0;font-weight:700;color:var(--kem-white);line-height:1.05}
.kem-modal-copy p{margin:0 auto 20px auto;color:rgba(255,255,255,0.92);line-height:1.4;font-size:0.98rem;max-width:320px}

.field{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:18px;width:100%}
.field-label{font-weight:700;color:var(--kem-white);margin-bottom:8px;font-size:1rem}
.field input{width:100%;background:transparent;border:0;border-bottom:2px solid rgba(255,255,255,0.85);padding:10px 6px;color:var(--kem-white);font-size:1.02rem}
.field input::placeholder{color:rgba(255,255,255,0.6)}
.field input:focus{outline:none;border-bottom-color:var(--kem-white);}

.kem-modal-actions{display:flex;justify-content:center;margin-top:6px}
.kem-submit{background:linear-gradient(180deg,var(--kem-accent),#e5a800);color:var(--kem-white);border:none;padding:12px 40px;border-radius:999px;font-weight:800;font-size:1.05rem;letter-spacing:1px;cursor:pointer;box-shadow:0 10px 30px rgba(224,163,36,0.28)}
.kem-submit:active{transform:translateY(1px)}

.kem-modal-error{color:#ffb3b3;margin-top:10px;text-align:center}

/* Keep layout consistent on narrow screens - same visual card */
@media (max-width:420px){
	.kem-modal-panel{max-width:92%;padding:24px 20px;border-radius:16px}
	.kem-modal-copy h3{font-size:1.35rem}
	.field-label{font-size:0.98rem}
	.kem-submit{padding:12px 32px;font-size:1rem}
}

/* Accessibility focus */
.kem-modal input:focus{box-shadow:0 0 0 4px rgba(240,180,20,0.08)}