/* =========================================================
  Contact (Custom PHP) - kuni-contact.css
========================================================= */

.kuni-contact { background:#ffffff; }

/* Page spacing */
.km-contactPage { padding: clamp(84px, 10vh, 110px) 0 60px; }

/* Head */
.km-contactPage__section { width: min(980px, 92vw); margin: 0 auto; }
.km-contactPage__head { text-align: center; color: rgba(99,99,99,.92); margin: 0 0 18px; }
.km-contactPage__kicker { margin: 0 0 6px; font-size: 12px; letter-spacing: .22em; opacity: .78; }
.km-contactPage__title { margin: 0 0 10px; font-size: clamp(22px, 3.2vw, 30px); letter-spacing: .04em; }
.km-contactPage__lead { margin: 0; font-size: 14px; line-height: 1.8; opacity: .86; }

/* Card */
.km-contactPage__card {
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  box-shadow: 0 28px 80px rgba(0,0,0,.22);
  overflow: hidden;
}
.km-contactPage__cardInner { padding: 20px 18px 18px; }

/* Alert */
.km-alert{
  border-radius: 14px;
  border: 1px solid rgba(220, 38, 38, .25);
  background: rgba(220, 38, 38, .06);
  padding: 12px 14px;
  margin: 0 0 14px;
}
.km-alert__title{ margin:0 0 6px; font-weight:800; color: rgba(120, 0, 0, .9); }
.km-alert__list{ margin:0; padding-left: 18px; color: rgba(120, 0, 0, .86); }

/* Form */
.km-form{ margin:0; }
.km-field{ margin-top: 14px; }
.km-label{ font-weight: 800; color: rgba(12,18,26,.92); margin: 0 0 10px; display:flex; align-items:center; gap:8px; }
.km-badge{
  display:inline-block;
  font-size:11px; line-height:1;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(11,15,20,.10);
  color: rgba(11,15,20,.78);
}

.km-row2{ display:flex; gap:10px; flex-wrap:wrap; }
.km-row2 > *{ flex:1 1 220px; min-width:220px; }

.km-form input[type="text"],
.km-form input[type="email"],
.km-form input[type="tel"],
.km-form textarea{
  width: 100%;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(12,18,26,.14);
  background: #fff;
  padding: 12px 12px;
  font-size: 16px;
  outline: none;
}
.km-form textarea{ min-height: 220px; resize: vertical; }

.km-form input:focus,
.km-form textarea:focus{
  border-color: rgba(10,136,165,.55);
  box-shadow: 0 0 0 4px rgba(10,136,165,.14);
}

.km-check{
  display:flex; gap:10px; align-items:flex-start;
  font-size:14px; line-height:1.6;
  color: rgba(12,18,26,.78);
}
.km-check input{ margin-top: 3px; }

/* Buttons */
.km-actions{ margin-top: 18px; display:flex; justify-content:center; }
.km-actions--2{ justify-content: center; gap: 12px; align-items: center; flex-wrap: wrap; }

.km-btn{
  border: 0;
  cursor: pointer;
  border-radius: 999px;
  padding: 12px 22px;
  font-weight: 900;
  letter-spacing: .06em;
  color: #fff;
  background: linear-gradient(90deg,#0a88a5,#1463d6);
  box-shadow: 0 16px 34px rgba(10,136,165,.25);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}
.km-btn:active{ transform: translateY(1px); }
.km-btn--sub{
  background: rgba(0,0,0,.08);
  color: rgba(12,18,26,.86);
  box-shadow: none;
  border: 1px solid rgba(12,18,26,.12);
}

/* Confirm table */
.km-confirmTable{
  width:100%;
  border-collapse: collapse;
  font-size: 14px;
}
.km-confirmTable th,
.km-confirmTable td{
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  vertical-align: top;
}
.km-confirmTable th{
  width: 34%;
  background: rgba(0,0,0,.03);
  text-align: left;
  font-weight: 800;
  color: rgba(0,0,0,.72);
}
.km-pre{ white-space: normal; }

/* Honeypot hidden */
.km-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* mobile */
@media (max-width: 768px) {
  .km-contactPage__cardInner { padding: 16px 14px 14px; }
  .km-row2 > *{ min-width: 0; flex: 1 1 100%; }
}
/* =========================================================
  Contact only: Back button (no hamburger menu)
========================================================= */
.km-contactBack{
  position: fixed;
  top: 14px;
  right: 74px;
  z-index: 1200;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 9px;
  text-decoration: none;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .03em;
  color: rgba(255,255,255,.92);
  background: rgba(148, 148, 148, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.km-contactBack:hover{
  transform: translateY(-1px);
}
@media (max-width: 480px){
  .km-contactBack{
    top: 20px;
    right: 10px;
    padding: 7px 12px;
    font-size: 12px;
  }
}