/* Vicilook Weather 3.0 — modern glass UI */


/* =========================================================
   MAIN WEATHER CONTAINER
========================================================= */

#vicilook-weather-container,
.vl-static-card {
    --vl-radius: 22px;
    --vl-accent: #7c5cff;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;

    width: 100%;
    max-width: 430px;

    margin: 18px auto;
    padding: 10px;

    border-radius: var(--vl-radius);

    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #fff;

    background: linear-gradient(
        135deg,
        #17143b 0%,
        #31205f 48%,
        #102d55 100%
    );

    border: 1px solid rgba(255, 255, 255, .18);

    box-shadow:
        0 24px 70px rgba(24, 17, 62, .28),
        inset 0 1px 0 rgba(255, 255, 255, .16);

    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

#vicilook-weather-container:hover,
.vl-static-card:hover {
    transform: translateY(-2px);

    box-shadow:
        0 28px 80px rgba(24, 17, 62, .34),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}


/* =========================================================
   BACKGROUND GLOWS
========================================================= */

.vl-glow {
    position: absolute;
    z-index: -1;

    border-radius: 999px;

    filter: blur(10px);
    opacity: .65;

    pointer-events: none;
}

.vl-glow-one {
    width: 180px;
    height: 180px;

    right: -70px;
    top: -90px;

    background: var(--vl-accent);
}

.vl-glow-two {
    width: 150px;
    height: 150px;

    left: -80px;
    bottom: -80px;

    background: #20d9c4;
}


/* =========================================================
   THEMES
========================================================= */

.vl-theme-aurora {
    background: linear-gradient(
        135deg,
        #18143d,
        #50358b 52%,
        #075d72
    );
}

.vl-theme-sunset {
    background: linear-gradient(
        135deg,
        #3a183b,
        #8f3c62 48%,
        #d8793f
    );
}

.vl-theme-ocean {
    background: linear-gradient(
        135deg,
        #092b4c,
        #126a83 50%,
        #1e9a91
    );
}

.vl-theme-dark_glass {
    background: linear-gradient(
        135deg,
        rgba(10, 12, 24, .92),
        rgba(34, 38, 62, .78)
    );
}

.vl-theme-light_glass {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, .82),
        rgba(220, 232, 255, .76)
    );

    color: #15213b;

    border-color: rgba(255, 255, 255, .7);

    box-shadow:
        0 24px 70px rgba(61, 85, 130, .18),
        inset 0 1px 0 #fff;
}

.vl-theme-light_glass .vl-desc,
.vl-theme-light_glass .vl-branding a {
    color: #33415e;
}


/* =========================================================
   PRESETS AND SIZES
========================================================= */

.vl-preset-compact {
    max-width: 330px;
    padding: 10px;
}

.vl-preset-standard {
    max-width: 430px;
}

.vl-size-small {
    font-size: 12px;
}

.vl-size-medium {
    font-size: 14px;
}

.vl-size-large {
    font-size: 16px;
}


/* =========================================================
   WEATHER CONTENT
========================================================= */

.vl-weather-content {
    position: relative;
    z-index: 1;

    margin: 0;
    padding: 0;

    min-height: 0;
}


/* =========================================================
   FRONTEND WEATHER GRID

   Rows are structural only.
   They have NO visible lines.

   The admin-selected values control:

   --vl-layout-lines
   --vl-layout-cols
========================================================= */

.vl-weather-grid {
    display: grid;

    grid-auto-flow: column;

    grid-template-columns:
        repeat(
            var(--vl-layout-cols, 2),
            minmax(0, 1fr)
        );

    grid-template-rows:
        repeat(
            var(--vl-layout-lines, 3),
            minmax(0, auto)
        );

    align-items: center;
    align-content: start;

    gap: 3px 8px;

    width: 100%;

    min-height: 0;

    margin: 0;
    padding: 0;

    border: 0 !important;

    background: transparent !important;
}


