@charset "UTF-8";
.footer {
  position: sticky;
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  bottom: 0px;
  background-color: #f5f5f5;
}
.footer .container {
  padding-right: 15px;
  padding-left: 15px;
}

.btn-dark:hover {
  background-color: var(--bs-btn-hover-border-color) !important;
}

.go-back {
  color: #000;
}

.page-title {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 30px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.38px;
  text-align: center;
  color: #000;
}

.nav-item {
  cursor: pointer;
}

a {
  text-decoration: unset;
}

.errorMessage {
  font-size: 13px;
  padding-left: 5px;
  color: #ff7777;
}

.pe-md-5 {
  padding-right: 3rem;
  /* 默认 LTR (从左到右) 情况下的 padding */
}

:dir(rtl) .pe-md-5 {
  padding-left: 3rem;
  /* RTL (从右到左) 的 padding */
  padding-right: unset !important;
  /* 去掉原来的右边距 */
}

.text-md-start {
  text-align: left !important;
}

:dir(rtl) .text-md-start {
  text-align: right !important;
}

.esim-ios-icon {
  margin-right: 12px !important;
  margin-left: 0px !important;
}

:dir(rtl) .esim-ios-icon {
  margin-left: 12px !important;
  margin-right: 0px !important;
}

.esim-google-icon {
  margin-right: 12px !important;
  margin-left: 0px !important;
}

:dir(rtl) .esim-google-icon {
  margin-left: 12px !important;
  margin-right: 0px !important;
}

.esim-samsung-icon {
  margin-right: 12px !important;
  margin-left: 0px !important;
}

:dir(rtl) .esim-samsung-icon {
  margin-left: 12px !important;
  margin-right: 0px !important;
}

:dir(rtl) .text-md-start {
  text-align: right !important;
}

.text-start {
  text-align: left !important;
}

:dir(rtl) .text-start {
  text-align: right !important;
}

.dropdown-item {
  text-align: justify;
}
.dropdown-item :dir(rtl) .text-start {
  text-align: justify;
}

/* RTL 情况下的样式 */
:dir(rtl) .modal-header .btn-close {
  margin: 0;
}

.toast-error {
  background: #ff7777;
}
.toast-error .toast-header {
  background: #f6a4a4;
}

.toast-success {
  background: #b1d1fd;
}
.toast-success .toast-header {
  background: #ebf3fe;
}

.text-right {
  text-align: right;
}
[dir=rtl] .text-right {
  text-align: left;
}

code {
  font-size: 80%;
}

.speed-description {
  overflow: hidden;
  transition: max-height 0.5s ease-out;
  max-height: 0;
  color: #000;
}

.speed-description.ng-show {
  max-height: 500px;
  /* 根據內容調整此值 */
}

.device-compatibility-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  font-size: 14px;
  color: #6b7280; /* 中性灰 */
}

.device-compatibility-hint i {
  font-size: 14px;
  opacity: 0.8;
}

.device-check-link {
  margin-left: 4px;
  color: #6b7280; /* 主色系或 link 色 */
}

.device-check-link:hover {
  text-decoration: none;
}

