/* WRE - desain contoh halaman servis (hanya dipakai servis/index-contoh.php) */

/* Kartu formulir */
.premium-card{border-radius:24px;box-shadow:0 14px 40px rgba(15,30,63,.08)}
.premium-card .card-head{padding:20px 22px}
.premium-card .card-head h5{font-size:18px}
.premium-card .card-head small{font-size:13.5px}
.premium-card .card-body-p{padding:20px 20px 22px}

/* Judul bagian */
.section-title{font-size:13.5px;letter-spacing:.9px;margin-bottom:16px}
.section-title .dot{width:8px;height:8px}
.form-section + .form-section{margin-top:28px}

/* Label dan isian: lebih besar dan mudah dibaca */
.premium-card .form-label{font-size:13.5px;margin-bottom:6px;white-space:normal}
.premium-card .form-label .hint{font-size:12px}
.premium-card .form-control,
.premium-card .form-select{
  min-height:46px;padding:10px 12px;border-radius:12px;font-size:16px}
.premium-card textarea.form-control{min-height:92px;padding-top:12px}
.premium-card .input-with-icon .form-control{padding-left:40px}
.premium-card .input-with-icon .form-select{padding-left:40px !important}
.premium-card .input-with-icon > i{left:13px;font-size:16px}
.form-section .mb-3{margin-bottom:.9rem !important}
.premium-card .form-control::placeholder{color:#8a94ab;opacity:1}

/* Tombol info */
.info-toggle{padding:12px 14px;font-size:13.5px;border-radius:12px}

/* Unggah foto */
.file-pick{padding:10px 12px;border-radius:12px;gap:10px}
.file-pick-btn{padding:10px 16px;border-radius:10px;font-size:13.5px;min-height:42px}
.file-pick-name{font-size:12.5px}

/* Tombol kirim */
.btn-primary-wre{
  padding:17px 18px;border-radius:16px;font-size:16px;
  box-shadow:0 14px 30px rgba(15,30,63,.2)}

/* Fokus keyboard */
.btn-primary-wre:focus-visible,.file-pick-btn:focus-visible,.info-toggle:focus-visible{
  outline:3px solid #ffd166;outline-offset:2px}

/* Dark mode (mengikuti pengaturan mode halaman yang sudah ada) */
html.theme-dark-root .premium-card .form-label,
body.theme-dark .premium-card .form-label{color:#e2e8f0}
html.theme-dark-root .premium-card .form-control::placeholder,
body.theme-dark .premium-card .form-control::placeholder{color:#7f8da6}
html.theme-dark-root .section-title,
body.theme-dark .section-title{color:#f1f5f9}

@media (max-width:576px){
  .premium-card .card-body-p{padding:16px 14px 20px}
  .premium-card .card-head{padding:16px}
  /* ruang agar tombol paling bawah tidak tertutup bar FAQ/Chat */
  body{padding-bottom:92px}
}
@media (min-width:768px){
  .premium-card .card-body-p{padding:26px 28px 30px}
}