/* sites/isitascam.tools/theme.css
   Site-specific theme: IsItAScam Tools
   Theme: Security/Trust (Green/Red) - Safety and detection
*/

:root {
  /* Primary brand colors - Trust/Safety Theme */
  --site-primary: #10b981;       /* Green - safety and trust */
  --site-primary-dark: #059669;  /* Darker green */
  --site-primary-light: #d1fae5; /* Very light green background */
  --site-primary-lighter: #a7f3d0; /* Light green for cards */
  
  /* Danger colors for scam detection */
  --scam-primary: #ef4444;       /* Red - scam detected */
  --scam-secondary: #dc2626;     /* Darker red */
  --scam-light: #fee2e2;         /* Light red background */
  
  /* Warning colors */
  --scam-warning: #f59e0b;       /* Amber - suspicious */
  --scam-warning-light: #fef3c7; /* Light amber background */
  
  /* Safe colors */
  --scam-safe: #22c55e;          /* Bright green - verified safe */
  --scam-safe-light: #dcfce7;    /* Light green */
  
  /* Text colors - optimized for light mode */
  --text-primary: #0f172a;       /* Slate 900 - excellent contrast */
  --text-secondary: #475569;     /* Slate 600 - readable */
  --text-tertiary: #64748b;      /* Slate 500 - muted */
  --text-inverse: #ffffff;
  
  /* Backgrounds - light mode with green tint */
  --bg-primary: #ffffff;
  --bg-secondary: #f0fdf4;       /* Green 50 - subtle safety tint */
  --bg-tertiary: #dcfce7;        /* Green 100 */
  --bg-dark: #1f2937;            /* Gray 800 for footer */
  
  /* Border colors */
  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;
  
  /* Scan animation colors */
  --scan-glow-start: rgba(255, 255, 255, 0);
  --scan-glow-mid: rgba(255, 255, 255, 0.28);
  --scan-glow-end: rgba(255, 255, 255, 0);
  --scan-glow-start-pos: 30%;
  --scan-glow-mid-pos: 50%;
  --scan-glow-end-pos: 70%;
  
  /* Dark mode design tokens (single source of truth) */
  --dm-text-primary: #f1f5f9;      /* Slate 100 */
  --dm-text-secondary: #cbd5e1;    /* Slate 300 */
  --dm-text-tertiary: #94a3b8;     /* Slate 400 */
  --dm-text-inverse: #0f172a;
  
  --dm-bg-primary: #0f172a;        /* Slate 900 */
  --dm-bg-secondary: #1e293b;      /* Slate 800 */
  --dm-bg-tertiary: #334155;       /* Slate 700 */
  --dm-bg-dark: #1f2937;           /* Gray 800 for footer */
  
  --dm-border-primary: #334155;
  --dm-border-secondary: #475569;
  
  --dm-site-primary-light: #065f46;  /* Darker for backgrounds */
  --dm-scam-light: #7f1d1d;          /* Darker red for backgrounds */
  --dm-scam-warning-light: #78350f;  /* Darker amber for backgrounds */
  
  /* Legacy support */
  --primary: var(--site-primary);
  --accent: #10b981;
  --accent-2: color-mix(in srgb, #10b981 55%, #22c55e);
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    /* Text colors for dark mode */
    --text-primary: var(--dm-text-primary);
    --text-secondary: var(--dm-text-secondary);
    --text-tertiary: var(--dm-text-tertiary);
    --text-inverse: var(--dm-text-inverse);
    
    /* Backgrounds for dark mode */
    --bg-primary: var(--dm-bg-primary);
    --bg-secondary: var(--dm-bg-secondary);
    --bg-tertiary: var(--dm-bg-tertiary);
    --bg-dark: var(--dm-bg-dark);
    
    /* Border colors for dark mode */
    --border-primary: var(--dm-border-primary);
    --border-secondary: var(--dm-border-secondary);
    
    /* Adjusted colors for better visibility */
    --site-primary-light: var(--dm-site-primary-light);
    --scam-light: var(--dm-scam-light);
    --scam-warning-light: var(--dm-scam-warning-light);
  }
}

