@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

@font-face {
    font-family: 'ZELDA';
    src: url('../font/zelda/ZELDA.woff') format('woff2'), url('../font/zelda/ZELDA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ZELDA';
    src: url('../font/zelda/ZELDA.woff2') format('woff2'), url('../font/zelda/ZELDA.woff2') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../font/Open-Sans/OpenSans-Extrabold.woff2') format('woff2'), url('../font/Open-Sans/OpenSans-Extrabold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans Condensed';
    src: url('../font/Open-Sans/OpenSans-CondensedLight.woff2') format('woff2'), url('../font/Open-Sans/OpenSans-CondensedLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../font/Open-Sans/OpenSans-Bold.woff2') format('woff2'), url('../font/Open-Sans/OpenSans-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../font/Open-Sans/OpenSans.woff2') format('woff2'), url('../font/Open-Sans/OpenSans.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../font/Open-Sans/OpenSans-Light.woff2') format('woff2'), url('../font/Open-Sans/OpenSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Open Sans';
    src: url('../font/Open-Sans/OpenSans-Semibold.woff2') format('woff2'), url('../font/Open-Sans/OpenSans-Semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

a {
    color: #000000;
    text-decoration: none;
}

a:hover {
    color: inherit;
}

body {
    overflow-x: hidden;
    font-family: 'Open Sans';
    background: #000000;
}

html {
    overflow-x: clip;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menu-item.active a {
    color: #ff0000;
    /* Set your desired active state color */
    font-weight: bold;
}

/* Header start */
.header-wrapper {
    position: relative;
    z-index: 10;
}

header .logo-wrapper {
    display: block;
    width: 100%;
}

header .logo-wrapper img {
    display: block;
    margin: 0 auto;
    width: 125px;
    height: auto;
}

.menu-link {
    display: block;
    text-align: center;
    width: 100%;
    padding: 7px 10px;
    line-height: 1;
    color: #ffffff;
    transition: all 0.4s;
}

.menu-link:hover {
    color: #ffffff;
    background: rgba(0, 0, 0, 0.3);
}

.upper-header .cart-wrapper {
    position: fixed;
    top: 16px;
    z-index: 11;
    cursor: pointer;
}

.upper-header .user-wrapper {
    position: fixed;
    top: 16px;
    right: 17px;
    z-index: 11;
}

.cart-wrapper .cart-icon {
    background: url('../images/cart-icon.svg') center no-repeat;
    display: block;
    width: 30px;
    height: 30px;
    background-size: contain;
}

.user-wrapper .user-icon {
    background: url('../images/user.svg') center no-repeat;
    display: block;
    width: 30px;
    height: 30px;
    background-size: contain;
}

.icon-wrapper a span {
    opacity: 0.6;
    transition: all 0.4s;
}

.icon-wrapper a span:hover {
    opacity: 1;
}

.icon-wrapper a .facebook {
    background: url('../images/facebook.svg') center no-repeat;
    display: block;
    width: 18px;
    height: 18px;
}

.icon-wrapper a .twiter {
    background: url('../images/twitter.svg') center no-repeat;
    display: block;
    width: 18px;
    height: 18px;
}

.icon-wrapper a .google {
    background: url('../images/google.svg') center no-repeat;
    display: block;
    width: 18px;
    height: 18px;
}

.copyright-wrapper span {
    font-size: 10px;
    display: block;
    text-align: center;
    color: #ffffff;
    line-height: 27px;
}

.app-version {
    font-size: 8px !important;
    opacity: 0.7;
    margin-top: 2px;
    font-weight: 400;
    letter-spacing: 0.5px;
}

.bottom-footer .icon-wrapper {
    display: flex;
    justify-content: center;
    gap: 0 8px;
    margin: 10px 0;
}

/* Header end */

.home-back-overlay {
    margin: 0px;
    padding: 0px;
    position: fixed !important;
    left: 0px;
    top: 0px;
    width: 100vw;
    height: 100% !important;
    background: url('../images/background-image-overlay-full.png');
    opacity: 0.35;
    z-index: -1;
}

.home-back-img {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100vw;
    z-index: -2;
    object-fit: cover;
}

.home-back-img {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-position: center;
    transition: background-image 0.4s ease-in-out;
}

.esim-provider-wrapper::before {
    content: '';
    background: url("../images/bg1.jpg") center no-repeat;
    background-size: cover;
    display: block;
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -3;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s all;
}

.esim-provider-wrapper.active::before {
    opacity: 1;
    visibility: visible;
}

.two-esim-wrapper::before {
    content: '';
    background: url("../images/bg2.jpg") center no-repeat;
    background-size: cover;
    display: block;
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -3;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s all;
}

.two-esim-wrapper.active::before {
    opacity: 1;
    visibility: visible;
}

.protal-wrapper::before {
    content: '';
    background: url("../images/bg3.jpeg") center no-repeat;
    background-size: cover;
    display: block;
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -3;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s all;
}

.protal-wrapper.active::before {
    opacity: 1;
    visibility: visible;
}

.autocomplete-list {
    position: absolute;
    padding: 10px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    pointer-events: auto;
}

/* Show autocomplete-list only when it has list items */
.autocomplete-list:not(:empty) {
    display: block;
}

/* Hide autocomplete list when register tab is not active */
#modal-register-content:not(.active) .autocomplete-list {
    display: none !important;
    visibility: hidden !important;
}

.autocomplete-list li {
    padding: 10px;
    cursor: pointer;
    color: white;
    /* Set text color to white */
    list-style: none;
    /* Remove default list item bullet */
    pointer-events: auto;
}

.contact-wrapper::before {
    content: '';
    background: url("../images/bg4.jpg") center no-repeat;
    background-size: cover;
    display: block;
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -3;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s all;
}

.contact-wrapper.active::before {
    opacity: 1;
    visibility: visible;
}

.faq-wrapper::before {
    content: '';
    background: url("../images/bg3.jpeg") center no-repeat;
    background-size: cover;
    display: block;
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -3;
    opacity: 0;
    visibility: hidden;
    transition: 0.5s all;
}

.faq-wrapper.active::before {
    opacity: 1;
    visibility: visible;
    background: #3282f5;
}

.esim-provider-wrapper,
.two-esim-wrapper,
.protal-wrapper,
.faq-wrapper,
.contact-wrapper {
    height: 100vh;
    color: #ffffff;
    position: relative;
}

.list-wrapper {
    color: #ffffff;
    position: relative;
}

.esim-provider-wrapper .content-wrapper,
.protal-wrapper .content-wrapper,
.contact-wrapper .content-wrapper {
    display: flex;
    flex-direction: column;
}

.find-more-btn {
    padding: 13px 30px;
    color: #fff;
    background-color: transparent;
    border: 1px solid #fff;
    transition: all 0.4s;
    letter-spacing: -1px;
}

.find-more-btn:hover {
    background-color: #ffffff;
    color: #000000;
}

.esim-provider-wrapper .info {
    font-weight: 500;
}

.two-esim-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.two-esim-wrapper .content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.two-esim-wrapper a {
    width: 150px;
    text-align: center;
    padding: 10px 26px;
    border: 1px solid #fff;
    color: #fff;
    transition: all 0.4s;
    line-height: 1.2;
}



.two-esim-wrapper .sixtel-btn:hover {
    background-color: #ff0000;
    color: #fff;
}

.portal-tab-wrapper {
    display: flex;
    width: 100%;
    border: none;
}

.portal-tab-wrapper>li {
    width: 50%;
    padding-bottom: 10px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
}

.portal-tab-wrapper>li>span {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 2px;
    color: #fff !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 3px solid rgba(255, 255, 255, 0.25) !important;
    transition: all 0.4s;
    padding: 8px 16px;
}

.portal-tab-wrapper>li:hover>span {
    color: #ff8000 !important;
}

.portal-tab-wrapper>li.active>span {
    color: #ff8000 !important;
    border-bottom: 3px solid #ff8000 !important;
}

.portal-tab-wrapper>li.active {
    color: #ff8000;
    border-color: #ff8000;
}

.login-icon::before {
    content: '';
    background: url('../images/login.svg') center no-repeat;
    display: block;
    width: 20px;
    height: 20px;
    transition: all 0.4s;
}

.portal-tab-wrapper>li:hover>span .login-icon::before,
.portal-tab-wrapper>li.active>span .login-icon::before {
    background: url('../images/login-orange.svg') center no-repeat;
}

.register-icon::before {
    content: '';
    background: url('../images/register.svg') center no-repeat;
    display: block;
    width: 20px;
    height: 20px;
    transition: all 0.4s;
}

.portal-tab-wrapper>li:hover>span .register-icon::before,
.portal-tab-wrapper>li.active>span .register-icon::before {
    background: url('../images/register-orange.svg') center no-repeat;
}

.portal-tab-content-wrapper {
    width: 100%;
    padding: 15px;
    min-height: 255px;
    height: auto;
}

.login-content-wrapper,
.register-content-wrapper {
    display: flex;
}

.portal-tab-content-wrapper .login-content-wrapper.active,
.portal-tab-content-wrapper .register-content-wrapper.active {
    display: flex;
}

.custom-tab-content {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s all;
}

.custom-tab-content.active {
    display: block;
    opacity: 1;
    visibility: visible;
}

.login-form-wrapper,
.register-form-wrapper {
    padding: 0 15px;
}

.login-img,
.register-img {
    max-width: 180px;
    height: 180px;
    margin-left: auto;
}

.login-img-wrapper .login-img .login {
    background: url('../images/portal-login-side-img.png') center no-repeat;
    display: block;
    width: 100%;
    height: 100%;
}

.register-img-wrapper .register-img .register {
    background: url('../images/portal-register-side-img.png') center no-repeat;
    display: block;
    width: 100%;
    height: 100%;
}

.input-field input,
.input-field textarea {
    background: rgba(0, 0, 0, 0.15);
    color: #fff;
    transition: all 0.4s;
    width: 100%;
    padding: 6px 12px;
    line-height: 1.5;
    border: 1px solid #ffffff;
    font-weight: 600;
}

.input-field {
    margin-bottom: 16px;
    position: relative;
}

.input-field label {
    color: #fff;
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 14px;
}

/* Contact form labels - positioned to the left on larger screens */
.contact-info-wrapper .input-field {
    display: flex;
    align-items: center;
    gap: 10px;
}

.contact-info-wrapper .input-field label {
    min-width: 140px;
    margin-bottom: 0;
    text-align: right;
    flex-shrink: 0;
}

.contact-info-wrapper .input-field input,
.contact-info-wrapper .input-field textarea {
    flex: 1;
}

.input-field input:focus,
.input-field textarea:focus {
    background: #ffffff;
    color: #000;
    outline: none;
}

.input-field input:focus::placeholder,
.input-field textarea:focus::placeholder {
    color: #000;
}

.input-field input::placeholder,
.input-field textarea::placeholder {
    color: #ffffff;
    transition: all 0.4s;
}

.country-address {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px 0;
}

.country-address span:last-child {
    margin-top: 16px;
}

.submit-field {
    display: flex;
    justify-content: end;
}

.submit-field .submit {
    height: 43px;
    background: rgba(0, 0, 0, 0.15);
    color: #fff;
    background-color: transparent;
    padding: 10px 26px;
    border: 1px solid #ffffff;
    transition: all 0.4s;
    cursor: pointer;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.submit-field .submit:hover {
    background: #ffffff;
    color: #000;
}

.contact-info-wrapper {
    width: 100%;
}

.menu-link.active {
    background: rgba(0, 0, 0, 0.15);
}

.esim-provider-wrapper .title h1,
.protal-wrapper .title h2,
.faq-wrapper .title h2,
.contact-wrapper .title h2 {
    font-weight: 500;
}

/* FAQ Section Styles */
.faq-wrapper .content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    padding: 40px 20px;
}

.faq-wrapper .title {
    margin-bottom: 30px;
}

.faq-content {
    max-width: 950px;
    width: 100%;
}

.faq-item {
    background: rgba(0, 0, 0, 0.3);
    padding: 20px 25px;
    margin-bottom: 20px;
    border-radius: 8px;
    border-left: 3px solid #ff8000;
    transition: all 0.3s;
}

.faq-item:hover {
    background: rgba(0, 0, 0, 0.5);
    transform: translateX(5px);
}

.faq-item h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #ff8000;
}

.faq-item p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/*product datalist page*/
.main-container {
    position: relative;
}

.main-container::after {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -2;
}

@keyframes background {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.all-sim-shop::after {
    background: #ff0000;
    animation: background 0.8s;
}



.travel-sim-main-wrapper::after {
    background: url('../images/bg7.jpg') no-repeat 50%;
    background-size: cover;
    animation: background 0.8s;
}

.travel-sim-plan-wrapper::after {
    background: url('../images/fourth.png') no-repeat 50%;
    background-size: cover;
}

.travel-sim-plan-wrapper.unlimited-active::after {
    background: url('../images/unlimited-package.jpg') no-repeat 50%;
    background-size: cover;
}

.travel-sim-plan-wrapper.unlimited-active.unlimited-essential-active::after {
    background: url('../images/unlimited-essential.png') no-repeat 50%;
    background-size: cover;
}

.travel-sim-plan-wrapper.unlimited-active.unlimited-plus-active::after {
    background: url('../images/unlimited-plus.png') no-repeat 50%;
    background-size: cover;
}

.travel-sim-plan-wrapper.limited-active::after {
    background: url('../images/regional-package.png') no-repeat 50%;
    background-size: cover;
}

#rate-card-page .all-sim-shop::after {
    background: url('../images/rate-card-bg.jpg') no-repeat 50%;
    background-size: cover;
    animation: background 0.8s;
}

.main-container::before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background: url('../images/background-image-overlay-full.png');
    height: 100%;
    width: 100%;
    z-index: -1;
    opacity: 0.35;
    transition: 1s all;
}

.fa-sim-wrapper {
    position: relative;
    margin: auto;
}

.shop-name-title {
    /* display: flex; */
    /* justify-content: center; */
    /* padding: 25px 10px; */
    position: fixed;
    top: 42px;
    width: 100%;
}

.shop-name-title .shop-link::before {
    content: '';
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    z-index: -1;
}

.all-sim-shop .shop-name-title .shop-link::before {
    background: url('../images/bg-city-btn.jpg');
}



.shop-name-title .shop-link.travel-sim-main-wrapper::before {
    background: url('../images/shop-link-icon.png') no-repeat center;
    background-size: cover;
}

.shop-name-title .shop-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: relative;
    overflow: hidden;
    transition: all 0.4s;
}

.shop-name-title .shop-link:hover {
    transform: translateY(-5px);
}

.shop-name-title .shop-link span {
    font-family: 'poppins', sans-serif;
    font-size: 9px;
    font-weight: bold;
    display: block;
    line-height: 1;
}

.all-sim-shop .shop-name-title .shop-link span {
    color: #fbc5c5;
}



/* ── FOUC shield for DeckEngine pages (UK eSIM shop + Rate Card) ─────────────
   WHY opacity, NOT visibility:
   The slot rules (.ck-slot-0, .ck-slot-p1 etc.) all carry an explicit
   "visibility: visible" declaration (lines ~5859-5909 below).  CSS inheritance
   means a child's *explicit* visibility:visible beats a parent's inherited
   visibility:hidden — so the old fix leaked through any slot-classed card.
   opacity:0 does NOT inherit and cannot be overridden by a child's own rules:
   a child with opacity:1 inside an opacity:0 parent is still fully transparent.
   This creates a true rendering barrier until .ck-active is added.

   Scope: .all-sim-shop ensures ONLY the two affected pages (UK eSIM shop and
   Rate Card) get this treatment, leaving every other page's .esim-items-wrapper
   untouched.

   Reveal: when DeckEngine adds .ck-active the :not() stops matching and the
   wrapper fades from 0→1 over 120 ms, which is imperceptible at runtime but
   avoids any hard pop-in.  pointer-events:none during the hidden phase prevents
   clicks on invisible content. */
.all-sim-shop .esim-items-wrapper:not(.ck-active) {
    opacity: 0;
    pointer-events: none;
}
.all-sim-shop .esim-items-wrapper.ck-active {
    opacity: 1;
    transition: opacity 0.12s ease-out;
}

.esim-items-wrapper {
    display: flex;
    flex-wrap: wrap;
    padding: 30px 0;
    justify-content: center;
}

.esim-items-wrapper>div {
    padding: 0 15px;
    width: 330px;
    margin: auto;
}

.esim-item-wrapper {
    perspective: 600px;
    position: relative;
    transform-style: preserve-3d;
    width: 100%;
}

.esim-item-wrapper .has-tooltip:before {
    bottom: 26px;
}

.esim-item-wrapper .has-tooltip:after {
    bottom: 38px;
}

.esim-item-wrapper.active .esmi-img-wrapper {
    opacity: 0;
    visibility: hidden;
}

.esmi-img-wrapper {
    position: relative;
    height: 165px;
    margin: -30px 15px 0 15px;
    transition: all 1s ease-out 0s;
    opacity: 1;
    visibility: visible;
}

.item-9 .esmi-img-wrapper {
    height: 185px;
}

.esmi-img-wrapper .esim-face {
    box-shadow: 0 16px 38px -12px rgba(0, 0, 0, 0.56), 0 4px 25px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
}

.esmi-img-wrapper .esim-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}



