/* ==========================================================================
   1. CONFIGURATION & STYLES GLOBAUX
   ========================================================================== */

/* --- Import de la police --- */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* --- Variables CSS (Design Tokens) --- */
:root {
  /* Palette de couleurs */
  --color-primary: #007bff;
  --color-primary-hover: #0056b3;
  --color-secondary: #6c757d;
  --color-text: #212529;
  --color-background: #f8f9fa;
  --color-surface: #ffffff; /* Pour les cartes, modales, etc. */
  --color-border: #dee2e6;
  --color-white: #ffffff;

  /* Couleurs sémantiques (actions & statuts) */
  --color-success: #155724;
  --color-success-bg: #d4edda;
  --color-warning: #856404;
  --color-warning-bg: #fff3cd;
  --color-danger: #721c24;
  --color-danger-bg: #f8d7da;
  --color-danger-action: #dc3545;
  --color-danger-action-hover: #c82333;

  /* Couleurs spécifiques (communautés) */
  --color-discord: #5865F2;
  --color-telegram: #2AABEE;
  
  /* Typographie */
  --font-family-base: 'Roboto', sans-serif;
  --font-size-base: 1rem;
  --line-height-base: 1.6;

  /* Espacements */
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2.5rem;

  /* Bordures et ombres */
  --border-radius: 8px;
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.07);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);

  /* Transitions */
  --transition-duration: 0.25s;
  --transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: all var(--transition-duration) var(--transition-timing-function);
}

/* --- Thème sombre --- */
body.dark-theme {
  --color-primary: #3d9dff;
  --color-primary-hover: #5aa9ff;
  --color-secondary: #adb5bd;
  --color-text: #e0e0e0;
  --color-background: #121212;
  --color-surface: #1e1e1e;
  --color-border: #444;

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.5), 0 6px 6px rgba(0, 0, 0, 0.4);
}

/* --- Styles globaux & reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Amélioration de l'indicateur de focus pour l'accessibilité */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   2. LAYOUT (Header, Nav, Footer, Conteneurs principaux)
   ========================================================================== */

header {
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  padding: var(--spacing-md) 5%;
  position: sticky;
  top: 0;
  z-index: 1000;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

nav h1 {
  margin: 0;
  font-size: 1.8rem;
}

nav h1 a {
  color: var(--color-primary);
  text-decoration: none;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--spacing-xl);
}

nav a {
  text-decoration: none;
  color: var(--color-text);
  font-weight: 500;
  position: relative;
  padding: 5px 0;
  transition: color var(--transition-duration) ease;
}

nav a:hover {
  color: var(--color-primary);
}

nav a::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform var(--transition-duration) ease-out;
}

nav a:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

main {
  padding: var(--spacing-xl) 5%;
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

footer {
  text-align: center;
  padding: var(--spacing-xl) 5%;
  margin-top: 3rem;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

footer p {
  margin: var(--spacing-sm) 0;
}

footer a {
  text-decoration: none;
  color: var(--color-primary);
  font-weight: 500;
}

footer a:hover {
  text-decoration: underline;
}

/* ==========================================================================
   3. COMPOSANTS RÉUTILISABLES (Boutons, Formulaires)
   ========================================================================== */

/* --- Boutons --- */
.cta-button {
  display: inline-block;
  padding: 0.9rem 1.8rem;
  border: none;
  border-radius: var(--border-radius);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-base);
  background-color: var(--color-primary);
  color: var(--color-white);
}

.cta-button:hover {
  background-color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* --- Formulaires --- */
.form-container {
  max-width: 450px;
  margin: var(--spacing-xl) auto;
  padding: var(--spacing-xl);
  background: var(--color-surface);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
}

.form-container h2 {
  text-align: center;
  margin-top: 0;
  margin-bottom: var(--spacing-lg);
  color: var(--color-primary);
}

.form-group {
  margin-bottom: var(--spacing-lg);
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-sm);
  font-weight: 500;
}

.form-group input {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  font-size: var(--font-size-base);
  background-color: var(--color-background);
  color: var(--color-text);
  transition: border-color var(--transition-duration) ease, box-shadow var(--transition-duration) ease;
}

.form-group input:focus-visible {
  outline: none; /* On utilise box-shadow pour le focus */
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

.form-switch {
  text-align: center;
  margin-top: var(--spacing-lg);
}

.input-with-button {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.input-with-button input {
  flex-grow: 1;
  margin-bottom: 0;
}

#generate-cid-btn {
  padding: 0.8rem 1rem;
  font-size: 1.2rem;
  flex-shrink: 0;
  border: 1px solid var(--border-color);
  background-color: var(--color-surface);
  border-radius: var(--border-radius);
  cursor: pointer;
  line-height: 1;
  transition: var(--transition-base);
}

#generate-cid-btn:hover {
  background-color: var(--color-background);
  border-color: var(--color-primary);
}

/* ==========================================================================
   4. STYLES SPÉCIFIQUES AUX PAGES
   ========================================================================== */

/* --- Homepage (#hero, #community) --- */
#hero {
  text-align: center;
  padding: 6rem 1.5rem;
  background: var(--color-surface);
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-xl);
}