.product-header {
  /* ========== Layout wrapper ========== */
  /* 主特色 - 卡片堆疊 */
  /* RWD: 小於 768 時 tabs 變成 2~3 顆一行更穩 */
}
.product-header .prodcutDescriptionBlock {
  padding: 15px 15px;
  border-radius: 38px;
  background-color: #f5f5f5;
  display: inline-block;
  margin-bottom: 20px;
  text-align: left;
}
.product-header .prodcutDescriptionBlock .selectBtnActiveProduct {
  border-radius: 30px;
  border: solid 2px #28c891;
  background-color: #fff;
  font-size: 14px;
  font-weight: bold;
  font-family: "Outfit-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  padding: 10px 30px;
}
.product-header .prodcutDescriptionBlock .selectBtnDeactiveProduct {
  border-radius: 30px;
  background-color: none;
  border: solid 2px #f4f4f4;
  font-size: 14px;
  padding: 10px 30px;
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: normal;
}
@media (max-width: 576px) {
  .product-header .prodcutDescriptionBlock {
    padding: 15px;
    border-radius: 38px;
    background-color: #f5f5f5;
    display: table;
    margin: 0 auto 20px;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* 如果有需要垂直排列內容 */
  }
}
.product-header .product-tabs {
  width: 100%;
}
.product-header .product-tabs-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap; /* 手機可換行 */
  margin-bottom: 12px;
}
.product-header .product-tab {
  appearance: none;
  border: 1px solid #ddd;
  background: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.product-header .product-tab.is-active {
  border-color: #000;
  background: #000;
  color: #fff;
}
.product-header .product-panel {
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}
.product-header .panel-section {
  /* ng-show 會 display none；顯示時保持一致的排版 */
}
.product-header .panel-h2 {
  font-size: 16px;
  margin: 0 0 12px;
  font-weight: 700;
}
.product-header .info-stack,
.product-header .kv-stack {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.product-header .info-card,
.product-header .kv-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  background: #fff;
}
.product-header .info-icon,
.product-header .kv-icon {
  width: 34px;
  flex: 0 0 34px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: 2px;
  font-size: 16px;
}
.product-header .info-body,
.product-header .kv-body {
  min-width: 0; /* 避免長字串撐爆 */
}
.product-header .info-title,
.product-header .kv-title {
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
}
.product-header .info-text,
.product-header .kv-text {
  font-size: 14px;
  margin: 0;
  line-height: 1.45;
  word-break: break-word;
}
.product-header .feature-price {
  font-weight: 800;
}
.product-header .info-strong {
  font-weight: 800;
}
.product-header .kv-link {
  font-size: 14px;
  font-weight: 700;
  margin-top: 6px;
}
.product-header .kv-muted {
  color: #666;
}
.product-header .kv-info-btn {
  border: 0;
  background: transparent;
  padding: 0;
  margin-left: 6px;
  cursor: pointer;
  color: inherit;
}
.product-header .product-cta {
  margin-top: 12px;
  display: flex;
  justify-content: center;
}
@media (max-width: 768px) {
  .product-header .product-tab {
    flex: 1 1 calc(50% - 8px);
    text-align: center;
  }
}

.rate-plan {
  border-radius: 65px;
}
.rate-plan .prodcutDescriptionBlock2 {
  border-radius: 38px;
  display: inline-block;
  text-align: left;
}
.rate-plan .prodcutDescriptionBlock2 .selectBtnActive {
  border-radius: 30px;
  background-color: #f4f4f4;
  font-size: 18px;
  font-weight: bold;
  font-family: "Outfit-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  padding: 10px 20px;
}
.rate-plan .prodcutDescriptionBlock2 .selectBtnDeactive {
  border-radius: 30px;
  background-color: none;
  border: solid 2px #e9e9e9;
  font-size: 14px;
  padding: 10px 20px;
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: normal;
}
.rate-plan .type-subtitle {
  font-family: "Outfit-Light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  color: #000;
}
.rate-plan .list-group-radio .list-group-item {
  cursor: pointer;
  border: solid 2px #eaebeb;
  border-radius: 24px;
  height: 210px;
  background-color: white;
}
.rate-plan .list-group-radio .list-group-item2 {
  cursor: pointer;
  border: solid 2px #eaebeb;
  border-radius: 24px;
  height: 210px;
  background-color: white;
}
.rate-plan .list-group-radio .form-check-input {
  z-index: 2;
  border: solid 4px #eaebeb;
  margin-top: 20px;
  margin-left: 20px;
  height: 30px;
  width: 30px;
}
.rate-plan .list-group-radio :dir(rtl) .form-check-input {
  z-index: 2;
  border: solid 4px #eaebeb;
  margin-top: 30px;
  margin-left: 20px;
  height: 30px;
  width: 30px;
}
.rate-plan .list-group-radio .form-check-input2 {
  z-index: 2;
  border: solid 4px #eaebeb;
  margin-top: 30px;
  margin-left: 20px;
  height: 30px;
  width: 30px;
}
.rate-plan .list-group-radio .package {
  position: relative;
}
.rate-plan .list-group-radio .package .package-name {
  position: absolute;
  font-size: 20px;
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  top: 60px;
  left: 20px;
}
[dir=rtl] .rate-plan .list-group-radio .package .package-name {
  left: 20px;
  left: unset;
}
.rate-plan .list-group-radio .package .package-name2 {
  position: absolute;
  font-size: 20px;
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  top: 74px;
  left: 20px;
}
[dir=rtl] .rate-plan .list-group-radio .package .package-name2 {
  right: 20px;
  left: unset;
}
.rate-plan .list-group-radio .package .package-day {
  position: absolute;
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  bottom: 53px;
  left: 20px;
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.18px;
  color: #595959;
}
.rate-plan .list-group-radio .package .package-day2 {
  position: absolute;
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  bottom: 53px;
  left: 20px;
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.18px;
  color: #595959;
}
.rate-plan .list-group-radio .package .package-dataPlanType {
  position: absolute;
  font-family: "Outfit-Light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  top: 110px;
  left: 20px;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.18px;
  color: #595959;
}
[dir=rtl] .rate-plan .list-group-radio .package .package-dataPlanType {
  left: 15px;
  right: 20px;
  border-radius: 0 20px 20px 0;
}
.rate-plan .list-group-radio .package .package-dataPlanDailyPass {
  position: absolute;
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  top: 25px;
  background-image: linear-gradient(90deg, #28c891, #3c8dfa);
  padding: 6px 13px 5px 20px;
  right: 0px;
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.18px;
  color: white;
  border-radius: 20px 0 0 20px;
}
[dir=rtl] .rate-plan .list-group-radio .package .package-dataPlanDailyPass {
  left: 0px;
  right: auto;
  border-radius: 0 20px 20px 0;
}
.rate-plan .list-group-radio .package .package-dataPlanDay {
  position: absolute;
  font-family: "Outfit-Light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  top: 58px;
  right: 13px;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.18px;
  color: #000;
}
[dir=rtl] .rate-plan .list-group-radio .package .package-dataPlanDay {
  left: 13px;
  right: unset;
}
.rate-plan .list-group-radio .package .package-price {
  position: absolute;
  left: 20px;
  bottom: 25px;
  font-size: 15px;
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.rate-plan .list-group-radio .package .package-price2 {
  position: absolute;
  left: 20px;
  bottom: 25px;
  font-size: 15px;
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.rate-plan .list-group-radio .package .package-special-price {
  position: absolute;
  left: 20px;
  bottom: 12px;
  font-size: 12px;
  color: #3c8dfa;
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.rate-plan .list-group-radio .package .package-special-price1 {
  position: absolute;
  left: 20px;
  bottom: 12px;
  font-size: 12px;
  color: #3c8dfa;
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.rate-plan .list-group-radio .form-check-input:checked + .list-group-item {
  border: solid 2px #2eb5b1;
  border-radius: 24px;
}
.rate-plan .list-group-radio .form-check-input[disabled] + .list-group-item,
.rate-plan .list-group-radio .form-check-input:disabled + .list-group-item {
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}
.rate-plan .list-group-radio .form-check-input:checked[type=radio] {
  background-color: transparent;
  border: unset;
  background-image: url("../img/icon/checkbox/v_selected_green.svg");
}
.rate-plan .list-group-radio .form-check-input:focus {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: unset;
}
.rate-plan .list-group-radio .form-check-input:checked + .form-checked-content {
  opacity: 0.5;
}
.rate-plan .list-group-radio .form-check-input-placeholder {
  border-style: dashed;
}
.rate-plan .list-group-radio [contenteditable]:focus {
  outline: 0;
}
.rate-plan .list-group-radio .list-group-item-check {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}
.rate-plan .list-group-radio .list-group-checkable .list-group-item {
  cursor: pointer;
}
.rate-plan .list-group-radio .list-group-item-check:hover + .list-group-item {
  background-color: var(--bs-light);
}
.rate-plan .list-group-radio .list-group-item-check:checked + .list-group-item {
  color: #fff;
  background-color: var(--bs-blue);
}
.rate-plan .list-group-radio .list-group-item-check[disabled] + .list-group-item,
.rate-plan .list-group-radio .list-group-item-check:disabled + .list-group-item {
  pointer-events: none;
  filter: none;
  opacity: 0.5;
}
.rate-plan .list-group-radio .list-group-item:hover,
.rate-plan .list-group-radio .list-group-item:focus {
  background-color: var(--bs-light);
}

@media (max-width: 576px) {
  .rate-plan .list-group-radio .list-group-item {
    cursor: pointer;
    border: solid 2px #eaebeb;
    border-radius: 24px;
    height: 115px;
  }
  .rate-plan .list-group-radio .list-group-item2 {
    cursor: pointer;
    border: solid 2px #eaebeb;
    border-radius: 24px;
    height: 134px;
  }
  .rate-plan .list-group-radio .form-check-input {
    z-index: 2;
    border: solid 4px #eaebeb;
    margin-top: 42px;
    margin-left: 22px;
    height: 30px;
    width: 30px;
  }
  .rate-plan .list-group-radio .form-check-input2 {
    z-index: 2;
    border: solid 4px #eaebeb;
    margin-top: 53px;
    margin-left: 22px;
    height: 20px;
    width: 20px;
  }
  .rate-plan .list-group-radio .package {
    position: relative;
  }
  .rate-plan .list-group-radio .package .package-name {
    font-size: 20px;
    font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 50px;
    top: 10px;
    left: 72px;
  }
  [dir=rtl] .rate-plan .list-group-radio .package .package-name {
    right: 72px;
    left: unset;
  }
  .rate-plan .list-group-radio .package .package-name2 {
    font-size: 20px;
    font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    top: 10px;
    left: 72px;
  }
  [dir=rtl] .rate-plan .list-group-radio .package .package-name2 {
    right: 72px;
    left: unset;
  }
  .rate-plan .list-group-radio .package .package-day {
    position: absolute;
    font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    bottom: 25px;
    left: 72px;
    font-size: 14px;
    letter-spacing: 0.18px;
    color: #595959;
  }
  [dir=rtl] .rate-plan .list-group-radio .package .package-day {
    left: unset;
    right: 72px;
  }
  .rate-plan .list-group-radio .package .package-day2 {
    position: absolute;
    font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    bottom: 15px;
    left: 72px;
    font-size: 14px;
    letter-spacing: 0.18px;
    color: #595959;
  }
  [dir=rtl] .rate-plan .list-group-radio .package .package-day2 {
    right: 72px;
    left: unset;
  }
  .rate-plan .list-group-radio .package .package-dataPlanType {
    position: absolute;
    font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    top: 40px;
    left: 72px;
    font-size: 12px;
    letter-spacing: 0.18px;
    max-width: 70%;
    color: #595959;
  }
  [dir=rtl] .rate-plan .list-group-radio .package .package-dataPlanType {
    right: 72px;
    left: unset;
  }
  .rate-plan .list-group-radio .package .package-dataPlanDay {
    position: absolute;
    font-family: "Outfit-Light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    top: 25px;
    right: 25px;
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.18px;
    color: #000;
  }
  [dir=rtl] .rate-plan .list-group-radio .package .package-dataPlanDay {
    left: 25px;
  }
  .rate-plan .list-group-radio .package .package-dataPlanDailyPass {
    position: absolute;
    font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-image: linear-gradient(90deg, #28c891, #3c8dfa);
    padding: 5px 14px 4px;
    font-size: 12px;
    top: 0px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.18px;
    right: 20px;
    color: white;
    border-radius: 0 0 12px 12px;
  }
  [dir=rtl] .rate-plan .list-group-radio .package .package-dataPlanDailyPass {
    border-radius: 0 0 12px 12px;
    left: 20px;
  }
  .rate-plan .list-group-radio .package .package-price {
    position: absolute;
    right: 22px;
    top: 42px;
    left: unset;
    font-size: 15px;
    font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
  [dir=rtl] .rate-plan .list-group-radio .package .package-price {
    left: 22px;
    right: unset;
  }
  .rate-plan .list-group-radio .package .package-price2 {
    position: absolute;
    right: 22px;
    top: 92px;
    left: unset;
    font-size: 15px;
    font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
  [dir=rtl] .rate-plan .list-group-radio .package .package-price2 {
    left: 22px;
    right: unset;
  }
  .rate-plan .list-group-radio .package .package-special-price {
    position: absolute;
    right: 22px;
    top: 59px;
    left: unset;
    font-size: 12px;
    font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
  .rate-plan .list-group-radio .package .package-special-price1 {
    position: absolute;
    right: 22px;
    top: 79px;
    left: unset;
    font-size: 12px;
    font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
}
.form-check-input:checked {
  background-color: #28c790;
}

.esim-progress .progress {
  width: 150px;
  height: 150px;
  background: none;
  position: relative;
}
.esim-progress .progress::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 6px solid #eee;
  position: absolute;
  top: 0;
  left: 0;
}
.esim-progress .progress > span {
  width: 50%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index: 1;
}
.esim-progress .progress .progress-left {
  left: 0;
}
.esim-progress .progress .progress-bar {
  width: 100%;
  height: 100%;
  background: none;
  border-width: 6px;
  border-style: solid;
  position: absolute;
  top: 0;
}
.esim-progress .progress .progress-left .progress-bar {
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.esim-progress .progress .progress-right {
  right: 0;
}
.esim-progress .progress .progress-right .progress-bar {
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
}
.esim-progress .progress .progress-value {
  position: absolute;
  top: 0;
  left: 0;
}

.fix-ios-tabs-footer {
  padding-bottom: 0;
  padding-bottom: calc(0px + (env(safe-area-inset-bottom))) !important;
  padding-bottom: calc(0px + (constant(safe-area-inset-bottom))) !important;
}

#fc_frame {
  bottom: 15px;
  bottom: calc(15px + (env(safe-area-inset-bottom))) !important;
  bottom: calc(15px + (constant(safe-area-inset-bottom))) !important;
}

@media (max-width: 768px) {
  #fc_frame {
    bottom: 80px;
    bottom: calc(80px + (env(safe-area-inset-bottom))) !important;
    bottom: calc(80px + (constant(safe-area-inset-bottom))) !important;
  }
}
@font-face {
  font-family: "Outfit-Medium";
  src: url("Outfit-Medium.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Outfit-Regular";
  src: url("Outfit-Regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Outfit-SemiBold";
  src: url("Outfit-SemiBold.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Outfit-Bold";
  src: url("Outfit-Bold.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Outfit-ExtraLight";
  src: url("Outfit-ExtraLight.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Outfit-Light";
  src: url("Outfit-Light.ttf") format("truetype");
  font-display: swap;
}
a {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

p {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

body {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

button {
  transition: background-color 0.2s ease, color 0.2s ease;
}

.news_marquee {
  animation: marquee 12s linear infinite;
  color: white;
}
@media (max-width: 768px) {
  .news_marquee {
    animation: marquee 7s linear infinite;
    color: white;
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.slash-box {
  position: relative;
  display: inline-block;
  overflow: hidden;
}
.slash-box > * {
  position: relative;
}
.slash-box::before {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: -350px;
  left: 0;
  content: " ";
  background-image: linear-gradient(90deg, transparent 5px, #dee2e6 5px);
  background-size: 6px 100%;
  background-repeat: repeat;
  transform: rotate(30deg) scale(2);
}

.upgrade-esim .title {
  font-size: 22px;
}
.upgrade-esim .description {
  font-size: 15px;
}
.upgrade-esim .background-set {
  padding: 16px;
}
.upgrade-esim .btn {
  padding: 10px;
  border-radius: 30px;
}
@media (max-width: 768px) {
  .upgrade-esim .title {
    font-size: 20px;
  }
  .upgrade-esim .description {
    font-size: 12px;
  }
  .upgrade-esim .background-set {
    padding: 8px 20px;
  }
  .upgrade-esim .btn {
    padding: 5px 25px;
    border-radius: 12px;
  }
}

.upgrade-esim2 {
  position: relative;
}
.upgrade-esim2 .title {
  font-size: 16px;
  color: white;
  letter-spacing: 0.3px;
  line-height: 22px;
  padding: 15px 15px 5px 15px;
}
.upgrade-esim2 .description {
  font-size: 12px;
  word-break: break-word;
  color: white;
  padding: 0 15px 0 15px;
  letter-spacing: 0.19px;
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.upgrade-esim2 .background-set {
  min-height: 208px;
  position: absolute;
}
.upgrade-esim2 .btn {
  padding: 10px;
  border-radius: 30px;
  height: 55px;
}
.upgrade-esim2 .check-out-btn {
  bottom: 20px;
}
.upgrade-esim2 .bottom-block {
  text-align: center;
  position: absolute;
  bottom: 15px;
  width: 100%;
}
.upgrade-esim2 .bottom-block2 {
  display: none;
}
.upgrade-esim2 .star-5 {
  position: absolute;
  bottom: 55px;
  width: 100%;
}
.upgrade-esim2 .package-euro-3 {
  display: none;
}
@media (max-width: 576px) {
  .upgrade-esim2 .title {
    font-size: 21px;
  }
  .upgrade-esim2 .description {
    font-size: 12px;
  }
  .upgrade-esim2 .background-set {
    min-height: unset;
    position: absolute;
    margin-bottom: 10px;
  }
  .upgrade-esim2 .star-5 {
    display: none;
  }
  .upgrade-esim2 .package-euro-3 {
    display: block;
  }
  .upgrade-esim2 .bottom-block {
    display: none;
  }
  .upgrade-esim2 .bottom-block2 {
    display: block;
    text-align: unset;
    position: unset;
    bottom: unset;
    padding: 10px 15px 15px 15px;
  }
  .upgrade-esim2 .btn {
    border-radius: 12px;
    height: 44px;
  }
}

.howword-block .card {
  padding: 30px;
  border-radius: 20px;
  border: solid 2px #dcddde;
  background-color: #fff;
  box-shadow: unset;
  min-height: 200px;
}
.howword-block .card .card-text {
  font-size: 14px !important;
}

.morechoose {
  max-width: 668px;
  background-image: linear-gradient(to top, #effbfd, #daf6f9);
  border-radius: 60px;
  margin: 55px auto;
  border: solid 2px #e0f8fa;
}
.morechoose .header {
  padding: 70px 84px 0 84px;
  background-image: url("/assets/img/picture/wave_1.svg");
  background-size: cover;
  border-radius: 60px 60px 0 0;
  text-align: left;
}
.morechoose .content {
  margin-top: 10px;
  padding: 0px 84px 60px 84px;
}

.howtoworkblock {
  background: #f4f4f4;
  padding: 30px 70px 50px 70px;
  margin-top: 55px;
}
.howtoworkblock .card-title {
  font-size: 21px;
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.howtoworkblock .card-text {
  font-size: 14px;
  font-family: "Outfit-Light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

.chatBlock {
  max-width: 668px;
  margin: 0 auto;
  padding: 100px 20px;
  text-align: left;
}

@media (max-width: 768px) {
  .chatBlock {
    max-width: 668px;
    margin: 0 auto;
    padding: 50px 0px 50px 0px;
    text-align: center;
  }
  .morechoose {
    margin: 15px 15px 30px 15px;
  }
  .morechoose .header {
    padding: 50px 15px 0 15px;
    background-image: url("/assets/img/picture/wave_1.svg");
    background-size: cover;
    border-radius: 60px 60px 0 0;
    text-align: center;
  }
  .morechoose .content {
    padding: 0px 15px 60px 15px;
  }
  .howtoworkblock {
    margin-top: 30px;
    background: #f4f4f4;
    padding: 20px 0px 50px 0px;
    margin-top: 55px;
  }
  .howword-block .card {
    padding: 15px;
    border-radius: 20px;
    border: solid 2px #dcddde;
    background-color: #fff;
    box-shadow: unset;
    min-height: 200px;
  }
  .howword-block .card .card-text {
    font-size: 14px !important;
  }
}
.esim-icon-search {
  height: 17px;
  width: 17px;
  content: url(../img/icon/basic/search.svg);
}

.esim-icon-search {
  height: 17px;
  width: 17px;
  content: url(../img/icon/basic/search.svg);
}

.esim-tabs-shop-on {
  height: 27px;
  width: 27px;
  content: url(../img/icon/tabbar/shop_black_selected.svg);
}

.esim-tabs-shop-off {
  height: 27px;
  width: 27px;
  content: url(../img/icon/tabbar/shop_black.svg);
}

.esim-tabs-cart-on {
  height: 27px;
  width: 27px;
  content: url(../img/icon/tabbar/cart_black_selected.svg);
}

.esim-tabs-cart-off {
  height: 27px;
  width: 27px;
  content: url(../img/icon/tabbar/cart_black.svg);
}

.esim-tabs-guide-on {
  height: 27px;
  width: 32px;
  content: url(../img/icon/tabbar/guide_black_selected.svg);
}

.esim-tabs-guide-off {
  height: 27px;
  width: 32px;
  content: url(../img/icon/tabbar/guide_black.svg);
}

.esim-tabs-myesim-on {
  height: 27px;
  width: 27px;
  content: url(../img/icon/tabbar/myesim_black_selected.svg);
}

.esim-tabs-myesim-off {
  height: 27px;
  width: 27px;
  content: url(../img/icon/tabbar/myesim_black.svg);
}

.esim-tabs-account-on {
  height: 27px;
  width: 27px;
  content: url(../img/icon/tabbar/account_black_selected.svg);
}

.esim-tabs-account-off {
  height: 27px;
  width: 27px;
  content: url(../img/icon/tabbar/account_black.svg);
}

.esim-logo-h {
  height: 17px;
  width: 17px;
  content: url(../img/logo/esim_h.svg);
}

.esim-logo-h30 {
  height: 30px;
  width: 150px;
  content: url(../img/logo/esim_h30.svg);
}

.esim-logo-h46 {
  height: 46px;
  width: 230px;
  content: url(../img/logo/esim_h46.svg);
}

.esim-logo-v {
  height: 17px;
  width: 17px;
  content: url(../img/logo/esim_v.svg);
}

.esim-logo-words {
  height: 17px;
  width: 17px;
  content: url(../img/logo/esim_words.svg);
}

.esim-logo {
  height: 17px;
  width: 17px;
  content: url(../img/logo/esim.svg);
}

.esim-forgoet-password {
  height: 120px;
  width: 150px;
  content: url(../img/picture/forgotpassword/send.svg);
}

.esim-forgoet-password-send {
  height: 130px;
  width: 100px;
  content: url(../img/picture/forgotpassword/fgp.svg);
}

.how-esim4travel-work-1 {
  height: 344px;
  width: 162px;
  content: url(../img/picture/landingpage/howitworks-1.jpg);
}

.how-esim4travel-work-2 {
  height: 344px;
  width: 162px;
  content: url(../img/picture/landingpage/howitworks-2.jpg);
}

.how-esim4travel-work-3 {
  height: 344px;
  width: 162px;
  content: url(../img/picture/landingpage/howitworks-3.jpg);
}

.whyus-1 {
  height: 250px;
  width: 243px;
  content: url(../img/picture/landingpage/whyus_1.svg);
}

.whyus-2 {
  height: 250px;
  width: 243px;
  content: url(../img/picture/landingpage/whyus_2.svg);
}

.whyus-3 {
  height: 250px;
  width: 243px;
  content: url(../img/picture/landingpage/whyus_3.svg);
}

.share-banner {
  height: 280px;
  width: 400px;
  content: url(../img/picture/landingpage/share_banner_w400.svg);
}

.empty-cart-icon {
  height: 350px;
  width: 424px;
  content: url(../img/picture/cart/empty_h350.svg);
}

@media (max-width: 768px) {
  .empty-cart-icon {
    height: 250px;
    width: 300px;
    content: url(../img/picture/cart/empty_h248.svg);
  }
}
.empty-esim-icon {
  height: 350px;
  width: 424px;
  content: url(../img/picture/myesim/empty_h350.svg);
}

.empty-esim-package-changed {
  height: 240px;
  width: 230px;
  content: url(../img/picture/myesim/package_changed.svg);
}

.empty-esim-delete-icon {
  height: 350px;
  width: 424px;
  content: url(../img/picture/myesim/deleted_card_h184.svg);
}

@media (max-width: 768px) {
  .empty-esim-icon {
    height: 250px;
    width: 300px;
    content: url(../img/picture/myesim/empty_h241.svg);
  }
}
.esim-duplicate-icon {
  height: 17px;
  width: 14px;
  content: url(../img/icon/basic/duplicate.svg);
}

.esim-android-icon {
  height: 20px;
  width: 35px;
  content: url(../img/icon/button/mobile/android.svg);
}

.esim-ios-icon {
  height: 36px;
  width: 30px;
  content: url(../img/icon/button/mobile/ios.svg);
}

.esim-google-icon {
  height: 28px;
  width: 85px;
  content: url(../img/icon/button/mobile/google.svg);
}

.esim-samsung-icon {
  height: 15px;
  width: 98px;
  content: url(../img/icon/button/mobile/samsung.svg);
}

.esim-icon-voice_sms {
  height: 26px;
  width: 23px;
  content: url(../img/icon/basic/voice_sms.svg);
}

.esim-icon-topup {
  height: 22px;
  width: 26px;
  content: url(../img/icon/basic/topup.svg);
}

.esim-icon-hotspot {
  height: 26px;
  width: 23px;
  content: url(../img/icon/basic/hotspot.svg);
}

.esim-icon-ekyc {
  height: 26px;
  width: 20px;
  content: url(../img/icon/basic/ekyc.svg);
}

.esim-icon-description {
  height: 29px;
  width: 22px;
  content: url(../img/icon/basic/description.svg);
}

.esim-icon-more_coverage {
  height: 37px;
  width: 38px;
  content: url(../img/icon/basic/more_coverage.svg);
}

.esim-icon-more_coverage_black {
  height: 37px;
  width: 38px;
  content: url(../img/icon/basic/more_coverage_black.svg);
}

.esim-icon-iccid_nb {
  height: 15px;
  width: 15px;
  content: url(../img/icon/basic/iccid_nb.svg);
}

.esim-icon-network {
  height: 22px;
  width: 22px;
  content: url(../img/icon/basic/network.svg);
}

.esim-icon-coverage {
  height: 23px;
  width: 22px;
  content: url(../img/icon/basic/coverage.svg);
}

.esim-icon-activationpolicy {
  height: 26px;
  width: 25px;
  content: url(../img/icon/basic/activationpolicy.svg);
}

.esim-icon-info {
  height: 25px;
  width: 25px;
  content: url(../img/icon/basic/info.svg);
}

.esim-icon-message {
  height: 60px;
  width: 60px;
  content: url(../img/icon/basic/message.svg);
}

.esim-icon-notice {
  height: 19px;
  width: 24px;
  content: url(../img/icon/notice_s_black.svg);
}

.payment-visa {
  height: 40px;
  content: url(../img/payment/visa.png);
}

.payment-apple {
  height: 40px;
  content: url(../img/payment/apple.svg);
}

.payment-master {
  height: 40px;
  content: url(../img/payment/master-card.png);
}

.payment-unionpay {
  height: 40px;
  content: url(../img/payment/unionpay.svg);
  padding: 9px 24px 8px 0px;
}

.payment-amex {
  height: 40px;
  content: url(../img/payment/amex.png);
}

.payment-discover {
  height: 40px;
  content: url(../img/payment/discover.png);
}

.what-esim {
  height: 250px;
  width: auto; /* 根據需求設置寬度 */
  display: block; /* 可選，讓圖片在行內元素中顯示正常 */
  margin: 0 auto; /* 可選，讓圖片居中 */
}

.icon-arrow-blue {
  content: url(../img/icon/basic/arrow_blue.svg);
}

.redeem-gift {
  height: 240px;
  width: 300px;
  content: url(../img/picture/gift_w300.svg);
}

.redeem-success {
  height: 240px;
  width: 300px;
  content: url(../img/picture/success.svg);
}

.social-fb {
  height: 30px;
  width: 30px;
  content: url(../img/icon/social/fb_colorful.svg);
}

.social-lk {
  height: 30px;
  width: 30px;
  content: url(../img/icon/social/lk_colorful.svg);
}

.social-ttk {
  height: 30px;
  width: 30px;
  content: url(../img/icon/social/ttk_colorful.svg);
}

.social-yt {
  height: 30px;
  width: 30px;
  content: url(../img/icon/social/yt_colorful.svg);
}

.social-ig {
  height: 30px;
  width: 30px;
  content: url(../img/icon/social/ig_colorful.svg);
}

.social-x {
  height: 30px;
  width: 30px;
  content: url(../img/icon/social/x_colorful.svg);
}

.social-tt {
  height: 30px;
  width: 30px;
  content: url(../img/icon/social/tt.svg);
}

.esim-icon {
  height: 24px;
  width: 22px;
  content: url(../img/icon/basic/esim_icon.svg);
}

.esim-owner-icon {
  height: 24px;
  width: 22px;
  content: url(../img/icon/basic/owner.svg);
}

.esim-starttime-icon {
  height: 24px;
  width: 24px;
  content: url(../img/icon/basic/starttime.svg);
}

.esim-starttime-icon {
  height: 24px;
  width: 24px;
  content: url(../img/icon/basic/starttime.svg);
}

.esim-thewaytochoose-m-150 {
  height: 64px;
  width: 70px;
  content: url(../img/picture/installation/thewaytochoose/enter_manually_w150.svg);
}

.esim-thewaytochoose-s-150 {
  height: 64px;
  width: 70px;
  content: url(../img/picture/installation/thewaytochoose/scan_qr_w150.svg);
}

.esim-thewaytochoose-a-150 {
  height: 45px;
  width: 65px;
  content: url(../img/picture/installation/thewaytochoose/auto.png);
}

.package-euro-3 {
  height: 45px;
  width: 100px;
  content: url(../img/stars_3.svg);
}

.package-euro-5 {
  height: 37px;
  width: 158px;
  content: url(../img/stars_5.svg);
}

.check-compatibility {
  height: 25px;
  width: 25px;
  content: url(../img/icon/check_compatibility.svg);
}

@media (max-width: 768px) {
  .redeem-gift {
    height: 200px;
    width: 250px;
    content: url(../img/picture/gift_w250.svg);
  }
  .share-banner {
    height: 211px;
    width: 300px;
    content: url(../img/picture/landingpage/share_banner_w300.svg);
  }
}
.business-account {
  padding-top: 0px !important;
}
@media (max-width: 768px) {
  .business-account {
    padding-top: 0px !important;
  }
}

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.redeemBanner {
  padding: 25px 20px;
  background-image: linear-gradient(270deg, #28c891, #3c8dfa);
}
.redeemBanner .navText {
  text-align: center;
  max-width: 542px;
}
.redeemBanner a {
  font-size: 20px;
  color: white;
}
.redeemBanner img {
  width: 105px;
}
.redeemBanner .btn {
  border: solid 2px #fff;
  color: white;
  min-width: 140px;
  font-size: 15px;
}

@media (max-width: 768px) {
  .redeemBanner {
    padding: 13px 20px;
    background-image: linear-gradient(270deg, #28c891, #3c8dfa);
  }
  .redeemBanner .navText {
    text-align: center;
    max-width: 542px;
  }
  .redeemBanner a {
    font-size: 15px;
    color: white;
  }
  .redeemBanner img {
    width: 105px;
  }
  .redeemBanner .btn {
    border: solid 2px #fff;
    color: white;
    min-width: 140px;
    font-size: 15px;
  }
}
.header-menu {
  padding-top: 35px;
  margin-bottom: 40px;
  /* ===== 平板區間：logo 獨立一行 ===== */
}
.header-menu .promotionbar {
  height: 60px;
  padding: 10px 20px;
}
.header-menu .promotionbar img {
  height: 30px;
  margin-right: 15px;
}
.header-menu .promotionbar span {
  color: white;
  font-size: 20px;
  vertical-align: text-top;
  line-height: 34px;
}
@media (max-width: 768px) {
  .header-menu {
    padding-top: 5px;
    margin-bottom: 5px;
  }
  .header-menu .promotionbar {
    height: 50px;
    padding: 10px 0;
  }
  .header-menu .promotionbar img {
    height: 18px;
    margin-right: 8px;
  }
  .header-menu .promotionbar span {
    color: white;
    font-size: 12px;
    vertical-align: text-top;
    line-height: 31px;
  }
}
.header-menu .login .btn {
  height: 55px;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 100px;
  font-size: 15px;
  font-family: Outfit-Medium;
  letter-spacing: 0.83px;
}
.header-menu .account .btn {
  padding-top: 10px;
}
.header-menu .btn-link {
  padding-top: 12px;
  padding-bottom: 5px;
  font-size: 15px;
  font-family: Outfit-Medium;
  text-decoration: none;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.87;
  letter-spacing: 0.75px;
  text-align: center;
  color: #000;
}
.header-menu .btn-link .cart {
  width: 70px;
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .header-menu {
    /* Logo 區 */
    /* 中間 nav（你現在是空的，但保險留著） */
    /* 右側 nav pills（About / Blog / Login） */
    /* Login 按鈕不要太擠 */
  }
  .header-menu .container > .d-flex {
    flex-direction: column;
    align-items: center;
  }
  .header-menu .logo {
    width: 100%;
    justify-content: center;
    margin-bottom: 12px;
  }
  .header-menu .esim-logo-h46 {
    margin: 0 auto;
    display: block;
  }
  .header-menu ul.nav.col-12 {
    order: 2;
    width: 100%;
    justify-content: center;
    margin: 0;
  }
  .header-menu .nav.nav-pills {
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
  }
  .header-menu .login .btn {
    height: 48px;
    font-size: 14px;
  }
}

.chat {
  position: fixed;
  bottom: 40px !important;
  bottom: calc(40px + constant(safe-area-inset-bottom)) !important;
  bottom: calc(40px + env(safe-area-inset-bottom)) !important;
  right: 20px;
  height: 60px;
  z-index: 102;
  cursor: pointer;
  width: 60px;
  text-align: center;
  padding: 0px;
  /*-webkit-transition: top 1s; !* Safari *!*/
  /*transition: top 1s;*/
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3);
  border-radius: 100px;
  padding-top: 0px !important;
  animation-name: create-trip-anime;
  animation-duration: 0.3s;
}

.chat:hover {
  background: rgb(255, 171, 62);
}

.logo {
  box-shadow: unset;
}
.logo .menu-title {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 20px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.25px;
  text-align: center;
  color: #000;
}

@media (max-width: 768px) {
  .logo {
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.15);
  }
  .chat {
    bottom: 80px !important;
    bottom: calc(80px + constant(safe-area-inset-bottom)) !important;
    bottom: calc(80px + env(safe-area-inset-bottom)) !important;
  }
}
.e4t-hero {
  /* --- 1. 定義新配色 (參考你的圖片：藍 -> 青綠漸層) --- */
  --text: #1f2937; /* 深灰字體 */
  --muted: #6b7280; /* 次要文字 */
  --border: rgba(37, 99, 235, 0.15); /* 邊框帶點藍色 */
  /* 核心漸層：科技藍 (#2563EB) 到 青綠 (#2DD4BF) */
  --accent-gradient: linear-gradient(135deg, #2563eb 0%, #2dd4bf 100%);
  --accent: #2563eb; /* 單色時的強調色 */
  --btn: #2dd4bf; /* 按鈕改為清爽的青綠色 (Teal) */
  /* 背景光暈顏色 */
  --blob-blue: rgba(37, 99, 235, 0.22);
  --blob-teal: rgba(45, 212, 191, 0.22);
  /* 陰影效果 */
  --shadow-soft: 0 10px 30px -5px rgba(37, 99, 235, 0.1);
  --shadow-hover: 0 20px 40px -10px rgba(37, 99, 235, 0.15);
  /* 基礎設定 */
  position: relative;
  color: var(--text);
  overflow: hidden;
  background-color: #ffffff;
  padding-bottom: 80px; /* 增加底部留白，為了放波浪，避免內容被遮住 */
  padding: 0 10px;
  /* --- 2. 背景裝飾 (取代原本的線條，改為有機光暈) --- */
  /* 左上角藍色光暈 */
  /* 右下角青色光暈 */
  /* --- 3. 內容容器調整 --- */
  /* 保留你的 kicker class */
  /* --- 4. 搜尋框改造 (變為圓潤的膠囊狀) --- */
  /* --- TrustPilot 區域 --- */
  /* ============ Desktop Visual (右側圖片) ============ */
  /* 這是你原本圖片裡的波浪，如果不需要可以隱藏，或者保留作為圖片裝飾 */
  /* --- 5. 新增：底部銜接波浪 (Bottom Wave) --- */
  /* 請記得在 HTML 補上對應結構 */
  /* ============ RWD 調整 ============ */
  /* Desktop 背景：移除原本的舊線條，改由上面的 ::before/::after 處理 */
  /* Mobile：手機版調整 */
}
.e4t-hero::before {
  content: "";
  position: absolute;
  top: -100px;
  left: -100px;
  width: 600px;
  height: 600px;
  background: var(--blob-blue);
  border-radius: 50%;
  filter: blur(90px); /* 強力模糊 */
  z-index: 0;
  opacity: 0.8;
  pointer-events: none;
}
.e4t-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -50px;
  width: 500px;
  height: 500px;
  background: var(--blob-teal);
  border-radius: 50%;
  filter: blur(90px);
  z-index: 0;
  opacity: 0.6;
  pointer-events: none;
}
@media (max-width: 991px) {
  .e4t-hero {
    --blob-blue: rgba(37, 99, 235, 0.32);
    --blob-teal: rgba(45, 212, 191, 0.32);
  }
}
.e4t-hero__container {
  position: relative;
  z-index: 2; /* 確保內容浮在背景光暈之上 */
  padding-top: 60px;
  /* padding-bottom 已由父層控制 */
}
.e4t-hero__kicker {
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--accent); /* 改用主題色 */
  font-weight: 700;
  margin-bottom: 12px;
  text-transform: uppercase;
}
.e4t-hero__title {
  margin: 0 0 20px;
  line-height: 1.15;
  /* 將 em 強調文字改為藍綠漸層 */
}
.e4t-hero__title .t1,
.e4t-hero__title .t2 {
  display: block;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: clamp(34px, 4vw, 56px);
}
.e4t-hero__title em {
  font-style: normal;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.e4t-hero__desc {
  margin: 0 0 32px;
  max-width: 600px;
  color: var(--muted);
  line-height: 1.8;
  font-size: 17px; /* 稍微加大一點點，更易讀 */
}
.e4t-hero__search-title {
  font-weight: 800;
  margin: 18px 0 12px;
  color: var(--text);
}
.e4t-hero .e4t-search-form {
  max-width: 560px;
  display: grid;
  gap: 14px;
  position: relative;
}
.e4t-hero__search {
  position: relative;
}
.e4t-hero .e4t-search-field {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 64px; /* 加高一點 */
  padding: 0 24px;
  border-radius: 99px; /* 全圓角 (Pill shape) */
  border: 2px solid rgba(229, 231, 235, 0.8);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-soft);
  transition: all 0.3s ease;
  /* 聚焦時的互動效果 */
}
.e4t-hero .e4t-search-field:focus-within {
  transform: translateY(-2px);
  border-color: #2dd4bf; /* 聚焦變青色 */
  box-shadow: 0 4px 20px rgba(45, 212, 191, 0.2);
}
.e4t-hero .e4t-search-field input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  background: transparent;
  color: var(--text);
  font-weight: 500;
}
.e4t-hero .e4t-search-field input::placeholder {
  color: rgba(156, 163, 175, 0.8);
}
.e4t-hero .e4t-search-icon {
  width: 24px;
  height: 24px;
  color: #3b82f6; /* Icon 改為亮藍色 */
  display: inline-flex;
}
.e4t-hero .e4t-search-icon svg {
  width: 100%;
  height: 100%;
}
.e4t-hero .e4t-search-btn {
  height: 64px;
  border-radius: 50px; /* 按鈕也改為圓角 */
  background: var(--accent-gradient); /* 按鈕使用漸層背景 */
  color: #fff;
  border: none;
  font-size: 18px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
  transition: transform 0.2s;
}
.e4t-hero .e4t-search-btn:hover {
  transform: scale(1.02);
  box-shadow: 0 15px 25px rgba(37, 99, 235, 0.4);
}
.e4t-hero__trust {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.e4t-hero .e4t-trust-score strong {
  font-size: 20px;
  font-weight: 900;
  color: #059669; /* 深綠色 */
}
.e4t-hero .e4t-trust-score span {
  font-size: 20px;
  color: var(--muted);
  font-weight: 800;
  margin-left: 4px;
}
.e4t-hero .e4t-trust-star {
  font-size: 20px;
  line-height: 1;
  color: #fbbf24; /* 金黃色 */
  filter: drop-shadow(0 2px 4px rgba(251, 191, 36, 0.3));
}
.e4t-hero .e4t-trust-meta {
  font-size: 14px;
  line-height: 1.35;
  color: var(--muted);
}
.e4t-hero .e4t-trust-meta a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  color: var(--text);
  transition: color 0.2s;
}
.e4t-hero .e4t-trust-meta a:hover {
  color: var(--accent);
}
.e4t-hero__visual {
  position: relative;
  /* 改為有機形狀圓角，呼應背景 Blob */
  border-radius: 40px 40px 200px 40px;
  background: #f0fdfa; /* 淺青色底 */
  overflow: hidden;
  min-height: 520px;
  box-shadow: 20px 20px 0px rgba(45, 212, 191, 0.1); /* 錯位陰影裝飾 */
  transition: transform 0.5s ease;
}
.e4t-hero__visual:hover {
  transform: scale(1.01);
}
.e4t-hero__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.e4t-hero__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 140px;
  fill: #ffffff;
  pointer-events: none;
  opacity: 0.8; /* 稍微透明一點 */
}
.e4t-hero__bottom-wave {
  position: absolute;
  bottom: -1px; /* 微調避免縫隙 */
  left: 0;
  width: 100%;
  z-index: 1;
  line-height: 0;
  pointer-events: none;
}
.e4t-hero__bottom-wave svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 200px;
  min-height: 80px;
}
.e4t-hero__bottom-wave svg path {
  fill: #ffffff; /* 必須與下一區塊的背景色一致 */
}
@media (min-width: 992px) {
  .e4t-hero {
    /* 這裡可以留空，或者針對大螢幕做額外調整 */
  }
}
@media (max-width: 991px) {
  .e4t-hero {
    padding-bottom: 20px; /* 手機版底部留白稍減 */
    /* 調整背景光暈大小，避免手機畫面太亂 */
    /* 搜尋框在手機版也要置中 */
    /* 信任指標置中 */
    /* 手機版依然隱藏圖片 */
  }
  .e4t-hero::before {
    width: 300px;
    height: 300px;
    filter: blur(60px);
    opacity: 0.5;
  }
  .e4t-hero::after {
    width: 200px;
    height: 200px;
    filter: blur(60px);
    opacity: 0.4;
    bottom: 100px;
  }
  .e4t-hero__container {
    padding-top: 30px;
    padding-bottom: 20px;
    text-align: center; /* 手機版置中對齊 */
  }
  .e4t-hero__title .t1,
  .e4t-hero__title .t2 {
    font-size: 38px;
  }
  .e4t-hero__desc {
    font-size: 15px;
    margin: 0 auto 24px; /* 置中 */
  }
  .e4t-hero .e4t-search-form {
    max-width: 100%;
    margin: 0 auto;
  }
  .e4t-hero .e4t-search-field {
    height: 60px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.9);
  }
  .e4t-hero .e4t-search-btn {
    width: 100%;
    border-radius: 30px;
  }
  .e4t-hero__trust {
    justify-content: center;
    margin-top: 30px;
  }
  .e4t-hero__visual {
    display: none !important;
  }
}
@media (max-width: 420px) {
  .e4t-hero__title .t1,
  .e4t-hero__title .t2 {
    font-size: 34px;
  }
  .e4t-hero .e4t-trust-score strong {
    font-size: 18px;
  }
}

.e4t-search-trigger {
  width: min(520px, 100%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  color: rgba(156, 163, 175, 0.8);
  border-radius: 99px;
  border: 1px solid rgba(17, 24, 39, 0.16);
  background: #ffffff;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08);
  cursor: pointer;
}

.e4t-search-modal {
  border-radius: 18px;
}

.e4t-search-field {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(17, 24, 39, 0.16);
  border-radius: 99px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.e4t-search-field:focus-within {
  border-color: #e5395a;
  box-shadow: 0 0 0 4px rgba(229, 57, 90, 0.15);
}

.e4t-search-input {
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.e4t-results-list {
  max-height: 420px;
  overflow-y: auto;
}

.e4t-results-item {
  padding: 10px;
  border-radius: 12px;
  cursor: pointer;
}
.e4t-results-item:hover {
  background: rgba(17, 24, 39, 0.05);
}

.e4t-results-flag {
  margin-right: 12px;
  border-radius: 6px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18);
}

.e4t-results-title {
  font-size: 14px;
  font-weight: 700;
  color: #000000;
}

.e4t-results-sub {
  font-size: 12px;
  color: #666;
}

/* 你的 modal 外觀仍維持 */
.e4t-search-modal {
  border-radius: 18px;
}

/* 結果區可捲動 */
.e4t-results-list {
  max-height: 420px;
  overflow-y: auto;
}

/* Mobile 滿版：<=576px */
@media (max-width: 576px) {
  #e4tSearchModal {
    /* 讓清單吃滿剩餘高度 */
    /* 讓搜尋欄更像原生滿版搜尋 */
  }
  #e4tSearchModal .modal-dialog {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh; /* iOS/Android 新版更準 */
    margin: 0;
  }
  #e4tSearchModal .modal-content {
    height: 100dvh;
    border-radius: 0; /* 滿版通常不需要圓角 */
    border: 0;
  }
  #e4tSearchModal .modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    border-bottom: 1px solid rgba(17, 24, 39, 0.08);
  }
  #e4tSearchModal .modal-body {
    padding: 12px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: calc(100dvh - 56px); /* header 高度粗估，視你的 header 實際高度可微調 */
    overflow: hidden; /* 把捲動交給 list */
  }
  #e4tSearchModal .e4t-search-form {
    margin-bottom: 0;
  }
  #e4tSearchModal .e4t-results-list {
    flex: 1 1 auto;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  #e4tSearchModal .e4t-search-field {
    border-radius: 99px;
  }
}
.hero {
  width: 100%;
  background: #fff;
}

.hero__inner {
  max-width: 1320px;
  margin: 0 auto;
  text-align: left; /* 全部靠左 */
}

.hero__eyebrow {
  margin: 0 0 clamp(10px, 2vw, 18px);
  color: rgba(0, 0, 0, 0.45);
  letter-spacing: 0.04em;
  font-size: clamp(14px, 1.6vw, 1rem);
  line-height: 1.3;
}

.hero__title {
  margin: 0 0 clamp(14px, 2.2vw, 22px);
  color: #000;
  font-weight: 500;
  letter-spacing: 0.01em;
  font-size: 1.5rem;
  line-height: 1.12;
  word-break: keep-all;
}

.hero__desc {
  margin: 0;
  color: rgba(0, 0, 0, 0.6);
  font-size: clamp(14px, 1.8vw, 1rem);
  line-height: 1.6;
}

/* Mobile 微調 */
@media (max-width: 420px) {
  .hero__inner {
    padding: 24px 6px 0;
  }
  .hero__title {
    letter-spacing: 0;
  }
}
.countries-height {
  min-height: 5000px;
  margin: 0 auto;
}
.countries-height.min-h-300 {
  min-height: 300px;
}

.top-filter-switch {
  position: relative;
  display: inline-flex;
  margin: 0 auto 30px;
  gap: 0;
  padding: 6px;
  max-width: 1320px;
  margin: 0 auto;
  border-radius: 999px;
  border: 1px solid #dcddde;
  background: rgba(250, 250, 250, 0.9);
  backdrop-filter: blur(6px);
  margin-top: 20px;
}
.top-filter-switch .switch-btn {
  position: relative;
  z-index: 2;
  flex: 1 1 0;
  min-width: 128px;
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: #111;
  background: transparent;
  cursor: pointer;
  line-height: 1;
  transition: color 0.18s ease;
}
.top-filter-switch .switch-btn:hover {
  color: #000;
}
.top-filter-switch .switch-indicator {
  position: absolute;
  z-index: 1;
  top: 6px;
  left: 6px;
  height: calc(100% - 12px);
  width: calc((100% - 12px) / 2);
  border-radius: 999px;
  background: #000;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);
  transition: transform 0.26s cubic-bezier(0.2, 0.9, 0.2, 1), width 0.26s cubic-bezier(0.2, 0.9, 0.2, 1);
  will-change: transform;
}
.top-filter-switch.mode-country .switch-btn:nth-child(2) {
  color: #fff;
}
.top-filter-switch.mode-country .switch-btn:nth-child(3) {
  color: rgba(17, 17, 17, 0.65);
}
.top-filter-switch.mode-country .switch-indicator {
  transform: translateX(0%);
}
.top-filter-switch.mode-region .switch-btn:nth-child(2) {
  color: rgba(17, 17, 17, 0.65);
}
.top-filter-switch.mode-region .switch-btn:nth-child(3) {
  color: #fff;
}
.top-filter-switch.mode-region .switch-indicator {
  transform: translateX(100%);
}
@media (max-width: 480px) {
  .top-filter-switch {
    width: 100%;
  }
  .top-filter-switch .switch-btn {
    min-width: 0;
    width: 50%;
    justify-content: center;
  }
}

/* 可選：切換時有微微按壓感 */
.switch-btn:active {
  transform: scale(0.98);
}

.landing-page-header {
  margin: 0; /* 拿掉外距 */
  padding: 40px 0; /* 用 padding 取代 */
  padding-top: 7rem; /* 你原本的保留 */
  padding-bottom: 2rem;
  position: relative;
  min-height: 360px;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-content {
  position: relative;
}

.what-is-esim {
  max-width: 760px;
}
.what-is-esim .title {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 28px;
  line-height: 36px;
  color: #000;
}
.what-is-esim .description {
  font-family: "Outfit-ExtraLight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  color: #000;
}
.what-is-esim .link1 {
  text-decoration: underline;
  font-size: 15px;
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: #000;
  cursor: pointer;
}

/* 外層要跟真實列表同寬、同置中、同左右內距 */
.countries-skeleton {
  max-width: 1320px; /* 跟真實列表一樣寬 */
  margin: 0 auto;
  box-sizing: border-box;
  /* 對齊你真實內容區塊的左右 padding（px-2 / px-md-5 / px-lg-5 的概念） */
  padding: 0 0.5rem; /* ≈ px-2 */
}

/* grid 本身 */
.countries-skeleton .sk-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px; /* 建議用 16px，比 12px 更像你真實 g-3 的感覺 */
  margin: 0;
  padding: 50px 0 0;
}

/* 一張卡的外觀與尺寸要貼近真卡片 */
.countries-skeleton .sk-card {
  width: 100%;
  height: 76px; /* 你原本 OK */
  border-radius: 999px; /* 你的卡視覺很「膠囊」，用 999px 會更像 */
  background: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  position: relative;
  overflow: hidden;
}

/* 讓 skeleton 內部元素也對齊真卡片：左邊旗幟 + 兩行字 */
.countries-skeleton .sk-card::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  width: 44px;
  height: 30px;
  transform: translateY(-50%);
  border-radius: 8px;
  background: #e6e6e6;
}

.countries-skeleton .sk-card::after {
  content: "";
  position: absolute;
  left: 74px;
  top: 50%;
  width: 55%;
  height: 10px;
  transform: translateY(-12px);
  border-radius: 999px;
  background: #e6e6e6;
  box-shadow: 0 16px 0 #e6e6e6; /* 第二行 */
  opacity: 0.9;
}

.coupon-skeleton {
  width: 100%;
  height: 260px; /* 關鍵：固定高度，防 CLS */
  border-radius: 16px;
  background: linear-gradient(90deg, #eeeeee 25%, #f5f5f5 37%, #eeeeee 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
/* Mobile 微調 */
@media (max-width: 554px) {
  .coupon-skeleton {
    height: 180px;
    border-radius: 12px;
  }
}
.coupon-skeleton {
  width: 100%;
  height: 260px; /* ✅ 固定高度，防 CLS */
  border-radius: 16px;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
@media (max-width: 554px) {
  .coupon-skeleton {
    height: 180px;
    border-radius: 12px;
  }
}
/* ✅ 992px：改成 2 欄，並加大左右 padding（接近 px-md-5） */
@media (max-width: 992px) {
  .countries-skeleton .sk-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px; /* 建議用 16px，比 12px 更像你真實 g-3 的感覺 */
    margin: 0;
    padding: 40px 0;
  }
  .countries-skeleton {
    padding: 0 3rem; /* ≈ px-md-5 */
  }
  .countries-skeleton .sk-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
  }
}
/* ✅ 554px：改成 1 欄，左右 padding 小一點 */
@media (max-width: 768px) {
  /* grid 本身 */
  /* 一張卡的外觀與尺寸要貼近真卡片 */
  .countries-skeleton .sk-card {
    width: 100%;
    height: 57px; /* 你原本 OK */
    border-radius: 999px; /* 你的卡視覺很「膠囊」，用 999px 會更像 */
    background: #fff;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
  }
  .countries-skeleton .sk-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px; /* 建議用 16px，比 12px 更像你真實 g-3 的感覺 */
    margin: 0;
    padding: 40px 0;
  }
  .countries-skeleton {
    padding: 0 1rem;
  }
  .countries-skeleton .sk-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}
.store-message-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-110%);
  transition: transform 0.25s ease;
  z-index: 2000;
  background: #ffd200;
}

.store-message-overlay.show {
  transform: translateY(0);
}

@media (max-width: 992px) {
  .landing-page-header {
    min-height: 260px; /* ✅ 比 desktop 小，但仍固定 */
    padding-top: 4rem;
    padding-bottom: 1.5rem;
  }
  .hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 93%;
    object-fit: cover;
  }
}
@media (max-width: 554px) {
  .landing-page-header {
    min-height: 260px; /* ✅ 手機首屏高度 */
    max-height: 260px;
    padding-top: 1.5rem; /* 建議不要 0，避免文字貼頂 */
    padding-bottom: 1rem;
  }
  .hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 60%;
    object-fit: cover;
  }
  .what-is-esim {
    max-width: 760px;
  }
  .what-is-esim .title {
    font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 20px;
    line-height: normal;
    color: #000;
  }
  .what-is-esim .description {
    font-family: "Outfit-ExtraLight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 14px;
    color: #000;
  }
  .what-is-esim .link1 {
    text-decoration: underline;
    font-size: 14px;
    font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: #000;
    cursor: pointer;
  }
  .what-is-esim .what-esim {
    height: 200px;
  }
}
.container .slogn {
  max-width: 510px;
  margin: 0 auto;
  font-family: Outfit-Regular;
  font-size: 40px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.33px;
  text-align: center;
  color: #000;
}
.container .slogn .slogn {
  padding-top: 0rem;
}
.container .sub-slogn {
  max-width: 510px;
  margin: 0 auto;
  font-family: Outfit-Regular;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.33px;
  text-align: center;
  color: #000;
}
@media (max-width: 768px) {
  .container .slogn {
    font-size: 28px;
  }
  .container .slogn .sub-slogn {
    max-width: 85%;
  }
}
.container .see_device_list {
  font-size: 15px;
  color: black;
  font-family: Outfit-Regular;
}
.container .search_bar {
  font-family: Outfit-Regular;
  padding: 0 25px 0 30px;
  font-size: 15px;
  height: 60px;
  border-radius: 30px;
  background-color: #eaebeb;
}
.container .search_bar label i {
  margin-top: 23px;
}
.container .search_bar .form-control {
  letter-spacing: 0.19px;
  color: #595959;
  padding: 0.375rem 1.75rem;
  border: none;
  background-color: #eaebeb;
}
.container .search_bar .form-control:focus {
  box-shadow: none;
}
.container .query-result {
  background-color: #eaebeb;
  position: absolute;
  border-radius: 22px;
  z-index: 100;
  width: 100%;
  max-width: 560px;
}
.container .query-result li {
  margin: 8px 8px 0px 8px;
  border-radius: 30px;
}
.container .query-result li:focus {
  background-color: #fff;
}
.container .query-result li:focus-visible {
  background-color: #fff;
}
.container .query-result li:hover {
  background-color: #fff;
}
.container .query-result li:hover a {
  background-color: #fff;
}
.container .query-result li:focus {
  padding: 10px 20px 10px 21px;
  border-radius: 30px;
  border: solid 2px #fff;
  background-color: #fff;
}
@media (max-width: 554px) {
  .container .slogn {
    padding-top: 2rem;
  }
  .container .query-result {
    background-color: #eaebeb;
    position: absolute;
    border-radius: 22px;
    z-index: 100;
    width: unset;
    left: 15px;
    right: 15px;
  }
}

.query-result {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, 0.14);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  padding: 8px;
  margin-top: 10px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* ===== Item ===== */
  /* ===== Divider ===== */
  /* ===== Empty state ===== */
  /* ===== Scrollbar (WebKit) ===== */
  /* ===== RWD ===== */
}
.query-result > li {
  margin: 0;
}
.query-result .dropdown-item {
  width: 100%;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: #111827;
  background: transparent;
  cursor: pointer;
  transition: background 160ms ease, transform 160ms ease;
  /* ===== Flag ===== */
  /* ===== Text block ===== */
}
.query-result .dropdown-item:hover {
  background: rgba(17, 24, 39, 0.06);
}
.query-result .dropdown-item:active {
  transform: translateY(1px);
}
.query-result .dropdown-item:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.28);
}
.query-result .dropdown-item img {
  flex: 0 0 auto;
  width: 39px;
  height: 27px;
  border-radius: 6px;
  object-fit: cover;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.16);
  user-select: none;
  -webkit-user-drag: none;
}
.query-result .dropdown-item > div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.query-result .dropdown-item > div > div:first-child {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.query-result .dropdown-item > div > div:last-child {
  font-size: 12px;
  line-height: 1.2;
  color: rgba(17, 24, 39, 0.56);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.query-result > li + li .dropdown-item {
  position: relative;
}
.query-result > li + li .dropdown-item::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  top: -6px;
  height: 1px;
  background: rgba(17, 24, 39, 0.06);
}
.query-result .text-muted {
  margin: 0;
  padding: 14px 12px;
  text-align: center;
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.04);
  font-size: 14px;
  font-weight: 600;
  color: rgba(17, 24, 39, 0.55);
}
.query-result::-webkit-scrollbar {
  width: 10px;
}
.query-result::-webkit-scrollbar-track {
  background: transparent;
}
.query-result::-webkit-scrollbar-thumb {
  background: rgba(17, 24, 39, 0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
.query-result::-webkit-scrollbar-thumb:hover {
  background: rgba(17, 24, 39, 0.28);
}
@media (max-width: 576px) {
  .query-result {
    max-height: 260px;
    padding: 6px;
    border-radius: 12px;
  }
  .query-result .dropdown-item {
    padding: 10px;
    border-radius: 10px;
  }
  .query-result .dropdown-item img {
    width: 36px;
    height: 25px;
  }
}

.countries {
  /* ===== RWD ===== */
}
.countries .nav-tabs .nav-link:focus,
.countries .nav-tabs .nav-link:hover {
  border-color: transparent !important;
}
.countries .nav-tabs .nav-link {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: #595959;
  text-decoration: none;
  transition: none !important;
}
.countries .nav-tabs .nav-item.show .nav-link,
.countries .nav-tabs .nav-link.active {
  color: white;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  background-color: black;
}
.countries .nav-tabs .nav-item.show .nav-link,
.countries .nav-tabs .nav-link.active {
  color: white;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  background-color: black;
}
.countries .tab-content {
  background-color: #fafafa;
}
.countries .region_name {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.34px;
  color: #191919;
  font-size: 1.5rem;
  margin-bottom: 30px;
}
.countries .card {
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15);
  background-color: #fff;
  border: unset;
  cursor: pointer;
  border: solid 3px white;
}
.countries .card .card-body-s {
  text-align: center;
}
.countries .card .card-body-s .productName {
  font-family: "Outfit-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 20px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.25px;
  color: #fff;
}
@media (max-width: 768px) {
  .countries .card .card-body-s {
    text-align: left;
  }
}
.countries .card .city_name {
  letter-spacing: 0.19px;
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  text-decoration: none;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  color: #000;
}
.countries .card:hover {
  border: solid 3px #28c891;
}

.hover14 {
  /* Shine */
}
.hover14 figure {
  position: relative;
}
.hover14 figure::before {
  position: absolute;
  top: 0;
  left: -75%;
  z-index: 2;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  -webkit-transform: skewX(-25deg);
  transform: skewX(-25deg);
}
.hover14 figure:hover::before {
  -webkit-animation: shine 0.75s;
  animation: shine 0.75s;
}
@-webkit-keyframes shine {
  100% {
    left: 125%;
  }
}
@keyframes shine {
  100% {
    left: 125%;
  }
}

.hover15 {
  /* Circle */
}
.hover15 figure {
  position: relative;
}
.hover15 figure::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: block;
  content: "";
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
}
.hover15 figure:hover::before {
  -webkit-animation: circle 0.75s;
  animation: circle 0.75s;
}
@-webkit-keyframes circle {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}
@keyframes circle {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  100% {
    width: 200%;
    height: 200%;
    opacity: 0;
  }
}

.why_esim .title {
  font-size: 21px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.86;
  letter-spacing: 0.26px;
  color: #000;
}
.why_esim .description {
  font-family: "Outfit-ExtraLight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 200;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.47;
  letter-spacing: 0.19px;
  color: #000;
}

.esim-footer .foot-company-section {
  width: 70%;
}
.esim-footer .title {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 13px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.16px;
  color: #000;
}
.esim-footer li a {
  font-family: "Outfit-Light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.15;
  letter-spacing: 0.16px;
  color: #595959;
}
@media (max-width: 821px) {
  .esim-footer .foot-company-section {
    width: 100%;
  }
}

.esim-modal .modal-content {
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.3);
  border-radius: 65px 65px 12px 12px;
}
.esim-modal .title {
  font-family: "Outfit-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 30px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.38px;
  text-align: center;
  color: #000;
}
.esim-modal .name {
  font-family: "Outfit-ExtraLight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 200;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.15px;
  color: #000;
}
@media (max-width: 991px) {
  .esim-modal .title {
    max-width: 300px;
    margin: 0 auto;
  }
}
@media (max-width: 498px) {
  .esim-modal .title {
    max-width: 250px;
    margin: 0 auto;
  }
}

.device-support .title {
  font-family: "Outfit-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 30px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.38px;
  text-align: center;
  color: #000;
}
.device-support .modal-content {
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.3);
  border-radius: 65px 65px 12px 12px;
}
@media (max-width: 991px) {
  .device-support .title {
    max-width: 330px;
    margin: 0 auto;
  }
}
@media (max-width: 498px) {
  .device-support .title {
    max-width: 330px;
    margin: 0 auto;
  }
}
.device-support .description {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  text-align: center;
  color: #000;
}
.device-support .ios-btn {
  width: 132px;
  height: 55px;
  border-radius: 28px;
  border: unset;
  font-size: 24px;
  font-weight: 600;
}
.device-support .android-btn {
  width: 132px;
  height: 55px;
  margin: 0 23px 0 0;
  border-radius: 28px;
  border: unset;
  font-size: 24px;
  font-weight: 600;
}
.device-support .device-table .name {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 20px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.25px;
  color: #000;
}
.device-support .device-table .device-item li {
  font-family: "Outfit-Light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 2;
  letter-spacing: 0.19px;
  color: #000;
}
.device-support .device-table .important {
  padding: 18px 24px;
  border-radius: 10px;
  background-color: #f5f5f5;
}
.device-support .device-table .important .important-name {
  font-family: "Outfit-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.15px;
  text-align: justify;
  color: #595959;
}
.device-support .device-table .important .content {
  font-family: "Outfit-Light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.15px;
  text-align: justify;
  color: #595959;
}

.carousel-inner {
  padding: 1em;
}

.card {
  margin: 0 0.5em;
  box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
  border: none;
}

.carousel-control-prev,
.carousel-control-next {
  background-color: #e1e1e1;
  width: 6vh;
  height: 6vh;
  border-radius: 50%;
  top: 50%;
  transform: translateY(-50%);
}

@media (min-width: 768px) {
  .carousel-item {
    margin-right: 0;
    flex: 0 0 33.333333%;
    display: block;
  }
  .carousel-inner {
    display: flex;
  }
}
.card .img-wrapper {
  max-width: 100%;
  height: 13em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card img {
  max-height: 100%;
}

.easy-to-share {
  padding: 70px 0px 50px 0;
  border-radius: 56px;
  border: solid 2px #e0f7fa;
  background-image: linear-gradient(to top, #effbfd, #daf6f9);
}
.easy-to-share .share-banner {
  width: 90%;
  max-width: 400px;
}

@media (max-width: 767px) {
  .card .img-wrapper {
    height: 17em;
  }
  .easy-to-share {
    padding: 40px 0;
    border-radius: 56px;
    border: solid 2px #e0f7fa;
    background-image: linear-gradient(to top, #effbfd, #daf6f9);
  }
  .easy-to-share .share-banner {
    width: 90%;
    max-width: 400px;
  }
}
/* 针对 RTL 方向的样式 */
:dir(rtl) .esim-icon-search-position {
  position: absolute;
  right: 27px;
  top: 22px;
}

:dir(rtl) .payment-unionpay {
  padding: 9px 24px 8px 24px;
}

/* 针对 LTR 方向的样式 */
:dir(ltr) .esim-icon-search-position {
  position: absolute;
  left: 27px;
  top: 22px;
}

.payment-page .title {
  font-size: 30px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.38px;
  text-align: center;
  color: #000;
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin-bottom: 28px;
}

.orderConfirmation .container {
  padding-bottom: 86px;
}
.orderConfirmation .title {
  font-size: 30px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.38px;
  text-align: center;
  color: #000;
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin-bottom: 28px;
}
@media (max-width: 768px) {
  .orderConfirmation .container {
    padding-bottom: 40px;
  }
}
.orderConfirmation .empty-cart {
  margin: 0 auto;
}
.orderConfirmation .empty-cart .buy-btn {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  width: 210px;
  height: 55px;
  font-size: 15px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.83px;
  text-align: center;
  border-radius: 28px;
  color: #fff;
}
.orderConfirmation .empty-cart .description {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: 0.19px;
  text-align: center;
  color: #000;
}
.orderConfirmation .empty-cart .title-1 {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 30px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 0.25px;
  text-align: center;
  color: #000;
}
@media (max-width: 768px) {
  .orderConfirmation .empty-cart .title-1 {
    font-size: 20px;
  }
}
.orderConfirmation .esim-card {
  padding: 28px 58px 19px 62px;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15);
  background-color: #fff;
  border: unset;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  margin-bottom: 15px;
}
.orderConfirmation .esim-card img {
  height: 58px;
  width: 87px;
  border-radius: 5px 20px 5px 5px;
  margin-right: 22px;
}
.orderConfirmation .esim-card .productName {
  padding-top: 20px;
}
.orderConfirmation .esim-card .productName a {
  font-family: "Outfit-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 30px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.38px;
  color: #191919;
}
@media (max-width: 768px) {
  .orderConfirmation .esim-card .productName a {
    font-size: 20px;
  }
}
.orderConfirmation .esim-card .package-info {
  width: 178px;
  float: right;
}
.orderConfirmation .esim-card .package-info .adjust-icon {
  padding: 0;
  border-radius: 100px;
  font-size: 30px;
  color: black;
  line-height: 34px;
}
.orderConfirmation .esim-card .package-info .item {
  border-bottom: 2px solid #eaebeb;
  padding-bottom: 11px;
  padding-top: 18px;
}
.orderConfirmation .esim-card .package-info .item .name-icon {
  font-size: 25px;
  line-height: 22px;
}
.orderConfirmation .esim-card .package-info .item .name {
  font-size: 15px;
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.15px;
  color: #000;
}
.orderConfirmation .esim-card .package-info .item .item-quantity-box {
  width: 85px;
  height: 38px;
  border-radius: 12px;
  border: solid 2px #eaebeb;
  background-color: #fff;
  margin: 0 auto;
}
.orderConfirmation .esim-card .package-info .item .item-quantity-box .item-quantity {
  font-size: 20px;
  color: black;
  line-height: 10px;
  font-family: "Outfit-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.orderConfirmation .esim-card .package-info .item .itemvalue {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.25px;
  text-align: right;
  color: #000;
}
.orderConfirmation .esim-card .package-info .itemQuantity {
  border-bottom: unset;
}
@media (max-width: 768px) {
  .orderConfirmation .esim-card .package-info {
    width: 100%;
    float: unset;
  }
  .orderConfirmation .esim-card .esim-card {
    padding: 28px 38px 19px 32px !important;
  }
  .orderConfirmation .esim-card .productName {
    padding-top: 10px;
    padding-bottom: 20px;
  }
  .orderConfirmation .esim-card .productName .oo {
    max-width: 120px;
  }
  .orderConfirmation .esim-card .itemQuantity {
    border-bottom: unset !important;
    padding-top: 36px !important;
    padding-bottom: 18px !important;
    width: 180px;
    margin: 0 auto;
  }
}
.orderConfirmation .coupon-card {
  border-radius: 12px;
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.15);
  background-color: #fff;
  margin-bottom: 15px;
  padding: 20px 38px;
  border: unset;
}
.orderConfirmation .coupon-card .remove-coupon {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.18px;
  border: 1px solid #f87171;
  color: #f87170;
  background-color: white;
  border-radius: 4px;
  padding: 2px 25px;
  cursor: pointer;
}
.orderConfirmation .coupon-card .remove-coupon:hover {
  background-color: #f87170;
  color: white;
}
.orderConfirmation .orderSummery {
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15);
  background-color: #fff;
  border: unset;
  padding: 36px 54px 50px 48px;
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.15);
  background-color: #fff;
}
.orderConfirmation .orderSummery .summery-title {
  font-size: 21px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.86;
  letter-spacing: 0.26px;
  color: #000;
}
.orderConfirmation .orderSummery .description {
  font-family: "Outfit-ExtraLight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 200;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.47;
  letter-spacing: 0.19px;
  color: #000;
}
.orderConfirmation .orderSummery .totalPrice {
  margin-top: 24px;
  margin-bottom: 40px;
  border-top: solid 2px #eaebeb;
  border-bottom: solid 2px #eaebeb;
  padding-top: 24px;
  padding-bottom: 24px;
}
.orderConfirmation .orderSummery .totalPrice .discount {
  margin-bottom: 15px;
}
.orderConfirmation .orderSummery .totalPrice .amount {
  margin-bottom: 15px;
}
.orderConfirmation .orderSummery .totalPrice .total-price {
  font-family: "Outfit-ExtraLight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 200;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.47;
  letter-spacing: 0.19px;
  color: #000;
}
.orderConfirmation .orderSummery .totalPrice .price-value {
  text-align: right;
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 20px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: 0.25px;
  text-align: right;
  color: #000;
}
.orderConfirmation .orderSummery .agree-checkbox {
  border: unset;
  max-width: 100%;
  margin: unset;
}
.orderConfirmation .orderSummery .agree-checkbox input {
  border-radius: 5px;
  border: solid 3px #000;
  font-size: 23px;
  margin-top: 0px;
}
.orderConfirmation .orderSummery .agree-checkbox span {
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  color: #595959;
}
.orderConfirmation .orderSummery .agree-checkbox .first {
  margin-bottom: 18px;
}
@media (max-width: 768px) {
  .orderConfirmation .orderSummery {
    padding: 20px 20px 50px 20px;
  }
}
.orderConfirmation .checkout-button {
  text-align: center;
  margin-top: 50px;
}
.orderConfirmation .checkout-button .btn {
  border-radius: 28px;
  background: black;
  color: white;
  width: 326px;
  height: 55px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .orderConfirmation .coupon-card {
    padding: 20px;
  }
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end; /* 全部靠右 */
  margin-top: 20px;
  margin-right: 15px;
}

@media (max-width: 576px) {
  .tag-row {
    margin-top: 8px;
    margin-right: 6px;
  }
}
/* 共用基礎樣式 */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  backdrop-filter: blur(6px); /* 跟你插畫背景很搭 */
  border: 1px solid transparent;
}

/* Best Value｜主推藍綠 */
.tag--value {
  background: #1c1c1e;
  color: #ffffff;
  border: 1px solid #1c1c1e;
}

/* Most Popular｜偏暖米橘（呼應奶油底） */
.tag--popular {
  background: #f4e6d8;
  color: #8a5a2b;
  border: 1px solid #e6d2bc;
}

/* Top Choice｜柔和綠（穩定、不搶戲） */
.tag--top {
  background: #1c1c1e; /* 高級黑，不是純黑 */
  color: #ffffff;
  border: 1px solid #1c1c1e;
}

/* Multi-Network｜偏紫藍科技感 */
.tag--network {
  background: #eaf2f6; /* 冷藍灰 */
  color: #0f3a4a; /* 深電信藍 */
  border: 1px solid #c8dde6;
}

:root {
  --blue: #4f8df7;
  --teal: #35c5a3;
  --green: #51d08b;
  --card: #ffffff;
  --body: #edf8f8;
  --text: #0b1220;
  --muted: rgba(11, 18, 32, 0.72);
  --radius: 22px;
  --radius-sm: 16px;
  --shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
  --shadow-hover: 0 14px 40px rgba(16, 24, 40, 0.12);
  --stroke: rgba(16, 24, 40, 0.08);
  --stroke-strong: rgba(255, 255, 255, 0.45);
  --bar-pad-y: 12px; /* 你要更矮就再降，例如 10px */
  --bar-pad-x: 16px;
  --body-pad-y: 12px;
  --body-pad-x: 16px;
  --gap: 12px;
  --btn-h: 40px;
}

/* 左側 */
.esim-status-left {
  display: flex;
  gap: 12px;
  align-items: center;
  min-width: 0;
}

.esim-status-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.esim-status-icon svg {
  width: 20px;
  height: 20px;
  opacity: 0.95;
}

.esim-status-kicker {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  opacity: 0.92;
  line-height: 1.2;
}

.esim-status-title {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.2px;
  line-height: 1.2;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Badge：更明顯、更像系統狀態 pill */
.esim-status-badge {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.9px;
  padding: 7px 14px;
  border-radius: 999px;
  /* 讓白字站得住：用深色半透明底 */
  background: rgba(15, 23, 42, 0.28); /* 深色玻璃感 */
  border: 1px solid rgba(255, 255, 255, 0.55); /* 邊框更清楚 */
  color: #000;
  /* 增加立體感，避免融入背景 */
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  line-height: 1;
}

/* ON：偏綠，更像啟用 */
.esim-status-card.is-on .esim-status-badge {
  background: #fff; /* emerald */
  border-color: rgba(187, 247, 208, 0.65);
  box-shadow: 0 8px 18px rgba(16, 185, 129, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

/* OFF：偏灰/紅，像停用（保持專業，不要太紅） */
.esim-status-card.is-off .esim-status-badge {
  background: rgba(30, 41, 59, 0.28); /* slate */
  border-color: rgba(226, 232, 240, 0.65);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

/* 內容區（更省高度 + 更一致字級） */
.esim-status-body {
  background: var(--body);
  padding: var(--body-pad-y) var(--body-pad-x) calc(var(--body-pad-y) + 2px);
}

.esim-status-desc {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

/* 步驟列表：更乾淨、數字更清楚、間距更小 */
.esim-status-steps {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  counter-reset: step;
  display: grid;
  gap: 6px;
}

.esim-status-steps li {
  counter-increment: step;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(11, 18, 32, 0.86);
}

.esim-status-steps li::before {
  content: counter(step);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: rgba(79, 141, 247, 0.14);
  color: rgba(11, 18, 32, 0.82);
  border: 1px solid rgba(79, 141, 247, 0.18);
  flex: 0 0 auto;
  margin-top: 1px;
}

.button-icon {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  border: 1px solid #000;
  padding: 10px 15px 10px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: bold;
  font-family: "Outfit-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #fff;
  display: inline-flex;
}

.button-icon:hover {
  border: 1px solid #28c891;
  color: #28c891;
}

.button-icon:hover .check-compatibility {
  content: url(../img/icon/check_compatibility_green.svg);
}

.button-icon span {
  margin-left: 10px;
  /* 圖標和文字間距 */
  font-size: 20px;
  /* 圖標大小 */
}

.esim-tp-section {
  background: #ffffff;
  padding: 72px 16px;
  color: #191919;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.esim-tp-container {
  max-width: 1320px;
  margin: 0 auto;
}

/* Header */
.esim-tp-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.esim-tp-title {
  margin: 0;
  font-size: 28px;
  font-weight: 750;
  letter-spacing: -0.2px;
}

.esim-tp-subtitle {
  margin: 10px 0 0;
  color: #6b6b6b;
  line-height: 1.6;
  max-width: 70ch;
  font-size: 14px;
}

.esim-tp-primary-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 14px;
  border-radius: 8px;
  background: #00b67a;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
}

.esim-tp-primary-link:hover {
  filter: brightness(0.95);
}

/* Trust summary block */
.esim-tp-summary {
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  background: #ffffff;
}

.esim-tp-summary-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.esim-tp-logo {
  height: 24px;
  width: auto;
}

.esim-tp-summary-meta {
  min-width: 0;
}

.esim-tp-scoreline {
  display: flex;
  align-items: center;
  gap: 10px;
}

.esim-tp-stars-inline {
  color: #00b67a;
  letter-spacing: 1px;
  font-size: 14px;
}

.esim-tp-score-text {
  font-size: 14px;
  color: #191919;
}

.esim-tp-countline {
  margin-top: 6px;
  font-size: 12.5px;
  color: #6b6b6b;
}

.esim-tp-dot {
  margin: 0 8px;
}

.esim-tp-summary-stats {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.esim-tp-stat {
  border-left: 1px solid #ededed;
  padding-left: 14px;
}

.esim-tp-stat-label {
  font-size: 12px;
  color: #6b6b6b;
}

.esim-tp-stat-value {
  margin-top: 4px;
  font-size: 13px;
  font-weight: 700;
  color: #191919;
}

.esim-tp-secondary-link {
  font-size: 13px;
  color: #00b67a;
  text-decoration: none;
  font-weight: 700;
  white-space: nowrap;
}

.esim-tp-secondary-link:hover {
  text-decoration: underline;
}

@media (max-width: 900px) {
  .esim-tp-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .esim-tp-summary {
    flex-direction: column;
    align-items: flex-start;
  }
  .esim-tp-summary-stats {
    justify-content: flex-start;
  }
  .esim-tp-stat {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid #ededed;
    padding-top: 12px;
  }
}
/* Review cards */
.esim-tp-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 900px) {
  .esim-tp-list {
    grid-template-columns: 1fr;
  }
}
.esim-tp-card {
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 18px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}

.esim-tp-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.esim-tp-card-who {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.esim-tp-name {
  font-weight: 750;
  font-size: 14px;
  color: #191919;
}

.esim-tp-date {
  font-size: 12px;
  color: #6b6b6b;
}

.esim-tp-stars {
  color: #00b67a;
  font-size: 14px;
  letter-spacing: 1px;
  white-space: nowrap;
}

.esim-tp-text {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.65;
  color: #191919;
}

.esim-tp-link {
  font-size: 13px;
  color: #00b67a;
  text-decoration: none;
  font-weight: 750;
}

.esim-tp-link:hover {
  text-decoration: underline;
}

/* Footnote */
.esim-tp-footnote {
  margin-top: 14px;
  font-size: 12px;
  color: #6b6b6b;
  line-height: 1.6;
}

.esim-tp-footnote a {
  color: #00b67a;
  text-decoration: none;
  font-weight: 700;
}

.esim-tp-footnote a:hover {
  text-decoration: underline;
}

/* Match your site: light cream background + soft border + rounded cards */
.esim4-why {
  --bg: #f4f4f4; /* page cream */
  --card: #fff; /* card fill */
  --border: #dcddde; /* soft pink-ish border */
  --shadow: 0 14px 34px rgba(0, 0, 0, 0.06);
  --text: #1f1f1f;
  --muted: rgba(31, 31, 31, 0.62);
  --accent: #35b6a6; /* teal like your selected card */
  --accentSoft: rgba(53, 182, 166, 0.12);
  background: var(--bg);
  padding: 56px 16px;
}

.esim4-why__container {
  max-width: 1320px;
  margin: 0 auto;
}

.esim4-why__header {
  margin-bottom: 18px;
}

.esim4-why__title {
  color: var(--text);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.25;
  margin: 0 0 8px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.esim4-why__subtitle {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.esim4-why__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  margin-top: 22px;
}

@media (min-width: 640px) {
  .esim4-why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .esim4-why__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.esim4-why__card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 18px 18px 16px;
  box-shadow: var(--shadow);
  min-height: 150px;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.esim4-why__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.08);
}

.esim4-why__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--accent);
  margin-bottom: 10px;
}

.esim4-why__icon svg {
  width: 20px;
  height: 20px;
}

.esim4-why__cardTitle {
  color: var(--text);
  font-size: 15px;
  margin: 0 0 10px;
  line-height: 1.35;
  font-weight: 800;
}

.esim4-why__cardText {
  color: rgba(31, 31, 31, 0.78);
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
}

.esim4-why__cardText strong {
  color: var(--text);
  font-weight: 800;
}

/* Subtle highlight for 24/7真人客服 (match teal selection style) */
.esim4-why__card--highlight {
  border-color: rgba(53, 182, 166, 0.45);
  box-shadow: 0 18px 44px rgba(53, 182, 166, 0.08);
  position: relative;
}

.esim4-why__card--highlight .esim4-why__icon {
  background: var(--accentSoft);
  border-color: rgba(53, 182, 166, 0.35);
}

.productDetails {
  /* Pill group */
  /* Moving indicator */
  /* Tab buttons */
  /* List style like your sample */
  /* 旗幟 + H1 同一行 */
  /* 旗幟圓形（含外圈） */
  /* 大標題 */
  /* 預設（mobile / <768） */
  /* ≥ 992px */
  /* ≥ 1200px */
  /* 灰色描述 */
  /* 黑色粗體段落標題 */
  /* RWD：小螢幕把 H1 縮小，不然會爆版 */
  /* 你的 d-flex 內層也要允許縮 */
  /* 文字內容：允許換行、遇到超長字串也要斷行 */
  /* ===== Unlimited plan card ===== */
  /* 左側 radio */
  /* 內容 */
  /* badges */
  /* select */
  /* pricing */
  /* 小螢幕 */
  /* ===== Unlimited dropdown card add-on ===== */
  /* RWD：小螢幕把 H1 縮小，不然會爆版 */
  /* pricing */
  /* 你這種 network list 可能是多個 <a> 連在一起，確保能換行 */
}
.productDetails .tabs-wrap {
  margin-top: 8px;
}
.productDetails .tabs-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.productDetails .tabs-scroll::-webkit-scrollbar {
  display: none;
}
.productDetails .tabs-pill {
  position: relative;
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  background: #fff;
  width: fit-content;
}
.productDetails .tab-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  height: 32px;
  width: 96px; /* 初始，會由 ng-style 覆蓋 */
  border-radius: 999px;
  background: #111;
  transition: transform 0.25s ease, width 0.25s ease;
  z-index: 0;
}
.productDetails .tab-btn {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 14px;
  line-height: 20px;
  color: #111;
  white-space: nowrap;
  cursor: pointer;
}
.productDetails .tab-btn.is-active {
  color: #fff;
}
.productDetails .feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.productDetails .feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: rgba(0, 0, 0, 0.72);
  line-height: 1.55;
  word-break: break-word;
}
.productDetails .feature-list li::before {
  content: "";
  margin-top: 6px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.9;
  flex: 0 0 14px;
}
.productDetails .muted {
  color: rgba(0, 0, 0, 0.55);
}
.productDetails .header-1 {
  margin-bottom: 20px;
}
.productDetails .header-1 .productName {
  font-family: "Outfit-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin-top: 30px;
  font-size: 40px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.5px;
  color: #191919;
}
.productDetails .button-icon {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  border: 1px solid #000;
  padding: 10px 15px 10px 20px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: bold;
  font-family: "Outfit-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #fff;
}
.productDetails .product-top-layout {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 48px;
  width: 100%;
}
.productDetails .product-top-content {
  width: 100%;
}
.productDetails .product-top-image {
  position: relative;
  flex: 0 0 auto;
  width: 460px;
  height: 620px;
}
.productDetails .image-skeleton {
  position: absolute;
  inset: 0;
  border-radius: 36px;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
.productDetails .product-top-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 36px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.productDetails .product-top-image img.is-loaded {
  opacity: 1;
}
@media (max-width: 1199.98px) {
  .productDetails .product-top-image img {
    width: 360px;
  }
  .productDetails .product-top-image {
    width: 360px;
    height: 480px;
  }
}
@media (max-width: 990.98px) {
  .productDetails .product-top-image {
    display: none;
  }
  .productDetails .product-top-layout {
    gap: 16px;
  }
}
@media (max-width: 768px) {
  .productDetails .product-top-layout {
    display: block;
  }
}
.productDetails .button-icon:hover {
  border: 1px solid #28c891;
  color: #28c891;
}
.productDetails .button-icon span {
  margin-left: 10px;
  /* 圖標和文字間距 */
  font-size: 20px;
  /* 圖標大小 */
}
.productDetails .header-md .goback a {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 0.19px;
  color: #000;
  vertical-align: middle;
}
.productDetails .header-md .goback i {
  font-size: 40px;
  vertical-align: middle;
}
.productDetails .header-md .national-flag {
  width: 180px;
  height: 120px;
  box-shadow: 0 2px 14px 2px rgba(0, 0, 0, 0.2);
  border-radius: 12px 65px 12px 12px;
  box-shadow: 0 2px 14px 2px rgba(0, 0, 0, 0.2);
}
.productDetails .header-sm .col-logo {
  max-width: unset;
}
.productDetails .header-sm .goback a {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 0.19px;
  color: #000;
  vertical-align: middle;
  line-height: 60px;
}
.productDetails .header-sm .goback i {
  font-size: 40px;
  vertical-align: middle;
}
.productDetails .header-sm .national-flag {
  width: 90px;
  height: 60px;
  border-radius: 6px 30px 6px 6px;
  box-shadow: 0 2px 14px 2px rgba(0, 0, 0, 0.2);
}
.productDetails .header {
  padding: 39px 48px 30px 48px;
}
.productDetails .product-hero {
  padding-top: 8px;
  padding-bottom: 24px;
}
.productDetails .hero-title-row {
  display: flex;
  align-items: center;
  gap: 16px; /* 比你現在稍大 */
  margin-bottom: 18px;
}
.productDetails .flag-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}
.productDetails .flag-img {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  object-fit: cover;
  display: block;
}
.productDetails .flag-ring {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2px solid rgba(0, 0, 0, 0.08);
  pointer-events: none;
}
.productDetails .hero-h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111;
}
@media (min-width: 992px) {
  .productDetails .hero-h1 {
    font-size: 36px;
  }
}
@media (min-width: 1200px) {
  .productDetails .hero-h1 {
    font-size: 40px;
  }
}
.productDetails .hero-desc {
  max-width: 720px;
  margin: 0 0 24px 0; /* ↓ 重點：拉開與下方距離 */
  font-size: 16px;
  line-height: 1.8; /* 閱讀型行距 */
  color: #6b7280; /* 高級灰 */
}
.productDetails .hero-section-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
  font-weight: 800;
  color: #111827;
}
@media (max-width: 767.98px) {
  .productDetails .hero-h1 {
    font-size: 28px;
  }
  .productDetails .hero-desc {
    font-size: 16px;
    margin-bottom: 18px;
  }
  .productDetails .hero-section-title {
    font-size: 16px;
  }
}
.productDetails .additional-info {
  max-width: 100%;
}
.productDetails .additional-info .name-icon {
  font-size: 25px;
}
.productDetails .additional-info .title {
  font-family: "Outfit-ExtraLight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 14px;
  font-weight: 200;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.15px;
  color: #000;
}
.productDetails .additional-info .content {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  color: #000;
  margin-top: 3px;
}
.productDetails .additional-info .row,
.productDetails .additional-info .col {
  max-width: 100%;
}
.productDetails .additional-info .col {
  min-width: 0;
}
.productDetails .additional-info .d-flex {
  min-width: 0;
}
.productDetails .additional-info .content,
.productDetails .additional-info .content a,
.productDetails .additional-info .title {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.productDetails .plan-card {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 16px;
  border: 1px solid #e9e9ef;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
  max-width: 360px; /* 可依版面調整 */
}
.productDetails .plan-unlimited {
  overflow: hidden;
}
.productDetails .plan-radio {
  display: flex;
  align-items: flex-start;
  padding-top: 4px;
}
.productDetails .plan-radio input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.productDetails .plan-radio-ui {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 2px solid #d6d6df;
  background: #fff;
  display: inline-block;
  box-sizing: border-box;
  position: relative;
}
.productDetails .plan-radio input:checked + .plan-radio-ui {
  border-color: #111827;
}
.productDetails .plan-radio input:checked + .plan-radio-ui::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 999px;
  background: #111827;
}
.productDetails .plan-body {
  flex: 1;
  min-width: 0;
}
.productDetails .plan-title {
  font-size: 22px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #111827;
  margin-top: 2px;
}
.productDetails .plan-badges {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 4px;
}
.productDetails .badge-save {
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  background: #d9fbe3;
  color: #0f5132;
  white-space: nowrap;
}
.productDetails .plan-select {
  position: relative;
  margin-top: 10px;
  width: 132px; /* 下拉寬度 */
}
.productDetails .select-caret {
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-35%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #111827;
  opacity: 0.9;
}
.productDetails .plan-pricing {
  margin-top: 12px;
}
.productDetails .price-now {
  line-height: 1.1;
  font-weight: 900;
  color: #e11d48; /* 紅色 */
  letter-spacing: 0.2px;
}
.productDetails .price-was {
  margin-top: 6px;
  font-weight: 700;
  color: #9ca3af;
  text-decoration: line-through;
}
.productDetails .plan-note {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #6b7280;
}
@media (max-width: 420px) {
  .productDetails .plan-card {
    max-width: 100%;
  }
}
.productDetails .package-unlimited {
  border-radius: 18px;
}
.productDetails .package-unlimited-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.productDetails .badge-save {
  font-size: 13px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  background: #d9fbe3;
  color: #0f5132;
  white-space: nowrap;
}
.productDetails .trust-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 32px;
  margin: 18px 0 22px;
  font-size: 15px;
}
@media (max-width: 767px) {
  .productDetails .trust-row {
    flex-direction: column; /* 關鍵 */
    gap: 10px; /* 兩行之間距離 */
  }
}
.productDetails .trust-item {
  display: flex;
  align-items: center;
  gap: 8px; /* icon 跟文字的距離 */
  white-space: nowrap;
}
.productDetails .trust-item i.fa-star {
  color: #f5b301; /* 星星黃 */
  font-size: 16px;
}
.productDetails .trust-item i.fa-lock {
  color: #16a34a; /* 安全綠 */
  font-size: 16px;
}
.productDetails .package-unlimited-select {
  position: absolute;
  bottom: 60px;
  left: 16px;
  right: 16px; /* 這行很關鍵 */
  width: auto; /* 或刪掉 width */
}
.productDetails .unlimited-includes {
  margin: 16px 0; /* 與 checkout-menu 留距 */
  padding: 14px 16px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}
