
/* -----------------------------
-------------------------------- 
 
PLANS & UPGRADE & DOWNGRADE 
 
--------------------------------
----------------------------- */



/* -----------------------------
-------------------------------- 
 
LAYOUT 
 
--------------------------------
----------------------------- */


html, body {
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    background: var(--cryptee-4);
}

body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) repeat(5, 4rem) minmax(0, 1fr);
    grid-template-rows: 1rem 2rem 1rem 1fr 4rem minmax(22rem, 1fr) 4rem 1fr 4rem;
}

#logo {
    grid-column: 1/2;
    grid-row: 2/3;
    display: block;
    margin-left: 1rem;
    width: 2rem;
    height: 2rem;
    user-drag: none; 
    user-select: none;
    outline: none;
    z-index: 5;

    transition: 0.3s opacity;
    transition-timing-function: var(--cryptee-cb);
}

#logo img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    opacity: 0.3;
    transition: 0.3s opacity linear;
    user-drag: none; 
    user-select: none;
}

#choose-plan, #payment-info {
    grid-column: 2/7;
    grid-row: 5/6;
    margin-top: 0;
    line-height: 4.25rem;
    user-select: none;
    text-align: center;
    
    transition: 0.75s opacity, 1.5s transform;
    transition-timing-function: var(--cryptee-cb);
    
    opacity: 1;
    transform: translateX(0);
}

/* override dark mode */
input:not(.darkback) { color: #000 !important; }
input:not(.darkback):focus { box-shadow: inset 0px -1px 0px black !important; }

/* -----------------------------
-------------------------------- 
 
PERIODS 
 
--------------------------------
----------------------------- */


#period {
    grid-column: 2/7;
    grid-row: 6/7;
    display: grid;
    height: 4rem;
    grid-template-columns: minmax(7rem, 1fr) 4rem minmax(7rem, 1fr);
    column-gap: 1rem;

    border-bottom: 2px solid var(--cryptee-0);
    border-top: 2px solid var(--cryptee-0);

    transition: 0.3s border-top;
    transition-timing-function: var(--cryptee-cb);
}

#period button {
    height: 4rem;
    line-height: 4rem;
    width: 100%;
    margin-top: 0;

    opacity: 1;
    transition: 0.5s opacity, 0.5s transform;
    transition-timing-function: var(--cryptee-cb);
    transform: translateY(0);
}

#period button[period='yr'] {
    text-align: right !important;
}

#period button[period='yr']::before {
    display: inline-block;
    content: "billed ";
    transform: translateX(-1rem);
    opacity: 0;

    transition: 0.5s opacity, 0.5s transform;
    transition-timing-function: var(--cryptee-cb);
}

#period button[period='yr'].active::before {
    transform: translateX(-0.4rem);
    opacity: 1;
}

body.paddle-yearly #period {
    display: none !important;
}

#period-toggle {
    position: relative;
    appearance: none; 
    outline: none;
    width: 4rem;
    height: 2rem;
    padding: 0;
    border-radius: 4rem; 
    cursor: pointer;
    margin: calc(1rem - 2px) -2px;
    box-shadow: none !important;
    border: 2px solid var(--cryptee-0);
    box-sizing: content-box;

    opacity: 1;
    transition: 0.65s opacity, 0.65s transform;
    transition-timing-function: var(--cryptee-cb);
    transform: translateY(0);

}

#period-toggle:after {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 1rem;
    height: 1rem;
    background-color: var(--cryptee-0);
    border-radius: 50%; 

    translate: 0;
    transition: 0.3s translate ease;
}

#period-toggle:checked:after {
    translate: 2rem;
}

#period-toggle[true],
#period-toggle[false] {
    background-color: var(--ui-3) !important;
}

#period-toggle[true]:checked::before   { content: attr(true); color: #FFF; }
#period-toggle[false]:before           { content: attr(false); color: #FFF; }

#period-toggle[true]:checked:before    { left: -4rem; }
#period-toggle[false]:before           { left: -3rem; }


/* -----------------------------
-------------------------------- 
 
PLANS 
 
--------------------------------
----------------------------- */

#plans {
    opacity: 1;
    grid-row: 6/8;
    grid-column: 2/7;
    margin-top: calc(4rem + 4px);
    transition: 0.5s margin ease;
}

