/* IDEALNI KORISNICI BOX */

.idealni-box {
    background: none;/* #f3f3f3*/
    padding: 0px;
    margin: 40px 0;
    border-radius: 0px;
}

.idealni-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 18px;
    letter-spacing: 1px;
}

.idealni-text {
    position: relative;
    padding-left: 20px;
    font-size: 18px;
    line-height: 1.95;
    color: #fff;
}

.idealni-text:before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 3px;
    height: calc(100% - 8px);
    background: rgba(255, 255, 255, 0.6); /* #DC4D4E red accent line */
    border-radius: 2px;
}

/* KARAKTERISTIKE SECTION */

.karakteristike-section {
    background: #DC4D4E; /*promjena boje-none*/
    padding: 60px 20px;
    margin-top: 15px;
}

.aux-profesional {
    background: #6D6E71;  
}

.aux-hexacorr {
    background: #87B233;  
}

.aux-mineral {
    background: #F48336;  
}

.aux-sport {
    background: #038BE5; 
}

.aux-polino-kids {
    background: #724199; 
}

.aux-bifokal {
    background: #546BB1; 
}

.aux-monofokal {
    background: #C17DB3; 
}

.karakteristike-container {
   background: transparent;
   max-width: 1200px;
   margin: auto;
   display: flex;
   gap: 80px;
   padding: 20px 30px;
}

.karakteristike-left,
.karakteristike-right {
    flex: 1;
     background: #efefef;  /*promjena boje-none*/
    padding: 30px;
}

.karakteristike-title {
    background: #dcdcdc;
    padding: 16px 22px;
    font-weight: 700;
    margin-bottom: 35px;
    letter-spacing: 1px;
    color: #444;
}


/* LEFT ITEMS */

.karakteristika-item {
    display: flex;
    align-items: center;
    margin-bottom: 28px;
}

.karakteristika-icon {
    width: 48px;
    height: 48px;
    margin-right: 18px;
}

.karakteristika-icon img {
   width: 100%;
   width: 40px;
   background-color: #DC4D4E;
}

.aux-profesional-icon img {
   background-color: #6D6E71;
}

.aux-hexacorr-icon img {
   background-color: #87B233;
}

.aux-mineral-icon img {
   background-color: #F48336;
}

.aux-sport-icon img {
   background-color: #038BE5;
}

.aux-polino-kids-icon img {
   background-color: #724199;
}

.aux-bifokal-icon img {
   background-color: #546BB1;
}

.aux-monofokal-icon img {
   background-color: #C17DB3;
}

.karakteristika-text {
    font-size: 16px;
    color: #444;     /*promjena boje-#fff*/
    line-height: 1.5;
}


/* RIGHT SIDE */

.iot-header-accordion {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #444;
    background: #fff;
    padding: 16px 0px;
    font-weight: 700;
}

 .iot-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 10px;
    border-bottom: 1px solid #dcdcdc;
    color: #444;
    background: #dcdcdc;
    padding: 16px 22px;
    font-weight: 700;
} 

.iot-header img,.iot-header-accordion img {
   height: 40px;
}

.iot-header span,.iot-header-accordion span {
    font-weight: 600;
    letter-spacing: .5px;
}


/* IOT ROWS */

.iot-row {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #dcdcdc;
}

.iot-bars {
   width: 160px;
}

.iot-bars img {
   width: 160px;
   height:50px !important;
}

.iot-text {
    margin-left: 20px;
    font-size: 15px;
    color: #555; /*promjena boje-#fff*/
}


/* RESPONSIVE */

@media (max-width: 900px) {
    .karakteristike-container {
        flex-direction: column;
        gap: 50px;
        padding: 10px;
    }

    .iot-bars {
        width: 120px;
    }
}


/* ACCORDION */

.product-accordion {
    max-width: 1200px;
    margin: 40px auto;
}

.accordion-item {
    border-top: 1px solid #ddd;
}

.accordion-toggle {
    width: 100%;
    text-align: left;
    background: #efefef;
    border: none;
    padding: 20px 25px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: background .25s ease;

    /* NEW */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accordion-toggle:hover {
    background: #e5e5e5;
}

.accordion-more {
    color: #1A1818;
    font-weight: 700;
    letter-spacing: .5px;
    font-size: 14px;
}

/* hidden by default */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .45s ease;
    background: white;
}

/* when open */
.accordion-item.active .accordion-content {
    padding: 30px 25px;
    max-height: 1000px;
}


/* INTRO BLOCK */

.intro-box {
    display: flex;
    gap: 18px;
    margin-bottom: 30px;
}

.intro-line {
    width: 4px;
    background: #e53935;
}

.aux-profesional-line {
    background: #6D6E71;
}

.aux-hexacorr-line {
    background: #87B233;
}

.aux-mineral-line {
    background: #F48336;
}

.aux-sport-line {
    background: #038BE5;
}

.aux-polino-kids-line {
    background: #724199;
}

.aux-bifokal-line {
    background: #546BB1;
}

.aux-monofokal-line {
    background: #C17DB3;
}

.intro-text p {
    margin: 0 0 10px;
    line-height: 1.6;
    color: #444;
    font-size: 15px;
}

.accordion-small-img {
    border-right:2px solid #e53935; 
    padding-right:20px
}

.aux-profesional-accordion-small-img {
    border-color:#6D6E71; 
}

.aux-hexacorr-accordion-small-img {
    border-color:#87B233; 
}

.aux-mineral-accordion-small-img {
    border-color:#F48336; 
}

.aux-sport-accordion-small-img {
    border-color:#038BE5; 
}

.aux-polino-kids-accordion-small-img {
    border-color:#724199; 
}

.aux-bifokal-accordion-small-img {
    border-color:#546BB1; 
}

.aux-monofokal-accordion-small-img {
    border-color:#C17DB3; 
}

/* PDF LINKS */

.pdf-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pdf-link {
    text-decoration: none;
    color: #222;
    font-weight: 600;
    padding: 12px 0;
    border-bottom: 1px solid #ddd;
    transition: color .2s ease;
}

.pdf-link:hover {
    color: #e53935;
}

.pdf-link-profesional:hover {
    color: #6D6E71;
}

.pdf-link-hexacorr:hover {
    color: #87B233;
}

.pdf-link-mineral:hover {
    color: #F48336;
}

.pdf-link-sport:hover {
    color: #038BE5;
}

.pdf-link-polino-kids:hover {
    color: #724199;
}

.pdf-link-bifokal:hover {
    color: #546BB1;
}

.pdf-link-monofokal:hover {
    color: #C17DB3;
}

/* MOBILE */

@media (max-width: 700px) {

    .accordion-toggle {
        font-size: 16px;
        padding: 18px;
    }

    .accordion-item.active .accordion-content {
        padding: 20px 18px;
    }

}