.productDetails .unlimited-includes-title {
  font-size: 13px;
  font-weight: 800;
  margin-bottom: 8px;
  color: #111827;
}
.productDetails .unlimited-includes-list {
  padding-left: 18px;
  margin: 0;
}
.productDetails .unlimited-includes-list li {
  font-size: 12px;
  line-height: 1.6;
  color: #374151;
}
.productDetails .select-days {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  padding: 4px 36px 4px 14px;
  border-radius: 999px;
  border: 1px solid #e2e2e4;
  background: #ffffff;
  font-size: 15px;
  font-weight: 700;
  color: #595959;
  outline: none;
  cursor: pointer;
}
.productDetails .select-days:focus {
  border-color: #111827;
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
}
@media (max-width: 576.98px) {
  .productDetails .package-unlimited-select {
    position: absolute;
    left: 68px;
    bottom: 20px;
    width: 130px;
  }
  .productDetails .select-days {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    padding: 4px 36px 4px 14px;
    border-radius: 999px;
    border: 1px solid #e2e2e4;
    background: #ffffff;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    outline: none;
    cursor: pointer;
  }
  .productDetails .select-days:focus {
    border-color: #111827;
    box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08);
  }
}
.productDetails .select-caret {
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  width: 0;
  height: 0;
  transform: translateY(-35%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #111827;
  opacity: 0.9;
}
.productDetails .price-was {
  text-decoration: line-through;
  color: #afafaf;
  margin-right: 6px;
  font-weight: 700;
}
.productDetails .price-now {
  text-decoration: none;
  color: red;
  font-weight: 800;
}
.productDetails .additional-info a.content {
  display: inline;
}
.productDetails .checkout-menu {
  margin-top: 25px;
}
.productDetails .checkout-menu .item-quantity .adjust-quantity {
  max-width: 250px;
  margin: 0 auto;
}
.productDetails .checkout-menu .item-quantity .adjust-quantity .item-quantity-box {
  width: 85px;
  height: 38px;
  border-radius: 12px;
  border: solid 2px #eaebeb;
  background-color: #fff;
  margin: 0 auto;
}
.productDetails .checkout-menu .item-quantity .adjust-quantity .item-quantity-box .item-quantity {
  font-size: 20px;
  color: black;
  line-height: 10px;
  font-family: "Outfit-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.productDetails .checkout-menu .item-quantity .adjust-quantity .adjust-icon {
  font-size: 30px;
  color: black;
  line-height: 34px;
}
.productDetails .checkout-menu .addtocart {
  width: 100%;
  background: black;
  border-radius: 50px;
  border: unset;
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.83px;
  text-align: center;
  color: #fff;
  height: 55px;
}
.productDetails .checkout-menu .buy {
  width: 100%;
  background: linear-gradient(90deg, #3c8dfa, #28c891);
  border-radius: 50px;
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.83px;
  text-align: center;
  color: #fff;
  height: 55px;
  border: unset;
  position: relative;
}
.productDetails .checkout-menu .buy .item-count {
  position: absolute;
  right: 20px;
}
@media (max-width: 768px) {
  .productDetails .header {
    padding: 30px 20px 20px 20px;
  }
  .productDetails .addtocart {
    max-width: 446px;
  }
  .productDetails .buy {
    max-width: 446px;
    margin: 0 auto;
  }
  .productDetails .header-md .goback a {
    font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 15px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: 0.19px;
    color: #000;
    vertical-align: middle;
  }
  .productDetails .header-md .goback i {
    font-size: 40px;
    vertical-align: middle;
  }
  .productDetails .header-md .national-flag {
    width: 90px;
    height: 60px;
    box-shadow: 0 2px 14px 2px rgba(0, 0, 0, 0.2);
    border-radius: 12px 35px 12px 12px;
    box-shadow: 0 2px 14px 2px rgba(0, 0, 0, 0.2);
  }
}

@media (max-width: 768px) {
  .productDetails {
    margin-bottom: 25px;
  }
  .set-code-hide {
    height: 50px;
    overflow-y: hidden;
  }
}
.hide-preCode-box {
  width: 100%;
  padding-top: 28px;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff));
  background-image: linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 100%);
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  z-index: 10;
}

