/* =========================================================
PAGE
========================================================= */
.resend-email-page {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
box-sizing: border-box;
background-color: #dcecff;
background-image: linear-gradient( 90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.76) 35%, rgba(255,255,255,.30) 62%, rgba(255,255,255,.08) 100% ), url('/images/background/NEW_BG_Image.png');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
overflow: hidden;
}


/* =========================================================
MAIN CARD
========================================================= */

.resend-email-card {
width: 100%;
max-width: 500px;
position: relative;
padding: 42px 48px 38px;
box-sizing: border-box;
border-radius: 24px;
background: rgba(255,255,255,.91);
border: 1px solid rgba(255,255,255,.75);
box-shadow: 0 30px 80px rgba(0,30,70,.25), 0 8px 30px rgba(0,0,0,.10);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
overflow: hidden;
opacity: 0;
transform: translateX(100px);
animation: resendCardSlideIn .75s cubic-bezier(.22,.61,.36,1) forwards;
}


/* =========================================================
CARD BACKGROUND
========================================================= */

.resend-email-card::before {
content: "";
position: absolute;
inset: 0;
background-image: url('/images/background/NEW_BG_Image.png');
background-repeat: no-repeat;
background-position: right center;
background-size: cover;
opacity: .045;
pointer-events: none;
z-index: 0;
}


.resend-email-card::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient( circle at 90% 10%, rgba(0,126,255,.12), transparent 35% ), radial-gradient( circle at 10% 90%, rgba(0,126,255,.06), transparent 30% );
pointer-events: none;
z-index: 0;
}


.resend-email-card > * {
position: relative;
z-index: 2;
}


/* =========================================================
RIGHT TO LEFT ANIMATION
========================================================= */

@keyframes resendCardSlideIn {

0% {
opacity: 0;
transform: translateX(100px);
}

100% {
opacity: 1;
transform: translateX(0);
}
}


/* =========================================================
LOGO
========================================================= */

.resend-logo-wrapper {
width: 105px;
height: 105px;
margin: 0 auto 20px auto;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,.96);
border: 2px solid rgba(255,255,255,.95);
box-shadow: 0 10px 30px rgba(0,55,110,.15), inset 0 0 0 7px #edf6fd;
overflow: hidden;
}


.resend-logo {
width: 85px;
height: 85px;
object-fit: contain;
display: block;
}


/* =========================================================
HEADING
========================================================= */

.resend-heading {
text-align: center;
margin-bottom: 30px;
}


.resend-heading h2 {
margin: 0;
color: #082849;
font-size: 30px;
font-weight: 800;
letter-spacing: -.6px;
}


.resend-heading p {
margin: 10px auto 0;
max-width: 390px;
color: #607997;
font-size: 14px;
line-height: 1.55;
}


/* =========================================================
FORM
========================================================= */

.resend-form-group {
margin-bottom: 22px;
}


.resend-label {
display: block;
margin-bottom: 9px;
font-size: 14px;
font-weight: 700;
color: #112f50;
}


/* =========================================================
INPUT
========================================================= */

.resend-input-wrapper {
position: relative;
width: 100%;
}


.resend-input-icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: #65809d;
font-size: 17px;
z-index: 3;
pointer-events: none;
}


.resend-input {
width: 100%;
height: 56px;
box-sizing: border-box;
border: 1px solid #cfddea;
border-radius: 9px;
background: rgba(255,255,255,.94);
padding: 0 18px 0 52px;
font-size: 14px;
color: #243b53;
outline: none;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}


.resend-input::placeholder {
color: #7890aa;
}


.resend-input:focus {
border-color: #0878e8;
background: #fff;
box-shadow: 0 0 0 4px rgba(8,120,232,.09);
}


/* =========================================================
VALIDATION
========================================================= */

.resend-validation {
display: block;
margin-top: 5px;
font-size: 11px;
}


.resend-summary {
margin-top: 12px;
font-size: 11px;
}


.resend-summary ul {
margin: 0;
padding-left: 18px;
}


/* =========================================================
RESEND BUTTON
========================================================= */

