:root {
    --mts-red: #d4001f;
    --mts-dark: #b00018;
    --dark: #222;
    --grey: #f5f5f5;
    --white: #fff;
    --text: #333;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* FIX: Sprečava bežanje sadržaja u stranu na telefonu */
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    font-family: 'Roboto', sans-serif;
    background-color: var(--white);
    color: var(--text);
    line-height: 1.6;
    padding-bottom: 80px; 
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- TOP BAR --- */
.top-bar { background: var(--dark); color: var(--white); padding: 10px 0; font-size: 0.9rem; }
.top-bar .container { display: flex; justify-content: space-between; align-items: center; }
.contact-info a { color: var(--white); text-decoration: none; font-weight: bold; margin-right: 15px; }
.top-tag { background: var(--mts-red); padding: 2px 8px; border-radius: 4px; font-weight: bold; font-size: 0.8rem; }

/* --- NAVBAR --- */
.navbar { background: var(--white); box-shadow: 0 2px 10px rgba(0,0,0,0.05); padding: 15px 0; position: sticky; top: 0; z-index: 100; }
.navbar .container { display: flex; justify-content: space-between; align-items: center; }
.logo { text-decoration: none; font-size: 1.5rem; display: flex; align-items: center; }
.logo-box { background: var(--mts-red); color: white; padding: 5px 10px; border-radius: 4px; font-weight: 900; }
.logo-text { color: var(--dark); font-weight: 300; margin-left: 5px; }

.btn-outline {
    border: 2px solid var(--mts-red);
    color: var(--mts-red);
    background: transparent;
    padding: 10px 25px;
    font-weight: 700;
    border-radius: 50px;
    cursor: pointer;
    transition: 0.3s;
}
.btn-outline:hover { background: var(--mts-red); color: white; }

/* --- CRVENA TRAKA --- */
.promo-strip {
    background: var(--mts-red);
    color: #ffffff;
    padding: 10px 0;
    width: 100%;
    overflow: hidden;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 1px;
    border-top: 1px solid rgba(255,255,255,0.2);
}

.marquee-wrapper { width: 100%; overflow: hidden; white-space: nowrap; }
.marquee-content { display: inline-block; white-space: nowrap; animation: marquee 25s linear infinite; }
@keyframes marquee { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }

/* --- HERO --- */
.hero { padding: 40px 0; background: linear-gradient(to bottom, #fff, #f9f9f9); }
.hero-container { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.hero-text-side { flex: 1; z-index: 2; }

.status-badge { color: var(--mts-red); font-weight: 900; letter-spacing: 1px; font-size: 0.9rem; display: block; margin-bottom: 10px; }
.hero h1 { font-size: 3.5rem; line-height: 1.1; color: var(--dark); margin-bottom: 15px; font-weight: 900; }
.hero-sub { font-size: 1.2rem; color: #666; margin-bottom: 25px; }

.price-block { margin-bottom: 25px; }
.old-price { display: block; text-decoration: line-through; color: #999; font-size: 1.1rem; }
.new-price { font-size: 3rem; color: var(--mts-red); font-weight: 900; line-height: 1; }
.new-price small { font-size: 1.5rem; color: var(--dark); }

.btn-primary-lg {
    background: var(--mts-red); color: white; border: none; padding: 18px 45px; 
    font-size: 1.1rem; font-weight: 700; border-radius: 50px; cursor: pointer; 
    box-shadow: 0 5px 20px rgba(212, 0, 31, 0.3); transition: 0.3s;
}
.btn-primary-lg:hover { background: var(--mts-dark); }
.link-more { margin-left: 20px; color: var(--dark); text-decoration: underline; font-weight: 500; }

.hero-image-desktop { flex: 1; text-align: right; }
.hero-image-desktop img { max-width: 100%; height: auto; }
.hero-image-mobile { display: none; width: 100%; text-align: center; margin: 20px 0; }
.hero-image-mobile img { max-width: 80%; height: auto; }

/* --- PRODUCT SECTION --- */
.product-section { padding: 50px 0; background: var(--white); }
.section-title { text-align: center; font-size: 2.2rem; color: var(--dark); margin-bottom: 40px; font-weight: 900; }
.dot { color: var(--mts-red); }

.grid-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }

.main-display { border: 1px solid #eee; border-radius: 15px; padding: 20px; text-align: center; margin-bottom: 15px; }
.main-display img { max-width: 100%; height: auto; }
.thumbs { display: flex; justify-content: center; gap: 10px; }
.thumb { width: 70px; height: 70px; border: 2px solid #eee; border-radius: 8px; cursor: pointer; object-fit: contain; padding: 5px; }
.thumb.active { border-color: var(--mts-red); }

.details-panel h3 { font-size: 1.8rem; margin-bottom: 15px; }
.badge-new { background: var(--mts-red); color: white; padding: 3px 8px; font-size: 0.7rem; border-radius: 4px; vertical-align: middle; margin-left: 10px; }
.desc { color: #555; margin-bottom: 25px; line-height: 1.5; font-size: 1.1rem; }

/* FIX: Razdvajanje teksta u specifikacijama */
.feature-item { 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    padding: 15px; 
    background: var(--grey); 
    border-radius: 8px; 
    margin-bottom: 10px; 
}
.feature-item i { font-size: 1.8rem; color: var(--mts-red); width: 40px; text-align: center; }

.feature-text { display: flex; flex-direction: column; }
.feature-text strong { 
    display: block; 
    color: var(--dark); 
    font-size: 1.1rem; 
    margin-bottom: 3px; /* Razmak između naslova i opisa */
}
.feature-text small { color: #666; font-size: 0.95rem; }

.delivery-note { margin-top: 15px; color: #28a745; font-weight: bold; }

/* --- FOOTER --- */
footer { background: #222; color: #888; padding: 40px 0; text-align: center; margin-top: 50px; }
.footer-logo { font-size: 1.8rem; color: white; font-weight: 900; margin-bottom: 15px; }
.footer-logo span { color: var(--mts-red); }
.contact-footer a { color: white; margin: 0 10px; text-decoration: none; font-weight: bold; }
.copyright { font-size: 0.8rem; opacity: 0.5; margin-top: 15px; }

/* --- MOBILE STICKY BAR --- */
.mobile-sticky-bar { 
    position: fixed; bottom: 0; left: 0; width: 100%; 
    background: white; padding: 12px 20px; 
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1); 
    display: none; justify-content: space-between; align-items: center; 
    z-index: 999; border-top: 2px solid var(--mts-red);
}
.price-mini { font-weight: 900; color: var(--mts-red); font-size: 1.3rem; line-height: 1; }
.price-mini span { display: block; font-size: 0.7rem; color: #666; font-weight: normal; margin-top: 2px; }
.btn-sticky { 
    background: var(--mts-red); color: white; border: none; 
    padding: 12px 30px; border-radius: 50px; 
    font-weight: bold; font-size: 1rem; text-transform: uppercase;
}

/* --- MODAL --- */
.modal { display: none; position: fixed; z-index: 2000; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); }
.modal-content { background: #fff; margin: 10% auto; width: 95%; max-width: 450px; border-radius: 10px; position: relative; animation: slideUp 0.3s; }
.modal-header { background: var(--mts-red); color: white; padding: 20px; text-align: center; border-radius: 10px 10px 0 0; }
.close-modal { position: absolute; right: 15px; top: 15px; color: white; font-size: 24px; cursor: pointer; }
form { padding: 20px; max-height: 70vh; overflow-y: auto; }
.form-group { margin-bottom: 15px; }
.form-group label { display: block; font-weight: bold; margin-bottom: 5px; font-size: 0.9rem; }
.form-group input, .form-group textarea { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; -webkit-appearance: none; }
.btn-submit-modal { width: 100%; background: var(--mts-red); color: white; padding: 15px; font-size: 1.1rem; font-weight: bold; border: none; border-radius: 5px; }
@keyframes slideUp { from { transform: translateY(50px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .hero-container { flex-direction: column; text-align: center; }
    .hero-text-side { width: 100%; }
    .hero h1 { font-size: 2.2rem; }
    .hero-image-desktop { display: none; }
    .hero-image-mobile { display: block; }
    .grid-layout { grid-template-columns: 1fr; gap: 30px; }
    .desktop-only { display: none; }
    .desktop-sep { display: none; }
    .mobile-sticky-bar { display: flex; }
    .contact-info { width: 100%; justify-content: center; }
}