.item-7 .esim-img {
    background: url("../images/20-gigabyte.jpg");
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
}

.item-8 .esim-img {
    background: url("../images/50-gigabyte.jpg");
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
}

.item-9 .esim-img {
    background: url("../images/unlimited.jpg");
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
}

.item-10 .esim-img {
    background: url("../images/1-gigabyte.jpg");
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
}

.item-11 .esim-img {
    background: url("../images/2-gigabyte.jpg");
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
}

.item-12 .esim-img {
    background: url("../images/6-gigabyte.jpg");
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
}

.item-13 .esim-img {
    background: url("../images/24-gigabyte.jpg");
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
}

.esmi-img-wrapper .com-name {
    font-family: 'ZELDA';
    font-size: 20px;
    font-weight: 600;
    position: absolute;
    z-index: 3;
    display: flex;
    justify-content: center;
    height: 100%;
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.esmi-img-wrapper .com-link-wrapper {
    font-weight: 600;
    position: absolute;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    align-items: end;
    padding-bottom: 10px;
}

.esmi-img-wrapper .esim-face.front .com-name {
    align-items: center;
    color: white;
}

.esmi-img-wrapper .esim-face.back {
    align-items: end;
}

.esmi-img-wrapper .esim-face.back .com-link {
    color: black;
}

.esim-price-wrapper {
    font-size: 30px;
    color: rgb(255, 135, 0);
    font-weight: 600;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 3px;
}

.all-sim-shop .esim-price-wrapper {
    color: #ff8000;
}



.all-sim-shop .esim-price-wrapper .euro-icon {
    background: url("../images/euro-orange.svg") no-repeat;
    display: block;
    width: 11px;
    height: 16px;
    background-size: contain;
}



.esim-description-wrapper {
    padding: 15px 30px 0 30px;
}

.description-item span:first-child {
    font-size: 14px;
}

.description-item .right-icon {
    background: url("../images/right.svg");
    display: block;
    width: 16px;
    height: 16px;
}

.description-item .wrong-icon {
    background: url("../images/wrong.svg");
    display: block;
    width: 16px;
    height: 16px;
}

.description-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0 10px;
    line-height: 1.5em;
    padding: 2px 0;
}

.add-cart-btn {
    display: flex;
    justify-content: center;
}

.add-cart-btn .btn {
    position: relative;
    display: inline-block;
    padding: 8px 10px;
    border: 1px;
    background: red;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    border-radius: 3px;
    box-shadow: 0px 1px 4px -2px #333;
    text-shadow: 0px -1px #333;
    margin-top: 24px;
    cursor: pointer;
    outline: none;
}

.add-cart-btn .btn:hover {
    background: linear-gradient(#073, #0fa);
}

.add-cart-btn .btn::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: 50%;
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}

.add-cart-wrapper {
    position: relative;
    margin-bottom: 5px;
}

.romain-info-btn span {
    display: block;
    width: 18px;
    height: 18px;
    cursor: pointer;
}



.all-sim-shop .romain-info-btn span {
    background: url("../images/romain-orange.svg");
}

.romain-info-btn {
    position: absolute;
    right: 7px;
    bottom: 0px;
}

.esim-front-view {
    backface-visibility: hidden;
    transform-style: preserve-3d;
    z-index: 1;
    width: 100%;
    transition: all 1s ease-out 0s;
    position: relative;
    background-color: #ffffff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

.esim-back-view {
    backface-visibility: hidden;
    transform-style: preserve-3d;
    z-index: 1;
    height: 100%;
    width: 100%;
    transition: all 1s ease-out 0s;
    position: relative;
    background-color: #ffffff;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
}

.esim-front-view {
    transform: rotateY(0deg);
}

.esim-back-view {
    transform: rotateY(-180deg);
}

.active .esim-front-view {
    transform: rotateY(180deg);
}

.active .esim-back-view {
    transform: rotateY(0deg);
}

.esim-back-view {
    position: absolute;
    top: 0;
    background: #ffffff;
}

.romai-info {
    padding: 15px 30px 5px 30px;
}

.romai-info .roaming-info-title {
    margin: 12px 0;
    text-align: center;
    font-weight: 600;
    font-size: 16px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
    color: #000000de;
}

.romai-info p {
    font-size: 14px;
    color: #000000de;
    font-weight: 500;
    margin-bottom: 12px;
    line-height: 1.5em;
}

.rate-card-description a,
.rate-card-description span,
.bolt-on-item a:hover,
.travel-page-link a {
    color: blue;
}

.rate-card-description .flip-link {
    cursor: pointer;
}

.bolt-ons-section {
    margin-bottom: 12px;
}

.bolt-ons-section .bolt-ons-title {
    font-weight: 600;
    font-size: 16px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.33);
    color: #000000de;
    margin-bottom: 5px;
}

.travel-page-link {
    margin-bottom: 25px;
}

.rate-card-back-action {
    text-align: center;
}

.rate-card-back-action .btn.btn-link {
    position: relative;
    display: inline-block;
    padding: 8px 10px;
    border: 1px;
    background: red;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    border-radius: 3px;
    box-shadow: 0px 1px 4px -2px #333;
    text-shadow: 0px -1px #333;
    cursor: pointer;
    outline: none;
}

.rate-card-back-action .btn.btn-link:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: 50%;
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}

.rate-card-back-action .btn.btn-link:hover {
    background: linear-gradient(#073, #0fa);
}

/*travel-esim page*/
.list-option-btn .btn {
    background: url("../images/toggle-off.svg") center no-repeat;
    background-size: contain;
    display: block;
    width: 25px;
    height: 25px;
    transition: all 0.4s;
    margin: 16px;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 111;
    cursor: pointer;
}

.list-option-btn.active .btn {
    background: url("../images/toggle-on.svg") center no-repeat;
    background-size: contain;
}

.list-option-wrappers.active .list-wrapper {
    display: none;
}

.list-option-wrappers .option-wrapper {
    display: none;
}

.list-option-wrappers.active .option-wrapper {
    display: flex;
    justify-content: center;
    padding-top: 8.5%;
    height: 100vh;
    position: relative;
}

.nav-tabs {
    border: none;
}

.list-tabs {
    display: flex;
}

.list-tabs .list-tab {
    width: calc(100% / 5);
}

.country-list-items.active {
    display: block;
}

.country-list-items {
    display: none;
}

.list-tabs .list-tab .nav-link {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 2px;
    color: #fff !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 3px solid rgba(255, 255, 255, 0.25) !important;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    padding: 0 0 10px 0;
}

.list-tabs .list-tab .nav-link span {
    transition: all 0.4s;
    transform: translateY(0);
}

.list-tabs .list-tab:hover .nav-link {
    color: #ff8000 !important;
}

.list-tabs .list-tab:hover .nav-link span {
    transform: translateY(-2px);
}

.list-tabs .list-tab.active .nav-link {
    color: #ff8000 !important;
    border-bottom: 3px solid #ff8000 !important;
}

.list-tabs .list-tab:hover .nav-link .login-icon::before,
.list-tabs .list-tab.active .nav-link .login-icon::before {
    background: url('../images/login-orange.svg') center no-repeat;
}

.country-list-wrappers .country-list-items {
    padding: 15px;
}

.country-list {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    padding: 0 8px;
}

.country-list .country-item {
    display: flex;
    gap: 0 15px;
    align-items: center;
    min-height: 27px;
    font-family: poppins;
    font-size: 15px;
    position: relative;
}

.country-toltip {
    position: absolute;
    top: -29px;
    left: 0;
    right: 0;
    width: fit-content;
    padding: 5px;
    color: black;
    font-size: 15px;
    background: white;
    opacity: 0;
    visibility: hidden;
    z-index: 1;
}

.country-data .country-toltip {
    margin: auto;
}

.country-toltip::after {
    content: '';
    position: absolute;
    bottom: -5px;
    display: block;
    width: 10px;
    height: 10px;
    background-color: white;
    transform: rotate(45deg);
    left: 0;
    right: 0;
    margin: auto;
    z-index: -1;
}

.country-list .country-item:hover .country-toltip,
.country-data:hover .country-toltip {
    opacity: 1;
    visibility: visible;
}

.country-list .country-img {
    background-size: contain;
    display: block;
    width: 24px;
    height: 18px;
    cursor: pointer;
}

.country-img img {
    width: 24px;
}

.list-content-wrappers {
    height: 100%;
}

.flag {
    display: none;
}

.country-code {
    color: #ff8000;
    margin-right: 2px;
}

.country-drop-down-wrapper .country-name {
    margin-left: 20px;
    width: 100%;
}

@keyframes Country {
    0% {
        transform: translateY(20px);
    }

    100% {
        transform: translateY(0px);
    }
}

.country-search {
    font-size: 14px;
    padding: 12px 10px 12px 30px;
    border: 0.5px solid gray;
    border-radius: 25px;
    height: 35px;
    width: 100%;
    text-align: left;
    background: #37383a;
    color: #ff8000;
    transition: 0.2s all;
}

.country-search-wrapper.active .country-search {
    padding: 12px 10px;
}

.country-search:focus {
    outline: none;
}

.country-search-wrapper {
    padding: 25px 0;
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon-btn:before {
    content: '';
    display: block;
    background: url("../images/search.svg");
    width: 16px;
    height: 16px;
    margin: auto;
    opacity: 1;
    visibility: visible;
    transition: 0.3s all;
}

.country-search-wrapper.active .search-icon-btn:before {
    opacity: 0;
    visibility: hidden;
}

.search-icon-btn,
.search-clear-btn {
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
}

.search-icon-btn {
    left: 9px;
}

.search-clear-btn {
    right: 9px;
}

.search-clear-btn:after {
    content: '';
    display: block;
    background: url("../images/clear-search.svg");
    width: 15px;
    height: 15px;
    margin: auto;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s all;
    cursor: pointer;
}

.country-search-wrapper.active .search-clear-btn:after {
    opacity: 1;
    visibility: visible;
}

.selction:focus-visible {
    outline: none;
}

.country-roming {
    position: sticky;
    top: 0;
    text-align: center;
    left: 0;
    right: 0;
    margin: 0;
    background: #37383a;
    height: 50px;
    line-height: 50px;
    margin-top: 0;
    font-size: 20px;
    font-family: poppins;
    border-radius: 25px;
    z-index: 1;
    margin-bottom: 15px;
}

::-webkit-scrollbar {
    width: 0;
}

html#shop-page body {
    overflow-y: auto !important;
}

html#shop-page body::-webkit-scrollbar {
    width: 10px !important;
}

html#shop-page body::-webkit-scrollbar-thumb {
    background: #c3b5b5f2;
    border-radius: 6px;
}

html#shop-page body::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.country-continue-btn {
    position: absolute;
    z-index: 1000;
    pointer-events: auto;
    cursor: pointer;
}

.country-continue-btn .btn {
    background-color: #007bff;
    height: 55px;
    padding: 0 100px;
    display: flex;
    align-content: center;
    flex-wrap: wrap;
    color: #ffffff;
    border-radius: 25px;
    cursor: pointer;
    border: 0;
}

