.cr-popup {
box-sizing: border-box;
width: 100%;
max-width: 1180px;
margin: 0 auto;
background: #0f3b6a;
padding: 56px 64px;
display: flex;
gap: 36px;
color: #ffffff;
font-family: "Montserrat", Arial, sans-serif;
align-items: center;
box-shadow: 0 18px 36px rgba(4, 9, 15, 0.6);
position: relative;
}
.cr-left { flex: 1 1 60%; min-width: 300px; }
.cr-title { margin: 0; font-weight: 700; letter-spacing: 8px; font-size: 72px; line-height: 0.92; color: #fff; text-transform: uppercase; }
.cr-subtitle { font-weight: 300; font-style: italic; letter-spacing: 0.6px; font-size: 28px; margin-top: 8px; color: rgba(235,245,255,0.95); }
.cr-desc { margin: 18px 0 28px; max-width: 520px; color: rgba(255,255,255,0.92); font-size: 14px; line-height: 1.5; }
.cr-form-wrap { max-width: 560px; }
.cr-inline { display:flex; align-items:center; gap:18px; }
/* INPUT: match the provided image 5 */
.cr-inline .tnp-email {
flex: 1;
height: 56px;
padding: 12px 30px; /* roomy left padding like the image */
border-radius: 34px; /* full pill */
border: 0;
background: linear-gradient(90deg, #eaf6ff 0%, #dff4ff 55%); /* pale blue horizontal gradient */
color: #0d3b5c;
font-size: 20px;
font-style: italic;
font-weight: 300;
box-shadow:
inset 0 6px 14px rgba(255,255,255,0.75), /* bright inner highlight on top-left */
inset 0 -8px 18px rgba(0,0,0,0.03), /* subtle inner depth */
0 10px 18px rgba(12,33,59,0.35); /* soft external shadow to lift the whole pill */
outline: none;
transition: box-shadow .15s ease, transform .06s ease;
}
.cr-inline .tnp-email:focus {
box-shadow:
inset 0 6px 18px rgba(255,255,255,0.8),
inset 0 -8px 20px rgba(0,0,0,0.04),
0 14px 26px rgba(12,33,59,0.45);
transform: translateY(-1px);
}
.cr-inline .tnp-email::placeholder {
color: rgba(13,59,92,0.40);
font-style: italic;
font-size: 20px;
opacity: 1;
}
/* SUBSCRIBE BUTTON: small raised pill overlapping input (image 5) */
.cr-inline .tnp-submit {
margin-left: -68px; /* heavier overlap to match the visual in image 5 */
padding: 12px 26px;
height: 44px;
min-width: 140px;
border-radius: 28px;
background: linear-gradient(180deg, #7fe2ff 0%, #57b8ea 45%, #2f8cdc 100%);
color: #07324f;
font-weight: 800;
font-size: 20px;
border: 0;
cursor: pointer;
box-shadow:
0 20px 30px rgba(6,31,54,0.45), /* strong drop shadow like the example */
inset 0 -8px 18px rgba(0,0,0,0.07); /* subtle inner darkening */
z-index: 4;
position: relative;
transform: translateY(-6px); /* raised look */
display: inline-flex;
align-items: center;
justify-content: center;
letter-spacing: .5px;
}
.cr-inline .tnp-submit:active { transform: translateY(-3px); box-shadow: 0 12px 18px rgba(6,31,54,0.35); }
/* left seam between input and button: subtle shadow to make the button feel separate */
.cr-inline .tnp-submit::before {
content: "";
position: absolute;
left: -28px;
top: 6px;
bottom: 6px;
width: 28px;
border-radius: 24px 0 0 24px;
background: linear-gradient(90deg, rgba(0,0,0,0.08), rgba(255,255,255,0.02));
pointer-events: none;
z-index: -1;
}
/* For narrow screens stack but keep similar look */
@media (max-width: 900px) {
.cr-popup { flex-direction: column; padding: 28px; max-width: 680px; }
.cr-inline { flex-direction: column; align-items: stretch; gap: 12px; }
.cr-inline .tnp-submit { margin-left: 0; align-self: flex-end; transform: none; box-shadow: 0 10px 16px rgba(6,31,54,0.35); }
.cr-inline .tnp-submit::before { display:none; }
.cr-inline .tnp-email { height: 48px; font-size: 18px; padding: 12px 20px; border-radius: 28px; }
.cr-inline .tnp-submit { padding: 10px 22px; min-width: 120px; border-radius: 28px; font-size: 18px; }
}
