#checkout{
--checkout-bg:#0D2329;
--checkout-shell:#102A30;
--checkout-field:#0B2025;
--checkout-teal:#27D6B5;
--checkout-purple:#A98BEF;
--checkout-border:rgba(255,255,255,.075);
width:100%;
min-height:100vh;
padding:70px 0 100px;
background:var(--checkout-bg);
color:#fff;
font-family:'Nunito',sans-serif;
}
#checkout,
#checkout *,
#checkout *::before,
#checkout *::after{
box-sizing:border-box;
}
#checkout button,
#checkout input,
#checkout select{
font:inherit;
}
.checkout-width{
width:min(1280px,calc(100% - 50px));
margin:0 auto;
}
.checkout-heading{
margin-bottom:36px;
}
.checkout-eyebrow{
display:block;
margin-bottom:8px;
color:var(--checkout-teal);
font-size:11px;
font-weight:900;
letter-spacing:2px;
}
.checkout-heading h1{
margin:0;
color:#fff;
font-family:'Fredoka',sans-serif;
font-size:clamp(40px,4vw,54px);
font-weight:700;
line-height:1;
letter-spacing:-1.5px;
}
.checkout-heading p{
margin:12px 0 0;
color:rgba(255,255,255,.45);
font-size:14px;
}
.checkout-shell{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) 410px;
grid-template-rows:auto auto;
background:var(--checkout-shell);
border:1px solid var(--checkout-border);
border-radius:24px 18px 27px 20px;
box-shadow:0 25px 70px rgba(0,0,0,.12);
isolation:isolate;
}
.checkout-shell::before{
content:"";
position:absolute;
z-index:-1;
inset:-5px 6px 4px -5px;
border:1px solid rgba(169,139,239,.16);
border-radius:27px 20px 30px 22px;
transform:rotate(.35deg);
pointer-events:none;
}
.checkout-main{
grid-column:1;
grid-row:1;
min-width:0;
padding:44px 50px 0;
}
.checkout-section{
padding:0 0 36px;
}
.checkout-section+.checkout-section{
padding-top:34px;
border-top:1px solid rgba(255,255,255,.07);
}
.checkout-section-heading{
display:flex;
align-items:flex-start;
gap:15px;
margin-bottom:21px;
}
.checkout-section-number{
display:flex;
align-items:center;
justify-content:center;
width:31px;
height:31px;
flex:0 0 31px;
margin-top:1px;
background:rgba(39,214,181,.1);
border:1px solid rgba(39,214,181,.18);
border-radius:10px 7px 11px 8px;
color:var(--checkout-teal);
font-family:'Fredoka',sans-serif;
font-size:11px;
font-weight:700;
transform:rotate(-2deg);
}
.checkout-section-number-purple{
background:rgba(169,139,239,.1);
border-color:rgba(169,139,239,.18);
color:#C5AEF7;
transform:rotate(2deg);
}
.checkout-section-heading h2{
margin:0;
color:#fff;
font-family:'Fredoka',sans-serif;
font-size:22px;
font-weight:700;
line-height:1.15;
}
.checkout-section-heading p{
margin:5px 0 0;
color:rgba(255,255,255,.37);
font-size:11px;
line-height:1.5;
}
.checkout-fields{
display:flex;
flex-direction:column;
gap:10px;
}
.checkout-custom-fields{
margin-top:10px;
}
#checkout input:not([type="checkbox"]),
#checkout select{
width:100%;
height:50px;
padding:0 16px;
outline:none;
background:var(--checkout-field);
border:1px solid rgba(255,255,255,.07);
border-radius:11px;
color:#fff;
font-size:13px;
transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
#checkout input:not([type="checkbox"])::placeholder{
color:rgba(255,255,255,.3);
}
#checkout input:not([type="checkbox"]):focus,
#checkout select:focus{
background:#0C242A;
border-color:rgba(39,214,181,.75);
box-shadow:0 0 0 3px rgba(39,214,181,.06);
}
#checkout select{
color:rgba(255,255,255,.8);
}
#checkout select option{
background:#102A30;
color:#fff;
}
.checkout-input-relative{
position:relative;
}
.checkout-input-relative>input{
padding-right:44px!important;
}
.checkout-lock,
.checkout-input-icon,
.checkout-cep-loading{
position:absolute;
right:15px;
top:50%;
transform:translateY(-50%);
}
.checkout-lock{
width:15px;
height:15px;
color:rgba(255,255,255,.25);
pointer-events:none;
}
.checkout-input-icon{
pointer-events:none;
}
.checkout-cep-loading{
display:flex;
align-items:center;
justify-content:center;
color:var(--checkout-teal);
pointer-events:none;
}
.checkout-cep-loading svg{
width:17px;
height:17px;
}
#checkout .checkout-input-readonly{
opacity:.55;
cursor:not-allowed;
}
.checkout-phone{
display:flex;
gap:9px;
}
.checkout-discord{
display:flex;
align-items:center;
justify-content:center;
gap:9px;
width:100%;
height:50px;
margin-bottom:5px;
background:#5865F2;
border:0;
border-radius:11px;
color:#fff;
font-size:13px;
font-weight:900;
cursor:pointer;
transition:filter .2s ease,transform .2s ease;
}
.checkout-discord:hover{
filter:brightness(1.07);
transform:translateY(-1px);
}
.checkout-discord svg{
width:20px;
height:20px;
flex:0 0 20px;
}
.checkout-discord img{
width:27px;
height:27px;
border-radius:50%;
}
.checkout-discord small{
font-size:10px;
font-weight:700;
opacity:.65;
}
.checkout-payment-list{
overflow:hidden;
background:var(--checkout-field);
border:1px solid rgba(255,255,255,.07);
border-radius:13px 10px 14px 11px;
}
.checkout-payment{
position:relative;
display:flex;
align-items:center;
width:100%;
min-height:70px;
padding:11px 50px 11px 14px;
background:transparent;
border:0;
border-bottom:1px solid rgba(255,255,255,.06);
color:#fff;
text-align:left;
cursor:pointer;
transition:background .2s ease;
}
.checkout-payment:last-child{
border-bottom:0;
}
.checkout-payment:hover{
background:rgba(255,255,255,.025);
}
.checkout-payment[data-selected="true"]{
background:rgba(39,214,181,.055);
}
.checkout-payment[data-selected="true"]::before{
content:"";
position:absolute;
left:0;
top:11px;
bottom:11px;
width:3px;
background:var(--checkout-teal);
border-radius:0 4px 4px 0;
}
.checkout-payment-icon{
display:flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
flex:0 0 42px;
margin-right:13px;
background:#102A30;
border:1px solid rgba(255,255,255,.06);
border-radius:10px;
}
.checkout-payment-icon img{
display:block;
width:23px;
height:23px;
object-fit:contain;
}
.checkout-payment-info{
display:block;
min-width:0;
flex:1;
}
.checkout-payment-name{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:6px;
}
.checkout-payment-name>strong{
color:#fff;
font-size:13px;
font-weight:900;
}
.checkout-payment-info>small{
display:block;
margin-top:4px;
color:rgba(255,255,255,.34);
font-size:10px;
}
.checkout-badge{
display:inline-flex;
align-items:center;
gap:3px;
padding:3px 7px;
border-radius:20px;
font-size:9px;
font-weight:900;
line-height:1;
}
.checkout-badge svg{
width:10px;
height:10px;
}
.checkout-badge-teal{
background:rgba(39,214,181,.08);
border:1px solid rgba(39,214,181,.16);
color:var(--checkout-teal);
}
.checkout-badge-purple{
background:rgba(169,139,239,.08);
border:1px solid rgba(169,139,239,.16);
color:#C5AEF7;
}
.checkout-badge-discount{
background:rgba(255,193,94,.08);
border:1px solid rgba(255,193,94,.16);
color:#F6C46E;
}
.checkout-payment-check{
position:absolute;
right:16px;
top:50%;
display:flex;
align-items:center;
justify-content:center;
width:21px;
height:21px;
border:1px solid rgba(255,255,255,.14);
border-radius:50%;
color:transparent;
transform:translateY(-50%);
transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.checkout-payment-check svg{
width:12px;
height:12px;
stroke-width:3;
}
.checkout-payment[data-selected="true"] .checkout-payment-check{
background:var(--checkout-teal);
border-color:var(--checkout-teal);
color:#08251F;
}
.checkout-subsection{
padding-bottom:36px;
}
.checkout-small-heading{
display:flex;
align-items:flex-start;
gap:11px;
margin-bottom:17px;
}
.checkout-small-heading>svg{
width:17px;
height:17px;
flex:0 0 17px;
margin-top:2px;
color:var(--checkout-teal);
}
.checkout-small-heading h3{
margin:0;
color:#fff;
font-family:'Fredoka',sans-serif;
font-size:17px;
font-weight:700;
}
.checkout-small-heading p{
margin:4px 0 0;
color:rgba(255,255,255,.35);
font-size:10px;
}
.checkout-fields-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.checkout-address-row{
display:grid;
grid-template-columns:2fr 1fr;
gap:10px;
}
.checkout-error{
display:block;
color:#FF9099;
font-size:10px;
font-weight:700;
}
.checkout-summary{
grid-column:2;
grid-row:1 / span 2;
position:relative;
min-width:0;
padding:44px 38px;
border-left:1px solid rgba(255,255,255,.07);
}
.checkout-summary-heading{
margin-bottom:27px;
}
.checkout-summary-heading>span{
display:block;
margin-bottom:6px;
color:var(--checkout-purple);
font-size:10px;
font-weight:900;
letter-spacing:1.7px;
}
.checkout-summary-heading h2{
margin:0;
color:#fff;
font-family:'Fredoka',sans-serif;
font-size:22px;
font-weight:700;
}
.checkout-summary-body{
position:sticky;
top:24px;
}
.checkout-packages{
display:flex;
flex-direction:column;
gap:16px;
}
#empty-packages{
color:rgba(255,255,255,.35);
font-size:12px;
}
.checkout-divider{
width:100%;
height:1px;
margin:23px 0;
background:rgba(255,255,255,.07);
}
.checkout-field-label{
display:block;
margin-bottom:8px;
color:rgba(255,255,255,.55);
font-size:11px;
font-weight:900;
}
.checkout-coupon-row{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
gap:8px;
}
.checkout-coupon-button{
display:flex;
align-items:center;
justify-content:center;
gap:5px;
height:50px;
padding:0 15px;
background:rgba(169,139,239,.1);
border:1px solid rgba(169,139,239,.2);
border-radius:10px;
color:#C8B4F7;
font-size:11px;
font-weight:900;
cursor:pointer;
transition:background .2s ease,border-color .2s ease;
}
.checkout-coupon-button:hover{
background:rgba(169,139,239,.15);
border-color:rgba(169,139,239,.3);
}
.checkout-coupon-button svg{
width:14px;
height:14px;
}
.checkout-credit{
align-items:center;
gap:11px;
padding:11px 0;
cursor:pointer;
}
.checkout-credit-icon{
display:flex;
align-items:center;
justify-content:center;
width:37px;
height:37px;
flex:0 0 37px;
background:var(--checkout-field);
border-radius:9px;
color:rgba(255,255,255,.4);
transition:color .2s ease,background .2s ease;
}
.checkout-credit-icon[data-active="true"]{
background:rgba(39,214,181,.08);
color:var(--checkout-teal);
}
.checkout-credit-icon svg{
width:17px;
height:17px;
}
.checkout-credit-info{
display:block;
min-width:0;
flex:1;
}
.checkout-credit-info strong{
display:block;
color:#fff;
font-size:11px;
font-weight:900;
}
.checkout-credit-info small{
display:block;
margin-top:3px;
color:rgba(255,255,255,.32);
font-size:10px;
}
.checkout-credit-indicator{
display:flex;
align-items:center;
justify-content:center;
width:19px;
height:19px;
flex:0 0 19px;
border:1px solid rgba(255,255,255,.13);
border-radius:50%;
color:transparent;
transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.checkout-credit-indicator[data-active="true"]{
background:var(--checkout-teal);
border-color:var(--checkout-teal);
color:#08251F;
}
.checkout-credit-indicator svg{
width:12px;
height:12px;
stroke-width:3;
}
.checkout-pricing{
display:flex;
flex-direction:column;
gap:10px;
margin:0;
padding:0;
list-style:none;
}
.checkout-pricing li{
display:flex;
align-items:center;
justify-content:space-between;
gap:15px;
color:rgba(255,255,255,.42);
font-size:11px;
}
.checkout-pricing li>span:last-child{
color:rgba(255,255,255,.72);
font-weight:800;
}
.checkout-pricing .checkout-total{
align-items:flex-end;
margin-top:10px;
padding-top:18px;
border-top:1px solid rgba(255,255,255,.07);
color:#fff;
font-family:'Fredoka',sans-serif;
font-size:17px;
font-weight:700;
}
.checkout-pricing .checkout-total strong{
color:var(--checkout-teal);
font-size:27px;
font-weight:700;
}
.checkout-finish{
grid-column:1;
grid-row:2;
padding:0 50px 46px;
}
.checkout-terms{
display:flex;
align-items:flex-start;
gap:10px;
margin-bottom:16px;
color:rgba(255,255,255,.43);
font-size:11px;
line-height:1.5;
cursor:pointer;
}
.checkout-terms>input{
position:absolute;
width:1px;
height:1px;
opacity:0;
pointer-events:none;
}
.checkout-checkbox{
display:flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
flex:0 0 18px;
margin-top:1px;
background:var(--checkout-field);
border:1px solid rgba(255,255,255,.13);
border-radius:5px;
color:transparent;
transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.checkout-checkbox svg{
width:12px;
height:12px;
stroke-width:3;
}
.checkout-terms>input:checked+.checkout-checkbox{
background:var(--checkout-teal);
border-color:var(--checkout-teal);
color:#08251F;
}
.checkout-terms a{
color:#fff;
font-weight:900;
text-decoration:none;
}
.checkout-terms a:hover{
color:var(--checkout-teal);
}
.checkout-pay{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
min-height:62px;
padding:0 21px;
background:var(--checkout-teal);
border:0;
border-radius:14px 10px 16px 11px;
color:#08251F;
cursor:pointer;
transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
}
.checkout-pay:hover{
filter:brightness(1.04);
transform:translateY(-1px);
box-shadow:0 10px 25px rgba(39,214,181,.1);
}
.checkout-pay-label{
display:flex;
align-items:center;
gap:8px;
font-family:'Fredoka',sans-serif;
font-size:16px;
font-weight:700;
}
.checkout-pay-label svg{
width:16px;
height:16px;
}
.checkout-pay strong{
font-family:'Fredoka',sans-serif;
font-size:17px;
font-weight:700;
}
.checkout-security{
display:flex;
align-items:center;
justify-content:center;
gap:5px;
margin:9px 0 0;
color:rgba(255,255,255,.25);
font-size:10px;
}
.checkout-security svg{
width:12px;
height:12px;
}
#upsell-recommendations>div>p{
color:#fff;
font-family:'Fredoka',sans-serif;
font-size:13px;
font-weight:700;
}
#checkout .hidden{
display:none!important;
}
@media(max-width:900px){
#checkout{
padding:50px 0 80px;
}
.checkout-width{
width:calc(100% - 50px);
}
.checkout-shell{
grid-template-columns:1fr;
grid-template-rows:auto auto auto;
}
.checkout-main{
grid-column:1;
grid-row:1;
padding:38px 36px 0;
}
.checkout-summary{
grid-column:1;
grid-row:2;
padding:34px 36px;
border-top:1px solid rgba(255,255,255,.07);
border-left:0;
}
.checkout-summary-body{
position:static;
}
.checkout-finish{
grid-column:1;
grid-row:3;
padding:5px 36px 40px;
border-top:1px solid rgba(255,255,255,.07);
}
}
@media(max-width:600px){
#checkout{
padding:40px 0 65px;
}
.checkout-width{
width:calc(100% - 28px);
}
.checkout-heading{
margin-bottom:27px;
}
.checkout-heading h1{
font-size:38px;
}
.checkout-heading p{
font-size:12px;
}
.checkout-shell{
border-radius:20px 15px 22px 17px;
}
.checkout-main{
padding:27px 20px 0;
}
.checkout-summary{
padding:27px 20px 28px;
}
.checkout-finish{
padding:22px 20px 27px;
}
.checkout-section{
padding-bottom:27px;
}
.checkout-section+.checkout-section{
padding-top:27px;
}
.checkout-section-heading{
gap:11px;
margin-bottom:17px;
}
.checkout-section-heading h2{
font-size:19px;
}
.checkout-section-heading p{
font-size:10px;
}
.checkout-section-number{
width:28px;
height:28px;
flex-basis:28px;
font-size:10px;
}
#checkout input:not([type="checkbox"]),
#checkout select{
height:48px;
font-size:12px;
}
.checkout-discord{
height:48px;
font-size:12px;
}
.checkout-payment{
min-height:64px;
padding:10px 42px 10px 10px;
}
.checkout-payment-icon{
width:36px;
height:36px;
flex-basis:36px;
margin-right:9px;
}
.checkout-payment-icon img{
width:20px;
height:20px;
}
.checkout-payment-name{
gap:4px;
}
.checkout-payment-name>strong{
font-size:12px;
}
.checkout-payment-info>small{
font-size:9px;
}
.checkout-badge{
font-size:7px;
padding:3px 5px;
}
.checkout-payment-check{
right:12px;
width:19px;
height:19px;
}
.checkout-fields-row,
.checkout-address-row{
grid-template-columns:1fr;
}
.checkout-phone{
flex-direction:column;
}
.checkout-small-heading h3{
font-size:16px;
}
.checkout-summary-heading{
margin-bottom:20px;
}
.checkout-summary-heading h2{
font-size:19px;
}
.checkout-coupon-button{
height:48px;
}
.checkout-pricing .checkout-total{
font-size:15px;
}
.checkout-pricing .checkout-total strong{
font-size:23px;
}
.checkout-terms{
margin-bottom:15px;
font-size:10px;
}
.checkout-pay{
min-height:57px;
padding:0 15px;
}
.checkout-pay-label{
font-size:14px;
}
.checkout-pay strong{
font-size:14px;
}
}