html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.hero {
    background: linear-gradient(90deg, #fff5e1 0%, #ffe8f1 100%);
    padding: 3rem 1rem 2rem 1rem;
    text-align: center;
    border-radius: 18px;
    margin: 2rem 0;
    box-shadow: 0 2px 28px #ffe5cb55;
}

.start-section {
    margin-bottom: 2.5rem;
}

.logo a {
    font-size: 1.6rem;
    font-weight: bold;
    text-decoration: none;
    color: #222;
}

.card-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
}

.card {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 12px #ececec;
    padding: 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: start;
    transition: box-shadow 0.18s, transform 0.18s;
    position: relative;
}

    .card:hover {
        box-shadow: 0 6px 24px #d8e9ff;
        transform: translateY(-2px) scale(1.03);
        z-index: 2;
    }

.card-img, .img-placeholder {
    width: 100%;
    max-height: 120px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: .7rem;
    background: #f8f8f8;
    display: block;
}

.img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
}

.card h3 {
    margin: 0 0 0.5rem 0;
    font-size: 1.18rem;
    font-weight: 600;
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0.5rem 0 0.3rem 0;
}

.chip {
    display: inline-block;
    padding: 0.2rem 0.8rem;
    font-size: .9rem;
    border-radius: 1rem;
    background: #f2f5fa;
    color: #236fa1;
    font-weight: 500;
    margin-right: 4px;
}

    .chip.news {
        background: #e3f5ff;
        color: #2071b8;
    }

    .chip.article {
        background: #eceaff;
        color: #7860c2;
    }

    .chip.recept {
        background: #fff0db;
        color: #a06719;
    }

.card .date {
    color: #aaa !important;
    font-size: 0.97rem;
    margin-left: 4px;
}

.card p {
    margin: 0 0 0.6rem 0;
    color: #333;
}

.card a {
    margin-top: auto;
    color: #2071b8;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s;
}

    .card a:hover {
        color: #ff931e;
        text-decoration: underline;
    }

/* --- BOOTSTRAP MENY/ADMINLOOK --- */

