/* Website Performance Analyzer Pro Styles */
.wap-container {
    max-width: 1200px;
    margin: 2rem auto;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #1a1a1a;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.wap-header {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: #ffffff;
    padding: 2rem;
    text-align: center;
}

.wap-header h2 {
    font-size: 1.75rem;
    margin: 0 0 0.5rem;
    font-weight: 700;
}

.wap-header p {
    font-size: 1rem;
    margin: 0;
    opacity: 0.9;
}

.wap-form-container {
    padding: 2rem;
}

.wap-form {
    max-width: 500px;
    margin: 0 auto;
}

.wap-form-group {
    margin-bottom: 1.25rem;
}

.wap-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #374151;
}

.wap-form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 1rem;
    transition: all 0.2s ease;
}

.wap-form-group input:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.wap-form-submit {
    text-align: center;
}

.wap-analyze-button {
    background: #3b82f6;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease;
    display: inline-flex;
    align-items: center;
}

.wap-analyze-button:hover {
    background: #1e40af;
}

.wap-analyze-button .wap-spinner {
    display: none;
    width: 1rem;
    height: 1rem;
    margin-left: 0.5rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: wap-spin 0.8s linear infinite;
}

@keyframes wap-spin {
    to { transform: rotate(360deg); }
}

.wap-analyze-button.loading .wap-button-text {
    margin-right: 0.5rem;
}

.wap-analyze-button.loading .wap-spinner {
    display: block;
}

.wap-results {
    padding: 1.5rem 2rem;
}

/* Report Styles */
.wap-report {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
}

.wap-report-header {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    color: #ffffff;
    padding: 2rem;
    text-align: center;
}

.wap-logo img {
    max-height: 60px;
}

.wap-report-header h1 {
    font-size: 1.5rem;
    margin: 1rem 0 0;
    font-weight: 700;
}

.wap-site-info h2 {
    font-size: 1.25rem;
    margin: 0.75rem 0 0;
    font-weight: 500;
}

.wap-report-date {
    font-size: 0.875rem;
    opacity: 0.8;
}

.wap-performance-overview {
    display: flex;
    flex-wrap: wrap;
    padding: 2rem;
    background: #f8fafc;
}

.wap-score-container {
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wap-overall-score {
    text-align: center;
}

.wap-score-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin: 0 auto 1rem;
}

.wap-score-value {
    font-size: 2.5rem;
    font-weight: 800;
}

.wap-score-max {
    font-size: 1rem;
    opacity: 0.6;
}

.wap-overall-score h3 {
    font-size: 1.125rem;
    margin: 0 0 0.5rem;
}

.wap-rating-text {
    font-weight: 600;
    font-size: 1rem;
}

.wap-overall-score.excellent .wap-score-circle {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%);
    color: #ffffff;
}

.wap-overall-score.good .wap-score-circle {
    background: linear-gradient(135deg, #84cc16 0%, #4d7c0f 100%);
    color: #ffffff;
}

.wap-overall-score.average .wap-score-circle {
    background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
    color: #ffffff;
}

.wap-overall-score.poor .wap-score-circle {
    background: linear-gradient(135deg, #ef4444 0%, #991b1b 100%);
    color: #ffffff;
}

.wap-metrics-container {
    flex: 0 0 60%;
    padding-left: 1.5rem;
}

.wap-metric-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.wap-metric {
    flex: 1;
    background: #ffffff;
    border-radius: 6px;
    padding: 0.75rem;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin: 0 0.5rem;
}

.wap-metric h4 {
    margin: 0 0 0.5rem;
    font-size: 0.75rem;
    color: #6b7280;
}

.wap-metric-value {
    font-size: 1.25rem;
    font-weight: 700;
}

.wap-metric.excellent {
    border-left: 3px solid #22c55e;
}

.wap-metric.good {
    border-left: 3px solid #84cc16;
}

.wap-metric.average {
    border-left: 3px solid #f59e0b;
}

.wap-metric.poor {
    border-left: 3px solid #ef4444;
}

.wap-metric.info {
    border-left: 3px solid #3b82f6;
}

.wap-charts-container {
    display: flex;
    flex-wrap: wrap;
    padding: 0 2rem 2rem;
}

.wap-chart-box {
    flex: 1 0 48%;
    margin: 0 1%;
    background: #ffffff;
    border-radius: 6px;
    padding: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.wap-chart-box h3 {
    margin: 0 0 0.75rem;
    text-align: center;
    font-size: 1rem;
    color: #374151;
}

.wap-canvas-container {
    height: 250px;
}

.wap-chart-legend {
    display: flex;
    justify-content: center;
    margin-top: 0.75rem;
}

.wap-legend-item {
    display: flex;
    align-items: center;
    margin: 0 0.5rem;
}

.wap-legend-color {
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.5rem;
    border-radius: 2px;
}

.wap-legend-text {
    font-size: 0.75rem;
    color: #6b7280;
}

.wap-recommendations-section {
    padding: 2rem;
    background: #f8fafc;
}

.wap-recommendations-section h2 {
    margin: 0 0 1rem;
    text-align: center;
    font-size: 1.25rem;
    color: #1a1a1a;
}

.wap-recommendations-section p {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 1.5rem;
    color: #4b5563;
}

.wap-recommendation-category {
    background: #ffffff;
    border-radius: 6px;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.wap-recommendation-category h3 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    color: #374151;
    display: flex;
    align-items: center;
}

.wap-rec-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
    background-size: contain;
    background-repeat: no-repeat;
}

.wap-performance-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-14h2v7h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E");
}

.wap-seo-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
}

