:root {
  --bg-taupe: #b9b0a3;
  --black: #0f0f0f;
  --dark: #131313;
  --text: #e9e9e9;
  --muted: #c9c9c9;
  --primary: #a7b3ff;
  /* nijansa plave sa screenshota */
  --primary-700: #8f9ef8;
  --outline: #7b7b7b;
  --container: 1280px;
    --beige: #DEC9A3;       /* glavna bež (možeš nijansirati) */
  --beige-700:#CDB68D;    /* hover */
  --beige-800:#BDA97F;    /* focus ring */
  --ink:#111;             /* tamni tekst */
}

* {
  box-sizing: border-box;
}
html { scroll-behavior: smooth; }

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #111;
  background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(28,28,28,1) 30%, rgba(38,38,38,1) 50%, rgba(28,28,28,1) 70%, rgba(0,0,0,1) 100%) !important;
  /* rubovi */
}

/* Utilities */
.container {
  width: min(var(--container), 100%);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Top bar */
.topbar {
  background: #0c0c0c;
  color: #d2bfa2;
  /* zlatno/bakarni ton */
  font-size: 12px;
  line-height: 1;
  border-bottom: 1px solid #1e1e1e;
}

.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 24px;
}

.topbar-left {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.topbar-left .sep {
  opacity: .4;
}

.topbar-right a {
  color: #d2bfa2;
  text-decoration: none;
  margin-left: 14px;
  display: inline-flex;
}

.topbar-right a:hover {
  opacity: .8;
}

/* Header / nav */
.site-header {
  background: var(--black);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 40px 20px;

}
.site-header {
  background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(28,28,28,1) 30%, rgba(38,38,38,1) 50%, rgba(28,28,28,1) 70%, rgba(0,0,0,1) 100%);
}
.nav-left,
.nav-right {
  display: flex;
  align-items: center;
  gap: 30px;
}

.nav-left a {
  color: #cfcfcf;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.nav-left a:hover {
  color: #fff;
}

.site-logo {
  justify-self: center;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.site-logo img {
  height: 46px;
  width: auto;
  display: block;
}

.site-logo .logo-fallback {
  color: #fff;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 18px;
  display: none;
  /* vidi se samo dok nemaš logo, ukloni kasnije */
}

.site-logo img[src=""]+.logo-fallback {
  display: block;
}

.nav-right .phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
}

.nav-right .phone i {
  opacity: .85;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  text-decoration: none;
}

/* === BEŽ TIPKE UMJESTO NARANDŽASTIH === */
:root{
  --beige: #DEC9A3;       /* glavna bež (možeš nijansirati) */
  --beige-700:#CDB68D;    /* hover */
  --beige-800:#BDA97F;    /* focus ring */
  --ink:#111;             /* tamni tekst */
}

/* Glavna primarna tipka (bivša narandžasta) */
.btn-primary,
.promo-cta.btn{
  background: var(--beige) !important;
  color: var(--ink) !important;
  border-color: transparent !important;
}

.btn-primary:hover,
.promo-cta.btn:hover{
  background: var(--beige-700) !important;
  color: var(--ink) !important;
}

.btn-primary:focus-visible,
.promo-cta.btn:focus-visible{
  outline: 3px solid var(--beige-800);
  outline-offset: 2px;
}

/* (opciono) ako imaš negdje .btn-warning / .btn-accent, ujednači ih: */
.btn-warning, .btn-accent { background: var(--beige) !important; color: var(--ink) !important; }



.btn-outline {
  border: 1px solid var(--outline);
  color: #e8e8e8;
  background: transparent;
}

.btn-outline:hover {
  border-color: #bdbdbd;
  color: #fff;
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  position: relative;
  width: 36px;
  height: 28px;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: -8px;
}

.nav-toggle span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #fff;
  transform-origin: left center;
}

.nav-toggle span:nth-child(1) {
  top: 4px;
}

.nav-toggle span:nth-child(2) {
  top: 13px;
}

.nav-toggle span:nth-child(3) {
  top: 22px;
}

.mobile-menu {
  display: none;
  background: #0f0f0f;
  border-top: 1px solid #1e1e1e;
}

.mobile-menu a {
  display: block;
  padding: 14px 24px;
  color: #dcdcdc;
  text-decoration: none;
  border-bottom: 1px solid #1a1a1a;
}

.mobile-menu .btn {
  margin: 16px 24px;
}




/* “Kreda” panel */
.hero-card {
  align-self: center;
  color: var(--text);
  background:
    radial-gradient(1200px 400px at 20% 20%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 50%),
    radial-gradient(900px 600px at 80% 80%, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 60%),
    #161616;
  border-radius: 2px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, .35);
  padding: 44px 38px;
}

.hero-card .brand {
  margin: 0 0 10px 0;
  font-weight: 800;
  font-size: clamp(34px, 5vw, 56px);
  letter-spacing: .08em;
}

.hero-card .brand span {
  display: block;
  margin-top: 6px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .22em;
  color: #d4d4d4;
}

.lead {
  color: #d9d9d9;
  font-size: 15px;
  line-height: 1.7;
  margin: 16px 0 26px 0;
}

.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Hero image right */
.hero-image-wrap {
  position: relative;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;

}

.hero-image {
  max-height: min(90vh, 760px);
  width: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 12px 40px rgba(0, 0, 0, .35));
}

/* Responsive */
@media (max-width: 1100px) {
  .site-header .container {
    grid-template-columns: auto 1fr auto;
  }

  .nav-left {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    min-height: unset;
    padding-top: 32px;
  }

  .hero-image-wrap {
    order: 2;
    justify-content: center;
  }

  .hero-image {
    max-height: 520px;
  }

  .nav-right .phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 11px;
}


}

@media (max-width: 640px) {
  .btn {
    padding: 11px 16px;
    font-size: 11px;
  }

  .lead {
    font-size: 14px;
  }

  .topbar .container {
    padding: 8px 16px;
  }

  .site-header .container {
    padding: 14px 16px;
  }
}

/* Treatments section */
.treatments {

  color: #eee;
  padding: 110px 0px 0px 0px;
}

.section-head {
  text-align: center;
  max-width: 920px;
  margin: 36px auto 36px;
}

.section-tag {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 2px;
  background: #c7b089;
  color: #121212;
  font-size: 14px;
  letter-spacing: .25em;
  text-transform: uppercase;
  text-align: center !important;
  font-weight: 700;
}

.section-intro {
  color: #d7d7d7;
  font-size: 18px;
  line-height: 1.8;
  text-align: center !important;

}

.treats-carousel {
  display: flex;
  gap: 38px;
  overflow-x: auto;
  padding: 18px 12px 6px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.treats-carousel::-webkit-scrollbar {
  height: 8px;
}

.treats-carousel::-webkit-scrollbar-thumb {
  background: #2a2a2a;
  border-radius: 4px;
}

.treat-card {
  position: relative;
  flex: 0 0 360px;
  height: 480px;
  border-radius: 4px;
  overflow: hidden;
  background: #222;
  scroll-snap-align: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}

.treat-card .card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(95%);
}

