/*
 * Speed in China — Admin Styles
 * Figma-faithful design: clean white cards, centered content, 
 * blue accents, circular score gauges, feature grid
 */

/* ========================================
   Layout & Containers
   ======================================== */
.speeinch-wrap {
    margin: 20px 20px 20px 0;
}

.speeinch_container {
    margin: 20px 0;
    background: #FFFFFF;
    border: 1px solid #e2e4e7;
    border-radius: 8px;
    padding: 30px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.speeinch_container img.speeinch-animation {
    padding-top: 30px;
    padding-bottom: 10px;
    max-width: 180px;
    height: auto;
}

/* Lottie player container */
#speeinch-lottie-container {
    padding: 10px 0;
}

/* ========================================
   Notification Bar (Figma State 1 top)
   ======================================== */
#china-speed-notification-container {
    border-left-color: #2271b1;
}

/* ========================================
   Speed Test Button
   ======================================== */
.speeinch-test-area .submit {
    text-align: center;
    padding: 20px 0;
}

#speeinch-run-test-btn {
    font-size: 16px;
    padding: 12px 40px;
    border-radius: 6px;
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#speeinch-run-test-btn:hover {
    background: #135e96;
    border-color: #135e96;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 113, 177, 0.3);
}

#speeinch-run-test-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

#speeinch-run-test-btn .spinner {
    margin: 0;
}

.speeinch-test-status {
    font-size: 15px;
    color: #50575e;
    margin-top: 8px;
    text-align: center;
}

/* ========================================
   Results Summary Cards (Figma State 3)
   ======================================== */
#speeinch-results-container {
    text-align: center;
}

#speeinch-results-container h2.title {
    font-size: 20px;
    margin: 0 0 5px;
    color: #1d2327;
}

.speeinch_test_results {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 15px 0 25px;
}

.speeinch_test_results li {
    padding: 12px 20px;
    border: 1px solid #e2e4e7;
    border-radius: 6px;
    font-weight: 700;
    display: flex;
    align-items: center;
    background: #f9fafb;
    min-width: 160px;
}

.speeinch_test_results li span.dashicons {
    margin-right: 10px;
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.speeinch_test_results li span.dashicons.dashicons-yes-alt {
    color: #00a32a;
}

.speeinch_test_results li span.dashicons.dashicons-warning {
    color: #d63638;
}

.speeinch_test_results li span.dashicons.dashicons-clock {
    color: #2271b1;
}

.speeinch_test_results li p {
    font-weight: 400;
    margin: 0;
    font-size: 12px;
    color: #757575;
}

/* Results Table */
#speeinch_form_result {
    width: 100%;
    margin-top: 10px;
}

#speeinch_form_result th {
    background: #f0f0f1;
    font-weight: 600;
}

#speeinch_form_result td,
#speeinch_form_result th {
    padding: 10px 15px;
    text-align: left;
}

#speeinch_form_result .dashicons-yes-alt {
    color: #00a32a;
}

#speeinch_form_result .dashicons-dismiss {
    color: #d63638;
}

/* See Recommended Optimizations CTA */
.speeinch-cta-optimizations {
    margin-top: 20px;
    text-align: center;
}

.speeinch-cta-optimizations .button {
    font-size: 14px;
    padding: 10px 30px;
    background: linear-gradient(135deg, #2271b1, #135e96);
    border: none;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.speeinch-cta-optimizations .button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(34, 113, 177, 0.3);
    color: #fff;
}

/* ========================================
   Score Gauges (circular indicators)
   ======================================== */
.speeinch-score-gauge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin: 0 3px;
}

.speeinch-score-gauge.score-good {
    background: #00a32a;
}

.speeinch-score-gauge.score-ok {
    background: #dba617;
}

.speeinch-score-gauge.score-bad {
    background: #d63638;
}

/* ========================================
   Features Section (Figma bottom)
   ======================================== */
.features-container {
    border-top: 1px solid #e2e4e7;
    margin: 20px 0;
    padding: 25px 0 10px;
    text-align: center;
}

.features-container h3 {
    font-size: 16px;
    color: #1d2327;
    margin-bottom: 5px;
}

.features-container p {
    color: #757575;
    margin-bottom: 20px;
}

.bic-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

.bic-features li {
    margin: 0;
}

.bic-alias {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 140px;
    min-height: 70px;
    padding: 12px 8px;
    border: 1px solid #e2e4e7;
    border-radius: 8px;
    background-color: #f9fafb;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    font-size: 12px;
    line-height: 1.3;
}

