/* ============================================================
   EcomValue — Website Worth Calculator
   Color Palette: #000000 (black) + #FFFFFF (white) + grays
   Design: Clean, modern, high-contrast, mobile-first
   ============================================================ */


/* ── RESET & BASE ── */

.ewwc-app *,
.ewwc-app *::before,
.ewwc-app *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.ewwc-app {
--ewwc-black: #000000;
--ewwc-white: #ffffff;
--ewwc-gray-950: #0a0a0a;
--ewwc-gray-900: #111111;
--ewwc-gray-800: #1c1c1c;
--ewwc-gray-700: #2d2d2d;
--ewwc-gray-600: #3f3f3f;
--ewwc-gray-500: #6b6b6b;
--ewwc-gray-400: #9a9a9a;
--ewwc-gray-300: #c4c4c4;
--ewwc-gray-200: #e0e0e0;
--ewwc-gray-100: #f2f2f2;
--ewwc-gray-50: #f8f8f8;

/* Semantic tokens */
--ewwc-bg: var(--ewwc-white);
--ewwc-surface: var(--ewwc-gray-50);
--ewwc-surface-2: var(--ewwc-gray-100);
--ewwc-border: var(--ewwc-gray-200);
--ewwc-text: var(--ewwc-gray-950);
--ewwc-text-muted: var(--ewwc-gray-500);
--ewwc-text-faint: var(--ewwc-gray-400);
--ewwc-accent: var(--ewwc-black);
--ewwc-accent-hover:#222222;

--ewwc-success-bg: #f0fdf4;
--ewwc-success-text:#166534;
--ewwc-danger-bg: #fff1f2;
--ewwc-danger-text: #9f1239;

--ewwc-radius-sm: 6px;
--ewwc-radius-md: 10px;
--ewwc-radius-lg: 16px;
--ewwc-radius-xl: 20px;
--ewwc-radius-full: 9999px;

--ewwc-shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.08);
--ewwc-shadow-md: 0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.06);
--ewwc-shadow-lg: 0 12px 32px rgba(0,0,0,.10), 0 4px 8px rgba(0,0,0,.06);

--ewwc-transition: 180ms cubic-bezier(.16,1,.3,1);

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-size: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
color: var(--ewwc-text);
background: var(--ewwc-bg);
-webkit-font-smoothing: antialiased;
line-height: 1.6;
max-width: 900px;
margin-inline: auto;
padding: clamp(1.5rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem);
}


/* ── HERO / INPUT SECTION ── */

.ewwc-hero {
text-align: center;
padding-bottom: clamp(2rem, 5vw, 3rem);
}

.ewwc-title {
font-size: clamp(1.75rem, 2.5vw + 1rem, 2.5rem);
font-weight: 800;
letter-spacing: -0.03em;
color: var(--ewwc-black);
line-height: 1.15;
margin-bottom: .75rem;
}

.ewwc-subtitle {
font-size: clamp(1rem, 1.5vw + .5rem, 1.2rem);
color: var(--ewwc-text-muted);
margin-bottom: .5rem;
max-width: 54ch;
margin-inline: auto;
}

.ewwc-trust {
font-size: .8125rem;
color: var(--ewwc-text-faint);
margin-bottom: 2rem;
letter-spacing: .01em;
}

/* ── INTRO TEXT (above the form) ── */

.ewwc-intro-text {
    max-width: 600px;
    margin: 0 auto 1.75rem auto;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ewwc-text-muted, #4b5563);
    text-align: center;
}


/* ── FORM ── */

.ewwc-form {
max-width: 640px;
margin-inline: auto;
}

.ewwc-input-wrap {
display: flex;
align-items: center;
background: var(--ewwc-white);
border: 2px solid var(--ewwc-gray-200);
border-radius: var(--ewwc-radius-full);
padding: 6px 6px 6px 18px;
gap: .75rem;
transition: border-color var(--ewwc-transition), box-shadow var(--ewwc-transition);
box-shadow: var(--ewwc-shadow-sm);
}

.ewwc-input-wrap:focus-within {
border-color: var(--ewwc-black);
box-shadow: 0 0 0 3px rgba(0,0,0,.1), var(--ewwc-shadow-sm);
}