.country-continue-btn .btn.disabled,
.country-continue-btn .btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.country-drop-down .country-drop-icon::after,
.btn-switch .country-drop-icon::after,
.btn-renew .country-drop-icon::after {
    content: '';
    display: block;
    background: url("../images/triangle.svg");
    width: 15px;
    height: 13px;
    transform: rotateX(180deg);
    transition: 0.4s all;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

.btn-switch .country-drop-icon::after,
.btn-renew .country-drop-icon::after {
    background: url("../images/triangle-white.svg");
    transform: inherit;
    height: 15px;
}

.country-drop-down-wrapper {
    margin: 0 auto;
    z-index: 112;
    width: 100%;
}

.country-drop-down {
    position: relative;
    background-color: #37383a;
    color: white;
    margin: 0 auto;
    padding: 0 15px 0 20px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    width: 100%;
    height: 55px;
    border-radius: 20px;
    text-align: left;
    transition: all 1s;
    display: flex !important;
    align-items: center;
    max-width: 450px;
    opacity: 1;
}

.country-drop-down.active {
    opacity: 0.5;
}

.country-data-wrapper {
    width: 90%;
    margin: 0 auto;
    background: rgb(33, 37, 41);
    height: 70vh;
    border-radius: 20px;
    transform: translateY(20px);
    transition: 0.4s all;
    opacity: 0;
    visibility: hidden;
}

.country-data-wrapper.active {
    transform: translateY(0);
    visibility: visible;
    opacity: 1;
}

.country-data-list-items {
    margin: 0 auto;
    color: #ffffff;
    border-radius: 25px;
    position: relative;
    height: calc(100% - 85px);
    overflow: auto;
}

.country-drop-down-wrapper .country-list {
    padding: 0 8px 0 8px;
    border-radius: 25px;
    background: #37383a;
}

.country-list .country-data {
    display: flex;
    align-items: center;
    border-radius: 25px;
    transition: 0.2s all;
    background-color: transparent;
    cursor: pointer;
    width: 100%;
    position: relative;
}

.country-list .country-data:hover,
.country-list .country-data.active:hover {
    background-color: #212529;
}

.country-data:hover img,
.country-data:hover .country-code-defult,
.country-data:hover .country-name-defult {
    opacity: 0.7;
}

.country-list .country-data.active {
    background-color: #ff8000;
}

.country-code-defult {
    display: inline-block;
    margin-left: 10px;
    font-size: 15px;
    color: gray;
    min-width: 20px;
}

.country-drop-down-wrapper .country-name-defult {
    margin-left: 16px;
    font-family: poppins;
}

.country-drop-icon {
    display: block;
    width: 15px;
    height: 13px;
    padding-right: 10px;
    transform: rotate(0deg);
}

.country-drop-down.active .country-drop-icon {
    transform: rotate(180deg);
}

.back-to-top {
    position: fixed;
    bottom: 5px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s all;
}

.back-to-top.show {
    opacity: 0.5;
    visibility: visible;
    transition: 0.4s all;
}

.back-to-top:hover {
    opacity: 1;
}

.back-to-top:hover span {
    transform: translateY(-5px);
}

.back-to-top span {
    display: block;
    background: url("../images/back-to-top.svg");
    width: 30px;
    height: 30px;
    background-size: contain;
    transform: translateY(0);
    transition: 0.4s all;
}

.country-list.hidden {
    display: none;
}

.action-menu-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.userportal-action-modal.custom-modal {
    max-width: var(--sixtel-modal-max-width);
    max-height: var(--sixtel-modal-max-height);
}

.action-menu-content-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-menu-content-item span {
    color: white;
}

.action-menu-content-item span:first-child {
    width: 105px;
}

.action-menu-content-item span:nth-child(2) {
    width: calc((100% - 105px) - 10px);
    text-align: right;
    word-break: break-all;
}

.action-menu-content-items {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.actions-buttons-wrapper {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.actions-buttons-wrapper>span {
    width: calc((100% - 10px)/2);
}

.desktop-action-dropdown button,
.actions-buttons-wrapper button {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    color: #fff;
    width: 100% !important;
}

.desktop-action-dropdown .btn-auto-renew,
.actions-buttons-wrapper .btn-auto-renew {
    background-color: #3b82f6;
}

.desktop-action-dropdown .btn-renew,
.desktop-action-dropdown .btn-switch,
.actions-buttons-wrapper .btn-renew,
.actions-buttons-wrapper .btn-switch {
    background-color: #8b5cf6;
    color: #fff;
}

.desktop-action-dropdown .btn-bolton,
.actions-buttons-wrapper .btn-bolton {
    background-color: #22c55e;
    color: #fff;
    width: 95px;
}

.desktop-action-dropdown .btn-pause,
.actions-buttons-wrapper .btn-pause {
    background-color: #14b8a6;
}

.desktop-action-dropdown .btn-delete,
.actions-buttons-wrapper .btn-delete {
    background-color: #e32626;
    color: #fff;
}

.auto-renew-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.auto-renew-switch .label-wrapper {
    margin: 0;
}

#user-portal-filter {
    max-height: 460px;
}

.auto-renew-switch-wrapper input:checked+.slider {
    background: #ff6a00;
}

.auto-renew-switch-wrapper .switch {
    width: 40px;
    height: 22px;
}

.auto-renew-switch-wrapper .slider:before {
    width: 16px;
    height: 16px;
    left: 4px;
}

.auto-renew-switch-wrapper input:checked+.slider:before {
    transform: translateX(16px);
}

@media (max-width: 991px) {
    .esim-items-wrapper {
        gap: 75px 0px;
    }

    .login-img-wrapper,
    .register-img-wrapper {
        display: none;
    }

    .login-content-wrapper>div,
    .register-content-wrapper>div {
        width: 100%;
    }

    .input-field input {
        height: 34px;
    }

    .country-address {
        width: 100%;
        margin-bottom: 16px;
        margin-top: 45px;
    }

    .submit-field .submit {
        font-size: 13px;
    }

    .contact-info-wrapper .input-field {
        display: flex;
        flex-direction: column;
        justify-content: end;
        gap: 5px;
    }

    .contact-info-wrapper {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .input-field textarea {
        min-height: 125px;
    }

    .esim-items-wrapper .item-10 {
        order: 2;
    }

    .esim-items-wrapper .item-11 {
        order: 3;
    }

    .esim-items-wrapper .item-12 {
        order: 4;
    }

    .esim-items-wrapper .item-13 {
        order: 5;
    }

    .esim-items-wrapper .item-7 {
        order: 6;
    }

    .esim-items-wrapper .item-8 {
        order: 7;
    }

    .esmin-plan {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .fa-sim-wrapper {
        max-width: 540px;
    }

    #rate-card-page .fa-sim-wrapper {
        padding: 0 25px;
        max-width: 100%;
    }

    #rate-card-page .esim-items-wrapper {
        max-width: 540px;
        margin: 0 auto;
    }

    .main-header .bottom-footer {
        display: none;
    }

    footer {
        display: block;
    }

    footer .bottom-footer {
        background: rgba(0, 0, 0, 0.29);
        padding: 15px 5px;
    }

    .bottom-footer .icon-wrapper {
        margin: 14px 0;
    }

    header .logo .logo-wrapper {
        padding: 15px 0 20px 0;
        background: rgba(0, 0, 0, 0.1);
    }

    .mobile-toggle-menu {
        height: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.4s;
        cursor: pointer;
    }

    .mobile-toggle-menu:hover {
        background: rgba(0, 0, 0, 0.4);
    }

    .nav-bar-wrapper.show-menu .mobile-toggle-menu {
        background: rgba(0, 0, 0, 0.4);
    }

    .mobile-toggle-menu::before {
        content: '';
        display: block;
        width: 100%;
        height: 50px;
        position: absolute;
        background: rgba(0, 0, 0, 0.29);
        z-index: 1;
    }

    .mobile-toggle-menu .toggle-icon {
        background: url("../images/menu.svg") center no-repeat;
        background-size: contain;
        display: block;
        width: 30px;
        height: 30px;
        z-index: 0;
        transition: all 0.4s;
    }

    .mobile-toggle-menu:hover .toggle-icon {
        z-index: 2;
    }

    .main-header {
        background: rgba(0, 0, 0, 0.29);
    }

    .menu-items {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease-in-out;
    }

    .nav-bar-wrapper.show-menu .menu-items {
        max-height: 500px;
    }

    .menu-link {
        padding: 13px 10px;
        background: rgba(0, 0, 0, 0.1);
        font-size: 15px;
    }

    .esim-provider-wrapper .title h1 {
        font-size: 36px;
        margin: 0;
        line-height: 36px;
        text-align: center;
    }

    .protal-wrapper .title h2,
    .contact-wrapper .title h2,
    .list-option-wrappers .title h2,
    .faq-wrapper .title h2 {
        font-size: 36px;
        margin: 16px 0;
        line-height: 36px;
    }

    .list-option-wrappers .title h2 {
        text-align: center;
    }

    .esim-provider-wrapper .info {
        font-size: 18px;
    }

    .find-more-btn {
        font-size: 16px;
    }

    .esim-provider-wrapper .content-wrapper {
        gap: 22px;
    }

    .esim-provider-wrapper .content-wrapper,
    .travel-sim-main-wrapper .content-wrapper {
        align-items: center;
        padding: 0 15px;
    }

    .protal-wrapper .content-wrapper,
    .contact-wrapper .content-wrapper {
        align-items: end;
        padding: 0 15px;
    }

    .esim-provider-wrapper,
    .two-esim-wrapper,
    .protal-wrapper,
    .contact-wrapper {
        padding: 50px 0 95px 0;
    }

    .esim-provider-wrapper::after,
    .two-esim-wrapper::after,
    .protal-wrapper::after,
    .faq-wrapper::after {
        content: '';
        display: block;
        width: 336px;
        max-width: 35%;
        height: 2px;
        background: #ffffff;
        margin: auto;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .footer-logo-wrapper {
        display: flex;
        justify-content: center;
    }

    .footer-logo .logo {
        background: url("../images/logo-multi.svg") center no-repeat;
        background-size: contain;
        display: block;
        width: 14px;
        height: 20px;
    }

    .logo-wrapper .mobile-logo {
        background: url("../images/sixtel-1.svg") center no-repeat;
        display: block;
        height: 27px;
        width: 125px;
        background-size: contain;
        margin: 0 auto;
    }

    .logo-wrapper .dekstop-logo {
        display: none;
    }

    .back-to-top {
        right: 5px;
    }

    .country-address {
        align-items: center;
    }

    .country-list-wrappers .country-list-items {
        height: calc(100vh - 340px);
        overflow: auto;
    }

    .mini-cart-button {
        top: -4px;
        right: -3px;
        width: 12px;
        height: 12px;
        font-size: 9px;
    }

    .cart-wrapper .cart-icon,
    .user-wrapper .user-icon {
        width: 20px;
        height: 20px;
    }

    .upper-header .cart-wrapper {
        right: 44px;
    }

    .contact-info-wrapper {
        gap: 0;
    }

    .contact-info-wrapper .input-field label {
        display: none;
    }

    /*user portal*/

    .bundle-history-title-section {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .bundle-history-actions .bundle-search-wrapper {
        display: none !important;
    }

    /* Show only required columns */
    .bundle-history-table th:nth-child(1),
    .bundle-history-table td:nth-child(1) {
        display: table-cell;
    }

    .bundle-history-table th:nth-child(2),
    .bundle-history-table td:nth-child(2) {
        display: table-cell;
    }

    .bundle-history-table th:nth-child(3),
    .bundle-history-table td:nth-child(3) {
        display: table-cell;
    }

    .bundle-history-table th:nth-child(18),
    .bundle-history-table td:nth-child(18) {
        display: table-cell;
    }

    .desktop-options,
    .desktop-button {
        display: none !important;
    }

    .mobile-column-selector-wrapper {
        padding-top: 15px;
        width: 100%;
        display: block !important;
        border-top: 1px solid #e0e0e0;
    }

    .bundle-history-table th.dynamic-column,
    .bundle-history-table td.dynamic-column {
        display: none;
    }

    .mobile-column-selector-wrapper label {
        display: inline-block;
        font-size: 14px;
        color: #333;
        margin-bottom: 8px;
        font-weight: 500;
        margin-right: 5px;

    }

    .mobile-column-selector-wrapper .mobile-col-select {
        padding: 10px 25px 10px 10px;
        font-size: 14px;
        color: #333;
        border-radius: 6px;
        border-color: #e0e0e0;
        min-width: 190px;
        display: inline-block;
    }

    .mobile-column-selector-wrapper .mobile-col-select:focus-visible {
        outline: none;
    }
}

@media (max-width: 575px) {
    .country-list {
        flex-direction: column;
    }

    .country-drop-down-wrapper {
        max-width: 90%;
    }

    .country-data img {
        width: 30px;
        height: 20px;
    }

    .country-list .country-data {
        min-height: 45px;
        padding: 0 10px;
    }

    .country-search-wrapper {
        padding: 15px 0;
    }

    .country-data-wrapper {
        padding: 0 15px;
    }

    #travelesim-page footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .country-drop-down-wrapper {
        z-index: initial;
    }

    .country-continue-btn {
        top: 84%;
    }

    .country-data-wrapper {
        position: relative;
        z-index: 9999;
    }

    .list-wrapper .country-list>li {
        width: 100%;
    }

    .faq-wrapper {
        height: auto;
    }

    .contact-wrapper {
        height: 80vh;
    }
}

@media (max-width: 400px) {
    .user-protal-wrapper-section {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
    }
}

@media (max-width: 375px) {
    .mobile-column-selector-wrapper .mobile-col-select {
        min-width: 160px;
    }

}

@media (min-width: 576px) {
    .country-drop-down-wrapper {
        max-width: 450px;
    }

    .country-data img {
        width: 50px;
        height: 40px;
    }

    .country-list .country-data {
        min-height: 66px;
        padding: 0 15px 0 22px;
    }

    .country-search-wrapper {
        padding: 25px 0;
    }

    .country-data-wrapper {
        padding: 0 24px;
    }

    .country-continue-btn {
        bottom: 25px;
    }

    .list-wrapper .country-list {
        gap: 16px;
    }
}

@media (min-width: 576px) and (max-width: 991px) {
    .list-wrapper .country-list>li {
        width: calc((100% - 16px) / 2);
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .header-wrapper {
        left: 3%;
        width: 13%;
        max-width: 150px;
        min-width: 150px;
    }

    .menu-link {
        font-size: 16px;
    }

    .list-option-wrappers .title h2 {
        font-size: 45px;
        text-align: end;
        margin: 22px 0;
    }

    .list-option-wrappers .content-wrapper {
        width: 100%;
        padding: 0 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    header .logo {
        padding: 28px 0 20px 0;
    }

    .modal-overlay {
        padding-left: calc(3% + 150px);
    }
}

@media (min-width: 768px) {
    .header-wrapper {
        position: fixed;
        top: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.29) 0%, rgba(0, 0, 0, 0) 78%, rgba(0, 0, 0, 0) 100%);
    }

    .main-container {
        margin: 0 6.5% 0 24.5%;
    }

    .main-header {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding-bottom: 35px;
    }

    .nav-bar-wrapper {
        flex-grow: 1;
    }

    .fa-sim-wrapper {
        max-width: 1140px;
    }

    .main-header .bottom-footer {
        display: block;
    }

    footer {
        display: none;
    }

    .bottom-footer .icon-wrapper {
        margin: 10px 0;
    }

    .menu-items {
        margin: 12px 0;
    }

    .home-main-wrapper {
        margin: 0 6.5% 0 24.5%;
    }

    .esim-provider-wrapper .content-wrapper,
    .protal-wrapper .content-wrapper,
    .contact-wrapper .content-wrapper {
        align-items: end;
        width: 100%;
        padding: 0 15px;
        position: absolute;
        bottom: 16%;
        right: 0;
        margin: 25px 0;
    }

    .esim-provider-wrapper .content-wrapper,
    .protal-wrapper .content-wrapper {
        max-width: 75%;
    }

    .protal-wrapper .content-wrapper {
        max-width: 100%;
        bottom: inherit;
    }

    .contact-wrapper .content-wrapper {
        max-width: 90%;
    }

    .esim-provider-wrapper .title h1,
    .protal-wrapper .title h2,
    .contact-wrapper .title h2,
    .faq-wrapper .title h2 {
        font-size: 55px;
        text-align: end;
    }

    .protal-wrapper .title h2,
    .contact-wrapper .title h2,
    .faq-wrapper .title h2 {
        margin: 30px 0;
    }

    .esim-provider-wrapper .info {
        font-size: 25px;
    }

    .find-more-btn {
        font-size: 19px;
    }

    .esim-provider-wrapper .content-wrapper {
        gap: 25px;
    }

    .footer-logo-wrapper .footer-logo {
        background: url("../images/sixtel-1.svg") center no-repeat;
        background-size: contain;
        display: block;
        width: 50px;
        height: 11px;
        padding: 0;
    }

    .footer-logo-wrapper a {
        display: flex;
        justify-content: center;
    }

    .logo-wrapper .mobile-logo {
        display: none;
    }

    .logo-wrapper .dekstop-logo {
        width: 100%;
        height: 180px;
        display: block;
    }

    #index-page .logo-wrapper .dekstop-logo,
    #reset-password-page .logo-wrapper .dekstop-logo,
    #profile-page .logo-wrapper .dekstop-logo,
    #account-page .logo-wrapper .dekstop-logo,
    #portal-page .logo-wrapper .dekstop-logo,
    #faq-page .logo-wrapper .dekstop-logo {
        background: url("../images/others/logo-multi.svg") center no-repeat;
        background-size: contain;
    }

    #faesim-page .logo-wrapper .dekstop-logo {
        background: url("../images/others/logo-white-yellow.svg") center no-repeat;
        background-size: contain;
    }



    #travel-page .logo-wrapper .dekstop-logo {
        background: url("../images/others/logo-orange.svg") center no-repeat;
        background-size: contain;
    }

    #travel-sim-plan .logo-wrapper .dekstop-logo {
        background: url("../images/others/logo-blue.svg") center no-repeat;
        background-size: contain;
    }

    #rate-card-page .logo-wrapper .dekstop-logo {
        background: url("../images/others/logo-white-blue.svg") center no-repeat;
        background-size: contain;
    }

    #shop-page .logo-wrapper .dekstop-logo {
        background: url("../images/others/logo-white-red.svg") center no-repeat;
        background-size: contain;
    }

    .back-to-top {
        left: 5px;
    }

    .country-address {
        align-items: end;
    }

    .mini-cart-button {
        top: -7px;
        right: -6px;
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .cart-wrapper .cart-icon,
    .user-wrapper .user-icon {
        width: 30px;
        height: 30px;
    }

    .upper-header .cart-wrapper {
        right: 56px;
    }

    .bundle-history-table {
        min-width: 800px;
    }

    .bundle-history-title-section {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .bundle-history-table th:nth-child(18),
    .bundle-history-table td:nth-child(18) {
        display: none;
    }

    .bundle-table-container {
        overflow-x: auto;
    }

    .bundle-table-container {
        max-height: 290px;
    }

    .portal-tab-content-wrapper .bundle-table-container {
        overflow-y: auto;
    }

    .portal-tab-content-wrapper .bundle-history-table thead {
        z-index: 99;
    }
}

@media (min-width: 992px) {
    .header-wrapper {
        left: 6.5%;
        width: 13%;
        max-width: 205px;
        min-width: 190px;
    }

    header .logo {
        padding: 42px 0 30px 0;
    }

    .menu-link {
        font-size: 19px;
    }

    .esim-items-wrapper {
        gap: 53px 0px;
    }

    .login-content-wrapper>div,
    .register-content-wrapper>div {
        width: 50%;
    }

    .input-field input {
        height: 54px;
    }

    .contact-info-wrapper {
        display: flex;
        gap: 40px;
        max-width: 1400px;
        width: 100%;
    }

    .country-address {
        width: 30%;
        min-width: 200px;
    }

    .input-field-wrapper {
        width: 70%;
        flex: 1;
    }

    .contact-info-wrapper .input-wrapper {
        display: flex;
        gap: 0 30px;
        width: 40%;
        justify-content: end;
        flex: 1;
        justify-content: end;
    }

    .contact-info-wrapper .message-wrapper {
        width: 60%;
        min-width: 300px;
    }

    .contact-info-wrapper .message-wrapper .input-field {
        height: 100%;
        padding-bottom: 16px;
    }

    .contact-info-wrapper .message-wrapper .input-field textarea {
        height: 100%;
    }

    .contact-info-wrapper .input-field {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
    }

    .contact-info-wrapper .input-field label {
        min-width: 140px;
        text-align: right;
        margin-bottom: 0;
        flex-shrink: 0;
    }

    .contact-info-wrapper .input-field input,
    .contact-info-wrapper .input-field textarea {
        flex: 1;
        min-width: 250px;
    }

    .contact-info-wrapper .input-field input {
        min-width: 300px;
    }

    .contact-info-wrapper .input-field textarea {
        min-width: 100%;
    }

    .list-option-wrappers .title h2 {
        font-size: 55px;
        text-align: end;
        margin: 28px 0;
    }

    .country-list-wrappers {
        min-height: 495px;
    }

    .list-option-wrappers .content-wrapper {
        width: 100%;
        padding: 0 15px;
        position: relative;
        bottom: -200px;
        right: 0;
        margin: 0;
        min-height: 60%;
        height: 100%;
    }

    .modal-overlay {
        padding-left: calc(6.5% + 205px);
    }

    .esmin-plan {
        width: 75%;
    }

    .shop-name-title {
        left: calc(215px + 7%);
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .list-wrapper .country-list>li {
        width: calc((100% - 32px) / 3);
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .list-wrapper .country-list>li {
        width: calc((100% - 48px) / 4);
    }
}

@media (min-width: 1400px) {
    .list-wrapper .country-list>li {
        width: calc((100% - 64px) / 5);
    }
}

.curency-icon {
    font-size: 22px;
    line-height: 30px;
}

.esim-price-wrapper>span {
    display: flex;
    align-items: center;
}

.mini-cart-container {
    position: fixed;
    top: 20px;
    right: 10px;
    z-index: 999;
}

.mini-cart-button {
    background-color: #FFBF00;
    color: #000;
    cursor: pointer;
    position: absolute;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s all;
}

.mini-cart-button:hover {
    background-color: #ffe000;
}

/* CSS for desktop view */
.country-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CSS for mobile view */
/* CSS for mobile view */
@media only screen and (max-width: 767px) {
    .country-name {
        display: block;
        /* Ensure the country name is displayed in a new line */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* item-10 vertical flip */
.esmi-img-wrapper {
    perspective: 1200px;
}

.esim-flip {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.7s ease;
}

.esim-face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    background-color: #fff;
}

.esim-face .esim-img {
    position: absolute;
    inset: 0;
}

.esim-face.back {
    transform: rotateX(180deg);
    z-index: 9;
}

.esmi-img-wrapper.active-img .esim-flip {
    transform: rotateX(180deg);
}

.esim-img.qr-code-img {
    background: url("../images/qr-code.png");
    background-size: cover;
    width: 100px;
    height: 100px;
    margin: 10px auto;
}

/* ============================================
   Modal Styles — shared glass (frosted) treatment
   ============================================ */

:root {
    --sixtel-modal-width: 92vw;
    --sixtel-modal-max-width: 350px;
    --sixtel-modal-max-height: 88vh;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(6, 10, 20, 0.52);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

.action-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(6, 10, 20, 0.52);
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    z-index: 100001;
    /* Slightly above modal-overlay */
    display: flex;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.modal-container {
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.14) 0%,
            rgba(255, 255, 255, 0.06) 42%,
            rgba(18, 24, 38, 0.72) 100%);
    backdrop-filter: blur(22px) saturate(175%);
    -webkit-backdrop-filter: blur(22px) saturate(175%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 16px;
    width: var(--sixtel-modal-width);
    max-width: var(--sixtel-modal-max-width);
    max-height: var(--sixtel-modal-max-height);
    overflow-y: auto;
    position: relative;
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    animation: slideDown 0.3s ease;
    height: auto;
    transition: height 0.3s ease-in-out;
}

.modal-animating {
    overflow: hidden !important;
}

/* Ensure action modals match the same panel sizing */
.action-modal .modal-container {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg,
            rgba(255, 255, 255, 0.08) 0%,
            rgba(255, 255, 255, 0) 100%);
}

.modal-header h2 {
    color: rgba(255, 255, 255, 0.96);
    margin: 0;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.modal-close {
    color: rgba(255, 255, 255, 0.92);
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.modal-close:hover {
    color: #ffb24d;
}

.modal-body {
    padding: 20px;
    color: rgba(255, 255, 255, 0.92);
}

.modal-empty-message {
    text-align: center;
    padding: 12px 10px;
    color: rgba(255, 140, 140, 0.95);
    font-size: 14px;
}

.modal-load-error {
    text-align: center;
    padding: 20px;
    color: rgba(255, 170, 170, 0.96);
}

.modal-load-error p {
    margin: 0 0 12px;
}

.modal-load-error .btn-retry-load {
    margin-top: 4px;
    padding: 8px 16px;
    cursor: pointer;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.95);
    font-size: 14px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.modal-load-error .btn-retry-load:hover {
    background: rgba(255, 135, 0, 0.22);
    border-color: rgba(255, 135, 0, 0.4);
}

.modal-tabs {
    margin-bottom: 20px;
}

.switch-modal .modal-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100% - 65px);
}

.modal-content-wrapper {
    min-height: 300px;
    height: auto;
}

.modal-content-wrapper .login-content-wrapper,
.modal-content-wrapper .register-content-wrapper {
    flex-direction: column;
}

.modal-content-wrapper .login-img-wrapper,
.modal-content-wrapper .register-img-wrapper {
    display: none;
}

.modal-content-wrapper .login-form-wrapper,
.modal-content-wrapper .register-form-wrapper {
    width: 100%;
    padding: 0;
    position: relative;
}

.modal-autocomplete {
    position: absolute;
    background: rgba(16, 22, 34, 0.88);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 10001;
    width: 100%;
    margin-top: 2px;
    top: 100%;
    left: 0;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    display: none;
}

.modal-autocomplete:empty {
    display: none;
}

/* Show modal-autocomplete only when it has list items */
.modal-autocomplete:not(:empty) {
    display: block;
}

.modal-content-wrapper .input-field {
    position: relative;
}

.modal-autocomplete li {
    padding: 10px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-autocomplete li:hover {
    background-color: rgba(255, 135, 0, 0.22);
    color: #ffc078;
}

/* Mobile Responsive */
@media only screen and (max-width: 767px) {
    .modal-container {
        width: 95%;
        max-height: 95vh;
    }

    .modal-header {
        padding: 15px;
    }

    .modal-header h2 {
        font-size: 20px;
    }

    .modal-body {
        padding: 15px;
    }
}

/* User Data Table Styles */
.user-data-table-wrapper {
    width: 100%;
    margin: 20px 0;
    position: relative;
    z-index: 1;
}

/* Ensure logout button is always clickable */
#logoutBtn {
    position: relative;
    z-index: 100;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.submit-field {
    position: relative;
    z-index: 100;
    pointer-events: auto;
}

.user-data-table {
    width: 100%;
    border-collapse: collapse;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.user-data-table thead {
    background-color: rgba(255, 135, 0, 0.2);
}

.user-data-table th {
    padding: 12px 15px;
    text-align: left;
    color: #ff8000;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 2px solid rgba(255, 135, 0, 0.3);
}

.user-data-table td {
    padding: 12px 15px;
    color: #fff;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.user-data-table tbody tr:last-child td {
    border-bottom: none;
}

.user-data-table tbody tr:hover {
    background-color: rgba(255, 135, 0, 0.1);
}

.user-data-table tbody tr td:first-child {
    font-weight: 600;
    color: #ff8000;
    width: 40%;
}

.user-data-table tbody tr td:last-child {
    color: #fff;
}

/* Mobile Responsive for Table */
@media only screen and (max-width: 767px) {
    .user-data-table {
        font-size: 12px;
    }

    .user-data-table th,
    .user-data-table td {
        padding: 8px 10px;
    }
}

/* Bundle History Table Styles */
.bundle-history-wrapper {
    width: 100%;
    margin: 30px 0;
    position: relative;
    z-index: 1;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 10px 20px 20px;
    /* Reduced right padding slightly */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.bundle-history-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.bundle-history-title-section {
    flex: 1;
}

.bundle-history-title {
    color: #000;
    font-size: 22px;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.bundle-history-subtitle {
    color: #000;
    font-size: 13px;
    margin: 0;
}

.bundle-history-actions {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 3px;
}

.price-list-link {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    text-decoration: none;
    padding: 7px 11px;
    border: 1px solid #ff6a00;
    border-radius: 4px;
    transition: all 0.3s;
    font-size: 12px;
    line-height: 16px;
    background-color: #ff6a00;
    width: 95px;
    justify-content: center;
}

.bundle-history-table .price-list-link {
    font-size: 12px;
    line-height: 16px;
}

.bundle-history-table .download-icon {
    font-size: 13px;
}

.price-list-link:hover {
    background-color: #ff6a00cf;
    border-color: #ff6a00;
    color: #ffffff;
}

.download-icon {
    font-size: 16px;
    position: relative;
    top: -1px;
}

.bundle-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 10px;
    color: rgba(0, 0, 0, 0.5);
    font-size: 14px;
    pointer-events: none;
}

.bundle-search-input {
    padding: 10.5px 11px 10.5px 32px;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    color: #333;
    font-size: 13px;
    width: 180px;
    transition: all 0.3s;
}

.bundle-search-input:focus {
    outline: none;
    border-color: rgba(0, 0, 0, 0.4);
    background: #fff;
}

.bundle-search-input::placeholder {
    color: rgba(0, 0, 0, 0.4);
}

.bundle-table-container {
    position: relative;
    border-radius: 8px;
    background-color: #f5f5f0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    width: 100%;
    margin: 0 auto;
    max-width: 100%;
    overflow-y: hidden;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#user-portal-filter .label-content-wrapper {
    margin-bottom: 15px;
}

#user-portal-filter .label-wrapper {
    color: white;
    font-size: 14px;
    margin-bottom: 8px;
}

#user-portal-filter .content-wrapper select,
#user-portal-filter .content-wrapper input {
    padding: 10px;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    border: 0;
    outline: 0;
}

#user-portal-filter .search-filter-btn-wrapper {
    display: flex;
    justify-content: center;
}

#user-portal-filter .search-filter-btn {
    position: relative;
    display: inline-block;
    padding: 8px 10px;
    border: 1px;
    background: #e54c4c;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    border-radius: 3px;
    box-shadow: 0px 1px 4px -2px #333;
    text-shadow: 0px -1px #333;
    margin-top: 3px;
    cursor: pointer;
    outline: none;
    width: 90px;
}

#user-portal-filter .search-filter-btn:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: 50%;
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}

/* Ensure scrollbar is always visible when content overflows */
.bundle-table-container::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.bundle-table-container::-webkit-scrollbar-track {
    background: #e8e8e0;
    border-radius: 4px;
}

.bundle-table-container::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 4px;
}

