/* ==========================================================================
   Tandem Independent Button Components
   ========================================================================== */

/* Shared Base Button Properties */
.btn-primary,
.btn-outline {
  border-radius: var(--radius-sharp);
  padding: var(--space-xl) var(--space-2xl);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--fs-body);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  cursor: pointer;
  align-self: flex-start;
  text-decoration: none;
  position: relative;
  will-change: transform;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.btn-primary {
  background-color: var(--primary-purple);
  color: var(--text-white);
  border: 2px solid transparent;
}

.btn-outline {
  background-color: transparent;
  color: var(--primary-purple);
  border: 2px solid var(--primary-purple);
}

.btn-icon {
  width: var(--btn-icon-size);
  height: var(--btn-icon-size);
  will-change: transform;
  overflow: visible;
  transition: transform 0.3s ease;
}

.btn-icon .chevron-1,
.btn-icon .chevron-2 {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
}

.btn-icon .chevron-2 {
  opacity: 0.5;
}

/* Small Button Modifiers */
.btn-primary.btn-sm,
.btn-outline.btn-sm {
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-sm);
  gap: var(--space-md);
}

@media (hover: hover) {

  .btn-primary:hover,
  .btn-outline:hover,
  .interactive-card:hover .btn-primary,
  .interactive-card:hover .btn-outline {
    box-shadow: var(--shadow-purple-glow);
  }

  .btn-outline:hover,
  .interactive-card:hover .btn-outline {
    background-color: var(--primary-purple);
    color: var(--text-white);
  }

  /* Hover transitions for standard chevrons */
  .btn-primary:hover .btn-icon .chevron-1,
  .btn-outline:hover .btn-icon .chevron-1,
  .interactive-card:hover .btn-primary .btn-icon .chevron-1,
  .interactive-card:hover .btn-outline .btn-icon .chevron-1 {
    transform: translateX(4px);
  }

  .btn-primary:hover .btn-icon .chevron-2,
  .btn-outline:hover .btn-icon .chevron-2,
  .interactive-card:hover .btn-primary .btn-icon .chevron-2,
  .interactive-card:hover .btn-outline .btn-icon .chevron-2 {
    transform: translateX(8px);
    opacity: 1;
  }
}

/* ==========================================================================
   Tandem Global Form & Input Styles (Moved from contact.css)
   ========================================================================== */

/* Form Grid Layout */
.contact-form-grid {
   display: flex;
   flex-wrap: wrap;
   gap: var(--space-md);
   width: 100%;
}

.contact-form-grid > * {
   flex: 1 1 220px;
}

.input-wrapper.select {
   cursor: pointer;
   position: relative;
}

.input-wrapper select {
   appearance: none;
   -webkit-appearance: none;
   cursor: pointer;
}

.select-arrow {
   position: absolute;
   right: var(--space-lg);
   pointer-events: none;
   width: 12px;
   height: 12px;
   color: var(--secondary-grey-purple);
   display: flex;
   align-items: center;
   justify-content: center;
}

.input-wrapper select option {
   background-color: var(--bg-dropdown-option);
   /* matches glass card solid base */
   color: var(--text-white);
}

.form-submit-wrapper {
   display: flex;
   justify-content: center;
   margin-top: var(--space-sm);
}

/* Custom Select Dropdown Styling */
.custom-select-wrapper {
   position: relative;
}

.custom-select-trigger {
   width: 100%;
   height: 100%;
   background: transparent;
   border: none;
   color: var(--text-white);
   display: flex;
   align-items: center;
   justify-content: space-between;
   text-align: left;
   cursor: pointer;
   padding: 0;
}

.custom-select-trigger .selected-value {
   color: var(--secondary-grey-purple);
   opacity: 0.8;
}

.custom-select-trigger.has-value .selected-value {
   color: var(--text-white);
   opacity: 1;
}

.custom-select-dropdown {
   position: absolute;
   top: calc(100% + 8px);
   left: 0;
   width: 100%;
   box-sizing: border-box;
   background: rgba(var(--bg-dark-rgb), 0.95);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   border: 1px solid var(--border-glass);
   display: none;
   flex-direction: column;
   z-index: 105;
   box-shadow: 0 10px 25px rgba(var(--black-rgb), 0.5);
   border-radius: var(--radius-sharp);
}

.custom-select-wrapper.open .custom-select-dropdown {
   display: flex;
}

.custom-select-wrapper.open .select-arrow {
   transform: rotate(180deg);
   transition: transform 0.3s ease;
}

.custom-select-option {
   font-family: var(--font-text);
   color: var(--text-white);
   padding: var(--space-md) var(--space-lg);
   font-size: var(--font-size-sm);
   cursor: pointer;
   transition: background-color 0.3s ease;
   text-align: left;
}

@media (hover: hover) {
   .custom-select-option:hover {
      background: rgba(var(--white-rgb), 0.05);
   }
}

.custom-select-option.active {
   background: var(--primary-purple);
}

@media (max-width: 768px) {
   .contact-form {
      gap: var(--space-sm);
   }

   .contact-form-grid {
      gap: var(--space-sm);
   }

   .form-submit-wrapper .btn-primary {
      width: 100%;
   }
}
.form-actions-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: var(--space-lg);
}

@media (max-width: 768px) {
  .form-actions-row {
    flex-direction: column;
    gap: var(--space-md);
  }

  .form-actions-row .btn-outline,
  .form-actions-row .btn-primary {
    width: 100%;
    justify-content: center;
  }
}