.plan {
    opacity: 1;
    display: grid;
    grid-row: 6/7;

    transition: 0.5s opacity, 0.5s transform;
    transition-timing-function: var(--cryptee-cb);

    grid-template-columns: 1fr 7rem;
    margin: 2rem 0;
    padding-bottom: 2rem;
    border-bottom: 2px solid #ddd;
}

.capacity {
    padding-top: 0.125rem;
}

.storage {
    display: inline;
    font-size: 1.5rem;
    letter-spacing: 2px;
    font-weight: 350;
}

.storage + span.gray {
    font-size: 0.75rem;
    margin-left: -0.25rem;
    color: #FFF;
    opacity: 0.5;
}

.plan button {
    margin-top: 0;
    margin-right: 0rem;
    background-image: var(--cryptee-upgrade-gradient);
    color: white;
    font-weight: 500;
    line-height: 1rem;
    height: 3rem;
    width: 100%;
    text-align: center;
    border-radius: 0.5rem;
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2);

    transition: max-width, color, box-shadow, background-color, margin;
    transition-duration: 0.3s;
    transition-timing-function: var(--cryptee-cb);
}

.plan[plan='10GB']   .price { min-width: 0.6rem; }
.plan[plan='400GB']  .price { min-width: 0.75rem; }
.plan[plan='2000GB'] .price { min-width: 1.25rem; }

.plan .prices { 
    margin-top: 0; 
    transition: 0.5s opacity, 0.5s transform;
    transition-timing-function: var(--cryptee-cb);
    transform: translateY(0.825rem);
}

.plan .euro { font-size: 0.9rem; }

.plan .prices span {
    display: inline-block;
    line-height: 1.5rem;
}

.plan .prices .savings { 
    opacity: 0;
    display: block;
    color: var(--cryptee-green);
    transition: 0.5s opacity, 0.5s transform;
    transition-timing-function: var(--cryptee-cb);
}

body:not([discount]) #period[period="yr"] ~ #plans .plan:not([plan='10GB']) .prices {
    transform: translateY(0rem);
}

#period[period="yr"] ~ #plans .plan .prices .savings {
    opacity: 1;
}

#period[period="yr"] ~ #plans .plan[current="yr"] .capacity > * {
    opacity: 1 !important;
    color: var(--cryptee-2) !important;
}

#period[period="yr"] ~ #plans .plan[current="yr"] .prices > span:not(.price):not(.savings),
#period[period="mo"] ~ #plans .plan[current="mo"] .prices > span:not(.price):not(.savings) {
    display: none !important;
}

body[discount] #plans .savings {
    display: none !important;
}

#period[period="yr"] ~ #plans .plan[current="yr"] .price::before,
#period[period="mo"] ~ #plans .plan[current="mo"] .price::before {
    content: "current plan";
}

#period[period="yr"] ~ #plans .plan[current="yr"] button,
#period[period="mo"] ~ #plans .plan[current="mo"] button  {
    pointer-events: none;
    flex-grow: 1;

    background-image : none;
    color: var(--cryptee-2);
    box-shadow: none;
    border: 1px solid var(--cryptee-3);
}

#period[period="yr"] ~ #plans .plan[current="yr"] button span,
#period[period="mo"] ~ #plans .plan[current="mo"] button span  {
    color: var(--cryptee-2);
}


#period[period="yr"] ~ #plans .plan[current="yr"] small,
#period[period="mo"] ~ #plans .plan[current="mo"] small {
    transform: translateY(0) !important;
    opacity: 0.5 !important;
    color: black;
}


#period[period="mo"] ~ #plans .plan .price::before { content: attr(mo); }
#period[period="yr"] ~ #plans .plan .price::before { content: attr(yr); }

body[discount] #period[period="mo"] ~ #plans .plan .price::before { content: attr(discountedmo); }
body[discount] #period[period="yr"] ~ #plans .plan .price::before { content: attr(discountedyr); }

body.paddle-yearly #plans {
    margin-top: 0;
}

body.paddle-yearly #plans .prices span:nth-child(3):after {
    content: "*";
}

body.paddle-yearly #plans::after {
    content: "* billed annually";
    font-weight: 350;
    color: var(--cryptee-2)
}

.capacity.nostripe {
    opacity: 0.5;
    pointer-events: none !important;
}

