/* BUTTONS!!!! */

/* Main Primary Button */
.primary-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* The gradient backgdround */
    color: #ffffff; /* white text */
    border: none; /* no border */
    padding: 16px 32px; /* spacing for larger buttons */
    font-size: 1.1rem; /* slightly enlarged text */
    font-weight: 600; /* bold text */
    border-radius: 12px; /* rounded button corners */
    cursor: pointer; /* pointer cursor when hovering the button */
    transition: all 0.3s ease; /* smooth transitions for hover / active */
    display: flex; /* flex to align icon and text */
    align-items: center; /* center all items vertically */
    gap: 8px; /* spacing between icon and text */
    position: relative; /* needed for the ::before overlay */
    overflow: hidden; /* hides the shine animation overflow */
    min-width: 180px; /* keeps the button width */
    justify-content: center; /* center content horizontally */
}

/* Adds shine effect that slides across button on hover */
.primary-btn::before {
    content: ''; /* Empty element as overlay */
    position: absolute; 
    top: 0;
    left: -100%; /* start fully of screen */
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease; /* smooth sliding */
}

/* Hover state - lift + glow */
.primary-btn:hover {
    transform: translateY(-2px) scale(1.02); /* lifts up and enlarges */
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4); /* glowing shadow */
}

/* Shine effect moves across when hovered */
.primary-btn:hover::before {
    left: 100%; /* slides shine all the way */
}

/* Active State - slightly smaller for click*/
.primary-btn:active {
    transform: translateY(0) scale(0.98);
}

/* The Secondary Button */
.secondary-btn {
    background: rgba(45, 55, 72, 0.8); /* Dark Background */
    color: #e2e8f0; /* Light Text */
    border: 1px solid rgba(113, 128, 150, 0.3); /* Small Border */
    padding: 10px 20px; /* Smaller Padding than the Primary Button */
    font-size: 0.9rem; /* Slightly Smaller text that primary */
    font-weight: 500; /* Medium bold weight */
    border-radius: 8px; /* Soft corners */
    cursor: pointer;
    transition: all 0.2s ease; /* Hover response */
}

/* Hover State - darker background and slightly lift */
.secondary-btn:hover {
    background: rgba(45, 55, 72, 1); /* Solid dark */
    border-color: rgba(113, 128, 150, 0.5); /* Stronger border */
    transform: translateY(-1px); /* Subtle lift movement */
}

/* Container for multiple buttons */
.file-actions {
    display: flex;
    gap: 12px; /* Spacing between buttons */
}

/* Styles for icons placed inside buttons */
.btn-icon {
    font-size: 1.1rem; /* Matches the button text size */
}

/* Loading Effect for button*/
.btn-loading {
    animation: spin 1s linear infinite; /* Reuses @keyframes spin */
}

/* Export and Share buttons: styles like the secondary buttons */
.export-btn, .share-btn {
    background: rgba(45, 55, 72, 0.8);
    color: #e2e8f0;
    border: 1px solid rgba(113, 128, 150, 0.3);
    padding: 8px 16px; /* Small and Compact size*/
    font-size: 0.9rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Hover state for export and share buttons - darker with a lift*/
.export-btn:hover, .share-btn:hover {
    background: rgba(45, 55, 72, 1); /* Solid dark */
    transform: translateY(-1px); /* Slight lift */
}