.navbar {
    background: linear-gradient(90deg, #fff4e6 0%, #fefefe 100%);
    border-bottom: 3px solid #ffb950;
    box-shadow: 0 2px 12px #f8d39444;
}

.navbar-nav .nav-link {
    color: #624112 !important;
    font-weight: 600;
    font-size: 1.10em;
    padding: 0.8rem 1.2rem;
    border-radius: 8px;
    transition: background 0.13s, color 0.13s;
}

    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active {
        background: #fff0db;
        color: #f79d00 !important;
    }

.dropdown-menu {
    border-radius: 10px;
    box-shadow: 0 4px 18px #e5e5e5;
    min-width: 190px;
    padding: 0.4em 0.2em;
    border: 1px solid #f1f1f1;
}

.dropdown-item {
    border-radius: 6px;
    padding: 0.6em 1.1em;
    color: #222;
    font-size: 1em;
    transition: background 0.13s, color 0.13s;
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        background: #f6f7fa;
        color: #1976d2;
    }

.dropdown-toggle::after {
    display: none !important;
}

/* -- Bootstrap-listor: ta bort bullets för säkerhets skull -- */
ul.navbar-nav,
ul.nav {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

    ul.navbar-nav > li {
        margin-left: 0;
    }

/* Extra: vänsterställ menyn inuti navbar-nav om du vill */
.navbar-nav {
    justify-content: center !important;
}

.btn-primary, .btn-primary:visited {
    background: linear-gradient(90deg, #ffb950 0%, #ffb300 100%);
    border: none;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 2px 16px #f4e5c5;
    transition: background 0.12s;
}

    .btn-primary:hover, .btn-primary:active, .btn-primary:focus {
        background: #ff931e !important;
        color: #fff !important;
    }

section.bg-accent {
    background: linear-gradient(90deg, #fffbe6 0%, #ffe7e7 100%);
    border-radius: 18px;
    margin-bottom: 2.5rem;
    box-shadow: 0 2px 24px #f5f0e6;
    padding: 2.5rem 1rem 1.5rem 1rem;
}

.chip.news {
    background: #e3f5ff;
    color: #1a70a2;
}

.chip.article {
    background: #f0e8ff;
    color: #6749b6;
}

.chip.recept {
    background: #fff5df;
    color: #f2a02b;
}
.offer-banner {
    background: linear-gradient(90deg, #ffe8a6 0%, #ffe1e8 100%);
    color: #b36200;
    font-weight: 600;
    font-size: 1.1em;
    display: inline-block;
    box-shadow: 0 2px 12px #ffe2a766;
}
.mts-card {
    background: #fff;
    border-radius: 1.2em;
    border: 1px solid #ffb95022; /* ljus orange eller #ececec för neutral */
    box-shadow: none !important;
    padding: 1rem;
    font-size: 0.97em;
}

    .mts-card:hover {
        box-shadow: 0 10px 42px #ffdba155, 0 1.5px 0 #ffb950;
        border-color: #ffb950;
        z-index: 3;
    }

    .mts-card .icon-circle {
        background: #f6f5ef;
        border-radius: 50%;
        width: 52px;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.2rem;
        font-size: 2rem;
        color: #ff931e;
    }

    .mts-card .card-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #624112;
    }

    .mts-card .chip {
        font-size: .96em;
        margin-right: 0;
        background: #f6f7fa;
        color: #1976d2;
        border-radius: 1em;
        padding: 0.18em 0.7em;
        font-weight: 600;
    }

        .mts-card .chip.news {
            background: #e3f5ff;
            color: #1a70a2;
        }

        .mts-card .chip.article {
            background: #f0e8ff;
            color: #6749b6;
        }

        .mts-card .chip.recept {
            background: #fff5df;
            color: #f2a02b;
        }

.cookie-banner-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 2000;
    width: 100%;
    background: linear-gradient(90deg, #fffbe5 0%, #ffe6ea 100%);
    border-top: 2.5px solid #ffb950;
    box-shadow: 0 -2px 14px #e6e0c3bb;
    min-height: 54px;
    padding: 0.8rem 1rem;
    display: none; /* visas av JS */
}

body.has-cookie-banner-bottom {
    padding-bottom: 60px; /* om du vill att inget döljs av bannern */
}

    .cookie-banner-top.hide {
        opacity: 0;
        pointer-events: none;
    }
body.has-cookie-banner {
    padding-top: 60px; /* så navbar och innehåll inte hamnar under cookiebanner */
}


.search-wrapper {
    background: #fff;
    border: 2px solid #ffb950;
    box-shadow: 0 6px 30px #ffefc355, 0 1.5px 0 #ffb950;
    border-radius: 2em;
    padding: 0.2em 0.5em;
    max-width: 340px;
    margin: 0 auto 0.8em auto;
}

    .search-wrapper input.form-control {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 2em !important;
    }

    .search-wrapper .btn {
        border-radius: 2em !important;
        font-size: 0.97em;
        padding: 0.45em 1.4em !important;
    }

input.form-control:focus {
    border-color: #fd7e14 !important;
    box-shadow: 0 0 0 0.2rem rgba(253,126,20,.25) !important;
    outline: none !important;
}
.offer-banner {
    background: linear-gradient(90deg, #ffe8a6 0%, #ffe1e8 100%);
    color: #a06b0d;
    font-weight: 600;
    font-size: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px #ffe2a755;
    border-radius: 2em;
    max-width: 340px;
    min-height: 38px;
    padding: 0.3em 1.3em;
    margin-bottom: 1.1rem;
    margin-top: 0.2rem;
    opacity: 1;
    transition: opacity 0.5s;
}

    .offer-banner.hide {
        opacity: 0;
        pointer-events: none;
    }

@media (max-width: 600px) {
    .offer-banner {
        font-size: .98em;
        padding: 0.2em 0.7em;
        min-height: 34px;
        max-width: 98vw;
    }
}
@media screen {
    .print-logo {
        display: none !important;
    }

   
}

/* Utskrift */
@media print {
    /* Dölj toppmeny, sidfot och cookies */
    header,
    footer,
    .footer,
    .site-footer,
    .cookie-consent,
    #cookieConsent,
    #cookieBanner,
    .cookie-banner-bottom {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Logga överst – ljust orange text, tunn linje under */
    .print-logo {
        margin-top: 28px !important;
        margin-bottom: 8px !important;
        text-align: center !important;
    }

        .print-logo .fw-bold {
            color: #ffb950 !important;
            font-size: 2rem !important;
            letter-spacing: 1px;
        }

    .print-logo-line {
        border: none;
        border-bottom: 1px solid #ffb950 !important;
        width: 140px;
        margin: 8px auto 0 auto;
        opacity: 0.9;
    }

  

    body {
        padding-bottom: 0 !important;
    }

    /* Visa endast desktop-receptet vid utskrift */
    .d-none, .d-lg-block {
        display: block !important;
    }

    .d-block, .d-lg-none {
        display: none !important;
    }

    /* Dölj print-knapp och ev. andra knappar */
    .btn, .bi-printer {
        display: none !important;
    }

    /* Nolla alla marginaler och padding i hela dokumentet */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        height: 100% !important;
        width: 100% !important;
    }

    /* Nollställ alla wrappers om du använder bootstrap/layout-klasser */
    .container, .main-content, .content, .site-wrapper, main, nav, aside {
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        width: 100% !important;
        box-shadow: none !important;
        border: none !important;
    }

    /* Säkerställ att #receptprint fyller hela bredden, ingen padding/margin */
    #receptprint {
        margin: 0 !important;
        padding: 0 !important;
        max-width: none !important;
        width: 100% !important;
        position: static !important;
        left: 0 !important;
        top: 0 !important;
        background: white !important;
        box-shadow: none !important;
        z-index: 10000;
    }

    /* Kolumner för näringsvärden även på print */
    .col-md-6, .col-6 {
        float: left !important;
        width: 50% !important;
        max-width: 50% !important;
        display: block !important;
    }
}