.row {
	margin: 33px -15px;

}

.playlist-items-row {
  display: flex;
  flex-wrap: wrap;
  /* Ako Bootstrap .row ima negativne margine (npr. margin-left: -15px; margin-right: -15px;), 
     one se obično kompenziraju paddingom na .col-* klasama. 
     Ako ne koristiš Bootstrap ili želiš kontrolirati razmak: */
  /* margin-left: -10px; */ /* Primjer ako je padding na column 10px */
  /* margin-right: -10px; */
}

.playlist-item-column {
  display: flex; 
  flex-direction: column; 
  margin-bottom: 20px; 
  padding-left: 10px; 
  padding-right: 10px;
}

/* Stilovi za .movie-item (karticu filma) */
.movie-item { /* Primijeni ovu klasu na div koji predstavlja karticu filma */
  height: auto!important;
  display: flex;
  flex-direction: column;
  background-color: #000; /* BIJELA PODLOGA KARTICE */
  border: none!important; /* Opcionalno: svijetli rub za bolji kontrast na bijeloj pozadini */
  border-radius: 4px;
  overflow: hidden; 
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Opcionalno: suptilna sjena */
}

/* Klasa .responsitive-vertical treba imati definiran aspect-ratio ili padding-bottom trik */
.responsitive-vertical.bg-cover {
  padding-bottom: 150%; /* Primjer za omjer 2:3. Prilagodi omjeru svojih postera! */
  /* Ili koristi: aspect-ratio: 2 / 3; */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block; 
}

.movie-item-caption { 
  padding: 10px 12px; /* Malo više paddinga za tekst */
  display: flex;
  flex-direction: column;
  flex-grow: 1; 
  color: #333333; /* TAMNA BOJA SLOVA za opći tekst unutar captiona */
}

.movie-item-caption .subtitle {
  font-size: 0.8em; /* Smanjena veličina za godinu */
  color: #777777;    /* Malo svjetlija tamna za godinu */
  margin-bottom: 5px;
}

.movie-item-caption .title {
  flex-grow: 1; 
}

.movie-item-caption .title h5 {
  margin: 0 0 5px 0; /* Uklonjen gornji margin, dodan donji */
  font-size: 1em;    /* Prilagođena veličina naslova */
  line-height: 1.3;
}

.movie-item-caption .title h5 a {
  color: #222222; /* TAMNA BOJA LINKA (naslova) */
  text-decoration: none;
  font-weight: bold; /* Opcionalno: podebljaj naslov */
}

.movie-item-caption .title h5 a:hover,
.movie-item-caption .title h5 a:focus { /* Dodan :focus za pristupačnost */
  color: #007bff; /* PLAVA BOJA LINKA NA HOVER/FOCUS */
  text-decoration: underline; /* Opcionalno: podcrtaj na hover */
}

/* Opcionalno: Ako imaš i druge linkove unutar .movie-item-caption, 
   a želiš da se ponašaju isto: */
/*
.movie-item-caption a {
  color: #222222;
  text-decoration: none;
}
.movie-item-caption a:hover,
.movie-item-caption a:focus {
  color: #007bff;
  text-decoration: underline;
}

/* Stavi ovo u svoj CSS fajl */
.recommended-items-row {
  display: flex;
  flex-wrap: wrap;
  /* Bootstrap .row obično ima negativne margine, npr. margin-left: -15px; margin-right: -15px; 
     koje se poništavaju s paddingom na .col-* klasama. */
}

.recommended-item-column {
  display: flex; /* Ovo čini Bootstrap kolonu flex kontejnerom */
  /* flex-direction: column; Nije nužno ako je .movie-item-similar jedini direktni child */
  margin-bottom: 20px; /* Razmak između redova kartica */
}

/* Nema potrebe za posebnim CSS-om za .movie-item-similar i njegove unutarnje elemente
   jer su ključni stilovi (height:100%, display:flex, flex-direction:column, flex-grow, margin-top:auto)
   već postavljeni inline u PHP-u radi jednostavnosti.
   Ako želiš prebaciti te inline stilove u CSS, možeš koristiti klase:
*/
/*
.movie-item-similar {
  background-color: #eee; 
  padding: 15px; 
  border-radius: 4px; 
  height: 100%; 
  display: flex; 
  flex-direction: column; 
}
.movie-item-similar-description {
  flex-grow: 1; 
}
.movie-item-similar .btn {
  margin-top: auto; 
  align-self: flex-start;
}
.movie-item-similar img { /* Osigurava da nema donjeg prostora ispod slike */
    /* display: block;
}
*/

.btn-primary {
    color: #fff !important;
}



.h2, h2 {
    margin-top: 22px;
}

.col-md-1-5 {
    width: 10%;
    max-width: 10%;
}

.suggested-movies-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.suggested-movie {
    text-align: center;
}

.suggested-movie .poster-wrapper {
    width: 100%;
    height: 0;
    padding-bottom: 150%; /* This creates a 2:3 aspect ratio */
    position: relative;
    overflow: hidden;
}

.suggested-movie .poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.suggested-movie .title {
    display: block;
    margin-top: 5px;
    font-size: 0.9em;
    line-height: 1.2;
}

/*
* bootstrap edit links, hr, page header, label, btn
*/
.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: white;
}
    a
    {
        color: #19272e;
        text-decoration: none;
    }

    a:hover
    {
       color: #24baef;
        text-decoration: none;
        cursor: pointer;
    }


    hr
    {
        /*border-top: 1px solid #f7f6f62b;
        border-bottom:1px solid #fff;*/
       border-top: 1px solid #cbcbcb;
margin-top: 5px;
margin-bottom: 10px;
    }

    .page-header
    {
        border-bottom:none;
    }

    .label
    {
        padding:4px 5px;
    }

    .btn
    {
        border-radius: 2px;
    }

    .text-bold
    {
        font-weight:bold;
    }


    .box{
    background-color: #FFF;
    margin-bottom: 30px;
    border-radius: 5px;
}

    .boxblog{
    background-color: #fff;
    margin-bottom: 30px;
    border-radius: 5px;
}

