/* ============================================
   Website Audit Tool - Frontend Styles
   ============================================ */

/* ----------------------------------------
   LAYOUT & CONTAINERS
   ---------------------------------------- */
.wat-audit-container {max-width: 900px;margin: 40px auto;padding: 20px;}
.wat-container-box {max-width: 850px;margin: 0 auto;padding: 40px;background: #fff;border-radius: 10px;box-shadow: 0 2px 20px rgba(0,0,0,0.08);text-align: center;}

/* ----------------------------------------
   FORM SECTION
   ---------------------------------------- */
.wat-form-sidebar {margin-top: 40px;}
.wat-form-wrap {padding: 40px;background: var(--color-gray);border-radius: 10px;}
.wat-form-group {margin-bottom: 20px;}
.wat-form-group label {display: block;margin-bottom: 8px;font-weight: 600;color: #333;}
.wat-form-group input {width: 100%;border-color: #e1e1e1 !important;transition: border-color 0.3s;}
.wat-form-group input:focus {border-color: #2563eb !important;}
.wat-form-main .button {padding: 16px 32px !important;cursor: pointer;width: 100%;transition: transform 0.2s;}
.wat-form-main .button:hover {transform: translateY(-2px);}
.wat-privacy-note {text-align: center;font-size: 14px;color: #999;margin-top: 20px;}

/* ----------------------------------------
   LOADING STATES
   ---------------------------------------- */
.wat-loading-section {background: #fff;border-radius: 10px;padding: 60px 40px;text-align: center;}
.wat-loading-spinner {margin: 0 auto 30px;}
.wat-loading-title {font-size: 24px;font-weight: 700;margin-bottom: 10px;color: #333;}
.wat-loading-text {font-size: 16px;color: #666;margin-bottom: 30px;}

/* Progress Steps */
.wat-progress-steps {display: flex;justify-content: space-around;margin-top: 40px;}
.wat-step {text-align: center;opacity: 0.3;transition: opacity 0.3s;}
.wat-step.active {opacity: 1;}
.wat-step.completed {opacity: 1;color: #7BAE37;}
.wat-step-icon {display: block;font-size: 24px;margin-bottom: 8px;}
.wat-step.completed .wat-step-icon {color: #7BAE37;}
.wat-step-label {font-size: 15px;color: #666;font-weight: 600;}

/* Rotate active step icon */
.wat-step.active .wat-step-icon {animation: wat-rotate 2s linear infinite;}

@keyframes wat-rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

/* ----------------------------------------
   SPINNERS & ANIMATIONS
   ---------------------------------------- */
.wat-spinner-sml {width: 15px;height: 15px;animation: rotate 2s linear infinite;}
.wat-spinner-large {width: 80px;height: 80px;animation: rotate 2s linear infinite;}

.wat-spinner-circle,
.wat-spinner-large .path {stroke: #fff;stroke-linecap: round;animation: dash 1.5s ease-in-out infinite;}

.wat-processing-spinner {width: 80px;height: 80px;margin: 0 auto 30px;border: 4px solid #f3f4f6;border-top: 4px solid #667eea;border-radius: 50%;animation: wat-spin 1s linear infinite;}
@keyframes rotate {
    100% { transform: rotate(360deg); }
}
@keyframes dash {
    0% {stroke-dasharray: 1, 150;stroke-dashoffset: 0;}
    50% {stroke-dasharray: 90, 150;stroke-dashoffset: -35;}
    100% {stroke-dasharray: 90, 150;stroke-dashoffset: -124;}
}
@keyframes wat-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ----------------------------------------
   RESULTS HEADER
   ---------------------------------------- */

.wat-screenshot {max-width:500px;margin:0 auto 40px;box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);border:1px solid #f0f0f0;border-radius:10px;overflow:hidden;}
.wat-screenshot img {display:block;}

.wat-results-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 30px;padding-bottom: 20px;border-bottom: 2px solid #f0f0f0;}
.wat-site-info {display: flex;align-items: center;gap: 12px;}
.wat-site-icon {width: 40px;height: 40px;background: #e0e7ff;border-radius: 8px;display: flex;align-items: center;justify-content: center;}
.wat-site-icon svg {width: 24px;height: 24px;stroke: #667eea;}
.wat-site-url {font-weight: 600;color: #333;}
.wat-overall-score {text-align: center;}
.wat-score-label {font-size: 14px;color: #666;margin-bottom: 5px;}
.wat-score-value {font-size: 48px;font-weight: 700;}

/* ----------------------------------------
   SCORE CARDS
   ---------------------------------------- */
.wat-score-cards {display: grid;grid-template-columns: repeat(5, 1fr);gap: 20px;margin-bottom: 40px;}
.wat-score-card {background: #f8f9fa;border-radius: 8px;padding: 20px;text-align: center;display: block;transition: background 0.3s;}
.wat-score-card:hover {background: var(--color-gray-dark);}
.wat-card-icon {font-size: 32px;margin-bottom: 10px;}
.wat-card-label {color: var(--color-main);margin-bottom: 8px;}
.wat-card-score {font-size: 24px;font-weight: 700;}

/* ----------------------------------------
   ISSUES TABLE
   ---------------------------------------- */
.wat-issues-container {margin-top: 40px;}
.wat-issue-category {margin-bottom: 30px;}
.wat-category-title {font-size: 20px;font-weight: 700;margin-bottom: 15px;color: #333;}
.wat-issues-table {width: 100%;box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);border-radius: 8px;margin-bottom: 60px;}
.wat-issues-table thead {background: #F9FAFB;border-bottom: 1px solid #e5e7eb;}
.wat-issues-table thead th,
.wat-issues-table tbody th,
.wat-issues-table tbody td {text-align: left;padding: 20px;font-size: 1.4rem;}
.wat-issues-table thead th:nth-of-type(1) { width: 25%; }
.wat-issues-table thead th:nth-of-type(2) { width: 15%; }
.wat-issues-table thead th:nth-of-type(3),
.wat-issues-table thead th:nth-of-type(4) { width: 30%; }

.wat-issue-item {background: #fff;border-bottom: 1px solid #e5e7eb;transition: background 0.4s;}
.wat-issue-item:hover {background: rgba(229,237,249,0.5);box-shadow: inset 0 1px 2px 0 rgba(0, 0, 0, 0.1);}

/* Issue Status Badges */
.wat-issue-status {display: inline-block;padding: 10px 20px;border-radius: 25px;text-align: center;font-weight: 600;font-size: 1.4rem;max-width: 120px;}
.wat-issue-status:before {display: inline-block;margin-right: 10px;}
.success .wat-issue-status {background: #e3fbe8;color: #336339;}
.success .wat-issue-status:before {content: "✓";color: #63c069;}
.failed .wat-issue-status {background: #f9e3e2;color: #8b2922;}
.failed .wat-issue-status:before {content: "✗";color: #da534b;}
.warning .wat-issue-status {background: #edd1a6;color: #c55200;}
.warning .wat-issue-status:before {content: "!";color: #e4752c;}

/* ----------------------------------------
   CTA SECTION
   ---------------------------------------- */
.wat-cta-section {border-radius: 5px;padding: 40px;}
.wat-cta-actions {display: flex;gap: 15px;margin-bottom: 30px;}
.wat-cta-actions .button {padding: 20px;}

/* ----------------------------------------
   FEATURES SECTION
   ---------------------------------------- */
.wat-features-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 30px;margin: 40px 0;}
.wat-feature-card {background: #fff;border-radius: 10px;padding: 30px;border: 1px solid #e5e7eb;}
.wat-feature-icon {font-size: 48px;margin-bottom: 15px;}
.wat-feature-card h3,
.wat-why-item h3 {margin-bottom: 5px;font-size: 2.0rem;line-height: 1;}

.wat-feature-card p,
.wat-why-item p {font-size: 1.5rem;line-height: 1.4;}

.wat-feature-card ul li {padding: 8px 0 8px 20px;font-size: 14px;position: relative;}
.wat-feature-card ul li:before {content: "✓";position: absolute;left: 0;color: #7BAE37;font-weight: 700;}

/* Why Section */
.wat-why-section {background: #fff;padding: 30px;border: 2px solid var(--color-blue-light);border-radius: 10px;}
.wat-why-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: 15px;}
.wat-why-item {display: flex;gap: 15px;align-items: flex-start;}
.wat-why-icon {font-size: 24px;color: #7BAE37;font-weight: 700;flex-shrink: 0;}

/* Benefits List */
.wat-benefits-list li {padding: 8px 0 8px 20px;font-size: 16px;position: relative;}
.wat-benefits-list li:before {content: "✓";position: absolute;left: 0;color: #7BAE37;font-weight: 700;}


/* ----------------------------------------
   ERROR STATES
   ---------------------------------------- */
.wat-not-found-icon {width: 120px;height: 120px;margin: 0 auto 30px;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius: 50%;display: flex;align-items: center;justify-content: center;}
.wat-not-found-icon svg {width: 60px;height: 60px;color: white;}

/* Rate Limit Message */
.wat-rate-limit-icon {font-size: 64px;margin-bottom: 20px;}
.wat-rate-limit-actions {margin-top: 30px;}

/* ----------------------------------------
   RESPONSIVE - MOBILE TABLES
   ---------------------------------------- */

/* Mobile: Transform tables into cards below 768px */
@media screen and (max-width: 768px) {

    .wat-issues-table {box-shadow:none;}

    /* Hide table headers on mobile */
    .wat-issues-table thead {display: none;}

    /* Make table elements behave like block elements */
    .wat-issues-table,
    .wat-issues-table tbody,
    .wat-issues-table tr,
    .wat-issues-table td {display: block;width: 100%;box-sizing:border-box;}

    /* Each row becomes a card */
    .wat-issues-table tr {margin-bottom: 20px;border: 1px solid #ddd;border-radius: 10px;background: white;padding: 15px;box-shadow: 0 2px 4px rgba(0,0,0,0.05);}
    .wat-issues-table tr:hover {background: white;}

    /* Reset padding for cells */
    .wat-issues-table td {padding:10px 15px !important;border: none;text-align: left;position: relative;font-size: 1.4rem;}

    /* Add labels before each cell using data-label attribute */
    .wat-issues-table td:before {content: attr(data-label);display:block;margin-bottom:5px;font-weight: 600;color: #333;text-align: left;}

    /* First cell (element name) - make it prominent */
    .wat-issues-table td:first-child {font-size: 1.6rem;font-weight: 700;color: #333;padding-left: 0;padding-bottom: 12px;margin-bottom: 8px;border-bottom: 2px solid #eee;}
    .wat-issues-table td:first-child:before {display: none;}

    /* Status badge adjustments for mobile */
    .wat-issue-status {display: inline-block;margin-top: 4px;}
}

/* ----------------------------------------
   RESPONSIVE - GENERAL
   ---------------------------------------- */
@media (min-width: 1000px) {
    .wat-form-grid {display: flex;justify-content: space-between;flex-direction: row-reverse;}
    .wat-form-main {width: 60%;}
    .wat-form-sidebar {margin-top: 0;width: 35%;}
}

@media (max-width: 750px) {
    .wat-features-grid,
    .wat-why-grid,
    .wat-score-cards,
    .wat-form-row {grid-template-columns: 1fr;}

    .wat-results-header {flex-direction: column;gap: 20px;}
    .wat-cta-actions {flex-direction: column;}
    .wat-progress-steps {flex-wrap: wrap;gap: 15px;}
    .wat-screenshot {margin-left: -20px;margin-right: -20px;border-radius: 0;max-width: none;}
}