html.dark,
html.dark-mode,
html[data-theme="dark"] {
  /* Text colors for dark mode */
  --text-primary: var(--dm-text-primary);
  --text-secondary: var(--dm-text-secondary);
  --text-tertiary: var(--dm-text-tertiary);
  --text-inverse: var(--dm-text-inverse);
  
  /* Backgrounds for dark mode */
  --bg-primary: var(--dm-bg-primary);
  --bg-secondary: var(--dm-bg-secondary);
  --bg-tertiary: var(--dm-bg-tertiary);
  --bg-dark: var(--dm-bg-dark);
  
  /* Border colors */
  --border-primary: var(--dm-border-primary);
  --border-secondary: var(--dm-border-secondary);
  
  /* Adjusted colors */
  --site-primary-light: var(--dm-site-primary-light);
  --scam-light: var(--dm-scam-light);
  --scam-warning-light: var(--dm-scam-warning-light);
}

html[data-theme="light"] {
  color-scheme: light;
  
  /* Text colors for light mode */
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-tertiary: #64748b;
  --text-inverse: #ffffff;
  
  /* Backgrounds for light mode */
  --bg-primary: #ffffff;
  --bg-secondary: #f0fdf4;
  --bg-tertiary: #dcfce7;
  --bg-dark: #1f2937;
  
  /* Border colors */
  --border-primary: #e5e7eb;
  --border-secondary: #d1d5db;
  
  /* Adjusted colors */
  --site-primary-light: #d1fae5;
  --scam-light: #fee2e2;
  --scam-warning-light: #fef3c7;
}

body {
  padding-top: 4.75rem;
}

body .header-unified {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1020;
}

@media (max-width: 768px) {
  body {
    padding-top: 6rem;
  }
}

/* Footer override for security/trust theme */
.footer {
  background: linear-gradient(135deg, #065f46 0%, #022c22 100%);
}

#header-container {
  min-height: 72px;
}

@media (max-width: 768px) {
  #header-container {
    min-height: 112px;
  }
}

html.dark .footer,
html.dark-mode .footer,
html[data-theme="dark"] .footer {
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
}

/* Hero section with security theme */
.hero--security,
.hero-standard[data-theme="security"] {
  background: linear-gradient(135deg, var(--site-primary) 0%, var(--site-primary-dark) 100%);
  color: var(--text-inverse);
}

/* Feature cards with security theme */
.feature-card--security {
  border-left: 4px solid var(--site-primary);
  transition: all 0.3s ease;
}

.feature-card--security:hover {
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25);
  transform: translateY(-2px);
}

/* CTA button security theme */
.cta-btn--security {
  background: var(--site-primary);
  transition: all 0.3s ease;
}