/* =========================================================
   COMPACT FRONTEND WEATHER LAYOUT
   Humidity, wind and rainfall stay in one right-side column.
========================================================= */

.vl-weather-front-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 10px;
    width: 100%;
    min-width: 0;
}

.vl-weather-main {
    min-width: 0;
}

.vl-weather-meta-column {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 0;
    min-width: max-content;
    padding-top: 2px;
}

.vl-weather-meta-column .vl-meta-item {
    margin: 0 0 5px 0;
}

.vl-weather-meta-column .vl-meta-item:last-child {
    margin-bottom: 0;
}

/* =========================================================
   OPTIONAL COMPACT 1-LINE WEATHER LAYOUT

   Weather information occupies one compact top line:
   location | icon + temperature | stacked metrics.
   The search box remains below it on its own line.
========================================================= */

.vl-compact-one-line .vl-weather-front-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 8px;
}

.vl-compact-one-line .vl-weather-main {
    min-width: 0;
}

.vl-compact-one-line .vl-weather-main .vl-weather-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: minmax(0, auto);
    grid-auto-flow: row;
    align-items: center;
    column-gap: 5px;
    row-gap: 0;
}

.vl-compact-one-line .vl-weather-main .vl-icon-item {
    justify-content: flex-end;
}

.vl-compact-one-line .vl-weather-main .vl-temp-item {
    justify-content: flex-start;
}

.vl-compact-one-line .vl-weather-main .vl-icon {
    width: 44px;
    height: 44px;
}

.vl-compact-one-line .vl-weather-main .vl-weather-temp {
    font-size: 2.65em;
    line-height: .95;
}

.vl-compact-one-line .vl-weather-meta-column {
    gap: 0;
    padding-top: 0;
    align-self: center;
}

.vl-compact-one-line .vl-weather-meta-column .vl-meta-item {
    margin: 0 0 3px 0;
    padding-top: 2px;
    padding-bottom: 2px;
}

.vl-compact-one-line .vl-weather-meta-column .vl-meta-item:last-child {
    margin-bottom: 0;
}

.vl-compact-one-line .vl-search-bar {
    margin-top: 5px !important;
    margin-bottom: 0 !important;
}

/* =========================================================
   WEATHER ITEMS
========================================================= */

.vl-weather-item {
    min-width: 0;
    min-height: 0;

    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;

    border: 0 !important;

    box-shadow: none !important;
}

.vl-city-item {
    display: block;
}

.vl-icon-item {
    justify-content: center;
}

.vl-temp-item {
    justify-content: flex-start;
}


/* =========================================================
   CITY / LOCATION TEXT
========================================================= */

.vl-city {
    font-size: 1.2em;

    font-weight: 750;

    letter-spacing: -.02em;

    line-height: 1.15;
}

.vl-desc {
    display: block;

    margin-top: 2px;

    font-size: .86em;

    line-height: 1.15;

    color: rgba(255, 255, 255, .7);

    text-transform: capitalize;
}


/* =========================================================
   WEATHER ICON
========================================================= */

.vl-icon {
    width: 52px;
    height: 52px;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 12px rgba(0, 0, 0, .22)
        );
}


/* =========================================================
   TEMPERATURE
========================================================= */

.vl-weather-temp {
    font-size: 3.7em;

    font-weight: 800;

    line-height: .92;

    margin: 0;

    letter-spacing: -.06em;
}


/* =========================================================
   WEATHER METADATA
========================================================= */

.vl-meta-item {
    justify-content: flex-start;

    font-size: .8em;

    padding: 3px 6px;

    border-radius: 8px;

    background: rgba(255, 255, 255, .09);

    white-space: nowrap;

    line-height: 1.1;
}

.vl-theme-light_glass .vl-meta-item {
    background: rgba(20, 45, 80, .06);
}


