/* Approved FlupFlap login. All form rules exclude the authenticated checkout. */
.login-layout{display:contents}
.login-layout:has(.recharge-active) .login-story{display:none}
.login-layout:has(.recharge-active) .login-features{display:none}
.login-layout:has([data-checkout-resume]) .login-features{display:none}
body:has(.login-layout):not(:has(.recharge-active)){
  color:#090d43;
  background:radial-gradient(ellipse at 16% 31%,#c9e8ff 0,transparent 47%),radial-gradient(ellipse at 90% 86%,#c8e7ff 0,transparent 43%),linear-gradient(125deg,#eaf6ff,#f7fbff 58%,#e4f3ff);
  position:relative;isolation:isolate;
}
body:has(.login-layout):not(:has(.recharge-active))::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1536' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='b' x2='1' y2='1'%3E%3Cstop stop-color='%2378bcff'/%3E%3Cstop offset='1' stop-color='%23d9f0ff' stop-opacity='.1'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 0H435C340 122 172 224 0 286Z' fill='url(%23b)'/%3E%3Cpath d='M0 0H215C150 105 75 157 0 192Z' fill='%23c4e5ff'/%3E%3Cpath d='M1024 725C780 810 649 965 665 1160C807 1135 936 1030 1024 953Z' fill='url(%23b)' opacity='.8'/%3E%3Cpath d='M1024 1382C911 1423 863 1481 779 1536H1024Z' fill='%2397ceff' opacity='.5'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}
body:not(:has(.recharge-active)) .site-header{width:100%;max-width:680px;height:52px;min-height:52px;padding:10px 24px;justify-content:flex-end;gap:14px;flex-wrap:nowrap}
body:not(:has(.recharge-active)) .site-header>.brand,body:not(:has(.recharge-active)) .site-header nav a:not([href='/support']){display:none}
body:not(:has(.recharge-active)) .site-header nav{display:flex;font-size:14px;font-weight:500;color:#090d43;border-inline-end:1px solid #b9cbe2;padding-inline-end:14px}
body:not(:has(.recharge-active)) .site-header a[href='/support']{display:flex;align-items:center;gap:7px;min-height:36px}
body:not(:has(.recharge-active)) .site-header a[href='/support']::before{content:'';display:block;width:20px;height:20px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M4 14v-3a8 8 0 0 1 16 0v3M4 12H2v7h4v-7H4m16 0h2v7h-4v-7h2m0 7c0 3-3 3-7 3'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(:has(.recharge-active)) .site-header .language-picker{position:relative;font:600 14px/1.2 'DM Sans',sans-serif}
body:not(:has(.recharge-active)) .site-header .language-picker>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
body:not(:has(.recharge-active)) .site-header .language-picker::before{content:'';position:absolute;inset-inline-start:11px;width:20px;height:20px;pointer-events:none;background:#090d43;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M4 6h16M4 18h16M12 2c-7 7-7 13 0 20 7-7 7-13 0-20'/%3E%3C/svg%3E") center/contain no-repeat}
body:not(:has(.recharge-active)) .site-header .language-picker select{width:124px;max-width:154px;min-height:38px;border:1px solid #c7d4e9;border-radius:11px;padding:6px 8px;padding-inline-start:36px;background:#fffffff0;color:#090d43}
.login-layout:not(:has(.recharge-active)){display:block;max-width:550px;margin:0 auto;padding:0 28px 18px}
.login-story{display:flex;justify-content:center;padding:2px 0 10px}
.login-service{display:block;width:232px;max-width:74%;text-decoration:none}
/* The official PNG contains an old caption: exclude that caption without altering the logo pixels. */
.login-service img{display:block;width:100%;height:auto;clip-path:polygon(0 0,100% 0,100% 75%,24% 75%,24% 100%,0 100%);margin-bottom:-12px}
.login-layout .checkout-main:not(.recharge-active){width:100%;min-width:0;max-width:none;padding:0;margin:0}
.login-layout .checkout-main:not(.recharge-active) .flupflap-main-content{padding:0;display:flex;flex-direction:column;gap:0}
.login-layout .checkout-main:not(.recharge-active) .test-banner{display:none}
.login-layout .checkout-main:not(.recharge-active) .login-panel{display:block;max-width:none;width:100%;margin:0;padding:20px 24px 16px;border:1px solid #ffffffc9;border-radius:18px;box-shadow:0 18px 52px #468bba15;background:#fffffffa}
.login-layout .checkout-main:not(.recharge-active) .login-panel h1{font:800 clamp(25px,6.4vw,34px)/1.2 Manrope,sans-serif;text-align:start;color:#090d43;margin:0 0 5px;letter-spacing:-.045em}
.login-layout .checkout-main:not(.recharge-active) .auth-intro{font-size:14px;line-height:1.5;text-align:start;color:#697499;margin:0 0 12px}
.login-layout .checkout-main:not(.recharge-active) .field{position:relative;display:block;margin-bottom:9px}
.login-layout .checkout-main:not(.recharge-active) .field label{display:block;font-size:14px;font-weight:600;color:#090d43;margin:0 0 6px}
.login-layout .checkout-main:not(.recharge-active) input{width:100%;min-height:44px;border:1px solid #c9d1e7;background:#fff;border-radius:10px;padding:10px 12px;color:#090d43;font:400 14px 'DM Sans',sans-serif;box-shadow:none}
.login-layout .checkout-main:not(.recharge-active) input::placeholder{color:#818eb1;opacity:1}
.login-layout .checkout-main:not(.recharge-active) #email,.login-layout .checkout-main:not(.recharge-active) #password{padding-inline-start:43px}
.login-layout .checkout-main:not(.recharge-active) .field:has(>#email)::after,.login-layout .checkout-main:not(.recharge-active) .password-control:has(#password)::before{content:'';position:absolute;inset-inline-start:14px;bottom:12px;width:20px;height:20px;background:#090d43;pointer-events:none;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='1'/%3E%3Cpath d='m2 5 10 8L22 5'/%3E%3C/svg%3E") center/contain no-repeat}
.login-layout .checkout-main:not(.recharge-active) .password-control{position:relative;display:block}
.login-layout .checkout-main:not(.recharge-active) .password-control:has(#password)::before{z-index:1;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6'%3E%3Crect x='4' y='10' width='16' height='12' rx='2'/%3E%3Cpath d='M7 10V7a5 5 0 0 1 10 0v3M12 15v4'/%3E%3C/svg%3E")}
.login-layout .checkout-main:not(.recharge-active) .password-control input{padding-inline-end:50px}
.login-layout .checkout-main:not(.recharge-active) .password-control .button{position:absolute;inset-inline-end:2px;top:0;width:44px;min-height:44px;border:0;box-shadow:none;background:transparent;color:#687599;padding:10px;font-size:0}
.login-layout .checkout-main:not(.recharge-active) .password-control .button::after{content:'';display:block;width:23px;height:23px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 3l18 18M4.5 6.5 2 12c5 9 15 9 20 0l-3-4c-4-4-7-4-10-3M9 9a4 4 0 0 0 6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.login-layout .checkout-main:not(.recharge-active) .password-control .button[aria-pressed=true]::after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M2 12c5-9 15-9 20 0-5 9-15 9-20 0Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")}
.login-layout .checkout-main:not(.recharge-active) #forgot-password{display:block;width:auto;color:#0065ed;margin:-8px 0 8px auto;font-size:14px;font-weight:400;text-decoration:underline;box-shadow:none;background:transparent;border:0;border-radius:4px;min-height:32px;padding:3px 0}
.login-layout .checkout-main:not(.recharge-active) button[type=submit]{position:relative;width:100%;min-height:48px;margin:0;background:linear-gradient(110deg,#00b7f0,#0062ff);color:white;border:0;border-radius:13px;font-size:18px;font-weight:700;box-shadow:0 5px 14px #0078ff0b;padding:12px 40px}
.login-layout .checkout-main:not(.recharge-active) #login-form button[type=submit]::after{content:'→';position:absolute;inset-inline-end:18px;top:50%;transform:translateY(-52%);font:300 28px/1 sans-serif}
.login-divider{display:flex;align-items:center;gap:15px;color:#697499;font-size:14px;margin:8px 0}
.login-divider::before,.login-divider::after{content:'';height:1px;flex:1;background:#ccd6e7}
.login-layout .checkout-main:not(.recharge-active) .auth-choices{display:block;margin:0;padding:0;background:transparent;border:0;border-radius:0}
.login-layout .checkout-main:not(.recharge-active) .auth-choices .button{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:44px;padding:10px 8px;border:1px solid #0067ff;border-radius:13px;background:#fff;color:#0065ed;box-shadow:none;font-size:15px;font-weight:600;line-height:1.3;white-space:normal}
.login-layout .checkout-main:not(.recharge-active) #choose-register::before{content:'';flex:none;width:27px;height:27px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='9' cy='6' r='4'/%3E%3Cpath d='M1 22v-3c0-7 16-7 16 0v3M19 8v8M15 12h8'/%3E%3C/svg%3E") center/contain no-repeat}
.login-layout .checkout-main:not(.recharge-active) .login-guest-link{text-align:center;margin:8px 0 0}
.login-layout .checkout-main:not(.recharge-active) .login-guest-link .button{display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:100%;min-height:44px;padding:10px 16px;border:0;border-radius:8px;box-shadow:none;background:transparent;color:#0065d9;font-size:15px;font-weight:600;line-height:1.4;white-space:normal;text-decoration:none}
.login-layout .checkout-main:not(.recharge-active) .login-guest-link .button::after{content:'';flex:none;width:18px;height:18px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16m-6-6 6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.login-layout .checkout-main:not(.recharge-active) .login-guest-link .button:hover:not(:disabled){background:#e5f1ff;text-decoration:underline}
.login-layout .checkout-main:not(.recharge-active) .login-guest-link .button:focus-visible{background:#e5f1ff;outline:3px solid #337fdb;outline-offset:3px}
.login-layout .checkout-main:not(.recharge-active) .login-guest-link .button:active:not(:disabled){background:#cfe5ff;color:#004aa3}
.login-layout .checkout-main:not(.recharge-active) [hidden]{display:none!important}
.login-layout .checkout-main:not(.recharge-active) .message{font-size:13px;overflow-wrap:anywhere}
.login-layout .checkout-main:not(.recharge-active) :focus-visible,body:not(:has(.recharge-active)) .site-header :focus-visible{outline:3px solid #337fdb;outline-offset:3px}
.login-layout .checkout-main:not(.recharge-active) button:disabled{opacity:.55;cursor:not-allowed}
.login-layout .checkout-main:not(.recharge-active) button.button:hover:not(:disabled){transform:none;box-shadow:none;filter:brightness(.97)}
.login-layout .checkout-main:not(.recharge-active) button.button:active:not(:disabled){transform:none;box-shadow:none;filter:brightness(.92)}
.login-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:10px 0 0}
.login-feature{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;font:500 14px/1.2 'DM Sans',sans-serif;color:#090d43;min-width:0}
.login-feature>span:last-child{max-width:90px;overflow-wrap:break-word;text-wrap:balance}
.login-feature+.login-feature::before{content:'';position:absolute;inset-inline-start:-5px;top:22px;height:25px;border-inline-start:1px solid #aabfdf}
.login-feature-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%}
.login-feature-icon::before{content:'';display:block;width:27px;height:27px;background:currentColor;mask-position:center;mask-size:contain;mask-repeat:no-repeat}
.login-feature-recharge{color:#0068ff;background:#bde3ff}
.login-feature-recharge::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M14 1 3 14h8l-1 9 11-14h-8Z'/%3E%3C/svg%3E")}
.login-feature-worldwide{color:#8000ec;background:#e0cdff}
.login-feature-worldwide::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M2 12h20M4 6h16M4 18h16M12 2c-7 7-7 13 0 20 7-7 7-13 0-20'/%3E%3C/svg%3E")}
.login-feature-security{color:#00ae79;background:#b4f1dd}
.login-feature-security::before{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath fill-rule='evenodd' d='M12 1 2 5v7c0 5 6 9 10 11 4-2 10-6 10-11V5L12 1Zm-2 15-5-5 2-2 3 3 7-7 2 2-9 9Z'/%3E%3C/svg%3E")}
body:not(:has(.recharge-active)) .site-footer{display:none}
@media(min-width:768px){.login-layout:not(:has(.recharge-active)){padding:0 20px 36px;margin-top:16px}.login-story{padding-bottom:24px}.login-service{width:300px}.login-layout .checkout-main:not(.recharge-active) .login-panel{padding:34px 34px 30px;border-radius:20px}.login-layout .checkout-main:not(.recharge-active) .auth-intro{font-size:16px}.login-features{margin-top:18px}.login-feature{font-size:16px}.login-feature-icon{width:54px;height:54px}}
@media(max-width:359px){body:not(:has(.recharge-active)) .site-header{padding-inline:16px;gap:10px}.login-layout:not(:has(.recharge-active)){padding-inline:18px}.login-layout .checkout-main:not(.recharge-active) .login-panel{padding:22px 18px}.login-layout .checkout-main:not(.recharge-active) .auth-intro{font-size:13px}.login-layout .checkout-main:not(.recharge-active) input{font-size:13px}.login-feature{font-size:13px}}

/* Refined FlupFlap authentication presentation. Visual only. */

body:has(.login-layout):not(:has(.recharge-active)){
  min-height:100vh;
  color:#0b2341;
  background:
    radial-gradient(circle at 8% 12%,rgba(18,184,235,.13),transparent 30%),
    radial-gradient(circle at 92% 78%,rgba(64,95,255,.10),transparent 34%),
    linear-gradient(145deg,#f8fcff 0%,#eef7ff 52%,#f9fbff 100%);
}
body:has(.login-layout):not(:has(.recharge-active))::before{
  opacity:.16;
  filter:saturate(.7);
}
body:not(:has(.recharge-active)) .site-header{
  width:calc(100% - 36px);
  max-width:980px;
  height:52px;
  min-height:52px;
  margin:14px auto 0;
  padding:7px 10px;
  justify-content:flex-end;
  gap:12px;
  border:1px solid rgba(10,51,91,.07);
  border-radius:15px;
  background:rgba(255,255,255,.76);
  box-shadow:0 8px 30px rgba(37,85,134,.05);
  backdrop-filter:blur(14px);
}
body:not(:has(.recharge-active)) .site-header nav{
  border-inline-end-color:#dce7f2;
  font-size:13px;
}
body:not(:has(.recharge-active)) .site-header .language-picker select{
  min-height:38px;
  border-color:#d7e2ee;
  background:#fff;
  color:#17304f;
}

.login-layout:not(:has(.recharge-active)){
  display:flex;
  flex-direction:column;
  align-items:center;
  width:calc(100% - 32px);
  max-width:620px;
  margin:34px auto 46px;
  padding:0;
}
.login-story{
  width:100%;
  display:flex;
  justify-content:center;
  padding:0 0 20px;
}
.login-service{
  width:278px;
  max-width:68%;
  filter:drop-shadow(0 10px 24px rgba(26,75,126,.10));
}
.login-service img{
  width:100%;
  height:auto;
  margin-bottom:-14px;
}
.login-layout .checkout-main:not(.recharge-active){
  width:100%;
  max-width:none;
  padding:0;
  margin:0;
}
.login-layout .checkout-main:not(.recharge-active) .flupflap-main-content{
  width:100%;
  display:block;
}
.login-layout .checkout-main:not(.recharge-active) .login-panel{
  width:100%;
  max-width:none;
  margin:0;
  padding:34px 38px 30px;
  border:1px solid rgba(24,72,122,.10);
  border-radius:24px;
  background:rgba(255,255,255,.96);
  box-shadow:
    0 24px 65px rgba(31,79,128,.13),
    0 2px 8px rgba(31,79,128,.04);
}
.login-layout .checkout-main:not(.recharge-active) .login-panel::before{
  content:'SECURE FLUPFLAP ACCESS';
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:0 10px;
  margin:0 0 16px;
  border:1px solid #d9e8f5;
  border-radius:999px;
  background:#f5faff;
  color:#2d6da9;
  font:800 10px/1 'DM Sans',sans-serif;
  letter-spacing:.11em;
}
.login-layout .checkout-main:not(.recharge-active) .login-panel h1{
  margin:0 0 8px;
  color:#081f3b;
  font:800 clamp(29px,5vw,37px)/1.08 Manrope,sans-serif;
  letter-spacing:-.045em;
}
.login-layout .checkout-main:not(.recharge-active) .auth-intro{
  margin:0 0 26px;
  color:#66768b;
  font-size:15px;
  line-height:1.55;
}
.login-layout .checkout-main:not(.recharge-active) .field{
  margin-bottom:16px;
}
.login-layout .checkout-main:not(.recharge-active) .field label{
  margin:0 0 7px;
  color:#17304f;
  font-size:13px;
  font-weight:700;
}
.login-layout .checkout-main:not(.recharge-active) input{
  min-height:52px;
  border:1px solid #d5e0eb;
  border-radius:13px;
  background:#fbfdff;
  color:#0f2946;
  font-size:15px;
  box-shadow:0 1px 0 rgba(8,39,74,.02);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.login-layout .checkout-main:not(.recharge-active) input:hover{
  border-color:#bdcbd9;
  background:#fff;
}
.login-layout .checkout-main:not(.recharge-active) input:focus{
  border-color:#2688ff;
  background:#fff;
  outline:0;
  box-shadow:0 0 0 4px rgba(38,136,255,.10);
}
.login-layout .checkout-main:not(.recharge-active) #email,
.login-layout .checkout-main:not(.recharge-active) #password{
  padding-inline-start:46px;
}
.login-layout .checkout-main:not(.recharge-active) .field:has(>#email)::after,
.login-layout .checkout-main:not(.recharge-active) .password-control:has(#password)::before{
  inset-inline-start:15px;
  bottom:16px;
  width:18px;
  height:18px;
  background:#45627f;
}
.login-layout .checkout-main:not(.recharge-active) .password-control .button{
  min-height:50px;
  top:1px;
  color:#7a8ca1;
}
.login-layout .checkout-main:not(.recharge-active) #forgot-password{
  margin:-7px 0 14px auto;
  min-height:30px;
  color:#0a67d8;
  font-size:13px;
  font-weight:700;
  text-underline-offset:3px;
}
.login-layout .checkout-main:not(.recharge-active) button[type=submit]{
  min-height:52px;
  border:0;
  border-radius:13px;
  background:linear-gradient(105deg,#08b8e5 0%,#0c87f7 46%,#3758ff 100%);
  color:#fff;
  font-size:16px;
  font-weight:800;
  letter-spacing:-.01em;
  box-shadow:0 12px 26px rgba(18,112,232,.20);
}
.login-layout .checkout-main:not(.recharge-active) button[type=submit]:hover:not(:disabled){
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(18,112,232,.24);
  filter:none;
}
.login-layout .checkout-main:not(.recharge-active) button[type=submit]:active:not(:disabled){
  transform:none;
  box-shadow:0 8px 18px rgba(18,112,232,.18);
}
.login-divider{
  margin:20px 0;
  color:#8b99aa;
  font-size:12px;
}
.login-divider::before,.login-divider::after{
  background:#e2eaf2;
}
.login-layout .checkout-main:not(.recharge-active) .auth-choices{
  margin:0;
}
.login-layout .checkout-main:not(.recharge-active) .auth-choices .button{
  min-height:50px;
  border:1px solid #cbdcf0;
  border-radius:13px;
  background:#f8fbff;
  color:#0a67d8;
  font-size:14px;
  font-weight:750;
}
.login-layout .checkout-main:not(.recharge-active) .auth-choices .button:hover:not(:disabled){
  background:#eef6ff;
  border-color:#aecbed;
  box-shadow:0 7px 16px rgba(26,102,181,.07);
  filter:none;
}
.login-layout .checkout-main:not(.recharge-active) .login-guest-link{
  margin:15px 0 0;
  padding-top:14px;
  border-top:1px solid #edf2f7;
}
.login-layout .checkout-main:not(.recharge-active) .login-guest-link .button{
  color:#4e667f;
  font-size:13px;
  font-weight:700;
}
.login-layout .checkout-main:not(.recharge-active) .login-guest-link .button:hover:not(:disabled){
  color:#0a67d8;
  background:#f4f8fd;
  text-decoration:none;
}
.login-layout .checkout-main:not(.recharge-active) .message{
  margin:0 0 18px;
  border-radius:13px;
}
.login-layout .checkout-main:not(.recharge-active) .message.error{
  border-color:#f0cbc4;
  background:#fff7f5;
  color:#9f3e34;
}

.login-features{
  width:100%;
  margin:16px 0 0;
  padding:0 6px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.login-feature{
  min-height:88px;
  padding:12px 8px;
  border:1px solid rgba(24,72,122,.07);
  border-radius:16px;
  background:rgba(255,255,255,.62);
  box-shadow:0 7px 20px rgba(31,79,128,.04);
  color:#17304f;
  font-size:12px;
  font-weight:650;
  backdrop-filter:blur(8px);
}
.login-feature+.login-feature::before{display:none}
.login-feature-icon{
  width:40px;
  height:40px;
}
.login-feature-icon::before{
  width:22px;
  height:22px;
}
.login-feature-recharge{background:#d9f0ff;color:#0877e6}
.login-feature-worldwide{background:#eadfff;color:#7d45dc}
.login-feature-security{background:#d7f6eb;color:#16966e}
.login-feature>span:last-child{
  max-width:110px;
}
body:not(:has(.recharge-active)) .site-footer{
  display:flex;
  width:calc(100% - 36px);
  max-width:980px;
  margin:0 auto 20px;
  padding:0 6px;
  color:#748498;
  font-size:11px;
}

@media(max-width:600px){
  body:not(:has(.recharge-active)) .site-header{
    width:calc(100% - 20px);
    margin-top:10px;
    border-radius:13px;
  }
  .login-layout:not(:has(.recharge-active)){
    width:calc(100% - 20px);
    margin:22px auto 30px;
  }
  .login-story{padding-bottom:16px}
  .login-service{width:238px;max-width:76%}
  .login-layout .checkout-main:not(.recharge-active) .login-panel{
    padding:28px 22px 24px;
    border-radius:20px;
  }
  .login-layout .checkout-main:not(.recharge-active) .login-panel::before{
    margin-bottom:13px;
  }
  .login-layout .checkout-main:not(.recharge-active) .login-panel h1{
    font-size:30px;
  }
  .login-layout .checkout-main:not(.recharge-active) .auth-intro{
    margin-bottom:22px;
    font-size:14px;
  }
  .login-layout .checkout-main:not(.recharge-active) input{
    min-height:50px;
    font-size:14px;
  }
  .login-layout .checkout-main:not(.recharge-active) button[type=submit]{
    min-height:50px;
  }
  .login-features{
    margin-top:12px;
    gap:7px;
    padding:0;
  }
  .login-feature{
    min-height:78px;
    border-radius:13px;
    font-size:11px;
    padding:10px 5px;
  }
  .login-feature-icon{
    width:34px;
    height:34px;
  }
  .login-feature-icon::before{
    width:19px;
    height:19px;
  }
  body:not(:has(.recharge-active)) .site-footer{
    width:calc(100% - 20px);
    flex-direction:column;
    align-items:center;
    gap:6px;
    text-align:center;
  }
}
@media(max-width:390px){
  body:not(:has(.recharge-active)) .site-header nav{display:none}
  .login-layout .checkout-main:not(.recharge-active) .login-panel{
    padding:24px 18px 22px;
  }
  .login-layout .checkout-main:not(.recharge-active) .login-panel h1{
    font-size:28px;
  }
  .login-features{
    grid-template-columns:1fr 1fr 1fr;
  }
  .login-feature>span:last-child{
    max-width:90px;
  }
}


/* Final auth polish: compact single-viewport composition. */
body:not(:has(.recharge-active)) .site-header{
  position:absolute;
  top:18px;
  right:22px;
  width:auto;
  max-width:none;
  height:auto;
  min-height:0;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  z-index:10;
}
body:not(:has(.recharge-active)) .site-header nav{
  border:0;
  padding:0;
  gap:8px;
}
body:not(:has(.recharge-active)) .site-header a[href='/support']{
  min-height:38px;
  padding:0 12px;
  border:1px solid #dce6f0;
  border-radius:11px;
  background:rgba(255,255,255,.88);
  box-shadow:0 5px 16px rgba(31,79,128,.05);
}
body:not(:has(.recharge-active)) .site-header .language-picker select{
  min-height:38px;
  border-radius:11px;
  box-shadow:0 5px 16px rgba(31,79,128,.05);
}

.login-layout:not(:has(.recharge-active)){
  max-width:600px;
  margin:72px auto 26px;
}
.login-story{
  padding-bottom:12px;
}
.login-service{
  width:242px;
  max-width:62%;
}
.login-layout .checkout-main:not(.recharge-active) .login-panel{
  padding:28px 36px 24px;
  border-radius:22px;
  box-shadow:
    0 20px 52px rgba(31,79,128,.11),
    0 2px 7px rgba(31,79,128,.04);
}
.login-layout .checkout-main:not(.recharge-active) .login-panel::before{
  margin-bottom:12px;
  min-height:25px;
  font-size:9px;
}
.login-layout .checkout-main:not(.recharge-active) .login-panel h1{
  font-size:34px;
  margin-bottom:6px;
}
.login-layout .checkout-main:not(.recharge-active) .auth-intro{
  margin-bottom:20px;
  font-size:14px;
}
.login-layout .checkout-main:not(.recharge-active) .field{
  margin-bottom:13px;
}
.login-layout .checkout-main:not(.recharge-active) input{
  min-height:49px;
}
.login-layout .checkout-main:not(.recharge-active) #forgot-password{
  margin:-6px 0 10px auto;
}
.login-layout .checkout-main:not(.recharge-active) button[type=submit]{
  min-height:49px;
}
.login-divider{
  margin:15px 0;
}
.login-layout .checkout-main:not(.recharge-active) .auth-choices .button{
  min-height:46px;
}
.login-layout .checkout-main:not(.recharge-active) .login-guest-link{
  margin:14px 0 0;
  padding-top:12px;
  border-top:1px solid #edf2f7;
}
.login-layout .checkout-main:not(.recharge-active) .login-guest-link .button{
  width:100%;
  min-height:42px;
  color:#516a84;
  font-size:12px;
  justify-content:center;
}
.login-layout .checkout-main:not(.recharge-active) .login-guest-link .button::after{
  width:15px;
  height:15px;
}

.login-features{
  margin-top:12px;
  padding:0;
  gap:8px;
}
.login-feature{
  min-height:52px;
  flex-direction:row;
  justify-content:center;
  gap:8px;
  padding:8px 10px;
  border-radius:13px;
  font-size:11px;
  background:rgba(255,255,255,.72);
}
.login-feature-icon{
  width:30px;
  height:30px;
}
.login-feature-icon::before{
  width:17px;
  height:17px;
}
.login-feature>span:last-child{
  max-width:none;
  white-space:nowrap;
}
body:not(:has(.recharge-active)) .site-footer{
  max-width:600px;
  width:calc(100% - 32px);
  margin:10px auto 14px;
  font-size:10px;
}

@media(max-width:700px){
  body:not(:has(.recharge-active)) .site-header{
    position:static;
    width:calc(100% - 20px);
    margin:10px auto 0;
    padding:0;
    display:flex;
    justify-content:flex-end;
  }
  .login-layout:not(:has(.recharge-active)){
    margin:18px auto 24px;
  }
  .login-service{
    width:220px;
    max-width:72%;
  }
}
@media(max-width:520px){
  .login-layout .checkout-main:not(.recharge-active) .login-panel{
    padding:24px 20px 21px;
  }
  .login-layout .checkout-main:not(.recharge-active) .login-panel h1{
    font-size:29px;
  }
  .login-features{
    grid-template-columns:1fr;
  }
  .login-feature{
    min-height:44px;
    justify-content:flex-start;
  }
}


/* Interactive FlupFlap information cards */
.login-feature{
  appearance:none;
  width:100%;
  border:1px solid rgba(24,72,122,.07);
  cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
}
.login-feature:hover{
  transform:translateY(-1px);
  border-color:#bfd4e8;
  box-shadow:0 10px 24px rgba(31,79,128,.08);
  background:rgba(255,255,255,.90);
}
.login-feature:focus-visible{
  outline:3px solid rgba(51,127,219,.28);
  outline-offset:3px;
}
.login-feature-arrow{
  margin-left:auto;
  color:#7890aa;
  font-size:20px;
  line-height:1;
}

.feature-dialog{
  width:min(92vw,620px);
  max-height:86vh;
  padding:0;
  border:0;
  border-radius:22px;
  background:transparent;
  overflow:visible;
}
.feature-dialog::backdrop{
  background:rgba(7,24,47,.52);
  backdrop-filter:blur(4px);
}
.feature-dialog-card{
  position:relative;
  max-height:86vh;
  overflow:auto;
  padding:30px;
  border:1px solid #e0e9f2;
  border-radius:22px;
  background:#fff;
  color:#10243f;
  box-shadow:0 28px 80px rgba(7,24,47,.22);
}
.feature-dialog-close{
  position:absolute;
  top:14px;
  right:14px;
  width:38px;
  height:38px;
  border:1px solid #dbe5ef;
  border-radius:50%;
  background:#f8fbff;
  color:#38506c;
  font:400 24px/1 sans-serif;
  cursor:pointer;
}
.feature-dialog-close:hover{background:#eef6ff}
.feature-dialog-icon{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:14px;
  margin-bottom:18px;
}
.feature-dialog-icon::before{
  content:'';
  display:block;
  width:25px;
  height:25px;
  background:currentColor;
  mask-position:center;
  mask-size:contain;
  mask-repeat:no-repeat;
}
.feature-dialog-eyebrow{
  margin:0 0 8px;
  color:#2f6fae;
  font:800 10px/1.2 'DM Sans',sans-serif;
  letter-spacing:.12em;
}
.feature-dialog h2{
  margin:0 42px 10px 0;
  color:#07182f;
  font:800 clamp(24px,4vw,31px)/1.12 Manrope,sans-serif;
  letter-spacing:-.035em;
}
.feature-dialog-intro{
  margin:0 0 22px;
  color:#64748b;
  font-size:14px;
  line-height:1.6;
}
.feature-dialog-content{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.feature-dialog-content section{
  padding:15px;
  border:1px solid #e4ebf2;
  border-radius:14px;
  background:#f9fbfd;
}
.feature-dialog-content h3{
  margin:0 0 6px;
  color:#17304f;
  font-size:13px;
}
.feature-dialog-content p{
  margin:0;
  color:#65768a;
  font-size:12px;
  line-height:1.5;
}

@media(max-width:600px){
  .feature-dialog{
    width:calc(100vw - 24px);
  }
  .feature-dialog-card{
    padding:24px 18px 20px;
  }
  .feature-dialog-content{
    grid-template-columns:1fr;
  }
}


/* Professional product-information dialog */
.feature-dialog{
  width:min(94vw,680px);
  max-height:88vh;
}
.feature-dialog-card{
  padding:0;
  overflow:auto;
  border-radius:24px;
  border:1px solid rgba(13,54,94,.10);
  background:#fff;
  box-shadow:0 32px 90px rgba(7,24,47,.28);
}
.feature-dialog-hero{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:28px 64px 18px 28px;
  background:
    radial-gradient(circle at 100% 0,rgba(27,177,246,.12),transparent 42%),
    linear-gradient(145deg,#f9fcff,#f3f8ff);
  border-bottom:1px solid #e7eef6;
}
.feature-dialog-hero .feature-dialog-icon{
  flex:none;
  margin:0;
  width:50px;
  height:50px;
  border-radius:15px;
  box-shadow:inset 0 0 0 1px rgba(26,81,137,.08);
}
.feature-dialog-hero .feature-dialog-icon::before{
  width:27px;
  height:27px;
}
.feature-dialog-eyebrow{
  margin:2px 0 7px;
}
.feature-dialog h2{
  margin:0;
  font-size:clamp(24px,4vw,32px);
}
.feature-dialog-intro{
  margin:0;
  padding:20px 28px 6px;
  font-size:15px;
  line-height:1.65;
}
.feature-dialog-content{
  padding:14px 28px 24px;
  gap:12px;
}
.feature-dialog-content section{
  position:relative;
  padding:17px 17px 17px 43px;
  background:#fbfdff;
  border:1px solid #e2ebf3;
  border-radius:15px;
}
.feature-dialog-content section::before{
  content:'✓';
  position:absolute;
  left:16px;
  top:16px;
  display:grid;
  place-items:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#e7f4ff;
  color:#0a74dc;
  font-size:11px;
  font-weight:900;
}
.feature-dialog-content h3{
  margin-bottom:5px;
  font-size:13px;
}
.feature-dialog-content p{
  font-size:12px;
  line-height:1.55;
}
.feature-dialog-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:18px 28px 24px;
  border-top:1px solid #e7eef6;
  background:#fbfdff;
}
.feature-dialog-primary,
.feature-dialog-secondary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 17px;
  border-radius:12px;
  font:800 13px/1 'DM Sans',sans-serif;
  text-decoration:none;
  cursor:pointer;
}
.feature-dialog-primary{
  border:0;
  background:linear-gradient(105deg,#08b8e5,#0c87f7 48%,#3758ff);
  color:#fff;
  box-shadow:0 8px 18px rgba(18,112,232,.16);
}
.feature-dialog-secondary{
  border:1px solid #cfdae7;
  background:#fff;
  color:#36516f;
}
.feature-dialog-close{
  z-index:2;
  top:16px;
  right:16px;
  background:#fff;
  box-shadow:0 4px 14px rgba(31,79,128,.08);
}
@media(max-width:600px){
  .feature-dialog-hero{padding:24px 54px 16px 20px}
  .feature-dialog-intro{padding:18px 20px 4px}
  .feature-dialog-content{padding:12px 20px 20px}
  .feature-dialog-actions{padding:16px 20px 20px;flex-direction:column}
  .feature-dialog-primary,.feature-dialog-secondary{width:100%}
}