.wap-design-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath d='M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");
}

.wap-process-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
}

.wap-market-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-14h2v7h-2zm0 8h2v2h-2z'/%3E%3C/svg%3E");
}

.wap-digital-assets-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath d='M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z'/%3E%3C/svg%3E");
}

.wap-general-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%233b82f6'%3E%3Cpath d='M22 5.18L10.59 16.6l-4.24-4.24 1.41-1.41 2.83 2.83 10-10 1.41 1.41zM12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8c1.57 0 3.04.46 4.28 1.25l1.45-1.45C16.1 2.67 14.13 2 12 2 6.48 2 2 6.48 2 12s4.48 10 10 10c1.73 0 3.36-.44 4.78-1.22l-1.5-1.5c-1 .46-2.11 .72-3.28 .72z'/%3E%3C/svg%3E");
}

.wap-recommendation-category ul {
    margin: 0;
    padding: 0 0 0 1.5rem;
}

.wap-recommendation-category li {
    margin-bottom: 0.5rem;
    color: #4b5563;
    font-size: 0.875rem;
}

.wap-cta-section {
    text-align: center;
    padding: 2rem;
    background: #ffffff;
}

.wap-cta-section h2 {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    color: #1a1a1a;
}

.wap-cta-section p {
    margin: 0 0 1.5rem;
    font-size: 0.875rem;
    color: #6b7280;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.wap-whatsapp-button {
    display: inline-flex;
    align-items: center;
    background: #22c55e;
    color: #ffffff;
    text-decoration: none;
    padding: 0.75rem 1.25rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background 0.2s ease;
}

.wap-whatsapp-button:hover {
    background: #15803d;
}

.wap-whatsapp-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16.75 13.96c.25.13.41.2.46.3.06.11.04.61-.21 1.18-.2.56-1.24 1.1-1.7 1.12-.46.02-.47.36-2.96-.73-2.49-1.09-3.99-3.75-4.11-3.92-.12-.17-.96-1.38-.92-2.61.05-1.22.69-1.8.95-2.04.24-.26.51-.29.68-.26h.47c.15 0 .36-.06.55.45l.69 1.87c.06.13.1.28.01.44l-.27.41-.39.42c-.12.12-.26.25-.12.5.12.26.62 1.09 1.32 1.78.91.88 1.71 1.17 1.95 1.3.24.14.39.12.54-.04l.81-.94c.19-.25.35-.19.58-.11l1.67.88z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2a10 10 0 00-8.11 15.83L2.5 21.5l3.8-1.27A10 10 0 0012 22c5.52 0 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

.wap-cta-subtext {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 1rem;
}

.wap-share-section {
    text-align: center;
    padding: 2rem;
    background: #f8fafc;
}

.wap-share-section h3 {
    margin: 0 0 1rem;
    font-size: 1rem;
    color: #1a1a1a;
}

.wap-share-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.wap-share-button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.wap-share-button:hover {
    opacity: 0.9;
}