/* =========================================================
   DESKTOP SEARCH / LOCATION INPUT

   Compact version.
   The desktop sizing is kept as the currently accepted
   configuration.
========================================================= */

.vl-search-bar {
    position: relative !important;

    z-index: 2 !important;

    display: flex !important;

    align-items: center !important;

    width: 50% !important;
    max-width: 50% !important;

    height: 22px !important;

    min-height: 22px !important;

    max-height: 22px !important;

    margin-top: 7px !important;
    margin-bottom: 0 !important;

    padding: 1px 3px !important;

    box-sizing: border-box !important;

    gap: 4px !important;

    border-radius: 8px !important;

    background: rgba(0, 0, 0, .15) !important;

    border: 1px solid rgba(255, 255, 255, .12) !important;
}


/* =========================================================
   DESKTOP LOCATION TEXT INPUT
========================================================= */

.vl-search-bar input,
.vl-search-bar input[type="text"],
.vl-search-bar input[type="search"],
.vl-search-bar #vicilook-city-input {

    display: block !important;

    width: 100% !important;

    flex: 1 1 auto !important;

    height: 18px !important;

    min-height: 18px !important;

    max-height: 18px !important;

    margin: 0 !important;

    padding: 1px 6px !important;

    box-sizing: border-box !important;

    border: 0 !important;

    outline: 0 !important;

    background: transparent !important;

    color: inherit !important;

    font: inherit !important;

    font-size: .8em !important;

    line-height: 16px !important;

    box-shadow: none !important;

    border-radius: 0 !important;
}

.vl-search-bar input::placeholder {
    color: currentColor !important;

    opacity: .52 !important;
}


/* =========================================================
   DESKTOP SEARCH BUTTON
========================================================= */

.vl-search-bar button {

    display: grid !important;

    place-items: center !important;

    width: 18px !important;

    min-width: 18px !important;

    max-width: 18px !important;

    height: 18px !important;

    min-height: 18px !important;

    max-height: 18px !important;

    flex: 0 0 18px !important;

    margin: 0 !important;

    padding: 0 !important;

    border: 0 !important;

    border-radius: 6px !important;

    cursor: pointer !important;

    background: var(--vl-accent) !important;

    color: #fff !important;

    box-sizing: border-box !important;

    box-shadow:
        0 4px 10px
        color-mix(
            in srgb,
            var(--vl-accent),
            transparent 55%
        ) !important;

    transition:
        transform .2s,
        filter .2s !important;
}

.vl-search-bar button:hover {
    filter: brightness(1.08) !important;

    transform: translateY(-1px) !important;
}

.vl-search-bar button:disabled {
    opacity: .55 !important;

    cursor: wait !important;
}


/* =========================================================
   BRANDING
========================================================= */

.vl-branding {
    /* Branding shares the weather card's inner content boundary.
       The weather metrics column is aligned to this same boundary. */
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    text-align: center;

    /* v3.0.5: reduce search-to-branding gap by 70% */
    margin-top: 1.5px;
    margin-left: 0;
    margin-right: 0;

    line-height: 1.1;
}

.vl-branding-align-left { text-align: left; }
.vl-branding-align-center { text-align: center; }
.vl-branding-align-right { text-align: right; }

.vl-branding a {
    color: inherit;

    opacity: .58;

    text-decoration: none;
}

.vl-branding a:hover {
    opacity: 1;
}


/* =========================================================
   WELCOME / LOADING / ERROR
========================================================= */

.vl-welcome-prompt,
.vl-loading,
.vl-error {

    text-align: center;

    min-height: 90px;

    display: grid;

    place-items: center;

    align-content: center;

    gap: 7px;

    color: inherit;

    opacity: .8;
}

.vl-welcome-prompt p {
    margin: 0;
}

.vl-weather-mark {
    font-size: 34px;

    color: var(--vl-accent);
}

.vl-error {
    color: #ffb4c0 !important;

    min-height: 70px;
}

