/**
 * ============================================
 * BUTTONS
 * ============================================
 * 
 * All button styles unified in one place
 */

/* ============================================
   PRIMARY BUTTONS
   Equal padding on all sides
   ============================================ */

.uk-button-danger,
.btn-danger,
.primary-btn {
    background: var(--gradient-primary) !important;
    color: var(--text-light) !important;
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-8);
    transition: var(--transition-fast);
    cursor: pointer;
    border: none;
    display: inline-block;
    text-decoration: none;
}

/* ============================================
   SECONDARY BUTTONS
   Outline Grey - #D7D6D1
   Labels: Watchlist, Trailer, Share
   ============================================ */

.uk-button-secondary,
.btn-secondary,
.secondary-btn {
    background: transparent !important;
    color: var(--text-light) !important;
    font-size: 1em;
    padding: var(--space-1) var(--space-3) !important;
    margin: var(--space-1) !important;
    border-radius: var(--radius-button);
    transition: var(--transition-fast);
    border: 1px solid #D7D6D1 !important;
    display: inline-block;
    cursor: pointer;
}

/* ============================================
   DEFAULT BUTTONS
   ============================================ */

.uk-button-default,
.btn-default {
    background: #ccc !important;
    color: var(--text-dark) !important;
    padding: var(--space-2) var(--space-3) !important;
    border-radius: var(--radius-button);
    transition: var(--transition-fast);
}

.uk-button-danger:hover,
.btn-danger:hover,
.primary-btn:hover {
    background: var(--color-primary-hover) !important;
}

/* ============================================
   SECONDARY BUTTONS
   Outline Grey - #D7D6D1
   Labels: Watchlist, Trailer, Share
   ============================================ */

.uk-button-secondary,
.btn-secondary,
.secondary-btn {
    background: transparent !important;
    color: var(--text-light) !important;
    font-size: 1em;
    padding: 0px 10px !important;
    margin: var(--spacing-xs) !important;
    border-radius: var(--radius-button);
    transition: all var(--transition-fast);
    border: 1px solid #D7D6D1 !important;
    display: inline-block;
    cursor: pointer;
}

.uk-button-secondary:hover,
.btn-secondary:hover,
.secondary-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   DEFAULT BUTTONS
   ============================================ */

.uk-button-default,
.btn-default {
    background: #ccc !important;
    color: var(--text-dark) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-radius: var(--radius-button);
    transition: all var(--transition-fast);
}

.uk-button-default:hover {
    background: #bbb !important;
}

/* ============================================
   CUSTOM BUTTONS
   ============================================ */

.btn,
.btn-2 {
    background-color: var(--bg-transparent) !important;
    color: var(--text-light) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-radius: var(--radius-button);
    border: 1px solid var(--border-color-strong);
    transition: all var(--transition-fast);
    display: inline-block;
    cursor: pointer;
}

.btn:hover {
    background-color: var(--gradient-button) !important;
    color: var(--text-light) !important;
}

.btn-2:hover {
    background-color: var(--text-dark) !important;
    color: var(--text-light) !important;
}

/* ============================================
   DARK BUTTONS
   ============================================ */

.btn-3 {
    background: var(--text-dark) !important;
    color: var(--text-light) !important;
    border-radius: var(--radius-button);
    transition: all var(--transition-fast);
}

.btn-3:hover {
    color: var(--text-light);
}

.btn-4 {
    background: var(--bg-transparent) !important;
    border: 1px solid var(--border-color-strong) !important;
    border-radius: 0px !important;
    color: var(--text-light) !important;
    transition: all var(--transition-fast);
}

/* ============================================
   CUSTOM STYLED BUTTONS
   ============================================ */

.cus-btn {
    border-radius: var(--radius-sm);
    background: var(--bg-transparent);
    color: var(--text-secondary);
    /* border: 1px solid var(--text-secondary); */
    padding: 0px 40px !important;
    text-transform: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.cus-btn:hover {
    color: var(--text-light);
    border: 1px solid var(--text-light);
}

.btn-padd {
    padding: 0px 40px !important;
    text-transform: none;
}

.gt-btn {
    border-radius: var(--radius-sm);
    background-color: #888;
}

.del:hover {
    background: var(--gradient-primary) !important;
    color: var(--text-light) !important;
    border-color: var(--color-error-light) !important;
}

/* ============================================
   PLAN/SUBSCRIPTION BUTTONS
   ============================================ */

.plan-act {
    border-radius: var(--radius-sm);
    border: 1px solid pink;
    border-radius: var(--radius-full);
    background: var(--gradient-button);
    color: var(--text-light);
    padding: var(--spacing-sm) var(--spacing-xl);
    display: inline-block;
}

/* ============================================
   BUTTON WRAPPER
   ============================================ */

.video-action-btn-wrapper {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* ============================================
   UKIT OVERRIDES
   ============================================ */

.uk-button {
    box-shadow: var(--shadow-button);
}

/* ============================================
   LOADING SPINNER
   ============================================ */

.loading-spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top: 4px solid #3498db;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}