/* ========================================================================
   NordicWeather - responsive.css
   Responsiva justeringar f�r olika sk�rmstorlekar
   ======================================================================== */

/* ========================================================================
   HEADER RESPONSIVE JUSTERINGAR - FULLST�NDIGT OMGJORDA
   ======================================================================== */

/* DESKTOP VERSION (default) - Absolut centrering */
@media (min-width: 1200px) {
    .site-header {
        padding: 3rem 0 !important; /* Tjock header f�r desktop */
    }

    .navbar .container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header-search-container {
        /* Absolut centrering f�r desktop */
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 700px !important;
        max-width: 90vw !important;
        z-index: 100 !important;
    }

    .header-search-input {
        height: 44px;
        font-size: 0.95rem;
        padding-left: 2.75rem;
    }

    .header-search-icon {
        left: 1rem;
        width: 18px;
        height: 18px;
    }
}

/* Problematisk zon 768px - 1199px där sökrutan krockar med Nordic Weather */
@media (max-width: 1199px) and (min-width: 768px) {
    .site-header {
        padding: 2rem 0 !important;
    }

    .navbar .container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .header-search-container {
        /* Smalare sökruta och mer åt höger för att undvika Nordic Weather text */
        position: absolute !important;
        left: 60% !important; /* Flytta mer åt höger */
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: 280px !important; /* Smalare */
        max-width: 280px !important;
        z-index: 100 !important;
    }

    .header-search-input {
        height: 38px !important;
        font-size: 0.8rem !important;
        padding-left: 2.2rem !important;
    }

    .header-search-icon {
        left: 0.7rem !important;
        width: 15px !important;
        height: 15px !important;
    }
}

/* Extra smal för 768px - 900px */
@media (max-width: 900px) and (min-width: 768px) {
    .header-search-container {
        left: 62% !important; /* Ännu mer åt höger */
        width: 240px !important;
        max-width: 240px !important;
    }

    .header-search-input {
        height: 36px !important;
        font-size: 0.75rem !important;
        padding-left: 2rem !important;
    }

    .header-search-icon {
        width: 14px !important;
        height: 14px !important;
    }
}

/* MOBIL VERSION - Fullst�ndig omstrukturering */
@media (max-width: 767.98px) {
    .site-header {
        padding: 1.5rem 0 !important;
    }

    /* Mobilnavigation - Kolumn-layout */
    .navbar .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1.25rem !important;
        position: relative !important;
        min-height: 50px !important; /* Ge utrymme för första raden */
    }

    /* F�rsta raden: Brand v�nster, Meny h�ger */
    .navbar-brand {
        order: 1 !important;
        font-size: 1.3rem !important;
        margin: 0 !important;
        margin-bottom: 0.5rem !important; /* Extra marginal under brand */
        align-self: flex-start !important;
    }

    .navbar-nav {
        order: 1 !important;
        margin: 0 !important;
        align-self: flex-start !important; /* Ändrat från flex-end */
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
    }

    /* Andra raden: Centrerad s�kruta */
    .header-search-container {
        order: 2 !important;
        position: static !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 500px !important;
        margin: 0 auto !important;
        z-index: auto !important;
    }

    .header-search-input {
        height: 44px !important;
        font-size: 0.95rem !important;
        padding-left: 2.5rem !important;
        width: 100% !important;
    }

    .header-search-icon {
        left: 0.85rem !important;
        width: 16px !important;
        height: 16px !important;
    }

    .dropdown-menu {
        min-width: 160px;
        font-size: 0.9rem;
    }

    .dropdown-item {
        padding: 0.6rem 0.8rem;
    }

    /* AUTOCOMPLETE ANPASSNINGAR F�R MOBIL */
    .ui-autocomplete {
        margin-top: 5px !important;
        position: absolute !important;
        z-index: 99999 !important;
        width: 100% !important;
        max-width: 480px !important;
        left: 0 !important;
        transform: none !important;
    }
}

/* Extra sm� sk�rmar */
@media (max-width: 575.98px) {
    .navbar-brand {
        font-size: 1.2rem !important;
    }

    .header-search-container {
        max-width: 400px !important;
    }

    .header-search-input {
        height: 40px;
        font-size: 0.85rem;
        padding-left: 2rem;
    }

    .header-search-icon {
        left: 0.5rem;
        width: 14px;
        height: 14px;
    }
}

/* ========================================================================
   BEFINTLIGA RESPONSIVA JUSTERINGAR - BEH�LLS SOM DE �R
   ======================================================================== */

