/* Shimmer Animation Keyframes */
@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }

  100% {
    background-position: calc(200px + 100%) 0;
  }
}

/* Shimmer Base Class */
.shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

/* Other Payment Options Shimmer */
.other-payment-options-shimmer {
  padding: 20px;
}

/* Title Shimmer */
.section-title-shimmer {
  height: 24px;
  width: 200px;
  margin-bottom: 8px;
}

/* Subtitle Shimmer */
.section-sub-shimmer {
  height: 16px;
  width: 280px;
  margin-bottom: 18px;
}

/* Payment Option Card Shimmer */
.payment-option-card-shimmer {
  display: flex;
  align-items: center;
  padding: 16px;
  margin-bottom: 12px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Avatar Shimmer */
.payment-option-avatar-shimmer {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 12px;
  flex-shrink: 0;
}

/* Label Shimmer */
.payment-option-label-shimmer {
  height: 18px;
  width: 120px;
  margin-right: auto;
}

/* Chevron Icon Shimmer */
.payment-option-chevron-shimmer {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Container Shimmer */
.other-payment-options-container-shimmer {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
}

/* Multiple Payment Option Cards Shimmer */
.payment-options-list-shimmer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Multiple Dashboards Specific Shimmers */
.multiple-dashboards-card-shimmer {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 24px;
}

.multiple-dashboards-cont-shimmer {
  margin-bottom: 16px;
}

/* Header Row Shimmer */
.md-header-row-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.md-header-left-shimmer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.md-plan-title-shimmer {
  height: 24px;
  width: 150px;
  border-radius: 4px;
}

.md-plan-subtext-shimmer {
  height: 16px;
  width: 200px;
  border-radius: 100px;
}

.md-active-link-shimmer {
  height: 18px;
  width: 100px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Usage Row Shimmer */
.md-usage-row-shimmer {
  margin-bottom: 20px;
}

.md-usage-swiper-shimmer {
  display: flex;
  gap: 12px;
  overflow: hidden;
}

.md-usage-box-shimmer {
  min-width: 140px;
  height: 120px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}

.md-usage-title-shimmer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.md-usage-icon-shimmer {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}

.md-usage-label-shimmer {
  height: 14px;
  width: 80px;
  border-radius: 3px;
  flex: 1;
}

.md-usage-amount-shimmer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  justify-content: center;
}

.md-usage-value-shimmer {
  height: 18px;
  width: 60px;
  border-radius: 3px;
}

.md-usage-desc-shimmer {
  height: 12px;
  width: 100px;
  border-radius: 3px;
}

/* Bill Row Shimmer */
.md-bill-row-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.md-bill-left-shimmer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.md-bill-amount-shimmer {
  height: 20px;
  width: 60px;
  border-radius: 4px;
}

.md-bill-subtext-shimmer {
  height: 14px;
  width: 150px;
  border-radius: 3px;
}

.md-bill-link-shimmer {
  height: 16px;
  width: 80px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Pay Button Shimmer */
.md-pay-button-shimmer {
  height: 44px;
  width: 100%;
  border-radius: 100px;
  margin-bottom: 16px;
}

/* Auto Pay Row Shimmer */
.md-autopay-row-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.md-autopay-label-shimmer {
  height: 16px;
  width: 120px;
  border-radius: 4px;
}

.md-autopay-switch-shimmer {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: #e0e0e0;
  position: relative;
}

/* Error Section Shimmer */
.md-error-row-shimmer {
  background: #fff5f5;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
}

.md-error-row-cont-shimmer {
  display: flex;
  align-items: center;
  gap: 12px;
}

.md-error-icon-shimmer {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.md-error-text-shimmer {
  height: 14px;
  width: 250px;
  border-radius: 3px;
  flex: 1;
}

/* Warning Section Shimmer */
.md-warning-row-shimmer {
  background: #fffbf0;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.md-warning-icon-shimmer {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.md-warning-text-shimmer {
  height: 14px;
  width: 200px;
  border-radius: 3px;
  flex: 1;
}

/* Active Section Shimmer */
.md-active-row-shimmer {
  background: #f0f9ff;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.md-active-icon-shimmer {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.md-active-text-shimmer {
  height: 14px;
  width: 220px;
  border-radius: 3px;
  flex: 1;
}

/* Payment Method Specific Shimmers */
.pm-title-shimmer {
  height: 28px;
  width: 300px;
}

.pm-total-bar-shimmer {
  height: 60px;
  width: 100%;
  margin-bottom: 24px;
  border-radius: 8px;
}

.pm-section-title-shimmer {
  height: 24px;
  width: 180px;
  margin-bottom: 8px;
}

.pm-section-sub-shimmer {
  height: 16px;
  width: 250px;
  margin-bottom: 18px;
}

.pm-option-card-shimmer {
  display: flex;
  align-items: center;
  padding: 16px;
  margin-bottom: 12px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.pm-option-radio-shimmer {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 12px;
  flex-shrink: 0;
}

.pm-option-label-shimmer {
  height: 18px;
  width: 140px;
  margin-right: auto;
}

.pm-option-logo-shimmer {
  width: 40px;
  height: 26px;
  border-radius: 4px;
  flex-shrink: 0;
}

.pm-add-card-shimmer {
  height: 60px;
  width: 100%;
  border-radius: 8px;
  border: 2px dashed #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
}

.pm-add-card-icon-shimmer {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 8px;
}

.pm-add-card-text-shimmer {
  height: 16px;
  width: 120px;
}

/* Bill History Specific Shimmers */
.bh-user-switcher-shimmer {
  padding: 16px;
  margin-bottom: 20px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.bh-user-name-shimmer {
  height: 20px;
  width: 120px;
  margin-bottom: 12px;
}

.bh-user-row-shimmer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bh-user-number-shimmer {
  height: 18px;
  width: 100px;
}

.bh-user-switch-shimmer {
  display: flex;
  gap: 8px;
}

.bh-user-switch-btn-shimmer {
  height: 32px;
  width: 80px;
  border-radius: 16px;
}

.bh-bill-item-shimmer {
  margin-bottom: 16px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  overflow: hidden;
  width: 100%;
}

.bh-bill-item-cont-shimmer {
  padding: 16px;
}

.bh-bill-item-main-shimmer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bh-bill-amount-date-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bh-bill-amount-shimmer {
  height: 20px;
  width: 80px;
}

.bh-bill-date-shimmer {
  height: 16px;
  width: 100px;
}

.bh-bill-view-link-shimmer {
  height: 16px;
  width: 120px;
}

.bh-bill-divider-shimmer {
  height: 1px;
  width: 100%;
  background: #e0e0e0;
  margin: 8px 0;
}

.bh-bill-status-amount-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bh-bill-status-text-shimmer {
  height: 16px;
  width: 100px;
}

.bh-bill-amount-pr-shimmer {
  height: 18px;
  width: 80px;
}

.bh-bill-status-cont-shimmer {
  padding: 12px 16px;
  background: #f8f9fa;
  border-top: 1px solid #e0e0e0;
}

.bh-bill-status-btn-shimmer {
  height: 36px;
  width: 100px;
  border-radius: 18px;
}

/* Payment History Specific Shimmers */
.ph-main-container-shimmer {
  /* padding: 20px; */
}

.ph-card-shimmer {
  margin-bottom: 16px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  overflow: hidden;
  width: 100%;
}

.ph-date-shimmer {
  height: 16px;
  width: 100px;
  margin: 16px 16px 8px 16px;
}

.ph-card-content-shimmer {
  padding: 0 16px 16px 16px;
}

.ph-row-top-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.ph-number-shimmer {
  height: 18px;
  width: 120px;
}

.ph-amount-arrow-shimmer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ph-amount-shimmer {
  height: 18px;
  width: 60px;
}

.ph-arrow-shimmer {
  width: 22px;
  height: 22px;
  border-radius: 4px;
}

.ph-row-name-shimmer {
  height: 16px;
  width: 80px;
  margin-bottom: 12px;
}

.ph-divider-shimmer {
  height: 1px;
  width: 100%;
  background: #e0e0e0;
  margin: 12px 0;
}

.ph-row-bill-shimmer {
  margin-bottom: 8px;
}

.ph-bill-label-shimmer {
  height: 16px;
  width: 100px;
}

.ph-row-card-shimmer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ph-card-logo-shimmer {
  width: 36px;
  height: 24px;
  border-radius: 4px;
}

.ph-card-type-shimmer {
  height: 16px;
  width: 120px;
}

/* View Bill Specific Shimmers */
.vb-main-container-shimmer {
  padding: 20px;
}

.vb-bill-image-shimmer {
  width: 100%;
  height: 600px;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
}

/* Pay Voucher Specific Shimmers */
.pv-section-title-shimmer {
  height: 24px;
  width: 200px;
  margin-bottom: 8px;
}

.pv-section-sub-shimmer {
  height: 16px;
  width: 280px;
  margin-bottom: 24px;
}

.pv-info-card-shimmer {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 20px;
  margin-bottom: 24px;
  width: 100%;
}

.pv-input-section-shimmer {
  margin-bottom: 20px;
}

.pv-input-label-shimmer {
  height: 16px;
  width: 180px;
  margin-bottom: 8px;
}

.pv-input-field-shimmer {
  height: 48px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
  position: relative;
}

.pv-input-icon-shimmer {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

.pv-info-section-shimmer {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 20px;
  margin-bottom: 24px;
}

.pv-info-title-shimmer {
  height: 20px;
  width: 200px;
  margin-bottom: 12px;
}

.pv-info-subtitle-shimmer {
  height: 16px;
  width: 100%;
  margin-bottom: 20px;
}

.pv-info-steps-shimmer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pv-info-step-shimmer {
  display: flex;
  gap: 12px;
}

.pv-step-number-shimmer {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pv-step-content-shimmer {
  flex: 1;
}

.pv-step-label-shimmer {
  height: 16px;
  width: 150px;
  margin-bottom: 4px;
}

.pv-step-description-shimmer {
  height: 14px;
  width: 100%;
}

/* Payment Success Specific Shimmers */
.ps-main-container-shimmer {
  padding: 20px;
}

.ps-price-shimmer {
  height: 36px;
  width: 200px;
  margin: 0px 0px 16px 0px;
  text-align: center;
  border-radius: 8px;
}

.ps-status-shimmer {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 32px;
}

.ps-status-icon-shimmer {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ps-status-text-shimmer {
  height: 18px;
  width: 140px;
  border-radius: 4px;
}

.ps-transaction-card-shimmer {
  background: #ffffff;
  border-radius: 12px;
  border: 0px solid #e0e0e0;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ps-transaction-title-shimmer {
  height: 24px;
  width: 180px;
  margin-bottom: 24px;
  border-radius: 6px;
}

.ps-transaction-row-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.ps-transaction-row-shimmer:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.ps-row-label-shimmer {
  height: 16px;
  width: 120px;
  border-radius: 4px;
  flex-shrink: 0;
}

.ps-row-value-shimmer {
  height: 16px;
  width: 100px;
  border-radius: 4px;
  text-align: right;
}

.ps-row-value-column-shimmer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
}

.ps-row-value-item-shimmer {
  height: 14px;
  width: 100px;
  border-radius: 3px;
}

/* Plan Manage Specific Shimmers */
.pm-plan-container-shimmer {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 24px;
}

.pm-plan-tabs-shimmer {
  display: flex;
  border-bottom: 1px solid #e0e0e0;
  margin: -16px -16px 24px;
}

.pm-plan-tab-shimmer {
  flex: 1;
  height: 44px;
  border-radius: 4px;
  margin: 0 4px;
}

.pm-plan-details-shimmer {
  margin-bottom: 24px;
}

.pm-plan-name-shimmer {
  height: 24px;
  width: 200px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.pm-plan-offer-shimmer {
  height: 20px;
  width: 180px;
  margin-bottom: 4px;
  border-radius: 4px;
}

.pm-plan-renewal-shimmer {
  height: 16px;
  width: 150px;
  border-radius: 4px;
}

.pm-allowance-container-shimmer {
  padding: 2px 2px 18px;
}

.pm-allowance-swiper-shimmer {
  display: flex;
  gap: 10px;
  overflow: hidden;
}

.pm-allowance-card-shimmer {
  min-width: 120px;
  height: 100px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
}

.pm-allowance-icon-shimmer {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.pm-allowance-value-shimmer {
  height: 16px;
  width: 60px;
  border-radius: 3px;
}

.pm-allowance-label-shimmer {
  height: 12px;
  width: 80px;
  border-radius: 3px;
}

.pm-change-plan-button-shimmer {
  height: 44px;
  width: 100%;
  border-radius: 8px;
  margin-top: 16px;
}

/* Plan Manage Detail Specific Shimmers */
.pmd-plan-container-shimmer {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 24px;
}

.pmd-plan-details-shimmer {
  margin-bottom: 24px;
}

.pmd-plan-name-shimmer {
  height: 24px;
  width: 180px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.pmd-plan-renewal-shimmer {
  height: 16px;
  width: 250px;
  border-radius: 4px;
}

.pmd-allowance-container-shimmer {
  padding: 2px 2px 18px;
}

.pmd-allowance-swiper-shimmer {
  display: flex;
  gap: 10px;
  overflow: hidden;
}

.pmd-allowance-card-shimmer {
  min-width: 120px;
  height: 100px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
}

.pmd-allowance-icon-shimmer {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}

.pmd-allowance-value-shimmer {
  height: 16px;
  width: 60px;
  border-radius: 3px;
}

.pmd-allowance-label-shimmer {
  height: 12px;
  width: 80px;
  border-radius: 3px;
}

.pmd-change-plan-button-shimmer {
  height: 44px;
  width: 100%;
  border-radius: 8px;
  margin-top: 16px;
  margin-bottom: 12px;
}
.ys-container-shimmer{
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 30px;
}

.pmd-view-more-button-shimmer {
  height: 36px;
  width: 120px;
  border-radius: 6px;
  margin: 0 auto;
  display: block;
}

.ys-section-title-shimmer {
  height: 24px;
  width: 200px;
  border-radius: 4px;
}

.ys-section-sub-shimmer {
  height: 16px;
  width: 180px;
  border-radius: 4px;
}

.ys-filter-tabs-shimmer {
  display: flex;
  gap: 12px;
}

.ys-filter-tab-shimmer {
  height: 36px;
  width: 80px;
  border-radius: 18px;
}

.ys-subscription-cards-container-shimmer {
  overflow: hidden;
}

.ys-subscription-swiper-shimmer {
  display: flex;
  gap: 12px;
  overflow: hidden;
}

.ys-subscription-card-shimmer {
  width: 162px;
  height: 160px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
}

.ys-status-tag-shimmer {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ys-status-icon-shimmer {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: none;
}

.ys-status-text-shimmer {
  height: 18px;
  width: 80px;
  border-radius: 3px;
}

.ys-subscription-info-shimmer {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ys-subscription-name-shimmer {
  height: 22px;
  width: 100%;
  border-radius: 3px;
}

.ys-subscription-description-shimmer {
  height: 32px;
  width: 100%;
  border-radius: 3px;
}

.ys-subscription-action-shimmer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.ys-toggle-container-shimmer {
  width: 100px;
  height: 24px;
  border-radius: 6px;
  background: #e0e0e0;
  position: relative;
}

.ys-change-plan-link-shimmer {
  height: 26px;
  width: 100px;
  border-radius: 6px;
}

/* Manage Default Specific Shimmers */
.md-container-shimmer {
  /* padding: 20px; */
}

.md-section-title-shimmer {
  height: 24px;
  width: 200px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.md-section-sub-shimmer {
  height: 16px;
  width: 300px;
  margin-bottom: 24px;
  border-radius: 4px;
}

.md-services-container-shimmer {
  overflow: hidden;
}

.md-services-swiper-shimmer {
  display: flex;
  gap: 12px;
  overflow: hidden;
}

.md-service-card-shimmer {
  min-width: 200px;
  /* height: 120px; */
  background: #ffffff;
  border-radius: 100px;
  border: 1px solid #e0e0e0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
}

.md-service-content-shimmer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.md-service-description-shimmer {
  height: 16px;
  width: 140px;
  border-radius: 3px;
  text-align: center;
}

/* Steps Verify Specific Shimmers */
.steps-verify-container {
  background: #F6F6F6;
}

.steps-verify-title-shimmer {
  height: 28px;
  width: 300px;
  margin-bottom: 16px;
  border-radius: 4px;
}

.steps-verify-number-shimmer {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.steps-verify-step-title-shimmer {
  height: 20px;
  width: 250px;
  margin-bottom: 8px;
  border-radius: 3px;
}

.steps-verify-step-description-shimmer {
  height: 16px;
  width: 100%;
  margin-bottom: 4px;
  border-radius: 3px;
}

.steps-verify-app-icon-shimmer {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  flex-shrink: 0;
}

.steps-verify-connector-shimmer {
  width: 2px;
  height: 40px;
  margin: 8px 0;
  border-radius: 1px;
}

/* Success Page Specific Shimmers */
.success-page-root {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background: #f8f9fa; */
  padding: 20px;
}

.success-main-content {
  width: 100%;
  max-width: 375px;
  margin: 0 auto;
}

.success-container {
  background: #ffffff;
  border-radius: 16px;
  padding: 70px 16px;
}

/* Success Icon Shimmer */
.success-icon-shimmer {
  width: 40px;
  height: 40px;
  margin: 0 auto 24px auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-icon-circle-shimmer {
  width: 60px;
  height: 40px;
  border-radius: 50%;
}

/* Success Title Shimmer */
.success-title-shimmer {
  height: 32px;
  width: 120px;
  margin: 0 auto 16px auto;
  border-radius: 4px;
}

/* Success Message Shimmer */
.success-message-shimmer {
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.success-message-line-1 {
  height: 16px;
  width: 280px;
  border-radius: 3px;
}

.success-message-line-2 {
  height: 16px;
  width: 240px;
  border-radius: 3px;
}

/* Success Actions Shimmer */
.success-actions-shimmer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.success-continue-btn-shimmer {
  height: 48px;
  width: 100%;
  border-radius: 8px;
  display: none;
}

.success-back-btn-shimmer {
  height: 32px;
  width: 100%;
  border-radius: 6px;
}

/* Info Component Specific Shimmers */
.okw-info-shimmer {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 24px;
}

.okw-info-header-shimmer {
  background: #333333;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
}

.okw-info-question-shimmer {
  height: 20px;
  width: 180px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.okw-info-description-shimmer {
  height: 16px;
  width: 250px;
  border-radius: 4px;
}

.okw-info-live-chat-shimmer {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.okw-info-live-inner-shimmer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.okw-info-chat-icon-shimmer {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

.okw-info-chat-text-shimmer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.okw-info-chat-title-shimmer {
  height: 18px;
  width: 100px;
  border-radius: 3px;
}

.okw-info-chat-subtitle-shimmer {
  height: 14px;
  width: 120px;
  border-radius: 3px;
}

.okw-info-chat-chevron-shimmer {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Okw Recent Purchases Specific Shimmers */
.okw-recent-purchases-container-shimmer {
  /* padding: 20px; */
}

.okw-recent-purchases-title-row-shimmer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.okw-recent-purchases-title-shimmer {
  height: 24px;
  width: 200px;
  border-radius: 4px;
}

.okw-recent-purchases-title-line-shimmer {
  height: 2px;
  width: 60px;
  border-radius: 1px;
  display: none;
}

.okw-recent-purchases-swiper-shimmer {
  display: flex;
  gap: 16px;
  overflow: hidden;
}

.okw-recent-purchase-card-shimmer {
  min-width: 280px;
  height: 160px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
}

.okw-recent-purchase-type-shimmer {
  height: 16px;
  width: 80px;
  border-radius: 3px;
}

.okw-recent-purchase-header-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1;
}

.okw-recent-purchase-cont-shimmer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.okw-recent-purchase-title-shimmer {
  height: 18px;
  width: 150px;
  border-radius: 3px;
}

.okw-recent-purchase-price-shimmer {
  height: 16px;
  width: 80px;
  border-radius: 3px;
}

.okw-recent-purchase-repeat-btn-shimmer {
  height: 30px;
  width: 98px;
  border-radius: 100px;
  flex-shrink: 0;
}

.okw-recent-purchase-features-shimmer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.okw-recent-purchase-feature-shimmer {
  display: flex;
  align-items: center;
  gap: 6px;
}

.okw-recent-purchase-feature-icon-shimmer {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.okw-recent-purchase-feature-value-shimmer {
  height: 14px;
  width: 60px;
  border-radius: 3px;
}

.okw-recent-purchase-feature-separator-shimmer {
  height: 14px;
  width: 2px;
  border-radius: 2px;
}

/* Mobile Number Amount List Specific Shimmers */
.mnal-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mnal-checkbox-shimmer {
  border-radius: 4px;
}

.mnal-all-numbers-shimmer {
  margin-left: 8px;
}

.mnal-add-btn-shimmer {
  border-radius: 80px;
}

.mnal-row {
  padding: 16px 0;
}

.mnal-row-main {
  display: flex;
  gap: 8px;
}

.mnal-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mnal-label-group {
  display: flex;
  gap: 12px;
}

.mnal-input-group {
  display: flex;
  gap: 16px;
}

.mnal-input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.mnal-input-wrapper.close {
  position: relative;
}

.mnal-input-wrapper.contact {
  position: relative;
}

.mnal-input-icon-shimmer {
  flex-shrink: 0;
}

.mnal-input-shimmer {
  flex: 1;
}

.mnal-currency-shimmer {
  flex-shrink: 0;
}

.mnal-amount-input-shimmer {
  flex: 1;
}

.mnal-meta-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mnal-username-shimmer {
  /* flex: 1; */
}

.mnal-days-shimmer {
  text-align: right;
}

.mnal-status-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  margin-top: 4px;
}

.mnal-status-error {
  color: #dc3545;
}

.mnal-status-nojoom {
  color: #ffc107;
}

.mnal-status-icon-shimmer {
  flex-shrink: 0;
}

.mnal-status-text-shimmer {
  flex: 1;
}

.mnal-status-row-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  cursor: pointer;
}

.noti-cont {
  margin-top: 8px;
  /* padding-left: 32px; */
}

/* Internal Header Specific Shimmers */
.internal-header-shimmer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  gap: 12px;
}

.internal-header-left-shimmer {
  width: 24px;
  height: 24px;
  border-radius: 24px;
  flex-shrink: 0;
}

.internal-header-title-shimmer {
  height: 24px;
  width: 120px;
  border-radius: 4px;
  flex: 1;
}

.internal-header-right-shimmer {
  width: 24px;
  height: 24px;
  border-radius: 24px;
  flex-shrink: 0;
}

/* Other Settings Specific Shimmers */
.okw-other-settings-shimmer {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 24px;
}

.okw-other-settings-header-shimmer {
  margin-bottom: 24px;
}

.okw-other-settings-title-shimmer {
  height: 24px;
  width: 180px;
  border-radius: 4px;
}

.okw-other-settings-inner-shimmer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.okw-other-settings-item-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.okw-other-settings-label-shimmer {
  height: 18px;
  width: 120px;
  border-radius: 3px;
}

.okw-other-settings-language-selector-shimmer {
  display: flex;
  gap: 12px;
}

.okw-language-btn-shimmer {
  height: 36px;
  width: 80px;
  border-radius: 18px;
}

.okw-other-settings-chevron-shimmer {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}

.okw-other-settings-separator-shimmer {
  height: 1px;
  width: 100%;
  background: #e0e0e0;
  margin: 8px 0;
}

/* General Settings Specific Shimmers */
.okw-general-settings-shimmer {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-bottom: 24px;
}

.okw-general-settings-header-shimmer {
  margin-bottom: 24px;
}

.okw-general-settings-title-shimmer {
  height: 28px;
  width: 200px;
  border-radius: 4px;
}

.okw-general-settings-menu-shimmer {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.okw-general-settings-item-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.okw-general-settings-item-shimmer:last-child {
  border-bottom: none;
}

.okw-general-settings-inner-shimmer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.okw-general-settings-icon-shimmer {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  flex-shrink: 0;
}

.okw-general-settings-text-shimmer {
  height: 18px;
  width: 140px;
  border-radius: 3px;
}

.okw-general-settings-chevron-shimmer {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* My Rewards Specific Shimmers */
.okw-myrewards-section-shimmer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.okw-myrewards-banner-shimmer {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.okw-myrewards-content-shimmer {
  display: flex;
  align-items: center;
  gap: 16px;
}

.okw-myrewards-stars-shimmer {
  flex-shrink: 0;
}

.okw-myrewards-star-cluster-shimmer {
  width: 45px;
  height: 45px;
  border-radius: 50%;
}

.okw-myrewards-text-shimmer {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.okw-myrewards-title-shimmer {
  height: 20px;
  width: 120px;
  border-radius: 4px;
}

.okw-myrewards-points-shimmer {
  height: 16px;
  width: 80px;
  border-radius: 3px;
}

.okw-myrewards-chevron-shimmer {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Not Ooredoo Customer Specific Shimmers */
.not-ooredoo-customer-container-shimmer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.not-ooredoo-customer-illustration-shimmer {
  margin-bottom: 24px;
}

.not-ooredoo-customer-image-shimmer {
  width: 200px;
  height: 200px;
  border-radius: 8px;
  margin: 0 auto;
}

.not-ooredoo-customer-inner-shimmer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.not-ooredoo-customer-title-shimmer {
  height: 28px;
  width: 250px;
  border-radius: 4px;
}

.not-ooredoo-customer-subtitle-shimmer {
  height: 20px;
  width: 180px;
  border-radius: 4px;
}

/* NoContentFound Component Shimmer Styles */
.no-content-found-container-shimmer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
}

.no-content-found-illustration-shimmer {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 24px;
}

.no-content-found-image-shimmer {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto;
}

.no-content-found-inner-shimmer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.no-content-found-title-shimmer {
  height: 24px;
  width: 250px;
  border-radius: 4px;
}

.no-content-found-subtitle-shimmer {
  height: 20px;
  width: 180px;
  border-radius: 4px;
}

/* SignUp Details Specific Shimmers */
.signup-detail-container-shimmer {
  min-height: 100vh;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.signup-header-shimmer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
}

.signup-back-btn-shimmer {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.signup-header-title-shimmer {
  height: 24px;
  width: 150px;
  border-radius: 4px;
  flex: 1;
  margin: 0 16px;
}

.signup-header-icon-shimmer {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
}

.signup-form-shimmer {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.signup-title-section-shimmer {
  margin-bottom: 32px;
}

.signup-title-shimmer {
  height: 32px;
  width: 250px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.signup-subtitle-shimmer {
  height: 18px;
  width: 300px;
  border-radius: 3px;
}

.signup-form-section-shimmer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-bottom: 24px;
}

.signup-input-section-shimmer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.signup-input-label-shimmer {
  height: 16px;
  width: 120px;
  border-radius: 3px;
}

.signup-input-field-shimmer {
  height: 48px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
}

.signup-checkbox-row-shimmer {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 24px;
}

.signup-checkbox-shimmer {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
  margin-top: 2px;
}

.signup-checkbox-label-shimmer {
  height: 16px;
  width: 280px;
  border-radius: 3px;
  flex: 1;
}

.signup-footer-fixed-shimmer {
  padding: 20px;
  border-top: 1px solid #e0e0e0;
  background: #ffffff;
}

.signup-continue-btn-shimmer {
  height: 48px;
  width: 100%;
  border-radius: 8px;
  margin-bottom: 16px;
}

.signup-login-link-shimmer {
  height: 16px;
  width: 200px;
  border-radius: 3px;
  margin: 0 auto;
}

/* Manage Line Specific Shimmers */
.manage-line-container-shimmer {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.manage-line-header-shimmer {
  height: 48px;
  width: 100%;
  background: #f8f9fa;
  border-bottom: 1px solid #e0e0e0;
}

.manage-line-content-shimmer {
  padding: 20px;
}

.manage-line-title-group-shimmer {
  margin-bottom: 24px;
}

.manage-line-title-shimmer {
  height: 24px;
  width: 200px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.manage-line-subtitle-shimmer {
  height: 16px;
  width: 280px;
  border-radius: 4px;
}

.manage-line-filters-shimmer {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  align-items: flex-start;
  justify-content: flex-start;
}

.manage-line-filter-chip-shimmer {
  height: 36px;
  width: 80px;
  border-radius: 18px;
}

.manage-line-list-shimmer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.manage-line-card-shimmer {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.manage-line-card-row-shimmer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.manage-line-card-name-shimmer {
  height: 18px;
  width: 120px;
  border-radius: 3px;
}

.manage-line-card-number-switch-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.manage-line-card-number-shimmer {
  height: 16px;
  width: 60px;
  border-radius: 3px;
}

.manage-line-switch-shimmer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.manage-line-switch-thumb-shimmer {
  width: 32px;
  height: 20px;
  border-radius: 10px;
  background: #e0e0e0;
}

.manage-line-switch-buttons-shimmer {
  display: flex;
  gap: 4px;
}

.manage-line-switch-btn-shimmer {
  height: 24px;
  width: 50px;
  border-radius: 12px;
}

.manage-line-card-arrow-shimmer {
  width: 16px;
  height: 11px;
  border-radius: 2px;
  flex-shrink: 0;
}

.manage-line-not-ooredoo-section-shimmer {
  margin-top: 24px;
}

/* Pay Civil ID Specific Shimmers */
.pay-civil-id-page-shimmer {
  min-height: 100vh;
  background: #f8f9fa;
  width: 100%;
}

.pay-civil-id-header-shimmer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.pay-civil-id-back-btn-shimmer {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.pay-civil-id-title-shimmer {
  height: 24px;
  width: 120px;
  border-radius: 4px;
  flex: 1;
  margin: 0 16px;
}

.pay-civil-id-placeholder-shimmer {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.pay-civil-id-content-shimmer {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pay-civil-id-form-shimmer {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pay-civil-id-section-shimmer {
  margin-bottom: 20px;
}

.pay-civil-id-label-shimmer {
  height: 16px;
  width: 120px;
  margin-bottom: 8px;
  border-radius: 3px;
}

.pay-civil-id-input-shimmer {
  height: 48px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
}

.pay-civil-id-payment-methods-shimmer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.pay-civil-id-payment-method-shimmer {
  height: 48px;
  width: calc(50% - 6px);
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
}

.pay-civil-id-submit-btn-shimmer {
  height: 48px;
  width: 100%;
  border-radius: 8px;
  margin-top: 16px;
}

.pay-civil-id-info-shimmer {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pay-civil-id-info-title-shimmer {
  height: 20px;
  width: 180px;
  margin-bottom: 16px;
  border-radius: 4px;
}

.pay-civil-id-info-list-shimmer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pay-civil-id-info-item-shimmer {
  height: 14px;
  width: 100%;
  border-radius: 3px;
}

/* Offers For You Specific Shimmers */
.offers-for-you-container-shimmer {
  padding: 20px;
}

.offers-for-you-title-shimmer {
  height: 24px;
  width: 150px;
  margin-bottom: 20px;
  border-radius: 4px;
}

.offers-for-you-content-shimmer {
  display: flex;
  gap: 16px;
}

.offers-for-you-banner-shimmer {
  flex: 1;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  padding: 20px;
}

.offers-for-you-banner-content-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  height: 100%;
}

.offers-for-you-banner-inner-shimmer {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.offers-for-you-banner-title-shimmer {
  height: 18px;
  /* width: 120px; */
  border-radius: 3px;
}

.offers-for-you-explore-btn-shimmer {
  height: 32px;
  width: 80px;
  border-radius: 6px;
}

.offers-for-you-banner-image-shimmer {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  flex-shrink: 0;
}

.offers-for-you-grid-shimmer {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.offers-for-you-card-shimmer {
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 80px;
  width: 80px;
}

.offers-for-you-card-icon-shimmer {
  width: 36px;
  height: 36px;
  border-radius: 4px;
}

.offers-for-you-card-title-shimmer {
  height: 14px;
  width: 60px;
  border-radius: 3px;
}

/* Recommended Specific Shimmers */
.recommended-container-shimmer {
  padding: 20px;
}

.recommended-title-row-shimmer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.recommended-title-shimmer {
  height: 24px;
  width: 280px;
  border-radius: 4px;
}

.recommended-title-line-shimmer {
  height: 2px;
  width: 60px;
  border-radius: 1px;
  display: none;
}

.recommended-swiper-shimmer {
  display: flex;
  gap: 16px;
  overflow: hidden;
}

.recommended-card-shimmer {
  min-width: 120px;
  height: 120px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  padding: 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
  flex-direction: column;
}

.recommended-icon-shimmer {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex-shrink: 0;
}

.recommended-text-shimmer {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.recommended-label-shimmer {
  height: 18px;
  width: 80px;
  border-radius: 3px;
}

.recommended-parag-shimmer {
  height: 14px;
  width: 60px;
  border-radius: 3px;
}

.recommended-arrow-shimmer {
  width: 12px;
  height: 9px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Limited Time Offers Specific Shimmers */
.limited-time-offers-container-shimmer {
  /* padding: 20px; */
}

.limited-time-offers-title-row-shimmer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.limited-time-offers-title-shimmer {
  height: 24px;
  width: 200px;
  border-radius: 4px;
}

.limited-time-offers-title-line-shimmer {
  height: 2px;
  width: 60px;
  border-radius: 1px;
  display: none;
}

.limited-time-offers-slider-shimmer {
  overflow: hidden;
}

.limited-time-offers-swiper-shimmer {
  display: flex;
  gap: 16px;
  overflow: hidden;
}

.limited-time-offer-card-shimmer {
  min-width: 280px;
  height: 200px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
}

.limited-time-offer-new-tag-shimmer {
  position: absolute;
  top: 12px;
  right: 12px;
  height: 30px;
  width: 30px;
  border-radius: 30px;
}

.limited-time-offer-header-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.limited-time-offer-price-section-shimmer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.limited-time-offer-title-shimmer {
  height: 18px;
  width: 150px;
  border-radius: 3px;
}

.limited-time-offer-price-shimmer {
  height: 20px;
  width: 80px;
  border-radius: 4px;
}

.limited-time-offer-brand-shimmer {
  width: 60px;
  height: 30px;
  border-radius: 4px;
  flex-shrink: 0;
}

.limited-time-offer-features-shimmer {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: auto;
  height: 32px;
  border-top: 1px solid #e5e7eb;
  padding-top: 10px;
}

.limited-time-offer-feature-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 4px;
}

.limited-time-offer-feature-label-shimmer {
  height: 14px;
  width: 80px;
  border-radius: 3px;
}

.limited-time-offer-feature-value-shimmer {
  height: 14px;
  width: 60px;
  border-radius: 3px;
}

.limited-time-offer-description-shimmer {
  height: 20px;
  width: 100%;
  border-radius: 3px;
  border-top: 1px solid #e5e7eb;
  padding-top: 10px;
  margin-top: auto;
}

/* Buy New SIM Specific Shimmers */
.okw-buy-new-sim-container-shimmer {
  padding: 20px;
}

.okw-buy-new-sim-title-row-shimmer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.okw-buy-new-sim-title-shimmer {
  height: 24px;
  width: 150px;
  border-radius: 4px;
}

.okw-buy-new-sim-title-line-shimmer {
  height: 2px;
  width: 60px;
  border-radius: 1px;
  display: none;
}

.okw-buy-new-sim-swiper-shimmer {
  display: flex;
  gap: 16px;
  overflow: hidden;
}

.okw-buy-new-sim-card-shimmer {
  min-width: 200px;
  height: 100%;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
  position: relative;
}

.okw-buy-new-sim-card-header-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.okw-buy-new-sim-5g-shimmer {
  height: 20px;
  width: 30px;
  border-radius: 10px;
}

.okw-buy-new-sim-badge-shimmer {
  height: 20px;
  width: 80px;
  border-radius: 10px;
}

.okw-buy-new-sim-img-wrapper-shimmer {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 1;
}

.okw-buy-new-sim-img-shimmer {
  width: 50px;
  height: 60px;
  border-radius: 8px;
}

.okw-buy-new-sim-inner-shimmer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.okw-buy-new-sim-offer-shimmer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.okw-buy-new-sim-title-main-shimmer {
  height: 18px;
  width: 100px;
  border-radius: 3px;
}

.okw-buy-new-sim-subtitle-shimmer {
  height: 14px;
  width: 120px;
  border-radius: 3px;
}

.okw-buy-new-sim-price-row-shimmer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.okw-buy-new-sim-old-price-shimmer {
  height: 16px;
  width: 50px;
  border-radius: 3px;
}

.okw-buy-new-sim-new-price-shimmer {
  height: 18px;
  width: 60px;
  border-radius: 3px;
}

.okw-buy-new-sim-per-shimmer {
  height: 14px;
  width: 40px;
  border-radius: 3px;
}

/* Roaming Dashboard Specific Shimmers */
.rd-container-shimmer {
  padding: 20px;
}

.rd-header-section-shimmer {
  margin-bottom: 24px;
}

.rd-header-content-shimmer {
  display: flex;
  align-items: center;
  gap: 16px;
}

.rd-airplane-icon-shimmer {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rd-header-text-shimmer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.rd-header-title-shimmer {
  height: 24px;
  width: 180px;
  border-radius: 4px;
}

.rd-header-subtitle-shimmer {
  height: 16px;
  width: 220px;
  border-radius: 4px;
}

.rd-plan-section-shimmer {
  margin-bottom: 20px;
}

.rd-plan-card-shimmer {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rd-plan-info-shimmer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.rd-plan-title-shimmer {
  height: 20px;
  width: 200px;
  border-radius: 4px;
}

.rd-plan-status-shimmer {
  height: 16px;
  width: 100px;
  border-radius: 4px;
}

.rd-plan-button-shimmer {
  height: 36px;
  width: 80px;
  border-radius: 8px;
  flex-shrink: 0;
}

.rd-info-section-shimmer {
  margin-bottom: 20px;
}

.rd-info-content-shimmer {
  background: #fff5f5;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.rd-info-icon-shimmer {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rd-info-text-shimmer {
  height: 16px;
  width: 250px;
  border-radius: 4px;
  flex: 1;
}

.rd-balance-section-shimmer {
  margin-bottom: 20px;
}

.rd-balance-card-shimmer {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rd-balance-info-shimmer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.rd-balance-amount-shimmer {
  height: 24px;
  width: 100px;
  border-radius: 4px;
}

.rd-balance-title-shimmer {
  height: 18px;
  width: 140px;
  border-radius: 4px;
}

.rd-recharge-button-shimmer {
  height: 36px;
  width: 100px;
  border-radius: 8px;
  flex-shrink: 0;
}

.rd-auto-recharge-section-shimmer {
  margin-bottom: 20px;
}

.rd-auto-recharge-card-shimmer {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rd-auto-recharge-info-shimmer {
  flex: 1;
}

.rd-auto-recharge-title-shimmer {
  height: 18px;
  width: 200px;
  border-radius: 4px;
}

.rd-toggle-switch-shimmer {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: #e0e0e0;
  flex-shrink: 0;
}

.rd-manage-section-shimmer {
  margin-bottom: 20px;
}

.rd-manage-content-shimmer {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.rd-manage-icon-shimmer {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.rd-manage-text-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
}

.rd-manage-label-shimmer {
  height: 18px;
  width: 180px;
  border-radius: 4px;
}

.rd-manage-link-shimmer {
  height: 16px;
  width: 80px;
  border-radius: 4px;
}

/* Quick Link Specific Shimmers */
.okw-quick-link-container-shimmer {
  /* padding: 20px; */
}

.okw-quick-link-title-row-shimmer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.okw-quick-link-title-shimmer {
  height: 24px;
  width: 120px;
  border-radius: 4px;
}

.okw-quick-link-title-line-shimmer {
  height: 2px;
  width: 60px;
  border-radius: 1px;
  display: none;
}

.okw-quick-link-swiper-shimmer {
  display: flex;
  gap: 12px;
  overflow: hidden;
}

.okw-quick-link-item-shimmer {
  width: 72px;
  height: 80px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-shrink: 0;
  position: relative;
}

.okw-quick-link-icon-wrapper-shimmer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.okw-quick-link-icon-shimmer {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.okw-quick-link-badge-shimmer {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: none;
}

.okw-quick-link-item-shimmer:nth-child(4) .okw-quick-link-badge-shimmer {
  display: block;
}

.okw-quick-link-label-shimmer {
  height: 14px;
  width: 100%;
  border-radius: 3px;
  text-align: center;
}

/* Okw Spin Banner Specific Shimmers */
.okw-spin-banner-global-section-shimmer {
  /* padding: 20px; */
  width: 100%;
}

.okw-spin-banner-global-swiper-shimmer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.okw-spin-banner-global-shimmer {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.okw-spin-banner-icon-shimmer {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
}

.okw-spin-banner-texts-shimmer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.okw-spin-banner-title-shimmer {
  height: 18px;
  width: 180px;
  border-radius: 3px;
}

.okw-spin-banner-subtitle-shimmer {
  height: 14px;
  width: 140px;
  border-radius: 3px;
}

.okw-spin-banner-btn-shimmer {
  height: 26px;
  width: 60px;
  border-radius: 100px;
  flex-shrink: 0;
}

/* Account Suspended Dashboard Specific Shimmers */
.account-suspended-dashboard-shimmer {
  padding: 20px;
}

.as-suspended-heading-shimmer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  background: #fff5f5;
  border-radius: 8px;
  padding: 12px 16px;
}

.as-suspended-heading-icon-shimmer {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.as-suspended-heading-text-shimmer {
  height: 18px;
  width: 140px;
  border-radius: 4px;
  flex: 1;
}

.as-balance-row-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.as-balance-left-shimmer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.as-balance-amount-shimmer {
  height: 24px;
  width: 100px;
  border-radius: 4px;
}

.as-balance-payimmediately-shimmer {
  height: 16px;
  width: 120px;
  border-radius: 3px;
}

.as-balance-viewbill-shimmer {
  height: 16px;
  width: 80px;
  border-radius: 4px;
  flex-shrink: 0;
}

.as-payg-warning-shimmer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  background: #fff5f5;
  border-radius: 8px;
  padding: 12px 16px;
}

.as-payg-warning-icon-shimmer {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.as-payg-warning-text-shimmer {
  height: 16px;
  width: 180px;
  border-radius: 4px;
  flex: 1;
}

.as-buypack-row-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e0e0e0;
}

.as-buypack-left-shimmer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.as-buypack-label-shimmer {
  height: 18px;
  width: 200px;
  border-radius: 4px;
}

.as-buypack-status-shimmer {
  height: 16px;
  width: 120px;
  border-radius: 3px;
}

.as-buypack-btn-shimmer {
  height: 36px;
  width: 80px;
  border-radius: 8px;
  flex-shrink: 0;
}

.as-recharge-row-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e0e0e0;
}

.as-recharge-left-shimmer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.as-recharge-amount-shimmer {
  height: 20px;
  width: 60px;
  border-radius: 4px;
}

.as-recharge-valid-shimmer {
  height: 14px;
  width: 150px;
  border-radius: 3px;
}

.as-recharge-btn-shimmer {
  height: 36px;
  width: 100px;
  border-radius: 8px;
  flex-shrink: 0;
}

.as-pay-button-shimmer {
  height: 48px;
  width: 100%;
  border-radius: 8px;
  margin-bottom: 16px;
}

.as-autopay-row-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.as-autopay-label-shimmer {
  height: 18px;
  width: 150px;
  border-radius: 4px;
}

.as-autopay-switch-shimmer {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: #e0e0e0;
  flex-shrink: 0;
}

.as-bottom-error-shimmer {
  background: #fff5f5;
  border-radius: 8px;
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.as-error-icon-shimmer {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
}

.as-error-text-shimmer {
  height: 14px;
  width: 280px;
  border-radius: 3px;
  flex: 1;
}

/* PassportPlans Shimmer Styles */
/* .passport-plans-container-shimmer {
  margin: 24px 0;
} */

.passport-plans-header-shimmer {
  margin-bottom: 20px;
}

.passport-plans-title-shimmer {
  height: 22px;
  width: 200px;
  border-radius: 4px;
}

.passport-plans-grid-shimmer {
  display: flex;
  flex-flow: row wrap;
  gap: 12px;
}

.passport-plan-card-shimmer {
  background: #fff;
  border: 1px solid #D2D5DB;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-height: 200px;
  width: calc(50% - 6px);
}

.plan-header-shimmer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
  height: 38px;
  border-bottom: 1px solid #D2D5DB;
}

.plan-name-shimmer {
  height: 22px;
  width: 100%;
  border-radius: 4px;
}

.plan-content-shimmer {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
}

.plan-description-shimmer {
  height: 60px;
  width: 100%;
}

.plan-description-line2-shimmer {
  height: 12px;
  width: 100%;
  display: none;
}

.recommended-badge-shimmer {
  height: 12px;
  width: 100%;
  display: none;
}

.plan-pricing-shimmer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.original-price-shimmer {
  height: 12px;
  width: 100%;
  display: none;
}

.current-price-shimmer {
  height: 20px;
  width: 80px;
  border-radius: 4px;
}

.plan-buy-button-shimmer {
  height: 40px;
  width: 100%;
  border-radius: 100px;
  margin-top: auto;
}

/* TavelSel Shimmer Styles */
.travel-sel-shimmer-container {
  width: 100%;
}

.travel-sel-card-shimmer {
  display: flex;
  width: 100%;
  padding: 16px 16px 24px;
  flex-direction: column;
  gap: 16px;
  border-radius: 16px;
  background: #FFF;
  box-shadow: 0px 2px 14px 0px rgba(0, 0, 0, 0.08);
}

.travel-title-section-shimmer {
  margin-bottom: 0;
}

.travel-title-shimmer {
  height: 20px;
  width: 220px;
  border-radius: 4px;
}

.travel-content-shimmer {
  width: 100%;
}

.travel-services-container-shimmer {
  width: 100%;
}

.travel-services-grid-shimmer {
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
}

.travel-service-slide-shimmer {
  flex: 1;
  min-width: calc(33.33% - 6px);
}

.travel-service-card-shimmer {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border: 1px solid #D2D5DB;
  border-radius: 8px;
  background: #FFF;
  min-height: 36px;
}

.travel-service-content-shimmer {
  width: 100%;
  display: flex;
  justify-content: center;
}

.travel-service-description-shimmer {
  height: 14px;
  width: 60px;
  border-radius: 4px;
}

.travel-search-shimmer {
  position: relative;
  width: 100%;
}

.travel-search-input-shimmer {
  display: flex;
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  align-items: center;
  gap: 8px;
  border-radius: 8px;
  border: none;
}

/* Responsive adjustments for shimmer */
@media (max-width: 768px) {
  .travel-service-slide-shimmer {
    min-width: calc(50% - 4px);
  }
}

@media (max-width: 480px) {
  .travel-service-slide-shimmer {
    min-width: calc(50% - 4px);
  }

  .travel-title-shimmer {
    width: 180px;
  }
}

/* ListCountries Shimmer Styles */
.list-countries-container-shimmer {
  background: #fff;
  margin: 16px 0;
}

.countries-list-shimmer {
  display: flex;
  flex-direction: column;
}

.country-item-shimmer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border: 1px solid #D2D5DB;
  height: 48px;
  border-radius: 8px;
  margin-bottom: 12px;
  background: #fff;
}

.country-item-shimmer:last-child {
  margin-bottom: 0;
}

.country-info-shimmer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.country-flag-shimmer {
  width: 24px;
  height: 18px;
  border-radius: 2px;
  flex-shrink: 0;
}

.country-name-shimmer {
  height: 16px;
  width: 120px;
  border-radius: 4px;
}

.country-arrow-shimmer {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
}

.explore-more-button-shimmer {
  font-family: "Rubik-Medium", sans-serif;
  width: 100%;
  height: 48px;
  border-radius: 24px;
  margin-top: 16px;
}

/* PriceCard Shimmer Styles */
.price-card-container-shimmer {
  width: 100%;
  padding: 16px 0;
}

.price-card-list-shimmer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.price-card-item-shimmer {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.price-card-content-shimmer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.price-card-header-shimmer {
  display: flex;
  align-items: center;
}

.price-card-title-shimmer {
  height: 24px;
  width: 180px;
  border-radius: 4px;
}

.price-card-separator-shimmer {
  height: 1px;
  width: 100%;
  border-radius: 1px;
}

.price-card-description-shimmer {
  height: 16px;
  width: 100%;
  border-radius: 4px;
}

.price-card-recommended-shimmer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #FEF3C7;
  border-radius: 20px;
  width: fit-content;
}

.recommended-icon-shimmer {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

.recommended-text-shimmer {
  height: 14px;
  width: 80px;
  border-radius: 4px;
}

.price-card-footer-shimmer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.price-card-pricing-shimmer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.supported-countries-shimmer {
  height: 14px;
  width: 120px;
  border-radius: 4px;
}

.price-row-shimmer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.old-price-shimmer {
  height: 16px;
  width: 40px;
  border-radius: 4px;
}

.new-price-shimmer {
  height: 20px;
  width: 60px;
  border-radius: 4px;
}

.per-month-shimmer {
  height: 14px;
  width: 50px;
  border-radius: 4px;
}

.price-card-buy-btn-shimmer {
  height: 40px;
  width: 80px;
  border-radius: 20px;
  flex-shrink: 0;
}

/* Responsive styles for PriceCard shimmer */
@media (max-width: 768px) {
  .price-card-item-shimmer {
    padding: 16px;
  }

  .price-card-title-shimmer {
    width: 150px;
  }

  .price-card-footer-shimmer {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .price-card-buy-btn-shimmer {
    width: 100%;
    align-self: stretch;
  }
}

/* RoamingRates Shimmer Styles */
.roaming-rates-container-shimmer {
  background: #fff;
  padding: 24px 20px;
  margin: 20px 0;
}

.roaming-rates-content-shimmer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
}

.roaming-rates-title-shimmer {
  height: 28px;
  width: 160px;
  border-radius: 4px;
}

.roaming-rates-description-shimmer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.roaming-rates-desc-line1-shimmer {
  height: 16px;
  width: 85%;
  border-radius: 4px;
}

.roaming-rates-desc-line2-shimmer {
  height: 16px;
  width: 75%;
  border-radius: 4px;
}

.roaming-rates-button-shimmer {
  height: 48px;
  width: 140px;
  border-radius: 24px;
  margin-top: 8px;
}

/* Responsive styles for RoamingRates shimmer */
@media (max-width: 768px) {
  .roaming-rates-container-shimmer {
    padding: 20px 16px;
    margin: 16px 0;
  }

  .roaming-rates-title-shimmer {
    height: 24px;
    width: 140px;
  }

  .roaming-rates-desc-line1-shimmer {
    width: 90%;
  }

  .roaming-rates-desc-line2-shimmer {
    width: 80%;
  }

  .roaming-rates-button-shimmer {
    height: 44px;
    width: 120px;
  }
}

/* FilterChips Shimmer Styles */
.manage-line-filters-shimmer {
  display: flex;
  gap: 12px;
  margin: 16px 0;
  padding: 0 20px;
  align-items: flex-start;
  justify-content: flex-start;
}

.manage-line-filter-chip-shimmer {
  height: 40px;
  min-width: 100px;
  border-radius: 20px;
  flex-shrink: 0;
}

.manage-line-filter-chip-shimmer:nth-child(1) {
  width: 120px;
}

.manage-line-filter-chip-shimmer:nth-child(2) {
  width: 90px;
}

.manage-line-filter-chip-shimmer:nth-child(3) {
  width: 110px;
}

/* Responsive styles for FilterChips shimmer */
@media (max-width: 768px) {
  .manage-line-filters-shimmer {
    padding: 0 16px;
    gap: 8px;
  }

  .manage-line-filter-chip-shimmer {
    height: 30px;
    min-width: 80px;
  }

  .manage-line-filter-chip-shimmer:nth-child(1) {
    width: 100px;
  }

  .manage-line-filter-chip-shimmer:nth-child(2) {
    width: 75px;
  }

  .manage-line-filter-chip-shimmer:nth-child(3) {
    width: 90px;
  }
}

/* ActivateLater (BuyPopup) Shimmer Styles */
.buy-popup-activate-later-shimmer {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  margin: 16px 0;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  background: #fff;
  gap: 16px;
}

.activate-later-icon-shimmer {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  flex-shrink: 0;
}

.activate-later-content-shimmer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.activate-later-title-shimmer {
  height: 20px;
  width: 120px;
  border-radius: 4px;
}

.activate-later-desc-shimmer {
  height: 16px;
  width: 180px;
  border-radius: 4px;
}

.activate-later-arrow-shimmer {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Responsive styles for ActivateLater shimmer */
@media (max-width: 768px) {
  .buy-popup-activate-later-shimmer {
    padding: 14px 16px;
    gap: 12px;
  }

  .activate-later-icon-shimmer {
    width: 30px;
    height: 30px;
  }

  .activate-later-title-shimmer {
    height: 18px;
    width: 100px;
  }

  .activate-later-desc-shimmer {
    height: 14px;
    width: 150px;
  }

  .activate-later-arrow-shimmer {
    width: 30px;
    height: 30px;
  }
}

/* UserNumberSwitcher Shimmer Styles */
.uns-container-shimmer {
  background: #ffffff;
  border-radius: 8px;
  /* border: 1px solid #e0e0e0; */
  padding: 16px;
  margin-bottom: 16px;
}

.uns-name-shimmer {
  height: 18px;
  width: 120px;
  border-radius: 4px;
  margin-bottom: 12px;
}

.uns-row-shimmer {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px
}

.uns-number-shimmer {
  height: 16px;
  width: 100px;
  border-radius: 3px;
}

.uns-switch-shimmer {
  display: flex;
  gap: -8px;
}

.uns-switch-btn-shimmer {
  height: 0px;
  width: 40px;
  border-radius: 16px;
}

/* TopBar Card Shimmer Styles */
.okw-topbar-card-shimmer {
  background: #fff;
  border-radius: 0px 0px 18px 18px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  padding: 18px 16px 18px 16px;
  margin: 0px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.okw-topbar-main-row-shimmer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.okw-topbar-user-block-shimmer {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.okw-topbar-user-greeting-shimmer {
  height: 12px;
  width: 80px;
  border-radius: 3px;
}

.okw-topbar-user-number-row-shimmer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.okw-topbar-user-number-shimmer {
  height: 16px;
  width: 90px;
  border-radius: 3px;
}

.okw-topbar-switch-shimmer {
  display: flex;
  gap: -8px;
}

.okw-topbar-switch-btn-shimmer {
  height: 16px;
  width: 70px;
  border-radius: 16px;
}

.okw-topbar-arrow-shimmer {
  width: 16px;
  height: 16px;
  border-radius: 3px;
}

.okw-topbar-support-icon-shimmer {
  width: 24px;
  height: 24px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* GetFreeSub Banner Shimmer Styles */
.get-free-sub-banner-shimmer {
  /* background: linear-gradient(135deg, #e50000 0%, #cc0000 100%); */
  border-radius: 16px;
  /* box-shadow: 0 4px 12px rgba(229, 0, 0, 0.2); */
  position: relative;
  overflow: hidden;
  padding: 0px;
}

.get-free-sub-banner-shimmer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg,
      rgba(255, 255, 255, 0.1) 0%,
      rgba(255, 255, 255, 0.05) 100%);
  pointer-events: none;
}

.get-free-sub-image-shimmer {
  width: 100%;
  height: 120px;
  border-radius: 8px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* CVM Banner Shimmer Styles */
.cvm-banner-components-shimmer {
  width: 100%;
  margin-bottom: 24px;
}

.cvm-banner-swiper-shimmer {
  display: flex;
  gap: 16px;
  /* overflow-x: auto; */
  padding: 0px;
}

.cvm-banner-slide-shimmer {
  min-width: 300px;
  height: 200px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.cvm-banner-content-shimmer {
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cvm-banner-left-shimmer {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
}

.cvm-banner-text-shimmer {
  flex: 1;
}

.cvm-banner-heading-shimmer {
  margin-bottom: 16px;
}

.cvm-banner-title-shimmer {
  height: 20px;
  width: 80%;
  margin-bottom: 8px;
  border-radius: 4px;
}

.cvm-banner-description-shimmer {
  height: 16px;
  width: 90%;
  border-radius: 4px;
}

.cvm-banner-inner-shimmer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cvm-banner-features-shimmer {
  display: flex;
  gap: 16px;
}

.cvm-banner-feature-shimmer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.cvm-banner-feature-value-shimmer {
  height: 18px;
  width: 60px;
  border-radius: 4px;
}

.cvm-banner-feature-label-shimmer {
  height: 14px;
  width: 50px;
  border-radius: 3px;
}

.cvm-banner-pricing-shimmer {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cvm-banner-old-price-shimmer {
  height: 16px;
  width: 40px;
  border-radius: 3px;
}

.cvm-banner-new-price-shimmer {
  height: 20px;
  width: 60px;
  border-radius: 4px;
}

.cvm-banner-actions-shimmer {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

.cvm-banner-btn-shimmer {
  height: 24px;
  width: 80px;
  border-radius: 20px;
}

.cvm-banner-learn-more-shimmer {
  height: 24px;
  width: 100px;
  border-radius: 20px;
}

@media (max-width: 768px) {
  .cvm-banner-slide-shimmer {
    min-width: 300px;
    height: 220px;
  }
  
  .cvm-banner-content-shimmer {
    padding: 16px;
  }
  
  .cvm-banner-title-shimmer {
    height: 18px;
  }
  
  .cvm-banner-description-shimmer {
    height: 14px;
  }
  
  .cvm-banner-features-shimmer {
    gap: 12px;
  }
  
  .cvm-banner-feature-value-shimmer {
    height: 16px;
    width: 50px;
  }
  
  .cvm-banner-feature-label-shimmer {
    height: 12px;
    width: 40px;
  }
}

@media (max-width: 768px) {
  .buy-popup-activate-later-shimmer {
    padding: 12px;
  }

  .activate-later-icon-shimmer {
    width: 28px;
    height: 28px;
  }

  .activate-later-title-shimmer {
    height: 14px;
    width: 80px;
  }

  .activate-later-desc-shimmer {
    height: 12px;
    width: 120px;
  }

  .activate-later-arrow-shimmer {
    width: 20px;
    height: 20px;
  }
}

/* Buy Modal Popup Shimmer Styles */
.buy-modal-activate-later-shimmer {
  align-items: center;
  background: #f9fafb;
  border-radius: 12px;
  display: flex;
  gap: 12px;
  padding: 16px;
  width: 100%;
}

.buy-modal-activate-icon-shimmer {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  flex-shrink: 0;
}

.buy-modal-activate-content-shimmer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.buy-modal-activate-title-shimmer {
  height: 16px;
  width: 100px;
  border-radius: 4px;
}

.buy-modal-activate-desc-shimmer {
  height: 14px;
  width: 140px;
  border-radius: 3px;
}

.buy-modal-activate-arrow-shimmer {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .buy-modal-activate-later-shimmer {
    padding: 12px;
  }

  .buy-modal-activate-icon-shimmer {
    width: 28px;
    height: 28px;
  }

  .buy-modal-activate-title-shimmer {
    height: 14px;
    width: 80px;
  }

  .buy-modal-activate-desc-shimmer {
    height: 12px;
    width: 120px;
  }

  .buy-modal-activate-arrow-shimmer {
    width: 20px;
    height: 20px;
  }
}

/* Promotion Banner Swiper Shimmer Styles */
.promotion-banner-swiper-container-shimmer {
  width: 100%;
  margin-bottom: 24px;
}

.promotion-banner-swiper-shimmer {
  display: flex;
  gap: 16px;
  overflow: hidden;
}

.promotion-banner-slide-shimmer {
  min-width: 280px;
  height: 160px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}

.promotion-banner-slide-shimmer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: shimmer 1.5s infinite;
}

.promotion-banner-image-shimmer {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  background: #e0e0e0;
}

@media (max-width: 768px) {
  .promotion-banner-slide-shimmer {
    min-width: 240px;
    height: 140px;
  }
}

@media (max-width: 480px) {
  .promotion-banner-slide-shimmer {
    min-width: 200px;
    height: 120px;
  }
}

/* Badges Container Shimmer */
.badges-container-shimmer {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  margin: 16px 0;
  font-family: 'Rubik', sans-serif;
}

.badges-header-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.badges-title-shimmer {
  width: 80px;
  height: 24px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  animation: shimmer 1.5s infinite linear;
}

.badges-info-icon-shimmer {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  animation: shimmer 1.5s infinite linear;
}

.badges-inner-shimmer {
  margin-bottom: 16px;
}

.badges-list-shimmer {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  justify-content: center;
}

.badge-item-shimmer {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  animation: shimmer 1.5s infinite linear;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-star-shimmer {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  animation: shimmer 1.5s infinite linear;
}

.badges-progress-shimmer {
  text-align: center;
  margin-bottom: 16px;
}

.badges-progress-text-shimmer {
  width: 100%;
  height: 40px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  animation: shimmer 1.5s infinite linear;
  margin: 0 auto;
}

.badges-expiry-shimmer {
  text-align: center;
}

.badges-expiry-text-shimmer {
  width: 120px;
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  animation: shimmer 1.5s infinite linear;
  margin: 0 auto;
}

/* Responsive adjustments for badges shimmer */
@media (max-width: 768px) {
  .badges-container-shimmer {
    padding: 16px;
    border-radius: 12px;
  }
  
  .badges-list-shimmer {
    gap: 10px;
  }
  
  .badge-item-shimmer {
    width: 44px;
    height: 44px;
  }
  
  .badge-star-shimmer {
    width: 22px;
    height: 22px;
  }
  
  .badges-progress-text-shimmer {
    width: 180px;
    height: 14px;
  }
  
  .badges-expiry-text-shimmer {
    width: 100px;
    height: 12px;
  }
}

@media (max-width: 480px) {
  .badges-container-shimmer {
    padding: 12px;
  }
  
  .badges-list-shimmer {
    gap: 8px;
  }
  
  .badge-item-shimmer {
    width: 40px;
    height: 40px;
  }
  
  .badge-star-shimmer {
    width: 20px;
    height: 20px;
  }
  
  .badges-progress-text-shimmer {
    width: 160px;
  }
  
  .badges-expiry-text-shimmer {
    width: 90px;
  }
}

/* My Account Page Shimmer Styles */
.my-account-container-shimmer {
  padding: 0px;
  max-width: 400px;
  margin: 0 auto;
}

/* Profile Avatar Shimmer */
.profile-avatar-shimmer {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.voice-button-shimmer {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

/* Personal Information Section Shimmer */
.personal-info-section-shimmer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Input Section Shimmer */
.my-account-input-section-shimmer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.my-account-input-label-shimmer {
  height: 16px;
  width: 120px;
  border-radius: 3px;
}

.my-account-input-field-shimmer {
  height: 48px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #d2d5db;
  background: #ffffff;
}

/* Gender Selection Shimmer */
.gender-selection-shimmer {
  display: flex;
  gap: 12px;
}

.gender-btn-shimmer {
  flex: 1;
  height: 48px;
  border-radius: 8px;
  border: 1px solid #d2d5db;
  background: #ffffff;
  position: relative;
}

.gender-radio-shimmer {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  position: absolute;
  top: 6px;
  right: 6px;
}

/* Date Input Shimmer */
.date-input-wrapper-shimmer {
  position: relative;
}

.date-input-field-shimmer {
  height: 48px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #d2d5db;
  background: #ffffff;
  padding-right: 40px;
}

.calendar-icon-shimmer {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 4px;
}

/* Button Shimmer */
.update-btn-shimmer {
  height: 48px;
  width: 100%;
  border-radius: 100px;
  margin-top: 8px;
}

/* Social Accounts Section Shimmer */
.social-accounts-section-shimmer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}

.section-title-shimmer {
  height: 18px;
  width: 150px;
  border-radius: 4px;
}

.google-account-card-shimmer {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.google-account-info-shimmer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.google-logo-shimmer {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
}

.google-text-shimmer {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.google-title-shimmer {
  height: 14px;
  width: 60px;
  border-radius: 3px;
}

.google-subtitle-shimmer {
  height: 12px;
  width: 120px;
  border-radius: 3px;
}

.link-btn-shimmer {
  height: 32px;
  width: 70px;
  border-radius: 100px;
  flex-shrink: 0;
}

/* Responsive Design for My Account Shimmer */
@media (max-width: 768px) {
  .google-account-card-shimmer {
    padding: 12px;
  }
  
  .google-logo-shimmer {
    width: 32px;
    height: 32px;
  }
  
  .link-btn-shimmer {
    height: 28px;
    width: 60px;
  }
}

@media (max-width: 480px) {
  .voice-button-shimmer {
    width: 70px;
    height: 70px;
  }
  
  .section-title-shimmer {
    height: 16px;
    width: 120px;
  }
}

/* Profile Delete Component Shimmer Styles */
.profile-delete-container-shimmer {
  min-height: 100vh;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

/* Header Shimmer */
.profile-delete-header-shimmer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
  background: #ffffff;
}

.profile-delete-back-btn-shimmer {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.profile-delete-title-shimmer {
  height: 24px;
  width: 200px;
  border-radius: 4px;
  flex: 1;
  margin: 0 16px;
}

.profile-delete-support-btn-shimmer {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Main Content Shimmer */
.profile-delete-content-shimmer {
  flex: 1;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Illustration Shimmer */
.profile-delete-illustration-shimmer {
  width: 120px;
  height: 80px;
  border-radius: 8px;
  margin: 0 auto 16px auto;
}

/* Question Shimmer */
.profile-delete-question-shimmer {
  text-align: center;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-delete-question-title-shimmer {
  height: 28px;
  width: 280px;
  border-radius: 4px;
  margin: 0 auto;
}

.profile-delete-question-subtitle-shimmer {
  height: 20px;
  width: 320px;
  border-radius: 4px;
  margin: 0 auto;
}

/* Reasons List Shimmer */
.profile-delete-reasons-shimmer {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.profile-delete-reason-item-shimmer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.profile-delete-checkbox-shimmer {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
}

.profile-delete-reason-text-shimmer {
  height: 18px;
  width: 200px;
  border-radius: 3px;
  flex: 1;
}

/* Text Area Shimmer */
.profile-delete-textarea-section-shimmer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.profile-delete-textarea-label-shimmer {
  height: 16px;
  width: 120px;
  border-radius: 3px;
}

.profile-delete-textarea-shimmer {
  width: 100%;
  min-height: 120px;
  border-radius: 8px;
  border: 1px solid #d2d5db;
  background: #ffffff;
  position: relative;
}

.profile-delete-character-count-shimmer {
  height: 14px;
  width: 60px;
  border-radius: 3px;
  margin-left: auto;
  margin-top: 4px;
}

/* Delete Button Shimmer */
.profile-delete-button-shimmer {
  width: 100%;
  max-width: 200px;
  height: 48px;
  border-radius: 24px;
  margin: 0 auto 24px auto;
  display: block;
}

/* Responsive Design for Profile Delete Shimmer */
@media (max-width: 768px) {
  .profile-delete-content-shimmer {
    padding: 20px 16px;
  }
  
  .profile-delete-question-title-shimmer {
    width: 240px;
    height: 24px;
  }
  
  .profile-delete-question-subtitle-shimmer {
    width: 280px;
    height: 18px;
  }
  
  .profile-delete-reason-text-shimmer {
    width: 180px;
    height: 16px;
  }
}

@media (max-width: 480px) {
  .profile-delete-header-shimmer {
    padding: 12px 16px;
  }
  
  .profile-delete-title-shimmer {
    width: 160px;
    height: 20px;
  }
  
  .profile-delete-content-shimmer {
    padding: 16px 12px;
  }
  
  .profile-delete-question-title-shimmer {
    width: 200px;
    height: 20px;
  }
  
  .profile-delete-question-subtitle-shimmer {
    width: 240px;
    height: 16px;
  }
  
  .profile-delete-reason-text-shimmer {
    width: 160px;
    height: 14px;
  }
  
  .profile-delete-button-shimmer {
    height: 40px;
  }
}

/* Manage Password Component Shimmer Styles */
.manage-password-container-shimmer {
  min-height: 100vh;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

/* Verification Component Shimmer Styles */
.verification-container-shimmer {
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.verification-header-shimmer {
  text-align: center;
  margin-bottom: 30px;
}

.verification-title-shimmer {
  height: 28px;
  width: 250px;
  margin: 0 auto 10px auto;
  border-radius: 4px;
}

.verification-subtitle-shimmer {
  height: 16px;
  width: 300px;
  margin: 0 auto;
  border-radius: 4px;
}

.verification-progress-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  padding: 0 20px;
}

.verification-step-shimmer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.verification-step-icon-shimmer {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.verification-step-text-shimmer {
  height: 14px;
  width: 80px;
  border-radius: 4px;
}

.verification-connector-shimmer {
  width: 2px;
  height: 40px;
  margin: 8px 0;
  border-radius: 1px;
  flex: 1;
}

.verification-content-shimmer {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.verification-card-shimmer {
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
  min-height: 400px;
}

.verification-step-content-shimmer {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  text-align: center;
}

.verification-card-title-shimmer {
  height: 24px;
  width: 200px;
  border-radius: 4px;
}

.verification-card-subtitle-shimmer {
  height: 16px;
  width: 280px;
  border-radius: 4px;
}

.verification-otp-display-shimmer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}

.verification-otp-number-shimmer {
  height: 32px;
  width: 120px;
  border-radius: 8px;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
}

.verification-input-section-shimmer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 300px;
}

.verification-input-label-shimmer {
  height: 14px;
  width: 100px;
  border-radius: 4px;
  align-self: flex-start;
}

.verification-input-shimmer {
  height: 48px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
}

.verification-resend-section-shimmer {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin: 16px 0;
}

.verification-resend-btn-shimmer {
  height: 36px;
  width: 100px;
  border-radius: 8px;
}

.verification-timer-shimmer {
  height: 16px;
  width: 60px;
  border-radius: 4px;
}

.verification-disclaimer-shimmer {
  height: 14px;
  width: 200px;
  border-radius: 4px;
}

.verification-terms-link-shimmer {
  height: 16px;
  width: 150px;
  border-radius: 4px;
  margin-top: 16px;
}

.verification-success-icon-shimmer {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
}

.verification-success-check-shimmer {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #f0f9ff;
  border: 2px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.verification-success-message-shimmer {
  height: 60px;
  width: 100%;
  border-radius: 4px;
}

.verification-wizard-nav-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  padding: 0 20px;
}

.verification-nav-btn-shimmer {
  height: 40px;
  width: 100px;
  border-radius: 100px;
}

.verification-nav-btn-shimmer.primary {
  width: 120px;
}

/* Responsive adjustments for verification shimmer */
@media (max-width: 768px) {
  .verification-container-shimmer {
    padding: 16px;
  }
  
  .verification-title-shimmer {
    height: 24px;
    width: 200px;
  }
  
  .verification-subtitle-shimmer {
    height: 14px;
    width: 250px;
  }
  
  .verification-progress-shimmer {
    padding: 0 10px;
  }
  
  .verification-step-text-shimmer {
    height: 12px;
    width: 60px;
  }
  
  .verification-card-shimmer {
    padding: 20px;
    min-height: 350px;
  }
  
  .verification-card-title-shimmer {
    height: 20px;
    width: 160px;
  }
  
  .verification-card-subtitle-shimmer {
    height: 14px;
    width: 220px;
  }
  
  .verification-input-shimmer {
    height: 44px;
  }
  
  .verification-wizard-nav-shimmer {
    padding: 0 16px;
  }
}

@media (max-width: 480px) {
  .verification-container-shimmer {
    padding: 12px;
  }
  
  .verification-title-shimmer {
    height: 20px;
    width: 160px;
  }
  
  .verification-subtitle-shimmer {
    height: 12px;
    width: 200px;
  }
  
  .verification-progress-shimmer {
    padding: 0 8px;
  }
  
  .verification-step-icon-shimmer {
    width: 28px;
    height: 28px;
  }
  
  .verification-step-text-shimmer {
    height: 10px;
    width: 50px;
  }
  
  .verification-card-shimmer {
    padding: 16px;
    min-height: 300px;
  }
  
  .verification-card-title-shimmer {
    height: 18px;
    width: 140px;
  }
  
  .verification-card-subtitle-shimmer {
    height: 12px;
    width: 180px;
  }
  
  .verification-input-shimmer {
    height: 40px;
  }
  
  .verification-resend-btn-shimmer {
    height: 32px;
    width: 80px;
  }
  
  .verification-nav-btn-shimmer {
    height: 40px;
    width: 80px;
  }
  
  .verification-nav-btn-shimmer.primary {
    width: 100px;
  }
}

/* Select Month Component Shimmer Styles */
.select-month-container-shimmer {
  width: 100%;
  max-width: 500px;
  background: #ffffff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}

.select-month-modal-shimmer {
  width: 100%;
  height: 100%;
}

.select-month-header-shimmer {
  margin-bottom: 24px;
}

.select-month-title-shimmer {
  height: 28px;
  width: 150px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.select-month-description-shimmer {
  height: 16px;
  width: 100%;
  border-radius: 4px;
}

.select-month-section-shimmer {
  margin-bottom: 24px;
}

.select-month-label-shimmer {
  height: 14px;
  width: 80px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.select-month-dropdown-container-shimmer {
  position: relative;
  margin-bottom: 8px;
}

.select-month-dropdown-shimmer {
  height: 44px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
  position: relative;
}

.select-month-dropdown-icon-shimmer {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 2px;
}

.select-month-cost-shimmer {
  height: 16px;
  width: 100px;
  margin-left: auto;
  border-radius: 4px;
}

.select-month-separator-shimmer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0;
}

.select-month-separator-line-shimmer {
  height: 1px;
  flex: 1;
  border-radius: 1px;
}

.select-month-separator-text-shimmer {
  height: 14px;
  width: 120px;
  border-radius: 4px;
  flex-shrink: 0;
}

.select-month-range-section-shimmer {
  margin-bottom: 24px;
}

.select-month-range-row-shimmer {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.select-month-range-field-shimmer {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.select-month-range-field-label-shimmer {
  height: 14px;
  width: 80px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.select-month-range-dropdowns-shimmer {
  height: 44px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background: #ffffff;
  position: relative;
}

.select-month-total-shimmer {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.select-month-total-icon-shimmer {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  flex-shrink: 0;
}

.select-month-total-text-shimmer {
  height: 16px;
  width: 120px;
  border-radius: 4px;
}

.select-month-actions-shimmer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

.select-month-action-btn-shimmer {
  height: 40px;
  width: 100px;
  border-radius: 100px;
}

.select-month-action-btn-shimmer.primary {
  width: 120px;
}

/* Responsive adjustments for select month shimmer */
@media (max-width: 768px) {
  .select-month-container-shimmer {
    padding: 20px;
    margin: 16px;
  }
  
  .select-month-title-shimmer {
    height: 24px;
    width: 120px;
  }
  
  .select-month-range-row-shimmer {
    flex-direction: column;
    gap: 12px;
  }
  
  .select-month-actions-shimmer {
    flex-direction: column;
    gap: 8px;
  }
  
  .select-month-action-btn-shimmer {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .select-month-container-shimmer {
    padding: 16px;
    margin: 12px;
  }
  
  .select-month-title-shimmer {
    height: 20px;
    width: 100px;
  }
  
  .select-month-description-shimmer {
    height: 14px;
  }
  
  .select-month-dropdown-shimmer,
  .select-month-range-dropdowns-shimmer {
    height: 40px;
  }
  
  .select-month-actions-shimmer {
    margin-top: 20px;
  }
  
  .select-month-action-btn-shimmer {
    height: 40px;
  }
}

/* Download Call Details Component Shimmer Styles */
.download-call-details-overlay-shimmer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.download-call-details-modal-shimmer {
  position: relative;
  width: 100%;
  max-width: 450px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 24px;
}

.download-call-details-header-shimmer {
  margin-bottom: 24px;
  padding-right: 40px;
}

.download-call-details-close-shimmer {
  position: absolute;
  top: 16px;
  right: 16px;
  height: 24px;
  width: 24px;
  border-radius: 4px;
}

.download-call-details-title-shimmer {
  height: 24px;
  width: 200px;
  margin-bottom: 8px;
  border-radius: 4px;
}

.download-call-details-subtitle-shimmer {
  height: 16px;
  width: 100%;
  border-radius: 4px;
}

.download-call-details-inputs-shimmer {
  margin-bottom: 24px;
}

.download-call-details-category-shimmer {
  height: 60px;
  width: 100%;
  margin-bottom: 20px;
  border-radius: 8px;
}

.download-call-details-month-shimmer {
  height: 60px;
  width: 100%;
  border-radius: 8px;
}

.download-call-details-buttons-shimmer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.download-call-details-reset-shimmer {
  height: 44px;
  width: 80px;
  border-radius: 8px;
}

.download-call-details-download-shimmer {
  height: 44px;
  width: 100px;
  border-radius: 8px;
}

/* Search Filter Component Shimmer Styles */
.search-filter-overlay-shimmer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
  padding: 0px 20px;
}

.search-filter-modal-shimmer {
  width: 375px;
  max-width: 100%;
  background: #fff;
  border-radius: 24px 24px 0px 0px;
  padding: 50px 16px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.search-filter-header-shimmer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.search-filter-close-shimmer {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.search-filter-title-shimmer {
  width: 200px;
  height: 24px;
  border-radius: 4px;
}

.search-filter-search-shimmer {
  display: flex;
  align-items: stretch;
}

.search-filter-input-shimmer {
  width: 100%;
  height: 48px;
  border-radius: 8px;
}

.search-filter-separator-shimmer {
  height: 1px;
  border-radius: 1px;
  margin: 8px 0;
}

.search-filter-filter-shimmer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.search-filter-category-shimmer {
  height: 44px;
  border-radius: 8px;
}

.search-filter-options-shimmer {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.search-filter-options-shimmer::before {
  content: '';
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.search-filter-options-shimmer::after {
  content: '';
  height: 44px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  animation-delay: 0.1s;
}

.search-filter-buttons-shimmer {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.search-filter-reset-shimmer {
  flex: 1;
  height: 44px;
  border-radius: 8px;
}

.search-filter-filter-btn-shimmer {
  flex: 1;
  height: 44px;
  border-radius: 8px;
}

/* Premium Pack Component Shimmer Styles */
.premium-pack-overlay-shimmer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.premium-pack-modal-shimmer {
  width: 100%;
  max-width: 800px;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.premium-pack-header-shimmer {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin-bottom: 0px;
}

.premium-pack-close-shimmer {
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
}

.premium-pack-content-shimmer {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
}

.premium-pack-premium-shimmer {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px;
  background: #f8f9fa;
  border-radius: 12px;
}

.premium-pack-free-shimmer {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px;
  background: #f8f9fa;
  border-radius: 12px;
}

.premium-pack-title-shimmer {
  height: 28px;
  width: 120px;
  border-radius: 4px;
}

.premium-pack-features-shimmer {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.premium-pack-features-shimmer::before {
  content: '';
  height: 16px;
  width: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

.premium-pack-features-shimmer::after {
  content: '';
  height: 16px;
  width: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  animation-delay: 0.1s;
}

.premium-pack-price-shimmer {
  height: 24px;
  width: 100px;
  border-radius: 4px;
}

.premium-pack-button-shimmer {
  height: 48px;
  width: 100%;
  border-radius: 8px;
  margin-top: auto;
}

/* Header Shimmer */
.manage-password-header-shimmer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e0e0e0;
  background: #ffffff;
}

.manage-password-back-btn-shimmer {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

.manage-password-title-shimmer {
  height: 24px;
  width: 200px;
  border-radius: 4px;
  flex: 1;
  margin: 0 16px;
}

.manage-password-support-btn-shimmer {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Main Content Shimmer */
.manage-password-content-shimmer {
  flex: 1;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Input Section Shimmer */
.manage-password-input-section-shimmer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.manage-password-input-label-shimmer {
  height: 16px;
  width: 120px;
  border-radius: 3px;
}

.manage-password-input-hint-shimmer {
  height: 14px;
  width: 200px;
  border-radius: 3px;
}

.manage-password-input-field-shimmer {
  width: 100%;
  height: 48px;
  border-radius: 8px;
  border: 1px solid #d2d5db;
  background: #ffffff;
  position: relative;
}

/* Forgot Password Link Shimmer */
.manage-password-forgot-link-shimmer {
  height: 16px;
  width: 120px;
  border-radius: 3px;
  margin-left: auto;
  margin-top: 8px;
}

/* Save Button Shimmer */
.manage-password-button-shimmer {
  width: 100%;
  max-width: 200px;
  height: 48px;
  border-radius: 24px;
  margin: 0 auto 24px auto;
  display: block;
}

/* Responsive Design for Manage Password Shimmer */
@media (max-width: 768px) {
  .manage-password-content-shimmer {
    padding: 20px 16px;
  }
  
  .manage-password-title-shimmer {
    width: 160px;
    height: 20px;
  }
  
  .manage-password-input-label-shimmer {
    width: 100px;
    height: 14px;
  }
  
  .manage-password-input-hint-shimmer {
    width: 160px;
    height: 12px;
  }
}

@media (max-width: 480px) {
  .manage-password-header-shimmer {
    padding: 12px 16px;
  }
  
  .manage-password-title-shimmer {
    width: 140px;
    height: 18px;
  }
  
  .manage-password-content-shimmer {
    padding: 16px 12px;
  }
  
  .manage-password-input-label-shimmer {
    width: 90px;
    height: 12px;
  }
  
  .manage-password-input-hint-shimmer {
    width: 140px;
    height: 10px;
  }
  
  .manage-password-button-shimmer {
    height: 44px;
  }
}

/*shimmer st*/

/* Manage Roaming Modal Styles */

/* Modal Overlay */
.manage-roaming-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 1000;
  animation: modalFadeIn 0.4s ease-out;
}

/* Modal Container */
.manage-roaming-modal {
  width: 100%;
  max-width: 375px;
  background: #fff;
  border-radius: 28px 28px 0px 0px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  position: relative;
  max-height: 80vh;
  overflow-y: auto;
  animation: modalSlideIn 0.4s ease-out;
  transform: translateY(100%);
}

.manage-roaming-modal.open {
  transform: translateY(0);
}

.manage-roaming-modal.closing {
  animation: modalSlideOut 0.4s ease-in;
}

/* Modal Header */
.manage-roaming-modal-header {
  position: relative;
  padding: 18px 18px 0 18px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-shrink: 0;
}

.manage-roaming-modal-drag-handle {
  width: 40px;
  height: 4px;
  background: #d2d5db;
  border-radius: 2px;
  margin-bottom: 16px;
}

.manage-roaming-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: none;
  border: none;
  font-size: 24px;
  color: #080808;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.2s ease;
  background: #f8f9fa;
  z-index: 1000;
}

.manage-roaming-modal-close:hover {
  background: #f8f9fa;
  color: #333;
}

/* Modal Content */
.manage-roaming-modal-content {
  padding: 0 24px 24px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  overflow-y: auto;
}

.manage-roaming-modal-title {
  font-family: "Rubik-Bold", sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #080808;
  margin: 0;
  line-height: 28px;
}

.manage-roaming-modal-subtitle {
  
  font-size: 14px;
  color: #080808;
  line-height: 20px;
  opacity: 0.8;
  margin-top: 4px;
}

/* Section Styles */
.manage-roaming-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.manage-roaming-section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.manage-roaming-section-title {
  font-family: "Rubik-Medium";
  font-size: 16px;
  font-weight: 500;
  color: #080808;
  margin: 0;
  line-height: 22px;
  flex: 1;
}

.manage-roaming-section-subtitle {
  font-size: 12px;
  color: #080808;
  line-height: 16px;
  opacity: 0.8;
  margin-top: 2px;
}

.manage-roaming-section-description {
  font-size: 14px;
  color: #080808;
  line-height: 20px;
  opacity: 0.8;
  margin: 0;
}

/* Toggle Switch */
.manage-roaming-toggle-container {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.manage-roaming-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
  z-index: 10;
}

.manage-roaming-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
  z-index: 1;
}

.manage-roaming-toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d2d5db;
  transition: 0.3s;
  border-radius: 24px;
  z-index: 2;
}

.manage-roaming-toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  right: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  z-index: 3;
}

.manage-roaming-toggle-switch input:checked + .manage-roaming-toggle-slider {
  background-color: #ed1c24;
}

.manage-roaming-toggle-switch input:checked + .manage-roaming-toggle-slider:before {
  transform: translateX(0);
}

.manage-roaming-toggle-switch input:not(:checked) + .manage-roaming-toggle-slider:before {
  transform: translateX(-20px);
}

.manage-roaming-toggle-switch input:focus + .manage-roaming-toggle-slider {
  box-shadow: 0 0 1px #ed1c24;
}

/* RTL (Arabic) Toggle Switch */
html[dir="rtl"] .manage-roaming-toggle-switch input:checked + .manage-roaming-toggle-slider:before {
  transform: translateX(-20px);
}

html[dir="rtl"] .manage-roaming-toggle-switch input:not(:checked) + .manage-roaming-toggle-slider:before {
  transform: translateX(0);
}

/* Divider */
.manage-roaming-divider {
  height: 1px;
  background: #e5e7eb;
  margin: 0;
}

/* Packs Info */
.manage-roaming-packs-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.manage-roaming-packs-text {
  font-size: 14px;
  color: #080808;
  line-height: 20px;
  opacity: 0.8;
  margin: 0;
}

.manage-roaming-explore-btn {
  background: none;
  border: none;
  font-family: "Rubik-Medium", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #ed1c24;
  cursor: pointer;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s ease;
  align-self: flex-start;
}

.manage-roaming-explore-btn:hover {
  color: #c41820;
}

.manage-roaming-explore-arrow {
  font-size: 12px;
  font-weight: bold;
}

/* Modal Footer */
.manage-roaming-modal-footer {
  padding: 0 24px 24px 24px;
  margin-top: auto;
  flex-shrink: 0;
}

.manage-roaming-apply-btn {
  width: 100%;
  background: #ed1c24;
  color: white;
  border: none;
  border-radius: 12px;
  padding: 16px 24px;
  font-family: "Rubik-Bold", sans-serif;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.2s ease;
  line-height: 24px;
}

.manage-roaming-apply-btn:hover {
  background: #c41820;
}

.manage-roaming-apply-btn:active {
  background: #a31418;
}

/* Animations */
@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalSlideIn {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes modalSlideOut {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(100%);
  }
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .manage-roaming-modal {
    max-height: 85vh;
    max-width: 100%;
  }
  .manage-roaming-modal-content {
    padding: 0 20px 20px 20px;
  }
  .manage-roaming-modal-footer {
    padding: 0 20px 20px 20px;
  }
} 


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


/* Manage Roaming Modal Shimmer Styles */

/* Shimmer Base Animation */
.shimmer {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: shimmer 1.5s infinite;
  /* border-radius: 4px; */
}

@keyframes shimmer {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

/* FadeInWrapper Shimmer Enhancements */
.fade-in-wrapper .shimmer {
  animation: shimmer 1.5s infinite, fadeInShimmer 0.8s ease-out;
}

@keyframes fadeInShimmer {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal Header Shimmer */
.quick-recharge-modal-drag-handle.shimmer {
  width: 40px;
  height: 4px;
  border-radius: 2px;
}

.modal-close-btn.shimmer {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

/* Title Section Shimmer */
.manage-roaming-title-section-shimmer {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.manage-roaming-title-shimmer {
  height: 24px;
  width: 200px;
  margin-bottom: 8px;
}

.manage-roaming-subtitle-shimmer {
  height: 16px;
  width: 280px;
  margin-bottom: 16px;
}

/* Roaming Data Section Shimmer */
.manage-roaming-data-section-shimmer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.manage-roaming-data-header-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.manage-roaming-data-title-shimmer {
  height: 18px;
  width: 120px;
  flex: 1;
}

.manage-roaming-toggle-shimmer {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  flex-shrink: 0;
}

/* Passport Daily Card Shimmer */
.passport-daily-card-shimmer {
  background: #e0e0e0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.passport-daily-header-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.passport-daily-title-shimmer {
  height: 18px;
  width: 100px;
}

.passport-daily-boost-shimmer {
  height: 16px;
  width: 60px;
  border-radius: 4px;
}

.passport-daily-description-shimmer {
  height: 32px;
  width: 100%;
  border-radius: 4px;
}

/* Divider Shimmer */
.manage-roaming-divider-shimmer {
  height: 1px;
  width: 100%;
  border-radius: 1px;
}

.manage-roaming-divider-wrapper {
  width: 100%;
}

/* International Section Shimmer */
.manage-roaming-section-shimmer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.manage-roaming-section-header-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.manage-roaming-section-title-shimmer {
  height: 18px;
  width: 100px;
  flex: 1;
}

.manage-roaming-section-subtitle-shimmer {
  height: 14px;
  width: 120px;
  border-radius: 3px;
}

.manage-roaming-section-description-shimmer {
  height: 40px;
  width: 100%;
  border-radius: 4px;
}

/* Roaming Packs Info Shimmer */
.manage-roaming-packs-info-shimmer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.manage-roaming-packs-text-shimmer {
  height: 40px;
  width: 100%;
  border-radius: 4px;
}

.manage-roaming-explore-btn-shimmer {
  height: 18px;
  width: 80px;
  border-radius: 4px;
  align-self: flex-start;
}

/* Apply Changes Button Shimmer */
.manage-roaming-apply-btn-shimmer {
  height: 48px;
  width: 100%;
  border-radius: 12px;
}

/* Enhanced FadeInWrapper Staggered Animation */
.fade-in-wrapper:nth-child(1) { transition-delay: 0.1s; }
.fade-in-wrapper:nth-child(2) { transition-delay: 0.2s; }
.fade-in-wrapper:nth-child(3) { transition-delay: 0.3s; }
.fade-in-wrapper:nth-child(4) { transition-delay: 0.4s; }
.fade-in-wrapper:nth-child(5) { transition-delay: 0.5s; }
.fade-in-wrapper:nth-child(6) { transition-delay: 0.6s; }
.fade-in-wrapper:nth-child(7) { transition-delay: 0.7s; }
.fade-in-wrapper:nth-child(8) { transition-delay: 0.8s; }

/* Responsive adjustments for shimmer */
@media (max-width: 600px) {
  .manage-roaming-title-shimmer {
    width: 160px;
  }
  
  .manage-roaming-subtitle-shimmer {
    width: 220px;
  }
  
  .manage-roaming-data-title-shimmer {
    width: 100px;
  }
  
  .manage-roaming-section-title-shimmer {
    width: 80px;
  }
} 

/* Pack Usage Over Specific Shimmer Styles */

/* Main Container Shimmer */
.pack-usage-over-container-shimmer {
  background: #f8f9fa;
  min-height: calc(100vh - 120px);
  padding-bottom: 20px;
  position: relative;
}

/* Header Section Shimmer */
.pack-usage-header-shimmer {
  background: #ffffff;
  padding: 20px 16px;
}

.pack-usage-header-content-shimmer {
  position: relative;
  text-align: center;
}

/* Chart Section Shimmer */
.pack-usage-chart-section-shimmer {
  margin-top: 24px;
  padding: 0 16px;
}

.pack-usage-chart-container-shimmer {
  background: #ffffff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: relative;
}

.pack-usage-chart-shimmer {
  width: 100%;
  height: 165px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.pack-usage-chart-overlay-shimmer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pack-usage-chart-lock-shimmer {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pack-usage-chart-lock-icon-shimmer {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

/* Main Card Shimmer */
.pack-usage-card-shimmer {
  background: #ffffff;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin: 0 16px;
  padding: 20px 16px;
  position: absolute;
  width: calc(100% - 32px);
}

/* Tabs Section Shimmer */
.pack-usage-tabs-shimmer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

.pack-usage-tabs-container-shimmer {
  display: flex;
  gap: 4px;
}

.pack-usage-tab-shimmer {
  height: 20px;
  width: 60px;
  border-radius: 4px;
}

.pack-usage-actions-shimmer {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pack-usage-filter-icon-shimmer,
.pack-usage-download-icon-shimmer {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

.pack-usage-lock-icon-small-shimmer {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}

/* Month Selection Shimmer */
.pack-usage-months-shimmer {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

.pack-usage-month-btn-shimmer {
  height: 32px;
  width: 80px;
  border-radius: 20px;
}

/* Usage List Shimmer */
.pack-usage-list-shimmer {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pack-usage-date-group-shimmer {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pack-usage-date-header-shimmer {
  height: 20px;
  width: 150px;
  border-radius: 4px;
}

.pack-usage-cards-shimmer {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pack-usage-entry-shimmer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f3f4f6;
}

.pack-usage-entry-shimmer:last-child {
  border-bottom: none;
}

.pack-usage-entry-left-shimmer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.pack-usage-entry-icon-shimmer {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  flex-shrink: 0;
}

.pack-usage-entry-details-shimmer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.pack-usage-entry-phone-shimmer,
.pack-usage-entry-id-shimmer {
  height: 16px;
  width: 120px;
  border-radius: 3px;
}

.pack-usage-entry-type-shimmer {
  height: 12px;
  width: 80px;
  border-radius: 3px;
}

.pack-usage-entry-right-shimmer {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.pack-usage-entry-cost-shimmer {
  height: 16px;
  width: 60px;
  border-radius: 3px;
}

.pack-usage-entry-info-shimmer {
  height: 12px;
  width: 100px;
  border-radius: 3px;
}

/* Responsive adjustments for pack usage shimmer */
@media (max-width: 600px) {
  .pack-usage-over-container-shimmer {
    padding-bottom: 16px;
    margin-top: 55px;
  }
  
  .pack-usage-header-shimmer {
    padding: 16px 12px 12px;
  }
  
  .pack-usage-chart-section-shimmer {
    margin-top: 20px;
    padding: 0 12px;
  }
  
  .pack-usage-card-shimmer {
    margin: 12px;
    padding: 16px 12px;
  }
  
  .pack-usage-tabs-container-shimmer {
    gap: 16px;
  }
  
  .pack-usage-tab-shimmer {
    height: 18px;
    width: 50px;
  }
  
  .pack-usage-actions-shimmer {
    gap: 12px;
  }
  
  .pack-usage-months-shimmer {
    gap: 8px;
  }
  
  .pack-usage-month-btn-shimmer {
    height: 28px;
    width: 70px;
  }
  
  .pack-usage-date-header-shimmer {
    height: 18px;
    width: 120px;
  }
  
  .pack-usage-entry-shimmer {
    padding: 10px 0;
  }
  
  .pack-usage-entry-left-shimmer {
    gap: 10px;
  }
  
  .pack-usage-entry-phone-shimmer,
  .pack-usage-entry-id-shimmer {
    height: 14px;
    width: 100px;
  }
  
  .pack-usage-entry-cost-shimmer {
    height: 14px;
    width: 50px;
  }
}

@media (max-width: 375px) {
  .pack-usage-header-shimmer {
    padding: 12px 8px 8px;
  }
  
  .pack-usage-card-shimmer {
    margin: 8px;
    padding: 12px 8px;
  }
  
  .pack-usage-tabs-container-shimmer {
    gap: 12px;
  }
  
  .pack-usage-tab-shimmer {
    height: 16px;
    width: 40px;
  }
  
  .pack-usage-month-btn-shimmer {
    height: 24px;
    width: 60px;
  }
  
  .pack-usage-entry-left-shimmer {
    gap: 8px;
  }
  
  .pack-usage-entry-icon-shimmer {
    width: 20px;
    height: 20px;
  }
  
  .pack-usage-entry-phone-shimmer,
  .pack-usage-entry-id-shimmer {
    height: 12px;
    width: 80px;
  }
  
  .pack-usage-entry-type-shimmer {
    height: 10px;
    width: 60px;
  }
  
  .pack-usage-entry-cost-shimmer {
    height: 12px;
    width: 40px;
  }
  
  .pack-usage-entry-info-shimmer {
    height: 10px;
    width: 80px;
  }
}