/* styles.light-theme.css */

body.light-theme {
    background: #dedede;
    color: #333;
}

.settings-box {
    pointer-events: none; /* Vypne interakci s prvky uvnitř */
}

.settings-box.show {
    pointer-events: auto; /* Znovu povolí interakci, když je modal zobrazen */
}

/* Tlačítko sdílení - light-theme */
.light-theme .share-btn {
    background-color: #ffffff;
   /* Bílé pozadí */
    box-shadow: 0px 0px 5px 5px rgba(255, 165, 0, 0.15);
   /* Jemný oranžový stín */
}
/* Ikona uvnitř tlačítka - light-theme */
.light-theme .share-btn i {
    color: #e68a00;
   /* Oranžová ikona */
}
/* Efekt při hoveru - light-theme */
.light-theme .share-btn:hover {
    box-shadow: 0px 0px 8px 8px rgba(255, 165, 0, 0.2);
   /* Výraznější oranžový stín při hoveru */
}
/* ✨ Moderní a neobyčejný styl modalu - Light-theme ✨ */
.light-theme .share-modal {
    background: rgba(255, 255, 255, 0.75);
   /* Světlé pozadí s průhledností */
}
.light-theme .share-modal .modal-content {
    background: #ffffff;
   /* Bílé pozadí modalu */
    color: #333;
   /* Tmavě šedý text */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
   /* Jemnější stín pro "plovoucí" efekt */
    border: 1px solid #eee;
   /* Jemný, světle šedý okraj */
}
/* Jemný gradient pro pozadí modal-content v light-theme */
.light-theme .share-modal .modal-content::before {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.01));
   /* Jemný tmavý gradient */
}
.light-theme .share-modal .close-btn {
    color: #777;
   /* Tmavší šedá pro ikonu zavření */
    text-shadow: 1px 1px 1px rgba(200,200,200,0.5);
   /* Jemný světlý stín pro ikonu */
}
.light-theme .share-modal .close-btn:hover {
    color: #555;
   /* Ještě tmavší šedá pro hover ikony zavření */
}
/* Styl pro nadpis modalu - light-theme */
.light-theme .share-modal .modal-content h2 {
    color: #333;
   /* Tmavě šedá pro nadpis */
    text-shadow: 1px 1px 1px rgba(200,200,200,0.4);
   /* Jemný světlý stín pro nadpis */
}
/* Hláška - light-theme */
.light-theme #share-message {
    color: #cc7a00;
   /* Tmavší oranžová pro hlášku */
    text-shadow: 1px 1px 1px rgba(200,200,200,0.3);
   /* Jemný světlý stín pro hlášku */
}
/* Přepínač sdílení s městem - light-theme */
.light-theme .toggle-container label {
    color: #555;
   /* Tmavší šedá pro label */
    text-shadow: 1px 1px 1px rgba(200,200,200,0.2);
   /* Jemný světlý stín pro label */
}
/* Vlastní přepínač (moderní styl - vylepšený) - light-theme */
.light-theme .toggle-container input[type="checkbox"] {
    background-color: #ddd;
   /* Světle šedá pro pozadí přepínače */
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1) inset;
   /* Jemnější stín pro přepínač */
}
.light-theme .toggle-container input[type="checkbox"]::before {
    background-color: #bbb;
   /* Tmavší šedá pro kuličku přepínače */
    box-shadow: 1px 1px 3px rgba(0,0,0,0.2);
   /* Jemnější stín pro kuličku */
}
.light-theme .toggle-container input[type="checkbox"]:checked {
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1) inset, 0 0 0 2px rgba(100, 181, 246, 0.2);
    background-color: #64b5f6;
   /* Jemnější stín a outline pro aktivní přepínač */
}
/* Input pro zadání města - light-theme */
.light-theme #modal-city-input {
    background-color: #fff;
   /* Bílé pozadí inputu */
    color: #333;
   /* Tmavě šedý text inputu */
    border: 2px solid #ccc;
   /* Světle šedý okraj inputu */
    box-shadow: 2px 2px 4px rgba(0,0,0,0.1) inset;
   /* Jemnější stín inputu */
}
.light-theme #modal-city-input:focus {
    box-shadow: 0 0 0 3px rgba(100, 181, 246, 0.2);
   /* Jemnější stín focusu inputu */
    border-color: #90caf9;
   /* Světlejší focus barva inputu */
}
.light-theme #modal-city-input::placeholder {
    color: #bbb;
   /* Světlejší placeholder */
}
/* Info o sdíleném městě - light-theme */
.light-theme #city-share-info {
    color: #689f38;
   /* Tmavší zelená pro info */
    text-shadow: 1px 1px 1px rgba(200,200,200,0.3);
   /* Jemný světlý stín pro info */
}
/* Sdílecí odkaz - light-theme */
.light-theme .share-link-container {
    background: #f0f0f0;
   /* Světle šedé pozadí kontejneru odkazu */
    border: 2px solid #ddd;
   /* Světle šedý okraj kontejneru odkazu */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 0 0 0 1px #e0e0e0;
   /* Jemnější stín a outline pro kontejner odkazu */
}
.light-theme .share-link-container input {
    color: #333;
   /* Tmavě šedý text odkazu */
    text-shadow: 1px 1px 1px rgba(200,200,200,0.4);
   /* Jemný světlý stín textu odkazu */
}
/* Kopírovací tlačítko - light-theme */
.light-theme .share-link-container button {
    color: #777;
   /* Tmavší šedá barva kopírovacího tlačítka */
    text-shadow: 1px 1px 1px rgba(200,200,200,0.3);
   /* Jemný světlý stín ikony kopírovacího tlačítka */
}
.light-theme .share-link-container button:hover {
    color: #e68a00;
   /* Oranžová barva hoveru kopírovacího tlačítka */
}
/* Tooltip - light-theme */
.light-theme .tooltip {
    background-color: #f0f0f0;
   /* Světlé pozadí tooltipu */
    border: 1px solid #e68a00;
   /* Oranžový okraj tooltipu */
    color: #333;
   /* Tmavě šedý text tooltipu */
}
.light-theme .tooltip::after {
    border-color: #e68a00 transparent transparent transparent;
   /* Oranžová šipka tooltipu */
}
/* QR kód - light-theme */
.light-theme .qr-container {
    background: #f0f0f0;
   /* Světlé pozadí QR kontejneru */
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2) inset, 0 0 0 1px #ddd;
   /* Jemnější stín a outline pro QR kontejner */
}
/* Tlačítko pro stažení QR kódu - light-theme */
.light-theme .download-qr-btn {
    color: #555;
   /* Tmavší šedá barva download QR tlačítka */
}
.light-theme .download-qr-btn:hover {
    color: #e68a00;
   /* Oranžová barva hoveru download QR tlačítka */
    background-color: rgba(255, 165, 0, 0.05);
   /* Jemný oranžový nádech pozadí při hoveru */
}
.light-theme .download-qr-btn:active {
    background-color: rgba(255, 165, 0, 0.1);
   /* Jemný oranžový nádech pozadí při kliknutí */
}
/* Sdílecí tlačítka - light-theme */
.light-theme .share-options a {
    background: #ddd;
   /* Světle šedé pozadí sdílecích tlačítek */
    color: #333;
   /* Tmavě šedý text sdílecích tlačítek */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
   /* Jemnější stín sdílecích tlačítek */
}
.light-theme .share-options a:hover {
    background: #e68a00;
   /* Oranžová barva hoveru sdílecích tlačítek */
    color: #f0f0f0;
   /* Světlý text při hoveru sdílecích tlačítek */
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
   /* Jemnější stín při hoveru sdílecích tlačítek */
}
/* Potvrzovací tlačítko - light-theme */
.light-theme #city-input-container button {
    background: #e68a00;
   /* Oranžová barva potvrzovacího tlačítka */
    color: #f0f0f0;
   /* Světlý text potvrzovacího tlačítka */
    box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
   /* Jemnější stín potvrzovacího tlačítka */
}
.light-theme #city-input-container button:hover {
    box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
   /* Jemnější stín při hoveru potvrzovacího tlačítka */
}
.light-theme #city-input-container button:active {
    box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
   /* Jemnější stín při kliknutí potvrzovacího tlačítka */
}
/* Sdílecí odkaz - light-theme */
.light-theme .share-link-container {
    background: #f0f0f0;
   /* Světlé pozadí share link containeru */
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2) inset, 0 0 0 1px #ddd;
   /* Jemnější stín a outline pro share link container */
}
.light-theme .share-link-container input {
    color: #333;
   /* Tmavě šedý text share linku */
    text-shadow: 1px 1px 1px rgba(200,200,200,0.4);
   /* Jemný světlý stín textu share linku */
}
/* Kopírovací tlačítko - light-theme */
.light-theme .share-link-container button {
    color: #777;
   /* Tmavší šedá barva kopírovacího tlačítka */
    text-shadow: 1px 1px 1px rgba(200,200,200,0.3);
   /* Jemný světlý stín ikony kopírovacího tlačítka */
}