/* Anpassningar f�r tablets (medium sk�rmar) */
@media (max-width: 991.98px) {
    /* Hj�ltesektion och rubriker */
    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 1.2rem;
    }

    .hero-search .form-control {
        height: 50px;
    }

    .location-title {
        font-size: 2rem;
    }

    /* V�derdata-kort och metriker */
    .weather-data {
        padding: 1.5rem;
    }

    .weather-metric {
        padding: 0.75rem 1rem;
    }

    .metric-value .value {
        font-size: 1.5rem;
    }

    /* Prim�ra v�derdata */
    .weather-metric {
        padding: 0.6rem 1rem;
    }

    .metric-value .value {
        font-size: 1.3rem;
    }

    .metric-value .label {
        font-size: 0.85rem;
    }

    .weather-icon {
        width: 32px;
        height: 32px;
    }

    /* Sekund�ra v�derdata */
    .secondary-metrics-container {
        padding: 0.6rem;
    }

    .secondary-metric {
        padding: 0.2rem;
    }

    .secondary-icon {
        width: 22px;
        height: 22px;
        margin-right: 0.35rem;
    }

    .secondary-metric-value .value {
        font-size: 0.9rem;
    }

    .secondary-metric-value .label {
        font-size: 0.75rem;
    }

    /* S�kruta */
    .search-container input.form-control {
        height: 48px;
        font-size: 0.95rem;
    }
}

/* Anpassningar f�r mindre tablets och mobiltelefoner */
@media (max-width: 767.98px) {
    /* Hj�ltesektion och rubriker */
    .hero-section {
        padding: 3rem 0;
    }

    .hero-title {
        font-size: 2rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
        margin-bottom: 1.5rem;
    }

    .city-chip {
        font-size: 0.8rem;
        padding: 0.3rem 1rem;
    }

    .location-title {
        font-size: 1.75rem;
    }

    /* Kort och inneh�llscontainers */
    .card-header {
        padding: 1.25rem 1.25rem 0.75rem;
    }

    .card-body {
        padding: 1.25rem;
    }

    .weather-icon {
        width: 40px;
        height: 40px;
    }

    .forecast-status {
        display: flex;
        flex-direction: column;
        line-height: 1;
        text-align: center;
        white-space: normal !important;
    }

    /* Layout f�r v�derdata */
    .weather-metrics {
        gap: 0.75rem;
    }

    .primary-metrics-container {
        margin-bottom: 0.75rem;
    }

    /* Sekund�ra v�derdata */
    .secondary-metrics-row {
        flex-wrap: wrap;
    }

    .secondary-metric {
        flex-basis: calc(50% - 0.25rem);
        margin-bottom: 0.25rem;
    }

    /* V�derikon */
    .weather-icon-large {
        padding: 0.5rem;
    }

    .weather-animation {
        width: 100px !important;
        height: 100px !important;
    }

    .weather-description {
        font-size: 1rem;
        margin-top: 0.5rem;
    }

    /* S�kruta */
    .search-container input.form-control {
        height: 46px;
        font-size: 0.9rem;
        padding-left: 2.5rem;
    }

    .search-input-icon {
        left: 1rem;
        width: 16px;
        height: 16px;
    }

    /* Flytta v�derikon ovanf�r metrics - endast mobilvy */
    /* Anv�nd flexbox f�r att �ndra ordningen p� inneh�llet inom weather-data */
    .weather-data {
        display: flex;
        flex-direction: column;
    }

        /* Skapa en wrapper f�r b�da kolumnerna */
        .weather-data > .row {
            display: contents; /* Detta g�r att alla barn-element behandlas som direkta barn till weather-data */
        }

        /* Flytta endast v�derikonen (inte hela h�gerkolumnen) */
        .weather-data .weather-icon-large {
            order: -1; /* Placerar v�derikonen f�rst */
            margin: 0 auto 1.5rem auto; /* Centrerar och l�gger till margin nedan */
            text-align: center;
        }

        /* V�nsterkolumnen med metrics */
        .weather-data .left-col {
            order: 0; /* Kommer efter v�derikonen */
            width: 100% !important;
        }

        /* H�gerkolumnen med knappen */
        .weather-data .right-col {
            order: 1; /* Kommer sist */
            width: 100% !important;
            text-align: center;
        }

            /* Ta bort weather-icon-large fr�n normal flow i right-col p� mobil */
            .weather-data .right-col .weather-icon-large {
                display: none;
            }

        /* Visa weather-icon-large som ett separat element */
        .weather-data > .weather-icon-large {
            display: block !important;
        }

        /* Justera storleken p� v�derikonen f�r mobil */
        .weather-data .weather-icon-large {
            padding: 1rem;
        }

        .weather-data .weather-animation {
            width: 100px !important;
            height: 100px !important;
        }

        .weather-data .weather-description {
            font-size: 1.1rem;
            margin-top: 0.5rem;
        }
}