.treat-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .38) 0%, rgba(0, 0, 0, .50) 60%, rgba(0, 0, 0, .60) 100%);
}

.card-overlay {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
  color: #fff;
}

.kicker {
  margin-top: 6px;
  margin-bottom: auto;
  opacity: .9;
  font-size: 10px;
  letter-spacing: .28em;
  text-transform: uppercase;
  line-height: 1.6;
}

.treat-card h3 {
  margin: 10px 0 0;
  font-size: 28px;
  line-height: 1.2;
}

.btn-outline.light {
  border: 1px solid rgba(255, 255, 255, .6);
  color: #fff;
  background: transparent;
}

.btn-outline.light:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, .08);
}

.dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}

.dots button {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: #6b6b6b;
  opacity: .6;
  cursor: pointer;
}

.dots button[aria-current="true"] {
  background: #fff;
  opacity: 1;
  transform: scale(1.2);
}

/* Responsive */
@media (max-width: 900px) {
  .section-intro {
    font-size: 16px;
  }

  .treat-card {
    flex-basis: 78vw;
    height: 460px;
  }
}

@media (max-width: 560px) {
  .treat-card {
    flex-basis: 86vw;
    height: 440px;
  }
}




/* ========== 3) About / Umijeće ========== */
.about-block {
  position: relative;
  background: #0f0f0f;
  padding: 80px 0 80px;
  color: #eaeaea;
  overflow: hidden;
}

/* suptilna “kreda/tekstura” */
.about-block::before {
  content: "";
  position: absolute;
  inset: -10% -20% -10% -20%;
  background:
    radial-gradient(60% 30% at 70% 20%, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 60%),
    radial-gradient(40% 20% at 30% 90%, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 70%);
  opacity: .6;
  pointer-events: none;
}

.about-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}

.about-title {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.05;
  margin: 0 0 18px;
  font-size: clamp(28px, 5vw, 48px);
}

.about-lead {
  color: #cfcfcf;
  font-size: 16px;
  line-height: 1.8;
  max-width: 640px;
  margin: 0 0 26px;
}

.features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.features-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: flex-start;
  column-gap: 14px;
}

.features-list .ico {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: rgba(199, 176, 137, .12);
  border: 1px solid rgba(199, 176, 137, .35);
  color: #c7b089;
}

.features-list i {
  font-size: 18px;
  line-height: 1;
}

.feat-title {
  font-weight: 800;
  color: #fff;
}

.feat-text {
  color: #bfbfbf;
  font-size: 14px;
  margin-top: 4px;
}

.about-cta {
  margin-top: 6px;
}

/* Media (desno) */
.about-media {
  position: relative;
  min-height: 520px;
}

.photo-main {
  position: relative;
  width: min(540px, 88%);
  height: auto;
  display: block;
  border-radius: 2px;
  box-shadow: 0 16px 60px rgba(0, 0, 0, .5);
  background: #ddd;
  /* da se vidi okvir i kad nema slike */
  object-fit: cover;
  margin-left: auto;
  /* poravnaj desno */
}

.photo-float {
  position: absolute;
  left: 40px;
  bottom: -28px;
  width: min(440px, 72%);
  height: auto;
  border-radius: 2px;
  background: #e8e8e8;
  box-shadow: 0 20px 70px rgba(0, 0, 0, .55);
  object-fit: cover;
}

/* Responsive */
@media (max-width: 1100px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .about-media {
    min-height: 420px;
  }

  .photo-main {
    margin: 0 auto;
  }

  .photo-float {
    left: 8%;
    bottom: -18px;
    width: 76%;
  }
}
@media (max-width: 560px) {

  .about-block {
    padding: 64px 0 64px;
  }

  .treatments {
    padding: 0px !important;

    
  }

  

  .section-head {
    padding-top: 30px;
  }
}
@media (max-width: 560px) {
  .features-list li {
    grid-template-columns: 40px 1fr;
  }

  
  .photo-float {
    left: 4%;
    width: 84%;
  }
}


/* ===== 4) RESULTS LOOP SLIDER ===== */
.results {
  background: #191b1c;
  color: #eee;
  padding: 96px 0 110px;
}

.results-head {
  text-align: center;
  margin-bottom: 36px;
}

.results-head h2 {
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-size: clamp(26px, 4.8vw, 48px);
}

.results-head p {
  color: #cfcfcf;
  margin: 0;
}

.results-slider {
  position: relative;
  overflow: hidden;
  padding: 8px 44px;
  /* prostor za strelice */
}

.results-track {
  display: flex;
  align-items: stretch;
  gap: 44px;
  will-change: transform;
  transition: transform .55s ease;
}

.result-slide {
  width: 360px;
  flex: 0 0 auto;
}

@media (max-width: 520px) {
  .result-slide {
    width: 82vw;
  }
}

.result-card {
  background: linear-gradient(180deg, #f6f1ea, #f0e7dc);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .35);
}

.card-head {
  padding: 22px 20px 10px;
  text-align: center;
  color: #1b1b1b;
}

.card-head>span {
  display: inline-block;
  font-weight: 800;
  letter-spacing: .25em;
  font-size: 14px;
  text-transform: uppercase;
  border-image: linear-gradient(to right, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0)) 1;
}

.card-head .labels {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 14px;
  color: #171717;
}

.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
  height: 250px;
}

.pair img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #ddd;
  /* da se vidi okvir i kad nema slike */
}

/* Caption ispod kartice */
.caption {
  color: #e9e9e9;
  text-align: center;
  margin: 14px 0 0;
  font-size: 18px;
}

/* Strelice */
.results-slider .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(0, 0, 0, .25);
  color: #fff;
  font-size: 22px;
  line-height: 34px;
  text-align: center;
  cursor: pointer;
  z-index: 2;
}

.results-slider .nav:hover {
  background: rgba(255, 255, 255, .08);
}

.results-slider .prev {
  left: 6px;
}

.results-slider .next {
  right: 6px;
}

/* Pauza na hover cijelog slidera */
.results-slider:hover .results-track {
  transition-timing-function: ease;
}



/* ===== 5) PROMO OFFER ===== */
.promo-offer {
  position: relative;
  min-height: 72vh;
  display: grid;
  align-items: center;
  background: #121212;
  /* fallback dok nema slike */
  overflow: hidden;
}

/* Pozadinska slika + overlay */
.promo-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.promo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(96%) contrast(1.02) brightness(.35);
}

/* topla tonirana folija + blagi vinjet */
.promo-offer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(80% 60% at 50% 50%, rgba(0, 0, 0, .25), rgba(0, 0, 0, .45) 70%),
    linear-gradient(0deg, rgba(199, 143, 97, .60), rgba(199, 143, 97, .60));
}

/* Sadržaj */
.promo-content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
  padding: 80px 0;
  /* dodatni raster na manjim ekranima */
}

.promo-badge {
  display: inline-block;
  background: #e7c093;
  color: #1a1a1a;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 12px;
  line-height: 1;
  padding: 10px 16px;
  border-radius: 4px;
}

.promo-sub {
  margin: 20px 0 6px;
  font-size: 22px;
  color: #f1f1f1;
  opacity: .95;
}

.promo-title {
  margin: 0 0 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(34px, 6vw, 64px);
}

