/**
 * Page Speed - Estilos da ferramenta de verificação de velocidade
 * Baseado no padrão visual do site (seo_analyze) com elementos específicos
 */
@import url("seo_analyze.css");

/* Strategy select no formulário */
.strategy-select {
   padding: 12px 16px;
   border: 1px solid var(--border-color);
   border-radius: 8px;
   font-size: 1rem;
   font-weight: 500;
   background: var(--white);
   color: var(--text-primary);
   min-width: 130px;
   cursor: pointer;
}

.strategy-select:focus {
   outline: none;
   border-color: var(--primary-color);
}

.input-container .strategy-select {
   border-radius: 0;
   border-left: 1px solid var(--border-color);
}

/* Loading hint */
.loading-hint {
   font-size: 0.9rem;
   color: var(--text-secondary);
   margin-top: 10px;
}

/* Results header com strategy badge */
.strategy-badge {
   background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
   color: var(--white);
   padding: 8px 20px;
   border-radius: 25px;
   font-weight: 600;
   font-size: 0.95rem;
}

/* Score cards em grid (4 colunas) */
.score-cards {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
   gap: 24px;
   margin-bottom: 40px;
}

.score-card {
   text-align: center;
   padding: 24px 16px;
   background: var(--card-bg);
   border-radius: 16px;
   box-shadow: var(--shadow);
   border: 1px solid var(--border-color);
   transition: all 0.3s;
}

.score-card:hover {
   transform: translateY(-4px);
   box-shadow: var(--shadow-lg);
}

.score-card h3 {
   font-size: 1rem;
   font-weight: 600;
   color: var(--text-primary);
   margin-top: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
}

.score-card h3 i {
   font-size: 1rem;
   color: var(--primary-color);
}

/* Score gauge - círculo com pontuação */
.score-gauge {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   margin: 0 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   background: conic-gradient(var(--border-color) 0% 100%);
   position: relative;
}

.score-gauge::before {
   content: "";
   position: absolute;
   width: 80px;
   height: 80px;
   border-radius: 50%;
   background: var(--white);
}

.score-gauge .score-num {
   position: relative;
   z-index: 1;
   font-size: 1.8rem;
   font-weight: 700;
   color: var(--text-primary);
}

/* Cores por categoria */
.score-card.performance .score-gauge .score-num { color: var(--primary-color); }
.score-card.accessibility .score-gauge .score-num { color: var(--success); }
.score-card.best-practices .score-gauge .score-num { color: var(--warning); }
.score-card.seo .score-gauge .score-num { color: var(--teal); }

/* Core Web Vitals card */
.result-card.core-vitals::before {
   background: linear-gradient(to bottom, var(--primary-color), var(--accent-color));
}

.result-card.loading-exp::before {
   background: linear-gradient(to bottom, var(--teal), var(--info));
}

/* Mini score nas métricas */
.mini-score {
   font-size: 0.8rem;
   font-weight: 600;
   margin-top: 4px;
   display: block;
}

/* Audit list - oportunidades e diagnósticos */
.audit-list {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.audit-item {
   background: var(--light-bg);
   border-radius: 12px;
   padding: 24px;
   border-left: 4px solid var(--warning);
   transition: all 0.3s;
}

.audit-item:hover {
   background: #f1f5f9;
   box-shadow: var(--shadow);
}

.audit-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 16px;
   flex-wrap: wrap;
}

.audit-title {
   font-weight: 600;
   font-size: 1.1rem;
   color: var(--text-primary);
}

.audit-value {
   font-weight: 600;
   color: var(--primary-color);
   font-size: 1rem;
}

.audit-desc,
.audit-explanation {
   margin-top: 12px;
   font-size: 0.95rem;
   color: var(--text-secondary);
   line-height: 1.6;
}

.audit-explanation {
   padding: 12px;
   background: rgba(37, 99, 235, 0.05);
   border-radius: 8px;
   border-left: 3px solid var(--primary-color);
}

.audit-list.passed .audit-item {
   border-left-color: var(--success);
}

.no-items {
   text-align: center;
   padding: 40px;
   color: var(--text-secondary);
   font-size: 1.1rem;
}

/* Responsivo - formulário com select */
@media (max-width: 768px) {
   .input-container {
      flex-direction: column;
   }

   .input-container .strategy-select {
      border-left: none;
      border-top: 1px solid var(--border-color);
      border-radius: 0;
   }

   .input-container button.seo {
      border-radius: 0 0 12px 12px;
   }

   .score-cards {
      grid-template-columns: repeat(2, 1fr);
   }

   .score-gauge {
      width: 80px;
      height: 80px;
   }

   .score-gauge::before {
      width: 64px;
      height: 64px;
   }

   .score-gauge .score-num {
      font-size: 1.4rem;
   }
}

@media (min-width: 769px) and (max-width: 1024px) {
   .score-cards {
      grid-template-columns: repeat(4, 1fr);
   }
}