/* ========================================
   GVA List Cards - All Styles
   ======================================== */

:root {
   --primary-color: #0284c7;
   --primary-light: #e0f2fe;
   --secondary-color: #16a34a;
   --secondary-light: #dcfce7;
   --tertiary-color: #7c3aed;
   --tertiary-light: #ede9fe;
   --quaternary-color: #f97316;
   --quaternary-light: #ffedd5;
   --text-dark: #1e293b;
   --text-body: #475569;
}

/* ========================================
   COMMON ELEMENTS - LISTE STANDARD
   ======================================== */
.std-list {
   list-style: none;
   padding: 0;
   margin-top: 20px;
}

.std-list li {
   margin-bottom: 12px;
   display: flex;
   align-items: flex-start;
   color: var(--text-body);
   font-size: 0.95rem;
   line-height: 1.5;
}

.std-list li i {
   margin-right: 12px;
   margin-top: 4px;
   font-size: 1.1rem;
   flex-shrink: 0;
}

.icon-primary { color: var(--primary-color); }
.icon-secondary { color: var(--secondary-color); }
.icon-tertiary { color: var(--tertiary-color); }
.icon-quaternary { color: var(--quaternary-color); }

.card-title { 
   font-weight: 700; 
   color: var(--text-dark); 
   margin-bottom: 10px; 
   font-size: 1.5rem; 
}

.card-desc { 
   font-size: 0.9rem; 
   color: #64748b; 
   margin-bottom: 25px; 
}

/* ========================================
   STYLE 1
   ======================================== */
.style-1-wrapper .list-card {
   background: white;
   border-radius: 16px;
   padding: 40px 30px;
   border-top: 5px solid #ccc;
   box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
   height: 100%;
   transition: 0.3s;
}

.style-1-wrapper .list-card:hover { 
   transform: translateY(-5px); 
   box-shadow: 0 15px 30px rgba(0,0,0,0.08); 
}

.style-1-wrapper .card-primary { border-top-color: var(--primary-color); }
.style-1-wrapper .card-secondary { border-top-color: var(--secondary-color); }
.style-1-wrapper .card-tertiary { border-top-color: var(--tertiary-color); }
.style-1-wrapper .card-quaternary { border-top-color: var(--quaternary-color); }

.style-1-wrapper .card-icon {
   width: 60px; 
   height: 60px; 
   border-radius: 12px; 
   display: flex; 
   align-items: center; 
   justify-content: center; 
   font-size: 1.8rem; 
   margin-bottom: 20px;
}

.style-1-wrapper .card-primary .card-icon { 
   background: var(--primary-light); 
   color: var(--primary-color); 
}

.style-1-wrapper .card-secondary .card-icon { 
   background: var(--secondary-light); 
   color: var(--secondary-color); 
}

.style-1-wrapper .card-tertiary .card-icon { 
   background: var(--tertiary-light); 
   color: var(--tertiary-color); 
}

.style-1-wrapper .card-quaternary .card-icon { 
   background: var(--quaternary-light); 
   color: var(--quaternary-color); 
}

/* ========================================
   STYLE 2
   ======================================== */
.style-2-wrapper .list-card {
   background: white; 
   border-radius: 20px; 
   padding: 40px 30px;
   position: relative; 
   overflow: hidden; 
   height: 100%;
   border: 1px solid #f1f5f9; 
   transition: 0.3s;
}

.style-2-wrapper .list-card:hover { 
   border-color: #cbd5e1; 
   box-shadow: 0 10px 20px rgba(0,0,0,0.05); 
}

.style-2-wrapper .bg-icon {
   position: absolute; 
   top: -15px; 
   right: -15px;
   font-size: 8rem; 
   opacity: 0.05; 
   transform: rotate(15deg); 
   pointer-events: none;
}

.style-2-wrapper .card-primary .bg-icon { color: var(--primary-color); }
.style-2-wrapper .card-secondary .bg-icon { color: var(--secondary-color); }
.style-2-wrapper .card-tertiary .bg-icon { color: var(--tertiary-color); }
.style-2-wrapper .card-quaternary .bg-icon { color: var(--quaternary-color); }