.wap-share-button.whatsapp {
    background: #25D366;
}

.wap-share-button.facebook {
    background: #1877F2;
}

.wap-share-button.twitter {
    background: #1DA1F2;
}

.wap-share-icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
    background-size: contain;
    background-repeat: no-repeat;
}

.wap-share-icon.whatsapp {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M16.75 13.96c.25.13.41.2.46.3.06.11.04.61-.21 1.18-.2.56-1.24 1.1-1.7 1.12-.46.02-.47.36-2.96-.73-2.49-1.09-3.99-3.75-4.11-3.92-.12-.17-.96-1.38-.92-2.61.05-1.22.69-1.8.95-2.04.24-.26.51-.29.68-.26h.47c.15 0 .36-.06.55.45l.69 1.87c.06.13.1.28.01.44l-.27.41-.39.42c-.12.12-.26.25-.12.5.12.26.62 1.09 1.32 1.78.91.88 1.71 1.17 1.95 1.3.24.14.39.12.54-.04l.81-.94c.19-.25.35-.19.58-.11l1.67.88z'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 2a10 10 0 00-8.11 15.83L2.5 21.5l3.8-1.27A10 10 0 0012 22c5.52 0 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E");
}

.wap-share-icon.facebook {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8v-6.92h-2.4V12h2.4V9.6c0-2.38 1.42-3.7 3.58-3.7 1.04 0 2.13.18 2.13.18v2.34h-1.2c-1.18 0-1.55.74-1.55 1.5V12h2.64l-.42 2.88H13.6v6.92c4.56-.93 8-4.96 8-9.8z'/%3E%3C/svg%3E");
}

.wap-share-icon.twitter {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05A4.28 4.28 0 0016.1 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11 1-3.56-.18-6.73-1.89-8.84-4.48-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.21-1.95-.52v.05c0 2.08 1.48 3.82 3.44 4.21-.36.1-.74.15-1.13.15-.28 0-.55-.03-.81-.08.55 1.72 2.14 2.97 4.02 3.01-1.47 1.15-3.32 1.84-5.33 1.84-.35 0-.69-.02-1.03-.06 1.91 1.23 4.18 1.94 6.62 1.94 7.94 0 12.29-6.58 12.29-12.29 0-.19 0-.37-.01-.56.84-.61 1.57-1.37 2.15-2.24z'/%3E%3C/svg%3E");
}

.wap-report-footer {
    text-align: center;
    padding: 1rem;
    background: #ffffff;
    font-size: 0.75rem;
    color: #6b7280;
}

.wap-report-footer a {
    color: #3b82f6;
    text-decoration: none;
}

.wap-report-footer a:hover {
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .wap-container {
        margin: 1rem;
        border-radius: 8px;
    }

    .wap-header {
        padding: 1.5rem;
    }

    .wap-header h2 {
        font-size: 1.5rem;
    }

    .wap-form-container {
        padding: 1.5rem;
    }

    .wap-performance-overview {
        flex-direction: column;
        padding: 1.5rem;
    }

    .wap-score-container {
        flex: 0 0 100%;
        margin-bottom: 1.5rem;
    }

    .wap-metrics-container {
        flex: 0 0 100%;
        padding-left: 0;
    }

    .wap-metric-row {
        flex-direction: column;
        gap: 0.75rem;
    }

    .wap-metric {
        margin: 0;
    }

    .wap-charts-container {
        flex-direction: column;
        padding: 0 1.5rem 1.5rem;
    }

    .wap-chart-box {
        flex: 0 0 100%;
        margin: 0 0 1.5rem;
    }

    .wap-canvas-container {
        height: 200px;
    }

    .wap-recommendations-section {
        padding: 1.5rem;
    }

    .wap-cta-section {
        padding: 1.5rem;
    }

    .wap-share-section {
        padding: 1.5rem;
    }

    .wap-share-buttons {
        flex-direction: column;
        gap: 0.5rem;
    }

    .wap-share-button {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .wap-score-circle {
        width: 120px;
        height: 120px;
    }

    .wap-score-value {
        font-size: 2rem;
    }

    .wap-overall-score h3 {
        font-size: 1rem;
    }

    .wap-report-header h1 {
        font-size: 1.25rem;
    }

    .wap-site-info h2 {
        font-size: 1rem;
    }
}