.why-question {
    color: var(--cryptee-1);
    width: 100%;
    text-align: center;
    margin-bottom: 1.5rem;

    transition: 0.25s opacity ease;
}

.why-answer {
    text-align: center;
    transition: 0.25s opacity ease;
}


/* -----------------------------
-------------------------------- 
 
CHOSEN PLAN ANIMATION / TRANSITION
 
--------------------------------
----------------------------- */

body.chooseplan #payment-info {
    opacity: 0;
    pointer-events: none !important;
    transform: translateX(16rem);
}

body:not(.chooseplan) #choose-plan {
    opacity: 0;
    pointer-events: none !important;
    transform: translateX(-16rem);
}

body:not(.chooseplan) #period button {
    opacity: 0;
    pointer-events: none !important;
    transform: translateY(-0.5rem);
}

body:not(.chooseplan) #period #period-toggle {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-0.3rem) !important;
}

body:not(.chooseplan) .why-question,
body:not(.chooseplan) .why-answer {
    opacity: 0 !important;
    pointer-events: none !important;
}

body:not(.chooseplan) .plan {
    opacity: 0;
    pointer-events: none !important;
    transform: translateY(-1rem);
}

body:not(.chooseplan) .plan:nth-child(1) { transition-delay: 0s; }
body:not(.chooseplan) .plan:nth-child(2) { transition-delay: 0.075s; }
body:not(.chooseplan) .plan:nth-child(3) { transition-delay: 0.150s; }

/* -----------------------------
-------------------------------- 
 
BILLING CARD 
 
--------------------------------
----------------------------- */

#billing {
    display: grid;
    grid-column: 2/7;
    grid-row: 5/8;

    grid-template-columns: 1fr 1fr;
    grid-auto-rows: max-content;
    column-gap: 0.5rem;

    padding: 4rem 0;
}

body:not(.billing) #billing {
    pointer-events: none !important;
}

#chosenplan {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 3fr 2fr;
    height: calc(4rem + 4px);
    
    opacity: 1;
    transform: translateY(0);
    transition: 0.3s opacity ease 0.5s, 0.3s transform var(--cryptee-cb) 0.5s;
}

body:not(.billing) #chosenplan {
    opacity: 0;
    transform: translateY(1rem);
}

#chosenstorage {
    text-align: right;
    grid-column: 2/3;
    grid-row: 1/2;
    line-height: 4.25rem;
    height: calc(4rem + 2px);
    margin-top: 0;
}

#chosenstorage .storage + span.gray {
    color: #000;
    letter-spacing: 0;
    margin-left: -0.5rem;
}

#chosenbilling {
    margin-top: 0;
    grid-column: 1/2;
    grid-row: 1/2;
    height: calc(4rem + 2px);
    line-height: 4.25rem;
}

#chosenbilling[period="mo"]::before {
    content: attr(cur) attr(price) "/" attr(period);
}

#chosenbilling[period="yr"]::before {
    content: attr(cur) attr(price) "/mo billed yearly";
}

#discount-tag {
    color: var(--cryptee-green);
    font-weight: 350;
    line-height: 1.5rem;
    grid-column: 1/-1;
    grid-row: 1/2;
    margin-top: 2.25rem;
    height: 2rem;


}

#discount-tag::before {
    float: left;
    content: "\ebe7";
    font-family: 'remixicon' !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.25rem;
    margin-right: 0.5rem;
}
 
body[discount] #chosenbilling {
    height: 2.5rem;
    line-height: 3rem;
}

body:not([discount]) #discount-tag {
    opacity: 0;
    pointer-events: none !important;
}

#billing input {
    padding-top: 0;
    padding-left: 1rem;
    text-align: left;
    
    transition: 0.3s box-shadow ease;
    box-shadow: 0 0 0 2px transparent;
}

#billing input + small {
    margin: 0.25rem 0 0rem 0;
    
    grid-column: 1/-1;
    text-align: left;

    color: var(--cryptee-red);
    
    opacity: 1;
    transform: translateY(0rem);

    transition-duration: 0.3s;
    transition-property: opacity, transform;
    transition-timing-function: var(--cryptee-cb);
}

#billing input:not(.error) + small {
    transform: translateY(-0.5rem);
    opacity: 0;
}

