/* =========================================
   FORM SYSTEMS.CSS
========================================= */


/* =========================================
   LAYER 0 — DESIGN TOKENS (ONLY ONCE)
========================================= */



/* =========================================
   LAYER 1 — LAYOUT SYSTEM (GRID ONLY)
========================================= */

.form-group-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-7);
}

.grid {
  display: grid;
  gap: var(--space-4);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .form-group-grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}


/* =========================================
   BUTTON SYSTEM (NEW CORE)
========================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 16px;
  border-radius: var(--radius-md);

  font-size: var(--text-base);
  font-weight: 500;

  cursor: pointer;
  transition: var(--transition-base);

  border: 1px solid transparent;
}

/* Primary */
.btn-primary {
  background: var(--color-primary);
  color: white;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

/* Secondary */
.btn-secondary {
  background: var(--surface-alt);
  border-color: var(--border);
  color: var(--text);
}

/* Ghost */
.btn-ghost {
  background: transparent;
  border-color: var(--border);
}

 /* =========================================
   PRIORITY SELECTION BUTTONS
========================================= */

.date-btn {
  min-height: 72px;

  padding: 18px 22px;

  border-radius: 16px;

  font-size: 1rem;
  line-height: 1.45;
  font-weight: 500;

  text-align: center;

  background: var(--surface);
  border: 1px solid var(--border);

  transition: all 0.2s ease;
}

/* Hover */
.date-btn:hover {
  transform: translateY(-2px);

  border-color: var(--accent);

  box-shadow:
    0 8px 24px rgba(0,0,0,0.06);
}

/* Active */
.date-btn.is-active {
  background: var(--primary);
  border-color: var(--primary);

  color: #fff;

  box-shadow:
    0 12px 28px rgba(75,46,131,0.18);
}

/* =========================================
   ESTIMATOR TOP CONTROLS
========================================= */

.estimator-options {
  min-height: 82px;

  padding: 16px 18px;

  border-radius: 16px;

  background: var(--surface);

  border: 1px solid var(--border);

  transition: all 0.2s ease;
}

.estimator-options .control-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
}

.estimator-options .control-price {
  margin-top: 6px;

  font-size: 0.98rem;

  opacity: 0.75;
}

 /*  CONTROL TAB SYSTEM (YOUR CORE UI ELEMENT)  */ 
.control-tab {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.45;
  min-height: 72px;
  padding: 20px 18px;
  width: 100%;
  font-size: var(--text-lg);
  font-weight: 500;
  background: var(--surface-lavender-light);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;

  transition: var(--transition-base);
}

.control-tab:hover {
  transform: translateY(-1px);
  border-color: var(--color-accent);
}

.control-tab.is-active {
  background: var(--accent-secondary-dark);
  border-color: var(--accent-secondary-dark);
  color: #fff;
}

  /*  TAB GROUP SYSTEM (GRID LOGIC ONLY) */   
.tab-group {
  display: grid;
  gap: var(--space-3);
  width: 100%;
}

.tab-group[data-role="guests"] {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-4);
}


@media (max-width: 768px) {
  .tab-group[data-role="guests"],
  .tab-group[data-role="investment"] {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
  }
}





  /* PILL SYSTEM (MULTI-SELECT) */  
.pill-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}


  /* CARD SYSTEM (SCALABLE UI BLOCKS) */  
.card {
  display: flex;
  flex-direction: column;

  padding: var(--space-4);
  border-radius: var(--radius-lg);

  background: var(--surface);
  border: 1px solid var(--border);

  transition: var(--transition-base);
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
}

.card.is-active {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(75, 46, 131, 0.15);
}

 /*  FORM SYSTEM (CONSISTENT BASE) */  
.form-group,
.form-half {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  padding-top: var(--space-3);
}

.form-group label {
  margin-bottom: var(--space-2);
  line-height: 1.4;  
  font-weight: 600;
  font-size: var(--text-base);
}

input,
select,
textarea {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  font-size: var(--text-base);
}

/*  LAYER 3 — CARD SYSTEM (YOUR PACKAGES) */