.resend-button {
width: 100%;
height: 56px;
border: 0;
border-radius: 9px;
background: linear-gradient( 90deg, #0869dc, #087ff2 );
color: #fff;
font-size: 17px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 8px 20px rgba(8,120,232,.22);
transition: all .2s ease;
}


.resend-button:hover {
transform: translateY(-1px);
box-shadow: 0 11px 25px rgba(8,120,232,.30);
}


.resend-button:active {
transform: translateY(0);
}


.resend-button-icon {
position: absolute;
right: 20px;
font-size: 19px;
}


/* =========================================================
BACK TO LOGIN
========================================================= */

.resend-back {
margin-top: 25px;
text-align: center;
}


.resend-back a {
color: #0878e8;
font-size: 14px;
font-weight: 700;
text-decoration: none;
transition: all .2s ease;
}


.resend-back a:hover {
color: #005fc5;
text-decoration: underline;
}


.resend-back-icon {
margin-right: 6px;
font-size: 13px;
}


/* =========================================================
FOOTER
========================================================= */

.resend-footer {
margin-top: 22px;
text-align: center;
color: #8aa0b7;
font-size: 11px;
}


/* =========================================================
DARK THEME
========================================================= */

html[data-theme="dark"] .resend-email-page {
background-color: #061525;
background-image: linear-gradient( 90deg, rgba(4,16,30,.96) 0%, rgba(5,23,41,.90) 38%, rgba(5,23,41,.72) 65%, rgba(4,16,30,.65) 100% ), url('/images/background/NEW_BG_Image.png');
}


html[data-theme="dark"] .resend-email-card {
background: rgba(8,24,41,.96);
border-color: rgba(130,180,220,.18);
box-shadow: 0 30px 80px rgba(0,0,0,.50), 0 8px 30px rgba(0,0,0,.30);
}


html[data-theme="dark"] .resend-logo-wrapper {
background: rgba(12,33,53,.95);
border-color: rgba(120,180,225,.25);
box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 7px rgba(25,62,92,.75);
}


html[data-theme="dark"] .resend-heading h2 {
color: #f1f7ff;
}


html[data-theme="dark"] .resend-heading p {
color: #9eb5ca;
}


html[data-theme="dark"] .resend-label {
color: #e5f1fc;
}


html[data-theme="dark"] .resend-input {
background: rgba(12,35,57,.92);
border-color: #31536e;
color: #edf7ff;
}


html[data-theme="dark"] .resend-input::placeholder {
color: #7894ad;
}


html[data-theme="dark"] .resend-input:focus {
background: rgba(13,40,65,.98);
border-color: #1688f7;
box-shadow: 0 0 0 4px rgba(8,120,232,.16);
}


html[data-theme="dark"] .resend-input-icon {
color: #8eabc3;
}


html[data-theme="dark"] .resend-back a {
color: #43a5ff;
}


html[data-theme="dark"] .resend-footer {
color: #718ba3;
}


/* =========================================================
RESPONSIVE
========================================================= */

@media only screen and (max-width: 600px) {

.resend-email-page {
padding: 15px;
background-attachment: scroll;
}


.resend-email-card {
max-width: 500px;
padding: 35px 28px 30px;
border-radius: 20px;
}


.resend-logo-wrapper {
width: 90px;
height: 90px;
}


.resend-logo {
width: 73px;
height: 73px;
}


.resend-heading {
margin-bottom: 25px;
}


.resend-heading h2 {
font-size: 27px;
}


.resend-heading p {
font-size: 13px;
}


.resend-input {
height: 53px;
}


.resend-button {
height: 53px;
}
}


/* =========================================================
SMALL MOBILE
========================================================= */

@media only screen and (max-width: 400px) {

.resend-email-page {
padding: 10px;
}


.resend-email-card {
padding: 30px 20px 25px;
border-radius: 18px;
}


.resend-logo-wrapper {
width: 82px;
height: 82px;
margin-bottom: 16px;
}


.resend-logo {
width: 67px;
height: 67px;
}


.resend-heading h2 {
font-size: 24px;
}


.resend-heading p {
font-size: 12px;
}


.resend-label {
font-size: 13px;
}


.resend-input {
height: 51px;
font-size: 13px;
}


.resend-button {
height: 51px;
font-size: 16px;
}
}