#card-details, #billing-details {
    grid-column: 1/-1;
    line-height: 4rem;
    margin-top: 0;
    height: 4rem;
}

#card-info {
    opacity: 1;
    cursor: pointer;
    transition: 0.3s opacity ease;
    font-size: 1.125rem;
    margin-top: -0.25rem;
}

.stripe-input, #billing input, #countries, #vat-number {
    background-color: #FFF;
    height: 3rem;
    line-height: 3.25rem;
    font-size: 1rem;
    transition: 0.3s box-shadow ease;
    box-shadow: 0 0 0 2px transparent;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    box-sizing: border-box;
}

.stripe-input.focus   { box-shadow: 0 0 0 2px var(--cryptee-0) !important;   }
.stripe-input.invalid { box-shadow: 0 0 0 2px var(--cryptee-red) !important; }
#billing input.error  { box-shadow: 0 0 0 2px var(--cryptee-red) !important; }

#card-pan {
    grid-column: 1/-1;
    padding: 0 0.65rem 0 1rem; /* accommodate link */
}

#card-exp {
    grid-column: span 1;
    padding: 0 1rem;
}

#card-cvc {
    grid-column: span 1;
    padding: 0 1rem;
}

#card-details, .stripe-input, #billing-name {
    opacity: 1;
    transform: translateY(0);
    transition: 0.3s box-shadow ease, 0.3s opacity ease 0.6s, 0.3s transform var(--cryptee-cb) 0.6s !important;
}

body:not(.billing) #card-details,
body:not(.billing) #billing-name,
body:not(.billing) .stripe-input {
    opacity: 0;
    transform: translateY(1rem);
}



#countries {
    grid-column: span 1;
    width: 100%;
    padding: 0 1rem;
    text-align: left;
    text-indent: 0;
    cursor: pointer;
    color: #000 !important;
    text-transform: lowercase;
}

#billing-zip {
    margin-top: 0;
    padding-top: 0;
    line-height: 2rem;
    grid-column: span 1;
    color: #000 !important;
    grid-column: span 1;
}

#billing-name, #billing-email {
    grid-column: 1/-1;
    margin-top: 0;
    margin-bottom: 0 !important;
}

/* override standard cryptee inputs */
#billing-name, #billing-email, #billing-zip {
    box-shadow: 0 0 0 2px transparent !important;
}

#billing-name:focus, 
#billing-email:focus, 
#billing-zip:focus {
    box-shadow: 0 0 0 2px var(--cryptee-0) !important;
}

#billing-details, #countries, #billing-zip, #billing-email, #vat-number, #checkout-button {
    opacity: 1;
    transform: translateY(0);
    transition: 0.3s box-shadow ease, 0.3s opacity ease 0.7s, 0.3s transform var(--cryptee-cb) 0.7s !important;
}

body:not(.billing) #billing-details, 
body:not(.billing) #countries, 
body:not(.billing) #billing-zip, 
body:not(.billing) #billing-email, 
body:not(.billing) #vat-number, 
body:not(.billing) #checkout-button {
    opacity: 0;
    transform: translateY(2rem);
}



/* -----------------------------
-------------------------------- 
 
VAT VALIDATION 
 
--------------------------------
----------------------------- */

#vat-number {
    cursor: pointer;
    opacity: 1;
    width: calc(100% - 0.5rem);    
    background-color: rgba(255,255,255,0) !important;
    transition: 0.3s background-color ease, 0.3s box-shadow ease;
}

#vat-number:focus, 
#vat-number:not(:placeholder-shown) {
    background-color: rgba(255,255,255,1) !important;
    box-shadow: 0 0 0 2px var(--cryptee-0) !important;
    border-radius: 0.5rem 0.5rem 0.5rem 0;
    cursor: text;

}

#company {
    height: 3rem;
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: 3rem 1fr;
    text-overflow: ellipsis;
    white-space: nowrap;

    opacity: 1;
    transition: 0.3s opacity ease;
    margin-bottom: 2rem;
}

#company:not(.validating):not(.error):not(.validated) {
    user-select: none !important;
    opacity: 0 !important;
}

