/* Scoped; no collisions. Light/Dark via variables on body[data-theme]. */
.tizz-home{
    /* Core palette */
    --tz-bg:#FFFFFF !important;
    --tz-fg:#0F1218;
    --tz-ac:#11B36A;              /* legacy accent (kept for backward compat) */
    --tz-ac-ink:#0B704B;
    --tz-line:#E6E8EC;
    --tz-muted:#6C7381;
    --tz-heroBg:#FFFFFF; !important;

    /* Surfaces for cards/inputs (ensure strong contrast) */
    --tz-surface:#FFFFFF !important;
    --tz-input:#FFFFFF !important;
    --tz-hairline:#D7DCE3;

    /* App accent */
    --tz-accent:#22B57C;

    /* Header height */
    --tz-header-h:64px;

    /* === HERO IMAGE (light default) === */
    --tz-hero-img: url('/images/homepage03-light.png');

    color:var(--tz-fg);
    background:var(--tz-bg);
    min-height:100svh;
    display:flex;
    flex-direction:column;

    font-family:"Inter","Helvetica Neue","Helvetica","Segoe UI",ui-sans-serif,sans-serif;
}
.tizz-home *{box-sizing:border-box}

/* Dark theme overrides */
.tizz-home[data-theme="dark"]{
    --tz-bg:#0B0F14 !important;
    --tz-fg:#E6E9F1;
    --tz-ac:#13C173;
    --tz-ac-ink:#0D8458;
    --tz-line:#2B303A;
    --tz-muted:#9DA6B5;
    --tz-heroBg:#12161C !important;

    --tz-surface:#0F141B !important;
    --tz-input:#151B24 !important;
    --tz-hairline:#2A303A;

    --tz-accent:#1FA971;

    /* swap hero image in dark */
    --tz-hero-img: url('/images/homepage03-dark.png');
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
    .tizz-home:not([data-theme="light"]) {
        --tz-bg:#0B0F14 !important;
        --tz-fg:#E6E9F1;
        --tz-line:#2B303A;
        --tz-muted:#9DA6B5;
        --tz-surface:#0F141B !important;
        --tz-input:#151B24 !important;
        --tz-hero-img: url('/images/homepage03-dark.png');
    }
}

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

/* Header */
.tz-header{ position:sticky; top:0; background:var(--tz-bg); border-bottom:1px solid var(--tz-line); z-index:10; width:100%; }
.tz-nav{ display:flex; align-items:center; justify-content:space-between; width:100%; padding-inline:0 }

/* BRAND — bigger “Tizz” */
.tz-brand{
    display:inline-block;
    padding:0 16px;
    height:var(--tz-header-h);
    line-height:var(--tz-header-h);
    font-weight:800;
    font-size:clamp(24px, 2.2vw, 30px);
    letter-spacing:-0.02em;
    color:inherit;
    text-decoration:none;
    font-family:"Sora","Manrope","Inter",Arial,sans-serif;
}

/* Right side of header */
.tz-nav-right{ display:flex; align-items:center; gap:12px }
.tz-link{ display:inline-block; padding:0 16px; height:var(--tz-header-h); line-height:var(--tz-header-h); color:inherit; text-decoration:none; opacity:.9 }
.tz-link:hover{ opacity:1; text-decoration:underline }

/* spacer to keep layout when hiding Login on /login & /register */
.tz-login-spacer{ visibility:hidden; width:68px; }

/* Theme control with labels */
.tz-theme-control{ display:inline-flex; align-items:center; gap:8px }
.tz-switch-label{ font:600 13px/1 "Inter",ui-sans-serif,sans-serif; opacity:.6; user-select:none }
.tizz-home[data-theme="light"] .tz-label-light{ opacity:1 }
.tizz-home[data-theme="light"] .tz-label-dark{ opacity:.45 }
.tizz-home[data-theme="dark"] .tz-label-dark{ opacity:1 }
.tizz-home[data-theme="dark"] .tz-label-light{ opacity:.45 }

