/*
 * Stopy v srdci v2.0 – auth.css
 * Zdroj: auth-tabs.css + inline <style> z verify.php, update_credentials.php
 */

/* =====================================================================
 * AUTH-TABS – auth-tabs.css
 * ===================================================================== */
/* ====== Izolované styly pro přepínatelné záložky v auth.php ====== */
/* Všechny selektory jsou omezeny na specifické rodičovské kontejnery, 
   aby nemohly ovlivnit jiné části webu */

/* Základní izolační třída - měla by být aplikována na element obsahující 
   všechny přihlašovací komponenty */
.auth-page-container {
  /* Neobsahuje žádné globální styly, pouze slouží jako namespace */
  font-size: 1.05rem;
}

/* Kontejner pro záložky - nastavuje design horních přepínačů */
.auth-page-container .auth-tabs {
  display: flex;
  width: 100%;
  margin-bottom: 25px;
  position: relative;
  gap: 15px;
  padding: 0 5px;
}

/* Jednotlivé záložky - modernější, kompaktnější design */
.auth-page-container .auth-tab {
  flex: 1;
  text-align: center;
  padding: 10px 15px;
  font-weight: 600;
  color: #555;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: #f0f0f0;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  border: 2px solid transparent;
}

/* Hovery na záložkách */
.auth-page-container .auth-tab:hover {
  background-color: #e5e5e5;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Aktivní záložka */
.auth-page-container .auth-tab.active {
  background-color: var(--primary-color, #b08968);
  color: white;
  border-color: var(--primary-color, #b08968);
  box-shadow: 0 4px 10px rgba(176, 137, 104, 0.3);
}

/* Ikony v záložkách - vedle textu místo nad textem */
.auth-page-container .auth-tab span:first-child {
  font-size: 1.3rem;
}

.auth-page-container .auth-tab span:last-child {
  font-size: 1.1rem;
}

/* Efekt při kliknutí */
.auth-page-container .auth-tab:active {
  transform: translateY(1px);
  box-shadow: 0 2px 3px rgba(0,0,0,0.1);
}

/* Obsah záložek - formuláře */
.auth-page-container .auth-tab-content {
  display: none;
  animation: auth-fadeIn 0.3s ease;
  border-radius: 8px;
  padding: 25px;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  margin-top: 10px;
}

/* Viditelný obsah aktivní záložky */
.auth-page-container .auth-tab-content.active {
  display: block;
}

/* Animace pro plynulé zobrazení obsahu - s unikátním názvem */
@keyframes auth-fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Přizpůsobení formulářů */
.auth-page-container .auth-tab-content .form-group:first-child {
  margin-top: 10px;
}

/* Úpravy pro password strength meter */
.auth-page-container .password-strength-meter {
  margin: 10px 0;
  width: 100%;
  height: 8px;
  background-color: #f1f1f1;
  border-radius: 4px;
  overflow: hidden;
}

.auth-page-container .password-strength-inner {
  height: 100%;
  width: 0%;
  transition: width 0.3s ease, background-color 0.3s ease;
  border-radius: 4px;
}

.auth-page-container #password-requirements {
  margin-bottom: 15px;
  font-size: 13px;
  padding-left: 20px;
}

/* Responzivní úpravy */
@media (max-width: 576px) {
  /* Záložky na mobilech */
  .auth-page-container .auth-tab {
    padding: 8px 10px;
  }
  
  .auth-page-container .auth-tab span:first-child {
    font-size: 1.2rem;
  }
  
  .auth-page-container .auth-tab span:last-child {
    font-size: 0.9rem;
  }
}

/* Úpravy pro intl-tel-input plugin - specifické pro auth formulář */
.auth-page-container .iti {
  width: 100%;
  display: block;
  height: auto;
  position: relative;
  margin-bottom: 10px;
}

/* Zvýraznění aktivního formuláře - s unikátním názvem animace */
.auth-page-container .auth-tab-content.active .btn-primary {
  animation: auth-pulseButton 1.5s ease;
}

@keyframes auth-pulseButton {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* Posunutí zapomenutého hesla */
.auth-page-container .auth-links {
  margin-top: 20px;
  text-align: center;
}

/* Úpravy alertů */
.auth-page-container .alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 12px 15px;
  margin-bottom: 20px;
  border-radius: 8px;
}

.auth-page-container .alert-danger {
  background-color: #feebeb;
  border-left: 4px solid #e74c3c;
  color: #c0392b;
}

.auth-page-container .alert-success {
  background-color: #e8f5e9;
  border-left: 4px solid #4caf50;
  color: #2e7d32;
}

.auth-page-container .alert-icon {
  margin-right: 10px;
  font-size: 18px;
}

.auth-page-container .alert-content {
  flex: 1;
}

/* Social login buttons - vylepšená varianta s výraznější šedou */
.auth-page-container .social-login {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
  text-align: center;
}

.auth-page-container .social-login-text {
  font-size: 14px;
  color: #777;
  margin-bottom: 15px;
}

.auth-page-container .social-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 15px;
  margin: 12px 0;
  border-radius: 6px;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  background-color: #e0e0e0;
  color: #444;
  border: 1px solid #ccc;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.auth-page-container .social-login-btn:hover {
  background-color: #d0d0d0;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.auth-page-container .social-login-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.auth-page-container .social-login-btn img {
  width: 22px;
  height: 22px;
  margin-right: 12px;
}

/* Media queries pro responsivní design */
@media (max-width: 480px) {
  .auth-page-container .social-login-btn {
    padding: 10px;
    font-size: 14px;
  }
  
  .auth-page-container .social-login-btn img {
    width: 18px;
    height: 18px;
    margin-right: 8px;
  }
  
  .auth-page-container .auth-tab {
    gap: 5px;
  }
}

/* ---------------- Styly pro cookie-style toggle přepínače ----------------- */
.auth-page-container .cookie-option {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-bottom: 15px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.auth-page-container .cookie-option:last-child {
  border-bottom: none;
}

.auth-page-container .cookie-option-text {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  max-width: calc(100% - 60px);
  margin-right: 15px;
  word-break: break-word;
  overflow-wrap: break-word;
}

.auth-page-container .cookie-option-description {
  font-size: 0.9rem;
  color: var(--text-secondary, #666);
  margin-top: 3px;
}

/* Toggle přepínač - kopie z cookie banneru */
.auth-page-container .cookie-toggle {
  width: 46px;
  height: 24px;
  background-color: #ccc;
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s;
}

.auth-page-container .cookie-toggle.enabled {
  background-color: var(--primary-color, #b08968);
}

.auth-page-container .toggle-slider {
  width: 20px;
  height: 20px;
  background-color: white;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.3s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.auth-page-container .cookie-toggle.enabled .toggle-slider {
  left: 24px;
}

/* ---------------- Styly pro validaci všech vstupních polí ----------------- */
.auth-page-container .checking-email {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" fill="none" stroke="%233498db" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform></circle></svg>');
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 20px;
  padding-right: 40px !important;
  border-color: #3498db !important;
}

/* Třída pro platná pole - zelený okraj a ikona zaškrtnutí */
.auth-page-container .field-valid {
  border-color: #2ecc71 !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z" fill="%232ecc71"/></svg>');
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 20px;
  padding-right: 40px !important;
}

/* Třída pro neplatná pole - červený okraj a ikona křížku */
.auth-page-container .field-error {
  border-color: #e74c3c !important;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="%23e74c3c"/></svg>');
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 20px;
  padding-right: 40px !important;
}

/* Styl pro zobrazení chybových zpráv pod poli */
.auth-page-container .error-message {
  color: #e74c3c;
  font-size: 0.85rem;
  margin-top: 5px;
  margin-bottom: 8px;
  display: block;
  animation: fade-in 0.3s ease-in-out;
}

/* Specifická úprava pro chybovou zprávu u telefonního pole */
.auth-page-container .phone-error-message {
  margin-top: 2px !important;
  margin-bottom: 12px !important;
}

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

/* Úprava pozice vlaječky a boxu s předvolbou */
.auth-page-container .iti__flag-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: auto;
  left: 0;
  height: 100%;
}

/* Odsazení vstupního pole vpravo od vlaječky */
.auth-page-container .iti--separate-dial-code .iti__phone {
  padding-left: 98px !important;
}

/* Oprava pozice rozbalovacího boxu s vlaječkami */
.auth-page-container .iti__country-list {
  position: absolute;
  z-index: 2;
  list-style: none;
  margin-top: 2px;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  max-height: 200px;
  width: 330px;
  overflow-y: auto;
}

/* Zajištění, aby chybové zprávy nezasahovaly do rozbalovacího boxu */
.auth-page-container .form-group .error-message {
  display: block;
  clear: both;
  margin-top: 2px;
  position: relative;
  padding-left: 2px;
}

/* Specifické přepsání pro telefonní pole, když je validní/nevalidní */
.auth-page-container .iti .field-valid,
.auth-page-container .iti .field-error {
  padding-right: 40px !important;
  background-position: right 10px center !important;
}

/* Zajištění, aby ikony byly vždy viditelné a nezakrývaly text */
.auth-page-container .field-valid,
.auth-page-container .field-error {
  background-position: calc(100% - 10px) 50% !important;
}

/* Přidejte toto do auth-tabs.css */

/* --------- Styly pro pole hesla s ikonou zobrazení/skrytí --------- */
.auth-page-container .password-field-container {
  position: relative;
  width: 100%;
}

.auth-page-container .password-toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #555;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
  border-radius: 4px;
  transition: color 0.2s, background-color 0.2s;
}

.auth-page-container .password-toggle:hover {
  color: var(--primary-color, #b08968);
  background-color: rgba(0, 0, 0, 0.05);
}

.auth-page-container .password-toggle svg {
  stroke: currentColor;
}

/* Pro pole hesla při validaci - odsazení pro ikonu */
.auth-page-container .password-field-container .form-control {
  padding-right: 40px !important;
}

/* --------- Styly pro SVG ikony --------- */
.auth-page-container svg {
  display: inline-block;
  vertical-align: middle;
}

.auth-page-container .form-label svg {
  margin-right: 5px;
  stroke: var(--primary-color, #b08968);
}

/* Ikony v záložkách */
.auth-page-container .auth-tab span svg {
  margin-right: 0;
}

/* Ikony v alertech */
.auth-page-container .alert-icon svg {
  stroke: currentColor;
}

/* Ikony v odkazech */
.auth-page-container .auth-link svg {
  margin-right: 5px;
  stroke: var(--primary-color, #b08968);
}

/* Větší velikost písma ve vstupních polích */
.auth-page-container input[type="text"],
.auth-page-container input[type="email"],
.auth-page-container input[type="password"],
.auth-page-container input[type="tel"] {
  font-size: 1.15rem !important;
  line-height: 1.5 !important;
  padding: 10px 12px !important;
  height: auto !important;
  width: 100%;
}

/* Zajištění stejného stylu pro placeholdery */
.auth-page-container input::placeholder {
  font-size: 1.15rem !important;
  opacity: 0.7;
}

/* Přidejte toto na konec auth-tabs.css */

/* Oprava pozice ikony oka - posun více vlevo, aby se nepřekrývala s validační ikonou */
.auth-page-container .password-toggle {
  right: 40px; /* Posun z původních 10px více vlevo */
}

/* Oprava pro telefonní pole - větší odsazení od vlajky */
.auth-page-container .iti--separate-dial-code .iti__phone {
  padding-left: 105px !important; /* Zvětšeno z 98px */
}

/* Oprava pozice a velikosti vlajky */
.auth-page-container .iti__flag-container {
  width: 95px; /* Větší šířka vlajky a předvolby */
  display: flex;
  align-items: center;
}

/* Zajištění správné pozice validačních ikon u telefonního pole */
.auth-page-container .iti__phone.field-valid,
.auth-page-container .iti__phone.field-error {
  background-position: calc(100% - 10px) 50% !important;
  padding-right: 40px !important;
}

/* Zajištění, že telefon s vlajkou bude mít vždy dostatečnou výšku */
.auth-page-container .iti { 
  height: auto;
  min-height: 46px;
}

/* Zajištění, že validační ikony budou viditelné a mít správnou pozici u všech polí */
.auth-page-container .field-valid,
.auth-page-container .field-error {
  background-position: calc(100% - 10px) 50% !important;
}

/* Oprava pozice validačních ikon u polí s heslem */
.auth-page-container .password-field-container .field-valid,
.auth-page-container .password-field-container .field-error {
  background-position: calc(100% - 10px) 50% !important;
  padding-right: 70px !important; /* Zvětšené odsazení pro obě ikony */
}

/* Přidejte tyto styly na konec auth-tabs.css */

/* Agresivnější oprava pro telefonní pole */
.auth-page-container .iti--separate-dial-code .iti__phone,
.auth-page-container .iti--separate-dial-code input.form-control {
  padding-left: 130px !important; /* Výrazně zvětšeno pro zajištění viditelnosti textu */
}

/* Rozšíření prostoru pro vlajku a předvolbu země */
.auth-page-container .iti__flag-container {
  width: 120px !important; /* Více prostoru pro vlajku a kód země */
  left: 0 !important;
  position: absolute !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Optimalizace rozložení vlajky a kódu země */
.auth-page-container .iti__selected-flag {
  padding: 0 8px 0 12px !important;
  display: flex !important;
  align-items: center !important;
}

/* Zajištění, že pole pro telefon bude mít dostatečnou výšku */
.auth-page-container .iti, 
.auth-page-container .iti input {
  height: auto !important;
  min-height: 46px !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Nastavení správné šířky seznamu zemí */
.auth-page-container .iti__country-list {
  width: 350px !important; /* Zajištění dostatečné šířky seznamu */
  max-height: 220px !important; /* Vyšší seznam pro lepší použitelnost */
}

/* Aplikace stylů na dropdowny uvnitř telefonního pole */
.auth-page-container .iti__selected-dial-code {
  margin-left: 8px !important;
  font-size: 1.05rem !important;
}

/* Z-index pro lepší interakci s dropdown menu */
.auth-page-container .iti--separate-dial-code {
  position: relative !important;
  z-index: 50 !important;
}

/* Zajištění, že telefonní pole se správně inicializuje */
#phone {
  display: block;
  width: 100% !important;
}

/* =====================================================================
 * VERIFY – inline styles z pages/auth/verify.php
 * ===================================================================== */

    /* Styly pro ikony a zprávy */
    .verification-success,
    .verification-error {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .verification-icon {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
    }

    .verification-icon svg {
        width: 50px;
        height: 50px;
        stroke-width: 1.5;
    }

    .verification-icon.success {
        background-color: rgba(46, 204, 113, 0.1);
    }

    .verification-icon.success svg {
        stroke: #2ecc71;
    }

    .verification-icon.error {
        background-color: rgba(231, 76, 60, 0.1);
    }

    .verification-icon.error svg {
        stroke: #e74c3c;
    }

    .alert {
        width: 100%;
        margin-bottom: 20px;
    }

    .button-group {
        width: 100%;
    }

    @media (max-width: 576px) {
        .verification-icon {
            width: 70px;
            height: 70px;
        }
        
        .verification-icon svg {
            width: 40px;
            height: 40px;
        }
    }
    

/* =====================================================================
 * UPDATE CREDENTIALS – inline styles z pages/auth/update_credentials.php
 * ===================================================================== */

        /* Dodatečné specifické styly pro tuto stránku */
        .update-form-container {
            max-width: 600px;
            margin: 0 auto;
            padding: 30px;
            background-color: white;
            border-radius: var(--border-radius-large);
            box-shadow: var(--shadow-medium);
        }
        
        .update-form-title {
            color: var(--primary-color);
            margin-bottom: 20px;
            text-align: center;
        }
        
        .update-form-description {
            margin-bottom: 30px;
            text-align: center;
            font-size: 1.1rem;
            color: var(--text-secondary);
        }
        
        .form-section {
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(0,0,0,0.05);
        }
        
        .form-section:last-child {
            border-bottom: none;
            margin-bottom: 0;
        }
        
        .form-section-title {
            font-size: 1.2rem;
            color: var(--primary-color);
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }
        
        .form-section-title svg {
            margin-right: 8px;
        }
        
        .terms-section {
            margin-top: 30px;
        }
        
        .submit-btn-container {
            margin-top: 30px;
        }
        
        /* Responsivní úpravy */
        @media (max-width: 768px) {
            .update-form-container {
                padding: 20px;
                max-width: 100%;
            }
            
            .form-section {
                margin-bottom: 20px;
                padding-bottom: 15px;
            }
            
            .form-label {
                font-size: 1.05rem;
            }
        }
        
        /* Badge pro povinný update */
        .required-update-badge {
            background-color: var(--error-color);
            color: white;
            padding: 5px 10px;
            border-radius: var(--border-radius-medium);
            font-size: 0.85rem;
            margin-bottom: 15px;
            display: inline-block;
        }
        
        /* Badge pro volitelný update */
        .optional-update-badge {
            background-color: var(--info-color);
            color: white;
            padding: 5px 10px;
            border-radius: var(--border-radius-medium);
            font-size: 0.85rem;
            margin-bottom: 15px;
            display: inline-block;
        }
        
        /* Výstražný banner pro systémový email */
        .system-email-alert {
            background-color: #fff3cd;
            border-left: 4px solid #ffc107;
            color: #856404;
            padding: 15px;
            margin-bottom: 25px;
            border-radius: var(--border-radius-medium);
            font-size: 1.1rem;
            display: flex;
            align-items: flex-start;
        }
        
        .system-email-alert svg {
            margin-right: 10px;
            flex-shrink: 0;
        }
        
        .system-email-value {
            font-weight: bold;
            background-color: rgba(255, 193, 7, 0.2);
            padding: 2px 6px;
            border-radius: 4px;
            margin: 0 3px;
        }
        
        .email-hint {
            font-size: 0.9rem;
            color: var(--text-secondary);
            margin-top: 5px;
            margin-bottom: 15px;
        }
        
        /* Nový styl pro zvýraznění požadovaných polí */
        .required-field {
            border: 1px solid #ffc107 !important;
            background-color: rgba(255, 193, 7, 0.05) !important;
        }
        
        .required-field:focus {
            border-color: #ffc107 !important;
            box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25) !important;
        }
        
        /* Styl pro zobrazení současného systémového emailu */
        .current-email-display {
            margin-bottom: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-radius: 5px;
            border: 1px solid #dee2e6;
        }
        
        .system-email-label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #721c24;
        }
        
        .system-email-display {
            display: block;
            width: 100%;
            padding: 10px;
            background-color: #ffeeee;
            border: 1px solid #f5c6cb;
            border-radius: 4px;
            color: #721c24;
            font-family: monospace;
            font-weight: bold;
            font-size: 1rem;
        }
        
        /* Styl pro oddělovač sekcí */
        .email-section-divider {
            position: relative;
            text-align: center;
            margin: 25px 0;
        }
        
        .email-section-divider:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            height: 1px;
            background-color: #dee2e6;
            z-index: 1;
        }
        
        .email-section-divider-text {
            position: relative;
            display: inline-block;
            padding: 0 15px;
            background-color: white;
            z-index: 2;
            color: #6c757d;
        }
        
        /* Styl pro emailová pole */
        .email-fields-container {
            border: 1px solid #ffc107;
            padding: 20px;
            border-radius: 8px;
            background-color: rgba(255, 248, 230, 0.3);
            margin-bottom: 20px;
        }
        
        /* Speciální styl pro záhlaví sekce */
        .required-fields-header {
            background-color: #fff3cd;
            color: #856404;
            padding: 10px 15px;
            margin: -20px -20px 20px -20px;
            border-radius: 8px 8px 0 0;
            font-weight: bold;
            border-bottom: 1px solid #ffeeba;
        }