/**
 * Bizopp GEO & Structured Data Analyzer - base styles.
 *
 * Provides the ONE rule the widget cannot function without
 * (.bizopp-analyzer-hidden { display: none }), plus a clean, minimal
 * layout so the widget is usable immediately after activation. Every
 * value is exposed as a CSS custom property on .bizopp-analyzer-wrapper
 * so an Elementor Custom CSS block (or a child theme stylesheet) can
 * override colors/spacing without touching this file:
 *
 *   .bizopp-analyzer-wrapper {
 *       --bizopp-accent: #d9534f;
 *       --bizopp-radius: 4px;
 *   }
 */

.bizopp-analyzer-wrapper {
    --bizopp-accent: #2563eb;
    --bizopp-accent-hover: #1d4ed8;
    --bizopp-text: #1f2937;
    --bizopp-muted: #6b7280;
    --bizopp-border: #d1d5db;
    --bizopp-bg: #ffffff;
    --bizopp-surface: #f9fafb;
    --bizopp-error: #dc2626;
    --bizopp-success: #16a34a;
    --bizopp-radius: 8px;
    --bizopp-spacing: 16px;
    --bizopp-max-width: 480px;

    direction: rtl;
    max-width: var(--bizopp-max-width);
    margin: 0 auto;
    font-family: inherit;
    color: var(--bizopp-text);
    box-sizing: border-box;
}

.bizopp-analyzer-wrapper *,
.bizopp-analyzer-wrapper *::before,
.bizopp-analyzer-wrapper *::after {
    box-sizing: inherit;
}

/* ---- The one non-negotiable rule: state visibility ---- */
.bizopp-analyzer-hidden {
    display: none !important;
}

/* ---- Shared form layout (url form + lead form) ---- */
.bizopp-analyzer-form {
    display: flex;
    flex-direction: column;
    gap: var(--bizopp-spacing);
    padding: var(--bizopp-spacing);
    background: var(--bizopp-surface);
    border: 1px solid var(--bizopp-border);
    border-radius: var(--bizopp-radius);
}

.bizopp-analyzer-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.bizopp-analyzer-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--bizopp-text);
}

.bizopp-analyzer-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--bizopp-text);
    background: var(--bizopp-bg);
    border: 1px solid var(--bizopp-border);
    border-radius: calc(var(--bizopp-radius) / 2);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bizopp-analyzer-input:focus {
    outline: none;
    border-color: var(--bizopp-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bizopp-accent) 20%, transparent);
}

.bizopp-analyzer-input[aria-invalid="true"] {
    border-color: var(--bizopp-error);
}

.bizopp-analyzer-error-text {
    font-size: 13px;
    color: var(--bizopp-error);
}

.bizopp-analyzer-lead-intro {
    margin: 0;
    font-size: 14px;
    color: var(--bizopp-muted);
}

/* ---- Buttons ---- */
.bizopp-analyzer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 20px;
    font-size: 15px;
    font-weight: 600;
    border-radius: calc(var(--bizopp-radius) / 2);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.bizopp-analyzer-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.bizopp-analyzer-btn-primary {
    background: var(--bizopp-accent);
    color: #ffffff;
}

.bizopp-analyzer-btn-primary:hover:not(:disabled) {
    background: var(--bizopp-accent-hover);
}

.bizopp-analyzer-btn-secondary {
    background: transparent;
    color: var(--bizopp-text);
    border-color: var(--bizopp-border);
}

.bizopp-analyzer-btn-secondary:hover:not(:disabled) {
    background: var(--bizopp-surface);
}

/* Lead form shows Submit + Back side by side */
.bizopp-analyzer-lead-form {
    position: relative;
}

.bizopp-analyzer-lead-submit {
    order: 1;
}

.bizopp-analyzer-lead-back {
    order: 2;
}

/* ---- Loading state ---- */
.bizopp-analyzer-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bizopp-spacing);
    padding: calc(var(--bizopp-spacing) * 2) var(--bizopp-spacing);
    text-align: center;
}

.bizopp-analyzer-loading.bizopp-analyzer-hidden {
    display: none !important;
}

.bizopp-analyzer-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--bizopp-border);
    border-top-color: var(--bizopp-accent);
    border-radius: 50%;
    animation: bizopp-spin 0.8s linear infinite;
}

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

.bizopp-analyzer-loading-text {
    margin: 0;
    font-size: 14px;
    color: var(--bizopp-muted);
}

/* ---- Results state ---- */
.bizopp-analyzer-results {
    display: flex;
    flex-direction: column;
    gap: calc(var(--bizopp-spacing) * 1.25);
}

.bizopp-analyzer-results.bizopp-analyzer-hidden {
    display: none !important;
}

.bizopp-analyzer-score-block {
    text-align: center;
    padding: var(--bizopp-spacing);
    background: var(--bizopp-surface);
    border-radius: var(--bizopp-radius);
}

.bizopp-analyzer-score-value {
    font-size: 40px;
    font-weight: 800;
    color: var(--bizopp-accent);
}

.bizopp-analyzer-score-max {
    font-size: 18px;
    color: var(--bizopp-muted);
}

.bizopp-analyzer-score-label {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--bizopp-muted);
}

.bizopp-analyzer-breakdown-list,
.bizopp-analyzer-schema-list,
.bizopp-analyzer-geo-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bizopp-analyzer-breakdown-item {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--bizopp-surface);
    border-radius: calc(var(--bizopp-radius) / 2);
    font-size: 14px;
}

.bizopp-analyzer-breakdown-label {
    color: var(--bizopp-text);
}

.bizopp-analyzer-breakdown-value {
    font-weight: 700;
    color: var(--bizopp-accent);
}

.bizopp-analyzer-section-title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
}

.bizopp-analyzer-schema-item {
    padding: 8px 12px;
    background: var(--bizopp-surface);
    border-radius: calc(var(--bizopp-radius) / 2);
    font-size: 14px;
}

.bizopp-analyzer-empty-text {
    margin: 0;
    font-size: 14px;
    color: var(--bizopp-muted);
}

.bizopp-analyzer-geo-item {
    padding: 8px 12px 8px 36px;
    border-radius: calc(var(--bizopp-radius) / 2);
    font-size: 14px;
    background: var(--bizopp-surface);
    position: relative;
}

.bizopp-analyzer-geo-item::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.bizopp-analyzer-geo-item[data-bizopp-signal-status="pass"] {
    color: var(--bizopp-success);
}

.bizopp-analyzer-geo-item[data-bizopp-signal-status="pass"]::before {
    background: var(--bizopp-success);
}

.bizopp-analyzer-geo-item[data-bizopp-signal-status="fail"] {
    color: var(--bizopp-muted);
}

.bizopp-analyzer-geo-item[data-bizopp-signal-status="fail"]::before {
    background: var(--bizopp-border);
}

.bizopp-analyzer-restart {
    align-self: center;
}

/* ---- Error state ---- */
.bizopp-analyzer-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bizopp-spacing);
    padding: var(--bizopp-spacing);
    text-align: center;
    background: color-mix(in srgb, var(--bizopp-error) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--bizopp-error) 30%, transparent);
    border-radius: var(--bizopp-radius);
}

.bizopp-analyzer-error.bizopp-analyzer-hidden {
    display: none !important;
}

.bizopp-analyzer-error-message {
    margin: 0;
    font-size: 14px;
    color: var(--bizopp-error);
}

/* ---- Small screens ---- */
@media (max-width: 480px) {
    .bizopp-analyzer-wrapper {
        --bizopp-spacing: 12px;
    }

    .bizopp-analyzer-score-value {
        font-size: 32px;
    }
}