/* =========================================

   STYLY PRO LOGIN / REGISTRACI A NAVIGACI (login.css)

   ========================================= */



/* --- FIREMNÍ IDENTITA AIRA.EXPERT --- */

:root {

    --color-primary-dark: #004d40;

    --color-primary-soft: #00796b;

    --color-gold: #d4af37;

    --color-gold-hover: #b8952b;

    --color-bg-light: #f8f9fa;

    --color-text-dark: #1f2937;

    --color-text-muted: #6b7280;

    --color-border: #e5e7eb;

    --color-danger: #dc2626;

    --color-success: #16a34a;

    /* Aliasy pro zpětnou kompatibilitu s navigací */

    --primary: #004d40;

    --accent: #d4af37;

    --dark: #111111;

}



* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;

}



body {

    background: linear-gradient(135deg, var(--color-primary-dark) 0%, #002720 100%) !important;

    min-height: 100vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 20px;

    color: var(--color-text-dark);

}



/* Hlavní kontejner */

.auth-container {

    background: #ffffff;

    width: 100%;

    max-width: 460px;

    border-radius: 20px;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

    overflow: hidden;

    position: relative;

    animation: fadeIn 0.4s ease-out;

}



@keyframes fadeIn {

    from { opacity: 0; transform: translateY(15px); }

    to { opacity: 1; transform: translateY(0); }

}



/* Hlavička s logem */

.auth-header {

    background: var(--color-bg-light);

    padding: 28px 24px 20px 24px;

    text-align: center;

    border-bottom: 1px solid var(--color-border);

}



.logo-circle {

    width: 60px;

    height: 60px;

    background: var(--color-gold);

    color: var(--color-primary-dark);

    font-size: 32px;

    font-weight: 800;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 12px auto;

    box-shadow: 0 6px 15px rgba(212, 175, 55, 0.4);

}



.auth-header h1 {

    color: var(--color-primary-dark);

    font-size: 22px;

    letter-spacing: 2px;

    text-transform: uppercase;

}



.auth-header p {

    color: var(--color-text-muted);

    font-size: 13px;

    margin-top: 4px;

}



/* Přepínač záložek Přihlásit / Registrovat */

.tab-switch {

    display: flex;

    background: #eef2f5;

    border-bottom: 1px solid var(--color-border);

}



.tab-btn {

    flex: 1;

    padding: 14px;

    border: none;

    background: transparent;

    font-weight: 700;

    font-size: 14px;

    color: var(--color-text-muted);

    cursor: pointer;

    transition: all 0.2s ease;

}



.tab-btn.active {

    background: #ffffff;

    color: var(--color-primary-dark);

    border-bottom: 3px solid var(--color-gold);

}



/* Tělo formuláře */

.auth-body {

    padding: 28px 24px;

}



/* Sociální tlačítka (Google, Facebook) */

.social-login-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-bottom: 20px;

}



.btn-social {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 10px 14px;

    border: 1px solid var(--color-border);

    border-radius: 10px;

    background: #ffffff;

    font-size: 13px;

    font-weight: 600;

    color: var(--color-text-dark);

    cursor: pointer;

    transition: background 0.2s, border-color 0.2s;

}



.btn-social:hover {

    background: #f3f4f6;

    border-color: #d1d5db;

}



