.cursor{
    cursor: pointer;
}

.no-underline{
    text-decoration: none;
}

.container-special{
    max-width: 1500px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 50px;
}

.container-special-news{
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
    padding: 0 50px;
}

/* --- Original CSS for context --- */
.naslovna-slika {
  position: relative;
  width: 100%;
  height: 500px;
  
  background-size: cover;
  background-position: center; /* Important for cropping */
  background-repeat: no-repeat;
}

.link-naslovna-slika{
    position: relative;
    z-index: 1;
    display: block;
    height: 100%;
}


/* .naslovna-slika::before {
    content: ''; 
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0 0 0 / 20%); 
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px); 

    z-index: 0; 
}
 */
.naslovna-vsebina {
    position: absolute;
    top: 5%; 
    right: 3%;
    z-index: 1; 
    color: #405362;
    text-align: right;
    width: 90%;
    max-width: 730px;
}

.naslovna-vsebina h1 {
    font-size:2vw; 
    font-weight: 700;
    text-transform: uppercase;
   
    /* text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7);  */
}

.naslovna-vsebina p {
    font-size: 1vw;
    /* text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); */
   
}


.preklicano-oznaka {
    background-color: #928f90; 
    color: white;
    padding: 3px 8px;
    border-radius: 24px;
    font-size: 0.85em; 
    font-weight: 700;
    margin-right: 10px; 
    vertical-align: middle; 
}

/* Style for the ENTIRE notification item when it is canceled */
.pomembno-obvestilo-posamezno.preklicano-item {
    background-color: #f0f0f0cf; /* A muted gray background */
    
}



/* Change the bell icon to gray so it doesn't look like an active alert */
.pomembno-obvestilo-posamezno.preklicano-item .fa-bell {
    color: #6c757d !important; /* Use !important to override the .text-danger class */
}

/* Optional: Tone down the hover effect for canceled items */
.pomembno-obvestilo-posamezno.preklicano-item:hover {
    -webkit-transform: none; /* Disable the lift effect */
            transform: none;
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Keep the original shadow */
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}


/* --- YOUR EXISTING CSS (for context) --- */

.opisi-slik,
.pomembno-obvestilo,
.odvoz-odpadkov {
    position: relative; 
    z-index: 1; 
}

.pomembno-obvestilo{
    position: absolute;
    left:0;
    color: black;
    top: 5%;
    width: 500px;
}

.pomembno-obvestilo-posamezno{
    margin-top: 10px;
    background-color: #ffffffcf;
    border-radius: 0 24px 24px 0;
    text-decoration: none;
    color: black;
    padding: 5px 0px 5px 30px;
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    -webkit-transition: -webkit-box-shadow 0.3s ease, -webkit-transform 0.3s ease;
    transition: -webkit-box-shadow 0.3s ease, -webkit-transform 0.3s ease;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    transition: box-shadow 0.3s ease, transform 0.3s ease, -webkit-box-shadow 0.3s ease, -webkit-transform 0.3s ease;
}

.pomembno-obvestilo-posamezno:hover {
    -webkit-box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
}

/* This is the original red bell icon for active notifications */
.pomembno-obvestilo-posamezno .fa-bell {
    color: #dc3545; /* Set this explicitly for non-canceled items */
}

 .status-oznaka {
            padding: 6px 12px;
            border-radius: 20px;
            /* Zaobljeni robovi, kot na sliki */
            font-size: 0.85em;
            font-weight: 700;
            white-space: nowrap;
        }

        .status-oznaka.status-aktiven {
            background-color: #ffc107;
            /* Bootstrap 'warning' rumena */
            color: #333;
        }

        .status-oznaka.status-preklican {
            background-color: #28a745;
            /* Bootstrap 'success' zelena */
            color: white;
        }

.odvoz-odpadkov {
    position: absolute;
    bottom: -100px;
    right: 170px;
    width: 200px; 
    height: 200px;
    border-radius: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; 
    -webkit-box-orient: vertical; 
    -webkit-box-direction: normal; 
        -ms-flex-direction: column; 
            flex-direction: column; 
    -webkit-box-pack: center; 
        -ms-flex-pack: center; 
            justify-content: center; 
    -webkit-box-align: center; 
        -ms-flex-align: center; 
            align-items: center; 
    padding: 1rem; 
    background-color: #2B712F;
    color: white;
    text-transform: uppercase;
    text-align: center;
    -webkit-box-shadow: 3px 3px 6px #00000029;
            box-shadow: 3px 3px 6px #00000029;
    /* z-index: 1; is added via the combined rule above */
}

.odvoz-odpadkov a{
    text-decoration: none;
}