#hero h2 {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-md);
}

#hero p {
  font-size: 1.25rem;
  margin-bottom: var(--spacing-xl);
  color: var(--color-secondary);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

#community {
  text-align: center;
  padding: 3rem 1rem;
  margin-top: var(--spacing-xl);
}

.community-links {
  display: flex;
  justify-content: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  margin-top: var(--spacing-md);
}

.community-button {
  color: var(--color-white);
  padding: 0.8rem 1.8rem;
  text-decoration: none;
  border-radius: var(--border-radius);
  font-weight: 700;
  transition: var(--transition-base);
  display: inline-block;
  box-shadow: var(--shadow-sm);
}

.community-button:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  opacity: 0.95;
}

.community-button.discord { background-color: var(--color-discord); }
.community-button.telegram { background-color: var(--color-telegram); }


/* --- App Page (#app-container) --- */
#app-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--spacing-md);
  gap: var(--spacing-xl);
}

#call-panel, #history-panel {
  width: 100%;
  background: var(--color-surface);
  padding: var(--spacing-xl);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-md);
}

#call-panel {
  max-width: 450px;
  text-align: center;
  flex-shrink: 0;
}

#history-panel {
  flex-grow: 1;
}

#call-panel h2, #history-panel h2 {
  margin-top: 0;
  margin-bottom: var(--spacing-lg);
  color: var(--color-primary);
  text-align: center;
}

/* Styles pour les selects dans le panneau d'appel */
#route-selector, #country-selector {
    width: 100%;
    padding: 0.8rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    margin-bottom: var(--spacing-lg);
    background-color: var(--color-background);
    color: var(--color-text);
}

#spoofer-credits-display {
  margin-bottom: var(--spacing-lg);
  font-size: 1.1rem;
}

#sip-status {
  padding: 0.75rem;
  border-radius: var(--border-radius);
  margin-bottom: var(--spacing-lg);
  font-weight: 500;
}
.status-disconnected { background-color: var(--color-danger-bg); color: var(--color-danger); }
.status-connecting { background-color: var(--color-warning-bg); color: var(--color-warning); }
.status-connected { background-color: var(--color-success-bg); color: var(--color-success); }

#keypad, #incall-keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin: var(--spacing-lg) 0;
}

.keypad-btn {
  padding: 1rem;
  font-size: 1.6rem;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  background-color: var(--color-surface);
  cursor: pointer;
  transition: var(--transition-base);
}

.keypad-btn:hover {
  background-color: var(--color-background);
  transform: scale(1.05);
}

.keypad-btn:active {
  transform: scale(0.95);
}

#incall-timer-display {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: var(--spacing-lg);
}

.incall-controls {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  align-items: center;
  margin-bottom: var(--spacing-md);
}

.incall-controls button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  font-size: 1.5rem;
  cursor: pointer;
  background: var(--color-background);
  color: var(--color-text);
  transition: var(--transition-base);
  display: flex;
  align-items: center;
  justify-content: center;
}

.incall-controls button:hover {
  background-color: var(--color-border);
  transform: translateY(-2px);
}

.incall-controls button.hangup {
  background-color: var(--color-danger-action);
  color: var(--color-white);
}
.incall-controls button.hangup:hover {
  background-color: var(--color-danger-action-hover);
  box-shadow: 0 0 15px rgba(220, 53, 69, 0.5);
}

.transfer-controls {
  display: flex;
  gap: 10px;
  margin-top: var(--spacing-lg);
}

/* Call History Table */
#call-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

#call-history-table thead {
  background-color: var(--color-background);
}

#call-history-table th,
#call-history-table td {
  padding: 0.8rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

#call-history-table tbody tr {
  transition: background-color var(--transition-duration) ease;
}

#call-history-table tbody tr:hover {
  background-color: var(--color-background);
}


/* --- Shop Page --- */
#shop {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

#shop h2 {
  font-size: 2.8rem;
  margin-bottom: var(--spacing-xl);
  color: var(--color-primary);
}

.packs-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-xl);
}

.pack {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing-xl) var(--spacing-lg);
  background: var(--color-surface);
  transition: box-shadow var(--transition-duration) ease, transform var(--transition-duration) ease;
}

.pack:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-8px);
}

.pack.premium {
  border-color: var(--color-primary);
  border-width: 2px;
  transform: scale(1.05); /* Le fait ressortir */
  box-shadow: var(--shadow-lg);
}

.pack h3 {
  font-size: 1.6rem;
  margin-bottom: var(--spacing-md);
}

.pack .price {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--color-primary);
  margin: var(--spacing-md) 0;
}

