/* ============================================================
   Sankyu Blitar - Main Stylesheet
   ============================================================ */

:root {
  --primary:   #e85d04;
  --secondary: #ffc107;
  --dark:      #1a1a2e;
  --text:      #333;
  --muted:     #6c757d;
  --bg-light:  #f8f9fa;
  --radius:    12px;
  --shadow:    0 4px 20px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }

body {
  font-family: 'Poppins', sans-serif;
  color: var(--text);
  background: #fff;
}

/* ─── Navbar ─────────────────────────────────────────────── */
#mainNav {
  background: var(--dark);
  box-shadow: 0 2px 12px rgba(0,0,0,.2);
  padding: 10px 0;
}

#mainNav .navbar-brand span { font-size: 1.1rem; }

.search-input {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  border-radius: 8px 0 0 8px;
  min-width: 180px;
}
.search-input::placeholder { color: rgba(255,255,255,.5); }
.search-input:focus {
  background: rgba(255,255,255,.15);
  color: #fff;
  box-shadow: none;
  border-color: var(--secondary);
}

/* ─── Hero ───────────────────────────────────────────────── */
.hero-section {
  position: relative;
  min-height: 520px;
  background: url('../img/hero-bg.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26,26,46,.85) 0%, rgba(232,93,4,.6) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  padding: 60px 0;
}

.hero-search {
  max-width: 600px;
  margin: 0 auto;
}

.hero-search .form-control {
  border-radius: 12px 0 0 12px;
  padding: 14px 20px;
  font-size: 1rem;
}

.hero-search .btn {
  border-radius: 0 12px 12px 0;
  padding: 14px 28px;
}

/* Animations */
.animate-fade-up { animation: fadeUp .6s ease both; }
.delay-1 { animation-delay: .15s; }
.delay-2 { animation-delay: .3s; }
.delay-3 { animation-delay: .45s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Stats Bar ──────────────────────────────────────────── */
.stats-bar { border-bottom: 3px solid rgba(0,0,0,.1); }

/* ─── Place Cards ────────────────────────────────────────── */
.place-card {
  border-radius: var(--radius);
  transition: transform .25s, box-shadow .25s;
  overflow: hidden;
}

.place-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,.12) !important;
}

.card-img-wrapper {
  height: 220px;
}

.card-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s;
}

.place-card:hover .card-img-wrapper img {
  transform: scale(1.05);
}

/* ─── Section Headers ────────────────────────────────────── */
.section-header h2 { font-size: 1.5rem; }

/* ─── Auth Pages ─────────────────────────────────────────── */
.auth-page {
  min-height: calc(100vh - 140px);
  background: linear-gradient(135deg, #f8f9fa 0%, #fff3e0 100%);
}

.auth-page .card { border-radius: 16px; }

/* ─── Place Detail ───────────────────────────────────────── */
.place-description {
  font-size: 1rem;
  line-height: 1.8;
  color: #444;
}

.info-row { padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.info-row:last-child { border-bottom: none; }

/* ─── Stars ──────────────────────────────────────────────── */
.stars i { font-size: 13px; }

/* ─── Footer ─────────────────────────────────────────────── */
.footer {
  background: var(--dark);
  padding: 48px 0 0;
  margin-top: 60px;
}

.footer a:hover { color: var(--secondary) !important; }

/* ─── Category Header ────────────────────────────────────── */
.category-header { min-height: 180px; display: flex; align-items: center; }

/* ─── Pagination ─────────────────────────────────────────── */
.page-link { color: var(--primary); border-radius: 8px !important; margin: 0 2px; }
.page-item.active .page-link { background: var(--primary); border-color: var(--primary); }

/* ─── Buttons ────────────────────────────────────────────── */
.btn-warning { color: #1a1a2e; font-weight: 600; }
.btn-warning:hover { color: #1a1a2e; }

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero-section { min-height: 400px; }
  .hero-content { padding: 40px 0; }
  .hero-section h1 { font-size: 1.8rem; }
  .card-img-wrapper { height: 180px; }
  .search-input { min-width: 120px; }
}

@media (max-width: 576px) {
  .hero-section h1 { font-size: 1.5rem; }
  .stats-bar .fw-bold { font-size: 1.4rem !important; }
}

/* ─── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 3px; }

/* ─── Utilities ──────────────────────────────────────────── */
.rounded-4 { border-radius: 16px !important; }
.text-warning { color: var(--secondary) !important; }
.bg-warning  { background-color: var(--secondary) !important; }