.novice{
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 24px;
    padding-left: 1.5rem;
}

.ostale-novice{
    margin: 5rem 0;
}

.novice-container{
    border-radius: 0 80px;
}

.novica-slika{
    border-radius: 0 80px;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -webkit-box-shadow: 3px 3px 6px #00000029;
            box-shadow: 3px 3px 6px #00000029;
}

.novica-desno{
    border-radius: 0 120px 0 0;
}

.novica-spodaj-modra{
    position: relative;
    border-radius: 0 80px 0 0;
    border-top: 10px solid #009ED0;
   /* padding: 1rem 5rem 2rem 1rem; */
    -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.novica-spodaj-rjava{
    position: relative;
    border-radius: 0 80px 0 0;
    border-top: 10px solid #784f00;
   /* padding: 1rem 5rem 2rem 1rem; */
    -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.novica-spodaj-zelena{
    position: relative;
    border-radius: 0 80px 0 0;
 /*   padding: 1rem 5rem 2rem 1rem; */
    border-top: 10px solid #2b7230;

    -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.novica-spodaj-siva{
    position: relative;
    border-radius: 0 80px 0 0;
 /*   padding: 1rem 5rem 2rem 1rem; */
    border-top: 10px solid #737373;

    -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.novica-spodaj-temno-modra{
    position: relative;
    border-radius: 0 80px 0 0;
 /*   padding: 1rem 5rem 2rem 1rem; */
    border-top: 10px solid #405362;

    -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.novica-spodaj-crna{
    position: relative;
    border-radius: 0 80px 0 0;
 /*   padding: 1rem 5rem 2rem 1rem; */
    border-top: 10px solid black;

    -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
            box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.preberi-vec-rumen{
    background-color: #FFEE5A;
    color: black;
    border:none;
    padding: 5px 20px;
    border-radius: 0 20px;
}

.preberi-vec-moder{
    background-color: #f8f9fa;
    color: black;
    border:none;
    padding: 5px 20px;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    font-size: 0.8rem;
    font-weight: 500;
}

.card-title{
    width: 85%;
}

.novice-container p{
    color: white!important;
    text-align: left!important;
}

.novica-spodaj-modra p{
    text-align: left!important;
}






 .apple-news-section {
            background-color: #f5f5f7;
            /* A subtle, Apple-like light grey */
            padding-top: 5rem;
            padding-bottom: 5rem;
        }

        .apple-news-heading {
            font-size: 2.5rem;
            font-weight: 600;
            color: #1d1d1f;
            /* Apple's primary black text color */
            margin-bottom: 2rem;
        }

        /* Base style for all cards in this section */
        .news-apple-style-card {
            height: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            background-color: #ffffff;
            border-radius: 24px;
            /* Large, soft rounded corners */
            -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            text-decoration: none;
            color: inherit;
            overflow: hidden;
            /* Crucial for clipping the image to the rounded corners */
            -webkit-transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
            transition: -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            transition: transform 0.3s ease, box-shadow 0.3s ease, -webkit-transform 0.3s ease, -webkit-box-shadow 0.3s ease;
        }

        .news-apple-style-card:hover {
            -webkit-transform: translateY(-6px);
                    transform: translateY(-6px);
            -webkit-box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
                    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
        }

        /* Specific styles for the LARGE horizontal card */
        .news-apple-style-card.large-card .card-image {
            height: 360px;
            width: 100%;
            -o-object-fit: cover;
               object-fit: cover;
        }

        /* Specific styles for the SMALL vertical cards */
        .news-apple-style-card.small-card .card-image {
            width: 100%;
            aspect-ratio: 16 / 9;
            /* Ensures consistent image height */
            -o-object-fit: cover;
               object-fit: cover;
        }

        .news-apple-style-card .card-content {
           -webkit-box-flex: 1;
               -ms-flex-positive: 1;
                   flex-grow: 1; /* ensures content section expands evenly */
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 32px;
        }

        /* Typography styles */
        .news-category {
            font-size: 0.75rem;
            color: #6e6e73;
            /* Apple's secondary grey text color */
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 0.5rem;
        }

        .news-headline {
            font-size: 32px;

            font-weight: 700;
            color: #1d1d1f;
            line-height: 1.2;
            margin-bottom: 1rem;
        }

        /* Smaller headline for the small cards */
        .small-card .news-headline {
            font-size: 1.25rem;
        }

        .news-date {
            font-size: 17px;
            font-weight: 600;
            color: #6e6e73;
        }

        .mobile-hero-section {
            background-size: cover;
            background-position: center; /* Important for cropping */
            background-repeat: no-repeat;
            color: #fff;
            padding: 2rem 1rem;

            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center; /* Vertically centers the content block */
        }

/* The main container for the stacked elements */
.mobile-hero-content {
    width: 100%;
    max-width: 500px; /* Prevents it from getting too wide on large phones */
    margin: 0 auto;
}

/* The "Glass" card for the main CTA */
.hero-cta-card {
    color: black;
    background-color: rgba(255, 255, 255, 0.15); /* Semi-transparent white */
    backdrop-filter: blur(10px); /* The "glass" blur effect */
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1rem; /* Softer, modern corners */
    padding: 2rem;
    -webkit-box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}

.hero-cta-card h1 {
    font-weight: 700;
    line-height: 1.2;
}

/* The alert for important notices */
.hero-alert-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #fff;
    color: #212529;
    padding: 1rem;
    border-radius: 0.75rem;
    text-decoration: none;
    font-weight: 600;
    margin-top: 1.5rem;
    
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.hero-alert-link:hover {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
}

/* The secondary task button */
.hero-task-button {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: #fff;
    color: #212529;
    padding: 1rem;
    border-radius: 0.75rem;
    text-decoration: none;
    font-weight: 600;
    margin-top: 1rem;
    -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    -webkit-transition: -webkit-transform 0.2s ease;
    transition: -webkit-transform 0.2s ease;
    transition: transform 0.2s ease;
    transition: transform 0.2s ease, -webkit-transform 0.2s ease;
}
.hero-task-button:hover {
    -webkit-transform: translateY(-2px);
            transform: translateY(-2px);
}



 .article-meta {
            font-size: 0.9rem;
        }

        .article-title {
            font-weight: 700;
            line-height: 1.2;
        }

        /* This is the main container for the article content */
        .article-body {
            font-size: 1.1rem;
            /* Slightly larger text for readability */
            line-height: 1.7;
            /* More space between lines */
            color: #343a40;
        }

        /* Ensure elements inside the DMX HTML binding have proper spacing */
        .article-body p {
            margin-bottom: 1.5rem;
        }

        .article-body h2,
        .article-body h3,
        .article-body h4 {
            margin-top: 2rem;
            margin-bottom: 1rem;
            font-weight: 600;
        }

        /* Styling for the social share section */
        .social-share-title {
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            color: #6c757d;
            letter-spacing: 1px;
        }

        .social-share-links a {
            color: #6c757d;
            font-size: 1.5rem;
            margin: 0 0.5rem;
            -webkit-transition: color 0.2s ease-in-out;
            transition: color 0.2s ease-in-out;
        }

        .social-share-links a:hover {
            color: #0d6efd;
            /* Bootstrap primary blue */
        }



    .gumb-klasika-moder{
        border: 1px solid #3f5363;
        background: #3f5363 ;
        padding: 10px 20px;
        color: white;
        font-weight: 600;
        -webkit-box-shadow: 0px 3px 6px #00000029;
                box-shadow: 0px 3px 6px #00000029;
        border: 1px solid #3F5363;
        border-radius: 24px;
        text-decoration: none;
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }

    .gumb-klasika-moder:hover{
        border: 1px solid #3f5363;
        background: white ;
        color: #3f5363;
        
    }

    
    .gumb-klasika-moder-aktiven{
        border: 1px solid #3f5363;
        background: white ;
        padding: 10px 20px;
        color: #3f5363;
        font-weight: 600;
        -webkit-box-shadow: 0px 3px 6px #00000029;
                box-shadow: 0px 3px 6px #00000029;
        border: 1px solid #3F5363;
        border-radius: 24px;
        text-decoration: none;
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }


        .gumb-klasika-zelen{
        border: 1px solid #2b7230;
        background: #2b7230 ;
        padding: 10px 20px;
        color: white;
        font-weight: 600;
        -webkit-box-shadow: 0px 3px 6px #00000029;
                box-shadow: 0px 3px 6px #00000029;
        border: 1px solid #3F5363;
        border-radius: 24px;
        text-decoration: none;
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }

    .gumb-klasika-zelen:hover{
        border: 1px solid #2b7230;
        background: white ;
        color: #2b7230;
        
    }







        @media only screen and (max-width: 980px){
    .odvoz-odpadkov {
        position: absolute;
        bottom: -45px;
        right: 15px;
        width: 150px; 
        height: 150px;

    }

    .pomembno-obvestilo{
        width: 80%;
    }

    .pomembno-obvestilo p{
        font-size: 12px;
    }

    .container-special{
        padding: 0;
    }
    .container-special-news{

        padding: 0;
    }
    .naslovna-slika {
  height: auto;
}
 
}