/* ===========================================================
   Buttons
   - Generic reusable button styles
   - Search input buttons, Go button
   - Tab buttons
   - CTA button hover/active effects
   =========================================================== */


/* ---- Generic button reset ---- */
button {
  border: none;
  outline: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: all 0.2s ease;
}


/* ---- Input button (small pill style) ---- */
/* input selector as anchor */
.input-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; min-width:200px; padding:.5rem 1.2rem;
  border-bottom: solid 2px;
  font-size:.95rem; font-weight:700; color:#000;
  transition: box-shadow .2s ease, transform .02s ease, background-color .2s ease;
}
.input-btn:hover{ color:#000; }
.input-btn:active{ transform: translateY(1px); }

/* input button icon */
#input_buttons ul li i {
  margin-right: 8px;
  font-size: 1.1rem;
}


#input_buttons { margin-bottom: 15px; }
#input_buttons ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
}






/* ---- Go button (smaller pill, often used inline) ---- */
/* Go button (disabled look by default; JS toggles opacity) */
.go-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; min-width:200px; padding:.5rem 1.2rem;
  font-size:.95rem; font-weight:700; color:#fff;
  background: linear-gradient(to right, #3182ed, #0da2e7);
  opacity: 0.5;
  border-radius:12px;
  border: none;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  transition: box-shadow .2s ease, transform .02s ease, background-color .2s ease;
}
.go-btn:active{ transform: translateY(1px); }


/* ---- Tab buttons (horizontal UI controls) ---- */
.tab-btn {
  background: #fff;
  border: none;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 500;
  transition: border 0.1s; /* conservative to avoid visual changes */
}
.tab-btn.active {
  background: #fff;
  color: #000;
  border: 0;
  border-bottom: solid 2px;
  font-weight: 700;
}




/* ---- Emphasized CTA (shared pattern if needed outside nav) ---- */
.cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  min-width: 120px;
  padding: 0 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  border-radius: 12px;
  background: linear-gradient(to right, var(--btn-blue), var(--btn-purple));
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  transition: box-shadow .2s ease, transform .02s ease, background .2s ease;
}
.cta-btn:hover {
  background: linear-gradient(to right, var(--btn-blue-hover), var(--btn-purple-hover));
  box-shadow: 0 6px 12px rgba(0,0,0,.2);
}
.cta-btn:active { transform: translateY(1px); }



/* ---- Input Buttons Responsive shift ---- */

@media (max-width: 700px) { 
  #input_buttons ul { display: block; }
}

@media (max-width: 700px) { 
  .go-btn { min-width: 99%; margin-top: 12px; }
}