@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

::-webkit-scrollbar{
    display: none;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

html {
    -webkit-text-size-adjust: 100%; /* Za iOS i Chrome na Androidu */
    -moz-text-size-adjust: 100%;    /* Za Firefox */
    -ms-text-size-adjust: 100%;     /* Za starije IE/Edge */
    text-size-adjust: 100%;
}


/*OVO TREBA PROVJERITI*/

:root{
    --naslov-color: #969d67;
    --krugovi-boja: linear-gradient(180deg, #b4bb8d 0%, #969d67 100%);
    --footer-boja: white;
    --footer-plava: #222534;
    --slova-footer: #3a393f;
}

body {
    overflow-y: scroll;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: pan-y;
}

/*PISMO DIZAJN*/


 /* BLOKADA SKROLA DOK JE KOVERTA TU */
        body.stop-scroll { 
            overflow: hidden !important; 
            position: fixed; /* Ključno za iPhone */
            height: 100vh; 
        }

        /* KOVERTA PREKO CELOG EKRANA */
        #overlay-pocetni {
    position: fixed;
    top: 0;
    left: 50%;
    left:0;
    transform: translateX(-50%);
    transform: none;
    width: 100%;
    max-width: 490px;
    max-width: none;
    height: 100vh;
    background-color: #fcfcfc;
    z-index: 9999999;
    transition: opacity 0.8s ease, visibility 0.8s;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

#video-koverta {
    /* Forsiramo širinu na mobilnom da bude 100% ekrana, a limitiramo na desktopu */
    width: 100vw !important; 
    max-width: 490px !important;
    
    /* Visina neka bude automatska prema širini */
    height: auto;
    max-height: 100%; 

    /* 'contain' osigurava da se vidi CIJELI video bez zumiranja. 
       Prazan prostor gore i dole će popuniti #fcfcfc boja iz overlay-a */
    object-fit: contain; 
    
    display: block;
}

.klik-zona {
    position: absolute;
    /* Centriranje na ekranu */
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Smanjena veličina da pokrije samo pečat */
    width: 120px; 
    height: 120px;
    
    /* Potpuno nevidljivo */
    background: transparent; 
    border-radius: 50%; 
    
    z-index: 10000000;
    cursor: pointer;
    
    /* Sprečava plavi odsjaj pri kliku na mobilnom */
    -webkit-tap-highlight-color: transparent;
    outline: none;
}



.sakrij-uvertiru { 
    opacity: 0 !important; 
    visibility: hidden !important; 
    pointer-events: none; 
        }
        
        
/* Uklanja plavi odsjaj na mobilnim telefonima */
#overlay-pocetni {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

/* Postavljamo overlay kao kontejner za apsolutno pozicionirano dugme */
#overlay-pocetni {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
}




.phone-container {
    width: 100vw;
    max-width: 490px;
    background-color: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

header{
  display: flex;
  align-items: center;
  justify-content: space-around;
  /* UKLONJENA SJENKA */
  /* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4); */
  position: sticky;
  top: 0;
  z-index: 1000;
  max-height: 50px;
  background-color: white; /* Dodana bijela pozadina da ne bude providan */
}

header .meni_logo .logo{
max-height: 50px;
margin-top: 5px;
}

section{
  margin-top: -7px;
}

.section-1 {
  position: relative;
  width: 100%;
  overflow: hidden;
  margin-top: 0px;
}

.margin-7{
    margin-top: -7px;
}

.section-1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-2 {
  position: relative;
  margin-top: -8px;
  width: 100%;
  min-height: 300px;
  overflow: hidden;
  /*OVO TREBA PROVJERITI*/
  background-image: url(Krstenje_03.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 80px;
  margin-bottom: 50px;
}

.section-2 h1{
  margin-top: 50px;
  text-align: center;
  color:  var(--naslov-color);
  font-family:  'Libre Baskerville', serif;
  font-weight: 800;
  font-size: 34px;
}

/* ODBROJAVANJE - KRUGOVI */
#time{
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
}

#time div{
  position: absolute;
  text-align: center;
  font-weight: 600;
  color: var(--clr);
  z-index: 10000;
  font-size: 1.2em; /* Malo veći font jer je krug veći */
}

#time div span{
  position: absolute;
  transform: translateX(-50%) translateY(-14px); /* Malo podešena pozicija */
  font-size: 0.25em;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-top: 3.5px;
}

/* TEKSTOVI ISPOD KRUGOVA */
.labels-container {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  width: 100%;
}