.ewwc-input-icon {
color: var(--ewwc-text-faint);
flex-shrink: 0;
display: flex;
align-items: center;
}

.ewwc-input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-size: 1rem;
color: var(--ewwc-text);
min-width: 0;
padding: .4rem 0;
}

.ewwc-input::placeholder {
color: var(--ewwc-text-faint);
}

.ewwc-btn-primary {
display: inline-flex;
align-items: center;
gap: .5rem;
background: var(--ewwc-black);
color: var(--ewwc-white);
border: none;
border-radius: var(--ewwc-radius-full);
padding: .65rem 1.5rem;
font-size: .9375rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background var(--ewwc-transition), transform var(--ewwc-transition);
flex-shrink: 0;
min-height: 44px;
}

.ewwc-btn-primary:hover { background: var(--ewwc-accent-hover); }
.ewwc-btn-primary:active { transform: scale(.97); }
.ewwc-btn-primary:disabled {
background: var(--ewwc-gray-400);
cursor: not-allowed;
transform: none;
}

.ewwc-hint {
margin-top: .75rem;
font-size: .8125rem;
color: var(--ewwc-text-faint);
text-align: center;
}

.ewwc-hint strong {
color: var(--ewwc-text-muted);
font-weight: 500;
}

.ewwc-error {
margin-top: .75rem;
font-size: .875rem;
color: var(--ewwc-danger-text);
background: var(--ewwc-danger-bg);
border-radius: var(--ewwc-radius-md);
padding: .6rem 1rem;
text-align: center;
}


/* ── SKELETON LOADER ── */

@keyframes ewwc-shimmer {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}

.ewwc-skeleton-wrap {
margin-top: 2rem;
}

.ewwc-skeleton-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
gap: 1rem;
}

.ewwc-skeleton-card {
background: var(--ewwc-surface);
border: 1px solid var(--ewwc-border);
border-radius: var(--ewwc-radius-lg);
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: .6rem;
}

.ewwc-skel {
background: linear-gradient(90deg, var(--ewwc-gray-100) 25%, var(--ewwc-gray-200) 50%, var(--ewwc-gray-100) 75%);
background-size: 800px 100%;
animation: ewwc-shimmer 1.4s ease-in-out infinite;
border-radius: var(--ewwc-radius-sm);
}

.ewwc-skel-label { height: .75rem; width: 50%; }
.ewwc-skel-value { height: 1.75rem; width: 70%; }
.ewwc-skel-sub { height: .6875rem; width: 40%; }


/* ── RESULTS ── */

.ewwc-results {
margin-top: 2rem;
animation: ewwc-fade-in .35s ease forwards;
}

@keyframes ewwc-fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

.ewwc-results-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.5rem;
}

.ewwc-domain-badge {
display: flex;
align-items: center;
gap: .6rem;
background: var(--ewwc-surface);
border: 1px solid var(--ewwc-border);
border-radius: var(--ewwc-radius-full);
padding: .45rem 1rem .45rem .6rem;
}

.ewwc-domain-badge img {
border-radius: 3px;
display: block;
flex-shrink: 0;
}

.ewwc-domain-name {
font-size: .9375rem;
font-weight: 600;
color: var(--ewwc-text);
}

/* Worth highlight */
.ewwc-worth-highlight {
background: var(--ewwc-black);
color: var(--ewwc-white);
border-radius: var(--ewwc-radius-xl);
padding: clamp(1.5rem, 4vw, 2.5rem);
text-align: center;
margin-bottom: 1.25rem;
position: relative;
overflow: hidden;
}

.ewwc-worth-highlight::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at top right, rgba(255,255,255,.06) 0%, transparent 60%);
pointer-events: none;
}

.ewwc-worth-label {
font-size: .8125rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: .08em;
color: rgba(255,255,255,.55);
margin-bottom: .5rem;
}

.ewwc-worth-value {
font-size: clamp(2rem, 4vw + 1rem, 3.25rem);
font-weight: 800;
letter-spacing: -.03em;
line-height: 1.1;
margin-bottom: .5rem;
font-variant-numeric: tabular-nums lining-nums;
}

.ewwc-worth-basis {
font-size: .8125rem;
color: rgba(255,255,255,.45);
}

