/* Primary button (e.g. <a class="btn primary_btn btn_sm">) */
a.btn.primary_btn,
button.btn.primary_btn,
.btn.primary_btn {
  background: #012241 !important;
  color: #ffffff !important;

  border: 1px solid rgba(1, 34, 65, 0.25) !important;
  border-radius: 10px !important;

  font-weight: 700 !important;
  letter-spacing: 0.2px;
  text-decoration: none !important;

  box-shadow: 0 8px 18px rgba(1, 34, 65, 0.18) !important;
  transition: transform 0.06s ease, box-shadow 0.15s ease, filter 0.15s ease, background 0.15s ease;
}

/* Small size variant */
a.btn.primary_btn.btn_sm,
button.btn.primary_btn.btn_sm,
.btn.primary_btn.btn_sm {
  padding: 8px 12px !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
}

/* Hover */
a.btn.primary_btn:hover,
button.btn.primary_btn:hover,
.btn.primary_btn:hover {
  filter: brightness(1.06);
  box-shadow: 0 12px 26px rgba(1, 34, 65, 0.22) !important;
}

/* Active / pressed */
a.btn.primary_btn:active,
button.btn.primary_btn:active,
.btn.primary_btn:active {
  transform: translateY(1px);
  box-shadow: 0 6px 14px rgba(1, 34, 65, 0.18) !important;
}

/* Keyboard focus (accessible) */
a.btn.primary_btn:focus,
a.btn.primary_btn:focus-visible,
button.btn.primary_btn:focus,
button.btn.primary_btn:focus-visible,
.btn.primary_btn:focus,
.btn.primary_btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(3, 211, 222, 0.22), 0 10px 22px rgba(1, 34, 65, 0.18) !important;
}

/* Disabled states (covers some frameworks) */
a.btn.primary_btn[aria-disabled="true"],
a.btn.primary_btn.disabled,
button.btn.primary_btn:disabled,
.btn.primary_btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none !important;
}

/* Optional: make icons inside the button inherit color */
a.btn.primary_btn svg,
a.btn.primary_btn svg path {
  fill: currentColor;
  
/* Override Tailwind primary color to brand cyan */
.tw-bg-primary {
  background-color: #03D3DE !important;
}

.tw-border-primary {
  border-color: #03D3DE !important;
}

/* Hover state */
.hover\:tw-bg-primary-600:hover {
  background-color: #02BEC8 !important; /* slightly darker cyan */
}

.hover\:tw-border-primary-600:hover {
  border-color: #02BEC8 !important;
}

/* Focus outline */
.focus\:tw-outline-primary-100:focus {
  outline-color: rgba(3, 211, 222, 0.35) !important;
}