.promo-note {
  font-size: 18px;
  color: #ececec;
  margin: 8px 0 22px;
}

.promo-cta {
  padding: 14px 22px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}

/* Responsive */
@media (max-width: 680px) {
  .promo-content {
    padding-inline: 24px;
  }

  .promo-sub {
    font-size: 18px;
  }

  .promo-note {
    font-size: 16px;
  }
}




/* ===== 6) VIDEO REELS ===== */
.reels {
  background: #2a2c2e;
  color: #eee;
  padding: 96px 0 110px;
}

.reels-head {
  text-align: center;
  max-width: 980px;
  margin: 0 auto 28px;
}

.reels-head h2 {
  margin: 0 0 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(26px, 4.6vw, 44px);
}

.reels-head p {
  color: #cfcfcf;
  margin: 0;
}

.reels-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 28px;
}

@media (max-width: 980px) {
  .reels-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .reels-grid {
    grid-template-columns: 1fr;
  }
}

.reel .reel-media {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: 6px;
  background: #151515;
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
}

/* Videi i iframeovi ispunjavaju okvir */
.reel video,
.reel iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* finije native kontrole na WebKit/Chromium */
.reel video::-webkit-media-controls-panel {
  background: rgba(0, 0, 0, .25);
}


/* ===== 7) BOOKING / REZERVACIJA ===== */
.booking {
  background: #0f0f0f;
  color: #eee;
  padding: 0;
  /* bez vert. paddinga – fotka neka ide do ruba */
}

.booking-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
  min-height: 640px;
}

/* Lijeva strana (fotka) */
.booking-media {
  background: #e9d0b4;
  /* topla podloga dok nema slike */
  position: relative;
}

.booking-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Desni “kredni” panel */
.booking-panel {
  position: relative;
  padding: 56px 48px 64px;
  background: #141414;
  color: #e9e9e9;
  /* kredni / dusty overlay */
}

.booking-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .6;
  background:
    radial-gradient(90% 40% at 20% 10%, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 60%),
    radial-gradient(80% 50% at 80% 85%, rgba(255, 255, 255, .03), rgba(255, 255, 255, 0) 70%);
}

.badge {
  display: inline-block;
  background: #e7c093;
  color: #1b1b1b;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  padding: 8px 14px;
  border-radius: 4px;
  position: relative;
  z-index: 1;
}

.booking-title {
  margin: 16px 0 22px;
  position: relative;
  z-index: 1;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  line-height: 1.1;
  font-size: clamp(24px, 4.8vw, 40px);
}

/* Forma */
.booking-form {
  position: relative;
  z-index: 1;
}

.row.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field {
  display: block;
  margin-bottom: 14px;
}

.field>span {
  display: block;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #cfcfcf;
  margin-bottom: 8px;
}

.field b {
  color: #f2d0a8;
  font-weight: 800;
}

.booking-form input,
.booking-form select,
.booking-form textarea {
  width: 100%;
  padding: 14px 14px;
  background: #121212;
  color: #f0f0f0;
  border: 1px solid #2a2a2a;
  border-radius: 2px;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.booking-form select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #bbb 50%),
    linear-gradient(135deg, #bbb 50%, transparent 50%), linear-gradient(to right, #121212, #121212);
  background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 13px) calc(1em + 2px), 100% 0;
  background-size: 5px 5px, 5px 5px, 2.5rem 2.5rem;
  background-repeat: no-repeat;
}

.booking-form input::placeholder,
.booking-form textarea::placeholder {
  color: #8f8f8f;
}

.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus {
  border-color: #e7c093;
  box-shadow: 0 0 0 3px rgba(231, 192, 147, .15);
}

/* Submit */
.form-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 10px;
}

.btn-gold {
  background: #e7c093;
  color: #1b1b1b;
  border-radius: 4px;
  padding: 12px 18px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .08em;
  border: none;
  cursor: pointer;
}

.btn-gold:hover {
  background: #dcb580;
}

.form-status {
  font-size: 13px;
  color: #cfcfcf;
}

/* Honeypot hidden */
.hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .booking-grid {
    grid-template-columns: 1fr;
  }

  .booking-media {
    min-height: 420px;
  }

  .booking-panel {
    padding: 48px 24px 56px;
  }

  .row.two {
    grid-template-columns: 1fr;
  }
}



/* ===== 8) NEWSLETTER ===== */
.newsletter {
  position: relative;
  overflow: hidden;
  color: #fff;
  background: #766f65;
  /* taupe podloga kao na referenci */
  padding: 96px 0 110px;
}

/* Lijeva slika preko pola ekrana + blagi fade u pozadinu */
.newsletter-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.newsletter-media img {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: auto;
  min-width: 48%;
  object-fit: cover;
  display: block;
  filter: saturate(95%) contrast(1.02) brightness(.92);
  /* mekani prijelaz prema desnoj strani */
  -webkit-mask-image: linear-gradient(to right, #000 60%, rgba(0, 0, 0, 0) 92%);
  mask-image: linear-gradient(to right, #000 60%, rgba(0, 0, 0, 0) 92%);
}

.news-wrap {
  position: relative;
  z-index: 1;
  text-align: center;
}

.news-wrap h2 {
  margin: 0 0 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: clamp(30px, 5.6vw, 64px);
  line-height: 1.1;
}

.news-intro {
  margin: 0 auto 24px;
  max-width: 980px;
  color: #f1f1f1;
}

/* Forma u jednoj liniji */
.news-form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
  margin-top: 8px;
}

.news-form input[type="email"] {
  width: min(620px, 100%);
  padding: 16px 18px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(0, 0, 0, .15);
  color: #fff;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
}

.news-form input::placeholder {
  color: #e6e6e6;
  opacity: .8;
}

.news-form input:focus {
  border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .18);
}

/* Dugme – suptilan stakleni izgled kao na referenci */
.news-btn {
  padding: 16px 22px;
  border-radius: 2px;
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: .08em;
  border: 1px solid rgba(255, 255, 255, .65);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
}

.news-btn:hover {
  background: rgba(255, 255, 255, .14);
}

/* Status */
.news-status {
  margin-left: 10px;
  font-size: 14px;
}

/* Honeypot skriven */
.news-form .hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  height: 0;
  width: 0;
}

/* Responsive: stack na mobu */
@media (max-width: 760px) {
  .news-form {
    flex-wrap: wrap;
  }

  .news-status {
    display: block;
    width: 100%;
    margin: 8px 0 0;
    text-align: center;
  }
}




/* ===== 9) TESTIMONIAL / OCJENA ===== */
.review-hero {
  background: #191b1c;
  color: #fff;
  padding: 96px 0 120px;
  margin-top: 20px;
}

.review-center {
  text-align: center;
}

.review-stars {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}

.review-stars .fa-star {
  font-size: 22px;
  color: #e7c093;
  /* zlatna nijansa usklađena s prethodnim sekcijama */
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .25));
}

.review-quote {
  margin: 0 auto 12px;
  max-width: 1050px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.2;
  font-size: clamp(26px, 5.4vw, 56px);
}

.review-sub {
  margin: 0;
  color: #cfcfcf;
  font-size: 16px;
}