#article_content .markdown_views pre.prettyprint * {
  word-wrap: normal;
  word-break: break-all;
}

.set-code-hide .hide-preCode-box span.hide-preCode-bt {
  display: block;
  margin: auto;
  width: 44px;
  height: 22px;
  background: #f0f0f5;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding-top: 6px;
  cursor: pointer;
}

.faq-section .faq-item {
  border-bottom: solid 2px #eaebeb;
}
.faq-section .faq-item .faq-title {
  font-size: 15px;
  color: black;
  font-weight: 400;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 10px;
  font-family: "Outfit-Regular";
}
.faq-section .faq-item .faq-title:hover {
  color: #28c891 !important;
}
.faq-section .faq-item .arrow-icon {
  transition: transform 0.4s ease-in-out;
}
.faq-section .faq-item .card-body {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
  padding: 0 10px;
  color: #595959;
}
.faq-section .faq-item .card-body p {
  font-family: "Outfit-Light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}
.faq-section .faq-item .card-body.show {
  max-height: 500px;
  /* 確保這個值比內容高度大 */
  padding: 10px 10px 20px 10px;
}

.login-f .login-panel {
  max-width: 441px;
  margin: 0 auto;
}
.login-f .login-panel .nav-link {
  font-family: "Outfit-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  text-align: center;
  color: #595959;
  border-radius: 28px 28px 0 0;
  width: 50%;
}
.login-f .login-panel .active {
  background-color: #000;
  color: white !important;
}
.login-f .login-panel .login-data {
  padding: 37px 35px 25px 30px;
  border-radius: 0 0 24px 24px;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.3);
  background-color: #fff;
  border: unset;
}
.login-f .login-panel .login-data .input-email {
  margin: 0 0 12px;
  width: 100%;
  border-radius: 10px;
  background-color: #eaebeb;
  border: unset;
}
.login-f .login-panel .login-data .password {
  position: relative;
}
.login-f .login-panel .login-data .password .input-password {
  margin: 0 0 12px;
  width: 100%;
  border-radius: 10px;
  background-color: #eaebeb;
  border: unset;
}
.login-f .login-panel .login-data .password span {
  position: absolute;
  right: 20px;
  top: 40%;
}
.login-f .login-panel .login-data .submit-login {
  width: 100%;
  max-width: 350px;
  margin: 30px auto;
  height: 55px;
  border-radius: 28px;
  background-color: #000;
}
.login-f .login-panel .login-data .signin-button {
  width: 100%;
  max-width: 350px;
  margin: 30px auto;
  height: 55px;
  border-radius: 28px;
  background-color: #000;
}
.login-f .login-panel .login-data .forgot-password {
  font-size: 14px;
  color: black;
  text-decoration: underline;
}

