/* Button Base Styles */
.btn {
    @apply inline-flex justify-center items-center px-6 py-3 rounded-md font-medium text-sm md:text-base transition-all duration-200 ease-in-out;
}

/* Primary Button */
.btn-primary {
    @apply bg-[#F5CB5C] text-white hover:bg-[#D4A41C] shadow-lg hover:shadow-xl transform hover:-translate-y-0.5;
    box-shadow: 0 4px 6px -1px rgba(245, 203, 92, 0.2), 0 2px 4px -1px rgba(245, 203, 92, 0.1);
}

/* Secondary Button */
.btn-secondary {
    @apply bg-[#171717] text-white hover:bg-[#374151] shadow-md hover:shadow-lg transform hover:-translate-y-0.5;
}

/* Outline Button */
.btn-outline {
    @apply border-2 border-[#F5CB5C] text-[#F5CB5C] hover:bg-[#F5CB5C] hover:text-white shadow-sm hover:shadow-md transform hover:-translate-y-0.5;
}

/* Text Button (Link styled as button) */
.btn-text {
    @apply text-[#F5CB5C] hover:text-[#D4A41C] flex items-center gap-2 font-medium transition-colors;
}

/* Button Sizes */
.btn-sm {
    @apply px-4 py-2 text-sm;
}

.btn-lg {
    @apply px-8 py-4 text-lg;
}

/* Icon Button */
.btn-icon {
    @apply inline-flex items-center justify-center w-10 h-10 rounded-full bg-[#F5CB5C] text-white hover:bg-[#D4A41C] transition-colors;
}

/* Disabled State */
.btn:disabled {
    @apply opacity-50 cursor-not-allowed hover:transform-none;
}

/* Loading State */
.btn-loading {
    @apply relative !pl-8;
}

.btn-loading:before {
    content: '';
    @apply absolute left-4 w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin;
}

/* Required Field Styles */
.stama-label.required::after {
    content: " *";
    color: #E53E3E;
    font-weight: bold;
}

.form-control.required:invalid {
    border-color: #E53E3E;
    box-shadow: 0 0 0 0.2rem rgba(229, 62, 62, 0.25);
}

.stama-input.required:invalid {
    border-color: #E53E3E !important;
    box-shadow: 0 0 0 0.2rem rgba(229, 62, 62, 0.25) !important;
} 

/* Header navigation colors (desktop) */
@media (min-width: 768px) {
  header nav a,
  header .nav-item,
  header .nav-link-enhanced {
    color: #fff !important;
  }
  header nav a:hover,
  header .nav-item:hover,
  header .nav-link-enhanced:hover,
  header nav a:focus {
    color: #F5CB5C !important;
  }
  header nav a.active,
  header nav a[aria-current="page"] {
    color: #F5CB5C !important;
    border-bottom: 2px solid #F5CB5C;
  }
}