/* Toggle switch */
.tz-switch-input{ position:absolute; opacity:0; pointer-events:none }
.tz-switch{
    --w: 46px;
    --h: 26px;
    --p: 2px;
    position:relative;
    width:var(--w);
    height:var(--h);
    border-radius:999px;
    background:linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.02));
    border:1px solid var(--tz-line);
    cursor:pointer;
    display:inline-block;
    vertical-align:middle;
}
.tizz-home[data-theme="dark"] .tz-switch{
    background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05));
}
.tz-switch::after{
    content:"";
    position:absolute;
    left:var(--p);
    top:var(--p);
    width:calc(var(--h) - var(--p)*2);
    height:calc(var(--h) - var(--p)*2);
    border-radius:50%;
    background:var(--tz-bg);
    box-shadow:0 1px 2px rgba(0,0,0,.2);
    transition:transform .18s ease;
}
.tz-switch-input:checked + .tz-switch{
    border-color:var(--tz-accent);
    background:var(--tz-accent);
}
.tz-switch-input:checked + .tz-switch::after{
    transform:translateX(calc(var(--w) - var(--h)));
    background:#FFFFFF;
}

/* Containers */
.tz-container{ max-width:100%; margin-inline:auto; padding-inline:0px }
.tz-container-content{ max-width:1200px; margin-inline:auto; padding-inline:20px }
.tz-main{ flex:1 0 auto; padding-block:28px 56px }