/* ===== 10) FOOTER ===== */
.site-footer {
  position: relative;

  color: #e7e7e7;
  padding: 56px 0 28px;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background:
    radial-gradient(80% 45% at 20% 10%, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 60%),
    radial-gradient(50% 40% at 80% 85%, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0) 70%);
}

.footer-nav {
  display: flex;
  justify-content: center;
  gap: 44px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  border-bottom: 1px solid #242628;
  margin-bottom: 34px;
}

.footer-nav a {
  color: #e6e6e6;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 12px;
}

.footer-nav a:hover {
  color: #fff;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 28px;
  padding: 12px 0 22px;
}

.foot-col {
  text-align: left;
}

.foot-center {
  text-align: center;
}

.foot-right {
  text-align: right;
}

.foot-title {
  margin: 0 0 12px;
  font-weight: 800;
  font-size: 22px;
  color: #fff;
}

.foot-address {
  margin: 0 0 14px;
  font-style: normal;
  color: #d3d3d3;
}

.foot-address small {
  color: #bdbdbd;
}

.footer-logo {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}

.footer-logo img {
  height: 72px;
  width: auto;
  display: block;
}

.footer-logo .logo-fallback {
  display: none;
  color: #fff;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 22px;
  line-height: 1.1;
}

.footer-logo .logo-fallback small {
  display: block;
  font-weight: 500;
  letter-spacing: .06em;
  color: #cfcfcf;
  font-size: 14px;
}

.footer-logo img[src=""]+.logo-fallback {
  display: block;
}

.foot-link {
  color: #e6e6e6;
  text-decoration: none;
}

.foot-link:hover {
  color: #fff;
}

.foot-socials {
  display: flex;
  gap: 14px;
  justify-content: flex-end;
  margin-top: 8px;
}

.foot-socials a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e7c093;
  color: #1b1b1b;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
}

.foot-socials a:hover {
  filter: brightness(1.05);
}

.footer-bottom {
  border-top: 1px solid #242628;
  margin-top: 18px;
  padding-top: 18px;
  text-align: center;
  color: #cfcfcf;
  font-size: 14px;
}

.footer-bottom a {
  color: #e6e6e6;
  text-decoration: none;
}

.footer-bottom a:hover {
  color: #fff;
}

/* Responsive */
@media (max-width: 980px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .foot-right,
  .foot-col {
    text-align: center;
  }

  .foot-socials {
    justify-content: center;
  }
}



.hero {
  height: 90vh; /* cijela visina ekrana */
  background: url("assets/slika001.jpg") no-repeat center center/cover;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #fff; /* bijeli tekst da se vidi na slici */
}

.hero-grid {
  max-width: 800px;
}

.hero h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-shadow: 0 6px 30px rgba(0, 0, 0, .75);
}


.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

.hero .btn {
  display: inline-block;
  padding: 12px 24px;
  background-color: #ff6600;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.3s ease;
}

.hero .btn:hover {
  background-color: #e65c00;
}



/* =========================
   TREATMENTS – PRO LOOK
   (paste ispod postojećeg CSS-a)
   ========================= */

/* Utility za skriveni naslov (ako ga koristiš) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: wrap !important;
}

/* Sekcija: jača tipografija + centriranje sadržaja */
.treatments {

  padding: 80px 0 0px 0;
}

.treatments .section-head {
  max-width: 980px;
  margin: 0 auto 40px;
}

.treatments .section-head h2,
.treatments .section-head .section-title {
  /* ako imaš vidljiv H2 – ulovi ga ovdje */
  margin: 14px 0 8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: clamp(28px, 5.2vw, 46px);
  color: #ffffff;
  position: relative;
}

.treatments .section-head h2::after,
.treatments .section-head .section-title::after {
  content: "";
  display: block;
  width: 74px; height: 3px;
  margin: 14px auto 0;
  background: linear-gradient(90deg, #e7c093, #c98e5f);
  border-radius: 2px;
  opacity: .9;
}

.treatments .section-intro {
  max-width: 920px;
  margin: 18px auto 6px;
  color: #d8d8d8;
  font-size: 18px;
  line-height: 1.9;
}

.treatments .section-intro strong {
  color: #fff;
  font-weight: 800;
}

/* Ključne točke – 2 stupca + check ikonice */
.key-points {
  list-style: none;
  padding: 0;
  margin: 28px auto 8px;
  max-width: 980px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 28px;
}

@media (max-width: 900px) {
  .key-points { grid-template-columns: 1fr; }
}

.key-points li {
  position: relative;
  padding: 12px 16px 12px 46px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 6px;
  color: #eaeaea;
}

.key-points li::before {
  content: "\f00c"; /* fontawesome check */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #e7c093;
  color: #1b1b1b;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  font-size: 12px;
}

.key-points li strong { color: #fff; }

/* “Priprema prije dolaska” – elegantna kartica */
.prep-box {
  max-width: 980px;
  margin: 34px auto 0;
  padding: 24px 22px;
  border-radius: 10px;
  position: relative;
  color: #e9e9e9;

  /* stakleni panel + tanki zlatni okvir */
  background:
    radial-gradient(100% 60% at 20% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border: 1px solid rgba(231,192,147,.35);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 18px 50px rgba(0,0,0,.35);
}

.prep-box h3 {
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 800;
  font-size: 12px;
  color: #e7c093;
}

.prep-box ul {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 10px;
}

.prep-box li {
  position: relative;
  padding-left: 34px;
  color: #dcdcdc;
  line-height: 1.7;
}

.prep-box li::before {
  content: "\f105"; /* FA long-arrow-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 10px; top: .35em;
  color: #e7c093;
  opacity: .95;
}

/* Sitne dorade razmaka u sekciji */
.treatments .section-head + .key-points { margin-top: 26px; }
.key-points + .prep-box { margin-top: 28px; }

/* Ako želiš manje “bullet” rupe kad koristiš obični <ul> bez klasa u toj sekciji */
.treatments ul { padding-left: 0rem; }
.treatments li { margin: .25rem 0; }


/* =========================
   HERO – PREMIUM GLASS CARD (CENTRIRANO)
   ========================= */

/* Hero pozadina ostaje tvoja slika; slojevi za kontrast */
.hero {
  position: relative;
  height: 90vh;
  background: url("assets/slika001.jpg") no-repeat center center/cover;
  display: grid;
  place-items: center;   /* centriraj sadržaj i po X i po Y */
  color: #fff;
  isolation: isolate;    /* overlayi ne miješaju ostatak */
}

/* Vignette + topla folija */
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero::before {
  /* blagi vignette i toniranje */
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(0,0,0,.15), rgba(0,0,0,.55) 70%),
    linear-gradient(0deg, rgba(231,192,147,.22), rgba(231,192,147,.08));
}
.hero::after {
  /* soft noise/film feel bez slike – vrlo suptilno */
  background: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.28));
  mix-blend-mode: multiply;
}

/* Unutarnji grid */
.hero-inner {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
  margin-inline: auto;
  padding-inline: 24px;
  display: grid;
  justify-items: center;   /* H-centar */
  align-content: center;   /* V-centar */
}

/* Stakleni card */
.hero-card.glass {
  --glass-bg: rgba(20,20,20,.42);
  --glass-brd: rgba(231,192,147,.35);

  max-width: 760px;
  margin-inline: auto;     /* dodatno centriranje bloka */
  padding: clamp(22px, 3.6vw, 36px) clamp(20px, 3.6vw, 34px);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)), var(--glass-bg);
  border: 1px solid var(--glass-brd);
  box-shadow:
    0 22px 70px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter: blur(8px) saturate(1.05);
  -webkit-backdrop-filter: blur(8px) saturate(1.05);
  text-align: center;      /* sav tekst u centru */
  animation: heroFadeUp .6s ease-out both;
}