.bundle-table-container::-webkit-scrollbar-thumb:hover {
    background: #666;
}

.bundle-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background-color: #fff;
}

.bundle-history-table thead {
    background-color: #e8e8e0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.bundle-history-table th {
    padding: 12px 10px;
    text-align: left;
    color: #333;
    font-weight: 600;
    font-size: 13px;
    border-bottom: 2px solid #ccc;
    white-space: nowrap;
}

.bundle-history-table th .sort-icon {
    margin-right: 5px;
    color: rgba(0, 0, 0, 0.5);
    font-size: 11px;
}

.bundle-history-table td {
    padding: 10px;
    color: #000;
    font-size: 13px;
    border-bottom: 1px solid #e0e0e0;
    white-space: nowrap;
    max-width: 300px;
}

.bundle-history-table tbody tr {
    background-color: #fff;
}

.bundle-history-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

.bundle-history-table tbody tr:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}

.bundle-history-table tbody tr:last-child td {
    border-bottom: none;
}

.bundle-history-table .no-icon {
    color: rgba(0, 0, 0, 0.4);
    font-weight: bold;
}

.bundle-history-table th,
.bundle-history-table td {
    white-space: nowrap;
}



.bundle-history-table button {
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
    color: #fff;
}

.bundle-history-table .btn-auto-renew {
    background-color: #3b82f6;
}

.bundle-history-table .btn-renew,
.bundle-history-table .btn-switch {
    background-color: #8b5cf6;
    color: #fff;
}

.bundle-history-table .btn-bolton {
    background-color: #22c55e;
    color: #fff;
    width: 95px;
}

.bundle-history-table .btn-pause {
    background-color: #14b8a6;
}

.bundle-history-table .btn-delete {
    background-color: #e32626;
    color: #fff;
}

.bundle-history-table .btn-desktop-action,
.bundle-history-table .btn-action {
    font-size: 0;
    background: url('../images/userportal-mobile-mutil-color.svg') center center no-repeat;
    background-size: 14px 14px;
}

.bundle-history-table .desktop-action-btn,
.bundle-history-table .action-btn {
    display: flex;
    background: #e8e8e0;
    width: 30px;
    height: 30px;
    justify-content: center;
    border-radius: 6px;
}

.bundle-history-table button:hover {
    opacity: 0.9;
}

.bundle-history-table button.disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.bundle-history-table button.disabled:hover {
    cursor: not-allowed;
    opacity: 0.7;
}

.refresh-button {
    width: 20px;
    height: 20px;
    background: url(../images/refresh_icon.svg) no-repeat center;
    background-size: contain;
    cursor: pointer;
    border: 0;
    padding: 0;
    border-radius: 5px;
    background-size: 20px;
}

.filter-button {
    width: 20px;
    height: 20px;
    background: url('../images/userportal-filter-icon.svg') no-repeat center;
    background-size: contain;
    cursor: pointer;
    border: 0;
    padding: 0;
    border-radius: 5px;
    background-size: 20px;
}

.bolt-on-model .modal-tabs {
    display: flex;
    margin-bottom: 15px;
}

.bolt-on-model .tab-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.52);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    padding-bottom: 8px;
    position: relative;
    display: block;
    width: 100%;
    transition: color 0.2s ease;
}

.bolt-on-model .tab-btn.active {
    color: rgba(255, 255, 255, 0.98);
    font-weight: 600;
}

.bolt-on-model .tab-btn.active::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent);
    transform: translateX(-50%);
    border-radius: 2px;
    box-shadow: 0 0 12px rgba(255, 200, 120, 0.45);
}

.bolt-on-model .tab-content {
    display: none;
}