.btn-social.google i { color: #ea4335; }

.btn-social.facebook i { color: #1877f2; }



/* Oddělovač "nebo" */

.divider {

    display: flex;

    align-items: center;

    text-align: center;

    color: var(--color-text-muted);

    font-size: 12px;

    margin-bottom: 20px;

}



.divider::before, .divider::after {

    content: '';

    flex: 1;

    border-bottom: 1px solid var(--color-border);

}



.divider span {

    padding: 0 10px;

}



/* Formulářová pole */

.form-group {

    margin-bottom: 16px;

    position: relative;

}



.form-group label {

    display: block;

    font-size: 12px;

    font-weight: 700;

    color: var(--color-text-dark);

    margin-bottom: 6px;

    text-transform: uppercase;

}



.form-control, select, textarea {

    width: 100%;

    padding: 12px 14px;

    border: 1.5px solid var(--color-border);

    border-radius: 10px;

    font-size: 14px;

    outline: none;

    transition: border-color 0.2s, box-shadow 0.2s;

    background: #fff;

}



.form-control:focus, select:focus, textarea:focus {

    border-color: var(--color-primary-soft);

    box-shadow: 0 0 0 3px rgba(0, 121, 107, 0.15);

}



/* Zapomenuté heslo */

.forgot-password-wrapper {

    text-align: right;

    margin-top: -6px;

    margin-bottom: 18px;

}



.link-forgot {

    color: var(--color-primary-soft);

    font-size: 13px;

    font-weight: 600;

    text-decoration: none;

    background: none;

    border: none;

    cursor: pointer;

}



.link-forgot:hover {

    text-decoration: underline;

}



/* Zaškrtávátka (Checkboxy) */

.checkbox-group, .checkbox-line {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 14px;

    font-size: 13px;

    color: #4b5563;

    line-height: 1.4;

}



.checkbox-group input[type="checkbox"], .checkbox-line input[type="checkbox"] {

    width: 18px;

    height: 18px;

    margin-top: 2px;

    accent-color: var(--color-primary-dark);

    cursor: pointer;

}



.link-gdpr-trigger {

    color: var(--color-primary-soft);

    font-weight: 700;

    text-decoration: underline;

    cursor: pointer;

    background: none;

    border: none;

    padding: 0;

    font-size: 13px;

}



/* Hlavní Odesílací Tlačítko */

.btn-submit, .cta-btn {

    width: 100%;

    background: var(--color-gold);

    color: var(--color-primary-dark);

    border: none;

    padding: 14px;

    font-size: 15px;

    font-weight: 800;

    border-radius: 10px;

    cursor: pointer;

    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);

    transition: background 0.2s, transform 0.1s;

    margin-top: 8px;

}



.btn-submit:hover, .cta-btn:hover {

    background: var(--color-gold-hover);

}



.btn-submit:active, .cta-btn:active {

    transform: scale(0.99);

}



/* Klientský panel (dotazníky po registraci) */

.client-panel {

    display: none;

    background: #ffffff;

    width: 100%;

    max-width: 500px;

    border-radius: 20px;

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

    padding: 30px;

}



.client-panel.active {

    display: block;

    animation: fadeIn 0.4s ease-out;

}



/* Chybové a úspěšné hlášky */

.alert {

    padding: 12px 14px;

    border-radius: 8px;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 16px;

    display: none;

}



.alert-danger {

    background: #fef2f2;

    color: var(--color-danger);

    border: 1px solid #fecaca;

}



.alert-success {

    background: #f0fdf4;

    color: var(--color-success);

    border: 1px solid #bbf7d0;

}



/* --- GDPR VYSUNOVACÍ PUSH-UP MODAL OKNO --- */

.modal-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.6);

    backdrop-filter: blur(4px);

    z-index: 1000;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.3s ease;

}



.modal-overlay.active {

    opacity: 1;

    pointer-events: auto;

}



.modal-card {

    background: #ffffff;

    width: 100%;

    max-width: 550px;

    max-height: 80vh;

    border-top-left-radius: 24px;

    border-top-right-radius: 24px;

    padding: 24px;

    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.3);

    transform: translateY(100%);

    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);

    display: flex;

    flex-direction: column;

    overflow: hidden;

}



.modal-overlay.active .modal-card {

    transform: translateY(0);

}



.modal-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding-bottom: 14px;

    border-bottom: 1px solid var(--color-border);

}



.modal-header h3 {

    color: var(--color-primary-dark);

    font-size: 18px;

}



.btn-close-modal {

    background: var(--color-bg-light);

    border: none;

    width: 32px;

    height: 32px;

    border-radius: 50%;

    cursor: pointer;

    font-size: 16px;

    color: var(--color-text-muted);

}



.modal-content-scroll {

    overflow-y: auto;

    padding: 16px 0;

    font-size: 13px;

    color: #4b5563;

    line-height: 1.6;

}



.modal-content-scroll h4 {

    color: var(--color-primary-dark);

    margin: 12px 0 4px 0;

}



.modal-footer {

    padding-top: 14px;

    border-top: 1px solid var(--color-border);

}



/* --- NAVIGACE A MENU --- */

nav {

    background: var(--primary);

    color: #fff;

    padding: 15px 30px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    position: sticky;

    top: 0;

    width: 100%;

    z-index: 1000;

    box-shadow: 0 2px 10px rgba(0,0,0,0.1);

}



.logo-wrap {

    display: flex;

    align-items: center;

    gap: 10px;

    font-size: 1.5rem;

    font-weight: bold;

    color: var(--accent);

    text-decoration: none;

}



.logo-wrap img {

    height: 40px;

}



.menu-btn {

    cursor: pointer;

    z-index: 1001;

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.menu-btn span {

    display: block;

    width: 30px;

    height: 3px;

    background-color: var(--accent);

    transition: 0.3s;

}



.menu-btn.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); background-color: white; }

.menu-btn.active span:nth-child(2) { opacity: 0; }

.menu-btn.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); background-color: white; }



.menu-overlay {

    position: fixed;

    top: 0; left: 0; width: 100%; height: 100vh;

    background: rgba(0, 77, 64, 0.98);

    display: flex; flex-direction: column; justify-content: center; align-items: center;

    clip-path: circle(0px at calc(100% - 55px) 35px);

    transition: clip-path 0.6s ease-in-out;

    z-index: 999;

}



.menu-overlay.active { clip-path: circle(150% at calc(100% - 55px) 35px); }