/* Zlatni “badge” */
.hero-badge {
  display: inline-block;
  background: #e7c093;
  color: #1b1b1b;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 11px;
  line-height: 1;
  padding: 9px 14px;
  border-radius: 6px;
}

/* Naslov + lead */
.hero-title {
  margin: 14px 0 8px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: clamp(32px, 6vw, 64px);
  text-shadow: 0 6px 30px rgba(0,0,0,.55);
}

.hero-lead {
  margin: 8px 0 18px;
  color: #f0f0f0;
  font-size: clamp(16px, 2.2vw, 20px);
  line-height: 1.75;
  max-width: 60ch;
}
.hero-lead strong { color: #fff; font-weight: 800; }

/* CTA gumbi */
.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
  justify-content: center;   /* centriraj gumbe */
}
.hero .btn-gold { box-shadow: 0 10px 24px rgba(0,0,0,.35); }
.hero .btn-outline.light { border-color: rgba(255,255,255,.55); }

/* Meta benefiti – čipovi s ikonicama */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  justify-content: center;   /* centriraj čipove */
}
.hero-meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
}
.hero-meta i {
  width: 20px; height: 20px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #e7c093; color: #1b1b1b;
  font-size: 11px;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}

/* Subtilna animacija ulaska */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Responsive – sve ostaje centrirano i na mobu */
@media (max-width: 860px) {
  .hero-inner { justify-items: center; }
  .hero-card.glass { text-align: center; }
  .hero-meta { justify-content: center; }
}

/* ===== DESKTOP HEADER: left nav — centered logo — right CTA ===== */
@media (min-width: 1101px){
  .site-header .container{
    position: relative;                 /* sidrište za apsolutne kolone */
    display: flex;                      /* jednostavno centriranje loga */
    justify-content: center;
    align-items: center;
    padding: 18px 24px;                 /* po želji */
    gap: 0;                             /* nema “stiskanja” po sredini */
  }

  /* lijeva kolona (meni) potpuno lijevo */
  .site-header .nav-left{
    position: absolute;
    left: 24px;                         /* isto kao container padding */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 28px;
  }

  /* desna kolona (telefon + CTA) potpuno desno */
  .site-header .nav-right{
    position: absolute;
    right: 24px;                        /* isto kao container padding */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
  }

  /* logo ostaje savršeno centriran, neovisno o širini lijevo/desno */
  .site-logo{
    margin: 0 auto;                     /* drži ga u sredini */
  }
}


/* =========================
   MOBILE NAV – GLASS PANEL
   ========================= */

:root{
  --gold: #e7c093;
  --orange: #ff6600;
}

/* Dim overlay iza menija */
.nav-dim {
  position: fixed;
  inset: 0;
  /* background: rgba(0,0,0,.55); */
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 60; /* iznad headera */
}

/* Ubaci element dinamički iz JS-a; stil spreman */
.site-header.is-open + .nav-dim {
  opacity: 1;
  pointer-events: auto;
}

/* Mobilni meni kao stakleni drawer ispod headera */
.mobile-menu {
  position: fixed;
  left: 0; right: 0;
  top: calc(var(--headerH, 64px) + env(safe-area-inset-top));
  background: rgba(20,20,20,.72);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);
  border-top: 1px solid rgba(231,192,147,.35);
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  border-radius: 0 0 12px 12px;

  display: grid;
  gap: 0;
  overflow: hidden;

  transform: translateY(-12px) scale(.98);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s, visibility 0s .35s;
  z-index: 70;
}

/* Otvoreno stanje */
.site-header.is-open .mobile-menu {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .35s;
}

/* Linkovi u meniju */
.mobile-menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 22px;
  color: #f1f1f1;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-weight: 600;
  letter-spacing: .02em;
}

.mobile-menu a:hover {
  background: rgba(255,255,255,.05);
}

/* Red s telefonom – chip izgled */
.mobile-menu .phone {
  gap: 10px;
  font-weight: 700;
  color: #fff;
}
.mobile-menu .phone i {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold);
  color: #1b1b1b;
  font-size: 12px;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}

/* CTA punom širinom */
.mobile-menu .btn {
  margin: 14px 22px 18px;
  width: calc(100% - 44px);
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: 0 16px 34px rgba(0,0,0,.35);
}
.mobile-menu .btn.btn-primary {
  background: var(--orange);
  color: #fff;
  border: 1px solid rgba(255,255,255,.12);
}
.mobile-menu .btn.btn-primary:hover {
  filter: brightness(1.05);
}

/* Hamburger -> X animacija */
.nav-toggle {
  position: relative;
  z-index: 80; /* iznad menija */
}
.nav-toggle span {
  transition: transform .3s ease, opacity .2s ease, width .2s ease;
}
.site-header.is-open .nav-toggle span:nth-child(1) {
  transform: rotate(45deg) translate(4px, 6px);
}
.site-header.is-open .nav-toggle span:nth-child(2) {
  opacity: 0; width: 0;
}
.site-header.is-open .nav-toggle span:nth-child(3) {
  transform: rotate(-45deg) translate(4px, -6px);
}

/* Zaključaj scroll kad je otvoreno */
body.nav-open {
  overflow: hidden;
}

/* Desktop: sakrij mobile-menu, osiguraj da ne smeta */
@media (min-width: 1101px) {
  .mobile-menu { display: none !important; }
}
/* ===== FIX: Mobile hamburger -> X vidljiv i centriran ===== */
.nav-toggle{
  margin-left: 0 !important;           /* makni -8px */
  width: 44px;                          /* veća klik-zona */
  height: 44px;
  padding: 10px;                        /* malo “air”-a oko crta */
  border-radius: 10px;
  position: relative;
  z-index: 100;                         /* iznad overlaya/menija */
  background: transparent;              /* po želji: glass chip */
}

.nav-toggle span{
  left: 8px;                            /* crte ne idu do samog ruba */
  right: 8px;
  height: 2px;
  background: #fff;
  transform-origin: 50% 50%;            /* rotiramo oko CENTRA */
  transition: transform .28s ease, opacity .2s ease, width .2s ease;
}

/* normalno stanje (tri crte) */
.nav-toggle span:nth-child(1){ top: 12px; }
.nav-toggle span:nth-child(2){ top: 21px; }
.nav-toggle span:nth-child(3){ top: 30px; }