.style-2-wrapper .card-title { 
   position: relative; 
   z-index: 2; 
   font-weight: 800; 
   font-size: 1.4rem; 
   margin-bottom: 20px; 
   padding-bottom: 15px; 
   border-bottom: 2px solid #f1f5f9; 
}

.style-2-wrapper .card-primary { border-top: 4px solid var(--primary-color); }
.style-2-wrapper .card-secondary { border-top: 4px solid var(--secondary-color); }
.style-2-wrapper .card-tertiary { border-top: 4px solid var(--tertiary-color); }
.style-2-wrapper .card-quaternary { border-top: 4px solid var(--quaternary-color); }

/* ========================================
   STYLE 3
   ======================================== */
.style-3-wrapper .list-card {
   background: white;
   border-radius: 16px;
   overflow: hidden;
   box-shadow: 0 4px 15px rgba(0,0,0,0.05);
   height: 100%;
   border: 1px solid #f1f5f9;
}

.style-3-wrapper .card-head { 
   padding: 30px; 
   color: white; 
}

.style-3-wrapper .card-primary .card-head { 
   background: linear-gradient(135deg, var(--primary-color), #3b82f6); 
}

.style-3-wrapper .card-secondary .card-head { 
   background: linear-gradient(135deg, var(--secondary-color), #22c55e); 
}

.style-3-wrapper .card-tertiary .card-head { 
   background: linear-gradient(135deg, var(--tertiary-color), #a78bfa); 
}

.style-3-wrapper .card-quaternary .card-head { 
   background: linear-gradient(135deg, var(--quaternary-color), #fb923c); 
}

.style-3-wrapper .card-body { 
   padding: 30px; 
}

.style-3-wrapper .card-head-icon { 
   font-size: 2rem; 
   margin-bottom: 10px; 
   opacity: 0.9; 
}

.style-3-wrapper .card-head-title { 
   font-weight: 700; 
   font-size: 1.4rem; 
   margin-bottom: 5px; 
   color: white; 
}

.style-3-wrapper .card-head-desc { 
   font-size: 0.9rem; 
   opacity: 0.9; 
   color: rgba(255,255,255,0.9); 
}

/* ========================================
   STYLE 4
   ======================================== */
.style-4-wrapper .list-card {
   background: white;
   border-radius: 8px;
   padding: 30px;
   height: 100%;
   border: 1px solid #e2e8f0;
   border-left: 6px solid #ccc;
   transition: 0.3s;
}

.style-4-wrapper .card-primary { 
   border-left-color: var(--primary-color); 
}

.style-4-wrapper .card-secondary { 
   border-left-color: var(--secondary-color); 
}

.style-4-wrapper .card-tertiary { 
   border-left-color: var(--tertiary-color); 
}

.style-4-wrapper .card-quaternary { 
   border-left-color: var(--quaternary-color); 
}

.style-4-wrapper .list-card:hover { 
   box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
}

.style-4-wrapper .card-header-flex { 
   display: flex; 
   align-items: center; 
   gap: 15px; 
   margin-bottom: 15px; 
}

.style-4-wrapper .card-icon { 
   font-size: 1.8rem; 
}

.style-4-wrapper .card-primary .card-icon { 
   color: var(--primary-color); 
}

.style-4-wrapper .card-secondary .card-icon { 
   color: var(--secondary-color); 
}

.style-4-wrapper .card-tertiary .card-icon { 
   color: var(--tertiary-color); 
}

.style-4-wrapper .card-quaternary .card-icon { 
   color: var(--quaternary-color); 
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 768px) {
   .list-card {
      padding: 25px 20px !important;
   }
   
   .card-title {
      font-size: 1.3rem !important;
   }
   
   .card-icon {
      font-size: 1.5rem !important;
   }
   
   .bg-icon {
      font-size: 5rem !important;
   }
}