/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Import Manrope font for plan data amounts */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@700;800&display=swap');

/* Custom class for plan data amounts (e.g., "5 GB") */
.plan-data-amount {
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
}

/* Scrollbar hiding utility */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Home: "Used ticket" card for previous eSIMs */
.tma-card-dashed {
  background-color: var(--tg-theme-section-bg-color, #f5f5f5);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 8px;
  border: 1.5px dashed var(--tg-theme-hint-color);
  opacity: 0.7;
}

body.tma-dark .tma-card-dashed {
  background-color: var(--tg-theme-secondary-bg-color);
}

/* Home: Popular destinations horizontal scroll */
.destination-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.destination-scroll::-webkit-scrollbar {
  display: none;
}

.destination-card {
  flex: 0 0 auto;
  width: 110px;
  scroll-snap-align: start;
  background-color: var(--tg-theme-section-bg-color, #f5f5f5);
  border-radius: 16px;
  padding: 16px 12px;
  text-align: center;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease;
}

.destination-card:active {
  transform: scale(0.96);
}

body.tma-dark .destination-card {
  background-color: var(--tg-theme-secondary-bg-color);
}

/* Home: Side-by-side action buttons */
.esim-actions {
  display: flex;
  gap: 8px;
}

.esim-actions .tma-button,
.esim-actions .tma-button-secondary {
  flex: 1;
  text-align: center;
  padding: 10px 16px;
  font-size: 14px;
}

/* Home: Ticket card (boarding pass) */
.ticket-card {
  position: relative;
  overflow: visible;
}

/* Ticket perforation: notch circles use page bg (auto light/dark via layout var) */
.ticket-notch {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tma-page-bg);
  flex-shrink: 0;
}

/* Home: Data progress bar */
.esim-progress-track {
  height: 8px;
  border-radius: 9999px;
  background: var(--tg-theme-secondary-bg-color);
  overflow: hidden;
}

body.tma-dark .esim-progress-track {
  background: color-mix(in srgb, var(--tg-theme-hint-color) 20%, transparent);
}

.esim-progress-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 0.6s ease-out;
}