.menu-overlay a { 

    color: white; 

    text-decoration: none; 

    font-size: 30px; 

    margin: 14px 0; 

    font-weight: 600; 

    transition: color 0.3s; 

}



.menu-overlay a:hover { color: var(--accent); }



/* --- HERO SE SLIDESHOW POZADÍM --- */

.hero {

    position: relative; height: 100vh; min-height: 640px;

    display: flex; align-items: center; justify-content: center;

    text-align: center; color: white; overflow: hidden; background-color: var(--dark);

    width: 100%;

}



.hero-slideshow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }



.hero-slideshow .slide {

    position: absolute; inset: 0; background-size: cover; background-position: center;

    opacity: 0; animation: slideFade 24s infinite;

}



.hero-slideshow .slide:nth-child(1) { background-image: url('https://www.aira.expert/img/1784262214295.png'); animation-delay: 0s; }

.hero-slideshow .slide:nth-child(2) { background-image: url('https://www.aira.expert/img/1784262349666.png'); animation-delay: 8s; }

.hero-slideshow .slide:nth-child(3) { background-image: url('https://www.aira.expert/img/1784233327496.png'); animation-delay: 16s; }



@keyframes slideFade { 0%{opacity:0;} 5%{opacity:0.35;} 28%{opacity:0.35;} 33%{opacity:0;} 100%{opacity:0;} }



.hero::before {

    content: ''; position: absolute; inset: 0;

    background: linear-gradient(rgba(0, 77, 64, 0.82), rgba(0, 25, 18, 0.88)); z-index: 1; pointer-events: none;

}



.hero-content { position: relative; z-index: 2; max-width: 900px; padding: 0 20px; animation: fadeIn 1.6s ease; }

.hero-eyebrow { display: inline-block; letter-spacing: 3px; font-size: 0.85rem; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; font-weight: 600; }

.hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin-bottom: 20px; text-shadow: 2px 2px 10px rgba(0,0,0,0.5); font-weight: 700; }

.hero p { font-size: clamp(1rem, 2vw, 1.25rem); margin-bottom: 40px; text-shadow: 1px 1px 5px rgba(0,0,0,0.5); color: #eef3f1; }



/* --- AI CHATBOT --- */

.ai-chat-btn { 

    position: fixed; 

    bottom: 20px; 

    right: 20px; 

    width: 60px; 

    height: 60px; 

    background-color: var(--accent); 

    border-radius: 50%; 

    display: flex; 

    align-items: center; 

    justify-content: center; 

    box-shadow: 0 4px 15px rgba(0,0,0,0.3); 

    cursor: pointer; 

    z-index: 9997; 

    border: none; 

    transition: transform 0.3s ease; 

}

.ai-chat-btn svg { width: 30px; height: 30px; fill: #fff; }

.ai-chat-btn:hover { transform: scale(1.08); background-color: var(--color-gold-hover); }



.ai-chat-window { 

    position: fixed; 

    bottom: 90px; 

    right: 20px; 

    width: 350px; 

    height: 450px; 

    background: #ffffff; 

    border-radius: 12px; 

    box-shadow: 0 10px 40px rgba(0,0,0,0.2); 

    display: flex; 

    flex-direction: column; 

    z-index: 9998; 

    border: 1px solid #ddd; 

    overflow: hidden; 

    opacity: 0; 

    visibility: hidden; 

    transform: translateY(20px) scale(0.95); 

    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 

    transform-origin: bottom right; 

}

.ai-chat-window.active { opacity: 1; visibility: visible; transform: translateY(0) scale(1); } 



.ai-chat-header { 

    background: var(--primary); 

    color: #ffffff; 

    padding: 15px; 

    display: flex; 

    justify-content: space-between; 

    align-items: center; 

    border-bottom: 2px solid var(--accent); 

    font-weight: bold; 

}

.ai-chat-header button { background: none; border: none; color: #fff; font-size: 1.2rem; cursor: pointer; }



.ai-chat-body { 

    flex: 1; 

    padding: 15px; 

    overflow-y: auto; 

    display: flex; 

    flex-direction: column; 

    gap: 10px; 

    background: #f9f9f9; 

}

.chat-msg { padding: 10px 15px; border-radius: 15px; max-width: 85%; font-size: 0.9rem; }

.msg-ai { background: #e0e0e0; align-self: flex-start; border-bottom-left-radius: 0; color: #333; }

.msg-user { background: var(--primary); color: #fff; align-self: flex-end; border-bottom-right-radius: 0; }



.ai-chat-input-area { display: flex; padding: 10px; background: #fff; border-top: 1px solid #eee; }

.ai-chat-input-area input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 20px; outline: none; }

.ai-chat-input-area button { 

    background: var(--accent); 

    color: #fff; 

    border: none; 

    width: 40px; 

    height: 40px; 

    border-radius: 50%; 

    margin-left: 10px; 

    cursor: pointer; 

    font-weight: bold; 

}