/* Skeleton Loading Styles */

/* Base skeleton animation */
@keyframes skeleton-loading {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.ex-skeleton {
  display: inline-block;
  height: 1em;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

/* Skeleton row styling */
.ex-skeleton-row {
  opacity: 0.7;
}

.ex-skeleton-row:hover {
  background: transparent !important;
}

/* Exchange Center Skeleton Shapes - Fixed */
.ex-skeleton-center {
  width: 100%;
  height: 50px;
  border-radius: 8px;
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  background: transparent;
}

.ex-skeleton-center::before {
  content: "";
  position: static;
  width: 40px;
  height: 40px;
  background: linear-gradient(90deg, #e0e0e0 25%, #d0d0d0 50%, #e0e0e0 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 6px;
  flex-shrink: 0;
}

.ex-skeleton-center::after {
  content: "";
  position: static;
  width: 150px;
  height: 16px;
  background: linear-gradient(90deg, #e0e0e0 25%, #d0d0d0 50%, #e0e0e0 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
  flex: 1;
}

/* Rate Skeleton - Fixed */
.ex-skeleton-rate {
  width: 90px;
  height: 24px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e0e0e0 25%, #d0d0d0 50%, #e0e0e0 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
}

/* Difference Skeleton - Fixed */
.ex-skeleton-difference {
  width: 70px;
  height: 20px;
  border-radius: 5px;
  background: linear-gradient(90deg, #e0e0e0 25%, #d0d0d0 50%, #e0e0e0 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
}

/* Currency Skeleton Shapes - Fixed */
.ex-skeleton-currency {
  width: 100%;
  height: 45px;
  border-radius: 6px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: transparent;
}

.ex-skeleton-currency::before {
  content: "";
  position: static;
  width: 60px;
  height: 18px;
  background: linear-gradient(90deg, #e0e0e0 25%, #d0d0d0 50%, #e0e0e0 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
  font-weight: bold;
}

.ex-skeleton-currency::after {
  content: "";
  position: static;
  width: 120px;
  height: 14px;
  background: linear-gradient(90deg, #e8e8e8 25%, #d8d8d8 50%, #e8e8e8 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 3px;
}

/* Center Name Skeleton */
.ex-skeleton-center-name {
  width: 120px;
  height: 18px;
  border-radius: 4px;
}

/* Stats Card Skeletons */
.ex-skeleton-stat-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 25px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.ex-skeleton-stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
}

.ex-skeleton-stat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ex-skeleton-stat-label {
  width: 80px;
  height: 14px;
  border-radius: 3px;
}

.ex-skeleton-stat-value {
  width: 120px;
  height: 32px;
  border-radius: 6px;
}

.ex-skeleton-stat-center {
  width: 100px;
  height: 14px;
  border-radius: 3px;
}

/* Converter Result Skeleton */
.ex-skeleton-converter-result {
  text-align: center;
  padding: 20px;
}

.ex-skeleton-result-amount {
  width: 250px;
  height: 24px;
  margin: 0 auto 10px;
  border-radius: 6px;
}

.ex-skeleton-result-info {
  width: 180px;
  height: 14px;
  margin: 0 auto;
  border-radius: 3px;
}

/* Table Skeleton Variations */
.ex-skeleton-table-3col .ex-skeleton-row td:first-child .ex-skeleton {
  width: 180px;
}

.ex-skeleton-table-3col .ex-skeleton-row td:nth-child(2) .ex-skeleton {
  width: 100px;
}

.ex-skeleton-table-3col .ex-skeleton-row td:nth-child(3) .ex-skeleton {
  width: 150px;
}

/* Responsive Skeleton Adjustments */
@media (max-width: 768px) {
  .ex-skeleton-center {
    height: 40px;
  }

  .ex-skeleton-center::before {
    width: 30px;
    height: 30px;
  }

  .ex-skeleton-center::after {
    width: 100px;
    height: 14px;
  }

  .ex-skeleton-currency {
    height: 35px;
  }

  .ex-skeleton-rate {
    width: 70px;
    height: 20px;
  }

  .ex-skeleton-difference {
    width: 50px;
    height: 18px;
  }

  .ex-skeleton-center-logo {
    width: 120px;
    height: 28px;
    flex-direction: column;
    gap: 5px;
  }

  .ex-skeleton-center-logo::before {
    width: 28px;
    height: 28px;
  }

  .ex-skeleton-center-logo::after {
    width: 80px;
    height: 10px;
  }
}

@media (max-width: 480px) {
  .ex-skeleton-center {
    width: 120px;
    height: 35px;
  }

  .ex-skeleton-center::before {
    width: 25px;
    height: 25px;
  }

  .ex-skeleton-center::after {
    left: 35px;
    width: 70px;
    height: 8px;
  }

  .ex-skeleton-currency {
    width: 110px;
    height: 30px;
  }

  .ex-skeleton-rate {
    width: 70px;
    height: 18px;
  }

  .ex-skeleton-difference {
    width: 50px;
    height: 16px;
  }
}

/* Skeleton Pulse Animation Alternative */
.ex-skeleton-pulse {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
  100% {
    opacity: 1;
  }
}

/* Hide skeleton when data is loaded */
.ex-data-loaded .ex-skeleton-row {
  display: none;
}

/* Skeleton for specific components */
.ex-skeleton-search-input {
  width: 200px;
  height: 40px;
  border-radius: 20px;
}

.ex-skeleton-button {
  width: 100px;
  height: 40px;
  border-radius: 20px;
}

.ex-skeleton-select {
  width: 180px;
  height: 40px;
  border-radius: 20px;
}

/* Loading state for entire sections */
.ex-section-loading .ex-table tbody {
  opacity: 0.6;
}

/* Ensure skeleton rows are visible during loading */
.ex-section-loading .ex-skeleton-row {
  display: table-row !important;
  opacity: 1;
}

/* Currency table specific skeleton loading */
.ex-currency-table-container.ex-section-loading .ex-skeleton-row {
  display: table-row !important;
  opacity: 1;
}

.ex-currency-table-container.ex-section-loading tbody {
  opacity: 1;
}

/* Ensure skeleton rows are always visible during loading */
.ex-section-loading tbody .ex-skeleton-row {
  display: table-row !important;
  opacity: 1;
  animation: none;
}

.ex-section-loading tbody .ex-skeleton-row td {
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}

.ex-section-loading .ex-skeleton-row td {
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.ex-section-loading .ex-skeleton-row {
  display: table-row;
}

/* Smooth transition when skeleton disappears */
.ex-table tbody tr {
  transition: opacity 0.3s ease;
}

.ex-skeleton-row {
  transition: opacity 0.3s ease;
}

/* Custom skeleton colors for different sections */
.ex-currency-section .ex-skeleton {
  background: linear-gradient(90deg, #f8f9fa 25%, #e9ecef 50%, #f8f9fa 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
}

/* Hide skeleton when data is loaded */
.ex-currency-table-container:not(.ex-section-loading) .ex-skeleton-row {
  display: none !important;
}

.ex-table-container:not(.ex-section-loading) .ex-skeleton-row {
  display: none !important;
}

.ex-stats-grid .ex-skeleton {
  background: linear-gradient(90deg, #f0f8ff 25%, #e6f3ff 50%, #f0f8ff 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
}

/* Skeleton for converter section */
.ex-converter-section .ex-skeleton {
  background: linear-gradient(90deg, #f0fff0 25%, #e6ffe6 50%, #f0fff0 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
}

/* Center Logo Container Skeleton - Fixed */
.ex-skeleton-center-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  background: transparent;
}

/* Make skeleton elements more visible */
.ex-skeleton-currency,
.ex-skeleton-rate,
.ex-skeleton-center-logo {
  background: linear-gradient(90deg, #e0e0e0 25%, #d0d0d0 50%, #e0e0e0 75%) !important;
  background-size: 200px 100% !important;
  animation: skeleton-loading 1.5s infinite !important;
  min-height: 20px;
  border-radius: 4px;
}

.ex-skeleton-center-logo::before {
  content: "";
  width: 32px;
  height: 32px;
  background: linear-gradient(90deg, #e0e0e0 25%, #d0d0d0 50%, #e0e0e0 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
  flex-shrink: 0;
}

.ex-skeleton-center-logo::after {
  content: "";
  width: 100px;
  height: 14px;
  background: linear-gradient(90deg, #e8e8e8 25%, #d8d8d8 50%, #e8e8e8 75%);
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 3px;
  flex: 1;
}