/* =====================================================
   COMPONENTS.CSS (UI DESIGN SYSTEM)
   -----------------------------------------------------
   PURPOSE:
   - Reusable visual components
   - Cards, tabs, accordions, tables, result UI
   - Shared interactive UI elements

   RULES:
   - No layout system (no containers, sections, grids)
   - No form structure
   - No page-specific logic
===================================================== */

/* =========================
   GOLD CARD SYSTEM
========================= */

.gold-card,
.option-card,
.tab-btn,
.date-btn {
  border: 2px solid #d4af37;
  border-radius: 10px;
  padding: 14px;
  background: #fff;
  color: #333;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s ease;
}

.gold-card:hover,
.option-card:hover,
.tab-btn:hover,
.date-btn:hover {
  transform: translateY(-2px);
  background: #fff7e6;
  border-color: #C19A6B;
}

/* ACTIVE STATE */
.gold-card.is-active,
.option-card.is-active,
.tab-btn.is-active,
.date-btn.is-active {
  background: linear-gradient(135deg, #b8860b, #d4af37);
  color: #fff;
  border-color: #b8860b;
}

/* =========================
   OPTION CARD BADGE
========================= */

.option-card {
  position: relative;
}

.option-card.popular::after {
  content: "Most Popular";
  position: absolute;
  top: -12px;
  right: 12px;
  background: #b9975b;
  color: #fff;
  font-size: 0.7rem;
  padding: 3px 6px;
  border-radius: 4px;
}

/* =========================
   ACCORDION SYSTEM
========================= */

.accordion-item {
  border: 1px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.accordion-header {
  padding: 16px;
  cursor: pointer;
  font-weight: 600;
  position: relative;
}

.accordion-header::after {
  content: "▼";
  position: absolute;
  right: 16px;
  transition: transform 0.3s ease;
}

.accordion-item.is-active .accordion-header::after {
  transform: rotate(180deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.accordion-item.is-active .accordion-content {
  max-height: 500px;
  padding: 12px 16px;
}

/* =========================
   RESULT BOX
========================= */

.result-box {
  background: #fff8e7;
  border: 2px solid #d4af37;
  border-radius: 12px;
  padding: 20px;
  text-align: center;
}

/* =========================
   PACKAGE TABLE
========================= */

.package-table {
  width: 100%;
  border-collapse: collapse;
}

.package-table th,
.package-table td {
  border: 1px solid #d4af37;
  padding: 12px;
  text-align: center;
}
.form-half label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 10px;
  color: #222;
}
.pill-group .pill {
  display: inline-block;
  padding: 8px 12px;
  margin: 6px 6px 0 0;
  border-radius: 20px;
  background: #eee;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  font-size: 0.9rem;
  position: relative;
  z-index: 3;
}

.pill-group .pill:hover {
  background: #ddd;
}

.pill-group .pill.active {
  background: linear-gradient(135deg, #b8860b, #d4af37);
  color: #fff;
  font-weight: 600;
}
.pill-group {
  position: relative;
  z-index: 2;
}