@import url(https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap);

:root {
--canvas-color: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--background-color: #FFFFFF;
--primary-color: #667eea;
--secondary-color: #764ba2;
--neutral-color: #64748B;
--text-color: #1E293B;

--alt-bg-color: #F8F9FA;
--alt-bg-color-h: #F1F3F5;
--alt-bg-color-a: #E9ECEF;
--alt-color: #666;

--divider-bg-color: #F5F5F5;

--url-color: #667eea;
--url-color-a: #5568d3;
--url-color-h: #4451bc;

--icon-bg-color: 40%;
--icon-bg-color-h: 25%;
--icon-bg-color-a: 15%;

--button-text-color: #FFFFFF;
--button-neu-bg-color: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--button-neu-bg-color-h: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
--button-del-bg-color: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--button-del-bg-color-h: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
--button-dis-bg-color: #CBD5E1;

--input-color: #666;
--input-bg-color: #FFF;
--input-bg-color-alt: #FFF;
--input-border-color: #DDD;
--input-border-color-alt: #E9ECEF;
--input-border-color-h: #BBB;

--notifications-color: #FFFFFF;
--notifications-success: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
--notifications-error: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--notifications-info: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

--selection-background: #667eea;
--selection-color: #FFFFFF;

--button-clear-invert: invert(40%);
--button-clear-invert-h: invert(20%);
--button-remove-invert: invert(30%);
--button-remove-invert-h: invert(15%);
--wn-color: #FFFFFF;
--wn-img: invert(100%);
--wf-img: invert(25%);
--wf-list-h: rgba(102, 126, 234, 0.08);
--min-temp: #64748B;
--graph-min-color: #667eea;
--graph-max-color: #764ba2;
--button-round: invert(100%);
--button-round-h: invert(10%);
--cover-top: rgba(102, 126, 234, 0.15);
--cover-bottom: rgba(118, 75, 162, 0.85);
}
.dark {
--canvas-color: #222;
--background-color: #333;
--primary-color: #b785cc;
--secondary-color: #cb99e0;
--neutral-color: #94A3B8;
--text-color: #E2E8F0;

--alt-bg-color: rgba(31, 31, 51, 0.95);
--alt-bg-color-h: rgba(42, 42, 68, 0.95);
--alt-bg-color-a: rgba(52, 52, 85, 0.95);
--alt-color: #CBD5E1;

--divider-bg-color: rgba(102, 126, 234, 0.2);

--url-color: #8b9aff;
--url-color-a: #a5b4fc;
--url-color-h: #c4cfff;

--icon-bg-color: 70%;
--icon-bg-color-h: 85%;
--icon-bg-color-a: 100%;

--button-text-color: #FFFFFF;
--button-neu-bg-color: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%);
--button-neu-bg-color-h: linear-gradient(135deg, #4ECDC4 0%, #45B7D1 100%);
--button-del-bg-color: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--button-del-bg-color-h: linear-gradient(135deg, #f5576c 0%, #f093fb 100%);
--button-dis-bg-color: #334155;

--input-color: #E2E8F0;
--input-bg-color: rgba(31, 31, 51, 0.9);
--input-bg-color-alt: rgba(21, 21, 38, 0.9);
--input-border-color: rgba(102, 126, 234, 0.4);
--input-border-color-alt: rgba(118, 75, 162, 0.4);
--input-border-color-h: rgba(102, 126, 234, 0.7);

--notifications-color: #FFFFFF;
--notifications-success: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
--notifications-error: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
--notifications-info: linear-gradient(135deg, #FF6B6B 0%, #4ECDC4 100%);

--selection-background: #FF6B6B;
--selection-color: #FFFFFF;

--button-clear-invert: invert(60%);
--button-clear-invert-h: invert(80%);
--button-remove-invert: invert(50%);
--button-remove-invert-h: invert(70%);
--wn-color: #FFF;
--wn-img: invert(100%);
--wf-img: invert(75%);
--wf-list-h: rgba(102, 126, 234, 0.2);
--min-temp: #94A3B8;
--graph-min-color: #8b9aff;
--graph-max-color: #f59393;
--button-round: invert(100%);
--button-round-h: invert(10%);
--cover-top: rgba(154, 105, 175, 0.2);
--cover-bottom: rgba(154, 105, 175, 0.9);
}
* {
-webkit-tap-highlight-color: transparent;
}

a, button, .button, input, select, textarea {
-webkit-tap-highlight-color: rgba(102, 126, 234, 0.2);
touch-action: manipulation;
}

html {
background: var(--canvas-color);
background-attachment: fixed;
font-family: sans-serif;
height:100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
color: var(--text-color);
font-family: 'Poppins', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
font-size: 14px;
margin: 0;
padding: 0;
background: var(--background-color);
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 100%;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
h1 { font-size: 52px; margin: 0; padding: 5px 15px;}
h3 { font-size: 28px; margin: 0; }
h4 { font-size: 24px; margin: 10px 0 0 0; }
h1, h3, h4, h5 {
font-weight: 300;
}
a {
color: var(--url-color);
text-decoration: none;
}
a:hover {
color: var(--url-color-h);
}
code, pre {
word-wrap: break-word;
}
select, option {
text-transform: capitalize;
}
table {
border-collapse:collapse;
}
table, td, th {
padding: 3px;
}
label {
display: inline-block;
margin-bottom: 5px;
}
input, button, textarea, select {
font-family: inherit;
font-size: inherit;
}
input[type="text"], input[type="password"], input[type="file"], textarea {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
padding: 14px 18px;
border-radius: 12px;
border: 2px solid rgba(102, 126, 234, 0.2);
outline: 0;
color: var(--input-color);
display: block;
margin-bottom: 12px;
max-width: 400px;
width: 100%;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.1);
font-weight: 500;
}
.dark input[type="text"], .dark input[type="password"], .dark input[type="file"], .dark textarea {
background: rgba(31, 31, 51, 0.9);
border: 2px solid rgba(102, 126, 234, 0.3);
}
input[type="text"]:hover, input[type="password"]:hover, input[type="file"]:hover, textarea:hover {
border: 2px solid rgba(102, 126, 234, 0.4);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
transform: translateY(-1px);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="file"]:focus, textarea:focus {
border: 2px solid #667eea;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.15), 0 4px 16px rgba(102, 126, 234, 0.3);
transform: translateY(-2px);
}
input[type="checkbox"] {
margin: 0 10px 10px 0;
}
input[type="text"], input[type="password"] {
-webkit-appearance: none;
appearance: none;
}
button, .button {
padding: 0 10px;
border-radius: 3px;
background-color: var(--primary-color);
color: var(--button-text-color);
cursor: pointer;
border: none;
outline: 0;
display: inline-block;
line-height: 38px;
height: 38px;
}
button:hover, .button:hover {
background-color: var(--secondary-color);
}
button:disabled, .button-disabled, .button-disabled:hover {
background-color: var(--button-dis-bg-color);
}
.button-delete {
background-color: var(--button-del-bg-color);
}
.button-delete:hover {
background-color: var(--button-del-bg-color-h);
}
.button-margin-left {
margin-left: 10px;
}
.button-margin-right {
margin-right: 10px;
}
.button-neutral {
background-color: var(--button-neu-bg-color);
}
.button-neutral:hover {
background-color: var(--button-neu-bg-color-h);
}
select {
background: var(--input-bg-color);
padding: 12px 14px;
border-radius: 8px;
border: 1.5px solid var(--input-border-color);
outline: 0;
color: var(--input-color);
display: block;
margin-bottom: 10px;
max-width: 420px;
width: 100%;
transition: all 0.2s ease;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
select:hover {
border: 1.5px solid var(--input-border-color-h);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}
select:focus {
border: 1.5px solid var(--primary-color);
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1), 0 2px 4px rgba(0, 0, 0, 0.1);
}
img {
border: 0;
max-width: 100%;
height: auto;
}
.row {
width: 100%;
margin: 0 auto 15px auto;
max-width: 1020px;
box-sizing: border-box;
padding: 0 10px;
overflow: auto;
}
.one, .row .one { width: 8.33333%; }
.two, .row .two { width: 16.66667%; }
.three, .row .three { width: 25%; }
.four, .row .four { width: 33.33333%; }
.five, .row .five { width: 41.66667%; }
.six, .row .six { width: 50%; }
.seven, .row .seven { width: 58.33333%; }
.eight, .row .eight { width: 66.66667%; }
.nine, .row .nine { width: 75%; }
.ten, .row .ten { width: 83.33333%; }
.eleven, .row .eleven { width: 91.66667%; }
.twelve, .row .twelve { width: 100%; }
.column, .columns {
float: left;
min-height: 1px;
position: relative;
}
[class*="column"] + [class*="column"]:last-child { float: right; }
[class*="column"] + [class*="column"].end { float: left; }
.float-left {
float: left;
}
.float-right {
float: right;
}
.header {
position: -webkit-sticky;
position: sticky;
top: 0;
right: 0;
left: 0;
z-index: 1000;
width: 100%;
background-color: var(--alt-bg-color);
box-sizing: border-box;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
}
.dark .header {
background: var(--alt-bg-color);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.header-content {
margin: 0 auto;
max-width: 1020px;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
}
.header-col-logo {
display: flex;
align-items: center;
}
.header-col-content {
flex: 1;
min-width: 0;
overflow: visible;
}
.header-col-menu {
margin-left: 10px;
position: relative;
}
.header-menu-el {
float: right;
margin-left: 10px;
position: relative;
}
.header-menu-el:last-child {
margin-left: 0;
}
.logo {
height: 36px;
width: auto;
margin: 7px 0;
opacity: 0.9;
overflow: auto;
transition: all 0.3s ease;
}
.logo:hover {
opacity: 1;
transform: scale(1.05);
}
.logo img {
border: 0;
height: 100%;
max-width: 100px;
max-height: 32px;
float: right;
margin-right: 10px;
object-fit: contain;
}
.menu {
display: none;
box-sizing: border-box;
position: absolute;
right: 0;
width: 200px;
}
.menu-content {
max-width: 200px;
width: 100%;
float: right;
font-weight: 600;
}
.menu a, .fav-list-item, .search-list-item {
width: 100%;
padding: 0 14px;
box-sizing: border-box;
background: var(--alt-bg-color-h);
line-height: 50px;
word-wrap: break-word;
display: inline-block;
border-radius: 8px;
margin: 2px 0;
transition: all 0.2s ease;
}
.menu a:hover, .fav-list-item:hover, .search-list-item:hover {
background: var(--alt-bg-color-a);
transform: translateX(4px);
}
.menu-collapsed {
display: block;
}
.menu-title {
background: var(--alt-bg-color-h);
padding: 10px;
cursor: default;
width: 100%;
box-sizing: border-box;
}
.menu-icon {
background-size: 20px;
background-repeat: no-repeat;
background-position: center center;
width: 20px;
height: 50px;
margin-right: 10px;
float: left;
filter: invert(var(--icon-bg-color-h));
}
.header-button {
margin: 9px 0;
height: 32px;
line-height: 32px;
}
.header-icon {
background-size: 20px;
background-repeat: no-repeat;
background-position: center center;
width: 20px;
height: 50px;
line-height: 50px;
margin: 0;
cursor: pointer;
display: block;
}
.icon-menu {
background-image: url(../images/icons/menu.svg);
}
.icon-language {
background-image: url(../images/icons/language.svg);
}
.icon-theme {
background-image: url(../images/icons/theme.svg);
}
.icon {
filter: invert(var(--icon-bg-color));
}
.icon:hover {
filter: invert(var(--icon-bg-color-h));
}
.icon-active {
filter: invert(var(--icon-bg-color-a));
}
.icon-active:hover {
filter: invert(var(--icon-bg-color-a));
}
.fav-list-title, .search-list-title {
background: var(--alt-bg-color-h);
padding: 10px;
text-align: right;
border-bottom: 1px solid var(--alt-bg-color);
cursor: default;
}
a.menu-active {
color: var(--url-color-a);
}
.footer {
background: var(--alt-bg-color);
padding: 10px 0;
color: var(--alt-color);
}
.footer-content {
max-width: 1020px;
width: 100%;
padding: 0 10px;
box-sizing: border-box;
margin: 0 auto;
}
.footer-menu {
width: 100%;
display: inline-block;
}
.footer-element {
line-height: 24px;
float: left;
margin-right: 15px;
}
.content {
overflow: auto;
background: var(--background-color);
box-sizing: border-box;
}
.page-menu {
min-height: 50px;
line-height: 50px;
}
.page-menu a {
margin: 0 10px;
}
.page-menu-left a {
margin: 0 20px 0 0;
float: left;
}
.page-menu a.menu-active, .footer a.menu-active {
color: var(--primary-color);
}
.page-menu a.menu-active:hover, .footer a.menu-active:hover {
color: var(--secondary-color);
}
.page-header {
background: var(--alt-bg-color);
color: var(--alt-color);
padding: 20px 0;
}
.page-title {
font-size: 20px;
}
.page-description {
font-size: 16px;
font-weight: lighter;
padding-top: 10px;
}
.page-content {
background: var(--background-color);
padding: 20px 0;
}
.notification-box {
padding: 16px 20px;
position: relative;
color: var(--notifications-color);
border-radius: 14px;
margin-bottom: 12px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.notification-box-success {
background: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
}
.notification-box-error {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}
.notification-box-info {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.notification-box-modal {
margin: 10px 10px 0 10px;
}
.notification-box-error {
background: var(--notifications-error);
}
.notification-box-success {
background: var(--notifications-success);
}
.notification-box-info {
background: var(--notifications-info);
}
.notification-box > p {
padding-right: 24px;
margin: 0;
}
.notification-close {
position: absolute;
top: 0;
background: url('../images/icons/clear.svg') no-repeat center center;
background-size: 14px;
width: 14px;
height: 24px;
cursor: pointer;
filter: invert(100);
opacity: 0.75;
padding: 7px 10px;
right: 0;
}
.notification-close:hover {
filter: invert(100%);
opacity: 1;
}
.list-container {
overflow: auto;
}
.list-row {
padding: 10px;
margin-bottom: 10px;
background: var(--alt-bg-color);
border-radius: 5px;
overflow: auto;
}
.list-col-image {
float: left;
width: 38px;
display: table-cell;
}
.list-col-image img {
width: 100%;
display: block;
border-radius: 3px;
}
.list-col-content {
float: none;
word-break: break-all;
display: table-cell;
padding: 0 10px;
}
.list-col-content-full {
padding: 0 10px 0 0;
}
.list-col-button {
float: right;
display: table-cell;
}
.button-create {
margin-bottom: 10px;
}
.center-text {
text-align: center;
}
.content-admin .section {
line-height: 26px;
}
.content-admin .section a {
color: var(--primary-color);
}
.content-admin .section a:hover {
color: var(--secondary-color);
}
.content-home {
padding: 20px 0;
}

.content-home .row {
animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
0% {
 opacity: 0;
 transform: translateY(30px);
 }
 100% {
 opacity: 1;
 transform: translateY(0);
 }
}
.content-home form {
display: none;
}
.divider {
height: 1px;
background: var(--divider-bg-color);
}
.content-admin .divider {
margin: 10px 0
}
input.search-input {
width: 100%;
box-sizing: border-box;
font-size: 16px;
max-width: none;
padding: 14px 90px 14px 20px;
margin-bottom: 0;
height: 50px;
background: var(--input-bg-color-alt);
border-color: var(--input-border-color-alt);
border-radius: 25px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
font-weight: 500;
position: relative;
}

input.search-input:focus {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
}
.search-button {
background-image: url('../images/icons/search.svg');
background-position: center center;
background-repeat: no-repeat;
background-color: var(--primary-color);
background-size: 20px;
padding: 0;
border-radius: 50%;
height: 34px;
width: 34px;
cursor: pointer;
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border: none;
display: flex;
align-items: center;
justify-content: center;
}
.search-button:hover {
background-color: var(--secondary-color);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
.clear-button {
background: url('../images/icons/clear.svg') no-repeat center center;
background-size: 14px;
padding: 0;
width: 34px;
height: 34px;
cursor: pointer;
position: absolute;
right: 48px;
top: 50%;
transform: translateY(-50%);
filter: var(--button-clear-invert);
transition: all 0.3s ease;
border-radius: 50%;
border: none;
display: flex;
align-items: center;
justify-content: center;
}
.clear-button:hover {
filter: var(--button-clear-invert-h);
transform: translateY(-50%) scale(1.1) rotate(90deg);
background-color: rgba(0, 0, 0, 0.05);
}
.button-round-container {
margin-left: 10px;
float: right;
border-radius: 50%;
width: 42px;
height: 42px;
border: 2px solid var(--wn-color);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.button-round-container:hover, .button-round-active {
background: var(--wn-color);
transform: scale(1.15) rotate(10deg);
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.4);
}
.button-round-container:hover > .favorite, .button-round-container:hover > .format-c, .button-round-container:hover > .format-f, .button-round-active .favorite {
filter: var(--button-round-h);
}
.button-round {
width: 22px;
height: 22px;
filter: var(--button-round);
transition: all 0.3s ease;
}
.favorite {
background: url('../images/icons/favorite.svg') no-repeat center center;
background-size: 18px;
}
.format-c {
background: url('../images/icons/format_c.svg') no-repeat center center;
background-size: 18px;
}
.format-f {
background: url('../images/icons/format_f.svg') no-repeat center center;
background-size: 18px;
}
.search-container {
position: relative;
width: 100%;
overflow: visible;
}
.search-content {
box-sizing: border-box;
position: relative;
margin: 7px 0;
float: left;
max-width: 400px;
width: 100%;
padding: 0;
}
.weather-now {
position: relative;
padding: 40px 30px;
background-color: var(--primary-color);
color: var(--wn-color);
overflow: hidden;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3), 0 0 100px rgba(102, 126, 234, 0.2) inset;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
margin-bottom: 20px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.weather-now:hover {
transform: translateY(-5px);
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4), 0 0 120px rgba(102, 126, 234, 0.3) inset;
}

.weather-now::after {
content: '';
display: table;
clear: both;
}

.wn-title, .wf-title, .ls-title, .we-title, .wi-title, .error-title {
font-size: 24px;
font-weight: 600;
letter-spacing: 0.5px;
}

.wn-title {
margin-bottom: 15px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.error-header {
background: var(--primary-color);
padding: 20px;
color: var(--wn-color);
}
.error-description {
padding: 10px 0;
font-size: 14px;
}
.wn-location {
font-size: 42px;
font-weight: 800;
margin-bottom: 25px;
text-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
letter-spacing: -0.5px;
}

.wn-location a {
color: var(--wn-color);
position: relative;
transition: all 0.3s ease;
}

.wn-location a:hover {
text-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
transform: scale(1.02);
display: inline-block;
}
.wn-box {
margin-top: 25px;
width: 33.33333%;
float: left;
padding: 0 10px;
box-sizing: border-box;
}
.wn-temperature {
font-size: 80px;
font-weight: 300;
letter-spacing: -2px;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
line-height: 1;
margin-bottom: 10px;
}
.wn-conditions {
font-size: 15px;
padding-top: 15px;
line-height: 32px;
background: rgba(255, 255, 255, 0.1);
border-radius: 16px;
padding: 20px;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.weather-now img {
filter: var(--wn-img);
}
.weather-forecast img {
filter: var(--wf-img);
}
.wn-icon {
width: 70px;
height: 70px;
position: relative;
drop-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease;
}

.wn-icon:hover {
transform: scale(1.1) rotate(5deg);
}

/* Weather overlay effects */
.weather-icon-wrapper {
position: relative;
display: inline-block;
transition: transform 0.3s ease;
}

.weather-icon-wrapper:hover {
transform: scale(1.05);
}

.weather-icon-wrapper .wn-icon,
.weather-icon-wrapper .wf-icon {
position: relative;
z-index: 1;
}

/* Sun overlay for clear/sunny weather */
.weather-overlay-sun {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
}

.weather-overlay-sun::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
height: 60%;
background: radial-gradient(circle, rgba(255, 223, 0, 0.6) 0%, rgba(255, 200, 0, 0.3) 50%, transparent 70%);
border-radius: 50%;
animation: sunPulse 3s ease-in-out infinite;
}

.weather-overlay-sun::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
background: radial-gradient(circle, rgba(255, 223, 0, 0.3) 0%, transparent 60%);
border-radius: 50%;
animation: sunGlow 4s ease-in-out infinite;
}

@keyframes sunPulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.8; }
}

@keyframes sunGlow {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
50% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.5; }
}

/* Cloud overlay for cloudy weather */
.weather-overlay-cloud {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
overflow: hidden;
}

.weather-overlay-cloud::before,
.weather-overlay-cloud::after {
content: '';
position: absolute;
background: rgba(200, 200, 220, 0.4);
border-radius: 50%;
animation: cloudFloat 6s ease-in-out infinite;
}

.weather-overlay-cloud::before {
width: 30%;
height: 20%;
top: 10%;
left: -30%;
animation-delay: 0s;
}

.weather-overlay-cloud::after {
width: 25%;
height: 18%;
top: 60%;
left: -25%;
animation-delay: 3s;
}

@keyframes cloudFloat {
0% { transform: translateX(0); }
100% { transform: translateX(150px); }
}

/* Rain overlay */
.weather-overlay-rain {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
overflow: hidden;
}

.weather-overlay-rain::before,
.weather-overlay-rain::after {
content: '';
position: absolute;
width: 1px;
height: 8px;
background: linear-gradient(to bottom, rgba(100, 150, 200, 0.8), transparent);
animation: rainDrop 1s linear infinite;
}

.weather-overlay-rain::before {
left: 30%;
top: -10px;
animation-delay: 0s;
}

.weather-overlay-rain::after {
left: 70%;
top: -10px;
animation-delay: 0.5s;
}

@keyframes rainDrop {
0% { transform: translateY(0); opacity: 1; }
100% { transform: translateY(50px); opacity: 0; }
}

/* Snow overlay */
.weather-overlay-snow {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
overflow: hidden;
}

.weather-overlay-snow::before,
.weather-overlay-snow::after {
content: '❄';
position: absolute;
color: rgba(200, 220, 255, 0.8);
font-size: 10px;
animation: snowFall 3s linear infinite;
}

.weather-overlay-snow::before {
left: 25%;
top: -10px;
animation-delay: 0s;
}

.weather-overlay-snow::after {
left: 65%;
top: -10px;
animation-delay: 1.5s;
}

@keyframes snowFall {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
100% { transform: translateY(55px) rotate(360deg); opacity: 0; }
}

/* Thunder/Storm overlay */
.weather-overlay-thunder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
overflow: hidden;
}

.weather-overlay-thunder::before {
content: '⚡';
position: absolute;
top: 20%;
left: 50%;
transform: translateX(-50%);
color: rgba(255, 223, 0, 0.9);
font-size: 14px;
animation: thunderFlash 2s ease-in-out infinite;
}

@keyframes thunderFlash {
0%, 45%, 55%, 100% { opacity: 0; }
50% { opacity: 1; }
}

/* Wind overlay */
.weather-overlay-wind {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
overflow: hidden;
}

.weather-overlay-wind::before,
.weather-overlay-wind::after {
content: '';
position: absolute;
height: 2px;
background: linear-gradient(to right, transparent, rgba(150, 150, 150, 0.4), transparent);
animation: windBlow 2s ease-in-out infinite;
}

.weather-overlay-wind::before {
width: 60%;
top: 30%;
left: -60%;
animation-delay: 0s;
}

.weather-overlay-wind::after {
width: 50%;
top: 60%;
left: -50%;
animation-delay: 1s;
}

@keyframes windBlow {
0% { transform: translateX(0); }
100% { transform: translateX(120px); }
}

/* Mist/Fog overlay */
.weather-overlay-mist {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
background: linear-gradient(to bottom, rgba(200, 200, 200, 0.2), rgba(150, 150, 150, 0.3), rgba(200, 200, 200, 0.2));
animation: mistMove 4s ease-in-out infinite;
}

@keyframes mistMove {
0%, 100% { opacity: 0.3; }
50% { opacity: 0.6; }
}
.wn-box-condition-row, .wf-condition-row {
width: 100%;
overflow: auto;
padding: 8px 0;
transition: all 0.2s ease;
}

.wn-box-condition-row:hover {
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
padding-left: 5px;
}
.wf-condition-row {
padding: 3px 0;
}
.wn-conditions img, .wf-conditions img {
float: left;
width: 20px;
height: 20px;
margin: 6px 12px 0 0;
vertical-align: middle;
display: table-cell;
opacity: 0.9;
}
.wf-conditions img {
margin: 0 10px 0 0;
}
.wn-conditions-text, .wf-conditions-text {
vertical-align: middle;
display: table-cell;
}
.weather-forecast, .latest-searches, .weather-evolution, .weather-info {
background: var(--alt-bg-color);
padding: 25px 30px;
overflow: auto;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
transition: all 0.3s ease;
}

.latest-searches {
overflow: visible;
clear: both;
}

.latest-searches::after {
content: '';
display: table;
clear: both;
}

.weather-forecast:hover, .latest-searches:hover, .weather-evolution:hover, .weather-info:hover {
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
transform: translateY(-3px);
}
.wf-title {
padding-top: 0;
margin-bottom: 20px;
font-weight: 600;
border-bottom: 3px solid var(--primary-color);
padding-bottom: 15px;
display: inline-block;
}
a.wf-list {
color: var(--text-color);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
a.wf-list:hover {
color: var(--url-color);
background-color: var(--wf-list-h);
transform: translateX(8px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.wf-list {
background: var(--background-color);
border-radius: 16px;
width: 100%;
padding: 18px;
margin: 15px 0 0 0;
box-sizing: border-box;
float: left;
font-size: 14px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(102, 126, 234, 0.1);
transition: all 0.3s ease;
}

.wf-list:first-child {
margin-top: 5px;
}
.wf-list-col {
width: 33.33333%;
float: left;
}
.wf-day {
font-size: 20px;
padding: 0 0 8px 0;
font-weight: 600;
color: var(--primary-color);
}
.wf-date {
padding: 0 0 2px 0;
opacity: 0.7;
font-size: 13px;
}
.wf-icon, .wf-temp {
width: 50%;
display: flex;
float: left;
}
.wf-temp {
min-height: 50px;
flex-direction: row-reverse;
}
.wf-icon img {
width: 54px;
height: 54px;
margin: 3px auto;
drop-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease;
}

.wf-icon img:hover {
transform: scale(1.15) rotate(5deg);
}
.wf-temp-min, .wf-temp-max {
align-self: flex-end;
display: inline-block;
}
.wf-temp-min {
font-size: 24px;
margin: 0 10px 5px 0;
color: var(--min-temp);
font-weight: 300;
}
.wf-temp-max {
font-size: 40px;
font-weight: 600;
letter-spacing: -1px;
}
.wi-title {
margin-bottom: 20px;
font-weight: 600;
border-bottom: 3px solid var(--primary-color);
padding-bottom: 15px;
display: inline-block;
}
.wi-content {
display: grid;
grid-template-columns: auto auto;
grid-column-gap: 15px;
grid-row-gap: 15px;
}
.wi-item {
background: var(--background-color);
border-radius: 16px;
font-size: 14px;
padding: 18px;
box-sizing: border-box;
border: 1px solid rgba(102, 126, 234, 0.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}

.wi-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
border-color: var(--primary-color);
}
.wi-icon {
float: left;
}
.wi-icon img {
width: 48px;
height: 48px;
margin: 3px auto;
filter: var(--wf-img);
transition: transform 0.3s ease;
}

.wi-icon img:hover {
transform: scale(1.1);
}
.wi-description {
margin-left: 54px;
}
.wi-name {
padding: 0 0 8px 0;
font-weight: 500;
opacity: 0.75;
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.wi-value {
font-size: 20px;
padding: 0 0 2px 0;
font-weight: 600;
color: var(--primary-color);
}
.ls-title {
margin-bottom: 20px;
font-weight: 600;
border-bottom: 3px solid var(--primary-color);
padding-bottom: 15px;
display: inline-block;
width: 100%;
}
.latest-searches .button {
margin-bottom: 10px;
text-transform: capitalize;
word-break: break-word;
overflow: hidden;
font-size: 14px;
color: #000000;
padding: 12px 20px;
border-radius: 12px;
font-weight: 500;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
border: 2px solid transparent;
margin-right: 10px;
display: inline-block;
max-width: 100%;
box-sizing: border-box;
float: none;
vertical-align: top;
white-space: normal;
}

.latest-searches .button:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
border-color: rgba(255, 255, 255, 0.3);
}

.rtl .latest-searches .button {
margin-right: 0;
margin-left: 10px;
}

.latest-searches .float-left {
float: none;
display: inline-block;
}

.latest-searches .button-margin-right {
margin-right: 10px;
}

.rtl .latest-searches .button-margin-right {
margin-right: 0;
margin-left: 10px;
}

.chart-container {
margin-top: 15px;
background: var(--background-color);
border-radius: 16px;
overflow: auto;
font-size: 14px;
padding: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(102, 126, 234, 0.1);
}
.chart-title {
font-size: 15px;
text-align: center;
padding-top: 20px;
font-weight: 600;
color: var(--primary-color);
}
.chart-legends {
width: 100%;
padding: 0 10px 5px 50px;
box-sizing: border-box;
overflow: auto;
}
.chart-legend {
float: left;
margin: 0 20px 10px 0;
}
.legend-color {
width: 14px;
height: 14px;
border-radius: 3px;
float: left;
}
.legend-neutral {
background: var(--primary-color);
}
.legend-min {
background: var(--graph-min-color);
}
.legend-max {
background: var(--graph-max-color);
}
.legend-name {
vertical-align: middle;
display: table-cell;
padding-left: 5px;
line-height: 14px;
}
.timezone {
margin-top: 15px;
padding: 12px 18px;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
text-align: center;
font-size: 13px;
opacity: 0.8;
letter-spacing: 0.3px;
}
.fav-list, .search-list {
max-width: 400px;
background-color: var(--alt-bg-color-h);
width: 100%;
box-sizing: border-box;
font-weight: 600;
margin-top: 7px;
overflow: auto;
z-index: 1;
display: none;
position: absolute;
}
.fav-list-container, .search-list-container {
max-height: 500px;
overflow: inherit;
}
.fav-list-title, .fav-list-item, .search-list-title, .search-list-item {
text-align: left;
}
.fav-list-title, .search-list-title {
padding: 10px 30px 10px 10px;
}
.fav-list-item, .search-list-item {
line-height: 50px;
width: 100%;
padding: 0 0 0 10px;
box-sizing: border-box;
}
.fav-list-name, .search-list-name {
margin-right: 30px;
}
.fav-list-icon, .search-list-icon {
background: url('../images/icons/clear.svg') no-repeat center center;
background-size: 14px;
padding: 0 10px;
cursor: pointer;
height: 50px;
width: 14px;
float: right;
filter: var(--button-remove-invert);
}
.fav-list-icon:hover, .search-list-icon:hover {
filter: var(--button-remove-invert-h);
}
.fav-list-close, .search-list-close {
height: 38px;
}
/* Chartist */
.ct-series-a .ct-point, .ct-series-a .ct-line, .ct-series-a .ct-bar, .ct-series-a .ct-slice-donut {
stroke: var(--graph-max-color);
}
.hourly .ct-series-a .ct-point, .hourly .ct-series-a .ct-line, .hourly .ct-series-a .ct-bar, .hourly .ct-series-a .ct-slice-donut {
stroke: var(--primary-color);
}
.ct-series-b .ct-point, .ct-series-b .ct-line, .ct-series-b .ct-bar, .ct-series-b .ct-slice-donut {
stroke: var(--graph-min-color);
}
.ct-grid {
stroke: var(--alt-bg-color);
stroke-dasharray: none;
}
.ct-label {
color: var(--text-color);
}
.ct-chart-line .ct-label, .ct-chart-bar .ct-label {
font-size: 13px;
}
.rtl body {
direction: rtl;
}
.rtl .logo img {
margin: 0 0 0 10px;
}
.rtl .search-content {
float: right;
}
.rtl input.search-input {
padding: 9px 9px 9px 80px;
}
.rtl input[type="checkbox"] {
margin: 0 0 10px 10px;
}
.rtl .clear-button {
right: unset;
left: 48px;
}
.rtl .search-button {
right: unset;
left: 8px;
}
.rtl .header-col-menu {
margin: 0 10px 0 0;
}
.rtl .fav-list-title, .rtl .search-list-title {
padding: 10px 10px 10px 30px;
}
.rtl .fav-list-icon, .rtl .search-list-icon {
float: left;
}
.rtl .fav-list-title, .rtl .fav-list-item, .rtl .search-list-title, .rtl .search-list-item {
text-align: right;
}
.rtl .fav-list-item, .rtl .search-list-item {
padding: 0 10px 0 0;
}
.rtl .fav-list-name, .rtl .search-list-name {
margin: 0 0 0 30px;
}
.rtl .menu {
left: 0;
right: unset;
}
.rtl .menu-icon {
margin: 0 0 0 10px;
float: right;
}
.rtl .page-menu-left a {
float: right;
margin: 0 0 0 20px;
}
.rtl .notification-box > p {
padding: 0 0 0 20px;
}
.rtl .notification-close {
right: unset;
left: 0;
}
.rtl .list-col-button {
float: left;
}
.rtl .list-col-image {
float: right;
}
.rtl .float-left {
float: right;
}
.rtl .float-right {
float: left;
}
.rtl .button-margin-right {
margin: 0 0 0 10px;
}
.rtl .button-margin-left {
margin: 0 10px 0 0;
}
.rtl .latest-searches .button {
margin-bottom: 10px;
}
.rtl .button-round-container {
float: left;
margin: 0 10px 0 0;
}
.rtl .wn-box {
float: right;
}
.rtl .wn-conditions img {
margin: 5px 0 0 10px;
float: right;
}
.rtl .wf-conditions img {
margin: 0 0 0 10px;
float: right;
}
.rtl .wf-list-col {
float: right;
}
.rtl .wf-icon, .rtl .wf-temp {
float: right;
}
.rtl .wf-temp-min {
margin: 0 0 5px 10px;
}
.rtl .wi-icon {
float: right;
}
.rtl .wi-description {
margin-right: 54px;
}
.rtl .chart-legend {
float: right;
}
.rtl .legend-name {
padding: 0 5px 0 0;
}
.rtl .legend-color {
float: right;
}
.rtl .ct-label.ct-horizontal.ct-end {
align-items: flex-end;
justify-content: flex-end;
}
.rtl .footer-element {
float: right;
margin: 0 0 0 15px;
}

/* Extra large screens - limit max width and center nicely */
@media only screen and (min-width: 1400px) {
    .row {
    max-width: 1200px;
    }
    .weather-now {
    padding: 50px 40px;
    }
    .wn-temperature {
    font-size: 96px;
    }
    .wn-location {
    font-size: 48px;
    }
    .wn-icon {
    width: 80px;
    height: 80px;
    }
    .weather-forecast, .latest-searches, .weather-evolution, .weather-info {
    padding: 30px 35px;
    }
    .wi-content {
    grid-template-columns: repeat(4, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    }
    .wf-icon img {
    width: 60px;
    height: 60px;
    }
    .wf-temp-max {
    font-size: 44px;
    }
    .wf-temp-min {
    font-size: 26px;
    }
}

/* Large tablets and small desktops */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .row {
    max-width: 100%;
    padding: 0 20px;
    }
    .weather-now {
    padding: 35px 25px;
    }
    .wn-temperature {
    font-size: 72px;
    }
    .wn-location {
    font-size: 38px;
    }
    .wn-icon {
    width: 65px;
    height: 65px;
    }
    .weather-forecast, .latest-searches, .weather-evolution, .weather-info {
    padding: 22px 25px;
    }
    .wi-content {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 12px;
    }
}
@media only screen and (max-device-width: 768px), only screen and (device-width: 768px) and (device-height: 768px), only screen and (width: 768px) and (orientation: landscape), only screen and (device-width: 768px), only screen and (max-width: 768px) {
    input[type="text"],
    input[type="password"],
    input[type="file"],
    textarea,
    select {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    }
    .row .four, .row .six {
    width: 100%;
    }
    .menu {
    box-sizing: border-box;
    position: absolute;
    right: 0;
    width: 240px;
    }
    .menu-content {
    width: 100%;
    max-width: none;
    }
    .content-home {
    padding: 10px 0;
    }
    .content-home .row {
    padding: 0 10px;
    margin-bottom: 15px;
    }
    .search-content {
    max-width: 100%;
    width: 100%;
    float: none;
    }
    .search-container {
    width: 100%;
    }
    .weather-forecast, .latest-searches, .weather-evolution, .weather-info {
    padding: 20px 15px;
    border-radius: 16px;
    margin-bottom: 15px;
    }
    .latest-searches {
    text-align: left;
    }
    .weather-now {
    padding: 30px 20px;
    border-radius: 20px;
    }
    .wn-location {
    font-size: 32px;
    margin-bottom: 20px;
    }
    .wn-temperature {
    font-size: 64px;
    }
    .wn-icon {
    width: 60px;
    height: 60px;
    }
    .trending-tags li {
    width: 100%;
    }
    .wn-box {
    width: 100%;
    padding: 0;
    margin-top: 20px;
    }
    .wn-conditions {
    padding: 15px;
    margin-top: 15px;
    }
    .wf-list {
    padding: 15px;
    border-radius: 14px;
    }
    .wf-list-col {
    width: 100%;
    margin-bottom: 15px;
    }
    .wf-date {
    width: auto;
    margin-bottom: 10px;
    }
    .wf-conditions {
    width: auto;
    margin-bottom: 10px;
    }
    .wf-temp-icon {
    margin-top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    }
    .wf-icon {
    width: auto;
    }
    .wf-icon img {
    margin: 0;
    width: 50px;
    height: 50px;
    }
    .wf-temp {
    flex-direction: row;
    width: auto;
    align-items: center;
    }
    .wf-temp-min {
    margin-right: 15px;
    font-size: 22px;
    }
    .wf-temp-max {
    margin-right: 0;
    font-size: 36px;
    }
    .wf-day {
    font-size: 18px;
    }
    .wi-content {
    grid-template-columns: 1fr;
    grid-row-gap: 12px;
    }
    .wi-item {
    padding: 15px;
    }
    .chart-container {
    padding: 15px 10px;
    }
    .fav-list, .search-list {
    position: fixed;
    left: 10px;
    right: 10px;
    margin: 0;
    top: 60px;
    max-width: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    }
    .fav-list-icon, .search-list-icon {
    padding: 0 8px;
    margin-right: 10px;
    }
    .rtl .fav-list-icon, .rtl .search-list-icon {
    margin: 0 0 0 10px;
    }
    input.search-input {
    height: 48px;
    padding: 12px 85px 12px 18px;
    font-size: 16px;
    }
    .rtl input.search-input {
    padding: 12px 18px 12px 85px;
    }
    .search-button, .clear-button {
    width: 32px;
    height: 32px;
    }
    .search-button {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background-size: 18px;
    }
    .search-button:hover {
    transform: translateY(-50%) scale(1.1);
    }
    .clear-button {
    right: 46px;
    top: 50%;
    transform: translateY(-50%);
    background-size: 13px;
    }
    .clear-button:hover {
    transform: translateY(-50%) scale(1.1) rotate(90deg);
    }
    .button-round-container {
    width: 38px;
    height: 38px;
    }
    .latest-searches .button {
    padding: 10px 16px;
    font-size: 13px;
    margin-right: 8px;
    margin-bottom: 10px;
    display: inline-block;
    word-break: break-word;
    max-width: calc(100% - 8px);
    float: none;
    white-space: normal;
    }
    .rtl .latest-searches .button {
    margin-right: 0;
    margin-left: 8px;
    max-width: calc(100% - 8px);
    }
}
@media only screen and (max-device-width: 480px), only screen and (device-width: 480px) and (device-height: 480px), only screen and (width: 480px) and (orientation: landscape), only screen and (device-width: 480px), only screen and (max-width: 480px) {
    .fav-list-container, .search-list-container {
    max-height: 400px;
    }
    .menu {
    top: 50px;
    padding: 0;
    left: 0;
    right: 0;
    width: 100%;
    position: fixed;
    border-radius: 0;
    max-height: calc(100vh - 50px);
    overflow-y: auto;
    }
    .menu-content {
    width: 100%;
    max-width: none;
    }
    .row {
    padding: 0 5px;
    }
    .search-content {
    max-width: 100%;
    width: 100%;
    float: none;
    margin: 5px 0;
    }
    .search-container {
    width: 100%;
    }
    .weather-now {
    padding: 25px 15px;
    border-radius: 16px;
    margin-bottom: 12px;
    }
    .wn-title {
    font-size: 20px;
    margin-bottom: 12px;
    }
    .wn-location {
    font-size: 28px;
    margin-bottom: 15px;
    }
    .wn-temperature {
    font-size: 56px;
    margin-bottom: 15px;
    }
    .wn-icon {
    width: 50px;
    height: 50px;
    }
    .wn-box {
    margin-top: 15px;
    }
    .wn-conditions {
    padding: 12px;
    font-size: 14px;
    line-height: 28px;
    }
    .wn-box-condition-row {
    padding: 6px 0;
    }
    .wn-conditions img {
    width: 18px;
    height: 18px;
    margin: 5px 10px 0 0;
    }
    .weather-forecast, .latest-searches, .weather-evolution, .weather-info {
    padding: 18px 12px;
    border-radius: 14px;
    margin-bottom: 12px;
    }
    .latest-searches {
    text-align: left;
    }
    .wf-title, .ls-title, .we-title, .wi-title {
    font-size: 20px;
    margin-bottom: 15px;
    padding-bottom: 12px;
    }
    .wf-list {
    padding: 12px;
    margin: 12px 0 0 0;
    border-radius: 12px;
    }
    .wf-list:first-child {
    margin-top: 5px;
    }
    .wf-list-col {
    margin-bottom: 12px;
    }
    .wf-day {
    font-size: 16px;
    padding-bottom: 6px;
    }
    .wf-date {
    font-size: 12px;
    }
    .wf-icon img {
    width: 44px;
    height: 44px;
    }
    .wf-temp-max {
    font-size: 32px;
    }
    .wf-temp-min {
    font-size: 20px;
    margin-right: 12px;
    }
    .wi-item {
    padding: 12px;
    }
    .wi-icon img {
    width: 40px;
    height: 40px;
    }
    .wi-description {
    margin-left: 48px;
    }
    .wi-name {
    font-size: 11px;
    padding-bottom: 6px;
    }
    .wi-value {
    font-size: 18px;
    }
    .chart-container {
    padding: 12px 8px;
    border-radius: 12px;
    }
    .chart-title {
    font-size: 14px;
    padding-top: 15px;
    }
    .chart-legends {
    padding: 5px 10px 5px 30px;
    }
    .chart-legend {
    margin: 0 15px 8px 0;
    font-size: 12px;
    }
    .timezone {
    padding: 10px 14px;
    font-size: 12px;
    margin-top: 12px;
    }
    .latest-searches .button {
    padding: 8px 14px;
    font-size: 12px;
    margin-bottom: 8px;
    border-radius: 10px;
    margin-right: 6px;
    display: inline-block;
    width: auto;
    max-width: calc(100% - 6px);
    float: none;
    white-space: normal;
    word-break: break-word;
    }
    .rtl .latest-searches .button {
    margin-right: 0;
    margin-left: 6px;
    max-width: calc(100% - 6px);
    }
    input.search-input {
    height: 46px;
    padding: 10px 80px 10px 16px;
    font-size: 15px;
    border-radius: 23px;
    }
    .rtl input.search-input {
    padding: 10px 16px 10px 80px;
    }
    .search-button, .clear-button {
    width: 30px;
    height: 30px;
    }
    .search-button {
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background-size: 16px;
    }
    .search-button:hover {
    transform: translateY(-50%) scale(1.1);
    }
    .clear-button {
    right: 44px;
    top: 50%;
    transform: translateY(-50%);
    background-size: 12px;
    }
    .clear-button:hover {
    transform: translateY(-50%) scale(1.1) rotate(90deg);
    }
    .rtl .search-button {
    left: 8px;
    right: unset;
    }
    .rtl .clear-button {
    left: 44px;
    right: unset;
    }
    .button-round-container {
    width: 36px;
    height: 36px;
    margin-left: 8px;
    }
    .button-round {
    width: 20px;
    height: 20px;
    }
    .header-content {
    padding: 0 8px;
    }
    .logo {
    height: 32px;
    margin: 9px 0;
    }
    .header-icon {
    background-size: 18px;
    }
    .fav-list, .search-list {
    left: 5px;
    right: 5px;
    top: 55px;
    border-radius: 10px;
    }
    .page-content {
    padding: 15px 0;
    }
    
    /* Page post content styling - like a blog post */
    .page-post-content {
    line-height: 1.8;
    font-size: 16px;
    color: var(--text-color);
    }
    
    .page-post-content h1 {
    font-size: 36px;
    font-weight: 700;
    margin: 30px 0 20px 0;
    line-height: 1.3;
    color: var(--primary-color);
    }
    
    .page-post-content h2 {
    font-size: 28px;
    font-weight: 600;
    margin: 25px 0 15px 0;
    line-height: 1.4;
    color: var(--secondary-color);
    }
    
    .page-post-content h3 {
    font-size: 22px;
    font-weight: 600;
    margin: 20px 0 12px 0;
    line-height: 1.4;
    }
    
    .page-post-content h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 18px 0 10px 0;
    }
    
    .page-post-content h5 {
    font-size: 16px;
    font-weight: 600;
    margin: 15px 0 8px 0;
    }
    
    .page-post-content h6 {
    font-size: 14px;
    font-weight: 600;
    margin: 12px 0 6px 0;
    }
    
    .page-post-content p {
    margin: 0 0 15px 0;
    line-height: 1.8;
    }
    
    .page-post-content strong,
    .page-post-content b {
    font-weight: 700;
    color: var(--text-color);
    }
    
    .page-post-content em,
    .page-post-content i {
    font-style: italic;
    }
    
    .page-post-content ul,
    .page-post-content ol {
    margin: 15px 0 15px 30px;
    padding: 0;
    }
    
    .page-post-content ul li,
    .page-post-content ol li {
    margin-bottom: 8px;
    line-height: 1.7;
    }
    
    .page-post-content ul {
    list-style-type: disc;
    }
    
    .page-post-content ol {
    list-style-type: decimal;
    }
    
    .page-post-content a {
    color: var(--primary-color);
    text-decoration: underline;
    transition: color 0.3s ease;
    }
    
    .page-post-content a:hover {
    color: var(--secondary-color);
    }
    
    .page-post-content blockquote {
    margin: 20px 0;
    padding: 15px 20px;
    background: var(--alt-bg-color);
    border-left: 4px solid var(--primary-color);
    border-radius: 8px;
    font-style: italic;
    }
    
    .page-post-content code {
    background: var(--alt-bg-color);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    }
    
    .page-post-content pre {
    background: var(--alt-bg-color);
    padding: 15px;
    border-radius: 8px;
    overflow-x: auto;
    margin: 15px 0;
    }
    
    .page-post-content pre code {
    background: transparent;
    padding: 0;
    }
    
    .page-post-content img {
    max-width: 100%;
    height: auto;
    margin: 20px 0;
    border-radius: 8px;
    display: block;
    }
    
    .page-post-content table {
    width: 100%;
    margin: 20px 0;
    border-collapse: collapse;
    }
    
    .page-post-content table th,
    .page-post-content table td {
    padding: 12px;
    border: 1px solid var(--divider-bg-color);
    text-align: left;
    }
    
    .page-post-content table th {
    background: var(--alt-bg-color);
    font-weight: 600;
    }
    
    .page-post-content hr {
    margin: 25px 0;
    border: none;
    border-top: 2px solid var(--divider-bg-color);
    }
    
    h1 {
    font-size: 36px;
    padding: 5px 10px;
    }
    .header-content {
    flex-wrap: nowrap;
    }
    .header-col-content {
    min-width: 0;
    flex: 1 1 auto;
    }
}

/* Small phones in landscape */
@media only screen and (max-height: 480px) and (orientation: landscape) {
    .search-content {
    max-width: 100%;
    width: 100%;
    float: none;
    }
    .search-container {
    width: 100%;
    }
    input.search-input {
    height: 40px;
    padding: 8px 75px 8px 14px;
    font-size: 14px;
    }
    .rtl input.search-input {
    padding: 8px 14px 8px 75px;
    }
    .search-button, .clear-button {
    width: 28px;
    height: 28px;
    }
    .search-button {
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background-size: 14px;
    }
    .search-button:hover {
    transform: translateY(-50%) scale(1.05);
    }
    .clear-button {
    right: 38px;
    top: 50%;
    transform: translateY(-50%);
    background-size: 11px;
    }
    .clear-button:hover {
    transform: translateY(-50%) scale(1.05) rotate(90deg);
    }
    .rtl .search-button {
    left: 6px;
    right: unset;
    }
    .rtl .clear-button {
    left: 38px;
    right: unset;
    }
    .latest-searches .button {
    padding: 6px 12px;
    font-size: 11px;
    margin-bottom: 6px;
    margin-right: 5px;
    max-width: calc(100% - 5px);
    float: none;
    display: inline-block;
    white-space: normal;
    word-break: break-word;
    }
    .rtl .latest-searches .button {
    margin-right: 0;
    margin-left: 5px;
    max-width: calc(100% - 5px);
    }
    .weather-now {
    padding: 20px 15px;
    margin-bottom: 10px;
    }
    .wn-title {
    font-size: 18px;
    margin-bottom: 8px;
    }
    .wn-location {
    font-size: 24px;
    margin-bottom: 10px;
    }
    .wn-temperature {
    font-size: 42px;
    margin-bottom: 10px;
    }
    .wn-box {
    margin-top: 10px;
    width: 33.33%;
    float: left;
    padding: 0 5px;
    }
    .wn-icon {
    width: 40px;
    height: 40px;
    }
    .wn-conditions {
    padding: 10px;
    font-size: 12px;
    line-height: 24px;
    }
    .weather-forecast, .latest-searches, .weather-evolution, .weather-info {
    padding: 15px 12px;
    margin-bottom: 10px;
    }
    .latest-searches {
    text-align: left;
    }
    .wf-title, .ls-title, .we-title, .wi-title {
    font-size: 18px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    }
    .row {
    margin-bottom: 10px;
    }
}
#loading-bar {
position: fixed;
z-index: 2147483647;
top: 0;
left: 0;
width: 0;
height: 3px;
background: var(--primary-color);
transition: width 500ms ease-out, opacity 400ms linear;
}
::selection {
background: var(--selection-background);
color: var(--selection-color);
}