/* Metrics grid */
.ewwc-metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
gap: 1rem;
margin-bottom: 1rem;
}

.ewwc-card {
background: var(--ewwc-surface);
border: 1px solid var(--ewwc-border);
border-radius: var(--ewwc-radius-lg);
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: .3rem;
transition: box-shadow var(--ewwc-transition), transform var(--ewwc-transition);
}

.ewwc-card:hover {
box-shadow: var(--ewwc-shadow-md);
transform: translateY(-1px);
}

.ewwc-card--wide {
grid-column: 1 / -1;
}

.ewwc-card-icon {
color: var(--ewwc-text-faint);
margin-bottom: .4rem;
display: flex;
align-items: center;
}

.ewwc-card-label {
font-size: .75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
color: var(--ewwc-text-muted);
}

.ewwc-card-value {
font-size: clamp(1.25rem, 2vw + .5rem, 1.6rem);
font-weight: 700;
color: var(--ewwc-text);
letter-spacing: -.02em;
font-variant-numeric: tabular-nums lining-nums;
line-height: 1.2;
}

.ewwc-card-sub {
font-size: .8125rem;
color: var(--ewwc-text-muted);
}

/* Ad networks */
.ewwc-networks-list {
display: flex;
flex-wrap: wrap;
gap: .5rem;
margin-top: .4rem;
}

.ewwc-net-tag {
background: var(--ewwc-gray-200);
color: var(--ewwc-gray-800);
font-size: .75rem;
font-weight: 600;
padding: .3rem .7rem;
border-radius: var(--ewwc-radius-full);
}

.ewwc-net-none {
font-size: .875rem;
color: var(--ewwc-text-muted);
font-style: italic;
}

/* Registrar row */
.ewwc-registrar-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .4rem;
font-size: .8125rem;
color: var(--ewwc-text-muted);
background: var(--ewwc-surface);
border: 1px solid var(--ewwc-border);
border-radius: var(--ewwc-radius-md);
padding: .75rem 1rem;
margin-bottom: 1rem;
}

.ewwc-registrar-label { font-weight: 600; color: var(--ewwc-text); }
.ewwc-registrar-value { color: var(--ewwc-text-muted); }

/* Disclaimer */
.ewwc-disclaimer {
display: flex;
align-items: flex-start;
gap: .6rem;
background: var(--ewwc-surface);
border: 1px solid var(--ewwc-border);
border-radius: var(--ewwc-radius-md);
padding: 1rem;
font-size: .8125rem;
color: var(--ewwc-text-muted);
margin-bottom: 1rem;
line-height: 1.55;
}

.ewwc-disclaimer svg {
flex-shrink: 0;
margin-top: .1rem;
color: var(--ewwc-text-faint);
}

.ewwc-disclaimer strong {
color: var(--ewwc-text);
font-weight: 600;
}

/* Share row */
.ewwc-share-row {
display: flex;
gap: .75rem;
flex-wrap: wrap;
}

.ewwc-btn-secondary {
display: inline-flex;
align-items: center;
gap: .4rem;
background: transparent;
border: 2px solid var(--ewwc-border);
color: var(--ewwc-text-muted);
border-radius: var(--ewwc-radius-full);
padding: .5rem 1.1rem;
font-size: .875rem;
font-weight: 500;
cursor: pointer;
transition: border-color var(--ewwc-transition), color var(--ewwc-transition);
min-height: 44px;
}

.ewwc-btn-secondary:hover {
border-color: var(--ewwc-black);
color: var(--ewwc-black);
}

.ewwc-btn-outline {
display: inline-flex;
align-items: center;
gap: .4rem;
background: transparent;
border: 1.5px solid var(--ewwc-border);
color: var(--ewwc-text-muted);
border-radius: var(--ewwc-radius-full);
padding: .45rem 1rem;
font-size: .8125rem;
font-weight: 500;
cursor: pointer;
transition: all var(--ewwc-transition);
min-height: 40px;
}

.ewwc-btn-outline:hover {
background: var(--ewwc-black);
border-color: var(--ewwc-black);
color: var(--ewwc-white);
}

/* Spinner */
.ewwc-spin {
animation: ewwc-rotate .8s linear infinite;
}

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

