/* Domain Scanner — TheHostCare-styled, iframe-ready, brand color #19c57d */

:root {
    --green: #19c57d;
    --green-dark: #14a468;
    --green-soft: #e8faf1;
    --green-tint: rgba(25, 197, 125, 0.12);
    --green-shadow: 0 6px 18px rgba(25, 197, 125, 0.28);

    --orange: #f5a623;
    --orange-soft: #fff5e1;
    --red: #ef5b5b;
    --red-soft: #fde9e9;

    --navy: #0d1b2a;      /* dark heading / nav color */
    --ink: #1a2733;       /* primary body text */
    --ink-soft: #5a6b78;  /* secondary text */
    --muted: #9aa5ad;
    --line: #e7eef5;      /* card/input border (blue-tinted) */
    --line-soft: #f1f5f9;
    --page: #f5f9fc;      /* standalone page bg (light blue tint) */

    --shadow-sm: 0 1px 2px rgba(15, 30, 45, 0.04);
    --shadow:    0 6px 24px rgba(15, 30, 45, 0.06);
    --shadow-lg: 0 16px 40px rgba(15, 30, 45, 0.08);

    --radius: 14px;
    --radius-sm: 8px;

    --t: 0.2s cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    background: transparent;
}

body:not(.embed) { background: var(--page); }
body.embed       { background: transparent; }

.wrap {
    max-width: 820px;
    margin: 0 auto;
    padding: 24px 16px;
}

.hidden { display: none !important; }

/* ---------- Cards ---------- */
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
    animation: fadeIn 0.3s var(--t) both;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Intro / Form ---------- */
.title {
    color: var(--green);
    font-size: 22px;
    margin: 0 0 6px;
    font-weight: 700;
    letter-spacing: -0.005em;
}

.subtitle {
    color: var(--ink-soft);
    font-size: 14px;
    margin: 0 0 22px;
}

label {
    display: block;
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 6px;
    font-weight: 500;
}

input[type="text"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 14px;
    background: #fff;
    color: var(--ink);
    transition: border-color var(--t), box-shadow var(--t);
}
input[type="text"]::placeholder { color: var(--muted); }
input[type="text"]:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px var(--green-tint);
}

.actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
}

/* Cloudflare Turnstile widget container */
.turnstile-wrap {
    margin-top: 16px;
    display: flex;
    justify-content: flex-start;
    min-height: 65px; /* reserve space so layout doesn't jump while widget loads */
}
.turnstile-wrap .cf-turnstile { max-width: 100%; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t), transform 0.06s;
    font-family: inherit;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--green);
    color: #fff;
    min-width: 220px;
    box-shadow: var(--green-shadow);
}
.btn-primary:hover {
    background: var(--green-dark);
    box-shadow: 0 8px 22px rgba(25, 197, 125, 0.35);
}
.btn-primary:disabled { opacity: 0.7; cursor: progress; }

.btn-ghost {
    background: #fff;
    color: var(--ink-soft);
    border-color: var(--line);
}
.btn-ghost:hover {
    background: var(--line-soft);
    color: var(--navy);
    border-color: #d6dfe8;
}

/* Spinner */
.btn-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    display: none;
    animation: spin 0.7s linear infinite;
}
.btn.loading .btn-label { display: none; }
.btn.loading .btn-spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Risk card ---------- */
.risk-card {
    border-left: 4px solid var(--orange);
}
.risk-card[data-risk="Low"]    { border-left-color: var(--green); }
.risk-card[data-risk="Medium"] { border-left-color: var(--orange); }
.risk-card[data-risk="High"]   { border-left-color: var(--red); }

.risk-card h2 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
    color: var(--navy);
}
.risk-card p {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0;
    line-height: 1.55;
}
.risk-low    { color: var(--green-dark); font-weight: 700; }
.risk-medium { color: var(--orange);     font-weight: 700; }
.risk-high   { color: var(--red);        font-weight: 700; }

/* ---------- Results ---------- */
.results-title {
    color: var(--green);
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 20px;
}
.results-title span { font-weight: 700; color: var(--green-dark); }

/* Layout */
.results-grid {
    display: grid;
    grid-template-columns: 180px 1fr 1fr 1fr;
    grid-template-areas:
        "score spf dmarc dkim"
        "score mx  mx    blacklist";
    gap: 12px;
}

.overall          { grid-area: score; }
.check-spf        { grid-area: spf; }
.check-dmarc      { grid-area: dmarc; }
.check-dkim       { grid-area: dkim; }
.check-mx         { grid-area: mx; }
.check-blacklist  { grid-area: blacklist; }

@media (max-width: 760px) {
    .results-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "score score"
            "spf   dmarc"
            "dkim  mx"
            "blacklist blacklist";
    }
}

@media (max-width: 460px) {
    .results-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "score"
            "spf"
            "dmarc"
            "dkim"
            "mx"
            "blacklist";
    }
}

/* Overall + tooltip */
.overall { text-align: center; padding: 4px; }