.forgot-password {
  margin-bottom: 40px;
}
.forgot-password .title {
  padding: 11px 115px 10px 114px;
  object-fit: contain;
  border-radius: 24px 24px 0 0;
  text-align: center;
  background: #000;
  color: white;
  font-family: "Outfit-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  color: #fff;
}
.forgot-password .back-btn i {
  vertical-align: sub;
}
.forgot-password .back-btn button:hover {
  border-color: white;
}
.forgot-password .back-btn button:active {
  border-color: white;
}
.forgot-password .back-btn button:focus {
  border-color: white;
}
.forgot-password .card {
  max-width: 441px;
  margin: 0 auto;
  border: unset;
  border-radius: 24px;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.3);
  background-color: #fff;
}
.forgot-password .main {
  padding: 9px 15px;
  padding: 30px;
}
.forgot-password .main .submit-btn {
  min-width: 240px;
  font-size: 15px;
  margin: 33px auto 0px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.83px;
  text-align: center;
  color: #fff;
  padding: 18px 15px;
  border-radius: 28px;
  background-color: #000;
}
.forgot-password .main .tips {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  color: #000;
}
.forgot-password .main .tips2 {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  color: #000;
}
.forgot-password .main .form-floating label {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  color: #000;
}
.forgot-password .main .form-floating .input-email {
  margin: 0 0 12px;
  width: 100%;
  border-radius: 10px;
  background-color: #eaebeb;
  border: unset;
}

.reset-password .tips {
  margin-bottom: 15px;
}
.reset-password .resend-btn {
  width: 100%;
  padding: 12px 21px 13px;
  border-radius: 12px;
  background-color: #000;
}