/* otvoren meni -> X */
.site-header.is-open .nav-toggle span:nth-child(1){
  transform: translateY(9px) rotate(45deg);
}
.site-header.is-open .nav-toggle span:nth-child(2){
  opacity: 0;
  transform: scaleX(0.4);
}
.site-header.is-open .nav-toggle span:nth-child(3){
  transform: translateY(-9px) rotate(-45deg);
}

/* malo feedbacka na dodir/hover */
@media (hover:hover){
  .nav-toggle:hover { background: rgba(255,255,255,.06); }
}
/* =========================
   PROMO – GLASS CARD
   ========================= */

/* Jači, ali elegantan overlay na pozadini */
.promo-offer::before{
  background:
    radial-gradient(80% 60% at 50% 50%, rgba(0,0,0,.35), rgba(0,0,0,.55) 70%),
    linear-gradient(0deg, rgba(199,143,97,.55), rgba(199,143,97,.42));
}

/* Stakleni card u centru */
.promo-card.glass{
  --brd: rgba(231,192,147,.35);
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(22px, 4.5vw, 36px);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border: 1px solid var(--brd);
  box-shadow: 0 26px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);
  text-align: center;
  animation: promoIn .6s ease-out both;
}

@keyframes promoIn{
  from{ opacity:0; transform: translateY(14px) }
  to  { opacity:1; transform: none }
}

.promo-badge{
  display:inline-block;
  background:#e7c093;
  color:#1b1b1b;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:11px;
  padding:10px 14px;
  border-radius:6px;
}

.promo-title{
  margin:14px 0 4px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:clamp(26px,4.8vw,40px);
  color:#fff;
}