.box .box-body{
    padding:20px;
}


.table
{
    /*table-layout: fixed;*/
    
}


.custom-embed {
    overflow: hidden;
    position: relative;
    width:100%;
}

.custom-embed-comics {
    margin:10px 0 20px 0;
    /*overflow: hidden;*/
    position: relative;
    width:100%;
    height:466px;
}

.custom-embed-comicz {
    overflow: hidden;
    position: relative;
    width:100%;
    height:666px;
}

.custom-embed::after {
    padding-top: 56.25%;
    display: block;
    content: '';
}

.custom-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.form-control:focus {
    outline: none;
    border-color: #CAE5F8;
    box-shadow: 0 0 0 2px #CAE5F8;
}



.form-control-nav, .form-control-nav:focus
{
    border-color: none;
    border:none;
    box-shadow: none;
}

/*
* helper clases
*/
    .responsitive{
        position: relative;
        padding-bottom: 56.25%;
        /* Use 75% for 4:3 videos */
        height: auto;
        overflow: hidden;
        max-width: 100%;
    }

    .responsitive-vertical
    {
       position: relative;
        padding-bottom: 150%;
        /* Use 75% for 4:3 videos */
        height: auto;
        overflow: hidden;
        max-width: 100%; 
    }


    .bg-cover{
        background-repeat: no-repeat;
        -webkit-background-size:cover;
        -moz-background-size:cover;
        -o-background-size:cover;
        background-size:cover;
        background-position:center;
        height: auto;
        /*background-blend-mode: overlay;*/
        /*background-color: #448aff;*/
        background-image: url(https://dmypbau5frl9g.cloudfront.net/assets/common/bg-page-section-00fcdc3f6a998791f63bb32dc69b1105.png);
    }

    .text-drop-shadow{
        color: #fff;
        text-rendering: optimizelegibility;
        text-shadow: 0 0 3px rgba(0,0,0,1);
    }





/*
* alert
*/
    .alert{
        position: relative;
        border-radius: 2px;
        padding-left:61px;
        border-color:#9e9e9e;
        color:#616161;
        /*background-blend-mode: overlay;
        background-image: url(http://dmypbau5frl9g.cloudfront.net/assets/common/bg-page-section-00fcdc3f6a998791f63bb32dc69b1105.png);*/
    }

    .alert .icon{
        color:#fff;
        background-color: #9e9e9e;
        text-align: center;
        width: 45px;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        /*border: 1px solid #bdbdbd;*/
        padding-top: 15px;
        display: inline-block;
       
    }

    .alert-danger {
        color: #d32f2f;
        background-color: #fff;
        border-color: #f44336;
        
    }

    .alert-danger .icon{
        color:#fff;
        background-color: #f44336;
    }


    .alert-warning{
        color: #ffa000;
        background-color: #fff;
        border-color: #ffc107;
    }

    .alert-warning .icon{
        color:#fff;
        background-color: #ffc107;
    }

    .alert-info{
        color: #1976d2;
        background-color: #fff;
        border-color: #2196f3;
    }

    .alert-info .icon{
        color:#fff;
        background-color: #2196f3;
    }

    .alert-success{
        color: #388e3c;
        background-color: #fff;
        border-color: #4caf50;
    }

    .alert-success .icon{
        color:#fff;
        background-color: #4caf50;
    }

/*
* social colors
*/
    .social-facebook{
        color:#3b5999;
    }

    .social-twitter{
        color:#00aced;
    }

    .social-linkedin{
        color:#0077b5;
    }

    .social-google-plus{
        color:#d44332;
    }

    .social-pinterest{
        color:#c8141b;
    }

    .social-tumblr{
        color:#37465d;
    }

    .social-reddit{
        color:#ff3800;
    }

    .social-email{
        color:#f89a1e;
    }


/*
* macosx scrollbars
*/
    .scrollbar-macosx::-webkit-scrollbar {
        width: 6px;
        height:6px;
    }
         
    /* Track */
    .scrollbar-macosx::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); 
        -webkit-border-radius: 6px;
        border-radius: 6px;
        /*background-color: rgba(255, 255, 255, 0);*/
        /*opacity: 0.3;*/
    }
         
    /* Handle */
    .scrollbar-macosx::-webkit-scrollbar-thumb {
        -webkit-border-radius:6px;
        border-radius: 6px;
        /* */
         background:#8E9092;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    }

    .scrollbar-macosx::-webkit-scrollbar-thumb:hover{
        background: #353739;
    }



/*
* nav list
*/
    ul.nav-list{
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }

    ul.nav-list > li{
        display: block;
    }

    ul.nav-list > li > a{
        border-left:2px solid transparent;
        display:block;
        padding-left:8px;
        padding-right: 10px;
        padding-top:5px;
        padding-bottom: 5px;
        color: #a1a1a1;
    }

    ul.nav-list > li.active > a, ul.nav-list > li > a:hover{
        border-left:2px solid #448aff;
    }


    ul.nav-list > li > a{
        /*display: block;
        padding:10px;
        text-decoration: none;
        border-bottom:2px solid transparent;*/
    }


/*
* buttons
*/
    .btn-primary-oo{
        color: #fff;
        background-color: #24baef;
        /*border-color: #3F51B5;*/
    }

    .btn-primary-oo:focus,.btn-primary-oo:hover, .btn-primary-oo.focus {
        color: #fff;
        background-color: #2962ff;
        /*border-color: #122b40;*/
    }