.du-card {
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  margin: 0 auto 14px;
}
.du-card__bar {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #474747;
}
.du-card__bar-text {
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 0.3px;
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.du-card__body {
  padding: 18px 18px 16px;
}
.du-card__title {
  font-size: 24px;
  line-height: 1.12;
  color: #111111;
  font-family: "Outfit-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 6px 0 10px;
}
.du-card__sub {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 14px;
  line-height: 1.35;
  margin-top: 2px;
  color: #3a3a3c;
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.du-card__sub-label {
  color: #5b5b5f;
}
.du-card__sub-value {
  color: #111111;
}
.du-card__divider {
  border: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
  margin: 14px 0 14px;
}
.du-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.du-card__row-label {
  font-size: 14px;
  color: #4a4a4f;
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.du-card__row-value {
  font-size: 22px;
  color: #111111;
  font-family: "Outfit-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  white-space: nowrap;
}
.du-card__hint {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.35;
  color: #6b6b70;
  font-family: "Outfit-Light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.du-card.is-not-activated .du-card__bar {
  background: #3a3a3c;
}
.du-card.is-active .du-card__bar {
  background: linear-gradient(90deg, #3c8dfa 0%, #28c790 100%);
}
.du-card.is-expired .du-card__bar {
  background: #8e8e93;
}

.du-progress {
  margin-top: 6px;
}
.du-progress__track {
  height: 44px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.du-progress__fill {
  height: 100%;
  border-radius: 999px;
  position: relative;
  background: linear-gradient(90deg, #3c8dfa 0%, #28c790 100%);
  animation: duStripeMove 2.6s linear infinite;
  background-size: 140% 140%;
}
.du-progress__fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.18) 0px, rgba(255, 255, 255, 0.18) 10px, rgba(255, 255, 255, 0.02) 10px, rgba(255, 255, 255, 0.02) 20px);
  opacity: 0.9;
  pointer-events: none;
}
.du-progress .du-progress__fill.is-low {
  background: linear-gradient(90deg, #ff9a9a 0%, #ff5d5d 100%);
}

@keyframes duStripeMove {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}
@media (max-width: 576px) {
  .du-card {
    border-radius: 16px;
  }
  .du-card__body {
    padding: 16px 14px 14px;
  }
  .du-card__title {
    font-size: 24px;
  }
  .du-progress__track {
    height: 40px;
  }
}
.esim-summary {
  margin: 0 auto;
}

.esim-card {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 14px;
}
.esim-card__header {
  position: relative;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.esim-card__headerLeft {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.esim-card__headText {
  min-width: 0;
}
.esim-card__country {
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.2px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.esim-card__iccid {
  margin-top: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  line-height: 1.2;
  opacity: 0.9;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.esim-card__iccid:hover {
  opacity: 1;
  text-decoration: underline;
}
.esim-card__refresh {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 10px;
  border-radius: 12px;
  border: 0;
  background: rgba(255, 255, 255, 0.72);
  cursor: pointer;
}
.esim-card__refresh i {
  font-size: 14px;
}
.esim-card__refresh:hover {
  background: rgba(255, 255, 255, 0.9);
}
.esim-card__body {
  padding: 16px 16px 18px;
  background: #fff;
}
.esim-card__title {
  margin: 6px 0 8px;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: 0.2px;
  font-weight: 800;
  color: #111;
}
.esim-card__desc {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.72);
}
.esim-card__footer {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}
.esim-card .flag {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.16);
  border: 2px solid rgba(255, 255, 255, 0.65);
  flex: 0 0 auto;
}
.esim-card .flag__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.esim-card .pill-btn {
  min-width: 220px;
  text-align: center;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  border: 0;
  cursor: pointer;
  background: #efefef;
  color: rgba(0, 0, 0, 0.75);
}
.esim-card .pill-btn:hover {
  background: #e6e6e6;
  color: rgba(0, 0, 0, 0.86);
}
.esim-card.is-not-installed .esim-card__header {
  background: linear-gradient(90deg, #717171 0% 0%, #404040 100%);
  color: #fff;
}
.esim-card.is-not-installed .esim-card__country,
.esim-card.is-not-installed .esim-card__iccid {
  color: #fff;
}
.esim-card.is-not-installed .esim-card__iccid {
  opacity: 0.9;
}
.esim-card.is-not-installed .esim-card__refresh {
  color: rgba(0, 0, 0, 0.82);
}
.esim-card.is-off .esim-card__header {
  background: linear-gradient(90deg, rgb(252, 190, 36), rgb(248, 113, 113));
  color: #fff;
}
.esim-card.is-off .esim-card__country,
.esim-card.is-off .esim-card__iccid {
  color: #fff;
}
.esim-card.is-off .esim-card__iccid {
  opacity: 0.9;
}
.esim-card.is-off .esim-card__refresh {
  color: rgba(0, 0, 0, 0.82);
}
.esim-card.is-on .esim-card__header {
  background: linear-gradient(90deg, #3791ec 0%, #55c096 100%);
  color: #fff;
}
.esim-card.is-on .esim-card__country,
.esim-card.is-on .esim-card__iccid {
  color: #fff;
}
.esim-card.is-on .esim-card__refresh {
  color: rgba(0, 0, 0, 0.82);
}

/* RWD */
@media (max-width: 480px) {
  .esim-summary {
    padding: 10px 10px 16px;
  }
  .esim-card {
    border-radius: 16px;
  }
  .esim-card__header {
    padding: 10px 12px;
    gap: 10px;
  }
  .esim-card .flag {
    width: 40px;
    height: 40px;
  }
  .esim-card__title {
    font-size: 24px;
  }
  .esim-card__desc {
    font-size: 14px;
  }
  .esim-card .pill-btn {
    min-width: 200px;
    width: 100%;
    max-width: 320px;
  }
  .esim-card__refresh {
    padding: 8px 8px;
  }
}
.esim-status-card .esim-status-actions {
  --btn-h: 52px;
  --btn-radius: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  /* 次要：設定教學（更像系統 UI 的 outline/ghost） */
  /* 主要：檢查 eSIM 狀態（更乾淨、陰影更克制、邊框更明確） */
  /* RWD：小螢幕兩顆都滿寬 + 置中 */
  /* 無動態偏好 */
}
.esim-status-card .esim-status-actions .btn {
  height: var(--btn-h);
  padding: 0 18px;
  border-radius: var(--btn-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.2px;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  user-select: none;
  cursor: pointer;
}
.esim-status-card .esim-status-actions .btn i.fa-solid {
  font-size: 16px;
  line-height: 1;
  transform-origin: center;
  opacity: 0.95;
}
.esim-status-card .esim-status-actions .btn:active {
  transform: translateY(1px);
}
.esim-status-card .esim-status-actions .btn:focus-visible {
  outline: 3px solid rgba(59, 130, 246, 0.28);
  outline-offset: 2px;
}
.esim-status-card .esim-status-actions .btn-outline {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(16, 24, 40, 0.14);
  color: rgba(17, 24, 39, 0.9);
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.06);
}
.esim-status-card .esim-status-actions .btn-outline:hover {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(16, 24, 40, 0.18);
  box-shadow: 0 12px 24px rgba(17, 24, 39, 0.08);
}
.esim-status-card .esim-status-actions .btn-primary {
  background: linear-gradient(180deg, rgba(59, 130, 246, 0.96), rgba(37, 99, 235, 0.96));
  border-color: rgba(29, 78, 216, 0.35);
  color: #fff;
  box-shadow: 0 12px 22px rgba(37, 99, 235, 0.22);
  /* 檢查中（加 .is-loading） */
}
.esim-status-card .esim-status-actions .btn-primary:hover {
  box-shadow: 0 16px 28px rgba(37, 99, 235, 0.26);
  border-color: rgba(29, 78, 216, 0.45);
}
.esim-status-card .esim-status-actions .btn-primary.is-loading {
  pointer-events: none;
  opacity: 0.9;
}
.esim-status-card .esim-status-actions .btn-primary.is-loading i.fa-rotate {
  animation: rotate 0.9s linear infinite;
}
@media (max-width: 520px) {
  .esim-status-card .esim-status-actions {
    gap: 10px;
  }
  .esim-status-card .esim-status-actions .btn {
    width: 100%;
    justify-content: center;
    font-size: 14px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .esim-status-card .esim-status-actions .btn {
    transition: none !important;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.spec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 768px) {
  .spec-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.spec-item {
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.spec-item-full {
  grid-column: 1/-1;
}

.spec-k {
  font-size: 12px;
  opacity: 0.75;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.spec-v {
  font-size: 14px;
  line-height: 1.45;
  color: #111;
}

.spec-ico {
  font-size: 18px;
  opacity: 0.9;
}

.spec-muted {
  margin-left: 6px;
  opacity: 0.75;
}

.spec-link {
  text-decoration: underline;
}

.spec-copy:hover {
  opacity: 0.85;
}

.esim-subnav {
  position: sticky;
  top: 0;
  z-index: 60;
  margin: 0 auto;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 讓它像「頁面內導覽」，不是硬切 header */
  border-bottom: 0;
}

.esim-subnav__back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(17, 17, 17, 0.1);
  background: rgba(255, 255, 255, 0.92);
  font-size: 14px;
  font-weight: 800;
  color: #111;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.06);
}
.esim-subnav__back:hover {
  filter: brightness(0.98);
}
.esim-subnav__back:active {
  transform: translateY(1px);
}
.esim-subnav__back:focus-visible {
  outline: 3px solid rgba(60, 141, 250, 0.35);
  outline-offset: 3px;
}

/* 左箭頭（不用 icon font，避免載入問題） */
.esim-subnav__chev {
  width: 10px;
  height: 10px;
  border-left: 3px solid #111;
  border-bottom: 3px solid #111;
  transform: rotate(45deg);
  margin-left: 2px;
}

.esim-subnav__right {
  min-width: 44px; /* 保持左右平衡 */
}

.one-tap-card {
  background: #edf8f8;
  border-radius: 24px;
  padding: 28px 16px;
  text-align: center;
  margin-top: 10px;
  /* 原本藍色太搶：降權 */
  /* 重要提示：但不要搶主訊息 */
}
@media (min-width: 768px) {
  .one-tap-card {
    padding: 32px 22px;
    border-radius: 28px;
  }
}
.one-tap-card__head {
  max-width: 520px;
  margin: 0 auto;
}
.one-tap-card__title {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 800;
  color: #111;
  letter-spacing: 0.2px;
}
@media (min-width: 768px) {
  .one-tap-card__title {
    font-size: 28px;
  }
}
.one-tap-card__sub {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #6b7280;
}
.one-tap-card__desc {
  margin: 0 0 10px;
  font-size: 15px;
  color: #111;
}
.one-tap-card__hint {
  margin: 0;
  font-size: 13px;
  color: #475569;
}
.one-tap-card__ctaWrap {
  margin-top: 18px;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.one-tap-card__alt {
  background: transparent;
  border: 0;
  padding: 6px 8px;
  font-size: 14px;
  font-weight: 700;
  color: #3c8dfa;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.one-tap-card__alt:hover {
  filter: brightness(0.95);
}

/* CTA */
.one-tap-cta {
  width: min(420px, 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 14px;
  border-radius: 999px;
  text-decoration: none;
  background: linear-gradient(90deg, #3c8dfa, #28c891);
  color: #fff;
  font-weight: 800;
  font-size: 18px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.12);
}
.one-tap-cta:hover {
  filter: brightness(0.98);
}
.one-tap-cta:active {
  transform: translateY(1px);
}
.one-tap-cta__icon {
  display: inline-flex;
  width: 56px;
  justify-content: center;
  align-items: center;
}
.one-tap-cta__text {
  display: inline-block;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.2px;
}

.install-dropdown {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 14px;
}

.install-dropdown-label {
  display: block;
  text-align: center;
  font-weight: 700;
  color: #111;
  margin: 8px 0 10px;
}

.install-dropdown-wrap {
  position: relative;
}

.install-dropdown-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  border: 2px solid #d0d0d0;
  background: #fff;
  border-radius: 16px;
  padding: 14px 44px 14px 16px;
  font-size: 16px;
  font-weight: 700;
  color: #111;
  line-height: 1.2;
  cursor: pointer;
}
.install-dropdown-select:focus-visible {
  outline: 3px solid rgba(60, 141, 250, 0.35);
  outline-offset: 3px;
}

.install-dropdown-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 10px;
  height: 10px;
  transform: translateY(-55%) rotate(45deg);
  border-right: 3px solid #111;
  border-bottom: 3px solid #111;
  pointer-events: none;
}

.install-block {
  max-width: 560px;
  margin: 0 auto;
  padding: 10px 14px 0;
}

.install-block-header {
  text-align: center;
  margin: 8px 0 10px;
}
.install-block-header .install-title {
  font-size: 20px;
  font-weight: 800;
  color: #111;
  letter-spacing: 0.2px;
}

/* 內容容器：讓「tab」跟「內容」連起來 */
.install-content {
  margin-top: 14px;
  padding-top: 2px;
}

/* Panel 統一節奏 */
.install-panel {
  margin-top: 10px;
}

/* 避免你現在 QR/Manual 的大卡片太貼近 selector */
.install-panel > .install-card,
.install-panel > div[style*="border-radius: 30px"] {
  margin-top: 6px;
}

.install-methods {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 520px;
  margin: 0 auto;
  /* Base button reset（關鍵） */
  /* Primary */
  /* Divider */
  /* Secondary container */
  /* Outline button */
  /* Text button */
}
.install-methods .install-btn-outline.is-active {
  border-color: #111;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.06);
}
.install-methods .install-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  text-align: center;
  white-space: nowrap;
  padding: 0;
}
.install-methods .install-btn:focus-visible {
  outline: 3px solid rgba(60, 141, 250, 0.35);
  outline-offset: 3px;
  border-radius: 18px;
}
.install-methods .install-btn-primary {
  width: 100%;
  padding: 18px 16px;
  border-radius: 18px;
  background: #111;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}
.install-methods .install-btn-primary:hover {
  filter: brightness(0.96);
}
.install-methods .install-btn-primary.is-active {
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.22), 0 10px 26px rgba(0, 0, 0, 0.14);
}
.install-methods .install-divider {
  text-align: center;
  font-size: 14px;
  color: #8e8e8e;
}
.install-methods .install-secondary {
  display: flex;
  gap: 18px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.install-methods .install-btn-outline {
  padding: 14px 18px;
  border-radius: 16px;
  background: #fff;
  border: 2px solid #d0d0d0;
  color: #111;
  font-size: 16px;
  font-weight: 700;
}
.install-methods .install-btn-outline:hover {
  border-color: #bdbdbd;
}
.install-methods .install-btn-outline.is-active {
  border-color: #111;
  box-shadow: 0 0 0 2px rgba(17, 17, 17, 0.08);
}
.install-methods .install-btn-text {
  padding: 14px 8px;
  color: #666;
  font-size: 16px;
  font-weight: 700;
}
.install-methods .install-btn-text:hover {
  color: #111;
}
.install-methods .install-btn-text.is-active {
  color: #111;
  text-decoration: underline;
  text-underline-offset: 6px;
}

.esim-install-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 16px auto 12px;
  padding: 14px 16px;
  background: #f8fafc; /* 淺中性背景 */
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-left: 4px solid #3c8dfa; /* 提醒用藍色 */
  border-radius: 14px;
}

.esim-install-note-icon {
  flex: 0 0 24px;
  height: 24px;
  margin-top: 2px;
  color: #3c8dfa;
}

.esim-install-note-content {
  font-size: 14px;
  line-height: 1.6;
  color: #111;
}

.esim-install-note-content ul {
  margin: 0;
  padding-left: 18px;
}

.esim-install-note-content li + li {
  margin-top: 6px;
}

.install-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 14px auto 10px;
}

.install-tab {
  border: 1px solid rgba(17, 17, 17, 0.12);
  background: #fff;
  color: rgba(17, 17, 17, 0.85);
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.install-tab.is-active {
  background: #111;
  color: #fff;
  border-color: rgba(17, 17, 17, 0.2);
}

.install-panel {
  margin: 0 auto;
}

.install-card {
  background: #edf8f8;
  border-radius: 24px;
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  box-shadow: 0 10px 26px rgba(17, 17, 17, 0.06);
}

.install-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(90deg, #3c8dfa, #28c891);
  color: #fff;
}

.install-card-icon {
  width: 84px;
  flex: 0 0 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.install-card-title .install-title {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

.install-card-title .install-subtitle {
  font-size: 13px;
  opacity: 0.9;
  font-weight: 600;
  margin-top: 2px;
}

.install-card-body {
  padding: 14px 14px 20px;
  color: #000;
}

.install-link {
  color: #3c8dfa;
  text-decoration: underline;
}

.install-instructions {
  margin-top: 14px;
}

.install-note {
  font-size: 14px;
  line-height: 21px;
  margin-top: 10px;
  font-family: "Outfit-Light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.install-qrcode-wrap {
  display: flex;
  justify-content: center;
  padding: 24px 0 10px;
}

.install-qrcode {
  width: 200px;
  margin: 0 auto;
}

.install-footnote {
  margin-top: 14px;
  font-size: 14px;
  line-height: 21px;
}

.install-footnote-strong {
  font-weight: 800;
  margin-bottom: 8px;
}

/* Auto 卡片（保留你原本的一鍵安裝那塊大 CTA） */
.install-card--auto {
  padding: 0 15px;
  text-align: center;
}

.install-h {
  font-size: 20px;
  font-weight: 800;
  color: #000;
}

.install-sub {
  font-size: 13px;
  color: #3c8dfa;
  font-weight: 700;
  margin-top: 6px;
  display: inline-block;
}

.install-desc {
  font-size: 14px;
  color: #000;
  margin-top: 10px;
  display: inline-block;
}

.install-cta-wrap {
  margin-top: 16px;
}

.install-cta-row {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, #3c8dfa, #28c891);
  padding: 14px 12px;
  border-radius: 45px;
  cursor: pointer;
}

.install-cta-icon {
  width: 72px;
  flex: 0 0 72px;
}

.install-cta-text {
  flex: 1;
  text-align: center;
}

@media (min-width: 768px) {
  .install-card-body {
    padding: 16px 18px 24px;
  }
}
/* Tabs bar */
.esim-top-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 0 14px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
  margin: 20px auto;
}

/* Tab button */
.tab-btn {
  appearance: none;
  border: 1px solid rgba(17, 17, 17, 0.12);
  background: #fff;
  color: rgba(17, 17, 17, 0.85);
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.tab-btn:hover {
  background: rgba(17, 17, 17, 0.03);
}

.tab-btn.is-active {
  border-color: rgba(17, 17, 17, 0.2);
  background: #111;
  color: #fff;
}

/* Content panel container */
.esim-tab-panel {
  margin: 14px auto 0;
}

.panel-title {
  font-size: 18px;
  font-weight: 800;
  margin: 6px 0 12px;
  color: #111;
}

/* Card */
.info-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 8px 22px rgba(17, 17, 17, 0.05);
}

/* Feature rows (like screenshot list blocks) */
.info-row {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(17, 17, 17, 0.06);
}

.info-row + .info-row {
  margin-top: 10px;
}

.info-ic {
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: rgba(17, 17, 17, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  font-size: 14px;
}

.info-title {
  font-weight: 800;
  color: #111;
  margin-bottom: 4px;
}

.info-desc {
  color: rgba(17, 17, 17, 0.7);
  font-size: 14px;
  line-height: 1.4;
}

/* Spec grid */
.spec-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.spec-item {
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(17, 17, 17, 0.06);
}

.spec-k {
  font-size: 12px;
  color: rgba(17, 17, 17, 0.6);
  margin-bottom: 6px;
}

.spec-v {
  font-size: 14px;
  font-weight: 700;
  color: #111;
  word-break: break-word;
}

/* Rules list */
.rules-list {
  margin: 0;
  padding-left: 18px;
  color: rgba(17, 17, 17, 0.8);
}

.rules-list li + li {
  margin-top: 8px;
}

@media (min-width: 768px) {
  .spec-grid {
    grid-template-columns: 1fr 1fr;
  }
}
/* ===== Summary Card ===== */
.esim-summary-top {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 10px;
}

.flag-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.flag-img {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

.flag-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(17, 17, 17, 0.08);
  pointer-events: none;
}

.esim-summary-title .hero-h1 {
  margin: 10px 0 0 0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #111;
}

.esim-summary-body {
  padding: 12px 16px 16px;
  border-top: 1px solid rgba(17, 17, 17, 0.06);
}

.summary-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.summary-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 17, 0.04);
  flex: 0 0 34px;
}

.summary-content .summary-label {
  font-size: 12px;
  color: rgba(17, 17, 17, 0.62);
  margin-bottom: 4px;
}

.summary-content .summary-value {
  font-size: 14px;
  color: #111;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  word-break: break-all;
}

.summary-content .esim-duplicate-icon {
  margin-left: 2px;
}

/* ===== Action Tabs (Accordion) ===== */
.esim-action-tabs {
  max-width: 980px;
  margin: 0 auto;
}

.action-item {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
  box-shadow: 0 6px 16px rgba(17, 17, 17, 0.05);
}

.action-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  font-size: 14px;
  font-weight: 600;
  color: #111;
  text-align: left;
}

.action-trigger:hover {
  background: rgba(17, 17, 17, 0.03);
}

.action-trigger.is-active {
  background: rgba(17, 17, 17, 0.04);
}

.action-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.action-caret {
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(17, 17, 17, 0.55);
  border-bottom: 2px solid rgba(17, 17, 17, 0.55);
  transform: rotate(45deg);
  transition: transform 160ms ease;
  margin-left: 12px;
  flex: 0 0 auto;
}

.action-trigger.is-active .action-caret {
  transform: rotate(-135deg);
}

.action-panel {
  border-top: 1px solid rgba(17, 17, 17, 0.06);
}

.action-panel-inner {
  padding: 12px 14px 14px;
  font-size: 14px;
  color: rgba(17, 17, 17, 0.85);
}

/* ===== RWD ===== */
@media (min-width: 768px) {
  .esim-summary-title .hero-h1 {
    font-size: 24px;
  }
  .esim-summary-top {
    padding: 16px 0 0 0px;
  }
  .esim-summary-body {
    padding: 14px 18px 18px;
  }
  .action-trigger {
    padding: 14px 16px;
    font-size: 14px;
  }
  .action-panel-inner {
    padding: 14px 16px 16px;
  }
}
.esim-detail-page {
  /* Theme tokens (keep neutral; map to your brand palette if needed) */
  --bg: #ffffff;
  --text: #111111;
  --muted: rgba(17, 17, 17, 0.65);
  --line: rgba(17, 17, 17, 0.12);
  --card: #ffffff;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  --shadow-soft: 0 6px 14px rgba(0, 0, 0, 0.06);
  --pad: 14px;
  --gap: 12px;
  --success: #14804a;
  --warning: #b25e00;
  --danger: #b42318;
  --neutral: #334155;
  background: var(--bg);
  color: var(--text);
}

.ed-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
}

/* Header */
.ed-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 14px;
}

.ed-title {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.ed-subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}

/* Grid */
.ed-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

@media (min-width: 992px) {
  .ed-grid {
    grid-template-columns: 1.25fr 0.9fr;
    gap: 18px;
  }
  .ed-container {
    padding: 20px;
  }
  .ed-title {
    font-size: 26px;
  }
}
/* Sections */
.ed-section {
  margin-top: 14px;
}

.ed-section-header {
  margin-bottom: 10px;
}

.ed-section-title {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
}

.ed-section-desc {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}

/* Card */
.ed-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--pad);
  box-shadow: var(--shadow-soft);
}

/* Buttons */
.ed-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  /* i18n-safe: allow long text */
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.ed-btn-sm {
  padding: 8px 10px;
  font-size: 13px;
}

.ed-btn-primary {
  background: #111;
  color: #fff;
}

.ed-btn-outline {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}

.ed-btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}

.ed-btn-icon {
  font-size: 16px;
  line-height: 1;
}

.ed-btn-text {
  line-height: 1.2;
}

/* A) Status card */
.ed-status-card {
  position: relative;
  overflow: hidden;
}

.ed-status-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: var(--line);
}

.ed-status-card.is-success::before {
  background: var(--success);
}

.ed-status-card.is-warning::before {
  background: var(--warning);
}

.ed-status-card.is-danger::before {
  background: var(--danger);
}

.ed-status-card.is-neutral::before {
  background: var(--neutral);
}

.ed-status-top {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: start;
}

.ed-status-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  font-weight: 700;
  color: var(--text);
  background: rgba(0, 0, 0, 0.03);
}

.ed-kicker {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

.ed-status-title {
  margin: 6px 0 0;
  font-size: 18px;
  line-height: 1.2;
  /* i18n-safe */
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .ed-status-title {
    font-size: 20px;
  }
}
.ed-status-desc {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
  /* i18n-safe */
  overflow-wrap: anywhere;
}

.ed-status-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ed-status-hint {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
}

.ed-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
  margin-top: 5px;
  flex: 0 0 auto;
}

/* B) Metrics */
.ed-metrics {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

@media (min-width: 576px) {
  .ed-metrics {
    grid-template-columns: 1fr 1fr;
  }
}
.ed-metric-card {
  padding: 14px;
}

.ed-metric-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.ed-metric-label {
  font-size: 13px;
  color: var(--muted);
}

/* Pills */
.ed-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.03);
  /* i18n-safe */
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.ed-pill.is-success {
  border-color: rgba(20, 128, 74, 0.35);
}

.ed-pill.is-warning {
  border-color: rgba(178, 94, 0, 0.35);
}

.ed-pill.is-danger {
  border-color: rgba(180, 35, 24, 0.35);
}

.ed-pill.is-neutral {
  border-color: rgba(51, 65, 85, 0.35);
}

.ed-metric-value {
  margin-top: 2px;
  font-size: 18px;
  line-height: 1.2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
}

.ed-metric-strong {
  font-weight: 800;
}

.ed-metric-muted {
  color: var(--muted);
  font-size: 13px;
}

.ed-progress {
  height: 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.ed-progress-bar {
  height: 100%;
  background: rgba(0, 0, 0, 0.55);
  width: 0;
}

.ed-metric-foot {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
  /* i18n-safe */
  flex-wrap: wrap;
}

.ed-foot-left,
.ed-foot-right {
  overflow-wrap: anywhere;
}

.ed-validity-lines {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.ed-kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  line-height: 1.35;
}

.ed-k {
  color: var(--muted);
  flex: 0 0 auto;
}

.ed-v {
  text-align: right;
  overflow-wrap: anywhere;
}

.ed-note {
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ed-unlimited-title {
  font-size: 16px;
  font-weight: 800;
  margin-top: 4px;
}

.ed-unlimited-list {
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.5;
  font-size: 13px;
}

.ed-unlimited-list li {
  margin: 6px 0;
  overflow-wrap: anywhere;
}

/* C) Stepper */
.ed-stepper {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.ed-step {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.02);
}

.ed-step-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid rgba(0, 0, 0, 0.25);
  margin-top: 4px;
}

.ed-step.is-active {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.18);
}

.ed-step.is-active .ed-step-dot {
  border-color: rgba(0, 0, 0, 0.55);
}

.ed-step.is-done .ed-step-dot {
  border-color: rgba(20, 128, 74, 0.55);
  background: rgba(20, 128, 74, 0.2);
}

.ed-step-title {
  font-weight: 800;
  font-size: 13.5px;
  line-height: 1.3;
}

.ed-step-desc {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ed-link {
  margin-top: 6px;
  display: inline-block;
  font-size: 12.5px;
  color: #111;
  text-decoration: underline;
}

/* D) Quick actions */
.ed-actions-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .ed-actions-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (min-width: 992px) {
  .ed-actions-grid {
    grid-template-columns: 1fr;
  }
}
.ed-action {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 12px;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 10px;
  align-items: start;
  text-decoration: none;
  color: inherit;
}

.ed-action-icon {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.03);
  font-weight: 700;
}

.ed-action-title {
  font-weight: 800;
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.ed-action-desc {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* E) Accordion */
.ed-accordion {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.ed-accordion-head {
  width: 100%;
  padding: 12px 12px;
  background: rgba(0, 0, 0, 0.02);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
}

.ed-accordion-title {
  font-weight: 800;
  font-size: 13.5px;
  /* i18n-safe */
  overflow-wrap: anywhere;
}

.ed-chevron {
  transform: rotate(0deg);
  font-size: 20px;
  line-height: 1;
}

.ed-accordion-body {
  padding: 12px;
  border-top: 1px solid var(--line);
}

.ed-kv-list {
  display: grid;
  gap: 10px;
}

.ed-kv-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 10px;
  align-items: start;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.02);
}

@media (max-width: 420px) {
  .ed-kv-row {
    grid-template-columns: 1fr;
  }
  .ed-v {
    text-align: left;
  }
}
.ed-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.ed-copy {
  margin-left: 10px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}

.ed-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  margin: 4px 6px 0 0;
  /* i18n-safe */
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ed-alert {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.02);
}

.ed-alert-title {
  font-weight: 800;
  font-size: 13.5px;
}

.ed-alert-desc {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* F) Support */
.ed-support {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  background: rgba(0, 0, 0, 0.02);
}

.ed-support-title {
  font-weight: 900;
  font-size: 14px;
  line-height: 1.25;
}

.ed-support-desc {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.ed-support-actions {
  margin-top: 12px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ed-support-note {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* RTL Support */
.esim-detail-page[dir=rtl] .ed-status-card::before {
  inset: 0 0 0 auto;
}

.esim-detail-page[dir=rtl] .ed-v {
  text-align: left;
}

.esim-detail-page[dir=rtl] .ed-action {
  text-align: right;
}

.esim-detail-page[dir=rtl] .ed-accordion-head {
  text-align: right;
}

.esim-detail-page[dir=rtl] .ed-copy {
  margin-left: 0;
  margin-right: 10px;
}

.esim-detail-page[dir=rtl] .ed-chip {
  margin: 4px 0 0 6px;
}

:root {
  --bg: #f6f7fb;
  --card: #ffffff;
  --text: #101828;
  --muted: #667085;
  --line: rgba(16, 24, 40, 0.08);
  --primary: #111827; /* 主 CTA 深色 */
  --primaryText: #ffffff;
  --soft: rgba(17, 24, 39, 0.06);
  --shadow: 0 12px 30px rgba(16, 24, 40, 0.08);
  --radius: 18px;
  --radiusSm: 14px;
}

/* Page */
.esim-page {
  background: var(--bg);
  color: var(--text);
  padding: 20px;
  padding-bottom: 96px; /* 給 mobile bottom bar 留空 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* Container feel */
.esim-hero {
  max-width: 1120px;
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 18px 16px;
}

/* Header top row */
.esim-hero__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.esim-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 999px;
  transition: background 0.2s ease;
}

.esim-back:hover {
  background: rgba(16, 24, 40, 0.04);
}

.esim-back__icon {
  font-size: 18px;
  line-height: 1;
}

.esim-flag {
  width: 44px;
  height: 30px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--line);
}

/* Title */
.esim-hero__titleRow {
  margin-top: 10px;
}

.esim-title {
  font-size: 22px;
  margin: 0;
  letter-spacing: -0.2px;
}

.esim-subtitle {
  margin-top: 2px;
  color: var(--muted);
  font-size: 14px;
}

/* Tabs */
.esim-tabs {
  margin-top: 14px;
  display: inline-flex;
  gap: 10px;
  padding: 6px;
  background: rgba(16, 24, 40, 0.04);
  border-radius: 999px;
}

.esim-tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
}

.esim-tab.is-active {
  background: #fff;
  color: var(--text);
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.08);
}

/* Info grid */
.esim-infoGrid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.esim-infoCard {
  display: flex;
  gap: 12px;
  padding: 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radiusSm);
  background: #fff;
}

.esim-infoCard__icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: rgba(16, 24, 40, 0.04);
  flex: 0 0 auto;
  font-size: 18px;
}

