/* ============================================================
   F2 — Backlink ROI Calculator
   Tool-specific styles. Page shell, hero, buttons, FAQ, CTA and
   design tokens come from redirect-checker.css (loaded first)
   and public_base.html.
   Angular clip-path corners only — never border-radius.
   ============================================================ */

/* ---- Single-column form wrapper ---------------------------------------- */

.roi-form-section {
    margin: 0 0 0;
}

/* Centers the form + results to 620px, matching the content column */
.roi-form-wrapper {
    max-width: 620px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ---- Field rows ---------------------------------------------------------- */

.roi-fields {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 2-column row: side-by-side at desktop, stacked below 720px */
.roi-field-row--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 18px;
}

@media (max-width: 720px) {
    .roi-field-row--2col {
        grid-template-columns: 1fr;
    }
}

/* Full-width row: single field spanning both columns */
.roi-field-row--full {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: 18px;
}

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

/* ---- Labels ------------------------------------------------------------- */

.roi-label {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.01em;
}

/* ---- Inputs ------------------------------------------------------------- */

.roi-input {
    width: 100%;
    padding: 13px 16px;
    font-family: var(--font-mono);
    font-size: 15px;
    background: rgba(13, 13, 20, 0.85);
    border: 1px solid rgba(0, 245, 212, 0.28);
    clip-path: var(--clip-badge);
    color: var(--text-primary);
    transition: border-color .2s, box-shadow .2s;
    box-sizing: border-box;
}

.roi-input:focus {
    outline: none;
    border-color: var(--neon-cyan);
    box-shadow: 0 0 0 3px rgba(0, 245, 212, 0.13);
}

.roi-input.is-invalid {
    border-color: rgba(255, 87, 87, 0.7);
    box-shadow: 0 0 0 3px rgba(255, 87, 87, 0.1);
}

@media (max-width: 760px) {
    .roi-input { font-size: 16px; }
}

/* ---- Select ------------------------------------------------------------- */

.roi-select {
    width: 100%;
    padding: 13px 16px;
    font-family: var(--font-mono);
    font-size: 15px;
    background: rgba(13, 13, 20, 0.85);
    border: 1px solid rgba(0, 245, 212, 0.28);
    clip-path: var(--clip-badge);
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color .2s;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2300f5d4' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    box-sizing: border-box;
}

.roi-select:focus {
    outline: none;
    border-color: var(--neon-cyan);
}

/* ---- Helper text -------------------------------------------------------- */

.roi-field-help {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 2px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Allow wrapping only on very narrow mobile */
@media (max-width: 400px) {
    .roi-field-help {
        white-space: normal;
    }
}

/* ---- Field errors ------------------------------------------------------- */

.roi-field-error {
    font-size: 12px;
    color: #ff9b9b;
    line-height: 1.4;
    margin: 3px 0 0;
    display: none;
}

.roi-field-error.is-visible {
    display: block;
}

/* ---- Section labels ----------------------------------------------------- */

.roi-section-label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 8px 0 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.roi-section-label--results {
    margin-top: 32px;
}

/* ---- Actions row -------------------------------------------------------- */

.roi-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 20px;
}

.roi-reset-btn {
    font-size: 13px;
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    font-family: var(--font-body);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.roi-reset-btn:hover {
    color: var(--text-secondary);
}

/* ---- Results card ------------------------------------------------------- */
/* Full-width card matching the 620px form column.
   No nested clip-path inside — all children use flat backgrounds only.    */

.roi-results-section {
    /* inherits width from .roi-form-wrapper (620px max) */
}

.roi-results-card {
    padding: 28px 24px 20px;
    background: rgba(20, 22, 30, 0.7);
    border: 1px solid rgba(0, 245, 212, 0.2);
    clip-path: var(--clip-card);
}

/* ---- Stat tiles --------------------------------------------------------- */
/* 4 tiles in a row at desktop; 2×2 grid at mobile (<480px) */

.roi-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin-bottom: 20px;
}

@media (max-width: 480px) {
    .roi-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.roi-stat-tile {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 12px;
    background: rgba(13, 13, 20, 0.6);
    /* flat background — no clip-path on tiles inside clip-path card */
}

.roi-stat-label {
    font-size: 11px;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.3;
}

/* ---- Metric values ----------------------------------------------------- */

.roi-metric-value {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--neon-cyan);
    line-height: 1.15;
}

.roi-metric-value.is-negative {
    color: #ff8888;
}

.roi-metric-value.is-neutral {
    color: var(--text-secondary);
}

/* ---- Verdict area ------------------------------------------------------- */
/* Lives INSIDE .roi-results-card — flat styling only, no clip-path.
   The verdict states are communicated via border color and background only. */

.roi-verdict {
    padding: 14px 16px;
    border: 1px solid;
    transition: background .3s, border-color .3s;
    margin-bottom: 16px;
    /* flat — no clip-path here. Outer card already has clip-path. */
}

.roi-verdict.verdict-strong {
    background: rgba(0, 220, 130, 0.07);
    border-color: rgba(0, 220, 130, 0.4);
}

.roi-verdict.verdict-moderate {
    background: rgba(0, 245, 212, 0.05);
    border-color: rgba(0, 245, 212, 0.3);
}

.roi-verdict.verdict-weak {
    background: rgba(255, 184, 0, 0.05);
    border-color: rgba(255, 184, 0, 0.35);
}

.roi-verdict.verdict-negative {
    background: rgba(255, 87, 87, 0.06);
    border-color: rgba(255, 87, 87, 0.35);
}

.roi-verdict.verdict-empty {
    background: rgba(255, 255, 255, 0.015);
    border-color: rgba(255, 255, 255, 0.06);
}

/* ---- Verdict badge ------------------------------------------------------ */
/* Small label — uses clip-path because it is NOT inside another clip-path
   container (the verdict div uses a flat border, not clip-path).           */

.verdict-badge {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    clip-path: var(--clip-badge);
    margin-bottom: 8px;
}

.verdict-strong .verdict-badge {
    background: rgba(0, 220, 130, 0.18);
    color: #52e6a0;
}

.verdict-moderate .verdict-badge {
    background: rgba(0, 245, 212, 0.14);
    color: var(--neon-cyan);
}

.verdict-weak .verdict-badge {
    background: rgba(255, 184, 0, 0.12);
    color: #ffd365;
}

.verdict-negative .verdict-badge {
    background: rgba(255, 87, 87, 0.12);
    color: #ff9b9b;
}

.verdict-empty .verdict-badge {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
}

.verdict-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.55;
    margin: 0;
}

