.tl-esim-calculator {
--tl-esim-bg: #fff;
--tl-esim-page: #f5f5fa;
--tl-esim-text: #2d2d2d;
--tl-esim-muted: #757575;
--tl-esim-border: #0000001a;
--tl-esim-strong-border: #000;
--tl-esim-accent: #f35d4d;
--tl-esim-accent-soft: #fff1ef;
--tl-esim-radius: .69rem;
background: transparent;
border: 0;
border-radius: 0;
color: var(--tl-esim-text);
margin: 1.39rem 0;
max-width: none;
min-width: 0;
overflow-wrap: anywhere;
padding: 0;
width: 100%;
}
.tl-esim-calculator.is-ready [data-tl-esim-results],
.tl-esim-calculator.is-ready [data-tl-esim-summary] {
opacity: 1;
transition: opacity .12s ease;
}
.tl-esim-calculator,
.tl-esim-calculator * {
box-sizing: border-box;
}
.tl-esim-calculator__country-panel {
align-items: center;
background:
radial-gradient(circle at 82% 20%, #f35d4d1c 0, transparent 30%),
linear-gradient(135deg, #fff 0%, #fff8f6 55%, #fff 100%);
border: 1px solid #f35d4d2e;
border-radius: var(--tl-esim-radius);
box-shadow: 0 .42rem 1.18rem #2d2d2d0a;
color: var(--tl-esim-muted);
display: flex;
gap: .7rem;
isolation: isolate;
justify-content: flex-start;
margin-bottom: .9rem;
overflow: hidden;
min-height: 5rem;
padding: .92rem 1.08rem 1rem;
position: relative;
}
.tl-esim-calculator__country-panel::before {
background: linear-gradient(90deg, #f35d4d, #ffb45f);
content: "";
height: .24rem;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.tl-esim-calculator__country-panel span {
font-size: .96rem;
font-weight: 700;
line-height: 140%;
}
.tl-esim-calculator__country-flag-bg {
bottom: -1rem;
filter: saturate(1.08) blur(.15px);
font-size: 7.2rem !important;
line-height: 1;
opacity: .13;
position: absolute;
right: .92rem;
transform: rotate(-8deg);
z-index: 0;
}
.tl-esim-calculator__country-main {
align-items: center;
display: flex;
gap: 1rem;
justify-content: space-between;
min-width: 0;
position: relative;
width: 100%;
z-index: 1;
}
.tl-esim-calculator__country-copy {
align-items: flex-start;
display: flex;
flex-direction: column;
gap: .34rem;
min-width: 0;
}
.tl-esim-calculator__country-copy span {
color: var(--tl-esim-accent);
font-size: .78rem;
font-weight: 700;
line-height: 120%;
text-transform: uppercase;
}
.tl-esim-calculator__country-copy strong {
align-items: center;
color: var(--tl-esim-text);
display: block;
font-size: 1.9rem;
font-weight: 700;
line-height: 110%;
overflow-wrap: anywhere;
}
.tl-esim-calculator__country-note {
align-items: center;
background: #fff;
border: 1px solid #f35d4d30;
border-radius: 999px;
box-shadow: 0 .18rem .55rem #2d2d2d0a;
color: var(--tl-esim-muted);
display: inline-flex;
flex: 0 1 auto;
font-size: .8rem !important;
font-weight: 700;
line-height: 1;
max-width: 100%;
min-height: 2rem;
overflow: hidden;
padding: .45rem .75rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.tl-esim-calculator__country-select {
align-items: center;
background: var(--tl-esim-page);
border: 1px solid var(--tl-esim-border);
border-radius: var(--tl-esim-radius);
display: grid;
gap: .6rem;
grid-template-columns: minmax(9rem, auto) minmax(0, 1fr);
margin: 0 0 .83rem;
max-width: 100%;
min-width: 0;
overflow: hidden;
padding: .66rem;
}
.tl-esim-calculator__country-select > span {
color: var(--tl-esim-muted);
font-size: .83rem;
font-weight: 700;
line-height: 140%;
}
.tl-esim-result__badge {
align-items: center;
background: var(--tl-esim-accent-soft);
border: 0;
border-radius: 999px;
color: var(--tl-esim-accent);
display: inline-flex;
flex: none;
font-size: .76rem;
font-weight: 700;
min-height: 1.4rem;
justify-content: center;
line-height: 1;
padding: .25rem .42rem;
white-space: nowrap;
}
.tl-esim-provider-icon {
align-items: center;
display: inline-flex;
flex: none;
height: 1.45rem;
justify-content: center;
overflow: hidden;
width: 1.45rem;
}
.tl-esim-provider-icon img,
.tl-esim-provider-icon svg {
display: block;
height: 100%;
object-fit: contain;
overflow: hidden;
width: 100%;
}
.tl-esim-calculator__controls {
display: grid;
gap: .62rem;
grid-template-columns: repeat(12, minmax(0, 1fr));
margin: 0 0 .83rem;
max-width: 100%;
min-width: 0;
}
.tl-esim-calculator__field--daily {
grid-column: 1 / -1;
order: 1;
}
.tl-esim-calculator__field--days {
grid-column: span 3;
order: 2;
}
.tl-esim-calculator__field--total {
grid-column: span 3;
order: 3;
}
.tl-esim-calculator__field--options {
grid-column: span 6;
order: 4;
}
.tl-esim-calculator__field {
background: var(--tl-esim-page);
border: 1px solid var(--tl-esim-border);
border-radius: var(--tl-esim-radius);
max-width: 100%;
min-height: 4.65rem;
min-width: 0;
padding: .66rem;
transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tl-esim-calculator__field > span {
color: var(--tl-esim-muted);
display: block;
font-size: .83rem;
font-weight: 700;
line-height: 140%;
margin-bottom: .38rem;
text-align: center;
}
.tl-esim-sr-only {
clip: rect(0, 0, 0, 0);
border: 0;
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.tl-esim-calculator__field input,
.tl-esim-calculator__country-select select {
appearance: none;
border: 1px solid #00000026;
border-radius: .45rem;
color: var(--tl-esim-text);
font: inherit;
font-size: .98rem;
font-weight: 600;
height: 2.55rem;
line-height: 120%;
max-width: 100%;
min-width: 0;
padding: .55rem .7rem;
width: 100%;
}
.tl-esim-calculator__field input {
background-color: #fff;
}
.tl-esim-calculator__country-select select {
background:
linear-gradient(45deg, transparent 50%, var(--tl-esim-muted) 50%) calc(100% - .95rem) 50% / .32rem .32rem no-repeat,
linear-gradient(135deg, var(--tl-esim-muted) 50%, transparent 50%) calc(100% - .74rem) 50% / .32rem .32rem no-repeat,
#fff;
overflow: hidden;
padding-right: 2.1rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.tl-esim-calculator__country-select option {
max-width: 100%;
}
.tl-esim-calculator__field input[type="number"] {
-moz-appearance: textfield;
}
.tl-esim-calculator__field input[type="number"]::-webkit-inner-spin-button,
.tl-esim-calculator__field input[type="number"]::-webkit-outer-spin-button {
appearance: none;
margin: 0;
}
.tl-esim-stepper input {
text-align: center;
}
.tl-esim-calculator__field input:focus,
.tl-esim-calculator__country-select select:focus {
border-color: var(--tl-esim-accent);
box-shadow: 0 0 0 3px #f35d4d1f;
outline: none;
}
.tl-esim-stepper {
display: grid;
gap: .28rem;
grid-template-columns: 2.25rem minmax(0, 1fr) 2.25rem;
max-width: 100%;
min-width: 0;
}
.tl-esim-stepper button,
.tl-esim-segments button {
appearance: none;
border: 0;
cursor: pointer;
font-family: inherit;
}
.tl-esim-stepper button {
align-items: center;
background: #fff;
border: 1px solid #00000026;
border-radius: .35rem;
color: var(--tl-esim-text);
display: inline-flex;
font-size: 1.08rem;
font-weight: 700;
height: 2.55rem;
justify-content: center;
line-height: 1;
}
.tl-esim-stepper button:hover {
border-color: var(--tl-esim-accent);
color: var(--tl-esim-accent);
}
.tl-esim-stepper button:focus-visible {
border-color: var(--tl-esim-accent);
box-shadow: 0 0 0 3px #f35d4d1f;
color: var(--tl-esim-accent);
outline: none;
}
.tl-esim-segments {
display: grid;
gap: .42rem;
grid-template-columns: repeat(4, minmax(0, 1fr));
max-width: 100%;
min-width: 0;
}
.tl-esim-segments button {
background: #fff;
border: 1px solid #00000026;
border-radius: .35rem;
color: var(--tl-esim-text);
min-width: 0;
min-height: 3.7rem;
padding: .58rem .7rem;
text-align: left;
transition: border-color .25s, background-color .25s, color .25s;
}
.tl-esim-segments button strong,
.tl-esim-segments button small {
display: block;
}
.tl-esim-segments button strong {
font-size: .92rem;
line-height: 130%;
}
.tl-esim-segments button small {
color: var(--tl-esim-muted);
font-size: .76rem;
line-height: 140%;
margin-top: .21rem;
}
.tl-esim-segments button.is-active {
background: var(--tl-esim-accent);
border-color: var(--tl-esim-accent);
color: #fff;
}
.tl-esim-segments button.is-active small {
color: #fff;
}
.tl-esim-segments button:focus {
box-shadow: 0 0 0 3px #f35d4d1f;
outline: none;
}
.tl-esim-provider-picker {
display: flex;
flex-wrap: wrap;
gap: .28rem;
justify-content: center;
max-width: 100%;
min-width: 0;
}
.tl-esim-provider-picker label {
cursor: pointer;
display: inline-flex;
position: relative;
}
.tl-esim-provider-picker input {
opacity: 0;
pointer-events: none;
position: absolute;
}
.tl-esim-option-row {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: .42rem;
justify-content: center;
min-height: 2.55rem;
min-width: 0;
}
.tl-esim-unlimited-pill {
cursor: pointer;
display: inline-flex;
flex: none;
position: relative;
}
.tl-esim-unlimited-pill input {
opacity: 0;
pointer-events: none;
position: absolute;
}
.tl-esim-unlimited-pill span,
.tl-esim-calculator__field .tl-esim-provider-picker label > span {
align-items: center;
background: #fff;
border: 1px solid #00000026;
border-radius: .35rem;
color: var(--tl-esim-text);
display: inline-flex;
font-size: .83rem;
font-weight: 700;
line-height: 1;
margin: 0;
min-height: 2.18rem;
transition: border-color .25s, background-color .25s, color .25s;
white-space: nowrap;
}
.tl-esim-unlimited-pill span {
padding: .32rem .7rem;
}
.tl-esim-calculator__field .tl-esim-provider-picker label > span {
height: 2.18rem;
justify-content: center;
overflow: hidden;
padding: .22rem;
width: 2.18rem;
}
.tl-esim-calculator__field .tl-esim-provider-picker .tl-esim-provider-icon {
height: 1.5rem;
width: 1.5rem;
}
.tl-esim-calculator__field .tl-esim-provider-picker .tl-esim-provider-icon--drimsim {
height: 1.42rem;
width: 1.42rem;
}
.tl-esim-unlimited-pill input:checked + span,
.tl-esim-provider-picker input:checked + span {
background: var(--tl-esim-accent-soft);
border-color: #f35d4d66;
color: var(--tl-esim-accent);
}
.tl-esim-unlimited-pill input:focus + span,
.tl-esim-provider-picker input:focus + span {
box-shadow: 0 0 0 3px #f35d4d1f;
}
.tl-esim-calculator__summary {
align-items: center;
background: #2d2d2d;
border: 1px solid #2d2d2d;
border-radius: var(--tl-esim-radius);
color: #ffffffbf;
display: flex;
gap: .7rem;
justify-content: space-between;
margin-bottom: .83rem;
padding: .97rem 1.04rem;
}
.tl-esim-calculator__summary--soft {
background: var(--tl-esim-accent-soft);
border-color: #f35d4d66;
color: var(--tl-esim-muted);
}
.tl-esim-calculator__summary strong {
color: #fff;
flex: none;
font-size: 1.25rem;
line-height: 130%;
}
.tl-esim-calculator__summary--soft strong {
color: var(--tl-esim-text);
}
.tl-esim-calculator__summary span {
font-size: .97rem;
line-height: 150%;
text-align: right;
}
.tl-esim-calculator__results {
border: 1px solid var(--tl-esim-border);
border-radius: var(--tl-esim-radius);
contain: content;
min-height: 5.2rem;
overflow: hidden;
}
.tl-esim-calculator__loading {
background: #fff;
display: grid;
min-height: 15.6rem;
}
.tl-esim-calculator__loading-row {
align-items: center;
column-gap: 1rem;
display: grid;
grid-template-columns: minmax(7.4rem, 1fr) minmax(13rem, 1.55fr) minmax(6.6rem, .8fr) minmax(7rem, auto);
min-height: 5.2rem;
padding: .9rem 1.04rem;
}
.tl-esim-calculator__loading-row + .tl-esim-calculator__loading-row {
border-top: 1px solid var(--tl-esim-border);
}
.tl-esim-calculator__loading-line {
background: linear-gradient(90deg, #f0f0f3 0%, #fafafa 45%, #f0f0f3 90%);
background-size: 220% 100%;
border-radius: 999px;
display: block;
height: .82rem;
max-width: 100%;
animation: tl-esim-loading 1.1s linear infinite;
}
.tl-esim-calculator__loading-line--provider {
width: 7.6rem;
}
.tl-esim-calculator__loading-line--plan {
width: 12.8rem;
}
.tl-esim-calculator__loading-line--price {
width: 5.6rem;
}
.tl-esim-calculator__loading-line--button {
border-radius: .58rem;
height: 2.45rem;
width: 7rem;
}
@keyframes tl-esim-loading {
from {
background-position: 120% 0;
}
to {
background-position: -120% 0;
}
}
@media (prefers-reduced-motion: reduce) {
.tl-esim-calculator__loading-line {
animation: none;
}
}
.tl-esim-results__overflow {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows .35s cubic-bezier(.4, 0, .2, 1);
}
.tl-esim-calculator.is-expanded .tl-esim-results__overflow {
grid-template-rows: 1fr;
}
.tl-esim-results__overflow-inner {
min-height: 0;
overflow: hidden;
}
.tl-esim-results__overflow-inner > .tl-esim-result:first-child {
border-top: 1px solid var(--tl-esim-border);
}
.tl-esim-toggle {
align-items: center;
appearance: none;
background: none;
border: 1px solid transparent;
border-radius: 999px;
color: var(--tl-esim-muted);
cursor: pointer;
display: flex;
font-family: inherit;
font-size: .85rem;
font-weight: 600;
gap: .3rem;
justify-content: center;
letter-spacing: .01em;
margin: .75rem auto 0;
padding: .5rem 1.1rem;
transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.tl-esim-calculator [hidden] {
display: none !important;
}
.tl-esim-toggle:hover,
.tl-esim-toggle:focus-visible {
background: var(--tl-esim-accent-soft);
border-color: #f35d4d30;
color: var(--tl-esim-accent);
outline: none;
}
.tl-esim-toggle__chevron {
flex: none;
transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.tl-esim-calculator.is-expanded .tl-esim-toggle__chevron {
transform: rotate(180deg);
}
.tl-esim-result {
align-items: center;
background: #fff;
display: grid;
column-gap: 0;
row-gap: .83rem;
grid-template-columns: minmax(7.4rem, 1fr) minmax(13rem, 1.55fr) minmax(6.6rem, .8fr) minmax(7rem, auto);
min-height: 5.2rem;
padding: .9rem 1.04rem;
transition: background-color .25s ease;
}
.tl-esim-result + .tl-esim-result {
border-top: 1px solid var(--tl-esim-border);
}
.tl-esim-result--best {
background: #fffaf9;
}
.tl-esim-result__provider {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: .49rem;
min-width: 0;
padding-right: .9rem;
}
.tl-esim-result__provider strong {
color: var(--tl-esim-text);
font-size: 1.11rem;
line-height: 130%;
}
.tl-esim-result__badge {
font-size: .76rem;
}
.tl-esim-result__badges {
align-items: center;
display: inline-flex;
flex: none;
gap: .22rem;
}
.tl-esim-result__badge--top {
background: linear-gradient(135deg, #2d2d2d 0%, #4a4037 100%);
box-shadow: inset 0 1px 0 #ffffff1f;
color: #fff;
}
.tl-esim-result__badge--unlimited {
background: #e8f7f5;
color: #087a73;
}
.tl-esim-result__badge--reserve {
background: #edf4ff;
color: #2f66c8;
}
.tl-esim-result__badge--deal {
background: #eaf7ef;
color: #16834f;
}
.tl-esim-result__plan {
border-left: 1px solid var(--tl-esim-border);
min-width: 0;
padding-left: .9rem;
padding-right: .9rem;
}
.tl-esim-result__plan strong {
color: var(--tl-esim-text);
display: block;
font-size: 1.04rem;
line-height: 130%;
overflow-wrap: anywhere;
}
.tl-esim-result__detail > span,
.tl-esim-result__price span {
color: var(--tl-esim-muted);
display: block;
font-size: .83rem;
line-height: 150%;
margin-top: .21rem;
}
.tl-esim-result__detail {
align-items: center;
display: flex;
gap: .56rem;
justify-content: space-between;
margin-top: .21rem;
}
.tl-esim-result__detail > span {
margin-top: 0;
min-width: 0;
}
.tl-esim-payment-icons {
align-items: center;
display: flex;
flex: none;
gap: .32rem;
justify-content: flex-end;
margin-left: auto;
margin-top: 0;
}
.tl-esim-payment-icon {
align-items: center;
background: #fff;
border: 1px solid #0000001f;
border-radius: .28rem;
display: inline-flex;
height: 1.28rem;
justify-content: center;
padding: .12rem .24rem;
width: auto;
}
.tl-esim-payment-icon svg {
display: block;
height: 100%;
width: auto;
}
.tl-esim-payment-icon img {
display: block;
height: 100%;
object-fit: contain;
width: auto;
}
.tl-esim-result__price {
border-left: 1px solid var(--tl-esim-border);
padding-left: .9rem;
padding-right: .9rem;
text-align: right;
}
.tl-esim-result__price strong {
color: var(--tl-esim-text);
display: block;
font-size: 1.25rem;
line-height: 120%;
}
.tl-esim-calculator .tl-esim-result .tl-esim-open-button {
align-items: center;
background: #fff !important;
background-color: #fff !important;
background-image: none !important;
border: 1px solid #00000026 !important;
border-radius: .35rem;
box-shadow: none !important;
color: var(--tl-esim-text) !important;
display: inline-flex;
font-size: .83rem;
font-weight: 700;
justify-content: center;
letter-spacing: 0;
line-height: 120%;
min-height: 2.5rem;
padding: .72rem 1.25rem .66rem;
text-align: center;
text-decoration: none !important;
text-transform: none;
transition: none !important;
white-space: nowrap;
}
.tl-esim-calculator .tl-esim-result .tl-esim-open-button:focus,
.tl-esim-calculator .tl-esim-result .tl-esim-open-button:active {
background: var(--tl-esim-accent) !important;
background-color: var(--tl-esim-accent) !important;
background-image: none !important;
border-color: var(--tl-esim-accent) !important;
color: #fff !important;
outline: none;
}
@media (hover: hover) and (pointer: fine) {
.tl-esim-calculator .tl-esim-result .tl-esim-open-button:hover {
background: var(--tl-esim-accent) !important;
background-color: var(--tl-esim-accent) !important;
background-image: none !important;
border-color: var(--tl-esim-accent) !important;
color: #fff !important;
}
}
.tl-esim-calculator__empty {
align-items: center;
color: var(--tl-esim-muted);
display: flex;
flex-direction: column;
font-size: 1rem;
gap: .35rem;
justify-content: center;
line-height: 150%;
margin: 0;
min-height: 9.5rem;
padding: 1.45rem 1.04rem;
text-align: center;
}
.tl-esim-calculator__empty strong {
color: var(--tl-esim-text);
font-size: 1.2rem;
line-height: 130%;
}
.tl-esim-calculator__empty span:last-child {
max-width: 28rem;
}
.tl-esim-calculator__empty-icon {
align-items: center;
background: var(--tl-esim-accent-soft);
border-radius: 999px;
color: var(--tl-esim-accent);
display: inline-flex;
height: 3.1rem;
justify-content: center;
margin-bottom: .2rem;
width: 3.1rem;
}
.tl-esim-calculator__empty-icon svg {
fill: none;
height: 1.65rem;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 2;
width: 1.65rem;
}
.tl-esim-info {
align-items: center;
color: #c0c0c0;
cursor: help;
display: flex;
justify-content: flex-end;
margin: .45rem .2rem 0;
position: relative;
}
.tl-esim-info svg {
flex: none;
transition: color .2s ease;
}
.tl-esim-info:hover svg,
.tl-esim-info:focus svg {
color: var(--tl-esim-accent);
}
.tl-esim-info__tip {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: #ffffffeb;
border: 1px solid var(--tl-esim-border);
border-radius: var(--tl-esim-radius);
bottom: calc(100% + .45rem);
box-shadow: 0 4px 20px #0000000f;
color: var(--tl-esim-muted);
font-size: .78rem;
font-style: italic;
line-height: 155%;
max-width: min(22rem, calc(100vw - 2rem));
opacity: 0;
padding: .62rem .8rem;
pointer-events: none;
position: absolute;
right: 0;
transform: translateY(4px);
transition: opacity .2s ease, transform .2s ease;
width: max-content;
z-index: 10;
}
.tl-esim-info:hover .tl-esim-info__tip,
.tl-esim-info:focus .tl-esim-info__tip {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
} .tl-esim-calculator [data-tooltip] {
position: relative;
}
.tl-esim-calculator [data-tooltip]::after {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
background: #ffffffeb;
border: 1px solid var(--tl-esim-border);
border-radius: .45rem;
bottom: calc(100% + .5rem);
box-shadow: 0 4px 16px #0000000d;
color: var(--tl-esim-muted);
content: attr(data-tooltip);
font-size: .76rem;
font-style: normal;
font-weight: 600;
left: 50%;
letter-spacing: .01em;
line-height: 1;
opacity: 0;
padding: .35rem .55rem;
pointer-events: none;
position: absolute;
transform: translateX(-50%) translateY(3px);
transition: opacity .18s ease, transform .18s ease;
white-space: nowrap;
z-index: 20;
}
.tl-esim-calculator [data-tooltip]:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.tl-esim-calculator-notice {
background: var(--tl-esim-accent-soft);
border: 1px solid #f35d4d66;
border-radius: var(--tl-esim-radius);
color: var(--tl-esim-text);
margin: 1.39rem 0;
padding: 1.04rem;
}
@media (max-width: 991px) {
.tl-esim-calculator [data-tooltip]::after {
display: none;
}
.tl-esim-calculator__controls {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.tl-esim-calculator__field--daily {
grid-column: 1 / -1;
}
.tl-esim-calculator__field--days,
.tl-esim-calculator__field--total {
grid-column: span 3;
}
.tl-esim-calculator__field--options {
grid-column: 1 / -1;
}
.tl-esim-segments {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tl-esim-segments button {
min-height: 3.2rem;
padding: .52rem .62rem;
}
.tl-esim-result {
align-items: flex-start;
column-gap: .83rem;
grid-template-columns: 1fr minmax(7rem, auto);
}
.tl-esim-calculator__loading-row {
align-items: flex-start;
gap: .83rem;
grid-template-columns: 1fr minmax(5.6rem, auto);
}
.tl-esim-calculator__loading-line--provider {
grid-column: 1;
}
.tl-esim-calculator__loading-line--price {
grid-column: 2;
justify-self: end;
}
.tl-esim-calculator__loading-line--plan,
.tl-esim-calculator__loading-line--button {
grid-column: 1 / -1;
}
.tl-esim-calculator__loading-line--plan {
width: min(100%, 16rem);
}
.tl-esim-calculator__loading-line--button {
width: 100%;
}
.tl-esim-result__provider {
padding-right: 0;
}
.tl-esim-result__plan {
border-left: 0;
grid-column: 1 / -1;
grid-row: 2;
padding-left: 0;
padding-right: 0;
}
.tl-esim-result__price {
border-left: 0;
padding-left: 0;
padding-right: 0;
}
.tl-esim-result .tl-esim-open-button {
grid-column: 1 / -1;
width: 100%;
}
}
@media (max-width: 767px) {
.tl-esim-calculator {
padding: 0;
width: 100%;
}
.tl-esim-calculator__country-select select {
font-size: .92rem;
}
.tl-esim-info__tip {
max-width: calc(100vw - 2rem);
width: min(22rem, calc(100vw - 2rem));
}
.tl-esim-calculator__summary {
align-items: flex-start;
flex-direction: column;
}
.tl-esim-calculator__country-panel {
align-items: center;
gap: .52rem;
justify-content: flex-start;
min-height: 4.55rem;
padding: .8rem .9rem;
}
.tl-esim-calculator__country-flag-bg {
bottom: -.75rem;
font-size: 5.7rem !important;
right: .6rem;
}
.tl-esim-calculator__country-main {
align-items: flex-start;
flex-direction: column;
gap: .6rem;
}
.tl-esim-calculator__country-copy span {
font-size: .76rem;
}
.tl-esim-calculator__country-copy strong {
font-size: 1.45rem;
}
.tl-esim-calculator__country-note {
font-size: .76rem !important;
min-height: 1.75rem;
padding: .38rem .62rem;
}
.tl-esim-calculator__summary span {
text-align: left;
}
.tl-esim-calculator__country-select {
align-items: flex-start;
grid-template-columns: 1fr;
}
.tl-esim-stepper {
gap: .22rem;
grid-template-columns: 2.05rem minmax(0, 1fr) 2.05rem;
}
}
@media (max-width: 479px) {
.tl-esim-calculator__controls {
gap: .5rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tl-esim-calculator__field--daily,
.tl-esim-calculator__field--options {
grid-column: 1 / -1;
}
.tl-esim-calculator__field--days,
.tl-esim-calculator__field--total {
grid-column: span 1;
}
.tl-esim-calculator__field {
min-height: 0;
padding: .52rem;
}
.tl-esim-calculator__field > span {
font-size: .76rem;
margin-bottom: .32rem;
}
.tl-esim-calculator__field input {
font-size: .9rem;
height: 2.35rem;
padding: .48rem .45rem;
}
.tl-esim-stepper {
grid-template-columns: 1.8rem minmax(0, 1fr) 1.8rem;
}
.tl-esim-stepper button {
height: 2.35rem;
}
.tl-esim-segments {
gap: .35rem;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.tl-esim-segments button {
min-height: 0;
padding: .48rem .52rem;
}
.tl-esim-segments button strong {
font-size: .84rem;
}
.tl-esim-segments button small {
font-size: .76rem;
line-height: 135%;
}
.tl-esim-option-row {
flex-wrap: wrap;
}
}