.light-theme .navigation {
    background-color: rgba(0, 0, 0, 0.714);
    box-shadow: 0 0 20px rgba(255, 140, 0, 0.4);
}

.light-theme .settings-btn {
    background-color: #f5f5f5;
    box-shadow: 0px 0px 5px 5px rgba(255, 152, 0, 0.214);
}

.light-theme .settings-btn i {
    color: #ff9800;
}

.light-theme .settings-btn:hover {
    background-color: #e0e0e0;
    box-shadow: 0px 0px 8px 8px rgba(255, 152, 0, 0.301);
}

.light-theme .settings-box {
    background-color: #ffffff;
    color: #333;
    border: 1px solid #ff9800;
}

.light-theme .settings-box li input[type="text"] {
    background-color: #eeeeee;
    color: #262626;
}

.light-theme .settings-box li input[type="text"]:focus {
    border-color: #ffb74d;
    background-color: #cacaca;
}

.light-theme .search-box input {
    background: #f5f5f5;
    color: #333;
    border-color: #ff9800;
}

.light-theme .search-box button {
    background: #ff9800;
    color: white;
    transition: background 0.3s, transform 0.2s;
}

.light-theme .search-box button:hover {
    background: #e68900;
    transform: scale(1.05);
    box-shadow: 0 0 5px rgba(255, 152, 0, 0.5);
}