.vl-static-error {
    max-width: 430px;

    margin: 15px auto;

    text-align: center;

    color: #c6284d;
}


/* =========================================================
   STATIC WEATHER GRID
========================================================= */

.vl-static-grid {

    display: grid;

    grid-auto-flow: column;

    grid-template-columns:
        repeat(
            var(--vl-layout-cols, 2),
            minmax(0, 1fr)
        );

    grid-template-rows:
        repeat(
            var(--vl-layout-lines, 3),
            minmax(0, auto)
        );

    align-items: center;

    align-content: start;

    gap: 3px 8px;

    margin: 0;

    padding: 0;
}

.vl-static-item {

    min-width: 0;

    display: flex;

    align-items: center;

    margin: 0;

    padding: 0;
}

.vl-static-grid .vl-city-item {
    display: block;
}

.vl-city-name {
    font-weight: 750;

    font-size: 1.1em;
}

.vl-weather-icon {

    width: 48px;

    height: 48px;

    object-fit: contain;
}

.vl-static-desc {

    font-size: .82em;

    opacity: .7;

    margin-top: 2px;

    text-transform: capitalize;

    line-height: 1.1;
}

.vl-static-temp {

    font-size: 2.8em;

    font-weight: 800;

    line-height: .92;

    margin: 6px 0;
}

.vl-static-details {

    display: flex;

    flex-wrap: wrap;

    gap: 4px;

    font-size: .78em;
}

.vl-static-details span {

    background: rgba(255, 255, 255, .1);

    padding: 3px 6px;

    border-radius: 8px;
}


/* =========================================================
   STATIC SHORTCODE — COMPACT 1-LINE LAYOUT
========================================================= */

.vl-static-card.vl-compact-one-line .vl-static-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto max-content;
    grid-template-rows: repeat(3, minmax(0, auto));
    grid-auto-flow: row;
    align-items: center;
    column-gap: 5px;
    row-gap: 2px;
}

.vl-static-card.vl-compact-one-line .vl-city-item {
    grid-column: 1;
    grid-row: 1 / span 3;
}

.vl-static-card.vl-compact-one-line .vl-icon-item {
    grid-column: 2;
    grid-row: 1 / span 3;
    justify-content: flex-end;
}

.vl-static-card.vl-compact-one-line .vl-static-temp {
    grid-column: 3;
    grid-row: 1 / span 3;
}

.vl-static-card.vl-compact-one-line .vl-static-detail {
    grid-column: 4;
    margin: 0;
    padding-top: 2px;
    padding-bottom: 2px;
    justify-self: end;
}

.vl-static-card.vl-compact-one-line .vl-static-detail:nth-of-type(4) { grid-row: 1; }
.vl-static-card.vl-compact-one-line .vl-static-detail:nth-of-type(5) { grid-row: 2; }
.vl-static-card.vl-compact-one-line .vl-static-detail:nth-of-type(6) { grid-row: 3; }

/* =========================================================
   ADMIN PREVIEW — COMPACT 1-LINE LAYOUT
========================================================= */

.vl-weather-card.vl-compact-one-line .vw-preview-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto max-content;
    grid-template-rows: repeat(3, minmax(0, auto));
    grid-auto-flow: row;
    align-items: center;
    column-gap: 5px;
    row-gap: 2px;
}

.vl-weather-card.vl-compact-one-line .vw-preview-city-item {
    grid-column: 1;
    grid-row: 1 / span 3;
}

.vl-weather-card.vl-compact-one-line .vw-preview-icon-item {
    grid-column: 2;
    grid-row: 1 / span 3;
}

.vl-weather-card.vl-compact-one-line .vw-preview-temp-item {
    grid-column: 3;
    grid-row: 1 / span 3;
}