.bolt-on-model .tab-content.active {
    display: block;
}

.coming-soon-text {
    text-align: center;
    padding: 20px;
    color: rgba(253, 200, 100, 0.98);
    font-weight: 600;
    text-shadow: 0 0 24px rgba(253, 173, 25, 0.35);
}

/* travel e sim plan*/
.travel-sim-plan-wrapper .list-option-wrappers {
    display: flex;
    height: 100vh;
    align-items: center;
    flex-direction: column;
    margin-top: 100px;
}

.esmin-plan {
    display: none;
}

.plan-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 10px;
}

.plan-tabs .plan-tab {
    text-align: center;
    padding: 10px 26px;
    border: 1px solid #fff;
    color: #fff;
    transition: all 0.4s;
    line-height: 1.2;
    background: transparent;
    font-size: 16px;
    cursor: pointer;
}

.plan-tabs .plan-tab.active,
.plan-tabs .plan-tab:hover {
    color: #000;
    background: #c9c6c6;
    border-color: #c9c6c6;
}

.esmin-plan .title h2 {
    color: #fff;
    font-weight: 500;
}

.esmin-plan-table-wrapper {
    box-shadow: inset 1px 1px 10px 2px rgba(255, 255, 255, 0.25);
}

.esim-table-inner {
    box-shadow: 1px 1px 10px 0px rgba(255, 255, 255, 0.25);
    border: 3px solid rgb(255 255 255 / 65%);
    padding: 25px 30px;
}

.esim-table {
    border: 3px solid rgb(255 255 255 / 65%);
    position: relative;
    box-shadow: 1px 1px 10px 0px rgba(255, 255, 255, 0.25), inset 1px 1px 10px 0px rgba(255, 255, 255, 0.25);
}

.esim-table-head .table-right-inner {
    display: flex;
    border-top: 0;
}

.unlimited-packages-table .esim-table-head .table-right-inner {
    flex-wrap: wrap;
}

.table-data-wrapper,
.table-data-content {
    width: 100%;
    display: flex;
}

.table-data-content>div {
    width: 33.33%;
    padding: 10px;
    cursor: initial;
}

.table-data-content {
    border-top: 1px solid rgb(255 255 255 / 70%);
}

.table-data-content>div+div {
    border-left: 1px solid rgb(255 255 255 / 70%);
}

.table-flag.table-left-inner {
    border-top: 0;
}

.table-data {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    cursor: initial;
}

.table-data+.table-data {
    border-left: 1px solid rgb(255 255 255 / 70%);
}

.esim-table>div {
    display: flex;
    text-align: center;
}

.esim-table>div .table-left-inner {
    max-width: 175px;
    width: 100%;
}

.esim-table>div>div {
    color: #fff;
    font-weight: 400;
    text-align: center;
    font-size: 20px;
    border-top: 1px solid rgb(255 255 255 / 70%);
    cursor: pointer;
}

.esim-table>div>div+div,
.miltiple-row>div+div,
.col>div+div {
    border-left: 1px solid rgb(255 255 255 / 70%);
}

.row .col+.col {
    border-top: 1px solid rgb(255 255 255 / 70%);
}

.esim-table>.esim-table-body>div:not(.miltiple-row) {
    padding: 10px;
}

.esim-table>div>div img {
    width: 100%;
    display: flex;
    height: 100%;
}

.table-data {
    width: 100%;
}

.unlimited-packages-table .table-data {
    padding: 20px;
}

.esim-table .table-data>div {
    font-size: 30px;
}

.esim-table-body .table-right-inner,
.esim-table-head .table-right-inner {
    max-width: calc(100% - 175px);
    width: 100%;
}

.esim-table .esim-table-body .miltiple-row {
    padding: 0;
}

.single-col {
    display: flex;
    align-items: center;
    justify-content: center;
}

.row {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.col {
    display: flex;
    width: 100%;
}

.col>div {
    width: 33.33%;
    color: #fff;
    font-weight: 400;
    text-align: center;
    font-size: 20px;
    padding: 10px;
}

.esim-table-body,
.table-data,
.table-left-inner,
.table-right-inner {
    position: relative;
}

.tooltip-wrapper {
    display: inline-block;
}

.has-tooltip {
    position: relative;
}

.has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: #6c6a6a;
    color: #fff;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: 0.2s ease;
    z-index: 999;
}

.has-tooltip.has-delete::after,
.has-tooltip.has-port-out::after,
.has-tooltip.has-renew::after {
    left: inherit;
    right: 0;
    transform: inherit;
}

.esim-table .has-tooltip::after {
    bottom: 116%;
}

.has-tooltip::before {
    content: "";
    position: absolute;
    bottom: 82%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #6c6a6a;
    opacity: 0;
    transition: 0.2s ease;
}

.esim-table .has-tooltip::before {
    bottom: 90%;
}

.has-tooltip:hover::after,
.has-tooltip:hover::before {
    opacity: 1;
}

.zone-loading,
.zone-error {
    text-align: center;
    padding: 20px;
}

.zone-loading {
    color: rgba(255, 255, 255, 0.78);
}

.zone-error {
    color: rgba(255, 160, 160, 0.95);
}

.modal-container.zone-modal-container {
    max-width: var(--sixtel-modal-max-width);
}

.zone-modal-container .modal-header h2 {
    font-size: 20px;
}

.zone-modal-container .modal-header {
    padding: 15px;
}

.zone-modal-container .modal-close {
    width: 25px;
    height: 25px;
    font-size: 30px;
    color: #636161;
    border: 0;
}

.zone-modal-container .modal-close:hover {
    color: #ffb24d;
}

.zone-countries-select {
    width: 100%;
    background-color: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    padding: 10px 15px;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    outline: none;
    max-height: 400px;
    overflow-y: auto;
    line-height: 1.5em;
}

.zone-countries-select::-webkit-scrollbar {
    height: 5px;
    width: 5px;
}

.zone-countries-select::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
}

.zone-countries-select::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
    border-radius: 4px;
}

.zone-countries-select::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.42);
}

.zone-countries-select>div {
    padding: 2px 0;
}

.action-modal {
    position: relative;
    z-index: 100010;
    width: var(--sixtel-modal-width);
    max-width: var(--sixtel-modal-max-width);
    max-height: var(--sixtel-modal-max-height);
    height: auto;
}

.action-modal-overlay .action-modal {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
}

/* Fallback for cases without overlay */
.action-modal:not(.action-modal-overlay .action-modal) {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#renewModal,
#switchModal {
    z-index: 100001;
}

/* Nested portal dialogs: top bundle modal above parent; parent visually recedes */
.action-modal.modal-stack-top {
    z-index: 100005 !important;
}

.action-modal.custom-modal.modal-dimmed-behind {
    opacity: 0.72;
    filter: brightness(0.9) saturate(0.92);
    pointer-events: none;
    transition: opacity 0.22s ease, filter 0.22s ease;
}

.action-modal-container .modal-header h2 {
    font-size: 18px;
}

.action-modal-container .modal-close {
    width: 20px;
    height: 20px;
    font-size: 25px;
}

.switch-modal-list li a {
    line-height: 1.5em;
    padding: 2px 0;
    font-size: 14px;
    color: #fff;
    transition: all 0.3s ease;
    display: inline-block;
}

.switch-modal-list li a:hover {
    color: #8be9ff;
}

.tooltip-wrapper .btn-switch,
.tooltip-wrapper .btn-renew {
    display: flex;
    gap: 5px;
    font-size: 12px;
    width: 95px;
    justify-content: center;
}

.bolt-ons-list .bolt-on-item {
    padding: 2px 0;
    font-size: 14px;
    color: #000000de;
    font-weight: 500;
    line-height: 1.5em;
}

.single-row>.table-right-inner,
.table-right-inner>.table-data,
.col>.packages-data,
.unlimited-data,
.table-data-plan,
.table-left-inner {
    transition: all 0.3s ease
}

.single-row>.table-right-inner:hover,
.col>.packages-data:hover,
.unlimited-data:hover {
    box-shadow: inset 1px 1px 10px 3px rgb(255 255 255 / 64%);
}

.unlimited-table-plan .unlimited-data:hover {
    box-shadow: inset 1px 1px 10px 2px rgb(255 255 255 / 64%);
}

/* Fixed packages – visually mute inactive plans (Not Available) */
.esmin-plan[data-plan="fixed"] [data-available="false"] {
    /* opacity: 0.35; */
    /* filter: grayscale(100%); */
    cursor: not-allowed !important;
    /* pointer-events: none; */
    color: #ffffff78;
}

/* Unlimited packages – visually mute inactive plans (Not Available) */
.esmin-plan[data-plan="unlimited"] [data-available="false"] {
    /* opacity: 0.35; */
    /* filter: grayscale(100%); */
    cursor: not-allowed !important;
    /* pointer-events: none; */
    color: #ffffff78;
}

.unlimited-table-plan .unlimited-data:hover {
    box-shadow: inset 1px 1px 10px 2px rgb(255 255 255 / 64%);
}

.left-hover {
    box-shadow: inset 1px 1px 10px 2px rgb(255 255 255 / 64%);
}

.unlimited-table-plan .left-hover:hover {
    box-shadow: inset 1px 1px 10px 2px rgb(255 255 255 / 64%);
}

.unlimited-packages-table .col>div {
    width: 100%;
}

.unlimited-packages-table .unlimited-data {
    width: 50%;
    color: #fff;
    font-weight: 400;
    text-align: center;
    font-size: 20px;
    padding: 10px;
    transition: all 0.3s ease;
}

.unlimited-data+.unlimited-data {
    border-left: 1px solid rgb(255 255 255 / 70%);
}

#rate-card-page .esim-items-wrapper {
    height: calc(100vh - 50px);
}

.unlimited-table-plan .esim-table-inner {
    display: none;
}

.unlimited-table-plan .esim-table-inner.active {
    display: block;
}

.back-button-wrapper {
    width: 100%;
}

/*.back-button {
    border: 1px solid #fff;
    background: transparent;
    padding: 8px 15px;
    font-size: 16px;
    text-transform: capitalize;
    color: #fff;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.4s;
}*/
.back-button-wrapper {
    position: fixed;
    top: 15px;
}

.back-button {
    background: url(../images/left-arrows.png) no-repeat center;
    background-size: cover;
    width: 30px;
    height: 30px;
    border: 0;
    font-size: 0;
    cursor: pointer;
    filter: invert(1);
    transition: all 0.4s;
}

.back-button:hover {
    filter: invert(0);
}

.shop-plans-title {
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    color: #555;
    margin: 30px auto 0;
    width: 150px;
    text-align: center;
    color: #fff;
    transition: all 0.4s;
    line-height: 1.2;
}


.switch-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    width: fit-content;
    margin: 10px auto 100px;
    background: #fff;
    border-radius: 30px;
    padding: 5px;
}

.switch-wrapper .content-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.switch-wrapper .label {
    font-size: 14px;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    color: #555;
    transition: 0.3s;
}

.switch-wrapper .active.active {
    background: #ff8000;
    color: #fff;
}

.switch-wrapper .payg-label.active {
    background: #585555;
}

span.auto-renew-checkbox {
    position: relative;
    display: flex;
}

.auto-renew-checkbox input[type="checkbox"] {
    position: absolute;
    width: 16px;
    height: 16px;
    opacity: 0;
    z-index: 9;
}

.auto-renew-checkbox .custom-check {
    width: 16px;
    height: 16px;
    border: 1px solid #bbb;
    border-radius: 3px;
    position: relative;
    display: inline-block;
}

.auto-renew-checkbox input[type="checkbox"]:checked+.custom-check {
    background: url(../images/right.svg) no-repeat center;
    background-size: cover;
    width: 16px;
    height: 16px;
}

div#shop-country-selector {
    display: none !important;
}

.switch {
    position: relative;
    width: 50px;
    height: 26px;
    display: block;
}

.switch input {
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    background-color: #ff8000;
    border-radius: 30px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: 0.3s;
}

.slider:before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: 0.3s;
}

input:checked+.slider {
    background-color: #585555;
}

input:checked+.slider:before {
    transform: translateX(24px);
}

.switch-modal-list>li:not(:last-child) {
    margin-bottom: 5px;
}

.plan-option input {
    display: none;
}

.dyas-remain-radio-items {
    justify-content: space-between;
}

.dyas-remain-radio-items .dyas-remain-radio-item {
    padding: 3px 6px;
    border-radius: 15px;
    gap: 5px;
}

.dyas-remain-radio-items .dyas-remain-radio-item:hover {
    background: rgb(255 255 255 / 50%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 50%);
}

.dyas-remain-radio-item:has(input:checked) {
    background: rgb(255 255 255) !important;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 50%);
}

.dyas-remain-radio-item:hover .custom-radio {
    border-color: #fff !important;
}

.dyas-remain-radio-item input:checked+.custom-radio {
    border-color: #000 !important;
}

.dyas-remain-radio-item input:checked+.custom-radio::after {
    background: #000 !important;
}

.dyas-remain-radio-item input:checked~.plan-text {
    color: #000 !important;
    font-weight: 600;
}

.dyas-remain-radio-item:hover .plan-text {
    color: #fff !important;
    font-weight: 600;
}


.plan-option {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 8px 12px;
    cursor: pointer;
    border-radius: 10px;
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

.plan-option:hover {
    background: #ffffff80;
    box-shadow: inset 0 0 0 1px rgb(255 255 255);
}

.plan-option .plan-text,
.plan-option .plan-price {
    font-size: 14px;
    color: #fff;
    transition: 0.3s;
}

.plan-option .plan-price {
    margin-left: auto;
}

.plan-option:hover .plan-text,
.plan-option:hover .plan-price {
    color: #fff;
    font-weight: 600;
}

.custom-radio {
    width: 16px;
    height: 16px;
    border: 2px solid #bbb;
    border-radius: 50%;
    position: relative;
    transition: 0.3s;
}

.plan-option input:checked+.custom-radio::after {
    content: "";
    width: 8px;
    height: 8px;
    background: #000;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: 0.3s;
}

.plan-option:hover .custom-radio {
    border-color: #ffffff80;
}

.plan-option input:checked+.custom-radio {
    border-color: #000;
}

.plan-option input:checked~.plan-text,
.plan-option input:checked~.plan-price {
    color: #000;
    font-weight: 600;
}

.plan-option:has(input:checked) {
    background: rgb(255 255 255);
}

.action-modal-button-wrapper {
    text-align: center;
}

.action-modal-button-wrapper .action-modal-button {
    position: relative;
    display: inline-block;
    padding: 8px 10px;
    border: 1px;
    background: #e54c4c;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    border-radius: 3px;
    box-shadow: 0px 1px 4px -2px #333;
    text-shadow: 0px -1px #333;
    margin-top: 25px;
    cursor: pointer;
    outline: none;
    width: 90px;
}

.action-modal-button-wrapper .action-modal-button::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: 50%;
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}

/* Mobile Responsive for Bundle History */
@media only screen and (max-width: 991px) {
    .plan-tabs {
        overflow: auto;
        width: 100%;
    }

    .plan-tabs .plan-tab {
        white-space: nowrap;
    }
}