.cta-btn--security:hover {
  background: var(--site-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Scam Checker Section */
.scam-checker-section {
    padding: 3rem 1.5rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
}

.dark-mode .scam-checker-section,
.dark .scam-checker-section {
    background: linear-gradient(135deg, #0f172a 0%, #111827 100%);
}

.scam-checker-section .container {
    max-width: 1000px;
    margin: 0 auto;
}

/* Tab Navigation */
.checker-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    justify-content: center;
    border-bottom: 2px solid #e5e7eb;
    padding-bottom: 1rem;
}

.tab-btn {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 8px 8px 0 0;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s;
    color: var(--text-secondary);
    font-size: 1rem;
}

.tab-btn:hover {
    background: var(--site-primary-light);
    color: var(--site-primary);
}

.tab-btn.active {
    background: var(--site-primary);
    color: white;
    border-color: var(--site-primary);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease-in;
}

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

/* Checker Card */
.checker-card {
    background: white;
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(16, 185, 129, 0.12);
    border: 1px solid var(--site-primary-light);
}

.dark-mode .checker-card,
.dark .checker-card {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}

.checker-card h2 {
    margin-bottom: 1rem;
    color: #1f2937;
    font-size: 1.875rem;
}

.checker-card h3 {
    margin-bottom: 1rem;
    color: #1f2937;
    font-size: 1.5rem;
}

.dark-mode .checker-card h2,
.dark-mode .checker-card h3,
.dark .checker-card h2,
.dark .checker-card h3 {
    color: var(--text-primary);
}

.checker-intro {
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.dark-mode .checker-intro,
.dark .checker-intro {
    color: var(--text-secondary);
}

/* Input Groups */
.input-group {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.input-group input {
    flex: 1;
    min-width: 200px;
    padding: 1rem;
    font-size: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    transition: border-color 0.3s;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.input-group input:focus {
    outline: none;
    border-color: var(--site-primary);
}

.dark-mode .input-group input,
.dark .input-group input,
.dark-mode .input-group-vertical input,
.dark .input-group-vertical input,
.dark-mode .input-group-vertical textarea,
.dark .input-group-vertical textarea {
    border-color: var(--border-primary);
}

.dark-mode .input-group input:focus,
.dark .input-group input:focus,
.dark-mode .input-group-vertical input:focus,
.dark .input-group-vertical input:focus,
.dark-mode .input-group-vertical textarea:focus,
.dark .input-group-vertical textarea:focus {
    border-color: var(--site-primary);
}

.input-group-vertical {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.input-group-vertical input {
    padding: 1rem;
    font-size: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    transition: border-color 0.3s;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.input-group-vertical input:focus {
    outline: none;
    border-color: var(--site-primary);
}

.input-group-vertical textarea {
    padding: 1rem;
    font-size: 1rem;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-family: inherit;
    transition: border-color 0.3s;
    resize: vertical;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.input-group-vertical textarea:focus {
    outline: none;
    border-color: var(--site-primary);
}

.input-group-vertical input::placeholder,
.input-group-vertical textarea::placeholder,
.input-group input::placeholder {
    color: var(--text-secondary);
}

.btn-check {
    padding: 1rem 1.5rem;
    background: var(--site-primary);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}

.btn-check.is-loading {
    cursor: wait;
    opacity: 0.9;
    transform: none;
    box-shadow: none;
    color: #fff;
    --scan-sweep-offset: -50%;
    --scan-sweep-start: -25%;
    --scan-sweep-end: 25%;
}

.btn-check.is-loading::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    /* Oversize the sweep overlay to keep the gradient covering the button. */
    left: var(--scan-sweep-offset);
    right: var(--scan-sweep-offset);
    background: linear-gradient(
        120deg,
        var(--scan-glow-start) var(--scan-glow-start-pos),
        var(--scan-glow-mid) var(--scan-glow-mid-pos),
        var(--scan-glow-end) var(--scan-glow-end-pos)
    );
    transform: translateX(var(--scan-sweep-start));
    animation: searchSweep 1.2s linear infinite;
    opacity: 0.85;
    will-change: transform;
}

.btn-check.is-loading > * {
    position: relative;
    z-index: 1;
}

.spinner-inline {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(0, 0, 0, 0.08);
    border-top-color: var(--site-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: 0.5rem;
}

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

@keyframes searchSweep {
    from { transform: translateX(var(--scan-sweep-start)); }
    to { transform: translateX(var(--scan-sweep-end)); }
}

.loading-state {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: #ecfdf3;
    border: 1px dashed var(--site-primary);
    border-radius: 8px;
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.btn-check:hover {
    background: var(--site-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

/* Analysis Results */
.analysis-result {
    margin-top: 2rem;
    padding: 2rem;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}

.analysis-result.hidden {
    display: none;
}

.dark-mode .analysis-result,
.dark .analysis-result {
    background: var(--bg-primary);
    border-color: var(--border-primary);
}

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

.risk-badge {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.risk-low {
    background: #d1fae5;
    color: #065f46;
}

.risk-medium {
    background: #fef3c7;
    color: #92400e;
}

.risk-high {
    background: #fee2e2;
    color: #991b1b;
}

.risk-score {
    font-size: 1.125rem;
    color: var(--text-secondary);
}

.dark-mode .risk-score,
.dark .risk-score {
    color: var(--text-secondary);
}

.indicator-list {
    list-style: none;
    padding: 0;
}

.indicator-list li {
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    background: white;
    border-radius: 8px;
    border-left: 4px solid #e5e7eb;
}

.dark-mode .indicator-list li,
.dark .indicator-list li {
    background: var(--bg-secondary);
    border-left-color: var(--border-primary);
}

.indicator-list li.positive {
    border-left-color: var(--scam-safe);
    background: #f0fdf4;
    color: #065f46; /* Dark green text for light background */
}

.indicator-list li.warning {
    border-left-color: var(--scam-warning);
    background: #fefce8;
    color: #92400e; /* Dark amber text for light background */
}

.indicator-list li.danger {
    border-left-color: var(--scam-primary);
    background: #fef2f2;
    color: #991b1b; /* Dark red text for light background */
}

/* Dark mode overrides for indicators */
.dark-mode .indicator-list li.positive,
.dark .indicator-list li.positive {
    background: rgba(16, 185, 129, 0.15);
    color: #6ee7b7; /* Light green text for dark background */
}

.dark-mode .indicator-list li.warning,
.dark .indicator-list li.warning {
    background: rgba(245, 158, 11, 0.15);
    color: #fcd34d; /* Light amber text for dark background */
}

.dark-mode .indicator-list li.danger,
.dark .indicator-list li.danger {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5; /* Light red text for dark background */
}

.analysis-breakdown {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
}

.analysis-breakdown .breakdown-title {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    color: #0f172a;
}

.analysis-breakdown .breakdown-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.analysis-breakdown .breakdown-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed #e2e8f0;
    color: #475569;
}

.analysis-breakdown .breakdown-list li:last-child {
    border-bottom: none;
}

.analysis-breakdown .breakdown-label {
    font-weight: 600;
    color: #0f172a;
}

.analysis-breakdown .breakdown-detail {
    text-align: right;
    word-break: break-word;
    overflow-wrap: break-word;
}

.analysis-breakdown .breakdown-note {
    margin-top: 0.75rem;
    color: #334155;
    font-size: 0.95rem;
}

.dark-mode .analysis-breakdown,
.dark .analysis-breakdown {
    border-color: var(--border-primary);
}

.dark-mode .analysis-breakdown .breakdown-title,
.dark .analysis-breakdown .breakdown-title {
    color: var(--text-primary);
}

.dark-mode .analysis-breakdown .breakdown-list li,
.dark .analysis-breakdown .breakdown-list li {
    border-color: var(--border-primary);
    color: var(--text-secondary);
}

.dark-mode .analysis-breakdown .breakdown-label,
.dark .analysis-breakdown .breakdown-label {
    color: var(--text-primary);
}

.dark-mode .analysis-breakdown .breakdown-note,
.dark .analysis-breakdown .breakdown-note {
    color: var(--text-secondary);
}

/* Tips Section */
.tips-section {
    margin-top: 2rem;
    padding: 2rem;
    background: #f0fdf4;
    border-radius: 12px;
    border-left: 4px solid var(--site-primary);
}

.dark-mode .tips-section,
.dark .tips-section {
    background: var(--bg-secondary);
    border-color: var(--site-primary);
}

.tips-section h3 {
    margin-bottom: 1rem;
    color: #065f46;
}

.dark-mode .tips-section h3,
.dark .tips-section h3 {
    color: var(--text-primary);
}

.tips-section ul {
    list-style: none;
    padding: 0;
}

.tips-section li {
    padding: 0.75rem 0;
    color: #374151;
    position: relative;
    padding-left: 1.5rem;
}

.dark-mode .tips-section li,
.dark .tips-section li {
    color: var(--text-primary);
}

.tips-section li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: var(--site-primary);
    font-weight: bold;
}

/* Responsive Design */
@media (max-width: 768px) {
    .checker-card {
        padding: 1.5rem;
    }
    
    .checker-card h2 {
        font-size: 1.5rem;
    }
    
    .checker-tabs {
        flex-direction: column;
    }
    
    .tab-btn {
        width: 100%;
    }
    
    .input-group {
        flex-direction: column;
    }
    
    .input-group input {
        min-width: 100%;
    }
}

/* Small Mobile (≤480px) */
@media (max-width: 480px) {
  .checker-card {
    padding: 1rem;
  }

  .checker-card h2 {
    font-size: 1.25rem;
  }

  .tab-btn {
    font-size: 0.875rem;
    padding: 0.5rem;
  }
}

/* TV / Large screens (≥1920px) */
@media (min-width: 1920px) {
  .checker-card {
    padding: 3rem;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* =============================================
   CONTENT SECTIONS
   ============================================= */

/* Section layout utilities */
.info-section--about {
    background: var(--bg-secondary);
    padding: var(--space-fluid-xl, 3rem) var(--space-fluid-md, 1.5rem);
}

.info-section--howto {
    background: var(--bg-primary);
    padding: var(--space-fluid-xl, 3rem) var(--space-fluid-md, 1.5rem);
}

.info-section--green {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    padding: var(--space-fluid-xl, 3rem) var(--space-fluid-md, 1.5rem);
    border-top: 4px solid var(--site-primary);
}

.info-section--warning {
    background: linear-gradient(135deg, #fef9c3 0%, #fef3c7 100%);
    padding: var(--space-fluid-xl, 3rem) var(--space-fluid-md, 1.5rem);
    border-top: 4px solid #f59e0b;
}

/* FAQ card (info cards with left border) */
.faq-card {
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--bg-secondary);
    border-radius: 0.75rem;
    border-left: 4px solid var(--site-primary);
}

.faq-card__container {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.faq-card__question {
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-size: 1.25rem;
}

.faq-card__answer {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 0;
}

/* Feature card background override */
.feature-card--bg-white {
    background: var(--bg-primary);
}

/* Report scam card special styling */
.feature-card--report {
    background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
    border: 2px solid #f59e0b;
}

/* Dark mode for content sections */
html.dark .info-section--green,
html.dark-mode .info-section--green,
html[data-theme="dark"] .info-section--green {
    background: linear-gradient(135deg, var(--dm-bg-primary) 0%, #0a1f15 100%);
    border-top-color: var(--site-primary);
}

html.dark .info-section--warning,
html.dark-mode .info-section--warning,
html[data-theme="dark"] .info-section--warning {
    background: linear-gradient(135deg, #1a1714 0%, #1f1d0a 100%);
    border-top-color: #f59e0b;
}

html.dark .info-section--about,
html.dark-mode .info-section--about,
html[data-theme="dark"] .info-section--about {
    background: var(--dm-bg-secondary);
}

html.dark .info-section--howto,
html.dark-mode .info-section--howto,
html[data-theme="dark"] .info-section--howto {
    background: var(--dm-bg-primary);
}

html.dark .faq-card,
html.dark-mode .faq-card,
html[data-theme="dark"] .faq-card {
    background: var(--dm-bg-secondary);
    border-left-color: var(--site-primary);
}

html.dark .faq-card__question,
html.dark-mode .faq-card__question,
html[data-theme="dark"] .faq-card__question {
    color: var(--dm-text-primary);
}

html.dark .faq-card__answer,
html.dark-mode .faq-card__answer,
html[data-theme="dark"] .faq-card__answer {
    color: var(--dm-text-secondary);
}

html.dark .feature-card--bg-white,
html.dark-mode .feature-card--bg-white,
html[data-theme="dark"] .feature-card--bg-white {
    background: var(--dm-bg-secondary);
}

html.dark .feature-card--report,
html.dark-mode .feature-card--report,
html[data-theme="dark"] .feature-card--report {
    background: rgba(245, 158, 11, 0.15);
    border-color: rgba(245, 158, 11, 0.4);
}