/* Button Components */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    /* Desktop padding from Figma */
    border-radius: 100px;
    /* From Figma */
    border: 2px solid transparent;
    /* Reserve space for border */
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    /* Apple-like smooth easing */
    text-decoration: none;
    box-sizing: border-box;
    font-family: var(--font-family-base);
    font-weight: 500;
    white-space: nowrap;
}



/* Primary Button */
.btn-primary {
    background-color: var(--color-label-primary);
    color: var(--color-label-primary-inverse);
    border: 2px solid var(--color-label-primary);
    /* Solid border to match bg initially */
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--color-label-primary);
    /* Border stays white (inherited from base state but now visible against transparent bg) */
}

.btn-primary:active {
    opacity: 0.6;
    transform: scale(0.98);
    /* Subtle click feedback */
}

/* Secondary Button (using Label/Tertiary color from design analysis) */
.btn-secondary {
    background-color: var(--color-bg-tertiary);
    color: var(--color-label-primary);
    border: 2px solid transparent;
}

.btn-secondary:hover {
    background-color: var(--color-label-primary);
    /* White */
    color: var(--color-label-primary-inverse);
    /* Black text */
}

/* Outline Button */
.btn-outline {
    background-color: transparent;
    border: 2px solid var(--color-label-secondary);
    /* Using secondary label as border */
    color: var(--color-label-primary);
}

.btn-outline:hover {
    background-color: var(--color-label-primary);
    /* White bg */
    border-color: var(--color-label-primary);
    /* White border to match bg */
    color: var(--color-label-primary-inverse);
    /* Black text */
}

/* Ghost / Text Link Button */
.btn-ghost {
    background-color: transparent;
    border: 2px solid transparent;
    color: var(--color-label-primary);
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* Ghost buttons behave like text links, underline must match text width */
    min-width: auto;

    position: relative;
    /* For pseudo-element positioning */
}

.btn-ghost::after {
    content: '';
    position: absolute;
    bottom: 4px;
    /* Offset to allow space so it doesn't touch text descenders too much */
    left: 0;
    width: 100%;
    height: 2px;
    /* Matching border width of other buttons */
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    /* Shrinks to the right when mouse leaves */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.btn-ghost:hover {
    background-color: transparent;
    text-decoration: none;
    /* Disable default underline */
}

.btn-ghost:hover::after {
    transform: scaleX(1);
    transform-origin: left;
    /* Grows from the left when mouse enters */
}

/* Disabled State */
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* Mobile Button */
.btn-mobile {
    padding: 12px 32px;
    font-size: 15px;
    letter-spacing: 0.02em;
    /* Often mobile buttons are full width or adjust in media queries, 
       but this class forces mobile styling */
}

/* Dashboard / UI Button */
.btn-dashboard {
    padding: 8px 16px;
    font-size: 13px;
    /* Compact size */
    border-radius: 8px;
    /* Tighter radius for UI */
    height: 32px;
    /* Fixed height for alignment */
}

/* Small Button Variant */
.btn-sm {
    padding: 8px 16px;
    font-size: 14px;
}

/* Mobile adjustments (Media Query) */
@media (max-width: 768px) {
    .btn {
        padding: 12px 32px;
        /* Mobile padding from Figma */
        width: 100%;
        /* Often mobile buttons are full width, or just slightly smaller padding */
    }

    .btn-sm {
        width: auto;
        /* Small buttons shouldn't be full width by default on mobile */
    }
}