.bic-alias:hover {
    border-color: #2271b1;
    background-color: #f0f6fc;
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(34, 113, 177, 0.15);
}

.bic-features input[type=checkbox] {
    display: none;
}

.bic-features input[type=checkbox]:checked+p {
    position: relative;
}

.bic-features input[type=checkbox]:checked+p::after {
    top: -5px;
    right: -5px;
    position: absolute;
    font-family: "Dashicons";
    content: "\f12a";
    font-size: 18px;
    color: #2271b1;
}

.bic-alias p {
    margin: 4px 0 0;
    color: #1d2327;
    font-weight: 500;
}

/* Feature interest selected state */
.bic-alias.selected {
    border-color: #2271b1;
    background-color: #f0f6fc;
}

#features-fields {
    width: 60%;
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
}

.field-group {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}

.field-group>div {
    flex: 1;
}

.field-group label {
    font-weight: 600;
    font-size: 13px;
    display: block;
    margin-bottom: 4px;
}

.field-group input[type="text"],
.field-group input[type="email"] {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
}

#get_notified {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
    border-radius: 6px;
    padding: 8px 24px;
    font-size: 14px;
    cursor: pointer;
}

#get_notified:hover {
    background: #135e96;
}

/* ========================================
   Response Notices
   ======================================== */
#speeinch_form_response {
    margin: 10px 0;
    border-radius: 4px;
}

.notice.notice-success {
    border-left-color: #00a32a !important;
}

.notice.notice-error {
    border-left-color: #d63638 !important;
}

/* ========================================
   Freemius Connect Overrides

   NOTE: We intentionally DO NOT hide #skip_activation here.
   WordPress.org plugin reviewer (2026-04-25) required the Skip /
   "Maybe Later" button to remain visible so users can opt out of
   the Freemius connection. Hiding it violates the plugin guidelines.

   The button.button-primary width override only applies when the
   Skip link is NOT rendered (Freemius adds `.fs-anonymous-disabled`
   on the wrapper in that case), so the primary CTA still stretches
   full-width when appropriate without us hiding Skip ourselves.
   ======================================== */
#fs_connect.fs-anonymous-disabled .fs-actions .button.button-primary {
    width: 100% !important;
}

/* ========================================
   Test-progress spinner animation
   Loaded via wp_enqueue_style on the Speed in China admin page so
   we don't ship an inline <style> block (WP.org reviewer guideline:
   enqueue all CSS).
   ======================================== */
@keyframes speeinch-spin {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}

.speeinch-test-progress {
    margin: 12px 0;
}

.speeinch-spinner {
    animation: speeinch-spin 1.2s linear infinite;
    vertical-align: middle;
}

/* Inline-style replacement for the anonymous-mode notice "Connect" button. */
.speeinch-notice-cta {
    margin-left: 8px;
}

/* ========================================
   Admin Bar Status
   ======================================== */
.speeinch-gray {
    background: #434343 !important;
}

.speeinch-green {
    background: #6aa84f !important;
}

.speeinch-red {
    background: #cc0000 !important;
}

.speeinch-yellow {
    color: #ffc800 !important;
}

/* ========================================
   Nav Tab active state
   ======================================== */
.nav-tab-wrapper {
    margin-bottom: 20px;
}

#features_loading {
    color: #757575;
    font-style: italic;
    padding: 10px;
}

/* ========================================
   Responsive
   ======================================== */
@media (max-width: 782px) {
    .speeinch-wrap {
        margin: 10px;
    }

    .speeinch_container {
        padding: 20px;
    }

    .speeinch_test_results {
        flex-direction: column;
        align-items: stretch;
    }

    .bic-features {
        gap: 8px;
    }

    .bic-alias {
        width: 110px;
        min-height: 60px;
    }

    .field-group {
        flex-direction: column;
    }

    #features-fields {
        width: 90%;
    }
}

/* ========================================
   Speed Test — Compact Form (when history exists)
   ======================================== */
.speeinch-test-area.speeinch-test-compact {
    padding: 15px 40px;
}

.speeinch-test-area.speeinch-test-compact .submit {
    margin: 5px 0 !important;
}

/* ========================================
   Speed Test History
   ======================================== */
.speeinch-history-container {
    align-items: stretch;
}

.speeinch-history-container h2 {
    margin: 0 0 15px;
    font-size: 16px;
    align-self: flex-start;
}

.speeinch-history-entry {
    border: 1px solid #e2e4e7;
    border-radius: 6px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s;
}

.speeinch-history-entry:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.speeinch-history-latest {
    border-color: #2271b1;
    border-width: 2px;
}