.label-box {
  width: 75px; /* Ista širina kao novi krugovi */
  text-align: center;
}

.label-box h3 {
  color: var(--naslov-color);
  font-family: 'Libre Baskerville', serif;
  font-size: 14px;
  margin-top: 5px;
}

#time .circle {
  position: relative;
  width: 75px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  
  /* CIJELI KRUG ODJEDNOM - Nema više rezova */
  background: var(--krugovi-boja);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* Brišemo ::before i ::after jer nam više ne trebaju dva kruga */
#time .circle::before, 
#time .circle::after {
  display: none; 
}

/* Dodajemo sjenku unutar kruga da dobije na dubini */
#time .circle svg {
  position: relative;
  width: 75px;
  height: 75px;
  transform: rotate(270deg);
  z-index: 10;
  /* Ovo pravi 'kanal' u kojem bijela linija leži */
  background: rgba(0, 0, 0, 0.1); 
  border-radius: 50%;
}

#time .circle svg circle {
  fill: transparent;
  stroke-width: 2.5; /* Debljina tvog punjenja */
  stroke: var(--clr);
  stroke-linecap: round;
  cx: 37.5;
  cy: 37.5;
  r: 32; 
  stroke-dasharray: 207;
  stroke-dashoffset: 207;
}

.section-3 {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.section-3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer .container{
  text-align: center;
}

.footer{
  margin-top: -7px;
  background: var(--footer-boja);
  font-size: 14px;
}

.footer .copyright {
  text-align: center;
  padding: 15px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--slova-footer);
}

@media (max-width: 991px) {
  .footer .row{
      flex-direction: column;
      padding: 20px 0px;
  }
}

@media (max-width: 350px) {
  .section-1 img {
      object-fit: contain;
  }
}


/* KOD ZA DUGME SACUVAJ DATUM */

.image-button-container {
    position: relative;
    display: inline-block;
    width: 100%;
   
}

.background-image {
    width: 100%;
    display: block;
}

/* Nevidljiva zona preko dugmeta na slici */
.clickable-overlay {
    position: absolute;
    left: 15%; /* Centrirano otprilike */
    width: 70%;
    cursor: pointer;
    background: rgba(255, 0, 0, 0); /* Skroz providno, stavi 0.2 ako hoćeš da vidiš gde je dok podešavaš */
    border-radius: 30px;
}



.calendar-options.show-menu {
    display: block;
}

.calendar-options a {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    border-bottom: 1px solid #eee;
}

/* Osiguravamo da su ikonice vidljive */
.calendar-options a img {
    display: inline-block !important; /* Forsiramo prikaz */
    vertical-align: middle;
    width: 20px; /* Malo smo ih povećali */
    height: auto;
    margin-right: 12px;
    filter: none !important; /* Sprečavamo da ih neka druga komanda sakrije */
}

/* Podešavanje samog menija */
.calendar-options {
    display: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 250px; 
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    z-index: 9999; /* Da bude iznad svega */
    border: 1px solid #ddd;
    overflow: hidden;
}

/* DUGMAD MAPE */


.image-map-container {
    position: relative;
    display: inline-block;
    width: 100%;
    /* Sprečava slučajno selektovanje slike dok se klikće po dugmićima */
    -webkit-user-select: none;
    user-select: none;
}

.image-map-container img {
    width: 100%;
    display: block;
}

/* Osnova za oba nevidljiva dugmeta */
.map-link-btn {
    position: absolute;
    left: 15%;  /* Centrirano po širini */
    width: 70%; /* Širina dugmeta na slici */
    height: 6.5%; /* Malo povećana visina za lakši klik prstom */
    background: rgba(255, 255, 255, 0); /* Skroz providno */
    cursor: pointer;
    border-radius: 35px; /* Prati zaobljenost tvog dizajna */
    
    /* UKLANJANJE BLICA I TREPTANJA */
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    outline: none;
    
    /* EFEKAT PRIRODNOG KLIKA */
    transition: background 0.2s ease;
}

/* Blagi vizuelni odgovor kada korisnik zapravo pritisne dugme */
.map-link-btn:active {
    background: rgba(255, 255, 255, 0.2); /* Nežni beli odsjaj unutar dugmeta */
}

/* Pozicija za Crkvu (Otvori mapu 1) */
.crkva-btn {
        top: 50.8%;
}

/* Pozicija za Restoran (Otvori mapu 2) */
.restoran-btn {
    top: 90.8%;
}

/* Globalna zaštita od sistemskih okvira i markiranja */
.map-link-btn, .map-link {
    -webkit-touch-callout: none;
    outline: none;
}

