/* =========================================
   COMPONENTS - Buttons, Tabs, Forms, Cards
   ========================================= */

/* =========================================
   BUTTONS - Standardized System
   ========================================= */

/* Base button styles */
.btn-tic,
.btn-primary-custom,
.btn-outline-white,
.btn-article,
.btn-strategy-details,
.btn-send {
  display: inline-block;
  padding: var(--tic-btn-padding);
  font-family: var(--tic-font-title);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  text-align: center;
  border-radius: var(--tic-border-radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Primary button (solid blue) - DEFAULT */
.btn-tic,
.btn-primary-custom,
.btn-send {
  background-color: var(--tic-blue);
  color: var(--tic-white);
  border-color: var(--tic-blue);
}

.btn-tic:hover,
.btn-primary-custom:hover,
.btn-send:hover {
  background-color: var(--tic-blue-hover);
  border-color: var(--tic-blue-hover);
  color: var(--tic-white);
}

/* Outline button (for light backgrounds) */
.btn-article {
  background-color: transparent;
  color: var(--tic-blue);
  border-color: var(--tic-blue);
}

.btn-article:hover {
  background-color: var(--tic-blue);
  color: var(--tic-white);
}

/* Outline button (for dark backgrounds) */
.btn-outline-white,
.btn-strategy-details {
  background-color: transparent;
  color: var(--tic-white);
  border-color: var(--tic-white);
}

.btn-outline-white:hover,
.btn-strategy-details:hover {
  background-color: var(--tic-white);
  color: var(--tic-blue);
}

/* Button size modifiers */
.btn-lg {
  padding: 1.05rem 2.5rem;
  font-size: 1rem;
  border-radius: var(--tic-border-radius-pill);
}

/* Specific overrides */
.btn-primary-custom {
  margin-top: var(--tic-margin-md);
}

.btn-send {
  display: block;
  margin: 0 auto;
}

/* =========================================
   TABS
   ========================================= */
.tic-tabs .nav-link {
  border: none;
  color: var(--tic-black);
  opacity: 1;
  font-family: var(--tic-font-title);
  font-size: 1.1rem;
  font-weight: 600;
  padding: var(--tic-margin-md) var(--tic-gap-lg);
  background: transparent;
  border-bottom: 2px solid transparent;
}

.tic-tabs .nav-link:hover {
  color: var(--tic-blue);
}

.tic-tabs .nav-link.active {
  color: var(--tic-black);
  opacity: 1;
  background: transparent;
  border-bottom: 3px solid var(--tic-blue);
}

.tab-content {
  padding-top: 2rem;
}

/* =========================================
   FORMS
   ========================================= */
.tic-form .form-control {
  font-family: var(--tic-font-body);
  border-radius: var(--tic-border-radius);
  border: none;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

/* =========================================
   CARDS
   ========================================= */
.article-card {
  border: none;
  text-align: center;
  margin-bottom: var(--tic-margin-xl);
}

.article-img {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-bottom: 1rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.article-date {
  font-family: var(--tic-font-fancy);
  font-style: italic;
  font-size: var(--tic-font-size-small);
  color: var(--tic-black);
  opacity: 1;
}

.article-title {
  font-family: var(--tic-font-title);
  font-weight: var(--tic-font-weight-bold);
  font-size: var(--tic-font-size-body-lg);
  margin: var(--tic-gap-sm) 0;
}

.dept-card {
  margin-bottom: 3rem;
  text-align: center;
}

.dept-icon {
  font-size: 1.5rem;
  color: var(--tic-blue);
  margin: 0 auto 0.5rem auto;
  float: none;
  display: block;
}

.dept-title {
  font-family: var(--tic-font-title);
  font-size: var(--tic-font-size-h4);
  font-weight: var(--tic-font-weight-bold);
  color: var(--tic-blue);
  margin-bottom: var(--tic-gap-sm);
  text-align: center;
}

.dept-desc {
  font-family: var(--tic-font-body);
  font-size: var(--tic-font-size-body-lg);
  color: var(--tic-black);
  margin-left: 0;
  padding: 0 var(--tic-margin-md);
  text-align: center;
  line-height: var(--tic-line-height-relaxed);
}

/* =========================================
   SLOT MACHINE ANIMATION
   ========================================= */
.slot-digit {
  display: inline-flex;
  overflow: hidden;
  height: 1.2em;
  min-width: 0.55em;
  position: relative;
  vertical-align: bottom;
}

.slot-digit-inner {
  display: flex;
  flex-direction: column;
  transition: transform 1.5s cubic-bezier(0.1, 0.9, 0.2, 1);
}

.slot-digit-inner strong {
  display: block;
  height: 1.2em;
  line-height: 1.2em;
  text-align: center;
}

.slot-finished {
  transition: color 0.5s ease-in;
}

.slot-decimal,
.slot-percent {
  display: inline-block;
  line-height: 1.2em;
  height: 1.2em;
  vertical-align: bottom;
}

.slot-positive,
.slot-digit-inner strong.slot-positive {
  color: #87ff87 !important;
}

.slot-negative,
.slot-digit-inner strong.slot-negative {
  color: #ff7373 !important;
}

.slot-decimal.slot-positive,
.slot-percent.slot-positive {
  color: #90ee90;
}

.slot-decimal.slot-negative,
.slot-percent.slot-negative {
  color: #ffb6c1;
}