.vl-weather-card.vl-compact-one-line #prev-humidity,
.vl-weather-card.vl-compact-one-line #prev-wind,
.vl-weather-card.vl-compact-one-line #prev-rain {
    grid-column: 4;
    justify-self: end;
    margin: 0;
    padding-top: 2px;
    padding-bottom: 2px;
}

.vl-weather-card.vl-compact-one-line #prev-humidity { grid-row: 1; }
.vl-weather-card.vl-compact-one-line #prev-wind { grid-row: 2; }
.vl-weather-card.vl-compact-one-line #prev-rain { grid-row: 3; }

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 480px) {
    .vl-compact-one-line .vl-weather-main .vl-icon { width: 38px; height: 38px; }
    .vl-compact-one-line .vl-weather-main .vl-weather-temp { font-size: 2.2em; }
    .vl-compact-one-line .vl-weather-main .vl-weather-grid { column-gap: 3px; }
    .vl-compact-one-line .vl-weather-meta-column .vl-meta-item { font-size: .72em; margin-bottom: 2px; padding-left: 3px; padding-right: 3px; }
    .vl-weather-front-row {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 6px;
    }

    .vl-weather-meta-column {
        font-size: .95em;
    }

    .vl-search-bar {
        width: 50% !important;
        max-width: 50% !important;
    }



    #vicilook-weather-container,
    .vl-static-card {

        margin: 12px 0;

        padding: 8px;
    }


    /* -----------------------------------------
       Mobile weather grid
    ----------------------------------------- */

    .vl-weather-grid,
    .vl-static-grid {

        grid-template-columns:
            repeat(
                var(--vl-layout-cols, 2),
                minmax(0, 1fr)
            );

        grid-template-rows:
            repeat(
                var(--vl-layout-lines, 3),
                minmax(0, auto)
            );

        gap: 3px 6px;
    }


    .vl-weather-temp {
        font-size: 3.1em;
    }


    .vl-icon-item {
        justify-content: flex-start;
    }


    /* =====================================================
       MOBILE SEARCH / LOCATION INPUT

       Mobile is intentionally smaller than desktop.

       Container: 18px
       Input:     14px
       Button:    14px

       This prevents the mobile search field from expanding
       back to the desktop height.
    ===================================================== */

    .vl-search-bar {

        position: relative !important;

        z-index: 2 !important;

        display: flex !important;

        align-items: center !important;

        width: 50% !important;
        max-width: 50% !important;

        height: 18px !important;

        min-height: 18px !important;

        max-height: 18px !important;

        margin-top: 5px !important;

        padding: 1px 2px !important;

        gap: 3px !important;

        box-sizing: border-box !important;

        border-radius: 7px !important;
    }


    /* Mobile text input */

    .vl-search-bar input,
    .vl-search-bar input[type="text"],
    .vl-search-bar input[type="search"],
    .vl-search-bar #vicilook-city-input {

        display: block !important;

        width: 100% !important;

        flex: 1 1 auto !important;

        height: 14px !important;

        min-height: 14px !important;

        max-height: 14px !important;

        margin: 0 !important;

        padding: 0 5px !important;

        box-sizing: border-box !important;

        font-size: .75em !important;

        line-height: 14px !important;

        border: 0 !important;

        outline: 0 !important;

        box-shadow: none !important;
    }


    /* Mobile search button */

    .vl-search-bar button {

        width: 14px !important;

        min-width: 14px !important;

        max-width: 14px !important;

        height: 14px !important;

        min-height: 14px !important;

        max-height: 14px !important;

        flex: 0 0 14px !important;

        margin: 0 !important;

        padding: 0 !important;

        border-radius: 4px !important;

        box-sizing: border-box !important;
    }
}


/* =========================================================
   ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    #vicilook-weather-container,
    .vl-static-card,
    .vl-search-bar button {

        transition: none;
    }
}

/* v3.0.4: icon search button removed; keyboard/form submission is used. */
.vl-search-bar {
    border: 0;
}
.vl-search-bar button {
    display: none !important;
}