/* ============================================================
   travel_booking/public/css/trips.css
   Styles untuk PAGE katalog /trips (hero, filters, result meta).
   
   NOTE: Komponen rc-trip-card sudah dipindahkan ke trip_card.css
         File ini HANYA untuk page-specific styles.
   
   Tema: gold #C9A84C, dark #1E1C18, muted #5C5850/#7D7A70,
   bg #F7F5F0, border #E8E5DF.
   Font: Rubik (heading) + Jost (body) + Satisfy (tag)
   ============================================================ */

/* ── Font variables ── */
:root {
  --font-rubik: "Rubik", sans-serif;
  --font-jost: "Jost", sans-serif;
  --font-satisfy: "Satisfy", cursive;
  --font-sansita: "Sansita", serif;
}

/* Page container */
.rc-catalog { 
  font-family: var(--font-jost); 
  max-width: 1180px; 
  margin: 0 auto; 
  padding: 24px 22px 60px; 
}

/* ── Hero Section ── */
.rc-catalog-hero {
  padding: 30px 0 22px;
  text-align: center;
}
.rc-catalog-hero h1 {
  margin: 0;
  font-family: var(--font-rubik);
  font-size: 42px;
  color: #1E1C18;
  letter-spacing: -.01em;
  font-weight: 500;
}
.rc-catalog-hero p {
  margin: 8px 0 0;
  color: #7D7A70;
  font-size: 15px;
}

/* ── Filter Bar ── */
.rc-filters {
  background: #fff;
  border: 1px solid #E8E5DF;
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rc-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.rc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  min-width: 150px;
}
.rc-field-search {
  flex: 2.2;
  min-width: 200px;
  position: relative;
}
.rc-field-search > i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9C9789;
  font-size: 16px;
}
.rc-field-search input { padding-left: 34px; }
.rc-field-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #7D7A70;
  font-family: var(--font-jost);
}
.rc-field input,
.rc-field select {
  padding: 10px 12px;
  border: 1px solid #E8E5DF;
  border-radius: 9px;
  font-size: 14px;
  font-family: var(--font-jost);
  color: #1E1C18;
  background: #fff;
  outline: none;
  padding-left:30px;
}
.rc-field input:focus,
.rc-field select:focus {
  border-color: #C9A84C;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, .15);
}
.rc-field-date { min-width: 130px; max-width: 170px; }
.rc-filter-actions {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

/* Buttons */
.rc-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 9px;
  background: #C9A84C;
  color: #1E1C18;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-jost);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease;
}
.rc-btn-primary:hover { background: #B8983F; }
.rc-btn-ghost {
  padding: 8px 14px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid #E8E5DF;
  color: #5C5850;
  font-size: 14px;
  font-family: var(--font-jost);
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.rc-btn-ghost:hover { border-color: #C9A84C; color: #1E1C18; }

/* Result meta (count, sort) */
.rc-catalog-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 2px 14px;
  font-size: 13px;
  color: #7D7A70;
  font-weight: 500;
  font-family: var(--font-jost);
}

/* ── Responsive ── */
@media (max-width: 980px) {
  /* Grid responsive is in trip_card.css */
}

@media (max-width: 640px) {
  .rc-catalog-hero h1 { font-size: 32px; }
  .rc-filter-row { gap: 10px; }
  .rc-field,
  .rc-field-search,
  .rc-field-date {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
  }
  .rc-filter-actions { width: 100%; }
}