/* Screen reader only */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border-width: 0;
}


/* ── REDUCED MOTION ── */

@media (prefers-reduced-motion: reduce) {
.ewwc-app *,
.ewwc-app *::before,
.ewwc-app *::after {
animation-duration: .01ms !important;
transition-duration: .01ms !important;
}
}


/* ── RESPONSIVE ── */

@media (max-width: 600px) {
.ewwc-input-wrap {
flex-direction: column;
border-radius: var(--ewwc-radius-xl);
padding: .75rem 1rem;
align-items: stretch;
}

.ewwc-input-icon { display: none; }

.ewwc-btn-primary {
width: 100%;
justify-content: center;
border-radius: var(--ewwc-radius-md);
}

.ewwc-results-header {
flex-direction: column;
align-items: flex-start;
}

.ewwc-registrar-row {
flex-direction: column;
gap: .25rem;
}
}

@media (max-width: 400px) {
.ewwc-metrics-grid {
grid-template-columns: 1fr;
}
}

/* ============================================================
   CHANGE 1 — LOW TRAFFIC NOTICE
   Shown instead of the results card when traffic data is
   too low to produce a reliable estimate.
   Warm amber palette signals a caution state.
   ============================================================ */
.ewwc-low-traffic-notice {
display: flex;
align-items: flex-start;
gap: 1rem;
background: #fffbeb;
border: 1px solid #fde68a;
border-radius: var(--ewwc-radius-lg);
padding: 1.5rem;
margin-top: 1.75rem;
animation: ewwc-fade-in .35s ease forwards;
}

.ewwc-lt-icon {
color: #b45309;
flex-shrink: 0;
margin-top: .1rem;
display: flex;
align-items: flex-start;
}

.ewwc-lt-body {
display: flex;
flex-direction: column;
gap: .4rem;
}

.ewwc-lt-title {
font-size: 1rem;
font-weight: 700;
color: #92400e;
line-height: 1.2;
}

.ewwc-lt-text {
font-size: .9rem;
color: #78350f;
line-height: 1.6;
max-width: 60ch;
}

.ewwc-lt-text strong {
font-weight: 600;
color: #78350f;
}

.ewwc-lt-hint {
font-size: .8125rem;
color: #a16207;
font-style: italic;
}

@media (max-width: 600px) {
.ewwc-low-traffic-notice {
flex-direction: column;
gap: .75rem;
}
}

/* ============================================================
   CHANGE 2 — LOW CONFIDENCE BADGE
   Small pill appended inside the black Estimated Worth card
   when traffic data exists but is limited (< 5,000/month).
   White-alpha palette blends cleanly on the dark surface.
   ============================================================ */
.ewwc-low-conf-badge {
display: inline-flex;
align-items: center;
gap: .35rem;
margin-top: .75rem;
font-size: .75rem;
font-weight: 500;
color: rgba(255,255,255,.70);
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.18);
border-radius: var(--ewwc-radius-full);
padding: .3rem .85rem;
letter-spacing: .01em;
}

/* ============================================================
   CHANGE 3 — BRAND VALUE NOTICE
   Informational banner shown directly below the Estimated
   Worth card ONLY for high-traffic (large/established) sites.
   Blue palette signals informational, not a warning.
   ============================================================ */
.ewwc-brand-value-notice {
display: flex;
align-items: flex-start;
gap: .75rem;
background: #f0f7ff;
border: 1px solid #bfdbfe;
border-radius: var(--ewwc-radius-md);
padding: .875rem 1.1rem;
margin-top: -.75rem;
margin-bottom: 1.25rem;
animation: ewwc-fade-in .35s ease forwards;
}

.ewwc-bv-icon {
color: #3b82f6;
flex-shrink: 0;
margin-top: .15rem;
display: flex;
align-items: flex-start;
}

.ewwc-bv-text {
font-size: .8375rem;
color: #1e40af;
line-height: 1.6;
max-width: 72ch;
}

.ewwc-bv-text strong {
font-weight: 700;
color: #1d4ed8;
}

@media (max-width: 600px) {
.ewwc-brand-value-notice {
flex-direction: column;
gap: .5rem;
margin-top: 0;
}
}