/* ==========================================================================
   RORO NUSANTARA — custom-fixes.css (12 perbaikan UI)
   ========================================================================== */

/* FIX #3: perkecil kartu samping carousel + animasi scale saat pindah ------ */
.hp-slide.is-left,
.hp-slide.is-right {
  transform: translate(-50%, -50%) translateX(var(--hp-shift, 82%)) scale(0.62) !important;
  opacity: 0.4;
}
.hp-slide.is-left  { --hp-shift: -72%; }
.hp-slide.is-right { --hp-shift: 72%; }
/* animasi membesar lebih menonjol */
.hp-slide {
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.6s ease, filter 0.6s ease, box-shadow 0.6s ease !important;
}

/* FIX #11: perkecil back-to-top ------------------------------------------ */
#backToTopBtn,
.float-btt-btn {
  width: 38px !important;
  height: 38px !important;
  bottom: 88px !important;
  right: 20px !important;
}
#backToTopBtn svg,
.float-btt-btn svg {
  width: 16px !important;
  height: 16px !important;
}

/* FIX #10: tombol WhatsApp melayang (floating action button) --------------- */
.roro-fab-wa {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 45;
  width: 52px;
  height: 52px;
  border-radius: 9999px;
  background: linear-gradient(145deg, #25d366, #128c7e);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(18, 140, 126, 0.45), inset 0 1px 1px rgba(255,255,255,0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
}
.roro-fab-wa:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 12px 28px rgba(18,140,126,0.55); }
.roro-fab-wa svg { width: 26px; height: 26px; fill: currentColor; }
/* geser back-to-top ke kiri agar tidak tumpang tindih dgn FAB WA */
#backToTopBtn, .float-btt-btn { right: 84px !important; }

/* FIX #12: modal admin standalone /admin/login — padding lebih rapat,
   dimensi jadi proporsional (tidak "kosong melompong") -------------------- */
#adminModalCard { width: 340px !important; max-width: 340px !important; height: auto !important; max-height: 92vh !important; }
#adminModalCard .pin-box { height: 36px !important; font-size: 16px !important; }

/* FIX #1: jarak breadcrumb/hero ke navbar sticky --------------------------- */
main.pt-20 { padding-top: 2.75rem !important; }
/* FIX #1 (lanjutan): HANYA pangkas jarak navbar->breadcrumb; spasi antar section lain tetap */
/* tur.html: section breadcrumb adalah section PERTAMA di main (setelah tombol back-to-top) */
main.flex-grow > section:first-of-type { margin-top: 0 !important; padding-top: 0.5rem !important; }
/* halaman ber-main pt-20: section pertama yang punya pt-4/sm:pt-8 diperkecil */
main.pt-20 > section:first-of-type[class*="pt-"] { padding-top: 0.75rem !important; }
section.pt-4.sm\:pt-8 { padding-top: 0.75rem !important; }

/* FIX #4: perkecil kartu "4 Value Pillars" (TrustBadges) ------------------- */
[data-purpose="trust-badges"] .clay-card { padding: 14px !important; gap: 10px !important; }
[data-purpose="trust-badges"] .clay-card > div:first-child {
  width: 38px !important; height: 38px !important; font-size: 18px !important;
}
[data-purpose="trust-badges"] h3 { font-size: 13px !important; }
[data-purpose="trust-badges"] p  { font-size: 11px !important; }
/* perkecil form pencarian "Cek Status Pemesanan" */
[data-purpose="booking-search-console"] .clay-card { padding: 12px 16px !important; }
[data-purpose="booking-search-console"] .max-w-4xl { max-width: 46rem !important; }

/* FIX #5: perkecil kartu "4 Pilar Nilai/Keunggulan" ------------------------ */
[data-purpose="value-propositions"] .clay-card { padding: 16px !important; }
[data-purpose="value-propositions"] .clay-card .w-12 { width: 38px !important; height: 38px !important; font-size: 17px !important; }
[data-purpose="value-propositions"] h3 { font-size: 14px !important; }
[data-purpose="value-propositions"] .text-xs { font-size: 11px !important; }

/* FIX #8: icon Font Awesome di detail-rentcar (fallback glyph) ------------- */
i.fa-solid::before { display: inline-block; font-style: normal; }

/* FIX #2 (override): tombol navbar maroon solid ----------------------------- */
header[data-purpose="primary-navigation-bar"] a[href$="/login"],
header[data-purpose="primary-navigation-bar"] button#themeToggleBtn {
  background: #7f1d1d !important;
  background-image: none !important;
  box-shadow: 0 6px 16px rgba(127, 29, 29, 0.35) !important;
}
header[data-purpose="primary-navigation-bar"] a[href$="/login"] { color: #ffffff !important; }
header[data-purpose="primary-navigation-bar"] button#themeToggleBtn { color: #fcd34d !important; }
/* pill navigasi aktif -> maroon solid */
header a[class*="clay-pill-active"] {
  background: #7f1d1d !important;
  background-image: none !important;
}

/* FIX #11 (override): back-to-top benar-benar tampil kecil ------------------ */
#backToTopBtn { width: 40px !important; height: 40px !important; }
#backToTopBtn svg { width: 18px !important; height: 18px !important; }