.speeinch-history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    background: #f8f9fa;
    user-select: none;
    transition: background 0.15s;
}

.speeinch-history-header:hover {
    background: #eef3f8;
}

.speeinch-history-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.speeinch-history-date {
    color: #666;
    font-size: 13px;
}

.speeinch-history-summary {
    display: flex;
    align-items: center;
    gap: 12px;
}

.speeinch-avg-time {
    font-size: 14px;
    color: #333;
}

/* Expand/collapse */
.speeinch-history-details {
    display: none;
    padding: 0 16px 16px;
}

.speeinch-history-expanded .speeinch-history-details {
    display: block;
}

.speeinch-history-expanded .speeinch-expand-icon {
    transform: rotate(180deg);
}

.speeinch-expand-icon {
    font-size: 12px;
    color: #999;
    transition: transform 0.2s;
}

/* Auto-expand latest entry */
.speeinch-history-latest .speeinch-history-details {
    display: block;
}

.speeinch-history-latest .speeinch-expand-icon {
    transform: rotate(180deg);
}

/* Badges */
.speeinch-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.speeinch-badge-latest {
    background: #2271b1;
    color: #fff;
}

.speeinch-status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.speeinch-status-good {
    background: #e6f4ea;
    color: #1e7e34;
}

.speeinch-status-warning {
    background: #fff3cd;
    color: #856404;
}

.speeinch-status-critical {
    background: #f8d7da;
    color: #721c24;
}

/* Timing cell colors */
.speeinch-timing-good {
    color: #1e7e34;
}

.speeinch-timing-warning {
    color: #856404;
}

.speeinch-timing-critical {
    color: #dc3545;
}

/* History table */
.speeinch-history-table {
    margin-top: 12px;
}

.speeinch-history-table th {
    font-size: 12px;
    padding: 6px 10px;
}

.speeinch-history-table td {
    font-size: 13px;
    padding: 6px 10px;
}

/* Suggestions */
.speeinch-suggestions {
    margin-top: 12px;
    padding: 12px 16px;
    background: #fffbe6;
    border: 1px solid #ffe58f;
    border-radius: 4px;
}

.speeinch-suggestions h4 {
    margin: 0 0 8px;
    font-size: 14px;
}

.speeinch-suggestions ul {
    margin: 0;
    padding-left: 20px;
}

.speeinch-suggestions li {
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.5;
}

/* ========================================
   Tab Badges (plan upgrade indicators)
   ======================================== */
.speeinch-tab-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: middle;
    margin-left: 4px;
    line-height: 1.6;
}

.speeinch-tab-badge-pro {
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
}

/* ========================================
   Upgrade / Upsell Cards
   ======================================== */
.speeinch-upsell-card {
    border: 2px dashed #c3c4c7;
    background: #fafbfc;
}

.speeinch-lock-icon {
    font-size: 48px;
    margin-bottom: 10px;
}

.speeinch-upgrade-cta {
    margin-top: 20px;
    padding: 20px 20px 25px;
    background: #fff;
    border: 1px solid #e2e4e7;
    border-radius: 6px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.speeinch-upgrade-cta .button {
    margin-top: 15px;
}

.speeinch-feature-list {
    list-style: none;
    padding: 0;
    margin: 12px 0;
    text-align: left;
    display: inline-block;
}

.speeinch-feature-list li {
    padding: 4px 0;
    font-size: 14px;
}

.speeinch-blurred-preview {
    filter: blur(2px);
    margin: 15px 0;
}

.speeinch-grayed-preview {
    margin: 15px 0;
}

/* ========================================
   Countdown Timer
   ======================================== */
.speeinch-countdown-boxes {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 10px 0;
}

.speeinch-countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}

.speeinch-cd-number {
    font-size: 28px;
    font-weight: 700;
    color: #2271b1;
    background: #f0f6fc;
    border-radius: 6px;
    padding: 6px 12px;
    min-width: 50px;
    text-align: center;
    display: block;
}

.speeinch-cd-label {
    font-size: 11px;
    text-transform: uppercase;
    color: #666;
    margin-top: 4px;
    letter-spacing: 0.5px;
}

/* ========================================
   Persisted Result + Stat Cards
   ======================================== */
.speeinch-persisted-result {
    margin-top: 15px;
}

.speeinch-stat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f9f9f9;
    border: 1px solid #e2e4e7;
    border-radius: 8px;
    padding: 12px 20px;
    min-width: 80px;
}

.speeinch-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #1d2327;
}