@media only screen and (max-width: 767px) {
    .bundle-search-input {
        width: 100%;
    }

    .bundle-table-container {
        -webkit-overflow-scrolling: touch;
    }

    .bundle-table-container::-webkit-scrollbar {
        height: 6px;
    }

    .bundle-history-table {
        font-size: 11px;
    }

    .bundle-history-table th,
    .bundle-history-table td {
        padding: 8px 6px;
        font-size: 11px;
    }

    .travel-sim-plan-wrapper .list-option-wrappers {
        padding: 0 25px;
    }

    .esim-table>div>div,
    .col>div {
        font-size: 14px;
    }

    .esim-table>div .table-left-inner {
        max-width: 100px;
    }

    .esim-table-body .table-right-inner,
    .esim-table-head .table-right-inner {
        max-width: calc(100% - 100px);
    }

    .esim-table .table-data>div {
        font-size: 20px;
    }

    .unlimited-packages-table .unlimited-data {
        font-size: 14px;
    }

    .unlimited-packages-table .unlimited-data {
        min-width: 75px;
    }

    .unlimited-packages-table .col>div {
        width: 100%;
    }

    .unlimited-packages-table .col {
        padding: 0;
        flex-wrap: wrap;
    }

    .all-sim-shop .back-button-wrapper {
        margin-top: 20px;
    }


    /* Mobile tab design*/
    .travel-sim-plan-wrapper .list-option-wrappers {
        margin-top: 20px;
    }

    .list-option-wrappers.active .option-wrapper {
        height: calc(100vh - 265px);
    }

    .mobile-menu-hemburger-wrapper .mobile-menu-hemburger {
        background: url(../images/filter-icons.svg) no-repeat center;
        background-size: cover;
        width: 30px;
        height: 30px;
        border: 0;
        font-size: 0;
        cursor: pointer;
    }

    .mobile-menu-hemburger-wrapper .mobile-menu-hemburger:focus-visible {
        outline: none;
    }

    .tabs-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        margin: 0 -10px;
        margin-bottom: 20px;
        border-bottom: 1px solid #f1eded;
    }

    .tabs-flag {
        max-width: 70px;
    }

    .tabs-flag img {
        width: 100%;
    }

    .mobile-tab-design {
        width: 100%;
        margin-bottom: 30px;
        text-align: right;
    }

    .plan-tabs {
        display: none;
    }

    .tabs-container {
        transform: translateX(100%);
        background: linear-gradient(180deg, rgb(183 133 134 / 78%), rgb(1 104 115 / 71%));
        backdrop-filter: blur(10px);
        padding: 0px 10px;
        width: 90%;
        max-width: 320px;
        margin: -30px 0 0 auto;
        position: fixed;
        right: 0;
        z-index: 999;
        transition: all 0.4s ease;
        visibility: hidden;
        height: 65%;
    }

    .tabs-container.active {
        transform: translateX(0);
        right: 25px;
        visibility: visible;
    }

    .sub-tabs-container {
        position: fixed;
        top: 0;
        right: -30px;
        width: 100%;
        padding: 0 10px;
        background: linear-gradient(180deg, rgb(183 133 134 / 78%), rgb(1 104 115 / 71%));
        backdrop-filter: blur(10px);
        height: 100%;
        transform: translateX(100%);
        z-index: 899;
        transition: all 0.4s ease;
    }

    .sub-tabs-container.active {
        transform: translateX(0);
        visibility: visible;
        z-index: 1010;
        right: 0;
    }

    .limited-active .tabs-container,
    .limited-active .sub-tabs-container {
        background: linear-gradient(180deg, rgb(103 134 148 / 82%), rgb(96 158 144 / 89%));
    }

    .unlimited-active .tabs-container,
    .unlimited-active .sub-tabs-container {
        background: linear-gradient(180deg, rgb(119 141 152), rgb(3 109 123 / 72%));
    }

    .unlimited-plus-active .tabs-container,
    .unlimited-plus-active .sub-tabs-container {
        background: linear-gradient(180deg, rgb(0 102 158 / 68%), rgb(111 134 158 / 67%));
    }

    .unlimited-essential-active .tabs-container,
    .unlimited-essential-active .sub-tabs-container {
        background: linear-gradient(180deg, rgb(126 143 163 / 84%), rgb(11 60 91 / 66%));
    }

    .tab,
    .sub-tab {
        padding: 20px 12px;
        color: #f1eded;
        border: 1px solid #f1eded;
        font-size: 16px;
        border-radius: 4px;
        margin-bottom: 5px;
    }

    .esmin-plan[data-plan="fixed"] {
        display: block;
    }

    .back-button-wrapper {
        position: initial;
    }

    .unlimited-plan-tabs {
        display: none;
    }

    .tab-toggle:before {
        content: "";
        width: 17px;
        height: 17px;
        background: url(../images/left-arrow.svg) no-repeat center;
        background-size: cover;
        display: inline-block;
        vertical-align: middle;
        float: left;
        transition: all 0.3s ease;
    }

    .unlimited-packages-table .unlimited-data {
        border-top: 1px solid rgb(255 255 255 / 70%);
    }

    .unlimited-table-plan .esim-table-body .miltiple-row {
        border-top: 0;
    }

    .sub-tab.active,
    .tab.active {
        display: none;
    }

    .tabs-container .plan-title {
        color: #f1eded;
        text-align: right;
        margin-bottom: 20px;
        font-size: 24px;
        font-weight: 600;
    }

    .mobile-back-button {
        color: #f1eded;
        font-size: 16px;
        font-weight: 500;
        border: 0;
        border-radius: 4px;
        display: inline-flex;
        padding: 4px 8px 4px 2px;
        background: transparent;
        text-transform: capitalize;
    }

    .mobile-back-button:before {
        content: "";
        width: 22px;
        height: 18px;
        background: url(../images/down.png) no-repeat center;
        background-size: cover;
        display: inline-block;
        vertical-align: middle;
        transform: rotate(90deg);
        filter: invert(1);
        transition: all 0.3s ease;
        position: relative;
    }

    .mobile-close-button {
        background: url(../images/cross.png) no-repeat center;
        background-size: 15px;
        width: 30px;
        height: 30px;
        border: 0;
        font-size: 0;
        cursor: pointer;
        filter: invert(1);
    }

    .tab-toggle {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .action-btn:before,
    .action-btn:after {
        content: none;
    }

    .bundle-history-table .action-btn {
        margin: 0 auto;
    }
}

@media only screen and (max-width: 575px) {
    .esim-table-inner {
        padding: 15px 20px;
    }

    .esim-table>div .table-left-inner {
        max-width: 80px;
    }

    .esim-table-body .table-right-inner,
    .esim-table-head .table-right-inner {
        max-width: calc(100% - 80px);
    }

    .esim-table>div>div img {
        object-fit: cover;
    }
}

@media only screen and (max-width: 480px) {
    .unlimited-packages-table .col>div {
        width: 50%;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .unlimited-packages-table .col>div {
        width: 33.33%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .back-button-wrapper {
        left: calc(155px + 4%);
    }

    .plan-tabs .plan-tab {
        padding: 10px 15px;
    }
}

@media (min-width: 768px) {
    .mobile-tab-design {
        display: none;
    }

    .unlimited-plan-tabs {
        font-size: 0;
    }

    .unlimited-plan-plan-tab {
        background: transparent;
        border: 2px solid rgb(255 255 255 / 65%);
        padding: 10px 18px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        font-size: 15px;
        margin-bottom: -3px;
        color: #fff;
        transition: all 0.4s;
        cursor: pointer;
    }

    .unlimited-plan-plan-tab.active,
    .unlimited-plan-plan-tab:hover {
        color: #313131;
        background: #f3f3f3;
        border-color: #c9c6c6 #c9c6c6 rgb(255 255 255 / 65%);
    }

    .esmin-plan.active {
        display: block;
    }
}

@media (min-width: 992px) {
    .back-button-wrapper {
        left: calc(215px + 7%);
    }
}

.loading-wrapper {
    text-align: center;
    padding: 30px;
    color: #fff;
    font-size: 14px;
}

.loading-wrapper.error {
    color: #ff6b6b;
}

/* Desktop Action Dropdown */
.desktop-action-wrapper {
    position: relative;
    display: inline-block;
}

.desktop-action-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    padding: 12px;
    z-index: 1000;
    min-width: 140px;
    flex-direction: column;
    gap: 10px;
}

.desktop-action-dropdown.active {
    display: flex;
}

/* Body-level portal menu (prevents clipping inside scroll containers) */
#desktop-action-portal {
    position: fixed;
    z-index: 1000;
    /* higher than modal overlay (10000) and modals (100000) */
    top: 0;
    left: 0;
}

/* Keep same look as existing dropdown */
.desktop-action-dropdown-portal {
    display: flex !important;
}

.desktop-action-dropdown .tooltip-wrapper {
    width: 100%;
    display: block !important;
}

.desktop-action-dropdown button {
    width: 100% !important;
    margin: 0 !important;
    justify-content: center;
    border-radius: 4px;
    font-weight: 500;
}

button:disabled,
button[disabled],
button.disabled,
button[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* Fix for buttons that had fixed widths */
.desktop-action-dropdown .tooltip-wrapper .btn-switch,
.desktop-action-dropdown .tooltip-wrapper .btn-renew,
.desktop-action-dropdown .btn-bolton {
    width: 100% !important;
}

@media screen and (min-width: 768px) {

    /* Hide columns 13-18 on desktop */
    .bundle-history-table th:nth-child(13),
    .bundle-history-table td:nth-child(13),
    .bundle-history-table th:nth-child(14),
    .bundle-history-table td:nth-child(14),
    .bundle-history-table th:nth-child(15),
    .bundle-history-table td:nth-child(15),
    .bundle-history-table th:nth-child(16),
    .bundle-history-table td:nth-child(16),
    .bundle-history-table th:nth-child(17),
    .bundle-history-table td:nth-child(17),
    .bundle-history-table th:nth-child(18),
    .bundle-history-table td:nth-child(18) {
        display: none !important;
    }

    /* Ensure 19th column is shown */
    .bundle-history-table th:nth-child(19),
    .bundle-history-table td:nth-child(19) {
        display: table-cell !important;
    }
}


@media screen and (min-width: 768px) {

    /* Maintain Desktop Sticky Action Column */
    .bundle-history-table th:nth-child(19),
    .bundle-history-table td:nth-child(19) {
        position: sticky;
        right: 0;
        background-color: #fff;
        z-index: 10;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
        text-align: center;
    }

    .bundle-history-table thead th:nth-child(19) {
        background-color: #e8e8e0;
        z-index: 11;
    }
}

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

    /* Maintain Mobile Sticky Action Column */
    .bundle-history-table th:nth-child(18),
    .bundle-history-table td:nth-child(18) {
        position: sticky;
        right: 0;
        background-color: #fff;
        z-index: 10;
        box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    }

    .bundle-history-table thead th:nth-child(18) {
        background-color: #e8e8e0;
        z-index: 11;
    }
}

.d-show-mobile {
    display: none;
}

@media screen and (max-width: 768px) {
    .d-hide-mobile {
        display: none;
    }

    .d-show-mobile {
        display: inline;
    }

    /* Preserve the mobile PAYG checklist compact sizing.
       These values previously applied at ALL viewports, which caused the
       desktop PAYG icons (12px) to differ from Subscription (16px) and
       compressed the line-height inconsistently on desktop.
       Scoping them here keeps mobile exactly as it was while desktop now
       inherits the same base rules as the Subscription section:
         .description-item { line-height: 1.5em; padding: 2px 0 }
         .description-item .right-icon / .wrong-icon { width: 16px; height: 16px } */
    .payg-plans .description-item {
        line-height: 20.5px;
    }

    .payg-plans .description-item .right-icon,
    .payg-plans .description-item .wrong-icon {
        width: 12px;
        height: 12px;
    }
}

.auto-renew-switch-wrapper .slider {
    background-color: #585555;
}

.subscriber-data-table-body .loading-wrapper .loading-text {
    color: #000;
}

.sortable {
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
}

.sortable:hover {
    background: rgba(0, 0, 0, 0.05);
}

.sort-icon {
    margin-left: 5px;
    color: #ccc;
    font-family: monospace;
    font-size: 0.9em;
    vertical-align: middle;
}

.sort-icon.active {
    color: #007bff;
    font-weight: bold;
}

.spinner-wheel {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top: 3px solid #ff8000;
    border-radius: 50%;
    animation: spinner-spin 0.8s linear infinite;
    display: inline-block;
    box-sizing: border-box;
}

.action-modal .loading-wrapper .spinner-wheel {
    border-color: rgba(255, 255, 255, 0.2);
    border-top-color: #ff8000;
}

@keyframes spinner-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.table-refresh-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(245, 245, 240, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out;
}

.table-refresh-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.table-refresh-overlay .spinner-wheel {
    position: sticky;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 42px;
    border-width: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    background: #fff;
    padding: 3px;
}

.bundle-history-table .table-loading-data {
    text-align: center;
    padding: 50px;
}

.bundle-history-table .no-table-data {
    text-align: center;
    padding: 50px;
    color: #666;
    font-style: italic;
}

.bundle-history-table .failed-table-data {
    text-align: center;
    color: #dc3545;
    padding: 40px;
}

/* User Dropdown Styles */
.user-wrapper {
    position: fixed;
    top: 16px;
    right: 17px;
    z-index: 1000 !important;
}

.user-dropdown-btn {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
    display: block;
}

.user-dropdown-btn:focus {
    outline: none;
}

.user-dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: rgba(6, 10, 20, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 6px;
    min-width: 200px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
    padding: 10px 15px;
    display: none;
    z-index: 9999;
    backdrop-filter: blur(10px) saturate(140%);
}
.user-dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    right: 10px;
    border-width: 0 6px 6px 6px;
    border-style: solid;
    border-color: transparent transparent rgba(6, 10, 20, 0.52) transparent;
}

.user-dropdown-menu .dropdown-item {
    display: block;
    padding: 10px 16px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 4000;
    text-decoration: none;
    transition: all 0.3s ease;
    text-align: left;
    white-space: nowrap;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}
.user-dropdown-menu .dropdown-item + .dropdown-item {
    margin-top: 8px;
}
.user-dropdown-menu .dropdown-item:hover {
    background: #c3c3c380;
    border-color: #c3c3c380;
}
/* Forget Password page*/
.forgot-password-link {
    color: #fff;
    font-size: 14px;
}
.forgot-password-link:hover {
    color: #ff8000;
}
.modal-header .forgot-modal-title {
    font-size: 18px;
}
.forgot-password-modal-body .login-form-wrapper {
    width: 100%;
}
.forgot-password-modal-body .forgot-password-intro {
    margin-bottom: 20px;
    font-size: 13px;
    color: #fff;
}
.forgot-password-modal-body .input-field {
    margin-bottom: 20px;
}
.forgot-password-modal-body .submit-field,
.reset-password-card .submit-field {
    justify-content: center;
}
.forgot-password-modal-body .submit-field .submit,
.reset-password-card .submit-field .submit,
.reset-password-login-btn,
.btn-profile-action.save{
    position: relative;
    display: inline-block;
    padding: 10px 10px;
    border: 1px;
    background: #e54c4c;
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    border-radius: 3px;
    box-shadow: 0px 1px 4px -2px #333;
    text-shadow: 0px -1px #333;
    margin-top: 20px;
    cursor: pointer;
    outline: none;
    width: 140px;
    height: auto;
    transition: all 0.3s ease;
}
.forgot-password-modal-body .submit-field .submit:hover,
.reset-password-card .submit-field .submit:hover,
.reset-password-login-btn:hover,
.btn-profile-action.save:hover{
    background: #ff6b6b;
}
.forgot-password-modal-body .submit-field .submit::after,
.reset-password-card .submit-field .submit::after,
.reset-password-login-btn::after,
.btn-profile-action.save:after{
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: 50%;
    background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
}
.form-message {
    padding: 10px;
    font-size: 13px;
    border-radius: 10px;
}
.form-message.error {
    border: 1px solid #e37e7e9e;
    color: #e37e7e;
}
.form-message.success {
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: #8dc5a2;
}
/* Standing informational block rather than a transient result, so it gets room to breathe. */
.form-message.notice {
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.55;
}
.form-message.notice p {
    margin: 0 0 10px;
}
.form-message.notice p:last-child {
    margin-bottom: 0;
}
.form-message.notice a {
    color: #ff8000;
    text-decoration: underline;
}
/* Profile Page Styles */
.profile-main-wrapper {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 20px 40px 20px;
    position: relative;
}