#company i {
    padding: 0 0.5rem;
    width: 2rem;
    height: 2rem;
    font-size: 1.5rem;
    vertical-align: top;
    text-align: center;
    height: 4rem;
    line-height: 4.75rem;
    margin-top: -0.5rem;
    background-color: #FFF;
    z-index: 2;
    border-left: 2px solid #000;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    margin-left: -2px;
    border-radius: 0 0 0 0.5rem;
}

#company:not(.validated) i::before {
    content: "\EEC5";
    display: inline-block;
    animation: spin 0.4s linear infinite;
}

#company.error i::before {
    content: "\ECA0";
    animation: none;
}

#company small {
    padding-left: 0rem;
    padding-top: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background-color: #FFF;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
    border-top: 2px solid #000;
    z-index: 3;
    border-radius: 0 0.5rem 0.5rem 0;
}


/* -----------------------------
-------------------------------- 
 
CHECKOUT BUTTON 
 
--------------------------------
----------------------------- */
#checkout-button {
    grid-column: span 2;
    text-align: center;
    opacity: 1;
    height: 3rem;
    width: 100%;
    line-height: 3rem;

    background-image: var(--cryptee-upgrade-gradient);
    color: white;
    font-weight: 500;
    padding: 0 1.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 2px rgba(14,88,40,0);
}

#checkout-button:focus {
    box-shadow: 0 0 0 2px rgba(14,88,40,1);
}

#checkout-button[disabled] {
    opacity: 0.4;
}



.already-have {
    display: none !important;
}

#coupon-button {
    grid-column: 6/8;
    grid-row: 1/3;
    margin: 0.5rem 0.5rem 0 auto;
    width: 3rem;
    height: 3rem;
    text-align: center;
    color: #000;
    opacity: 0.7;
}

body[current] #coupon-button,
body:not(.chooseplan) #coupon-button {
    display: none !important;
}

body[discount] #coupon-button i::before {
    content: "\ebe7";
    color: var(--cryptee-green);
}

body:not(.billing)::before {
    background: var(--cryptee-upgrade-gradient);
    content: "your " attr(discount) "% discount is applied.";
    color: #FFF;
    padding: 0rem 1rem;
    grid-column: 2/7;
    grid-row: 6/7;
    text-align: center;
    height: 0rem;
    overflow: hidden;
    border-radius: 0 0 0.5rem 0.5rem;
    white-space: pre-wrap;
    font-weight: 350;
    font-size: 0.75rem;
    line-height: 1rem;
    z-index: 2;
    margin-top: 4rem;

    transition: 0.5s height ease, 0.5s padding ease;
    box-sizing: border-box;
}

body[discount]:not(.billing)::before {
    height: 2rem !important;
    padding: 0.5rem 1rem 0.325rem 1rem !important;
}

body[discount] #plans {
    margin-top: calc(5.5rem + 4px);
}

/* -----------------------------
-------------------------------- 
 
PROCESSING PAYMENT 
 
--------------------------------
----------------------------- */

body.processing #chosenplan {
    pointer-events: none !important;
}

body.processing #card-details,
body.processing #billing-details, 
body.processing .stripe-input, 
body.processing #billing-name,
body.processing #countries,
body.processing input {
    pointer-events: none !important;
}

body.processing #checkout-button {
    animation: blinkOpacity 1s ease infinite;
    pointer-events: none !important;
    border-bottom: none !important;
}

body:not(.processing) #checkout-button::before {
    content: "upgrade";
}

body.processing #checkout-button::before {
    content: "processing...";
}

body.processing #vat-number {
    pointer-events: none !important;
    opacity: 0.3 !important;
    border-radius: 0.5rem !important;
}

body.processing #company {
    opacity: 0 !important;
    pointer-events: none !important;
}


/* -----------------------------
-------------------------------- 
 
THANK YOU 
 
--------------------------------
----------------------------- */


/* #thanks, #threeDSError, #dbError, #thanks-switch, #switch-confirm, #switching, */
.plans-popup {
    background-color: var(--cryptee-green);
    color: #FFF;

    position: fixed;
    display: block;
    margin: auto;
    z-index: 2;

    top: 0;
    right: 0;
    left: 0;
    bottom: 0;

    height: 18rem;
    width: 14.75rem;

    padding: 4rem;

    opacity: 1;
    transform: translateY(0);

    transition-duration: 0.5s;
    transition-property: opacity, transform, padding, height;
    transition-timing-function: var(--cryptee-cb);
}