/* ---- Results footer (copy button row) ---------------------------------- */

.roi-results-footer {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.roi-copy-btn {
    font-size: 13px;
    padding: 9px 18px;
}

.roi-copy-confirm {
    font-family: var(--font-mono);
    font-size: 12px;
    color: #5af0cb;
    margin: 0;
    display: none;
}

.roi-copy-confirm.is-visible {
    display: block;
}

/* ---- Disclaimer -------------------------------------------------------- */

.roi-disclaimer {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.5;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 10px;
    margin: 0;
}

/* ---- "How this works" explainer section --------------------------------- */

.roi-explainer {
    margin-top: 56px;
}

.roi-explainer h2 {
    font-family: var(--font-display);
    font-size: clamp(20px, 3vw, 26px);
    color: var(--text-primary);
    margin: 0 0 14px;
}

.roi-explainer p,
.roi-explainer li {
    font-size: 15.5px;
    color: var(--text-secondary);
    line-height: 1.7;
}

.roi-ctr-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
}

.roi-ctr-table th {
    text-align: left;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.roi-ctr-table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    font-family: var(--font-mono);
    color: var(--text-secondary);
    font-size: 13.5px;
}

.roi-ctr-table tr:hover td {
    background: rgba(0, 245, 212, 0.03);
}

/* ---- Assumptions box --------------------------------------------------- */

.assumptions-box {
    margin: 20px 0;
    padding: 16px 18px;
    background: rgba(20, 22, 30, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    clip-path: var(--clip-card);
}

.assumptions-box p,
.assumptions-box li {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.65;
    margin: 0 0 8px;
}

.assumptions-box p:last-child,
.assumptions-box li:last-child {
    margin-bottom: 0;
}

.assumptions-box strong {
    color: var(--text-primary);
}

/* ---- Reduced motion ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .roi-verdict,
    .roi-metric-value,
    .roi-results-card {
        transition: none;
        animation: none;
    }
}