.esim-infoCard__kicker {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

.esim-infoCard__value {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* Copy button */
.esim-copyBtn {
  border: 1px solid var(--line);
  background: #fff;
  padding: 6px 10px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
}

.esim-copyBtn:hover {
  background: rgba(16, 24, 40, 0.03);
}

/* Actions row */
.esim-actions {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.esim-actions__secondary {
  display: inline-flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--primary);
  color: var(--primaryText);
  padding: 12px 18px;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
}

.btn-soft {
  background: var(--soft);
  color: var(--text);
  border: 1px solid rgba(16, 24, 40, 0.06);
}

.btn-dark {
  background: var(--primary);
  color: var(--primaryText);
}

.btn-block {
  width: 100%;
}

/* Status section */
.esim-statusWrap {
  max-width: 1120px;
  margin: 14px auto 0;
}

.esim-statusCard {
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* Head */
.esim-statusCard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}

.esim-statusCard__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.esim-statusIcon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(16, 24, 40, 0.04);
  font-size: 18px;
}

.esim-statusKicker {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
}

.esim-statusTitle {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 900;
}

/* Badge (更明顯) */
.esim-badge {
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.6px;
  border: 1px solid var(--line);
  background: rgba(16, 24, 40, 0.03);
}

.esim-badge.is-on {
  background: rgba(0, 140, 60, 0.1);
  border-color: rgba(0, 140, 60, 0.22);
}

.esim-badge.is-off {
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.22);
}

/* Body */
.esim-statusCard__body {
  padding: 14px 16px;
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
}

/* CTA row */
.esim-statusCard__ctaRow {
  padding: 14px 16px 16px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
}

/* Mobile bottom bar */
.esim-bottomBar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 12px 14px;
  background: rgba(246, 247, 251, 0.88);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  display: none; /* desktop 隱藏 */
  gap: 10px;
  justify-content: space-between;
  z-index: 1000;
}

.esim-bottomBar .btn-primary {
  flex: 1;
}

.esim-bottomBar .btn-ghost {
  width: 56px;
  padding: 12px 0;
}

/* RWD */
@media (max-width: 980px) {
  .esim-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .esim-actions__secondary {
    justify-content: flex-start;
  }
}
@media (max-width: 720px) {
  .esim-page {
    padding: 14px;
    padding-bottom: 92px;
  }
  .esim-hero {
    padding: 14px 14px 12px;
    border-radius: 16px;
  }
  .esim-title {
    font-size: 18px;
  }
  .esim-subtitle {
    font-size: 13px;
  }
  .esim-infoGrid {
    grid-template-columns: 1fr;
  }
  /* Mobile: 不讓桌面 actions 佔太多高度 */
  .esim-actions {
    display: none;
  }
}
.esim-installation .installType .g-0,
.esim-installation .installType .gx-0 {
  --bs-gutter-x: 5px;
}
.esim-installation .installType .page-title {
  font-size: 30px;
}
.esim-installation .installType .box1 {
  position: relative;
  right: 0;
}
.esim-installation .installType .box1 .selectBox1 {
  padding-top: 50px;
  padding-bottom: 45px;
  margin-left: auto;
  margin-right: 0;
  border-radius: 30px 0 0 30px;
}
.esim-installation .installType .box1 .selectBox1 .qrcode {
  margin: 0 auto;
  height: 232px;
  width: 250px;
  background: url(../img/picture/installation/thewaytochoose/scan_qr_w250.svg);
}
[dir=rtl] .esim-installation .installType .box1 .selectBox1 {
  border-radius: 0 30px 30px 0;
}
.esim-installation .installType .selectBtn {
  cursor: pointer;
  background: black;
  color: white;
  border-radius: 36px;
  max-width: 300px;
  margin: 20px auto 0;
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  padding: 7px 0 10px 0;
}
.esim-installation .installType .selectBtn .title {
  font-size: 22px;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.83px;
  text-align: center;
}
.esim-installation .installType .selectBtn .subtitle {
  font-size: 15px;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.83px;
  text-align: center;
}
.esim-installation .installType .selectBtn .selectBtn:hover {
  background: #595959;
}
.esim-installation .installType .box2 .selectBox2 {
  padding-top: 62px;
  padding-bottom: 45px;
  border-radius: 0px 30px 30px 0px;
}
.esim-installation .installType .box2 .selectBox2 .manual {
  margin: 0 auto 30px;
  height: 210px;
  width: 230px;
  background: url(../img/picture/installation/thewaytochoose/enter_manually_w230.svg);
}
[dir=rtl] .esim-installation .installType .box2 .selectBox2 {
  border-radius: 30px 0 0 30px;
}
@media (max-width: 768px) {
  .esim-installation .installType .page-title {
    font-size: 20px;
  }
  .esim-installation .installType .box1 {
    position: relative;
    right: 0;
  }
  .esim-installation .installType .box1 .selectBox1 {
    padding-top: 15px;
    padding-bottom: 20px;
    margin: 0 auto 5px;
    max-width: 300px;
    border-radius: 30px 30px 0 0;
  }
  .esim-installation .installType .box1 .selectBox1 .qrcode {
    margin: 0 auto;
    height: 140px;
    width: 150px;
    background: url(../img/picture/installation/thewaytochoose/scan_qr_w150.svg);
  }
  .esim-installation .installType .selectBtn {
    cursor: pointer;
    background: black;
    color: white;
    border-radius: 36px;
    max-width: 250px;
    margin: 0 auto;
    font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    padding: 4px 0 7px 0;
  }
  .esim-installation .installType .selectBtn .title {
    font-size: 24px;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.83px;
    text-align: center;
  }
  .esim-installation .installType .selectBtn .subtitle {
    font-size: 15px;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.83px;
    text-align: center;
  }
  .esim-installation .installType .box2 .selectBox2 {
    margin: 0 auto 5px;
    padding-top: 15px;
    padding-bottom: 20px;
    max-width: 300px;
    border-radius: 0px 0px 30px 30px;
  }
  .esim-installation .installType .box2 .selectBox2 .manual {
    margin: 0 auto;
    height: 140px;
    width: 150px;
    background: url(../img/picture/installation/thewaytochoose/enter_manually_w150.svg);
  }
}
.esim-installation .card {
  border-radius: 12px;
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.15);
  border: unset;
  max-width: 768px;
  margin: 0 auto;
}
.esim-installation .card .header {
  padding: 35px;
}
.esim-installation .card .header .brand .brand-btn {
  width: 375px;
}
.esim-installation .card .header .brand ul {
  width: 300px;
}
.esim-installation .card .header .warning {
  padding: 20px 40px;
  border-radius: 14px;
  background-image: linear-gradient(90deg, #ffe800, #72cd37);
}
.esim-installation .card .header .warning a {
  font-family: "Outfit-ExtraLight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: 0.19px;
  color: #000;
}
.esim-installation .card .header .installation-data {
  border-radius: 12px;
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.15);
  background-color: #fff;
}
.esim-installation .card .header .installation-data .title {
  font-family: "Outfit-ExtraLight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 200;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.15px;
  color: #595959;
}
.esim-installation .card .header .installation-data .data {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  color: #000;
}
.esim-installation .card .header .installation-data .text {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  color: #000;
}
.esim-installation .card .header .installation-data .qrcode {
  text-align: center;
}
.esim-installation .card .header .installation-data .qrcode img {
  width: 135px;
  height: 135px;
}
.esim-installation .card .header .installation-data .share-btn {
  text-align: left;
}
.esim-installation .card .header .installation-data .share-btn button {
  width: 192px;
  height: 44px;
  border-radius: 12px;
  background-color: #000;
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.83px;
  text-align: center;
  color: #fff;
}
@media (max-width: 768px) {
  .esim-installation .card .header .installation-data .share-btn {
    text-align: center;
  }
}
.esim-installation .card .guide .text-guide .list-group-item {
  border-left: unset;
  border-top: unset;
  border-right: unset;
  background: unset;
  border-bottom: solid 1px #eaebeb;
  padding-bottom: 10px;
  margin-bottom: 10px;
  padding-left: 0;
  padding-top: 0;
  padding-right: 0;
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  color: #000;
}
.esim-installation .card .guide .text-guide .title {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 20px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.95;
  letter-spacing: 0.25px;
  text-align: left;
  color: #000;
}
.esim-installation .card .guide .nav-tabs .nav-link:focus,
.esim-installation .card .guide .nav-tabs .nav-link:hover {
  border-color: transparent !important;
}
.esim-installation .card .guide .nav-tabs .nav-link {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: var(--bs-nav-link-font-size);
  font-weight: var(--bs-nav-link-font-weight);
  color: #595959;
  text-decoration: none;
  transition: none !important;
}
.esim-installation .card .guide .tab-content {
  background-color: #fafafa;
  border-radius: 0 0 12px 12px;
}
.esim-installation .card .guide .nav-tabs .nav-item.show .nav-link,
.esim-installation .card .guide .nav-tabs .nav-link.active {
  color: white;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  background-color: black;
}
.esim-installation .card .guide .nav-tabs .nav-item.show .nav-link,
.esim-installation .card .guide .nav-tabs .nav-link.active {
  color: white;
  border-top-left-radius: 28px;
  border-top-right-radius: 28px;
  background-color: black;
}
.esim-installation .card .guide .step1-title {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 20px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.95;
  letter-spacing: 0.25px;
  text-align: center;
  color: #000;
}
.esim-installation .card .guide .preparation {
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.15);
  background-color: #fff;
  margin-bottom: 30px;
}
.esim-installation .card .guide .preparation .title {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.6;
  letter-spacing: normal;
  text-align: center;
  color: #000;
}
.esim-installation .card .guide .preparation .content {
  font-family: "Outfit-Light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 14px;
  font-weight: 300;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.29;
  letter-spacing: -0.19px;
  color: #000;
}
.esim-installation .card .guide .carousel {
  margin: 0 auto;
  height: 623px;
  max-width: 360px;
}
.esim-installation .card .guide .carousel .carousel-indicators [data-bs-target] {
  height: 6px;
  background-color: black;
}
.esim-installation .card .guide .carousel .carousel-inner .carousel-item {
  height: 600px;
}
.esim-installation .card .guide .carousel .carousel-inner .carousel-item .title {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 0.25px;
  text-align: center;
  color: #000;
}
.esim-installation .card .guide .carousel .carousel-inner .carousel-item .current-step {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: #3c8dfa;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  text-align: center;
}
.esim-installation .card .guide .carousel .carousel-inner .carousel-item .description {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: #3c8dfa;
  font-size: 14px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  text-align: center;
  color: #000;
}
.esim-installation .card .guide .carousel .carousel-inner .carousel-item .pic {
  width: 180px;
  height: 380px;
  margin: 0 auto;
}
.esim-installation .card .guide .carousel .carousel-inner .carousel-item .carousel-caption {
  position: absolute;
  right: 0;
  bottom: 0;
  line-height: 18px;
  left: 0;
  padding-bottom: 1.25rem;
  color: #fff;
  text-align: center;
}
@media (max-width: 768px) {
  .esim-installation .card .guide .preparation {
    padding: 15px;
    margin-bottom: 45px;
  }
}
@media (max-width: 768px) {
  .esim-installation .card .header {
    padding: 15px 15px 12px 15px;
  }
  .esim-installation .card .header .brand .brand-btn {
    width: 100%;
  }
  .esim-installation .card .header .brand ul {
    width: 100%;
  }
  .esim-installation .card .header .warning {
    padding: 15px;
    border-radius: 14px;
    background-image: linear-gradient(90deg, #ffe800, #72cd37);
  }
  .esim-installation .card .header .warning a {
    font-family: "Outfit-ExtraLight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 12px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.4;
    letter-spacing: 0.19px;
    color: #000;
  }
  .esim-installation .card .guide .carousel {
    margin: 0 auto;
    height: 623px;
    width: 100%;
  }
}

.click-to-activate {
  font-size: 18px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  color: #fff;
}

.myesims .container {
  padding-bottom: 86px;
}
.myesims .card-tag {
  top: 0px;
  left: 12px;
}
[dir=rtl] .myesims .card-tag {
  left: unset !important;
  right: 12px;
}
.myesims .empty-cart {
  margin: 0 auto;
}
.myesims .empty-cart .buy-btn {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  width: 210px;
  height: 55px;
  font-size: 15px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.83px;
  text-align: center;
  border-radius: 28px;
  color: #fff;
}
.myesims .empty-cart .description {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: 0.19px;
  text-align: center;
  color: #000;
}
.myesims .empty-cart .title-1 {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 30px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 0.25px;
  text-align: center;
  color: #000;
}
@media (max-width: 768px) {
  .myesims .empty-cart .title-1 {
    font-size: 20px;
  }
}
.myesims .c-flag {
  text-align: end;
}
[dir=rtl] .myesims .c-flag {
  text-align: end;
}
.myesims .esimcard {
  padding: 38px 18px 18px;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15);
  background-color: #fff;
  border: unset;
  border-radius: 24px 65px 24px 24px;
}
[dir=rtl] .myesims .esimcard {
  border-radius: 65px 24px 24px 24px;
}
.myesims .esimcard .iccid {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.13px;
  color: #595959;
}
.myesims .esimcard .national-flag {
  width: 60px;
  height: 40px;
  border-radius: 6px 20px 6px 6px;
  box-shadow: 0 2px 14px 2px rgba(0, 0, 0, 0.2);
}
[dir=rtl] .myesims .esimcard .national-flag {
  border-radius: 20px 6px 6px 6px;
}
.myesims .esimcard .package-info {
  float: right;
}
.myesims .esimcard .package-info .adjust-icon {
  font-size: 30px;
  color: black;
  line-height: 34px;
}
.myesims .esimcard .package-info .item {
  border-bottom: 2px solid #eaebeb;
  padding-bottom: 11px;
  padding-top: 18px;
}
.myesims .esimcard .package-info .item .name-icon {
  font-size: 20px;
}
.myesims .esimcard .package-info .item .name {
  font-size: 12px;
  margin-left: 10px;
  vertical-align: super;
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 200;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.15px;
  color: #000;
}
.myesims .esimcard .package-info .item .item-quantity-box {
  width: 85px;
  height: 38px;
  padding: 5px 20px 4px 20px;
  border-radius: 12px;
  border: solid 2px #eaebeb;
  background-color: #fff;
  margin: 0 auto;
}
.myesims .esimcard .package-info .item .item-quantity-box .item-quantity {
  font-size: 20px;
  color: black;
  line-height: 10px;
  font-family: "Outfit-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.myesims .esimcard .package-info .item .itemvalue {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  text-align: right;
  color: #000;
}
.myesims .esimcard .package-info .itemQuantity {
  border-bottom: unset !important;
}
.myesims .esimcard .card-action .btn {
  border-radius: 12px;
  background-color: #eaebeb;
}
.myesims .esimcard .card-action .btn i {
  margin-left: 10px;
}
@media (max-width: 768px) {
  .myesims .container {
    padding-bottom: 40px;
  }
}

