/* ==========================================================================
   SKYFALL V3 - HUD BUTTONS
   ========================================================================== */
.hud-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    font-family: var(--sf-font);
    font-weight: 600;
    border-radius: 9999px;
    transition: all 0.3s ease;
    cursor: pointer;
    border: none;
    text-decoration: none;
}

.hud-btn-primary {
    background: linear-gradient(to right, #c2410c, #EA580C);
    color: white;
    box-shadow: 0 4px 15px rgba(234, 88, 12, 0.3);
}

.hud-btn-primary:hover {
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.5);
    transform: translateY(-2px);
}

.hud-btn-secondary {
    background: transparent;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.hud-btn-secondary:hover {
    border-color: var(--sf-primary);
    background: rgba(234, 88, 12, 0.1);
}

.hud-btn-pulse {
    animation: sf-pulse 2s infinite;
}

/* HUD Button Icon Styling */
.hud-btn svg,
.hud-btn i,
.hud-btn [data-lucide] {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* Prevent text wrapping in buttons */
.hud-btn span,
.hud-btn {
    white-space: nowrap;
}

.hud-btn-primary svg,
.hud-btn-primary i,
.hud-btn-primary [data-lucide] {
    color: white;
    stroke: white;
}

.hud-btn-secondary svg,
.hud-btn-secondary i,
.hud-btn-secondary [data-lucide] {
    color: white;
    stroke: white;
}

.hud-btn:hover svg,
.hud-btn:hover i,
.hud-btn:hover [data-lucide],
.group:hover svg,
.group:hover i,
.group:hover [data-lucide] {
    transform: translateX(4px);
}

/* Gap between text and icon */
.hud-btn {
    gap: 0.5rem;
}