.plans-popup button.green {
    background-color: var(--cryptee-green);
    color: #FFF;
    padding: 1rem 2rem;
    height: 3.5rem;
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    width: 100%;
    text-align: center;
}

#threeDSError {
    background-color: var(--cryptee-yellow);
    color: #121212;
    height: 23rem;
}

#switch-confirm, #switching {
    background-color: var(--cryptee-0);
    height: 21rem;
}

#thanks-switch, #thanks {
    height: 21rem;
}

#dbError {
    background-color: var(--cryptee-blue);
    color: #FFF;
    height: 20rem;
}

body:not(.thanks) #thanks,
body:not(.threeds) #threeDSError,
body:not(.dberror) #dbError,
body:not(.switching) #switching,
body:not(.switch-confirm) #switch-confirm,
body:not(.thanks-switch) #thanks-switch {
    opacity: 0;
    pointer-events: none !important;
    transform: translateY(1rem);
}


body.thanks #countries,
body.thanks #payment-info,
body.thanks #card-details,
body.thanks #billing-details, 
body.thanks .stripe-input, 
body.thanks #billing-name,
body.thanks #checkout-button,
body.thanks input,
body.threeds #countries,
body.threeds #payment-info,
body.threeds #card-details,
body.threeds #billing-details, 
body.threeds .stripe-input, 
body.threeds #billing-name,
body.threeds #checkout-button,
body.threeds input,
body.dberror #countries,
body.dberror #payment-info,
body.dberror #card-details,
body.dberror #billing-details, 
body.dberror .stripe-input, 
body.dberror #billing-name,
body.dberror #checkout-button,
body.dberror input
{
    opacity: 0 !important;
    pointer-events: none !important;
}

body.iframe #logo {
    display: none !important;
}


/* -----------------------------
-------------------------------- 
 
MEDIA 
 
--------------------------------
----------------------------- */

@media (max-height : 912px) {
    body {
        grid-template-rows: 1rem 2rem 1rem 0rem 4rem minmax(22rem, 1fr) 4rem 1fr 4rem;
    }
}

@media (max-width : 320px) {

    .plan {
        max-width: 16.75rem;
        margin: 2rem auto;
    }
        
    #choose-plan, #payment-info {
        grid-row: 1/2;
        font-size: 1.25rem; 
        letter-spacing: 1px;
        padding: 0 2rem; 
    }

    #period, #plans {
        grid-row: 5/7;
    }

    #billing {
        padding: 0;
    }

    #billing > *:not(input):not(.stripe-input):not(select):not(small):not(#checkout-button):not(#company) {
        width: 18rem;
        margin: 0 auto;
    }

    #billing input + small {
        margin-bottom: 0rem !important;
    }

    #countries {
        padding-left: 1rem;
    }
    
    #card-pan,
    #vat-number,
    #countries { 
        border-radius: 0 0.5rem 0.5rem 0 !important; 
    }

    #billing-zip,
    #card-cvc,
    #checkout-button { 
        border-radius: 0.5rem 0 0 0.5rem !important; 
    }

    #billing-name,
    #billing-email { 
        border-radius: 0 !important; 
    }

    #company, #company small, #company i {
        border-radius: 0 !important;
    }

    .plans-popup {
        width: 14rem;
        padding: 3rem;
    }

    #switch-confirm {
        height: 21.5rem;
    }

}



/* -----------------------------
-------------------------------- 
 
IT'S A POINTER DEVICE,
ENABLE HOVERS 
 
--------------------------------
----------------------------- */

@media (-moz-touch-enabled: 0), (pointer:fine) { 
    #logo:hover img { opacity: 1 !important; }
    #coupon-button:hover { opacity: 1 !important; }
    #countries:hover { box-shadow: 0 0 0 2px var(--cryptee-3) !important; }
}



/* -----------------------------
-------------------------------- 
 
VIEW TRANSITIONS 
 
--------------------------------
----------------------------- */
/* #region VIEW TRANSITIONS */

@supports (view-transition-name: none) {
    
    @view-transition { navigation: auto; }

    ::view-transition-group(root) {
        animation-duration: 0.5s;
        animation-timing-function: ease-out;
        animation-direction: normal;
    }
    
}


/* #endregion VIEW TRANSITIONS */