.promo-price{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:8px;
  margin:6px 0 8px;
  line-height:1;
}
.promo-price .cur{
  font-size:clamp(20px,3.2vw,28px);
  opacity:.95;
  transform: translateY(-4px);
}
.promo-price .num{
  font-weight:900;
  font-size:clamp(36px,7.2vw,64px);
  letter-spacing:.02em;
  background: linear-gradient(180deg,#ffffff,#f1f1f1);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  text-shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Benefit “čipovi” */
.promo-points{
  list-style:none;
  padding:0;
  margin:14px 0 18px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 12px;
  justify-content:center;
}
.promo-points li{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color:#fff;
  border-radius:999px;
  font-size:13px;
}
.promo-points i{
  width:20px;height:20px;display:grid;place-items:center;
  border-radius:50%;
  background:#e7c093;color:#1b1b1b;font-size:11px;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}

.promo-sub{
  margin:8px 0 0;
  font-size:18px;
  color:#f1f1f1;
  opacity:.95;
}
.promo-note{ display:none; } /* više nam ne treba kad imamo čipove */

/* CTA */
.promo-cta{
  margin-top:6px;
  padding:14px 22px;
  border-radius:10px;
  box-shadow:0 16px 34px rgba(0,0,0,.35);
}

/* “Garancija” trakica ispod CTA */
.promo-guarantee{
  margin:12px auto 0;
  width:fit-content;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  border-radius:999px;
  color:#fff;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(231,192,147,.35);
  font-weight:600;
  letter-spacing:.01em;
}
.promo-guarantee i{
  width:22px;height:22px;display:grid;place-items:center;border-radius:50%;
  background:#e7c093;color:#1b1b1b;font-size:12px;
  box-shadow:0 6px 14px rgba(0,0,0,.25);
}

/* Fineprint */
.promo-fineprint{
  margin:10px 0 0;
  font-size:12px;
  color:#ececec;
  opacity:.85;
}

/* Responsive sitnice */
@media (max-width:680px){
  .promo-card.glass{ padding:20px 16px; }
  .promo-points{ justify-content:center; }
}


/* ===== Booking glass look + detalji ===== */
.booking-panel.glass{
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border: 1px solid rgba(231,192,147,.35);
  box-shadow: 0 26px 70px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  backdrop-filter: blur(10px) saturate(1.05);
  border-radius: 16px;
}

.booking-title small{
  display:block;
  margin-top:6px;
  font-size:14px;
  font-weight:600;
  letter-spacing:.02em;
  color:#cfcfcf;
}

/* ikone unutar inputa */
.field.icon{ position:relative; }
.field.icon .ico{
  position:absolute; left:12px; top:36px; width:18px; height:18px;
  color:#e7c093; opacity:.95; pointer-events:none;
}
.field.icon input{ padding-left:40px; }

/* chip skupovi (radio/checkbox) */
.field.chips{
  margin: 8px 0 10px;
  border:none; padding:0;
}
.field.chips legend{
  margin: 0 0 8px;
  font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#cfcfcf;
}
.chip-input{ display:none; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; margin:4px 6px 0 0;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff; border-radius:999px; font-size:13px; cursor:pointer;
  transition: background .2s, border-color .2s, color .2s, transform .08s ease;
}
.chip:hover{ transform: translateY(-1px); }
.chip-input:checked + .chip{
  background:#e7c093; color:#1b1b1b; border-color:#e7c093;
}

/* quick kontakt */
.contact-quick{
  display:flex; gap:10px; margin:6px 0 12px; flex-wrap:wrap;
}
.chip-link{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px; border-radius:999px; text-decoration:none; font-weight:700;
  border:1px solid rgba(255,255,255,.12); color:#fff; background:rgba(255,255,255,.06);
}
.chip-link i{ width:18px; height:18px; display:grid; place-items:center; }
.chip-link.whatsapp{ border-color:#25D36655; }
.chip-link.whatsapp i{ color:#25D366; }
.chip-link.phone i{ color:#e7c093; }

/* privola i fineprint */
.consent{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  margin: 10px 0 12px;
  width: 100%;
  text-align: left;
  white-space: wrap !important; 
}
.consent input{ margin-top:3px; }
.booking-fineprint{
  margin:10px 0 0; font-size:12px; color:#cfcfcf; opacity:.85;
}

/* sitni responsive tweakovi */
@media (max-width:1024px){
  .booking-panel.glass{ border-radius: 12px; }
}


/* Booking varijanta bez fotke */
.booking.no-photo {
  padding: 80px 0;                 /* malo zraka oko forme */
  background: #0f0f0f;             /* jednako kao ostatak sajta */
  position: relative;
}

.booking.no-photo .booking-grid {
  grid-template-columns: 1fr;      /* samo jedan stupac */
  min-height: unset;
}

.booking.no-photo .booking-media {  /* ako slučajno ostane u DOM-u */
  display: none !important;
}

.booking.no-photo .booking-panel {
  max-width: 880px;                 /* lijepa širina za formu */
  margin: 0 auto;                   /* centriraj */
  border-radius: 16px;
}

/* diskretna kreda/tekstura kao i na drugim glass panelima */
.booking.no-photo::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background:
    radial-gradient(80% 40% at 20% 10%, rgba(255,255,255,.04), rgba(255,255,255,0) 60%),
    radial-gradient(60% 30% at 80% 85%, rgba(255,255,255,.03), rgba(255,255,255,0) 70%);
}


/* ===== MOBILE HEADER FIX ===== */
@media (max-width: 860px){
  /* Logo u sredini dobiva elastičan prostor, desni blok ne puca u novi red */
  .site-header .container{
    grid-template-columns: auto 1fr auto; /* umjesto 1fr auto 1fr */
    gap: 10px;
    padding: 12px 12px;
  }

  /* sve grid stavke se smiju stisnuti (sprječava prelijevanje u 2. red) */
  .site-header .container > * { min-width: 0; }

  /* manji logo na mobu */
  .site-logo img{ height: 32px; }

  /* smanji razmake desno */
  .nav-right{ gap: 8px; }

  /* telefon: samo ikona (bez dugog teksta koji se lomi) */
  .nav-right .phone{
    padding: 6px;
    white-space: nowrap;
  }
  .nav-right .phone span{ display: none; }

  /* kompaktan CTA */
  .btn.btn-primary{
    padding: 10px 12px;
    font-size: 11px;
    border-radius: 8px;
  }
}

/* još malo stisni na ekstra malim širinama */
@media (max-width: 420px){
  .site-logo img{ height: 28px; }
}
.nav-right .phone span{ display: none; }

/* === GRID ZA CJENIK === */
.price-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  gap:14px;
  margin-top:8px;
}
.price-card{
  padding:16px 14px;
  border-radius:14px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.08);
}
.price-card .price-name{ font-weight:600; }
.price-card .price-val{ font-size:22px; font-weight:700; margin-top:6px; }
.price-card.glass-accent{ background: #f4efe6; border:1px solid #e5dcc9; color:#111; }


/* === PATCH 1: tipke -> bež, bez narančaste u hero & mobile === */

/* global */
.btn-primary,
.promo-cta.btn{
  background: var(--beige) !important;
  color: var(--ink) !important;
  border-color: transparent !important;
}
.btn-primary:hover,
.promo-cta.btn:hover{
  background: var(--beige-700) !important;
  color: var(--ink) !important;
}
.btn-primary:focus-visible,
.promo-cta.btn:focus-visible{
  outline: 3px solid var(--beige-800);
  outline-offset: 2px;
}

/* HERO: nemoj bojati SVE .btn, samo pune gumbe */
.hero .btn { background: transparent; } /* reset */
.hero .btn.btn-gold,
.hero .btn.btn-primary{
  background: var(--beige) !important;
  color: var(--ink) !important;
  border: none !important;
}
.hero .btn.btn-gold:hover,
.hero .btn.btn-primary:hover{
  background: var(--beige-700) !important;
}

/* MOBILE MENU: primarni CTA isto bež */
.mobile-menu .btn.btn-primary{
  background: var(--beige) !important;
  color: var(--ink) !important;
  border: 1px solid transparent !important;
}
.mobile-menu .btn.btn-primary:hover{
  background: var(--beige-700) !important;
}
/* === PATCH 2: HiEMT chips – tamni glass + bež check kružić === */
.hiemt .chips{
  display:flex; gap:12px; flex-wrap:wrap;
}
.hiemt .chips .chip{
  position: relative;
  display:inline-flex; align-items:center;
  gap:10px;
  padding:12px 16px 12px 42px;       /* prostor za kružić */
  border-radius:10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color:#e9e9e9;
  font-weight:700;
}
.hiemt .chips .chip strong{ color:#fff; }

/* bež kružić s kvačicom (FontAwesome učitan u <head>) */
.hiemt .chips .chip::before{
  content:"\f00c";
  font-family:"Font Awesome 6 Free"; font-weight:900;
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; display:grid; place-items:center;
  border-radius:50%;
  background: #f4efe6;
  color:#1b1b1b;
  border:1px solid #e5dcc9;
  box-shadow: 0 2px 10px rgba(0,0,0,.25), inset 0 0 0 2px var(--beige);
}

/* gumb ispod čipova */
.hiemt a.btn.btn-primary{ margin-top: 4px; }
/* === PATCH 3: cjenik – malo jači kontrast i hover feedback === */
.pricing h3{ color:#fff; }
.price-card{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  transition: transform .12s ease, background .2s ease, border-color .2s ease;
}
.price-card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.07);
  border-color: rgba(255,255,255,.18);
}
.price-card .price-name{ color:#eaeaea; }
.price-card .price-val{ color:#fff; }


/* === PATCH: centriraj kompletnu HIEMT sekciju === */
.hiemt{
  padding: 0px 0 46px;
}
.hiemt .container{
  display: grid;              /* omogućava lako centriranje */
}
.hiemt .glass{
  max-width: 1000px;          /* kontrolirana širina bloka */
  margin: 0 auto;             /* centar */
  text-align: center;         /* centriraj inline sadržaj */
}
/* centriraj bež "BODY SCULPT" bedž */
.hiemt .section-tag{
  display: inline-block;
  margin-inline: auto;
}

/* tekstovi da ne bježe u preširoko */
.hiemt p.section-intro,
.hiemt p{
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* box sa stavkama ostaje lijevo, ali sam box je centriran */
.hiemt .prep-box{
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* čipovi i gumb točno u sredini */
.hiemt .chips{ justify-content: center; }
.hiemt a.btn{ margin-left: auto; margin-right: auto; display: inline-flex; }

/* (ostaje tvoj stil za čipove iz ranijeg patcha) */
.chip-link {
  color: #fff !important;
  text-decoration: none !important;
}

.fa-brands {
  color: #fff !important;
  text-decoration: none !important;
}

/* === AI paketi grid === */
.pkg-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(260px,1fr));
  gap:14px;
  margin-bottom: 10px;
}
.pkg-card{
  position:relative;
  padding:16px 16px 14px;
  border-radius:14px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.12);
  color:#eaeaea;
  cursor:pointer;
  transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  display:block;
  text-decoration:none;
}
.pkg-card:hover{
  transform: translateY(-2px);
  background:rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
}
.pkg-card .pkg-radio{ display:none; }

.pkg-badge{
  display:inline-block;
  background:#e7c093;
  color:#1b1b1b;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size:11px;
  padding:8px 12px;
  border-radius:6px;
}

.pkg-title{
  margin:10px 0 8px;
  font-weight:900; letter-spacing:.02em; color:#fff;
  text-transform:uppercase; font-size:20px;
}

.pkg-price{
  display:flex; align-items:flex-end; gap:6px; line-height:1;
  margin:2px 0 8px;
}
.pkg-price .cur{ font-size:16px; opacity:.9; transform: translateY(-3px); }
.pkg-price .num{ font-size:28px; font-weight:900; color:#fff; }
.pkg-price small{ opacity:.85; }

.pkg-points{
  list-style:none; padding:0; margin: 6px 0 12px;
  display:flex; flex-direction:column; gap:6px;
  color:#d8d8d8; font-size:14px;
}
.pkg-choose{ width:100%; border-radius:10px; }

/* aktivna kartica */
.pkg-card.is-selected{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(231,192,147,.35);
  box-shadow: 0 16px 46px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.03);
}

/* Preview uploadane slike */
.ai-preview{
  margin-top:10px; display:flex; gap:10px; flex-wrap:wrap;
}
.ai-preview img{
  width:120px; height:120px; object-fit:cover; border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background:#111; display:block;
  max-height: 250px !important;
}
.ai-preview .thumb {
    max-height: 250px;
    width: auto;
}
/* responsive */
@media (max-width:800px){
  .pkg-grid{ grid-template-columns:1fr; }
}
/* ===== Bolja čitljivost "Kako radi" kartica ===== */
.how .section-intro { 
  color: #f2f2f2;
}

.how-step {
  background: #101218;                  /* malo svjetlija kartica */
  border-color: rgba(255,255,255,.18);
  color: #ffffff;                       /* default boja teksta u kartici */
}

.how-step h4 {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: .02em;
  margin: 6px 0 8px;
  text-shadow: 0 1px 0 rgba(0,0,0,.35); /* sitna pomoć kontrastu */
}

.how-step p {
  color: #f5f5f5;
  line-height: 1.55;
  margin: 0;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
}

/* ikonica – ostaje zlatna, ali malo jači kontrast pozadine */
.how-step .icon{
  background:#171925;
  border-color: rgba(255,255,255,.22);
  color:#E7C093;
}

/* ako nešto drugo spušta opacity u karticama, ovo ga vraća na 1 */
.how-step * { 
  opacity: 1;
}
/* ===== CTA NA DNU (čitljivost) ===== */
.cta-bottom {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 14px;
  background: #0f1216;                        /* mrvu svjetlije od pozadine */
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: #fff;
}
.cta-bottom h3 { 
  margin: 0 0 4px; 
  color: #fff; 
  font-weight: 800; 
  letter-spacing: .02em; 
}
.cta-bottom .muted { color: #e2e2e2; opacity: 1; }

/* ===== ZAŠTITA PRIVATNOSTI & DISCLAIMER ===== */
.policy { margin-top: 28px; }
.policy .section-title { color: #fff; }

.policy-grid { 
  display: grid; 
  gap: 16px; 
}
@media (min-width: 900px) { 
  .policy-grid { grid-template-columns: 1fr 1fr; } 
}

.policy-card {
  background: #101318;                        /* kartice malo svjetlije */
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 20px;
  color: #f4f4f4;                              /* default boja teksta */
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  margin-bottom: 36px;
}
.policy-card h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-weight: 800;
  letter-spacing: .02em;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.policy-card p {
  margin: 10px 0;
  color: #f0f0f0;
  line-height: 1.65;
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  text-wrap: pretty;
}
.policy-card a {
  color: #cfe2ff;
  text-decoration: underline;
}

/* Ako nešto globalno spušta opacity/boju u tim karticama – anuliraj */
.policy .policy-card * { opacity: 1 !important; color: inherit; }
/* --- CONSENT uz dugme --- */
.form-actions-inline{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.consent.inline{
  margin:0; display:flex; align-items:center; gap:8px; color:#e8e8ee;
}
.consent.inline input{ margin:0; }

/* --- Collapsible policy --- */
.policy-acc{
  border:1px solid rgba(255,255,255,.12);
  background:#0f1014; border-radius:12px; padding:0; overflow:hidden;
}
.policy-acc summary{
  cursor:pointer; list-style:none; outline:0;
  padding:14px 16px; font-weight:700; color:#fff;
  display:flex; align-items:center; justify-content:space-between;
}
.policy-acc summary::-webkit-details-marker{ display:none; }
.policy-acc summary:after{
  content:"▾"; opacity:.7; transition:.2s transform;
}
.policy-acc[open] summary:after{ transform:rotate(180deg); }
.policy-body{ padding:0 16px 14px 16px; color:#d7d7df; }
.policy-body p{ margin:10px 0; }

/* --- Mobile polish --- */
@media (max-width: 640px){
  .hero-title{ font-size: clamp(26px,7vw,34px); }
  .section-title{ font-size: clamp(22px,6vw,28px); }
  .how-grid{ grid-template-columns:1fr; gap:12px; }
  .booking-form .row.two{ display:grid; grid-template-columns:1fr; gap:12px; }
  .cta-bottom{ flex-direction:column; align-items:flex-start; }
}
/* =========================
   CONSENT (checkbox + tekst)
   ========================= */
.form-actions-inline{
  display:flex;
  align-items:flex-start;
  gap:14px;
  flex-wrap:wrap;
  row-gap:12px;
}

/* lijepi „chip“ oko teksta, da izgleda kao kartica */
.consent.inline{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  max-width:820px;
  cursor:pointer;
}

.consent.inline span{
  color:#D8D8DE;
  line-height:1.55;
}

/* linkovi zlatni + uredno podvučeni */
.consent.inline a{
  color:#E7C093;
  text-decoration:underline;
  text-underline-offset:2px;
}
.consent.inline a:hover{
  text-decoration-thickness:2px;
  opacity:.95;
}

/* custom checkbox (dark theme + gold accent) */
.consent.inline input[type="checkbox"]{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  margin:2px 0 0 0;
  border:1.6px solid rgba(231,192,147,.70);
  border-radius:5px;
  background:#0E0F13;
  display:grid;
  place-content:center;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
  cursor:pointer;
}

/* kvacica kao ispunjena ploha (minimal, čisto) */
.consent.inline input[type="checkbox"]::before{
  content:"";
  width:10px; height:10px;
  transform:scale(0);
  transform-origin:center;
  border-radius:2px;
  background:#E7C093;
  transition:transform 120ms ease-out;
}
.consent.inline input[type="checkbox"]:checked::before{ transform:scale(1); }

/* fokus prsten radi11 */
.consent.inline input[type="checkbox"]:focus-visible{
  box-shadow:0 0 0 3px rgba(231,192,147,.35);
  border-color:#E7C093;
}

/* na većim ekranima gurni dugme desno da se lijepo rasporedi u jednom redu */
@media (min-width: 720px){
  #aiSubmitBtn{ margin-left:auto; }
}


/* --- Policy accordion fix --- */
.policy-grid{
  display:grid;
  gap:16px;
  grid-template-columns:1fr;
  align-items:start;            /* <- don't stretch items to row height */
}
@media (min-width:900px){
  .policy-grid{ grid-template-columns:1fr 1fr; }
}

.policy-acc{
  align-self:start;             /* <- each details keeps its own height */
  border:1px solid rgba(255,255,255,.12);
  background:#0f1014;
  border-radius:12px;
  overflow:hidden;
}

/* summary head */
.policy-acc summary{
  list-style:none;              /* hide default marker */
  cursor:pointer;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  color:#fff;
}
.policy-acc summary::-webkit-details-marker{ display:none; }

.policy-acc summary::before{
  content:"️";
  margin-right:.35rem;
}
.policy-acc:nth-of-type(2) summary::before{ content:""; }

.policy-acc[open] summary{
  border-bottom:1px solid rgba(255,255,255,.08);
}

/* arrow */
.policy-acc summary::after{
  content:"▾";
  margin-left:auto;
  opacity:.6;
  transform:rotate(-90deg);
  transition:transform .18s ease, opacity .18s ease;
}
.policy-acc[open] summary::after{
  transform:rotate(0deg);
  opacity:1;
}

/* body text */
.policy-body{
  padding:14px 16px 18px;
  color:#D8D8DE;
  line-height:1.6;
}
.policy-body a{
  color:#E7C093;
  text-decoration:underline;
  text-underline-offset:2px;
}