.myesimdetails {
  margin-bottom: 50px;
  /* 你反映的重點：Badge 必須一眼明顯 */
  /* 狀態配色（建議用更高對比，讓 badge 一定清楚） */
  /* NOT INSTALLED（尚未安裝） */
  /* 手機再壓縮一點高度 */
}
.myesimdetails .esim-status-wrap {
  margin-top: 16px;
}
.myesimdetails .esim-status-card {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  background: #fff;
}
.myesimdetails .esim-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px; /* 高度縮小 */
}
.myesimdetails .esim-status-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.myesimdetails .esim-status-icon {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.35);
  flex: 0 0 auto;
}
.myesimdetails .esim-status-icon svg {
  width: 18px;
  height: 18px;
}
.myesimdetails .esim-status-kicker {
  font-size: 12px;
  opacity: 0.9;
  line-height: 1.2;
}
.myesimdetails .esim-status-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}
.myesimdetails .esim-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 54px;
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.myesimdetails .esim-status-body {
  padding: 12px 14px 14px; /* 高度縮小 */
  background: #edf8f8;
  border: 1px solid #e0e0e0;
  border-radius: 0 0 14px 14px;
}
.myesimdetails .esim-status-desc {
  font-size: 14px;
  margin-top: 5px;
  line-height: 1.5;
  margin: 0 0 10px;
  color: rgba(0, 0, 0, 0.72);
}
.myesimdetails .esim-status-steps {
  margin: 0 0 10px;
  padding-left: 18px;
}
.myesimdetails .esim-status-steps li {
  margin: 4px 0;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(0, 0, 0, 0.7);
}
.myesimdetails .esim-status-card.is-on .esim-status-bar {
  background: linear-gradient(90deg, #22c55e, #10b981);
  color: #fff;
}
.myesimdetails .esim-status-card.is-on .esim-status-badge {
  background: #fff;
  color: #000;
  border-color: rgba(255, 255, 255, 0.5);
}
.myesimdetails .esim-status-card.is-off {
  /* OFF 反而要更醒目：白底黑字＋粗邊框 */
}
.myesimdetails .esim-status-card.is-off .esim-status-bar {
  background: linear-gradient(90deg, rgb(252, 190, 36), rgb(248, 113, 113));
  color: #fff;
}
.myesimdetails .esim-status-card.is-off .esim-status-badge {
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}
.myesimdetails .esim-status-card.is-not-installed {
  /* 可選：如果你 badge 裡有小點點 / icon，可以用這個色做強提示 */
}
.myesimdetails .esim-status-card.is-not-installed .esim-status-bar {
  /* Amber / Orange：代表需要完成安裝動作（非錯誤） */
  background: linear-gradient(90deg, #3c8dfa, #28c891);
  color: #fff; /* 黃橘底用深色字更清楚 */
}
.myesimdetails .esim-status-card.is-not-installed .esim-status-badge {
  /* 高對比：深底白字，視覺上最像「提醒/待處理」 */
  background: rgba(17, 17, 17, 0.92);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
  text-align: center;
}
.myesimdetails .esim-status-card.is-not-installed .esim-status-badge-dot {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25);
}
@media (max-width: 768px) {
  .myesimdetails .esim-status-bar {
    padding: 9px 12px;
  }
  .myesimdetails .esim-status-body {
    padding: 10px 12px 12px;
  }
  .myesimdetails .esim-status-title {
    font-size: 15px;
  }
}
.myesimdetails .esim-status {
  border-radius: 14px;
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.15);
  background-image: linear-gradient(90deg, #fcbe24, #f87171);
  padding: 19px 19px 19px 42px;
  border: unset;
}
.myesimdetails .esim-status .title {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 20px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 50px;
  letter-spacing: 0.25px;
  color: #fff;
}
.myesimdetails .esim-status .contactus .btn {
  width: 149px;
  height: 55px;
  border-radius: 28px;
  background-color: #000;
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.83px;
  text-align: center;
  color: #fff;
}
.myesimdetails .esim-status i {
  font-size: 30px;
  color: white;
}
.myesimdetails .esim-status .content {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.58;
  letter-spacing: 0.15px;
  color: #fff;
}
.myesimdetails .esim-status .icon {
  text-align: right;
  max-width: 120px;
}
.myesimdetails .esim-status .icon .t_1 {
  text-align: center;
}
.myesimdetails .esim-status .icon .t_2 {
  text-align: center;
}
.myesimdetails .esim-status .icon .contactus-title {
  vertical-align: text-top;
  line-height: normal;
}
.myesimdetails .esim-status .icon .fa-triangle-exclamation {
  font-size: 32px;
}
.myesimdetails .esim-status .icon a {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.15px;
  color: #fff;
}
.myesimdetails .esim-status .icon .fa-caret-down {
  font-size: 12px;
}
@media (max-width: 768px) {
  .myesimdetails .esim-status .title {
    font-size: 15px;
    line-height: normal;
  }
  .myesimdetails .esim-status .icon .fa-triangle-exclamation {
    font-size: 24px;
    color: white;
  }
  .myesimdetails .esim-status .contactus-title {
    vertical-align: text-top;
    line-height: normal;
  }
  .myesimdetails .esim-status .contactus {
    text-align: center;
  }
  .myesimdetails .esim-status .contactus .btn {
    width: 149px;
    height: 55px;
    margin: 0 30px 0 31px;
    border-radius: 28px;
    background-color: #000;
    font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 15px;
    font-weight: 600;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.83px;
    text-align: center;
    color: #fff;
  }
}
@media (max-width: 768px) {
  .myesimdetails .esim-status {
    padding: 20px;
  }
  .myesimdetails .esim-status .icon {
    text-align: left;
    max-width: 100%;
  }
  .myesimdetails .esim-status .icon .t_1 {
    text-align: left;
    max-width: 40px;
  }
  .myesimdetails .esim-status .icon .t_2 {
    text-align: left;
  }
}
.myesimdetails .show-more {
  border-radius: 6px;
  border: solid 1px #000;
}
.myesimdetails .header-1 {
  margin-bottom: 30px;
}
.myesimdetails .header-1 .productName {
  font-family: "Outfit-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  margin-top: 30px;
  font-size: 40px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.5px;
  color: #191919;
}
@media (max-width: 768px) {
  .myesimdetails .header-1 .productName {
    font-family: "Outfit-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    margin-top: 14px;
    font-size: 30px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.5px;
    color: #191919;
  }
}
@media (max-width: 768px) {
  .myesimdetails .header-1 {
    margin-bottom: 24px;
  }
}
.myesimdetails .header-sm .goback a {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 0.19px;
  color: #000;
  vertical-align: middle;
  line-height: 60px;
}
.myesimdetails .header-sm .goback i {
  font-size: 40px;
  vertical-align: middle;
}
.myesimdetails .header-sm .national-flag {
  width: 90px;
  height: 60px;
  border-radius: 6px 30px 6px 6px;
  box-shadow: 0 2px 14px 2px rgba(0, 0, 0, 0.2);
}
.myesimdetails .header-md .goback a {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 0.19px;
  color: #000;
  vertical-align: middle;
}
.myesimdetails .header-md .goback i {
  font-size: 40px;
  vertical-align: middle;
}
.myesimdetails .header-md .national-flag {
  width: 180px;
  height: 120px;
  border-radius: 6px 30px 6px 6px;
  box-shadow: 0 2px 14px 2px rgba(0, 0, 0, 0.2);
}
[dir=rtl] .myesimdetails .header-md .national-flag {
  border-radius: 30px 6px 6px 6px;
}
.myesimdetails .header {
  padding: 39px 48px;
}
.myesimdetails .additional-info .name-icon {
  font-size: 25px;
}
.myesimdetails .additional-info .title {
  font-family: "Outfit-ExtraLight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 200;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.15px;
  color: #000;
}
.myesimdetails .additional-info .content {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  color: #000;
  margin-top: 3px;
}
.myesimdetails .installation .ios {
  width: 100%;
  padding: 26px 30px 26px 26px;
}
.myesimdetails .installation .android {
  width: 100%;
  padding: 31px 30px 31px 26px;
}
.myesimdetails .data-usage {
  border: unset;
  border-radius: 12px;
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.15);
  background-color: #fff;
}
.myesimdetails .data-usage .expired {
  padding: 2px 17px 3px;
  background-color: #afafaf;
  color: white;
  height: 20px;
  width: 120px;
  margin: 0 0 0 auto;
  font-size: 12px;
}
.myesimdetails .data-usage .activated {
  padding: 3px 17px 2px;
  background-image: linear-gradient(90deg, #3c8dfa, #28c891);
  color: white;
  height: 20px;
  width: 120px;
  margin: 0 0 0 auto;
  font-size: 12px;
}
.myesimdetails .data-usage .notactivated {
  padding: 3px 17px 2px;
  background-color: #000;
  color: white;
  height: 20px;
  width: 120px;
  margin: 0 0 0 auto;
  font-size: 12px;
}
.myesimdetails .data-usage .daily-pass {
  position: absolute;
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-image: linear-gradient(270deg, #28c891, #3c8dfa);
  padding: 6px 23px 5px;
  top: 0px;
  left: 20px;
  font-size: 20px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.18px;
  color: white;
  border-radius: 0 0 20px 20px;
}
.myesimdetails .data-usage .title {
  font-size: 15px;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.95;
  letter-spacing: 0.25px;
  color: #000;
}
.myesimdetails .data-usage .progress {
  height: 36px;
  border-radius: 18px;
}
.myesimdetails .data-usage .data {
  border-bottom: solid 2px #eaebeb;
  line-height: 40px;
}
.myesimdetails .data-usage .data .data-title {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.15px;
  color: #000;
}
.myesimdetails .data-usage .data .data-value {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  text-align: right;
  color: #000;
}
.myesimdetails .my-packages {
  background-color: #fff;
}
.myesimdetails .my-packages .title {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.95;
  letter-spacing: 0.25px;
  color: #000;
}
.myesimdetails .my-packages .timezone {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 38px;
  letter-spacing: 0.15px;
  color: #595959;
}
.myesimdetails .my-packages .package .time {
  line-height: 16px;
}
.myesimdetails .my-packages .package .time a {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.15px;
  color: #595959 !important;
}
.myesimdetails .my-packages .package .time a span {
  font-family: "Outfit-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.myesimdetails .my-packages .package .status .expired {
  padding: 2px 17px 3px;
  background-color: #afafaf;
  color: white;
  height: 20px;
  width: 120px;
  margin: 0 0 0 auto;
}
.myesimdetails .my-packages .package .status .activated {
  padding: 3px 17px 2px;
  background-image: linear-gradient(90deg, #3c8dfa, #28c891);
  color: white;
  height: 20px;
  width: 120px;
  margin: 0 0 0 auto;
}
.myesimdetails .my-packages .package .status .notactivated {
  padding: 3px 5px 2px;
  background-color: #000;
  color: white;
  height: 20px;
  width: 120px;
  margin: 0 0 0 auto;
}
.myesimdetails .top-up {
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.15);
  background-color: #fff;
  border: unset;
  border-radius: 12px 12px 65px 65px;
}
.myesimdetails .top-up .title {
  height: 80px;
  border-radius: 12px 12px 0 0;
  padding: 20px 50px;
}
.myesimdetails .top-up .title a {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 20px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.95;
  letter-spacing: 0.25px;
  color: #000;
}
.myesimdetails .top-up .buy {
  width: 100%;
  background: linear-gradient(90deg, #3c8dfa, #28c891);
  border-radius: 50px;
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 600;
  margin: 0 auto;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.83px;
  text-align: center;
  color: #fff;
  height: 55px;
  border: unset;
  position: relative;
}
.myesimdetails .top-up .buy .item-count {
  position: absolute;
  right: 20px;
}
.myesimdetails .back-btn {
  border-radius: 28px;
  background-color: #000;
  margin: 50px auto;
  width: 80%;
  max-width: 270px;
  padding: 12px 60px;
}
@media (max-width: 768px) {
  .myesimdetails .header {
    padding: 30px 20px 20px 20px;
  }
  .myesimdetails .top-up .title {
    padding: 20px 20px;
  }
  .myesimdetails .addtocart {
    max-width: 446px;
  }
  .myesimdetails .expired {
    margin: unset !important;
  }
  .myesimdetails .activated {
    margin: unset !important;
  }
  .myesimdetails .notactivated {
    margin: unset !important;
  }
  .myesimdetails .buy {
    max-width: 446px;
    margin: 0 auto;
  }
}
.myesimdetails .buy {
  max-width: 446px;
  margin: 0 auto;
}

.data-usage-box {
  margin-bottom: 30px;
}

.more-install-detail {
  margin-bottom: 40px;
  margin-top: 35px;
}

.numbered-list {
  list-style-type: decimal;
  padding-left: 20px;
  font-family: "Outfit-Light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 14px;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.18px;
}

@media (max-width: 768px) {
  .myesimdetails {
    margin-bottom: 25px;
  }
  .more-install-detail {
    margin-bottom: 0px;
    margin-top: 30px;
  }
  .data-usage-box {
    margin-bottom: 0px;
  }
  .installation-data .title {
    font-family: "Outfit-ExtraLight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 12px;
    font-weight: 200;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.15px;
    color: #595959;
  }
  .installation-data .data {
    font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 15px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: normal;
    letter-spacing: 0.19px;
    color: #000;
  }
  .installation-data .qrcode {
    text-align: center;
  }
  .installation-data .share-btn {
    text-align: center;
  }
  .guide .carousel {
    margin: 0 auto;
    height: 623px;
    width: 100%;
  }
}
.settings .hi-user a {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  padding: 14px 40px;
  font-size: 20px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.25px;
  color: #191919;
}
.settings .login {
  margin: 15px;
}
.settings .login .btn {
  border-radius: 28px;
  background-color: #000;
  width: 100%;
}
.settings .card {
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.15);
  background-color: #fff;
  margin: 15px;
  padding: 4px 24px;
  border-radius: 12px;
  border: unset;
}
.settings .card .settings-item {
  position: relative;
  padding: 12px 0;
  border-bottom: 1px solid #eaebeb;
  cursor: pointer;
}
.settings .card .settings-item a {
  color: #000;
  font-size: 15px;
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.settings .card .settings-item i {
  position: absolute;
  right: 0px;
  left: unset;
}
[dir=rtl] .settings .card .settings-item i {
  left: 0px;
  right: unset;
  transform: rotate(180deg); /* rtl方向也旋转 */
}

.fa-chevron-right {
  transform: rotate(0deg); /* rtl方向也旋转 */
}
[dir=rtl] .fa-chevron-right {
  left: 0px;
  right: unset;
  transform: rotate(180deg); /* rtl方向也旋转 */
}

.fa-chevron-left {
  transform: rotate(0deg); /* rtl方向也旋转 */
}
[dir=rtl] .fa-chevron-left {
  left: 0px;
  right: unset;
  transform: rotate(180deg); /* rtl方向也旋转 */
}

.fa-caret-left {
  transform: rotate(0deg); /* rtl方向也旋转 */
}
[dir=rtl] .fa-caret-left {
  left: 0px;
  right: unset;
  transform: rotate(180deg); /* rtl方向也旋转 */
}

.fa-caret-right {
  transform: rotate(0deg); /* rtl方向也旋转 */
}
[dir=rtl] .fa-caret-right {
  left: 0px;
  right: unset;
  transform: rotate(180deg); /* rtl方向也旋转 */
}

.help-center .accordion {
  padding: 0px;
}
@media (max-width: 768px) {
  .help-center .accordion {
    padding: 0px 15px;
  }
}

.account-info .card {
  border: unset;
  max-width: 413px;
  margin: 0 auto;
  border-radius: 24px;
  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.15);
  background-color: #fff;
}
.account-info .card .title {
  padding: 11px 115px 10px 114px;
  object-fit: contain;
  border-radius: 24px 24px 0 0;
  text-align: center;
  background: #000;
  color: white;
  font-family: "Outfit-Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  color: #fff;
}
.account-info .card .mainx {
  padding: 15px 35px 35px 35px;
}
.account-info .card .mainx .back-btn i {
  vertical-align: sub;
}
.account-info .card .mainx .back-btn button:hover {
  border-color: white;
}
.account-info .card .mainx .back-btn button:active {
  border-color: white;
}
.account-info .card .mainx .back-btn button:focus {
  border-color: white;
}
.account-info .change {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  width: 122px;
  height: 55px;
  border-radius: 12px;
  background-color: #000;
  border-radius: 10px;
}
.account-info .delete-title {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  color: #000;
}
.account-info .delete-description {
  font-family: "Outfit-ExtraLight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 200;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.15px;
  color: #595959;
}
.account-info .submit {
  width: 210px;
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 600;
  padding: 18px 0;
  border-radius: 28px;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.83px;
  text-align: center;
  color: #fff;
}
.account-info .delete-btn {
  width: 210px;
  height: 44px;
  padding: 3px 52px;
  border-radius: 12px;
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.6;
  letter-spacing: 0.19px;
  text-align: center;
  color: #f77;
  box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.15);
  background-color: #fff;
}

.terms {
  max-width: 768px;
  margin: 0 auto;
  border-radius: 24px;
  box-shadow: 0 2px 24px 0 rgba(0, 0, 0, 0.15);
  padding: 50px 57px;
}
.terms .title {
  font-size: 15px;
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  letter-spacing: 0.19px;
  color: black;
}
.terms .content {
  font-size: 15px;
  font-family: "Outfit-Light", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  letter-spacing: 0.19px;
  color: #595959;
}

@media (max-width: 768px) {
  .terms {
    padding: 20px 15px;
  }
}
.order-history .empty-cart {
  margin: 0 auto;
}
.order-history .empty-cart .buy-btn {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  width: 210px;
  height: 55px;
  font-size: 15px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.83px;
  text-align: center;
  border-radius: 28px;
  color: #fff;
}
.order-history .empty-cart .description {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.6;
  letter-spacing: 0.19px;
  text-align: center;
  color: #000;
}
.order-history .empty-cart .title-1 {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 30px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 0.25px;
  text-align: center;
  color: #000;
}
@media (max-width: 768px) {
  .order-history .empty-cart .title-1 {
    font-size: 20px;
  }
}
.order-history .card {
  padding: 23px 30px 24px 24px;
  border-radius: 24px;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.15);
  background-color: #fff;
  border: unset;
}
.order-history .card .national-flag {
  width: 46px;
  height: 31px;
  object-fit: contain;
  border-radius: 6px 15px 6px 6px;
  box-shadow: 0 2px 14px 2px rgba(0, 0, 0, 0.2);
}
.order-history .card .orderid {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  color: #191919;
}
.order-history .card .orderTime {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.15px;
  color: #595959;
}
.order-history .card .price {
  font-family: "Outfit-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 20px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.25px;
  color: #000;
}
.order-history .card:hover,
.order-history .card:focus {
  background-color: var(--bs-light);
}
@media (max-width: 768px) {
  .order-history .card {
    max-width: 413px;
    margin: 0 auto;
  }
}

.order-details {
  margin-bottom: 86px;
}
.order-details .title {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 30px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.38px;
  text-align: center;
  color: #000;
}
.order-details .header-1 {
  margin-bottom: 30px;
}
.order-details .header-1 .productName {
  font-family: "Outfit-Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 20px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.25px;
  color: #191919;
}
.order-details .header-sm .goback a {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 0.19px;
  color: #000;
  vertical-align: middle;
  line-height: 60px;
}
.order-details .header-sm .goback i {
  font-size: 40px;
  vertical-align: middle;
}
.order-details .header-sm .national-flag {
  width: 90px;
  height: 60px;
  border-radius: 6px 30px 6px 6px;
  box-shadow: 0 2px 14px 2px rgba(0, 0, 0, 0.2);
}
.order-details .header-md .goback a {
  font-family: "Outfit-SemiBold", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: 0.19px;
  color: #000;
  vertical-align: middle;
}
.order-details .header-md .goback i {
  font-size: 40px;
  vertical-align: middle;
}
.order-details .header-md .national-flag {
  width: 180px;
  height: 120px;
  border-radius: 6px 30px 6px 6px;
  box-shadow: 0 2px 14px 2px rgba(0, 0, 0, 0.2);
}
.order-details .header {
  padding: 25px 20px;
}
.order-details .productContent {
  border-radius: 65px;
  max-width: 413px;
  border: unset;
  margin: 0 auto;
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.3);
  background-color: #fff;
}
.order-details .productContent .order-info {
  border-bottom: solid 1px #eaebeb;
}
.order-details .productContent .order-info .item-title {
  font-family: "Outfit-ExtraLight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 12px;
  font-weight: 200;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.15px;
  color: #000;
}
.order-details .productContent .order-info .item-value {
  font-family: "Outfit-Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  letter-spacing: 0.19px;
  color: #000;
}
@media (max-width: 768px) {
  .order-details .header {
    padding: 30px 20px 20px 20px;
  }
  .order-details .addtocart {
    max-width: 446px;
  }
  .order-details .buy {
    max-width: 446px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .productDetails {
    margin-bottom: 25px;
  }
}

/*# sourceMappingURL=all.css.map */