/* Material Design 3 - Button Components
   Filled, Outlined, Text, Elevated, Tonal buttons */

/* Base Button Styles */
.m3-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 24px;
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  font-family: var(--md-sys-typescale-label-large-font-family);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  line-height: var(--md-sys-typescale-label-large-line-height);
  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.m3-button:focus-visible {
  outline: 2px solid var(--md-sys-color-primary);
  outline-offset: 2px;
}

.m3-button:disabled {
  cursor: not-allowed;
  opacity: var(--md-sys-state-disabled-opacity);
}

/* Button with icon */
.m3-button .material-symbols-rounded {
  font-size: 18px;
  margin-left: -8px;
}

.m3-button.icon-end .material-symbols-rounded {
  margin-left: 0;
  margin-right: -8px;
}

/* Filled Button (Primary) */
.m3-button-filled {
  background-color: var(--md-sys-color-primary);
  color: var(--md-sys-color-on-primary);
}

.m3-button-filled::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--md-sys-color-on-primary);
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.m3-button-filled:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

.m3-button-filled:active::before {
  opacity: var(--md-sys-state-pressed-opacity);
}

.m3-button-filled:disabled {
  background-color: var(--md-sys-color-on-surface);
  color: var(--md-sys-color-surface);
}

/* Outlined Button */
.m3-button-outlined {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  border: 1px solid var(--md-sys-color-outline);
}

.m3-button-outlined::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--md-sys-color-primary);
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.m3-button-outlined:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

.m3-button-outlined:active::before {
  opacity: var(--md-sys-state-pressed-opacity);
}

.m3-button-outlined:disabled {
  border-color: var(--md-sys-color-on-surface);
  color: var(--md-sys-color-on-surface);
}

/* Text Button */
.m3-button-text {
  background-color: transparent;
  color: var(--md-sys-color-primary);
  padding: 0 16px;
}

.m3-button-text::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--md-sys-color-primary);
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.m3-button-text:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

.m3-button-text:active::before {
  opacity: var(--md-sys-state-pressed-opacity);
}

.m3-button-text:disabled {
  color: var(--md-sys-color-on-surface);
}

/* Elevated Button */
.m3-button-elevated {
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-primary);
  box-shadow: 
    0px 1px 2px 0px rgba(0, 0, 0, 0.30),
    0px 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.m3-button-elevated::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--md-sys-color-primary);
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.m3-button-elevated:hover {
  box-shadow: 
    0px 2px 3px 0px rgba(0, 0, 0, 0.30),
    0px 6px 10px 4px rgba(0, 0, 0, 0.15);
}

.m3-button-elevated:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

.m3-button-elevated:active::before {
  opacity: var(--md-sys-state-pressed-opacity);
}

.m3-button-elevated:disabled {
  background-color: var(--md-sys-color-on-surface);
  color: var(--md-sys-color-surface);
  box-shadow: none;
}

/* Tonal Button */
.m3-button-tonal {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

.m3-button-tonal::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--md-sys-color-on-secondary-container);
  opacity: 0;
  transition: opacity var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.m3-button-tonal:hover::before {
  opacity: var(--md-sys-state-hover-opacity);
}

.m3-button-tonal:active::before {
  opacity: var(--md-sys-state-pressed-opacity);
}

.m3-button-tonal:disabled {
  background-color: var(--md-sys-color-on-surface);
  color: var(--md-sys-color-surface);
}

/* Custom Filled CTA Button */
.btn-modern-filled {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: linear-gradient(135deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-primary-container) 100%);
  color: var(--md-sys-color-on-primary);
  border: none;
  border-radius: var(--md-sys-shape-corner-full);
  text-decoration: none;
  font-family: var(--md-sys-typescale-label-large-font-family);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
  box-shadow:
    0px 2px 4px rgba(0, 0, 0, 0.20),
    0px 8px 16px rgba(0, 0, 0, 0.12);
  transition:
    transform var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized),
    box-shadow var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-emphasized),
    filter var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
}

.btn-modern-filled:hover {
  transform: translateY(-2px);
  box-shadow:
    0px 4px 6px rgba(0, 0, 0, 0.20),
    0px 12px 24px rgba(0, 0, 0, 0.12);
  filter: brightness(1.05);
}

.btn-modern-filled:focus-visible {
  outline: 2px solid var(--md-sys-color-on-primary);
  outline-offset: 2px;
}

.btn-modern-filled .arrow-icon {
  stroke: currentColor;
}

/* FAB - Floating Action Button */
.m3-fab {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 56px;
  height: 56px;
  border-radius: var(--md-sys-shape-corner-large);
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0px 1px 3px 0px rgba(0, 0, 0, 0.30),
    0px 4px 8px 3px rgba(0, 0, 0, 0.15);
  transition: all var(--md-sys-motion-duration-short4) var(--md-sys-motion-easing-standard);
  overflow: hidden;
  z-index: 50;
}

.m3-fab:hover {
  box-shadow: 
    0px 2px 3px 0px rgba(0, 0, 0, 0.30),
    0px 6px 10px 4px rgba(0, 0, 0, 0.15);
}

.m3-fab:active {
  box-shadow: 
    0px 1px 3px 0px rgba(0, 0, 0, 0.30),
    0px 4px 8px 3px rgba(0, 0, 0, 0.15);
}

.m3-fab .material-symbols-rounded {
  font-size: 24px;
}

/* Extended FAB */
.m3-fab-extended {
  width: auto;
  padding: 0 20px;
  gap: 12px;
  border-radius: var(--md-sys-shape-corner-large);
  font-family: var(--md-sys-typescale-label-large-font-family);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
}

.m3-fab-extended .material-symbols-rounded {
  margin-left: -8px;
}

/* Small FAB */
.m3-fab-small {
  width: 40px;
  height: 40px;
  border-radius: var(--md-sys-shape-corner-medium);
}

.m3-fab-small .material-symbols-rounded {
  font-size: 20px;
}

/* Large FAB */
.m3-fab-large {
  width: 96px;
  height: 96px;
  border-radius: var(--md-sys-shape-corner-extra-large);
}

.m3-fab-large .material-symbols-rounded {
  font-size: 36px;
}

/* Button Group */
.m3-button-group {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Responsive adjustments */
@media (max-width: 599px) {
  .m3-fab {
    bottom: 16px;
    right: 16px;
  }
}