.profile-main-wrapper::after {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: -2;
    background: url('../images/bg3.jpeg') no-repeat 50%;
    background-size: cover;
    animation: background 0.8s;
}

.profile-card-container {
    width: 100%;
    max-width: 480px;
    display: flex;
    justify-content: center;
    background-color: rgb(6 10 20 / 31%);
    backdrop-filter: blur(10px) saturate(140%);
    border-radius: 12px;
}
.profile-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 42%, rgba(18, 24, 38, 0.72) 100%);
    backdrop-filter: blur(22px) saturate(175%);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 40px 30px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 8px 32px rgba(255, 128, 0, 0.15);
    text-align: center;
    transition: all 0.3s ease;
}

.profile-card:hover {
}

.profile-card h2 {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    margin-bottom: 24px;
    letter-spacing: -0.5px;
}

.profile-info-list {
    margin-bottom: 20px;
}

.profile-info-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 10px;
    border-radius: 12px;
}

.field-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.field-value-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    margin-top: 6px;
}

.info-label {
    color: rgba(255, 255, 255, 0.60);
    font-size: 14px;
    font-weight: 400;
    text-align: left;
}

.info-value {
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    text-align: left;
    word-break: break-all;
}

.btn-field-edit {
    background: url(../images/edit-icon.svg) no-repeat center;
    background-size: cover;
    border: none;
    color: rgba(255, 255, 255, 0.60);
    font-size: 0;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 20px;
    height: 20px;
}

.btn-field-edit:hover {
    background: url(../images/edit-icon-hover.svg) no-repeat center;
    background-size: cover;
}

.btn-field-edit.editing {
    color: rgba(255, 255, 255, 0.5);
    cursor: default;
}

.info-input.edit-input {
    width: 100%;
    padding: 10px 12px;
    background: rgb(0 0 0 / 12%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.3s ease;
}
.info-input.edit-input:focus {
    background: #ffffffdb;
    color: #000000;
    outline: none;
}

.profile-actions-buttons {
    display: flex;
    width: 100%;
}

.btn-profile-action {
    flex: 1;
    padding: 12px 24px;
    font-weight: 400;
    font-size: 14px;
    transition: all 0.3s ease;
    cursor: pointer;
    border-radius: 4px;
    text-align: center;
}

.btn-profile-action.cancel {
    border: 2px solid #ffffff;
    color: #ffffff;
    background: transparent;
}

.btn-profile-action.cancel:hover {
    background: #ffffff;
    color: #000000;
}

.btn-profile-action.save {
    margin: 0;
}

.profile-autocomplete {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgb(20 41 62);
    border-radius: 4px;
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    padding: 0;
    margin-top: 4px;
}

.profile-autocomplete li {
    padding: 10px 12px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    list-style: none;
    text-align: left;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.profile-autocomplete li:hover {
    background: rgb(33 51 69);
}
@media (max-width: 480px) {
    .profile-card {
        padding: 30px 20px;
    }
    .profile-card h2 {
        font-size: 20px;
    }
}
/* Reset Password page*/
.reset-password-wrapper .protal-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.reset-password-wrapper .protal-wrapper .content-wrapper {
    align-items: center;
}
.reset-password-card-wrapper {
    width: 100%;
    max-width: 480px;
    background-color: rgb(6 10 20 / 31%);
    backdrop-filter: blur(10px) saturate(140%);
    overflow: hidden;
    border-radius: 12px;
    margin: 0 auto;
    position: initial;
    padding: 0;
}
.reset-password-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.06) 42%, rgba(18, 24, 38, 0.72) 100%);
    backdrop-filter: blur(22px) saturate(175%);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 40px 30px;
    width: 100%;
    max-width: 480px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.reset-password-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 24px;
    color: #ffffff;
    text-align: center;
}

.reset-password-card .input-field {
    margin-bottom: 20px;
}

.reset-password-card .input-field label {
    display: block;
    font-weight: 500;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.60);
    font-size: 14px;
}
.reset-password-card .input-field input {
    border: 1px solid #ced4da;
    border-radius: 6px;
}
.reset-password-card .input-hint {
    display: block;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.60);
    margin-top: 6px;
    line-height: 1.4;
}

.reset-password-actions {
    margin-top: 20px;
    text-align: center;
}

.forgot-password-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
}

    .forgot-password-link:hover {
        text-decoration: underline;
    }
@media (max-width: 767px) {
    .input-field input,
    .input-field textarea,
    .input-field select,
    .login-form-wrapper input,
    .login-form-wrapper textarea,
    .login-form-wrapper select,
    .register-form-wrapper input,
    .register-form-wrapper textarea,
    .register-form-wrapper select,
    .info-input.edit-input {
        font-size: 16px !important;
    }
    .bundle-search-input,
    #user-portal-filter .content-wrapper select,
    #user-portal-filter .content-wrapper input,
    .zone-countries-select {
        font-size: 16px !important;
    }
    .input-field label {
        font-size: 14px;
    }
    .submit-field .submit {
        font-size: 16px !important;
    }
}
.login-portal-tab-wrapper {
    width: 100%;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    overflow: hidden;
}
.login-portal-tab-wrapper > ul {
    padding: 30px 30px 0;
}
.portal-tab-content-wrapper {
    padding: 30px;
}
.login-portal-tab-wrapper .input-field input {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.35);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.login-portal-tab-wrapper .input-field input::placeholder {
    color: rgba(255,255,255,0.8);
}
.submit-field .submit {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.4);
    backdrop-filter: blur(6px);
    color: #fff;
}
.submit-field .submit:hover {
    background: rgba(255,255,255,0.18);
}
.login-img-wrapper,
.register-img-wrapper {
    position: relative;
}
.login-img-wrapper::before,
.register-img-wrapper::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 100%;
    background: rgb(255 255 255 / 46%);
}
.profile-card-container .back-button-wrapper {
    position: absolute;
    left: 0;
    display: flex;
    padding-left: 20px;
    top: 20px;
    z-index: 99;
}
.profile-card-container .back-button {
    filter: brightness(0) invert(1);
    opacity: .8;
}
.profile-card-container .back-button:hover {
    filter: brightness(0) invert(1);
    opacity: 1;
}
#profileModal {
    padding-left: 0;
}
@media (min-width: 768px) {
    #profileModal .modal-container {
        max-width: 410px;
    }
}

/* ============================================================
   Card Carousel — SixtelShop (custom slot-based fan deck)

   Each .ck-card contains three flat DOM layers:

     .ck-visual-layer   — image + description.  No tilt; slot transform
                          is applied to the card, not an inner layer.

     .ck-reveal-panel   — roaming info overlay (from .esim-back-view).
                          Toggled by the Details button click.
                          position:absolute inset:0.

     .ck-action-strip   — Details + Buy buttons side by side.
                          position:absolute at card bottom, z-index:10.
   ============================================================ */

/* ── items-wrapper: becomes the deck's containing block ──────── */
.esim-items-wrapper.ck-active {
    display: block;
    /* padding-top: 60px — space between the wrapper top and the deck top.
       Combined with switch-wrapper margin-bottom:100px, total gap from
       toggle bottom to the highest fan card corner (slot-n2) = 160px.   */
    padding: 60px 0 200px;
}

/* ── Outer deck container ─────────────────────────────────────── */
/*  .ck-nav is position:absolute inside the deck so it never
    participates in the stack's layout.  padding-top:80px reserves
    the vertical zone the nav occupies so the stack starts below it.
    The fan cards that go UP-LEFT (slot-n1: -60px, slot-n2: -120px)
    can still overflow above the deck because overflow:visible, but
    they are on the left side while the nav is on the right — no
    horizontal overlap is possible.                                   */
.ck-deck {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    overflow: visible;
    padding-top: 0;
}

/* ── Nav wrapper: non-positioned so arrows escape to .ck-deck ─── */
/* .ck-nav has no position:relative/absolute so its children with
   position:absolute go to the nearest positioned ancestor = .ck-deck */
.ck-nav {
    display: block;
}

/* ── Arrow buttons: absolute within .fa-sim-wrapper ─────────────
   .fa-sim-wrapper is position:relative and spans the full page-
   section width (max-width 1140px desktop / 540px mobile).
   top:20px  right:20 / 90px  lands in the open top-right corner
   of that large section, far from the centered card stack.       */
.ck-arr {
    position: absolute;
    top: 0;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0  4px 14px rgba(0, 0, 0, 0.38),
        0 -2px  6px rgba(0, 0, 0, 0.14);
    opacity: 0.95;
    transition: opacity 0.2s ease, transform 0.15s ease;
    z-index: 500;
    pointer-events: auto;
}
.ck-arr-prev { right: 90px; }
.ck-arr-next { right: 20px; }
.ck-arr:hover  { opacity: 1; transform: scale(1.07); }
.ck-arr:active { transform: scale(0.93); }

/* ── Card stack ──────────────────────────────────────────────── */
.ck-stack {
    position: relative;
    width: 320px;
    height: 558px;
    margin: 0 auto;             /* centre the stack inside the deck */
    perspective: 920px;
}

/* ── Individual card ─────────────────────────────────────────── */
.ck-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 320px;
    height: 558px;
    /* ↑ base height — sufficient for Subscription plans (7 rows, 178px image).
       UK eSIM Shop PAYG has 8-row checklists and the Unlimited plan (item-9) uses
       a taller aspect-ratio image (213px vs 178px).  Worst-case content stack:
         image 213 + price 54 + 8 rows×25 + ul default margin ≈ 483px
       + action-strip bottom padding 100px = 583px minimum, plus comfort buffer.
       That override lives in the rule below, scoped only to the UK shop page
       so the Rate Card deck (same .ck-card class) is not affected. */
    border-radius: 32px;
    background: #ffffff;
    /* Reference component shadow (Framer 3D Deck Carousel Pro) */
    box-shadow:
        rgb(120, 116, 116) -1.6px -1.6px 8px,
        rgb(171, 174, 179)  1.6px  1.6px 8px;
    transition:
        transform  0.5s ease-out,
        opacity    0.4s ease-out,
        box-shadow 0.3s ease-out,
        visibility 0s   linear 0.4s; /* delay visibility hide until fade done */
    /* Hidden until a slot class is applied by JS                   */
    opacity: 0;
    visibility: hidden;
}

/* ── UK eSIM Shop card height override ───────────────────────────────────────
   Selector targets .ck-card that are inside the nested .subscription-plans or
   .payg-plans divs found only in SixtelShop.cshtml.  On RateCard.cshtml the
   .subscription-plans class is on the outermost container (parent of
   .fa-sim-wrapper), so ".fa-sim-wrapper .subscription-plans .ck-card" never
   matches there — the Rate Card deck's 558px height is untouched.

   600px card: available content area = 600 - 100 (action-strip padding) = 500px.
   Worst case (PAYG Unlimited, item-9): 213 (image) + 54 (price) + 200 (8 rows)
   + ~16 (ul bottom-margin) = 483px < 500px → 17px breathing room.
   Subscription 7-row cards: 407px + 16 = 423px < 500px → 77px above the
   button, which is fine and consistent with the original design intent.        */
.fa-sim-wrapper .subscription-plans .ck-card,
.fa-sim-wrapper .payg-plans .ck-card {
    height: 600px;
}

/* Stack height must match card height so the containing block is correct */
.fa-sim-wrapper .subscription-plans .ck-stack,
.fa-sim-wrapper .payg-plans .ck-stack {
    height: 600px;
}

/* Disable slot transitions while the card is being dragged */
.ck-card.ck-dragging {
    transition: none !important;
    cursor: grabbing;
}

/* ── Slot transforms ─────────────────────────────────────────── */
/* Center / active */
.ck-slot-0 {
    transform: translateX(0) translateY(0) translateZ(0) scale(1) rotateZ(0deg);
    opacity: 1;
    visibility: visible;
    z-index: 100;
    cursor: grab;
    transition:
        transform  0.5s ease-out,
        opacity    0.4s ease-out,
        box-shadow 0.3s ease-out;
}
.ck-slot-0:active { cursor: grabbing; }

/* Inner right */
.ck-slot-p1 {
    transform: translateX(42px) translateY(50px) translateZ(-48px) scale(0.917) rotateZ(10deg);
    opacity: 0.6;
    visibility: visible;
    z-index: 99;
    transition:
        transform  0.5s ease-out,
        opacity    0.4s ease-out,
        visibility 0s   linear 0s;
}

/* Outer right */
.ck-slot-p2 {
    transform: translateX(82px) translateY(100px) translateZ(-96px) scale(0.847) rotateZ(20deg);
    opacity: 0.5;
    visibility: visible;
    z-index: 98;
    transition:
        transform  0.5s ease-out,
        opacity    0.4s ease-out,
        visibility 0s   linear 0s;
}

/* Inner left */
.ck-slot-n1 {
    transform: translateX(-42px) translateY(-50px) translateZ(-48px) scale(0.917) rotateZ(-10deg);
    opacity: 0.6;
    visibility: visible;
    z-index: 99;
    transition:
        transform  0.5s ease-out,
        opacity    0.4s ease-out,
        visibility 0s   linear 0s;
}

/* Outer left */
.ck-slot-n2 {
    transform: translateX(-82px) translateY(-100px) translateZ(-96px) scale(0.847) rotateZ(-20deg);
    opacity: 0.5;
    visibility: visible;
    z-index: 98;
    transition:
        transform  0.5s ease-out,
        opacity    0.4s ease-out,
        visibility 0s   linear 0s;
}

/* Hidden right — just beyond outermost; fades in from this position */
.ck-slot-hidp {
    transform: translateX(124px) translateY(148px) translateZ(-140px) scale(0.78) rotateZ(28deg);
    opacity: 0;
    visibility: hidden;
    z-index: 97;
    pointer-events: none;
    transition:
        transform  0.5s ease-out,
        opacity    0.4s ease-out,
        visibility 0s   linear 0.4s;
}

/* Hidden left */
.ck-slot-hidn {
    transform: translateX(-124px) translateY(-148px) translateZ(-140px) scale(0.78) rotateZ(-28deg);
    opacity: 0;
    visibility: hidden;
    z-index: 97;
    pointer-events: none;
    transition:
        transform  0.5s ease-out,
        opacity    0.4s ease-out,
        visibility 0s   linear 0.4s;
}

/* Background cards are visual only — block interaction           */
.ck-slot-p1,
.ck-slot-p2,
.ck-slot-n1,
.ck-slot-n2 {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}

/* ── Layer 1: Visual layer ───────────────────────────────────── */
/* BEFORE: overflow:hidden + border-radius:50px
   AFTER:  clip-path:inset(0 round 32px)
   Both produce the same visual clipping to the 50px card corners.
   The difference: overflow:hidden forces transform-style:flat on all
   descendants (Chrome/Safari behaviour), which silently kills the
   rotateX QR-code image flip inside .esmi-img-wrapper.
   clip-path creates a stacking context but does NOT force
   transform-style:flat, so 3D child transforms continue to work.  */
.ck-visual-layer {
    width: 100%;
    height: 100%;
    clip-path: inset(0 round 32px);
}

/* item-N padding/margin reset inside the visual layer           */
.ck-card .ck-visual-layer > .item-7,
.ck-card .ck-visual-layer > .item-8,
.ck-card .ck-visual-layer > .item-9,
.ck-card .ck-visual-layer > .item-10,
.ck-card .ck-visual-layer > .item-11,
.ck-card .ck-visual-layer > .item-12,
.ck-card .ck-visual-layer > .item-13 {
    padding: 0 !important;
    width:   100% !important;
    margin:  0 !important;
}

.ck-card .esim-item-wrapper {
    width: 100%;
    /* height:100% lets the front-view expand to fill the card;
       the flex column inside grows with the card height.          */
    height: 100%;
}

