body.contact-page{
  min-height:100vh;
  margin:0;
  color:#2b1b12;
  background:
    linear-gradient(rgba(30,17,10,.9),rgba(30,17,10,.94)),
    url('../img/interior.webp') center/cover fixed no-repeat;
}

.contact-hero{
  min-height:280px;
  display:grid;
  place-items:end center;
  padding:72px 18px 42px;
  text-align:center;
  color:#fff;
  background:linear-gradient(to bottom,rgba(15,8,4,.12),rgba(15,8,4,.7));
}

.contact-hero-inner{
  display:block;
  color:inherit;
  text-decoration:none;
}

.contact-hero-inner span{
  display:block;
  margin-bottom:12px;
  color:#efd2a0;
  font-family:Georgia,serif;
  font-size:13px;
  letter-spacing:.3em;
}

.contact-hero-inner h1{
  margin:0;
  color:#fff5e4;
  font-family:Georgia,serif;
  font-size:clamp(44px,12vw,66px);
  line-height:.95;
  text-shadow:0 6px 22px rgba(0,0,0,.78);
}

.contact-hero-inner p{
  margin:12px 0 0;
  color:#f1d29a;
  font-family:Georgia,serif;
  font-size:24px;
  font-style:italic;
}

.contact-lang{
  position:fixed;
  top:max(14px,env(safe-area-inset-top));
  right:14px;
  z-index:92;
  min-width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(255,255,255,.42);
  border-radius:10px;
  color:#fff;
  background:rgba(31,17,10,.72);
  box-shadow:0 7px 22px rgba(0,0,0,.22);
  text-decoration:none;
  font-size:13px;
  font-weight:750;
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
}

.contact-main{
  width:min(760px,calc(100% - 24px));
  margin:-22px auto 0;
  padding-bottom:48px;
  position:relative;
}

.contact-card{
  padding:22px;
  border:1px solid rgba(185,145,79,.75);
  border-radius:18px;
  background:linear-gradient(145deg,#fff5e4,#ead8b9);
  box-shadow:0 18px 42px rgba(0,0,0,.3);
}

.contact-intro{
  margin:0 0 20px;
  color:#5e4b3d;
  line-height:1.65;
  text-align:center;
}

.contact-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.contact-item{
  min-height:116px;
  padding:15px;
  border:1px solid rgba(141,102,54,.25);
  border-radius:13px;
  background:rgba(255,255,255,.34);
}

.contact-item span{
  display:block;
  margin-bottom:7px;
  color:#806b55;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.contact-item strong,
.contact-item a,
.contact-item p{
  margin:0;
  color:#2b1b12;
  font-size:16px;
  line-height:1.45;
  text-decoration:none;
}

.contact-item a{
  color:#762019;
  font-weight:750;
}

.contact-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin-top:18px;
}

.contact-action{
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 16px;
  border-radius:10px;
  color:#fff;
  background:#762019;
  text-decoration:none;
  font-weight:750;
}

.contact-action.secondary{
  color:#2b1b12;
  background:#e2c99f;
}

@media(max-width:620px){
  .contact-hero{
    min-height:245px;
    padding-bottom:36px;
  }

  .contact-main{
    width:min(100% - 18px,760px);
    margin-top:-18px;
  }

  .contact-card{
    padding:14px;
    border-radius:15px;
  }

  .contact-grid{
    grid-template-columns:1fr;
  }

  .contact-item{
    min-height:0;
  }

  .contact-lang{
    top:max(12px,env(safe-area-inset-top));
    right:12px;
    width:42px;
    height:42px;
  }
}


/* Google mapa */
.contact-map{
  margin-top:22px;
}

.contact-map h2{
  margin:0 0 12px;
  color:#762019;
  font-family:Georgia,serif;
  font-size:24px;
  font-weight:600;
  text-align:center;
}

.contact-map iframe{
  display:block;
  width:100%;
  height:360px;
  border:0;
  border-radius:14px;
  background:#e5d2b2;
  box-shadow:0 10px 26px rgba(0,0,0,.16);
}

@media(max-width:620px){
  .contact-map{
    margin-top:18px;
  }

  .contact-map h2{
    font-size:21px;
  }

  .contact-map iframe{
    height:300px;
    border-radius:12px;
  }
}


/* Google ocena */
.contact-action.review-button{
  grid-column:1 / -1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:#2b1b12;
  background:linear-gradient(180deg,#f7d766,#e9bd32);
  border:1px solid rgba(126,88,18,.42);
  box-shadow:0 7px 18px rgba(85,56,9,.16);
  font-weight:800;
}

.contact-action.review-button:hover{
  background:linear-gradient(180deg,#ffe27a,#efc441);
}

.contact-action.review-button span{
  font-size:19px;
  line-height:1;
}

@media(max-width:620px){
  .contact-action.review-button{
    grid-column:auto;
  }
}


/* Google Maps navigacija */
.contact-action.navigation-button{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  color:#fff;
  background:linear-gradient(180deg,#417a43,#315f34);
  border:1px solid rgba(28,76,31,.72);
  box-shadow:0 7px 18px rgba(23,62,26,.18);
  font-weight:800;
}

.contact-action.navigation-button:hover{
  background:linear-gradient(180deg,#4b8a4d,#386c3b);
}

.contact-action.navigation-button span{
  font-size:20px;
  line-height:1;
}