/* Hero */
.tz-hero{ display:grid; grid-template-columns:1.15fr .85fr; gap:28px; align-items:start }
.tz-hero-copy{ padding-block:24px }
.tz-hero-title{ font-size:clamp(30px,3.6vw,44px); line-height:1.1; margin:0 0 12px; font-family:"Manrope","Inter","Avenir Next",system-ui,sans-serif }
.tz-accent{ color:var(--tz-accent) }
.tz-hero-lede{ font-size:clamp(16px,1.6vw,18px); color:#111A28; opacity:.9; margin:0 0 18px; max-width:62ch }
.tizz-home[data-theme="dark"] .tz-hero-lede,
.tizz-home[data-theme="dark"] .tz-text,
.tizz-home[data-theme="dark"] .tz-points li{ color:var(--tz-fg); opacity:.92 }

/* CTAs */
.tz-cta{ display:flex; gap:12px; margin:8px 0 6px }
.tz-btn{ display:inline-flex; align-items:center; justify-content:center; min-width:120px; height:44px; padding:0 18px; border-radius:12px; border:1px solid transparent; text-decoration:none; font-weight:700; font-family:"Inter","Helvetica Neue","Helvetica","Segoe UI",ui-sans-serif,sans-serif }
.tz-btn-primary{ background:var(--tz-accent); color:#FFFFFF }
.tz-btn-primary:hover{ background:color-mix(in srgb, var(--tz-accent) 86%, #000) }
.tz-btn-ghost{ background:var(--tz-bg); border-color:var(--tz-line); color:inherit }
.tz-btn-ghost:hover{ border-color:#CAD4E2 }

/* Points */
.tz-points{ margin:14px 0 0; padding:0; list-style:none; display:grid; gap:6px }
.tz-points li{ position:relative; padding-left:22px; color:#111A28 }
.tz-points li::before{ content:""; position:absolute; left:0; top:.55em; width:10px; height:10px; border-radius:999px; background:var(--tz-accent) }

/* Visual — CSS picks the image via --tz-hero-img which changes with [data-theme] */
.tz-hero-visual{
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:16px;
    background:none;
    min-height:300px; /* keeps the column balanced even before the image shows */
}
.tz-hero-graphic{
    width:438px;
    height:300px;
    border-radius:16px;
    background-image: var(--tz-hero-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Feature strip with full-bleed lines */
.tz-strip{
    position:relative; margin-top:28px; padding:22px 20px;
    display:grid; grid-template-columns:repeat(3,1fr); gap:20px
}
.tz-strip::before,
.tz-strip::after{
    content:""; position:absolute; left:50%; transform:translateX(-50%);
    width:100vw; height:1px; background:var(--tz-line)
}
.tz-strip::before{ top:0 } .tz-strip::after{ bottom:0 }
.tz-h2{ font-size:18px; margin:0 0 6px }
.tz-text{ margin:0; color:#111A28; opacity:.9 }

/* Footer */
.tz-footer{ border-top:1px solid var(--tz-line); background:var(--tz-bg); width:100% }
.tz-footer-inner{ height:60px; display:flex; align-items:center; justify-content:flex-start }
.tz-muted{ color:var(--tz-muted); font-size:14px }

/* Responsive */
@media (max-width:900px){
    .tz-hero{ grid-template-columns:1fr }
    .tz-hero-visual{ order:-1 }
    .tz-strip{ grid-template-columns:1fr }
}

/* === Language Select – resilient styling (keeps custom look in any theme) === */
.tz-lang-control{display:inline-flex;align-items:center}
.tz-select{position:relative;display:inline-flex;align-items:center}

/* strong specificity + !important to beat resets/framework defaults */
.tz-header .tz-select-input,
.tz-nav .tz-select-input,
select#langSelect,
select#lang{
    -webkit-appearance:none !important;
    -moz-appearance:none !important;
    appearance:none !important;

    background:var(--tz-surface) !important;
    color:var(--tz-fg) !important;
    border:1px solid var(--tz-hairline) !important;

    border-radius:999px !important;
    height:34px !important;
    padding:.45rem 1.8rem .45rem .65rem !important;

    font:inherit !important;
    font-size:.875rem !important;
    line-height:1.2 !important;

    cursor:pointer !important;
    background-image:none !important; /* Safari default arrow */
    box-shadow:0 1px 0 rgba(0,0,0,.02) inset !important;
    transition:border-color .15s ease, box-shadow .15s ease, background-color .2s ease !important;
}
.tz-header .tz-select-input:focus,
.tz-nav .tz-select-input:focus,
select#langSelect:focus,
select#lang:focus{
    outline:none !important;
    border-color:color-mix(in srgb, var(--tz-accent) 55%, transparent) !important;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--tz-accent) 18%, transparent) !important;
}
.tz-select::after{
    content:"";
    position:absolute;
    right:.6rem;
    top:50%;
    width:.55rem;height:.55rem;
    margin-top:-.35rem;
    border-right:2px solid var(--tz-muted);
    border-bottom:2px solid var(--tz-muted);
    transform:rotate(45deg);
    pointer-events:none;
}
.tz-select-input::-ms-expand{display:none}
body[data-theme="dark"] .tz-select::after{
    border-right-color:var(--tz-muted);
    border-bottom-color:var(--tz-muted);
}
.tz-nav-right .tz-lang-control{margin-left:12px}

/* === Wider hero zone === */
.tz-hero{
    padding-block: 6rem 5rem;                 /* more vertical breathing room */
    min-height: clamp(360px, 82vh, 580px);     /* taller on large screens, sensible floor/ceiling */
}
@media (max-width:900px){
    .tz-hero{
        padding-block: 4rem 3rem;
        min-height: clamp(520px, 78vh, 500px);
    }
}

/* ---------- Auth (login/register) ---------- */
.tz-auth-wrap { display:flex; justify-content:center; padding: clamp(2rem, 6vw, 4rem) 0; }
.tz-auth-card {
    width: min(480px, 100%);
    background: var(--tz-surface) !important;
    border: 1px solid var(--tz-hairline);
    border-radius: 16px;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    box-shadow: 0 6px 24px rgba(2,6,12,.06);
}
body[data-theme="dark"] .tz-auth-card { box-shadow: 0 6px 24px rgba(0,0,0,.35); }

.tz-auth-title {
    margin: 0 0 1rem;
    font-weight: 800;
    font-size: 1.5rem;
    letter-spacing: -0.01em;
}

.tz-field { display:flex; flex-direction:column; gap:.375rem; margin:.75rem 0; }
.tz-label { font-weight: 600; font-size: .95rem; }

.tz-input {
    border: 1px solid var(--tz-hairline);
    border-radius: 12px;
    background: var(--tz-input) !important;
    color: var(--tz-fg);
    padding: .7rem .9rem;
    outline: none;
}
.tz-input:focus {
    border-color: color-mix(in srgb, var(--tz-accent) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tz-accent) 20%, transparent);
}

.tz-form-actions { margin-top: .75rem; display:flex; gap:.5rem; align-items:center; }
.tz-auth-meta { margin-top: .75rem; color: var(--tz-muted); }
.tz-alert { border-radius: 12px; padding: .75rem .9rem; margin-bottom: .5rem; }
.tz-alert-error {
    border: 1px solid color-mix(in srgb, var(--tz-accent) 60%, #b00020);
    background: color-mix(in srgb, var(--tz-accent) 12%, transparent);
    color: var(--tz-fg);
}

/* Aggressive autofill override for Tizz theme */
.tz-input:-webkit-autofill,
.tz-input:-webkit-autofill:hover,
.tz-input:-webkit-autofill:focus,
.tz-input:-webkit-autofill:active {
    -webkit-text-fill-color: var(--tz-fg) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--tz-input) inset !important;
    box-shadow: 0 0 0 1000px var(--tz-input) inset !important;
    background-color: var(--tz-input) !important;
    background-image: none !important;
    color: var(--tz-fg) !important;
    border-color: var(--tz-hairline) !important;
    transition: background-color 9999s ease-out 0s !important;
    caret-color: var(--tz-fg) !important;
}

/* Remove browser autocomplete dropdown button */
.tz-input::-webkit-credentials-auto-fill-button,
.tz-input::-webkit-list-button,
.tz-input::-webkit-calendar-picker-indicator {
    visibility: hidden !important;
    display: none !important;
    pointer-events: none !important;
    position: absolute !important;
    right: 0 !important;
    opacity: 0 !important;
}

/* Override autofill focus states */
.tz-input:-webkit-autofill:focus {
    border-color: color-mix(in srgb, var(--tz-accent) 55%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--tz-accent) 20%, transparent), 0 0 0 1000px var(--tz-input) inset !important;
}

/* Style Symfony form selects to match theme */
.tz-auth-card select,
.tz-form select,
form select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    border: 1px solid var(--tz-hairline) !important;
    border-radius: 12px !important;
    background: var(--tz-input) !important;
    color: var(--tz-fg) !important;
    padding: .7rem 2.5rem .7rem .9rem !important;
    font: inherit !important;
    font-size: .95rem !important;
    line-height: 1.2 !important;
    width: 100% !important;

    /* Custom dropdown arrow */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 1.25rem !important;
    cursor: pointer !important;
}

/* Style Symfony form selects to match theme */
.tz-auth-card select,
.tz-form select,
form select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;

    border: 1px solid var(--tz-hairline) !important;
    border-radius: 12px !important;
    background: var(--tz-input) !important;
    color: var(--tz-fg) !important;
    padding: .7rem 2.5rem .7rem .9rem !important;
    font: inherit !important;
    font-size: .95rem !important;
    line-height: 1.4 !important;
    min-height: 48px !important;
    width: 100% !important;

    /* Custom dropdown arrow */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right .75rem center !important;
    background-size: 1.25rem !important;
    cursor: pointer !important;
}

.tz-footer-inner {
    height:60px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.tz-footer-links {
    display:flex;
    align-items:center;
    gap:16px;
}
.tz-footer-link {
    color:var(--tz-muted);
    font-size:14px;
    text-decoration:none;
    margin: 0 20px 0 10px;
}
.tz-footer-link:hover {
    color:var(--tz-fg);
    text-decoration:underline;
}
.tz-footer-links .tz-footer-link:not(:last-child)::after {
    content:"•";
    color:var(--tz-line);
    margin-left:16px;
    font-weight:bold;
}

.tz-password-strength {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.tz-strength-bar {
    height: 4px;
    background: var(--tz-hairline);
    border-radius: 2px;
    overflow: hidden;
}

.tz-strength-fill {
    height: 100%;
    width: 0;
    transition: width 0.3s ease, background 0.3s ease;
    border-radius: 2px;
}

/* Form validation errors */
.tz-field ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0 0;
}

.tz-field ul li {
    color: #dc2626;
    font-size: 0.8125rem;
    font-weight: 500;
    padding: 0.375rem 0.625rem;
    background: rgba(220, 38, 38, 0.08);
    border-left: 3px solid #dc2626;
    border-radius: 4px;
    margin-bottom: 0.375rem;
    line-height: 1.4;
}

.tz-field ul li:last-child {
    margin-bottom: 0;
}

/* Dark theme error styling */
[data-theme="dark"] .tz-field ul li,
.dark .tz-field ul li {
    color: #fca5a5;
    background: rgba(220, 38, 38, 0.15);
    border-left-color: #ef4444;
}


/* ========== TOOLS PAGE STYLES ========== */

/* Page shell */
.tz-container.tools-page{max-width:1200px;margin:2rem auto;padding-inline:20px}
.tools-hero-title{margin:0;padding:0 0 30px}
.tools-hero-title h1{font-family:"Sora",ui-sans-serif;font-weight:800;font-size:clamp(1.5rem,2.5vw,2rem);line-height:1.2;margin:0;padding:30px 0}
.tools-hero-title .lede{color:var(--tz-muted);margin:0}
.tools-section{margin:1.25rem 0 2rem}
.sec-title{font-weight:700;margin:0 0 .75rem}

/* Tool cards - left to right flow */
.cards-grid{display:flex;flex-wrap:wrap;gap:1rem;align-items:stretch;justify-content:flex-start}
.tool-card{
    width:260px;
    max-width:100%;
    border:1px solid var(--tz-hairline);
    border-radius:12px;
    overflow:hidden;
    background:var(--tz-surface);
    display:flex;
    flex-direction:column;
    box-shadow:0 1px 2px rgba(16,24,40,.04);
    transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease
}
.tool-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(16,24,40,.1)}
.tool-card.disabled{opacity:.35}
.tool-card.is-dim{opacity:.6}
.tool-card .cover{display:block;aspect-ratio:16/9;background:var(--tz-input)}
.tool-card .cover img{width:100%;height:100%;object-fit:cover;display:block}
.tool-card .noimg{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
    font-weight:800;
    font-size:2rem;
    color:var(--tz-muted)
}
.tool-card .content{padding:.75rem;display:flex;flex-direction:column;gap:.5rem;color:var(--tz-fg)}
.tool-card .t{margin:0;font-weight:700}
.tool-card .d{margin:0;opacity:.85;font-size:.95rem}
.tool-card .meta{margin-top:auto;display:flex;justify-content:flex-end}

/* Button styling for tools */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:.4rem .7rem;
    border-radius:.5rem;
    text-decoration:none;
    border:1px solid var(--tz-hairline);
    background:var(--tz-surface);
    color:var(--tz-fg);
    transition:all .15s ease
}
.btn-sm{font-size:.875rem}
.btn.disabled{opacity:.6;pointer-events:none}
.btn:not(.disabled):hover{border-color:var(--tz-accent);background:var(--tz-accent);color:#fff}

/* Dark mode for tools */
[data-theme="dark"] .tools-hero-title h1{color:var(--tz-fg)}
[data-theme="dark"] .tools-hero-title .lede{color:var(--tz-muted)}
[data-theme="dark"] .sec-title{color:var(--tz-fg)}
[data-theme="dark"] .tool-card{background:var(--tz-surface);border-color:var(--tz-hairline)}
[data-theme="dark"] .tool-card:hover{
    background:color-mix(in srgb, var(--tz-surface) 92%, #fff);
    border-color:color-mix(in srgb, var(--tz-hairline) 70%, #fff);
    box-shadow:0 6px 16px rgba(0,0,0,.3)
}
[data-theme="dark"] .tool-card.disabled{opacity:.25}
[data-theme="dark"] .tool-card.is-dim{opacity:.4}
[data-theme="dark"] .tool-card .content{color:var(--tz-fg)}
[data-theme="dark"] .tool-card .t{color:var(--tz-fg)}
[data-theme="dark"] .tool-card .d{color:var(--tz-muted)}
[data-theme="dark"] .btn{background:color-mix(in srgb, var(--tz-surface) 90%, #fff);border-color:var(--tz-hairline);color:var(--tz-fg)}
[data-theme="dark"] .btn:not(.disabled):hover{background:var(--tz-accent);border-color:var(--tz-accent);color:#fff}
[data-theme="dark"] .btn.disabled{opacity:.6}

/* Responsive */
@media (max-width:640px){
    .tool-card{width:100%}
}