#calendar-main-btn, 
.clickable-overlay, 
.calendar-options a,
.map-link-btn {
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* Dupla sigurnost za starije browsere */
    outline: none; /* Uklanja i narandžasti okvir koji se nekad javi */
}


/* RSVP */

.section-rsvp {
    display: flex;
    justify-content: center;
}

.rsvp-container {
    width: 100%;

    aspect-ratio: 1 / 2.6;
    background-image: url('Krstenje_04.jpg');
    background-size: cover; /* Osigurava da se vidi cijela slika luka */
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 200px; /* Podesi ovisno o tome gdje luk počinje */
    padding-top: 43%;
    box-sizing: border-box;
}

.rsvp-content {
    width: 80%; /* Sužava sadržaj da stane unutar luka */
    text-align: center;
}

.rsvp-naslov {
    font-family: 'Source Serif 4', serif;
    color: #969d67;
    font-size: 42px; /* Povećano */
    letter-spacing: 2px;
    margin-top:30px;
    margin-bottom: 40px;
    width: 100%;
}

.rsvp-opis {
    color: #969d67;
    font-size: 24px; /* Povećano */
   font-family: 'Source Serif 4', serif;
    line-height: 1.5;
    margin-bottom: 60px;
    /*padding-left: 40px;
    padding-right: 40px; */
}

.rsvp-opis strong{
   font-family: 'Source Serif 4', serif;
   font-weight: bold;
}

.input-group {
    margin-bottom: 25px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.9); /* Linija */

     border-bottom: 2px solid #969d67;
    /* Dodaj ove tri linije ispod */
    width: 100%;           /* Dozvoljava elementu da bude fleksibilan */
    max-width: 300px;      /* Ovdje kontroliraš širinu crtice (npr. 200px ili 250px) */
    margin-left: auto;     /* Centrira element lijevo */
    margin-right: auto;    /* Centrira element desno */
    font-size: 25px;
}

.input-group input {
    width: 80%;
    background: transparent;
    border: none;
    color:  #969d67;
    font-size: 18px; /* Veći unos */
    text-align: center;
    padding: 12px;
    outline: none;
    font-family: 'Source Serif 4', serif;
    font-size: 20px;
}

/* Stil za nevidljivo dugme */
#submit-btn {
    margin-top: 45%; /* Podesi ovaj margin dok dugme ne sjedne točno preko slike */
    width: 300px;
    height: 60px; /* Visina nacrtanog dugmeta na slici */
    background: transparent; /* Potpuno prozirno */
    border: none;
    cursor: pointer;
    outline: none;
}


/* Opcionalno: vizualni feedback kad se pređe mišem preko nevidljivog dugmeta */
#submit-btn:hover {
    /*background: rgba(255, 255, 255, 0.1); */
    border-radius: 50px;
}


/* Za modernije browsere (Chrome, Safari, Edge) */
.input-group input::placeholder {
    color: rgba(255, 255, 255, 0.8); 
    color: #b9bf92; 
    opacity: 1; /* Osigurava da boja ne bude previše izblijedjela */
    font-family: 'Source Serif 4', serif;
}

/* Za Firefox */
.input-group input::-moz-placeholder {
    color: rgba(255, 255, 255, 0.8);
    color: #969d67 !important;    
    opacity: 1;
    font-family: 'Source Serif 4', serif;
}

/* Za Internet Explorer i starije verzije Edge */
.input-group input:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.8);
    color: #969d67 !important;    
    font-family: 'Source Serif 4', serif;
}


/* Poništavanje pozadine i boje slova kod automatskog popunjavanja */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px rgba(0, 0, 0, 0) inset !important; /* Čini pozadinu prozirnom */
    -webkit-text-fill-color: #969d67 !important; /* Forsira bijelu boju slova */
    transition: background-color 5000s ease-in-out 0s; /* Sprečava browser da vrati boju */
}



#submit-btn {
    /* 1. Uklanja plavu boju pri kliku (Android & iPhone) */
    -webkit-tap-highlight-color: transparent;
    -webkit-tap-highlight-color: rgba(0,0,0,0);

    /* 2. Uklanja sistemski izgled dugmeta na iPhone-u (Safari) */
    /* Bez ovoga, iPhone nekad doda zaobljene ivice ili gradijent koji ne želiš */
    -webkit-appearance: none;
    appearance: none;

    /* 3. Uklanja sivi okvir koji se pojavi na iPhone-u nakon klika */
    outline: none;
}

