/**
 * TUH Account - Buttons Component
 *
 * @package TUH_Account
 * @since 1.1.0
 */

/* ===========================================
   BUTTON BASE
   =========================================== */
.tuh-account-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: var(--tuh-account-radius);
    cursor: pointer;
    transition: all var(--tuh-account-transition);
    outline: none;
}

.tuh-account-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.tuh-account-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ===========================================
   BUTTON PRIMARY
   =========================================== */
.tuh-account-btn--primary {
    background: var(--tuh-account-primary);
    color: var(--tuh-account-btn-text);
}

.tuh-account-btn--primary:hover:not(:disabled) {
    background: var(--tuh-account-primary-hover);
    color: var(--tuh-account-btn-text, #fff);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(140, 82, 255, 0.3);
}

.tuh-account-btn--primary:active {
    transform: translateY(0);
}

/* ===========================================
   BUTTON SECONDARY
   =========================================== */
.tuh-account-btn--secondary {
    background: var(--tuh-account-btn-secondary-bg);
    color: var(--tuh-account-btn-secondary-text);
    border: 1px solid var(--tuh-account-border);
}

.tuh-account-btn--secondary:hover:not(:disabled) {
    background: var(--tuh-account-border);
    color: var(--tuh-account-btn-secondary-text);
}

/* ===========================================
   BUTTON OUTLINE
   =========================================== */
.tuh-account-btn--outline {
    background: transparent;
    color: var(--tuh-account-primary);
    border: 2px solid var(--tuh-account-primary);
}

.tuh-account-btn--outline:hover:not(:disabled) {
    background: var(--tuh-account-primary);
    color: var(--tuh-account-btn-text);
}

/* ===========================================
   BUTTON DANGER
   =========================================== */
.tuh-account-btn--danger {
    background: var(--tuh-account-danger);
    color: white;
}

.tuh-account-btn--danger:hover:not(:disabled) {
    background: #c82333;
    color: #fff;
}

/* ===========================================
   BUTTON SUCCESS
   =========================================== */
.tuh-account-btn--success {
    background: var(--tuh-account-success);
    color: white;
}

.tuh-account-btn--success:hover:not(:disabled) {
    background: #218838;
    color: #fff;
}

/* ===========================================
   BUTTON LINK
   =========================================== */
.tuh-account-btn--link {
    background: transparent;
    color: var(--tuh-account-link);
    padding: 8px 12px;
}

.tuh-account-btn--link:hover:not(:disabled) {
    color: var(--tuh-account-link-hover);
    text-decoration: underline;
}

/* ===========================================
   BUTTON SIZES
   =========================================== */
.tuh-account-btn--sm {
    padding: 8px 16px;
    font-size: 0.875rem;
}

.tuh-account-btn--lg {
    padding: 16px 32px;
    font-size: 1.1rem;
}

.tuh-account-btn--full {
    width: 100%;
}

/* ===========================================
   BUTTON ICON ONLY
   =========================================== */
.tuh-account-btn--icon {
    width: 40px;
    height: 40px;
    padding: 0;
}

.tuh-account-btn--icon.tuh-account-btn--sm {
    width: 32px;
    height: 32px;
}

/* ===========================================
   BUTTON LOADING
   =========================================== */
.tuh-account-btn--loading {
    position: relative;
    color: transparent;
    pointer-events: none;
}

.tuh-account-btn--loading::after {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    top: 50%;
    left: 50%;
    margin: -9px 0 0 -9px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: tuh-btn-spin 0.6s linear infinite;
}

@keyframes tuh-btn-spin {
    to { transform: rotate(360deg); }
}

/* ===========================================
   SOCIAL BUTTONS
   =========================================== */
.tuh-account-btn--google {
    background: #fff;
    color: #333;
    border: 1px solid #ddd;
}

.tuh-account-btn--google:hover:not(:disabled) {
    background: #f5f5f5;
    border-color: #ccc;
    color: #333;
}

.tuh-account-btn--google svg {
    width: 20px;
    height: 20px;
}

.tuh-account-btn--facebook {
    background: #1877F2;
    color: white;
}

.tuh-account-btn--facebook:hover:not(:disabled) {
    background: #166fe5;
    color: #fff;
}

/* ===========================================
   BUTTON GROUP
   =========================================== */
.tuh-account-btn-group {
    display: flex;
    gap: 12px;
}

.tuh-account-btn-group--right {
    justify-content: flex-end;
}

.tuh-account-btn-group--center {
    justify-content: center;
}

/* ===========================================
   RESPONSIVE
   =========================================== */
@media (max-width: 768px) {
    .tuh-account-btn-group {
        flex-direction: column;
    }

    .tuh-account-btn-group .tuh-account-btn {
        width: 100%;
    }
}