.light-theme .suggestions-box {
    background-color: #d2d2d2;
    border-color: #ff9800;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
}

.light-theme .suggestions-box div {
    color: #2a2a2a;
}

.light-theme .mapmodal-content {
    background: #cfcfcf;
    color: rgb(32, 32, 32);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.light-theme .mapmodal .close-button {
    background: #ff9800;
    color: white;
}

.light-theme .mapmodal .close-button:hover {
    background: rgb(255, 176, 57);
}

.light-theme .main-weather {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0px 0px 30px 30px rgba(255, 153, 0, 0.2);
}

.light-theme .temperature,
.light-theme .description {
    color: #222;
}

.light-theme .details div {
    background: rgba(240, 240, 240, 0.8);
    border: 1px solid rgba(255, 153, 0, 0.5);
}

.light-theme .details span {
    color: #ff9800;
}

.light-theme .details i {
    color: #393939;
}

.light-theme .forecast-container {
    background: rgba(250, 250, 250, 0.9);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.158);
}

.light-theme .forecast-item {
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #ff9800;
    transition: transform 0.2s, box-shadow 0.2s;
}

.light-theme .forecast-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.light-theme .side-box {
    background: rgba(255, 255, 255, 0.95);
    color: black;
    box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
}

.light-theme .side-box span {
    color: #ff9800;
}

.light-theme .side-box h2 {
    color: #222;
}

.light-theme .air-quality-container .box {
    background-color: #e0e0e0;
    color: #222;
    transition: background 0.3s;
}

.light-theme .air-quality-container .box p {
    color: #222;
}

.light-theme .air-quality-container .box:hover {
    background-color: #bfbfbf;
}

/* Kontainer pro ovládání grafu */
.light-theme .chart-box {
    border: 1px solid #ff9800;
    background-color: rgba(185, 185, 185, 0.95);
}

.light-theme .wind-section {
    border: 1px solid #ff9800;
    background-color: rgba(185, 185, 185, 0.95);
}

.light-theme .toggle-btn .btn-label {
    background-color: #e0e0e0;
    color: #333;
    border: 2px solid #ff9800;
    transition: background-color 0.3s, transform 0.3s;
}

.light-theme .wind-boxes .box {
    border: 2px solid #ff9800;
    background-color: #e0e0e0;
}

.light-theme .wind-boxes .box i, .light-theme .wind-boxes .box div {
    color: #222;
}

.light-theme .toggle-btn input[type="checkbox"]:checked + .btn-label {
    background-color: #ff9800;
    color: white;
}

.light-theme .toggle-btn .btn-label:hover {
    background-color: #d6d6d6;
    transform: scale(1.05);
}

.light-theme .toggle-btn input[type="checkbox"]:checked + .btn-label:hover {
    background-color: #ffb74d;
    transform: scale(1.1);
}

.toggle-btn .btn-label.light-theme {
    background-color: #e0e0e0;
    color: #333;
    border: 2px solid #ff9800; /* Oranžový okraj */
}

.wind-section.light-theme {
    border: 1px solid #ff9800; /* Oranžový okraj */
}

.wind-boxes .box.light-theme {
    border: 1px solid #ff9800; /* Oranžový okraj */
    background-color: #fff;
    color: #333;
}

.wind-boxes .box.light-theme span {
    color: #ff9800; /* Oranžová */
}

/* Styly pro hlavní kontejner widgetu */
.light-theme .moon-widget {
    background-color: #f9fdff; /* Jemná modrá pro moderní vzhled */
    box-shadow: 0 4px 15px rgba(255, 174, 0, 0.2); /* Jemný stín pro moderní efekt */
}

/* Informace o měsíci */
.light-theme .moon-info {
    color: #292929; /* Tmavší barva textu pro lepší čitelnost */
}

/* Tučné písmo pro hodnoty */
.light-theme .moon-info span {
    color: #ff9800; /* Modrá pro zvýraznění hodnot */
}