/* -----------------------------------
   KONTAKT STRANICA – FINALNA ISPRAVKA
----------------------------------- */

body {
    margin: 0;
    padding: 0;
}

.main-container {
    margin-top: 150px; /* visina headera */
    min-height: calc(100vh - 150px - 40px); /* ekran minus header minus footer */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

/* Naslov */
.kontakt-naslov {
    font-family: 'Century Gothic', Arial, sans-serif;
    text-align: center;
    font-size: 3rem; 
    color: white;
    margin: 50px 0 20px 0; 
    text-shadow: 2px 2px 5px rgba(0,0,0,0.7);
}

/* Glavni kontejner */
.kontakt-kontejner {
    width: 90%;
    max-width: 1150px;
    display: flex;
    justify-content: space-between;
    gap: 25px;
    flex-wrap: wrap;
}

/* DESKTOP: keep two-column layout, map on the right */
@media (min-width: 768px) {
    .kontakt-kontejner {
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: flex-start;
        height: auto;
    }

    /* Slightly reduce left column and increase right column for better balance */
    .leva-kolona {
        width: 40%;
        padding-right: 12px;
    }

    .desna-kolona {
        width: 60%;
        padding-left: 12px;
    }

    .kartica {
        width: 100%;
    }

    .mapa-okvir {
        height: 360px; /* slightly larger on desktop */
    }
}

/* MOBILE: stack vertically in the requested order */
@media (max-width: 768px) {
    /* ensure the main container uses full available width */
    .main-container {
        width: 100% !important;
        box-sizing: border-box;
        padding-left: 0;
        padding-right: 0;
    }

    .kontakt-kontejner {
        flex-direction: column;
        gap: 18px;
        align-items: center; /* center sections horizontally */
        width: 100% !important; /* full available width */
        max-width: none !important;
        margin: 0 auto;
        box-sizing: border-box;
        padding-left: 20px; /* side padding for readability */
        padding-right: 20px;
    }

    .leva-kolona, .desna-kolona {
        width: 100% !important;
        margin: 0 auto; /* center the column */
        padding-left: 0;
        padding-right: 0;
        box-sizing: border-box;
    }

    .kartica {
        width: 100% !important;
        box-sizing: border-box;
        padding: 18px;
        overflow: visible; /* ensure text is not cropped */
        margin: 0 auto;
    }

    /* make map flexible and visible without cropping */
    .mapa-okvir {
        height: auto;
        min-height: 240px;
        width: 100% !important;
        box-sizing: border-box;
    }

    .mapa-okvir iframe {
        width: 100% !important;
        height: 100% !important;
        min-height: 240px !important;
        box-sizing: border-box;
    }

    /* Ensure the Google Maps button text stays on one line on mobile */
    .map-button {
        white-space: nowrap;
        font-size: 15px;
        padding: 10px 16px !important;
        display: inline-block;
    }
}

/* Leva kolona */
.leva-kolona {
    width: 45%;
    display: flex;
    flex-direction: column;
    gap: 20px; /* umesto space-between */
}

/* Kartice */
.kartica {
    background: rgba(0, 0, 0, 0.55);
    padding: 20px; /* smanjeno */
    border-radius: 18px;
    backdrop-filter: blur(6px);
    overflow: hidden;
}

.kartica h2 {
    margin: 0 0 10px 0;
    font-size: xx-large;
    color: #fff;
}

.kartica p {
    margin: 5px 0;
    font-size: 18.7px;
    color: #e6e6e6;
}

/* Center-align titles and body text in the LEFT column (applies to all viewports) */
.leva-kolona .kartica h2,
.leva-kolona .kartica p,
.leva-kolona .kartica .contact-info,
.leva-kolona .kartica .contact-info p,
.leva-kolona .kartica .contact-info a {
    text-align: center;
}

/* Desktop-only: increase left-column body text size by 1px for improved readability
   This does not affect mobile because mobile rules (max-width:768px) remain unchanged. */
@media (min-width: 768px) {
    .leva-kolona .kartica p,
    .leva-kolona .kartica .contact-info p,
    .leva-kolona .kartica .contact-info a {
        font-size: 19.7px; /* 18.7px + 1px */
    }
}
.dan {
    font-weight: 700;
    color: white; /* ili #00ff00 ako želiš zeleno */
}

/* Linkovi */
a {
    color: #ffde59;
}

a:hover {
    text-decoration: underline;
}

/* Desna kolona (mapa) */
.desna-kolona {
    width: 55%;
    display: flex;
    flex-direction: column;
}

.mapa-okvir {
    flex: none;
    height: 300px; /* SMANJENO DA SVE STANE */
}

.mapa-okvir iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 18px;
}

/* Dugme ispod mape */
.dugme-okvir {
    margin-top: 15px;
    text-align: center;
}

.dugme-okvir a button {
    padding: 10px 22px;
    font-size: 17px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background-color: #ffde59;
    font-weight: bold;
}

.dugme-okvir a button:hover {
    background-color: #ffd633;
}
/* 1) Spusti naslov */
.kontakt-naslov {
    margin-top: 60px;
}

/* 2) Telefonski i mejl – bez podvlačenja i u zelenoj boji */
.contact-info a {
    text-decoration: none !important;
    color: #00ff00 !important;
    font-weight: 600;
}

/* 3) Google Maps dugme – zelena pozadina */
.map-button {
    display: inline-block;
    padding: 12px 25px;
    color: white;
    font-weight: bold;
    text-decoration: none;
    border-radius: 10px;
    background: linear-gradient(to bottom, #00ff00, #057c82);
    transition: 0.2s;
}

.map-button:hover {
    transform: scale(1.08);
    opacity: 0.9;
}
/* --------------------------
   1) Spusti SAMO NASLOV
---------------------------*/
.kontakt-naslov {
    margin-top: 10px !important;
}

/* --------------------------
   2) Ne pomeraj ostatak sadržaja
---------------------------*/
.main-container {
    justify-content: flex-start !important; /* da se ništa ne spušta */
}

/* --------------------------
   3) Telefonski i mejl linkovi – zeleni, ne podvučeni
---------------------------*/
.contact-info a {
    text-decoration: none !important;
    color: #00ff00 !important;
    font-weight: 700;
}

/* --------------------------
   4) Lepše, veće, zaobljenije zeleno dugme
---------------------------*/
.map-button {
    display: inline-block;
    padding: 14px 32px !important;  /* veće dugme */
    background-color: #00ff00 !important;
    color: white !important;
    border-radius: 14px !important; /* lepše zaobljeno */
    font-size: 19px !important;
    font-weight: 700;
    border: none !important;
    text-decoration: none !important;
}

.map-button:hover {
    background-color: #00cc00 !important;
    color: black !important;
}

/* Weekday name toggles: default (desktop) shows full names; mobile shows short names */
.day-short { display: none; }
.day-full { display: inline; }

@media (max-width: 768px) {
    .day-full { display: none !important; }
    .day-short { display: inline !important; }
}