/**
 * Provider Details Modal - Dedicated Provider-Specific Modal
 * Shows packages from a specific provider only
 * Features: Dual tab system (Main tabs + Sub tabs), Provider branding
 */

/* ===== MODAL OVERLAY ===== */
.provider-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.provider-modal-overlay.show {
  opacity: 1;
  visibility: visible;
}

/* ===== MODAL CONTAINER ===== */
.provider-modal {
  background: var(--color-bg-primary, #ffffff);
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  height: 100vh !important;
  min-height: 100vh;
  max-height: 100vh !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  opacity: 1;
  visibility: visible;
}

.provider-modal-overlay.show .provider-modal {
  transform: translateY(0);
}

/* Desktop responsive */
@media (min-width: 768px) {
  .provider-modal-overlay {
    align-items: flex-end;
  }

  .provider-modal {
    border-radius: 0;
    width: 100%;
    max-width: 100vw;
    height: 100vh !important;
    transform: translateY(100%);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  }

  .provider-modal-overlay.show .provider-modal {
    transform: translateY(0);
  }
}

/* ===== DRAG HANDLE ===== */
.provider-modal-drag-handle {
  display: none;
}

/* ===== PROVIDER HEADER (UNIQUE TO PROVIDER MODAL) ===== */
.provider-modal-header {
  padding: 0 20px 16px 20px;
  border-bottom: 1px solid var(--color-border-primary, #e5e7eb);
  background: var(--color-bg-primary, #ffffff);
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.provider-header-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.provider-logo-container {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--provider-color, #007aff);
  flex-shrink: 0;
}

.provider-logo-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.provider-logo-fallback {
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 600;
  background: #ffffff !important;
  color: #000000 !important;
}

.provider-name-title {
  font-size: 20px;
  font-weight: 600;
  color: #000000 !important;
  /* Black for light mode */
  margin: 0;
  line-height: 1.2;
}

/* Dark mode: White text for provider name */
@media (prefers-color-scheme: dark) {
  .provider-name-title {
    color: #ffffff !important;
    /* White for dark mode */
  }
}

.provider-modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--color-bg-secondary, #f3f4f6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--color-text-secondary, #6b7280);
  font-size: 16px;
}

.provider-modal-close:hover {
  background: var(--color-bg-tertiary, #e5e7eb);
  color: var(--color-text-primary, #111827);
}

/* ===== MAIN TABS (Unlimited Data, Voice, etc.) ===== */
.provider-main-tabs {
  padding: 0 20px 16px 20px;
  border-bottom: 1px solid var(--color-border-primary, #e5e7eb);
  background: var(--color-bg-primary, #ffffff);
}

.provider-main-tabs-container {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.provider-main-tabs-container::-webkit-scrollbar {
  display: none;
}

.provider-main-tab {
  padding: 10px 18px;
  background: var(--color-bg-primary, #ffffff);
  border: 1px solid #e2e8f0;
  border-radius: 25px;
  font-size: 14px;
  font-weight: 500;
  color: #000000;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Hover removed as requested */

.provider-main-tab.active {
  background: #f3c11a;
  border-color: #f3c11a;
  color: #000000;
  box-shadow: 0 2px 8px rgba(243, 193, 26, 0.3);
}

/* ===== SUB TABS (All, Monthly, Weekly, Daily) ===== */
.provider-sub-tabs {
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border-primary, #e5e7eb);
  background: var(--color-bg-primary, #ffffff);
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.provider-sub-tabs::-webkit-scrollbar {
  display: none;
}

.provider-sub-tab {
  padding: 8px 16px;
  background: var(--color-bg-primary, #ffffff);
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  color: #000000;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Hover removed as requested */

.provider-sub-tab.active {
  background: #f3c11a;
  border-color: #f3c11a;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(243, 193, 26, 0.3);
}

/* ===== MODAL CONTENT ===== */
.provider-modal-content {
  flex: 1;
  overflow-y: auto;
  padding: 0;
  background: var(--color-bg-primary, #ffffff);
}

/* ===== LOADING STATE ===== */
/* Loading state completely disabled - no more ugly loading */
.provider-loading-state {
  display: none !important;
}

/* ===== PACKAGES LIST ===== */
.provider-packages-list {
  padding: 8px !important;
  display: none;
}

.provider-packages-list.visible {
  display: block;
}

.provider-package-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.provider-package-card:hover {
  border-color: var(--provider-color, #3b82f6);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15);
  transform: translateY(-2px);
}

/* Package Title and Price Row */
.provider-package-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.provider-package-title {
  font-size: 18px;
  font-weight: 600;
  color: #000000;
  margin: 0;
  line-height: 1.2;
}

.provider-package-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--provider-color, #059669);
  text-align: right;
  line-height: 1.2;
}

/* Package Details */
.provider-package-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}

.provider-package-detail {
  padding: 4px 0 !important;
  font-size: 14px;
  color: #000000;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: none;
}

.provider-package-detail-icon {
  width: 16px;
  height: 16px;
  color: #6b7280;
  flex-shrink: 0;
}

/* Buy Now Section - Now uses unified component */
.provider-package-buy-section {
  border-top: 1px solid #e5e7eb;
  padding: 10px 16px 12px !important;
  margin-top: 4px !important;
}

/* ===== EMPTY STATE ===== */
.provider-empty-state {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  min-height: 200px;
}

.provider-empty-state.visible {
  display: flex;
}

.provider-empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.provider-empty-message {
  font-size: 14px;
  color: var(--color-text-secondary, #6b7280);
  margin: 0;
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
  .provider-modal-overlay {
    background: rgba(0, 0, 0, 0.7);
  }

  .provider-modal {
    background: #1c1c1e !important;
    border-color: #333333 !important;
  }

  .provider-modal-header {
    background: #1c1c1e !important;
    border-color: #333333 !important;
  }

  .provider-name-title {
    color: #ffffff !important;
  }

  /* Provider logo colors now handled by JavaScript */

  .provider-modal-close {
    background: #2c2c2e !important;
    color: #ffffff !important;
  }

  .provider-main-tabs {
    background: #1c1c1e !important;
    border-color: #333333 !important;
  }

  .provider-main-tab {
    background: var(--color-bg-primary, #1c1c1e) !important;
    border-color: #3a3a3c !important;
    color: #ffffff !important;
  }

  .provider-main-tab.active {
    background: #f3c11a !important;
    border-color: #f3c11a !important;
    color: #000000 !important;
    box-shadow: 0 2px 8px rgba(243, 193, 26, 0.3) !important;
  }

  .provider-sub-tabs {
    background: #1c1c1e !important;
    border-color: #333333 !important;
  }

  .provider-sub-tab {
    background: var(--color-bg-primary, #1c1c1e) !important;
    border-color: #3a3a3c !important;
    color: #ffffff !important;
  }

  .provider-sub-tab.active {
    background: #f3c11a !important;
    border-color: #f3c11a !important;
    color: #000000 !important;
    box-shadow: 0 2px 8px rgba(243, 193, 26, 0.3) !important;
  }

  .provider-modal-content {
    background: #1c1c1e !important;
  }

  .provider-package-card {
    background: #1a1a1a !important;
    border-color: #333333 !important;
  }

  .provider-package-title {
    color: #ffffff !important;
  }

  .provider-package-detail {
    color: #ffffff !important;
  }

  .provider-package-price {
    color: var(--provider-color, #007aff) !important;
  }
}

/* ===== PROVIDER COLOR THEMING ===== */
:root {
  --provider-color: #007aff;
  --provider-color-dark: #0056b3;
}

/* Provider colors are now set dynamically via JavaScript using CSS custom properties */

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 480px) {
  .provider-modal-header {
    padding: 0 16px 12px 16px;
  }

  .provider-main-tabs {
    padding: 12px 16px;
  }

  .provider-sub-tabs {
    padding: 12px 16px;
  }

  .provider-packages-list {
    padding: 8px !important;
  }

  .provider-package-card {
    padding: 16px !important;
  }

  .provider-package-title {
    font-size: 16px;
  }
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}