.speeinch-stat-value.speeinch-status-good {
    color: #00a32a;
}

.speeinch-stat-value.speeinch-status-warning {
    color: #dba617;
}

.speeinch-stat-value.speeinch-status-bad {
    color: #d63638;
}

.speeinch-stat-label {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}

/* ========================================
   Upgrade Notice (cooldown area)
   ======================================== */
.speeinch-upgrade-notice {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 6px;
    padding: 15px 20px;
    margin-top: 10px;
}

.speeinch-upgrade-hint {
    font-weight: 600;
    color: #333;
    margin: 8px 0 4px;
}

/* ========================================
   Plan Comparison Grid (Speed Test tab)
   ======================================== */
.speeinch-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 15px;
}

.speeinch-plan-box {
    border: 1px solid #e2e4e7;
    border-radius: 6px;
    padding: 16px;
    background: #fff;
    text-align: left;
}

.speeinch-plan-featured {
    border-color: #2271b1;
    border-width: 2px;
    position: relative;
}

.speeinch-plan-name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 4px;
    color: #1d2327;
}

.speeinch-plan-freq {
    font-size: 13px;
    color: #2271b1;
    font-weight: 600;
    margin-bottom: 10px;
}

.speeinch-plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.speeinch-plan-features li {
    padding: 3px 0;
    font-size: 13px;
    color: #444;
}

.speeinch-popular-badge {
    display: inline-block;
    padding: 1px 8px;
    background: #2271b1;
    color: #fff;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    vertical-align: middle;
}

/* ========================================
   Plan Chips (cooldown upgrade area)
   ======================================== */
.speeinch-plan-comparison-mini {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 10px 0;
}

.speeinch-plan-chip {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid #e2e4e7;
    background: #fff;
}

.speeinch-plan-personal {
    border-color: #2271b1;
    color: #2271b1;
}

.speeinch-plan-pro {
    border-color: #764ba2;
    color: #764ba2;
    background: #f8f4ff;
}

.speeinch-plan-agency {
    border-color: #d97706;
    color: #d97706;
}

/* ========================================
   Schedule Form
   ======================================== */
.speeinch-schedule-container {
    max-width: 600px;
}

.speeinch-schedule-form {
    margin-top: 15px;
}

.speeinch-schedule-field {
    margin-bottom: 18px;
}

.speeinch-schedule-field label strong {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
}

.speeinch-schedule-field select {
    width: 100%;
    max-width: 300px;
    padding: 6px 8px;
}

.speeinch-schedule-upgrade-hint {
    margin-top: 6px;
    font-size: 13px;
}

.speeinch-schedule-upgrade-hint a {
    color: #764ba2;
    text-decoration: none;
    font-weight: 600;
}

.speeinch-schedule-upgrade-hint a:hover {
    text-decoration: underline;
}

#speeinch-schedule-spinner {
    float: none;
    vertical-align: middle;
    margin-left: 8px;
}

/* ========================================
   Inline-style consolidation (moved out of
   admin/templates/form.php and optimizations.php
   per wp.org reviewer preference for external CSS)
   ======================================== */
.speeinch-prose-narrow { max-width: 640px; }
.speeinch-prose-medium { max-width: 600px; }
.speeinch-hidden-init { display: none; }
.speeinch-text-center { text-align: center; }
.speeinch-pad-notice { margin: 12px 0; }
.speeinch-lottie-canvas { width: 200px; height: 200px; margin: 0 auto; }
.speeinch-cooldown-wrap { text-align: center; margin: 0 auto; max-width: 600px; }
.speeinch-cooldown-heading { font-size: 15px; margin-bottom: 8px; }
.speeinch-result-meta { font-weight: normal; color: #666; margin-left: 10px; }
.speeinch-result-meta--small { font-size: 13px; margin-left: 8px; }
.speeinch-persisted-summary--flex { display: flex; gap: 20px; margin-bottom: 15px; flex-wrap: wrap; }
.speeinch-cta-row { text-align: center; margin-top: 15px; }
.speeinch-card--spaced { margin-top: 20px; }
.speeinch-card__lede { margin-bottom: 15px; color: #555; }
.speeinch-issue-rec--ok { color: #16a34a; }
.speeinch-button--with-spacing { margin-bottom: 15px; }
.speeinch-button--top-spaced { margin-top: 10px; }
.speeinch-spinner--inline { float: none; }
.speeinch-status-line { margin-top: 10px; }
.speeinch-analysis-ts-row { margin-bottom: 8px; }

#speeinch-schedule-status {
    margin-left: 8px;
    font-size: 13px;
}