/* Anpassningar f�r mobiltelefoner */
@media (max-width: 576px) {
    /* Hj�ltesektion och rubriker */
    .hero-section {
        padding: 2rem 0;
        border-radius: 0;
    }

    .hero-title {
        font-size: 1.75rem;
        margin-bottom: 1rem;
    }

    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: 1.25rem;
    }

    .hero-search {
        margin-bottom: 1.5rem;
    }

        .hero-search .form-control {
            height: 46px;
            font-size: 1rem;
            padding-left: 1rem;
        }

    .city-chips {
        gap: 0.5rem;
    }

    .city-chip {
        padding: 0.25rem 0.75rem;
        font-size: 0.75rem;
    }

    .location-title {
        font-size: 1.5rem;
    }

    .location-date {
        font-size: 0.9rem;
    }

    /* V�derdata-kort */
    .weather-data {
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    .weather-icon-large {
        padding: 1rem;
    }

    .weather-animation {
        width: 120px !important;
        height: 120px !important;
    }

    .weather-description {
        font-size: 1.1rem;
    }

    /* Cookie-banner */
    .cookie-content {
        flex-direction: column;
        text-align: center;
    }

        .cookie-content p {
            margin-bottom: 1rem;
            padding-right: 0;
        }

    /* Layout f�r v�derdata */
    .weather-data {
        padding: 1rem;
    }

    .weather-metric {
        padding: 0.5rem 0.75rem;
        gap: 0.75rem;
    }

    .metric-value .value {
        font-size: 1.1rem;
    }

    .metric-value .label {
        font-size: 0.75rem;
    }

    .weather-icon {
        width: 28px;
        height: 28px;
    }

    /* Sekund�ra v�derdata */
    .secondary-metrics-container {
        padding: 0.5rem;
    }

    .secondary-metrics-row {
        flex-direction: column;
    }

    .secondary-metric {
        flex-basis: 100%;
        margin-bottom: 0.15rem;
    }

    .secondary-icon {
        width: 20px;
        height: 20px;
    }

    .secondary-metric-value .value {
        font-size: 0.85rem;
    }

    .secondary-metric-value .label {
        font-size: 0.7rem;
    }

    /* V�derikon */
    .weather-animation {
        width: 80px !important;
        height: 80px !important;
    }

    .weather-description {
        font-size: 0.9rem;
    }

    /* S�kruta */
    .search-container input.form-control {
        height: 44px;
        font-size: 0.85rem;
        padding-left: 2.25rem;
    }

    .search-input-icon {
        left: 0.85rem;
        width: 14px;
        height: 14px;
    }

    .circle-metrics {
        gap: 0.5rem;
    }

    .circle-icon {
        width: 24px;
        height: 24px;
    }

    .circle-value {
        font-size: 0.9rem;
    }

    .circle-label {
        font-size: 0.7rem;
    }

    /* Knappar */
    .btn-se-utrakning {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }

    /* F�r mycket sm� sk�rmar, bara 1 kolumn */
    .providers-section .col-sm-6 {
        width: 100% !important;
    }
}

/* Anpassningar f�r mycket sm� sk�rmar */
@media (max-width: 360px) {
    /* Metriker och ikoner */
    .weather-icon {
        width: 36px;
        height: 36px;
    }

    .metric-value .value {
        font-size: 1.3rem;
    }

    .metric-value .label {
        font-size: 0.85rem;
    }

    .weather-metric {
        padding: 0.6rem 1rem;
        gap: 1rem;
    }
}

/* F�r mindre sk�rmar, justera storleken ytterligare */
@media (max-width: 380px) {
    .days-tabs .nav-tabs {
        gap: 3px; /* Mindre mellanrum */
    }

    .days-tabs .nav-link {
        font-size: 0.6rem;
        padding: 0.25rem 0.1rem;
    }
}

/* F�r �nnu mindre sk�rmar */
@media (max-width: 575.98px) {
    .weather-data .weather-animation {
        width: 80px !important;
        height: 80px !important;
    }

    .weather-data .weather-description {
        font-size: 1rem;
    }
}

/* ========================================================================
   AUTOCOMPLETE RESPONSIVE JUSTERINGAR
   ======================================================================== */

/* Mobilanpassningar f�r autocomplete dropdown */
@media (max-width: 767.98px) {
    .ui-autocomplete {
        max-height: 250px;
        padding: 0.5rem;
        font-size: 0.9rem;
    }

    .autocomplete-item {
        padding: 6px 4px;
    }

    .location-icon, .history-icon {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .ui-autocomplete-category {
        font-size: 0.7rem;
        padding: 6px 4px !important;
    }
}

@media (max-width: 575.98px) {
    .ui-autocomplete {
        max-height: 200px;
        padding: 0.4rem;
        font-size: 0.85rem;
    }

    .autocomplete-item {
        padding: 5px 3px;
        gap: 8px;
    }

    .location-icon, .history-icon {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }
}