.overall-label {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--ink-soft);
    margin-bottom: 10px;
}

.info-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: var(--line);
    color: var(--ink-soft);
    font-size: 10px;
    font-style: italic;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--t), color var(--t);
    padding: 0;
    line-height: 1;
}
.info-icon:hover { background: var(--green); color: #fff; }

.tooltip {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    width: 300px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow-lg);
    text-align: left;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--t), transform var(--t), visibility var(--t);
    pointer-events: none;
}
.tooltip.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.tooltip::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: #fff;
    border-left: 1px solid var(--line);
    border-top: 1px solid var(--line);
}
.tooltip h4 { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--navy); }
.tooltip p  { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

/* Score ring */
.score-ring {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto;
}
.ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.ring-bg, .ring-progress {
    fill: none;
    stroke-width: 10;
    stroke-linecap: round;
}
.ring-bg { stroke: var(--line-soft); stroke-dasharray: 4 6; }
.ring-progress {
    stroke: var(--orange);
    stroke-dasharray: 327;
    stroke-dashoffset: 327;
    transition: stroke-dashoffset 0.9s cubic-bezier(.4,0,.2,1), stroke 0.3s;
}
.score-text {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
}
.score-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.score-value { font-size: 30px; font-weight: 800; color: var(--navy); margin: 2px 0; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.score-max   { font-size: 11px; color: var(--muted); }

/* Protocol check boxes (TheHostCare pricing-card style) */
.check-box {
    background: #fff;
    border: 1.5px solid var(--line);
    border-radius: var(--radius);
    padding: 16px 14px;
    text-align: center;
    transition: border-color var(--t), transform var(--t), box-shadow var(--t);
    position: relative;
}
.check-box:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.check-box.pass {
    border-color: var(--green);
    box-shadow: 0 4px 14px rgba(25, 197, 125, 0.12);
}
.check-box.warn { border-color: var(--orange); }
.check-box.fail { border-color: var(--red); }

.check-box h3 {
    margin: 8px 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
}
.check-box p {
    margin: 0;
    font-size: 11px;
    color: var(--green-dark);
    line-height: 1.4;
}

.dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 4px;
}
.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--line-soft);
    transition: background 0.35s;
}
.check-box.pass .dot:nth-child(1) { background: #bfe9d3; }
.check-box.pass .dot:nth-child(2) { background: #7ed4a8; }
.check-box.pass .dot:nth-child(3) { background: var(--green); }

.check-box.warn .dot:nth-child(1) { background: #fce0b8; }
.check-box.warn .dot:nth-child(2) { background: var(--orange); }
.check-box.warn .dot:nth-child(3) { background: #fce0b8; }

.check-box.fail .dot { background: #fbd3d5; }
.check-box.fail .dot:nth-child(2) { background: var(--red); }

/* Details mode: when "Show details" is open, hide the 5 protocol cards
   and center the score ring above the details list. */
.results-card.details-mode .check-box { display: none !important; }
.results-card.details-mode .results-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "score";
    justify-items: center;
}

/* Results footer */
.results-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}
@media (max-width: 460px) { .results-footer .btn { flex: 1; min-width: 0; } }

/* ---------- Details ---------- */
.details {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.detail-block { margin-bottom: 18px; }
.detail-block:last-child { margin-bottom: 0; }

.detail-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.detail-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--line-soft);
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.detail-pill.pass { background: var(--green-soft); color: var(--green-dark); }
.detail-pill.warn { background: var(--orange-soft); color: var(--orange); }
.detail-pill.fail { background: var(--red-soft); color: var(--red); }

.detail-block h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--navy);
}

.detail-block pre {
    background: var(--line-soft);
    border: 1px solid var(--line);
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: var(--ink-soft);
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0 0 8px;
    font-family: "SF Mono", "JetBrains Mono", Consolas, Monaco, monospace;
    line-height: 1.5;
}

/* Use checkmarks (✓) and X marks (✕) like TheHostCare feature lists. */
.detail-block ul {
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--ink-soft);
    list-style: none;
}
.detail-block li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 6px;
    line-height: 1.55;
}
.detail-block li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 10px 10px;
}
/* Default = green check (good news / informational) */
.detail-block li::before {
    background-color: var(--green-soft);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%2319c57d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3 8.5l3.5 3.5L13 5'/></svg>");
}
/* Fail block items = red X */
.detail-block[data-status="fail"] li::before {
    background-color: var(--red-soft);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='%23ef5b5b' stroke-width='2.5' stroke-linecap='round' d='M4 4l8 8M12 4l-8 8'/></svg>");
}
/* Warn block items = orange dot */
.detail-block[data-status="warn"] li::before {
    background-color: var(--orange-soft);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><circle cx='8' cy='8' r='3' fill='%23f5a623'/></svg>");
}

/* ---------- Error ---------- */
.error-card {
    border-left: 4px solid var(--red);
    color: var(--red);
    font-size: 14px;
    background: var(--red-soft);
}