/* Rešenje za iPhone "Selection" - sprečava da se slika ili tekst označe dok gost brzo klika */
.rsvp-container {
    -webkit-user-select: none; /* Safari */
    user-select: none; 
}



/* Glavni kontejner - centriramo tekst "Da li dolazite..." */
.potvrda-group {
    text-align: center;
    margin-bottom: 20px;
}

.potvrda-group p {
    color: #969d67;
    margin-bottom: 10px; /* Razmak između teksta i dugmića */
    font-size: 24px;
    font-family: 'Source Serif 4', serif;
}

/* Kontejner za radio dugmiće */
.radio-options {
    display: flex;
    justify-content: center; /* Ovo ih gura na sredinu horizontalno */
    align-items: center;     /* Ovo ih poravnava vertikalno da budu u istoj ravni */
    gap: 20px;               /* Razmak između DA i NE opcije */
    color: #969d67;
}

/* Svaki label pojedinačno */
.radio-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 1.3rem;
    font-family: 'Source Serif 4', serif;
}

/* Razmak između same tačke i teksta DA/NE */
.radio-label input {
    margin-right: 8px;
    accent-color: #969d67; /* Tvoja boja */
    width: 18px;           /* Opciono: malo veći kružić radi lakšeg klika */
    height: 18px;
}



/* RSVP RESPONSE ZA TELEFON */

@media (max-width: 480px) {
#submit-btn {
    margin-top: 35%;
}

}
@media (max-width: 460px) {



.rsvp-content {
    width: 80%; /* Sužava sadržaj da stane unutar luka */
    text-align: center;
}


.rsvp-opis {
    font-size: 24px;
}



.input-group input {
    width: 80%;
    font-size: 20px;
    text-align: center;
    padding: 12px;
    outline: none;

}


}

@media (max-width: 440px) {

    .rsvp-naslov {

    font-size: 36px; /* Povećano */
    }

    .rsvp-opis {
        font-size: 23px;
       margin-bottom: 40px;
    }
    .potvrda-group p {
        font-size: 22px;
    }
    .radio-label {
        font-size: 1.05rem;
    }
}

@media (max-width: 414px) {
     .rsvp-opis {
        font-size: 22px;
      
    }
}

@media (max-width: 410px) {
    #submit-btn {
        margin-top: 20%;
    }
}

@media (max-width: 400px) {
    
    .rsvp-naslov {
     font-size: 40px; /* Povećano */
    line-height: 1;
    
    }
    .rsvp-container {

    padding-top: 44%;

}

.input-group input {
    font-size: 18px;
}

.rsvp-opis {
    /*padding-left: 20px;
    padding-right: 20px;*/

    font-size: 19px; /* Povećano */


}
}

@media (max-width: 395px) {
    .rsvp-opis {

    font-size: 19px; /* Povećano */
    margin-bottom: 20px;

}
}

/*@media (max-width: 377px) {
    .rsvp-opis {

    font-size: 19px; 


}

 .potvrda-group p {
        font-size: 19px;
    }
}
*/

@media (max-width: 360px) {
    .rsvp-opis {

    font-size: 18px; /* Povećano */


}
}


@media (max-width: 360px) {
        .rsvp-naslov {
    font-size: 30px; /* Povećano */
    
    }
        .rsvp-container {

    padding-top: 44%;

}

.rsvp-opis{
    margin-bottom: 30px;
}
}

@media (max-width: 353px) {
      


   #submit-btn {
        margin-top: 18%;
    }
}


@media (max-width: 342px) {
      

.rsvp-opis{
    font-size: 18px;
}
   #submit-btn {
        margin-top: 14%;
    }
}


@media (max-width: 333px) {
     .rsvp-container {

    padding-top: 34%;

}

}


@media (max-width: 319px) {
    .input-group input {
        font-size: 16px;
    }
    
    .rsvp-opis {
        margin-bottom: 15px;
    }
    
    .rsvp-naslov{
         margin-bottom: 20px;
    }

}

@media (max-width: 290px) {
        .rsvp-container
 {
        padding-top: 36%;
    }
    .rsvp-opis{
    font-size: 15px;
}
      .rsvp-naslov {
    font-size: 25px; /* Povećano */
    
    }
}

@media (max-width: 269px) {
        .rsvp-container
 {
        padding-top: 30%;
    }
   
}

@media (max-width: 259px) {
    .input-group {
        margin-bottom: 5px;
    }
}

@media (max-width: 235px) {
    .rsvp-opis{
    font-size: 13px;
}
  .input-group input {
        font-size: 13px;
    }
}