.pack .minutes {
  font-size: 1.2rem;
  font-weight: 500;
  margin-bottom: var(--spacing-sm);
}

.pack .bonus {
  color: var(--color-secondary);
  margin-bottom: var(--spacing-lg);
  font-style: italic;
}

.payment-methods {
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg);
    background-color: var(--color-surface);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-border);
}


/* --- CGU & Numbers Page --- */
#cgu, #numbers-table {
    background-color: var(--color-surface);
    padding: var(--spacing-xl);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}

#cgu h3 {
    color: var(--color-primary);
    margin-top: var(--spacing-lg);
}

#numbers-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--spacing-lg);
}
#numbers-table th, #numbers-table td {
    padding: 0.8rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border-color);
}
#numbers-table thead {
    background-color: var(--color-background);
}
#numbers-table tbody tr:hover {
    background-color: var(--color-background);
}

/* ==========================================================================
   5. RESPONSIVE DESIGN
   ========================================================================== */

/* --- Tablettes (< 992px) --- */
@media (max-width: 992px) {
  #app-container {
    flex-direction: column;
    align-items: center;
  }

  #call-panel, #history-panel {
    max-width: 700px;
  }
}


/* --- Mobiles (< 768px) --- */
@media (max-width: 768px) {
  nav {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  nav ul {
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    width: 100%;
    margin-top: var(--spacing-md);
  }

  main {
    padding: var(--spacing-lg) 3%;
  }

  #hero h2 {
    font-size: 2.2rem;
  }

  #call-panel, #history-panel, .form-container {
    padding: var(--spacing-lg);
  }

  #incall-timer-display {
    font-size: 2.5rem;
  }

  .packs-container {
    grid-template-columns: 1fr; /* Une seule colonne sur mobile */
  }

  .pack.premium {
    transform: scale(1); /* On annule le scale sur mobile pour l'espace */
  }
}
/* --- Style amélioré pour les inputs du panneau d'appel --- */
#spoofer-number-input,
#caller-id-input,
#incall-transfer-input {
    width: 100%;
    padding: 0.9rem 1rem; /* Padding augmenté pour une meilleure aération */
    font-size: 1.2rem;
    font-weight: 500;
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-background);
    color: var(--color-text);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: var(--spacing-sm); /* Ajout d'une petite marge en bas */
}

#spoofer-number-input:focus-visible,
#caller-id-input:focus-visible,
#incall-transfer-input:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.25); /* Ombre de focus plus visible */
}

/* --- Style amélioré pour les menus déroulants (select) --- */
#route-selector,
#country-selector {
    /* On retire l'apparence par défaut du navigateur */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Style de base (similaire aux inputs) */
    width: 100%;
    padding: 0.9rem 1rem;
    font-size: 1rem;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background-color: var(--color-background);
    color: var(--color-text);
    cursor: pointer;

    /* Ajout de la flèche personnalisée */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

#route-selector:focus-visible,
#country-selector:focus-visible {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.25);
}

/* --- Style amélioré pour le bouton de transfert --- */
#incall-transfer-btn {
    padding: 0.8rem 1.2rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    
    background-color: var(--color-surface);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: var(--border-radius);
    
    cursor: pointer;
    transition: var(--transition-base);
    flex-shrink: 0; /* Empêche le bouton de se déformer */
}

#incall-transfer-btn:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
#outbound-history-panel,
        #did-history-panel {
            background-color: #ffffff;
            border-radius: 8px;
            padding: 20px 25px;
            margin-top: 25px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }

        /* --- Titres H2 --- */
        #outbound-history-panel h2,
        #did-history-panel h2 {
            margin-top: 0;
            margin-bottom: 20px;
            color: #2c3e50;
            font-size: 1.4em;
            border-bottom: 2px solid #ecf0f1;
            padding-bottom: 10px;
        }

        /* --- Style général de la table --- */
        #outbound-history-table,
        #did-history-table {
            width: 100%;
            border-collapse: collapse;
            font-size: 0.95em;
        }

        /* --- En-tête de la table (Date, Numéro, etc.) --- */
        #outbound-history-table thead th,
        #did-history-table thead th {
            background-color: #34495e;
            color: #ffffff;
            font-weight: 600;
            padding: 12px 15px;
            text-align: left;
        }

        /* --- Cellules de la table --- */
        #outbound-history-table tbody td,
        #did-history-table tbody td {
            padding: 12px 15px;
            border-bottom: 1px solid #ecf0f1;
            color: #34495e;
        }
        
        /* --- Lignes alternées (zébrures) pour la lisibilité --- */
        #outbound-history-table tbody tr:nth-child(even),
        #did-history-table tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        
        /* --- Ligne "Aucun appel..." --- */
        #outbound-history-table tbody tr td[colspan="4"],
        #did-history-table tbody tr td[colspan="4"] {
            text-align: center;
            color: #7f8c8d;
            padding: 20px;
            font-style: italic;