/* Override the card-level rotateY flip — we use an opacity overlay
   reveal instead.  The esim-item-wrapper's preserve-3d is NOT
   touched, so the QR-code image flip inside .esmi-img-wrapper
   keeps working in its own perspective context.                   */
.ck-deck .esim-front-view {
    transform: none !important;
    transition: none !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    /* Bottom padding = action-strip (82px) + 18px buffer = 100px.
       Base card 558px: available = 558-100 = 458px (Rate Card deck).
       UK Shop cards overridden to 600px: available = 500px.
       Worst case (PAYG Unlimited, item-9): image 213 + price 54 + 8 rows 200 = 467px < 500px ✓
       Subscription 7-row: image 178 + price 54 + 7 rows 175 = 407px < 500px ✓   */
    padding: 0 0 100px 0 !important;
    height: 100%;
}

/* Description area: side padding, flex column so price centers
   in the space between the image and the checklist.             */
.ck-deck .esim-description-wrapper {
    flex: 1;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

/* Price sits centered in the gap — equal space above and below */
.ck-deck .esim-price-wrapper {
    padding: 12px 0;
    margin-bottom: 0;
}

/* Back-view content moved to .ck-reveal-panel — hide the shell  */
.ck-deck .esim-back-view {
    display: none !important;
}

/* Suppress any active-class rotateY that jQuery might trigger
   via the old .romain-info-btn / .flip-link / .btn-link handlers */
.ck-deck .esim-item-wrapper.active .esim-front-view {
    transform: none !important;
}

/* Hide all "…" flip triggers — Details button is the trigger now */
.ck-deck .romain-info-btn {
    display: none !important;
}

/* ── Layer 2: Reveal panel ───────────────────────────────────── */
.ck-reveal-panel {
    position: absolute;
    inset: 0;
    border-radius: 32px;
    background: #ffffff;
    /* Above the visual layer; below the action strip (z-index:10) */
    z-index: 5;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 28px 28px 104px; /* 104px = 82px strip + 22px buffer */
    overflow-y: auto;
}

/* Revealed state (set by JS when Details is clicked)            */
.ck-card.ck-revealed .ck-reveal-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* "Back to Plan" is not needed in the hover model — hide it     */
.ck-reveal-panel .rate-card-back-action {
    display: none !important;
}

/* ── Layer 3: Action strip — Buy (primary) stacked over View Details */
.ck-action-strip {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    border-radius: 0 0 32px 32px;
    padding: 10px 24px 14px;
    pointer-events: auto;
}

/* Buy button row — full-width center */
.ck-action-strip .add-cart-wrapper {
    margin: 0;
    position: static;
    width: 100%;
    display: flex;
    justify-content: center;
}

.ck-action-strip .add-cart-btn {
    width: 100%;
    display: flex;
    justify-content: center;
}

.ck-action-strip .add-cart-btn .btn {
    margin-top: 0;
    /* Content-sized: word "Buy" + 24px side padding each side */
    width: auto;
    padding-left:  24px;
    padding-right: 24px;
    max-width: none;
}

/* View Details — secondary, smaller, below Buy */
.ck-details-btn {
    font-size: 11px;
    font-weight: 500;
    color: #777777;
    background: transparent;
    border: none;
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.2s ease;
    line-height: 1;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: #cccccc;
}
.ck-details-btn:hover {
    color: #333333;
    text-decoration-color: #999999;
}

/* Suppress tooltip bubble/arrow only when data-tooltip is empty (placeholder cards have no ID) */
.ck-action-strip .has-tooltip[data-tooltip=""]::before,
.ck-action-strip .has-tooltip[data-tooltip=""]::after {
    display: none !important;
}

/* Force tooltip visible on hover inside the action strip.
   Higher specificity than the base .has-tooltip:hover::after rule,
   ensuring no other stacking or specificity issue can suppress it. */
.ck-action-strip .has-tooltip:not([data-tooltip=""]):hover::after,
.ck-action-strip .has-tooltip:not([data-tooltip=""]):hover::before {
    opacity: 1 !important;
}

/* Ensure the action strip never clips the tooltip above it */
.ck-action-strip {
    overflow: visible;
}

/* ── Image: full-bleed top/left/right, native aspect ratio ───── */
/* Top-corner rounding is handled by the parent .ck-visual-layer's
   clip-path: inset(0 round 32px), so the image curves cleanly with
   the card's top corners with no extra clip needed here.         */
.ck-deck .esmi-img-wrapper {
    margin: 0 !important;
    height: auto;
    width: 100%;
    aspect-ratio: 270 / 150;
    flex-shrink: 0;
}

/* item-9 (Unlimited) now uses the same aspect-ratio as all other deck cards */

/* Remove the per-face drop shadow — card shadow handles depth */
.ck-deck .esmi-img-wrapper .esim-face {
    box-shadow: none;
}

.ck-deck .esim-img {
    background-position: center center;
    background-size: cover;
}

/* ── Explore hint ─────────────────────────────────────────────── */
.ck-deck::after {
    content: 'drag · tap arrows to explore';
    display: block;
    position: absolute;
    /* sits between the bottom of the card stack and the far background cards */
    bottom: 120px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.40);
    white-space: nowrap;
    pointer-events: none;
}

/* ── Responsive: mobile (≤768px) ─────────────────────────────── */
@media (max-width: 768px) {

    /* Toggle-to-card gap — margin/padding values unchanged here      */
    .all-sim-shop .switch-wrapper {
        margin-bottom: 52px;
        font-size: 11px;
        gap: 6px;
        padding: 4px;
        border-radius: 22px;
    }

    /* ── Plan Type heading ───────────────────────────────────────── */
    .all-sim-shop .shop-plans-title {
        font-size: 15px;
        margin-top: 20px;
        width: auto;
    }

    /* ── Subscription / PAYG toggle scale-down ───────────────────── */
    .all-sim-shop .switch-wrapper .content-wrapper {
        gap: 6px;
    }

    .all-sim-shop .switch-wrapper .label {
        font-size: 11px;
        padding: 5px 10px;
        border-radius: 14px;
    }

    .all-sim-shop .switch-wrapper .switch {
        width:  38px;
        height: 20px;
    }

    .all-sim-shop .switch-wrapper .slider:before {
        height: 14px;
        width:  14px;
        left:   3px;
        bottom: 3px;
    }

    .all-sim-shop .switch-wrapper input:checked + .slider:before {
        transform: translateX(18px);
    }

    /* Contain fan-card paint so side-slot transforms cannot widen
       the document.  The culprit is .ck-card slot transforms
       (translateX ±82/±124px) escaping .ck-stack/.ck-deck.         */
    .esim-items-wrapper.ck-active {
        overflow-x: clip;
        padding: 8px 12px 140px;
    }

    .ck-deck {
        overflow-x: clip;
        max-width: 100%;
    }

    /* ── Card stack: 206×368 — extra 30px gives 41px content spare ── */
    .ck-stack {
        width:      calc(100vw - 48px);
        height:     calc((100vw - 48px) * 1.641);
        max-width:  206px;
        max-height: 368px;
        /* Do NOT set pan-y here — it applies to all touches that begin
           inside the stack (including .ck-reveal-panel) and blocks
           horizontal swipe while Details is open on mobile.            */
        touch-action: auto;
    }

    .ck-card {
        width:      calc(100vw - 48px);
        height:     calc((100vw - 48px) * 1.641);
        max-width:  206px;
        max-height: 368px;
        border-radius: 24px;
    }

    .ck-visual-layer {
        clip-path: inset(0 round 24px);
    }

    .ck-reveal-panel {
        border-radius: 24px;
        /* Bottom pad = mobile strip (66px) + 16px buffer = 82px */
        padding: 10px 12px 82px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* Scroll lives on the inner content so the panel shell can still
       participate in horizontal card drag (touch-action:none on card). */
    .ck-card.ck-revealed .ck-reveal-panel .romai-info {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1;
        min-height: 0;
        touch-action: pan-y;
    }

    .ck-action-strip {
        border-radius: 0 0 24px 24px;
        padding: 8px 12px;
    }

    /* ── Fan offsets: ~25% tighter than prior mobile spread ──────── */
    .ck-slot-p1 {
        transform: translateX(23px) translateY(28px) translateZ(-48px) scale(0.917) rotateZ(8deg);
    }

    .ck-slot-p2 {
        transform: translateX(45px) translateY(55px) translateZ(-96px) scale(0.847) rotateZ(15deg);
    }

    .ck-slot-n1 {
        transform: translateX(-23px) translateY(-28px) translateZ(-48px) scale(0.917) rotateZ(-8deg);
    }

    .ck-slot-n2 {
        transform: translateX(-45px) translateY(-55px) translateZ(-96px) scale(0.847) rotateZ(-15deg);
    }

    .ck-slot-hidp {
        transform: translateX(68px) translateY(81px) translateZ(-140px) scale(0.78) rotateZ(22deg);
    }

    .ck-slot-hidn {
        transform: translateX(-68px) translateY(-81px) translateZ(-140px) scale(0.78) rotateZ(-22deg);
    }

    /* Active card: capture horizontal touch for drag, not page scroll */
    .ck-slot-0 {
        touch-action: none;
    }

    /* ── In-card typography / spacing scale-down ─────────────────── */
    .ck-deck .esmi-img-wrapper {
        margin: 0 !important;
        width: 100%;
        /* clip-path removed: parent .ck-visual-layer (inset 0 round 24px)
           handles top-corner rounding automatically.                      */
    }

    .ck-deck .esim-description-wrapper {
        padding: 0 14px;
    }

    /* Price: smaller + tighter vertical rhythm on mobile */
    .ck-deck .esim-price-wrapper {
        font-size: 18px;
        padding: 5px 0;
    }

    /* Checklist: tighter rows so 7 items fit without overflow */
    .ck-deck .esim-description-items {
        margin: 0;
    }

    .ck-deck .description-item {
        line-height: 1.3;
        padding: 1px 0;
        /* Tighter gap so the longest item never wraps on a 206px card */
        gap: 0 6px;
    }

    .ck-deck .description-item span:first-child {
        font-size: 10px;
    }

    /* Icon reduced so row height follows font, not icon size */
    .ck-deck .description-item .right-icon,
    .ck-deck .description-item .wrong-icon {
        width: 12px;
        height: 12px;
        background-size: 12px 12px;
        flex-shrink: 0;
    }

    /* Bottom padding = mobile strip (66px) + 14px buffer = 80px.
       Card now 368px → content area = 368-80 = 288px.
       Image (114) + price (28) + 7 items (105) = 247px < 288px.    */
    .ck-deck .esim-front-view {
        padding: 0 0 80px 0 !important;
    }

    /* Stacked action strip on mobile */
    .ck-action-strip {
        padding: 8px 16px 12px;
        gap: 4px;
    }

    .ck-details-btn {
        font-size: 10px;
        padding: 2px 6px;
    }

    .ck-action-strip .add-cart-btn .btn {
        font-size: 12px;
        /* Content-sized on mobile: word "Buy" + 20px each side */
        width: auto;
        padding: 5px 20px;
        max-width: none;
    }

    /* ── QR flip back-face: stack links below code, no overlap ──── */
    .ck-deck .esmi-img-wrapper .esim-face.back {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 8px 6px;
    }

    .ck-deck .esmi-img-wrapper .esim-face.back .esim-img.qr-code-img {
        position: static;
        inset: auto;
        width: 68px;
        height: 68px;
        margin: 0 auto;
        flex-shrink: 0;
    }

    .ck-deck .esmi-img-wrapper .com-link-wrapper {
        position: static;
        align-items: center;
        justify-content: center;
        padding: 6px 4px 0;
        gap: 2px;
        font-size: 9px;
    }

    .ck-deck .esmi-img-wrapper .com-link-wrapper .com-link {
        font-size: 9px;
        line-height: 1.25;
        width: 100%;
        text-align: center;
    }

    /* ── Details / roaming panel: match front-card 12px body text ── */
    .ck-reveal-panel .romai-info {
        padding: 0;
    }

    .ck-reveal-panel .roaming-info-title {
        font-size: 11px;
        font-weight: 600;
        margin: 4px 0 6px;
        line-height: 1.3;
    }

    .ck-reveal-panel .rate-card-description,
    .ck-reveal-panel .rate-card-description p,
    .ck-reveal-panel .bolt-ons-section .bolt-ons-title,
    .ck-reveal-panel .bolt-ons-list .bolt-on-item,
    .ck-reveal-panel .travel-page-link p {
        font-size: 10px;
        line-height: 1.3;
        margin-bottom: 4px;
    }

    .ck-reveal-panel .bolt-ons-section {
        margin-bottom: 6px;
    }

    /* ── Arrows: below the card stack (JS positions), not on card ── */
    .ck-arr {
        width:  40px;
        height: 40px;
    }

    .ck-arr svg {
        width:  16px;
        height: 16px;
    }

    .ck-deck::after {
        bottom: 96px;
        font-size: 9px;
    }
}

/* ── User Portal signpost on the public home page (auth lives at /account) ── */
.portal-auth-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 255px;
    padding: 40px 30px;
    text-align: center;
}

.portal-auth-prompt p {
    margin: 0;
    max-width: 460px;
    color: #fff;
    font-size: 18px;
    line-height: 1.5;
}

.portal-auth-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

@media (max-width: 575px) {
    .portal-auth-prompt {
        min-height: 0;
        padding: 32px 20px;
    }

    .portal-auth-prompt p {
        font-size: 16px;
    }

    .portal-auth-actions {
        width: 100%;
        flex-direction: column;
    }
}
/* ── Account pages: /account/login, /register, /forgot-password ── */
.account-page-wrapper .account-card-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    padding: 40px 20px;
}

.account-card {
    display: flex;
    align-items: center;
    gap: 32px;
    width: 100%;
    max-width: 760px;
    padding: 36px 32px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.account-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* Side image column. The image, the 2px divider and the below-992px hide all come from the
   existing .login-img-wrapper / .register-img-wrapper rules — this only lays out the column. */
.account-card .login-img-wrapper,
.account-card .register-img-wrapper {
    flex: 0 0 auto;
    align-self: stretch;
    display: flex;
    align-items: center;
    padding-left: 32px;
}

/* The shared .login-img rule sets only max-width, which relied on the old block layout to
   supply a width. As a flex item here it would collapse to zero, so state it explicitly. */
.account-card .login-img,
.account-card .register-img {
    width: 180px;
}

.account-card-title {
    margin: 0 0 24px;
    color: #fff;
    text-align: center;
}

.account-card-lead {
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    line-height: 1.5;
}

.account-card .input-field {
    margin-bottom: 18px;
}

.account-card .input-field label {
    display: block;
    margin-bottom: 6px;
    color: #fff;
    font-weight: 600;
}

.account-card .input-field input {
    width: 100%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.account-card .input-field input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.account-card .input-hint {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    line-height: 1.4;
}

.account-card .submit-field {
    margin-top: 24px;
}

.account-card .submit-field .submit {
    width: 100%;
    cursor: pointer;
}

.account-card-footer {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    text-align: center;
}

.account-card-footer a {
    color: #ff8000;
    text-decoration: underline;
}

/* Validation summary rendered by asp-validation-summary */
.account-card .form-message ul {
    margin: 0;
    padding-left: 18px;
}

.account-card .form-message li {
    list-style: disc;
}

/* Match the site-wide convention: the side image drops below 992px. The shared rule can't do
   it alone here because .account-card .login-img-wrapper outranks it, so restate it. */
@media (max-width: 991px) {
    .account-card {
        max-width: 460px;
        gap: 0;
    }

    .account-card .login-img-wrapper,
    .account-card .register-img-wrapper {
        display: none;
    }
}

@media (max-width: 575px) {
    .account-page-wrapper .account-card-wrapper {
        padding: 24px 12px;
    }

    .account-card {
        padding: 28px 20px;
    }
}